V8: refactoring of layers add and removal methods
This commit is contained in:
Niels Lyngsø
@@ -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<len) {
|
||||
|
||||
var animeConfig = {
|
||||
target: scope.editors[i].style,
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 300
|
||||
});
|
||||
|
||||
// push the new editor to the dom
|
||||
scope.editors.push(editor);
|
||||
|
||||
});
|
||||
|
||||
// slide the new editor in
|
||||
$timeout(function() {
|
||||
|
||||
var editorsElement = el[0];
|
||||
// select the last editor we just pushed
|
||||
var lastEditor = editorsElement.querySelector('.umb-editor:last-of-type');
|
||||
var indentValue = scope.editors.length * editorIndent;
|
||||
|
||||
/* 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") {
|
||||
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<len) {
|
||||
|
||||
var animeConfig = {
|
||||
target: scope.editors[i].style,
|
||||
easing: 'easeInOutQuint',
|
||||
duration: 300
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if(scope.editors[i].size !== "small" && i === len) {
|
||||
animeConfig.width = "500px";
|
||||
}
|
||||
|
||||
if(scope.editors[i].size !== "small" && i === len) {
|
||||
animeConfig.left = editorWidth - 500;
|
||||
} else {
|
||||
animeConfig.left = (index + 1) * editorIndent;
|
||||
}
|
||||
|
||||
anime(animeConfig);
|
||||
|
||||
i++;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// show backdrop on previous editor
|
||||
|
||||
@@ -17,13 +17,14 @@
|
||||
}
|
||||
|
||||
.umb-editor--animating {
|
||||
will-change: transform, opacity, width, left;
|
||||
//will-change: transform, opacity, width, left;
|
||||
will-change: transform, width, left;
|
||||
}
|
||||
|
||||
// hide all infinite editors by default
|
||||
// will be shown through animation
|
||||
.umb-editors .umb-editor {
|
||||
opacity: 0;
|
||||
//opacity: 0;
|
||||
box-shadow: 0px 0 30px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
@@ -35,7 +36,14 @@
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes umb-editor__overlay_fade_opacity {
|
||||
from {
|
||||
opacity:0;
|
||||
}
|
||||
to {
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
.umb-editor__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -44,4 +52,6 @@
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: @zIndexEditor;
|
||||
|
||||
animation:umb-editor__overlay_fade_opacity 600ms;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user