From 21f84bacb65f8989f930299c8d9d38cc156affaa Mon Sep 17 00:00:00 2001 From: zmagod Date: Wed, 31 Aug 2016 08:24:59 +0200 Subject: [PATCH 1/5] set sidebar collapsed elements --- app/assets/javascripts/sidebar.js | 33 +++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/sidebar.js b/app/assets/javascripts/sidebar.js index 57b3dc5d3..eca6b7b8a 100644 --- a/app/assets/javascripts/sidebar.js +++ b/app/assets/javascripts/sidebar.js @@ -17,7 +17,11 @@ function sessionGetCollapsedSidebarElements() { val = "[]"; sessionStorage.setItem(STORAGE_TREE_KEY, val); } - return JSON.parse(val); + console.log(val); + val = JSON.parse(val); + val = val.filter(Number); + console.log(val); + return val; } /** @@ -114,24 +118,41 @@ function setupSidebarTree() { .addClass("glyphicon glyphicon-triangle-right expanded"); // Add IDs to all parent - var i = 0; + var i = 1; _.each($(".tree li.parent_li"), function(el) { $(el).attr("data-toggle-id", i++); }); // Collapse session-stored elements var collapsedIds = sessionGetCollapsedSidebarElements(); - _.each(collapsedIds, function(id) { + console.log($(".line-wrap").parent()); + _.each($(".line-wrap").parent(), function(el) { + console.log(collapsedIds); + var id = $(el).data("toggle-id"); var li = $(".tree li.parent_li[data-toggle-id='" + id + "']"); - if (li.find("li.active").length === 0) { + if( li.hasClass("active") ){ // Only collapse element if it's descendants don't contain the currently // active element + toggleLi(li, + false, + false); + sessionCollapseSidebarElement(id); + } else if ($.inArray( id, collapsedIds) === 0 ) { + console.log("in"); + console.log(id); toggleLi(li, true, false); + sessionExpandSidebarElement(id); } else { - // Else, set the element as expanded - sessionExpandSidebarElement(id); + console.log("-------- last -----"); + console.log(id); + console.log("-------------------"); + // collapse all element + toggleLi(li, + true, + false); + sessionCollapseSidebarElement(id); } }); From b05c3df4d30baf1dc092476e006d97d9835d0488 Mon Sep 17 00:00:00 2001 From: zmagod Date: Wed, 31 Aug 2016 10:25:40 +0200 Subject: [PATCH 2/5] adds toggle id only to elements with modules --- app/assets/javascripts/sidebar.js | 21 +++++++++++-------- .../shared/sidebar/_experiments.html.erb | 2 +- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/sidebar.js b/app/assets/javascripts/sidebar.js index eca6b7b8a..4626ceaaa 100644 --- a/app/assets/javascripts/sidebar.js +++ b/app/assets/javascripts/sidebar.js @@ -13,14 +13,13 @@ var SCREEN_SIZE_LARGE = 928; */ function sessionGetCollapsedSidebarElements() { var val = sessionStorage.getItem(STORAGE_TREE_KEY); + console.log(val); if (val === null) { val = "[]"; sessionStorage.setItem(STORAGE_TREE_KEY, val); } - console.log(val); val = JSON.parse(val); val = val.filter(Number); - console.log(val); return val; } @@ -82,6 +81,8 @@ function sessionToggleSidebar() { */ function setupSidebarTree() { function toggleLi(el, collapse, animate) { + var project = $('.tree-link .line-wrap')[0]; + console.log(project); var children = el .find(" > ul > li"); @@ -119,18 +120,19 @@ function setupSidebarTree() { // Add IDs to all parent var i = 1; - _.each($(".tree li.parent_li"), function(el) { + _.each($('[data-parent="candidate"]'), function(el) { $(el).attr("data-toggle-id", i++); }); // Collapse session-stored elements var collapsedIds = sessionGetCollapsedSidebarElements(); - console.log($(".line-wrap").parent()); - _.each($(".line-wrap").parent(), function(el) { - console.log(collapsedIds); + _.each($('li.parent_li[data-parent="candidate"]'), function(el) { var id = $(el).data("toggle-id"); var li = $(".tree li.parent_li[data-toggle-id='" + id + "']"); if( li.hasClass("active") ){ + console.log("-------------- active -------"); + console.log(id); + console.log("-------------------------------"); // Only collapse element if it's descendants don't contain the currently // active element toggleLi(li, @@ -138,14 +140,15 @@ function setupSidebarTree() { false); sessionCollapseSidebarElement(id); } else if ($.inArray( id, collapsedIds) === 0 ) { - console.log("in"); + console.log("-------------- expanded -------"); console.log(id); + console.log("-------------------------------"); toggleLi(li, - true, + false, false); sessionExpandSidebarElement(id); } else { - console.log("-------- last -----"); + console.log("-------- colapsed -----"); console.log(id); console.log("-------------------"); // collapse all element diff --git a/app/views/shared/sidebar/_experiments.html.erb b/app/views/shared/sidebar/_experiments.html.erb index 588f0ad8e..0304c67e1 100644 --- a/app/views/shared/sidebar/_experiments.html.erb +++ b/app/views/shared/sidebar/_experiments.html.erb @@ -10,7 +10,7 @@ <%= render partial: 'shared/sidebar/my_modules', locals: { experiment: @experiment } %> <% else %> -
  • +
  • <% if can_view_experiment(experiment) %> From e8f971829a7fd279633972bfcde8cb7b2e76d845 Mon Sep 17 00:00:00 2001 From: zmagod Date: Wed, 31 Aug 2016 15:13:17 +0200 Subject: [PATCH 3/5] added project to session storage --- app/assets/javascripts/sidebar.js | 36 +++++++++++++++++++----------- app/views/shared/_sidebar.html.erb | 5 +++-- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/sidebar.js b/app/assets/javascripts/sidebar.js index 4626ceaaa..56f690021 100644 --- a/app/assets/javascripts/sidebar.js +++ b/app/assets/javascripts/sidebar.js @@ -19,7 +19,8 @@ function sessionGetCollapsedSidebarElements() { sessionStorage.setItem(STORAGE_TREE_KEY, val); } val = JSON.parse(val); - val = val.filter(Number); + // console.log(val); + // val = val.filter(Number); return val; } @@ -27,10 +28,17 @@ function sessionGetCollapsedSidebarElements() { * Collapse a specified element in the sidebar. * @param id - The collapsed element's ID. */ -function sessionCollapseSidebarElement(id) { +function sessionCollapseSidebarElement(project, id) { var ids = sessionGetCollapsedSidebarElements(); - if (_.indexOf(ids, id) === -1) { - ids.push(id); + if (_.indexOf(ids[project], id) === -1) { + var stored_projects = _.pluck(ids, 'name'); + if( _.contains(stored_projects, project)){ + _.findWhere(ids, {name: project}).ids.push(id); + } else { + var collapsed = { name: project, ids: [] }; + collapsed.ids.push(id); + ids.push(collapsed); + } sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids)); } } @@ -39,12 +47,15 @@ function sessionCollapseSidebarElement(id) { * Expand a specified element in the sidebar. * @param id - The expanded element's ID. */ -function sessionExpandSidebarElement(id) { +function sessionExpandSidebarElement(project, id) { var ids = sessionGetCollapsedSidebarElements(); var index = _.indexOf(ids, id); if (index !== -1) { + ids.splice(index, 1); - sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids)); + var items = {}; + items[project] = ids; + sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(items)); } } @@ -81,8 +92,6 @@ function sessionToggleSidebar() { */ function setupSidebarTree() { function toggleLi(el, collapse, animate) { - var project = $('.tree-link .line-wrap')[0]; - console.log(project); var children = el .find(" > ul > li"); @@ -125,6 +134,7 @@ function setupSidebarTree() { }); // Collapse session-stored elements + var project = $('#sidebar-project-name').text(); var collapsedIds = sessionGetCollapsedSidebarElements(); _.each($('li.parent_li[data-parent="candidate"]'), function(el) { var id = $(el).data("toggle-id"); @@ -138,7 +148,7 @@ function setupSidebarTree() { toggleLi(li, false, false); - sessionCollapseSidebarElement(id); + sessionCollapseSidebarElement(project, id); } else if ($.inArray( id, collapsedIds) === 0 ) { console.log("-------------- expanded -------"); console.log(id); @@ -146,7 +156,7 @@ function setupSidebarTree() { toggleLi(li, false, false); - sessionExpandSidebarElement(id); + sessionExpandSidebarElement(project, id); } else { console.log("-------- colapsed -----"); console.log(id); @@ -155,7 +165,7 @@ function setupSidebarTree() { toggleLi(li, true, false); - sessionCollapseSidebarElement(id); + sessionCollapseSidebarElement(project, id); } }); @@ -169,10 +179,10 @@ function setupSidebarTree() { if (el.find(" > ul > li").is(":visible")) { toggleLi(el, true, true); - sessionCollapseSidebarElement(el.data("toggle-id")); + sessionCollapseSidebarElement(project, el.data("toggle-id")); } else { toggleLi(el, false, true); - sessionExpandSidebarElement(el.data("toggle-id")); + sessionExpandSidebarElement(project, el.data("toggle-id")); } e.stopPropagation(); diff --git a/app/views/shared/_sidebar.html.erb b/app/views/shared/_sidebar.html.erb index 649557a4f..43cd6170c 100644 --- a/app/views/shared/_sidebar.html.erb +++ b/app/views/shared/_sidebar.html.erb @@ -18,7 +18,7 @@
  • - <%= @project.name %> + <%= @project.name %>
    • <% else %> @@ -27,7 +27,8 @@ <%= link_to @project.name, project_action_to_link_to(@project), - title: @project.name %> + title: @project.name, + id: 'sidebar-project-name' %> <% end %> From 55ba2de41f24a1c309200835cf30383c65c53c0f Mon Sep 17 00:00:00 2001 From: zmagod Date: Wed, 31 Aug 2016 16:34:08 +0200 Subject: [PATCH 4/5] fixes object duplication --- app/assets/javascripts/sidebar.js | 36 +++++++++++++++++++------------ 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/sidebar.js b/app/assets/javascripts/sidebar.js index 56f690021..9ceaf9f94 100644 --- a/app/assets/javascripts/sidebar.js +++ b/app/assets/javascripts/sidebar.js @@ -29,18 +29,21 @@ function sessionGetCollapsedSidebarElements() { * @param id - The collapsed element's ID. */ function sessionCollapseSidebarElement(project, id) { + console.log("collapsed: " + id); var ids = sessionGetCollapsedSidebarElements(); - if (_.indexOf(ids[project], id) === -1) { - var stored_projects = _.pluck(ids, 'name'); - if( _.contains(stored_projects, project)){ + var item = _.findWhere( ids, {name: project}); + var collapsed = { name: project, ids: [] }; + var stored_projects = _.pluck(ids, 'name'); + + if( _.contains(stored_projects, project)){ + if ( item && _.indexOf(item.ids, id) === -1) { _.findWhere(ids, {name: project}).ids.push(id); - } else { - var collapsed = { name: project, ids: [] }; - collapsed.ids.push(id); - ids.push(collapsed); } - sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids)); + } else { + collapsed.ids.push(id); + ids.push(collapsed); } + sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids)); } /** @@ -49,13 +52,18 @@ function sessionCollapseSidebarElement(project, id) { */ function sessionExpandSidebarElement(project, id) { var ids = sessionGetCollapsedSidebarElements(); - var index = _.indexOf(ids, id); - if (index !== -1) { + var item = _.findWhere( ids, {name: project}); + var index = -1; + if ( item ) { + index = _.indexOf( + item.ids, + id + ); + } - ids.splice(index, 1); - var items = {}; - items[project] = ids; - sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(items)); + if (index !== -1) { + item.ids.splice(index, 1); + sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids)); } } From ac7ac95da87f25c5f8e653d5eecd161ddebe05bc Mon Sep 17 00:00:00 2001 From: zmagod Date: Thu, 1 Sep 2016 10:38:20 +0200 Subject: [PATCH 5/5] [fixes SCI-332] --- app/assets/javascripts/sidebar.js | 120 ++++++++++++++++------------- app/views/shared/_sidebar.html.erb | 5 +- 2 files changed, 68 insertions(+), 57 deletions(-) diff --git a/app/assets/javascripts/sidebar.js b/app/assets/javascripts/sidebar.js index 9ceaf9f94..ba7e38cdb 100644 --- a/app/assets/javascripts/sidebar.js +++ b/app/assets/javascripts/sidebar.js @@ -13,15 +13,11 @@ var SCREEN_SIZE_LARGE = 928; */ function sessionGetCollapsedSidebarElements() { var val = sessionStorage.getItem(STORAGE_TREE_KEY); - console.log(val); if (val === null) { val = "[]"; sessionStorage.setItem(STORAGE_TREE_KEY, val); } - val = JSON.parse(val); - // console.log(val); - // val = val.filter(Number); - return val; + return JSON.parse(val); } /** @@ -29,15 +25,14 @@ function sessionGetCollapsedSidebarElements() { * @param id - The collapsed element's ID. */ function sessionCollapseSidebarElement(project, id) { - console.log("collapsed: " + id); var ids = sessionGetCollapsedSidebarElements(); - var item = _.findWhere( ids, {name: project}); - var collapsed = { name: project, ids: [] }; - var stored_projects = _.pluck(ids, 'name'); + var item = _.findWhere(ids, { prid: project }); + var collapsed = { prid: project, ids: [] }; + var stored_projects = _.pluck(ids, 'prid'); - if( _.contains(stored_projects, project)){ - if ( item && _.indexOf(item.ids, id) === -1) { - _.findWhere(ids, {name: project}).ids.push(id); + if ( _.contains(stored_projects, project ) ){ + if ( item && _.indexOf(item.ids, id) === -1 ) { + _.findWhere(ids, { prid: project }).ids.push(id); } } else { collapsed.ids.push(id); @@ -52,16 +47,13 @@ function sessionCollapseSidebarElement(project, id) { */ function sessionExpandSidebarElement(project, id) { var ids = sessionGetCollapsedSidebarElements(); - var item = _.findWhere( ids, {name: project}); + var item = _.findWhere(ids, { prid: project}); var index = -1; if ( item ) { - index = _.indexOf( - item.ids, - id - ); + index = _.indexOf(item.ids, id); } - if (index !== -1) { + if ( index !== -1 ) { item.ids.splice(index, 1); sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids)); } @@ -136,46 +128,65 @@ function setupSidebarTree() { .addClass("glyphicon glyphicon-triangle-right expanded"); // Add IDs to all parent - var i = 1; + var i = 0; _.each($('[data-parent="candidate"]'), function(el) { $(el).attr("data-toggle-id", i++); }); - // Collapse session-stored elements - var project = $('#sidebar-project-name').text(); + // Gets the current project and the session-stored elements + var project = $('[data-project-id]').data('projectId'); var collapsedIds = sessionGetCollapsedSidebarElements(); - _.each($('li.parent_li[data-parent="candidate"]'), function(el) { - var id = $(el).data("toggle-id"); - var li = $(".tree li.parent_li[data-toggle-id='" + id + "']"); - if( li.hasClass("active") ){ - console.log("-------------- active -------"); - console.log(id); - console.log("-------------------------------"); - // Only collapse element if it's descendants don't contain the currently - // active element - toggleLi(li, - false, - false); + + // Get the current project stered elements + var currentProjectIds = _.findWhere(collapsedIds, { prid: project }); + if ( currentProjectIds ){ + currentProjectIds.ids = _.filter(currentProjectIds.ids, + function(val) { + return val !== null; + }).join(", "); + + // Collapse session-stored elements + _.each($('li.parent_li[data-parent="candidate"]'), function(el) { + var id = $(el).data("toggle-id"); + var li = $(".tree li.parent_li[data-toggle-id='" + id + "']"); + + if( li.hasClass("active") || li.find(".active").length > 0){ + // Always expand the active element + toggleLi(li, + false, + false); + } else if ( $.inArray( id.toString(), currentProjectIds.ids.split(", ")) !== -1 ) { + // Expande element + toggleLi(li, + false, + false); + } else { + // Collapse the session-stored element + toggleLi(li, + true, + false); + } + }); + } else { + // Collapse all + _.each($('li.parent_li[data-parent="candidate"]'), function(el) { + var id = $(el).data("toggle-id"); + var li = $(".tree li.parent_li[data-toggle-id='" + id + "']"); + + if( li.hasClass("active") ){ + // Always expand the active element + toggleLi(li, + false, + false); sessionCollapseSidebarElement(project, id); - } else if ($.inArray( id, collapsedIds) === 0 ) { - console.log("-------------- expanded -------"); - console.log(id); - console.log("-------------------------------"); - toggleLi(li, - false, - false); - sessionExpandSidebarElement(project, id); - } else { - console.log("-------- colapsed -----"); - console.log(id); - console.log("-------------------"); - // collapse all element - toggleLi(li, - true, - false); - sessionCollapseSidebarElement(project, id); - } - }); + } else { + // Element collapsed by default + toggleLi(li, + true, + false); + } + }); + } // Add onclick callback to every triangle icon $(".tree li.parent_li ") @@ -187,12 +198,11 @@ function setupSidebarTree() { if (el.find(" > ul > li").is(":visible")) { toggleLi(el, true, true); - sessionCollapseSidebarElement(project, el.data("toggle-id")); + sessionExpandSidebarElement(project, el.data("toggle-id")); } else { toggleLi(el, false, true); - sessionExpandSidebarElement(project, el.data("toggle-id")); + sessionCollapseSidebarElement(project, el.data("toggle-id")); } - e.stopPropagation(); return false; }); diff --git a/app/views/shared/_sidebar.html.erb b/app/views/shared/_sidebar.html.erb index 43cd6170c..3992602fa 100644 --- a/app/views/shared/_sidebar.html.erb +++ b/app/views/shared/_sidebar.html.erb @@ -18,7 +18,8 @@
  • - <%= @project.name %> + <%= @project.name %>
    • <% else %> @@ -28,7 +29,7 @@ <%= link_to @project.name, project_action_to_link_to(@project), title: @project.name, - id: 'sidebar-project-name' %> + data: { project_id: @project.id } %> <% end %>