From 979f7b404cc32639392fcf1aa0dbc90584d2a8bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 1 Feb 2019 10:51:14 +0100 Subject: [PATCH] V8: refactoring of layers add and removal methods --- .../components/editor/umbeditors.directive.js | 234 +++++++++--------- .../less/components/editor/umb-editor.less | 16 +- 2 files changed, 130 insertions(+), 120 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js index 0db239c56a..c25dd0a76f 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js @@ -13,145 +13,145 @@ function addEditor(editor) { + + if (!editor.style) + editor.style = {}; + editor.animating = true; - + showOverlayOnPrevEditor(); - // start collapsing editors to make room for new ones - $timeout(function() { - - var editorsElement = el[0]; - // only select the editors which are allowed to be - // shown so we don't animate a lot of editors which aren't necessary - var moveEditors = editorsElement.querySelectorAll('.umb-editor:nth-last-child(-n+'+ allowedNumberOfVisibleEditors +')'); - - // collapse open editors before opening the new one - var collapseEditorAnimation = anime({ - targets: moveEditors, - width: function(el, index, length) { - // we have to resize all small editors when they move to the - // left side so they don't leave a gap - if(el.classList.contains("umb-editor--small")) { - return "100%"; - } - }, - left: function(el, index, length){ - if(length >= allowedNumberOfVisibleEditors) { - return index * editorIndent; - } - return (index + 1) * editorIndent; - }, + var i = allowedNumberOfVisibleEditors; + var len = scope.editors.length; + while(i= allowedNumberOfVisibleEditors) { - indentValue = allowedNumberOfVisibleEditors * editorIndent; } - - // indent all large editors - if(editor.size !== "small") { - lastEditor.style.left = indentValue + "px"; + + if(scope.editors[i].size !== "small") { + animeConfig.width = "100%"; } + + if(len >= allowedNumberOfVisibleEditors) { + animeConfig.left = i * editorIndent; + } else { + animeConfig.left = (i + 1) * editorIndent; + } + + anime(animeConfig); + + i++; + } + + + // push the new editor to the dom + scope.editors.push(editor); + + + + var indentValue = scope.editors.length * editorIndent; - // animation config - var addEditorAnimation = anime({ - targets: lastEditor, - translateX: [100 + '%', 0], - opacity: [0, 1], - easing: 'easeInOutQuint', - duration: 300, - complete: function() { - $timeout(function(){ - editor.animating = false; - }); - } - }); + // don't allow indent larger than what + // fits the max number of visible editors + if(scope.editors.length >= allowedNumberOfVisibleEditors) { + indentValue = allowedNumberOfVisibleEditors * editorIndent; + } + // indent all large editors + if(editor.size !== "small") { + editor.style.left = indentValue + "px"; + } + + editor.style._tx = 100; + //editor.style.opacity = 0; + editor.style.transform = "translateX("+editor.style._tx+"%)"; + + // animation config + anime({ + targets: editor.style, + _tx: [100, 0], + //opacity: [0, 1], + easing: 'easeOutExpo', + duration: 480, + update: () => { + editor.style.transform = "translateX("+editor.style._tx+"%)"; + scope.$digest(); + }, + complete: function() { + //$timeout(function(){ + editor.animating = false; + scope.$digest(); + //}); + } }); + } function removeEditor(editor) { editor.animating = true; - - $timeout(function(){ - - var editorsElement = el[0]; - var lastEditor = editorsElement.querySelector('.umb-editor:last-of-type'); - - var removeEditorAnimation = anime({ - targets: lastEditor, - translateX: [0, 100 + '%'], - opacity: [1, 0], - easing: 'easeInOutQuint', - duration: 300, - complete: function(a) { - $timeout(function(){ - scope.editors.splice(-1,1); - removeOverlayFromPrevEditor(); - }); - } - }); - - expandEditors(); - + + editor.style._tx = 0; + editor.style.transform = "translateX("+editor.style._tx+"%)"; + + // animation config + anime({ + targets: editor.style, + _tx: [0, 100], + //opacity: [1, 0], + easing: 'easeInExpo', + duration: 360, + update: () => { + editor.style.transform = "translateX("+editor.style._tx+"%)"; + scope.$digest(); + }, + complete: function() { + //$timeout(function(){ + scope.editors.splice(-1,1); + removeOverlayFromPrevEditor(); + scope.$digest(); + //}) + } }); - + + + expandEditors(); + + } function expandEditors() { - // expand hidden editors - $timeout(function() { - - var editorsElement = el[0]; - // only select the editors which are allowed to be - // shown so we don't animate a lot of editors which aren't necessary - // as the last element hasn't been removed from the dom yet we have to select the last four and then skip the last child (as it is the one closing). - var moveEditors = editorsElement.querySelectorAll('.umb-editor:nth-last-child(-n+'+ allowedNumberOfVisibleEditors + 1 +'):not(:last-child)'); - var editorWidth = editorsElement.offsetWidth; - - var expandEditorAnimation = anime({ - targets: moveEditors, - left: function(el, index, length){ - // move the editor all the way to the right if the top one is a small - if(el.classList.contains("umb-editor--small")) { - // only change the size if it is the editor on top - if(index + 1 === length) { - return editorWidth - 500; - } - } else { - return (index + 1) * editorIndent; - } - }, - width: function(el, index, length) { - // set the correct size if the top editor is of type "small" - if(el.classList.contains("umb-editor--small") && index + 1 === length) { - return "500px"; - } - }, + + var i = allowedNumberOfVisibleEditors + 1; + var len = scope.editors.length-1; + while(i