scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-12-17 14:19:05 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2411 from okriuchykhin/ok_SCI_4319_v2

Browse source 
Fix unfolding of the active element in sidebar [SCI-4319]
This commit is contained in:
Alex Kriuchykhin 2020-02-19 10:24:13 +01:00 • committed by GitHub
commit d73ea73b04
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
app/assets/javascripts/sidebar.js
View file

@ -4,28 +4,29 @@
*/ */
/* global I18n _ */ /* global I18n _ */
(function(global) { (function() {
var STORAGE_TREE_KEY = 'scinote-sidebar-tree-collapsed-ids'; const SIDEBAR_ID = '#slide-panel';
const STORAGE_TREE_KEY = 'scinote-sidebar-tree-collapsed-ids';
/** /**
* Get all collapsed sidebar elements. * Get all collapsed sidebar elements.
* @return An array of sidebar element IDs. * @return An array of sidebar element IDs.
*/ */
global.sessionGetCollapsedSidebarElements = function() { function sessionGetCollapsedSidebarElements() {
var val = sessionStorage.getItem(STORAGE_TREE_KEY); var val = sessionStorage.getItem(STORAGE_TREE_KEY);
if (val === null) { if (val === null) {
val = '[]'; val = '[]';
sessionStorage.setItem(STORAGE_TREE_KEY, val); sessionStorage.setItem(STORAGE_TREE_KEY, val);
} }
return JSON.parse(val); return JSON.parse(val);
}; }
/** /**
* Collapse a specified element in the sidebar. * Collapse a specified element in the sidebar.
* @param id - The collapsed element's ID. * @param id - The collapsed element's ID.
*/ */
global.sessionCollapseSidebarElement = function(project, id) { function sessionCollapseSidebarElement(project, id) {
var ids = global.sessionGetCollapsedSidebarElements(); var ids = sessionGetCollapsedSidebarElements();
var item = _.findWhere(ids, { prid: project }); var item = _.findWhere(ids, { prid: project });
var collapsed = { prid: project, ids: [] }; var collapsed = { prid: project, ids: [] };
var storedProjects = _.pluck(ids, 'prid'); var storedProjects = _.pluck(ids, 'prid');
@ -39,34 +40,14 @@
ids.push(collapsed); ids.push(collapsed);
} }
sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids)); sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids));
}; }
/**
* Expand a specified element in the sidebar.
* @param id - The expanded element's ID.
*/
global.sessionExpandSidebarElement = function(project, id, elements) {
var ids = global.sessionGetCollapsedSidebarElements();
var item = _.findWhere(ids, { prid: project});
var index = -1;
if (item) {
index = _.indexOf(item.ids, id);
global.recalculateElementsPositions(ids, item, elements);
}
if (index !== -1) {
item.ids.splice(index, 1);
sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids));
}
};
/** /**
* Recalculate the position of the elements after an experiment * Recalculate the position of the elements after an experiment
* is added or archived. * is added or archived.
*/ */
global.recalculateElementsPositions = function(ids, item, elements) { function recalculateElementsPositions(ids, item, elements) {
var diff; let diff;
if (item.eleNum > elements) { if (item.eleNum > elements) {
diff = item.eleNum - elements; diff = item.eleNum - elements;
@ -86,10 +67,30 @@
} }
} }
/**
* Expand a specified element in the sidebar.
* @param id - The expanded element's ID.
*/
function sessionExpandSidebarElement(project, id, elements) {
var ids = sessionGetCollapsedSidebarElements();
var item = _.findWhere(ids, { prid: project });
var index = -1;
if (item) {
index = _.indexOf(item.ids, id);
recalculateElementsPositions(ids, item, elements);
}
if (index !== -1) {
item.ids.splice(index, 1);
sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids));
}
}
/** /**
* Setup the sidebar collapsing & expanding functionality. * Setup the sidebar collapsing & expanding functionality.
*/ */
global.setupSidebarTree = function() { function setupSidebarTree() {
$('.tree a').click(function() { $('.tree a').click(function() {
var url = new URL($(this).attr('href')); var url = new URL($(this).attr('href'));
url.searchParams.set('scroll', $('.tree').scrollTop()); url.searchParams.set('scroll', $('.tree').scrollTop());
@ -122,7 +123,7 @@
// Make active current project/experiment/task // Make active current project/experiment/task
function activateCurrent() { function activateCurrent() {
var sidebar = $('#slide-panel'); var sidebar = $(SIDEBAR_ID);
var projectId = sidebar.data('current-project'); var projectId = sidebar.data('current-project');
var experimentId = sidebar.data('current-experiment'); var experimentId = sidebar.data('current-experiment');
var taskId = sidebar.data('current-task'); var taskId = sidebar.data('current-task');
@ -172,28 +173,24 @@
); );
// Get the session-stored elements // Get the session-stored elements
var collapsedIds = global.sessionGetCollapsedSidebarElements(); let collapsedIds = sessionGetCollapsedSidebarElements();
// Get the current project stored elements // Get the current project stored elements
var currentProjectIds = _.findWhere(collapsedIds, { prid: project }); let currentProjectIds = _.findWhere(collapsedIds, { prid: project });
if ( currentProjectIds ){ if (currentProjectIds) {
currentProjectIds.ids = _.filter(currentProjectIds.ids, currentProjectIds.ids = _.filter(currentProjectIds.ids, function(val) { return val !== null; }).join(', ');
function(val) {
return val !== null;
}).join(", ");
// Collapse session-stored elements // Collapse session-stored elements
_.each($('li.parent_li[data-parent="candidate"]'), function(el) { _.each($('li.parent_li[data-parent="candidate"]'), function(el) {
var id = $(el).data("toggle-id"); var id = $(el).data('toggle-id');
var li = $(".tree li.parent_li[data-toggle-id='" + id + "']"); var li = $(".tree li.parent_li[data-toggle-id='" + id + "']");
if( li.hasClass("active") || li.find(".active").length > 0){ if (li.hasClass('active') || li.find('.active').length > 0) {
// Always expand the active element // Always expand the active element
toggleLi(li, toggleLi(li,
false, false,
false); false);
} else if ( $.inArray( id.toString(), } else if ($.inArray(id.toString(), currentProjectIds.ids.split(', ')) !== -1) {
currentProjectIds.ids.split(", ")) !== -1 ) {
// Expande element // Expande element
toggleLi(li, toggleLi(li,
false, false,
@ -208,70 +205,54 @@
} else { } else {
// Collapse all // Collapse all
_.each($('li.parent_li[data-parent="candidate"]'), function(el) { _.each($('li.parent_li[data-parent="candidate"]'), function(el) {
var id = $(el).data("toggle-id"); var id = $(el).data('toggle-id');
var li = $(".tree li.parent_li[data-toggle-id='" + id + "']"); var li = $(".tree li.parent_li[data-toggle-id='" + id + "']");
if( li.hasClass("active") ){ if (li.hasClass('active') || li.find('.active').length > 0) {
// Always expand the active element // Always expand the active element
toggleLi(li, toggleLi(li, false, false);
false,
false);
sessionCollapseSidebarElement(project, id); sessionCollapseSidebarElement(project, id);
} else { } else {
// Element collapsed by default // Element collapsed by default
toggleLi(li, toggleLi(li, true, false);
true,
false);
} }
}); });
} }
// Add onclick callback to every triangle icon // Add onclick callback to every triangle icon
$(".tree li.parent_li ") $('.tree li.parent_li ').find('> span i').on('click', function(e) {
.find("> span i") let el = $(this).parent('span').parent('li.parent_li');
.on("click", function (e) {
var el = $(this)
.parent("span")
.parent("li.parent_li");
if (el.find(" > ul > li").is(":visible")) { if (el.find(' > ul > li').is(':visible')) {
toggleLi(el, true, true); toggleLi(el, true, true);
sessionExpandSidebarElement(project, sessionExpandSidebarElement(project, el.data('toggle-id'), $('[data-parent="candidate"]').length);
el.data("toggle-id"),
$('[data-parent="candidate"]').length );
} else { } else {
toggleLi(el, false, true); toggleLi(el, false, true);
sessionCollapseSidebarElement(project, el.data("toggle-id")); sessionCollapseSidebarElement(project, el.data('toggle-id'));
} }
e.stopPropagation(); e.stopPropagation();
return false; return false;
}); });
// Add bold style to all levels of selected element // Add bold style to all levels of selected element
$(".tree li.active ") $('.tree li.active ').parents('.parent_li[data-parent="candidate"]').find('> span a').css('font-weight', 'bold');
.parents('.parent_li[data-parent="candidate"]')
.find("> span a")
.css("font-weight", "bold");
// Add custom borders to tree links // Add custom borders to tree links
$(".tree li span.tree-link ").after("<div class='border-custom'></div>"); $('.tree li span.tree-link ').after("<div class='border-custom'></div>");
} }
// Resize the sidebar to accomodate to the page size // Resize the sidebar to accomodate to the page size
global.resizeSidebarContents = function() { function resizeSidebarContents() {
var tree = $("#sidebar-wrapper .tree"); var tree = $('#sidebar-wrapper .tree');
// Set vertical scrollbar on navigation tree // Set vertical scrollbar on navigation tree
if (tree.length && tree.length == 1) { if (tree.length && tree.length === 1) {
tree.css( tree.css('height', ($(window).height() - tree.position().top - 50) + 'px');
"height",
($(window).height() - tree.position().top - 50) + "px"
);
} }
} }
function scrollToSelectedItem() { function scrollToSelectedItem() {
$('#slide-panel .tree').scrollTo($('.tree').data('scroll')); $(`${SIDEBAR_ID} .tree`).scrollTo($('.tree').data('scroll'));
} }
// Initialize click listeners // Initialize click listeners