From 4f65f3b78cba91e0b175bbc72c6da0337a90c222 Mon Sep 17 00:00:00 2001 From: Mark Friedrich Date: Sat, 30 Dec 2017 22:01:33 +0100 Subject: [PATCH] - added map tab sorting (drag&drop), closed #571 - JS refactoring for core map sync, moved from "callback functions" to "Promises" - improved JS click observer, moved to "parent" DOM elements with "bubbling up" --- js/app/mappage.js | 39 +- js/app/module_map.js | 1055 ++++++++++------- js/app/ui/dialog/map_settings.js | 7 +- public/css/pathfinder.css | 4 +- public/js/v1.3.2/app/mappage.js | 39 +- public/js/v1.3.2/app/module_map.js | 1055 ++++++++++------- .../js/v1.3.2/app/ui/dialog/map_settings.js | 7 +- sass/_main.scss | 9 +- sass/_variables.scss | 2 +- sass/layout/_main.scss | 26 +- 10 files changed, 1277 insertions(+), 966 deletions(-) diff --git a/js/app/mappage.js b/js/app/mappage.js index 30da223c..8c327729 100644 --- a/js/app/mappage.js +++ b/js/app/mappage.js @@ -10,10 +10,10 @@ define([ 'app/logging', 'app/page', 'app/map/worker', + 'app/module_map', 'app/key', - 'app/ui/form_element', - 'app/module_map' -], ($, Init, Util, Render, Logging, Page, MapWorker) => { + 'app/ui/form_element' +], ($, Init, Util, Render, Logging, Page, MapWorker, ModuleMap) => { 'use strict'; @@ -112,12 +112,12 @@ define([ switch(MsgWorkerMessage.task()){ case 'mapUpdate': Util.updateCurrentMapData( MsgWorkerMessage.data() ); - mapModule.updateMapModule(); + ModuleMap.updateMapModule(mapModule); break; case 'mapAccess': case 'mapDeleted': Util.deleteCurrentMapData( MsgWorkerMessage.data() ); - mapModule.updateMapModule(); + ModuleMap.updateMapModule(mapModule); break; } @@ -266,22 +266,24 @@ define([ Util.setCurrentMapData(data.mapData); // load/update main map module - mapModule.updateMapModule(); + ModuleMap.updateMapModule(mapModule).then(() => { + // map update done, init new trigger - // get the current update delay (this can change if a user is inactive) - let mapUpdateDelay = Util.getCurrentTriggerDelay( logKeyServerMapData, 0 ); + // get the current update delay (this can change if a user is inactive) + let mapUpdateDelay = Util.getCurrentTriggerDelay( logKeyServerMapData, 0 ); - // init new trigger - initMapUpdatePing(false); + // init new trigger + initMapUpdatePing(false); - // initial start for the userUpdate trigger - // this should only be called at the first time! - if(updateTimeouts.userUpdate === 0){ - // start user update trigger after map loaded - updateTimeouts.userUpdate = setTimeout(() => { - triggerUserUpdatePing(); - }, 1000); - } + // initial start for the userUpdate trigger + // this should only be called at the first time! + if(updateTimeouts.userUpdate === 0){ + // start user update trigger after map loaded + updateTimeouts.userUpdate = setTimeout(() => { + triggerUserUpdatePing(); + }, 1000); + } + }); } }).fail(handleAjaxErrorResponse); @@ -289,7 +291,6 @@ define([ // skip this mapUpdate trigger and init next one initMapUpdatePing(false); } - }; // ping for user data update ======================================================= diff --git a/js/app/module_map.js b/js/app/module_map.js index 518fd1b7..e5cb77f5 100644 --- a/js/app/module_map.js +++ b/js/app/module_map.js @@ -34,8 +34,9 @@ define([ mapTabBarId: 'pf-map-tabs', // id for map tab bar mapTabIdPrefix: 'pf-map-tab-', // id prefix for a map tab mapTabClass: 'pf-map-tab', // class for a map tab - mapTabLinkTextClass: 'nav-tabs-link', // class for span elements in a tab + mapTabDragHandlerClass: 'pf-map-tab-handler', // class for drag handler mapTabIconClass: 'pf-map-tab-icon', // class for map icon + mapTabLinkTextClass: 'nav-tabs-link', // class for span elements in a tab mapTabSharedIconClass: 'pf-map-tab-shared-icon', // class for map shared icon mapTabContentClass: 'pf-map-tab-content', // class for tab content container mapTabContentSystemInfoClass: 'pf-map-tab-content-system', @@ -77,28 +78,25 @@ define([ }; /** - * set Tab Observer, events are triggered within map.js + * set mapContent Observer, events are triggered within map.js + * @param tabElement */ - $.fn.setTabContentObserver = function(){ - return this.each(function(){ - let tabContentElement = $(this); - // update Tab Content with system data information - tabContentElement.on('pf:drawSystemModules', function(e){ - drawSystemModules($(e.target)); - }); - - tabContentElement.on('pf:removeSystemModules', function(e){ - removeSystemModules($(e.target)); - }); - - tabContentElement.on('pf:drawConnectionModules', function(e, data){ - drawConnectionModules($(e.target), data); - }); - - tabContentElement.on('pf:removeConnectionModules', function(e){ - removeConnectionModules($(e.target)); - }); + let setMapContentObserver = (tabElement) => { + tabElement.on('pf:drawSystemModules', '.' + config.mapTabContentClass, function(e){ + drawSystemModules($(e.target)); }); + + tabElement.on('pf:removeSystemModules', '.' + config.mapTabContentClass, function(e){ + removeSystemModules($(e.target)); + }); + + tabElement.on('pf:drawConnectionModules', '.' + config.mapTabContentClass, function(e, data){ + drawConnectionModules($(e.target), data); + }); + + tabElement.on('pf:removeConnectionModules', '.' + config.mapTabContentClass, function(e){ + removeConnectionModules($(e.target)); + }) ; }; /** @@ -167,27 +165,6 @@ define([ * @param data */ let drawModule = (parentElement, Module, mapId, data) => { - /** - * get module position within its parentElement - * @param parentElement - * @param Module - * @param defaultPosition - * @returns {number} - */ - let getModulePosition = (parentElement, Module, defaultPosition) => { - let position = 0; - if(defaultPosition > 0){ - parentElement.children().each((i, moduleElement) => { - position = i + 1; - let tempPosition = parseInt(moduleElement.getAttribute('data-position')) || 0; - if(tempPosition >= defaultPosition){ - position--; - return false; - } - }); - } - return position; - }; /** * show/render a Module @@ -225,7 +202,7 @@ define([ } // find correct position for new moduleElement ---------------------------------------------------- - let position = getModulePosition(this.parentElement, Module, defaultPosition); + let position = getModulePosition(this.parentElement, defaultPosition); this.moduleElement.attr('data-position', defaultPosition); this.moduleElement.attr('data-module', Module.config.moduleName); @@ -238,7 +215,7 @@ define([ this.parentElement.prepend(this.moduleElement); } - if(typeof Module.beforeShow === 'function'){ + if (typeof Module.beforeShow === 'function') { Module.beforeShow(this.moduleElement, moduleElement.data('data')); } @@ -266,11 +243,11 @@ define([ // check if module already exists let moduleElement = parentElement.find('.' + Module.config.moduleTypeClass); - if(moduleElement.length > 0){ + if (moduleElement.length > 0) { removeModule(moduleElement, Module, () => { showPanel(parentElement, Module, mapId, data); }); - }else{ + } else { showPanel(parentElement, Module, mapId, data); } }; @@ -460,13 +437,14 @@ define([ /** * load all structure elements into a TabsContent div (tab body) + * @param tabContentElements */ let initContentStructure = (tabContentElements) => { tabContentElements.each(function(){ let tabContentElement = $(this); let mapId = parseInt( tabContentElement.attr('data-mapid') ); - // "add" tab does not need a structure and obervers... + // "add" tab does not need a structure and observer... if(mapId > 0){ let contentStructure = $('
', { class: ['row', config.mapTabContentRow].join(' ') @@ -483,6 +461,7 @@ define([ // append grid structure tabContentElement.append(contentStructure); + // set content structure observer setContentStructureObserver(contentStructure, mapId); } }); @@ -491,9 +470,10 @@ define([ /** * get a fresh tab element * @param options + * @param currentUserData * @returns {*|jQuery|HTMLElement} */ - let getTabElement = (options) => { + let getMapTabElement = (options, currentUserData) => { let tabElement = $('
', { id: config.mapTabElementId }); @@ -501,7 +481,7 @@ define([ let tabBar = $('