yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reenable infinite editing animations

Browse Source
This commit is contained in:
Mads Rasmussen
2018-12-17 13:55:08 +01:00
parent ebc689032d
commit 4068dca938
2 changed files with 20 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js
View File

@@ -25,25 +25,6 @@
// 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 +')');
// this is a temporary fix because the animations doesn't perform well
// TODO: fix animation and remove this
moveEditors.forEach(function(editor, index){
// resize the small editors to 100% so we can easily slide them
if(editor.classList.contains("umb-editor--small")) {
editor.style.width = "100%";
}
// set left position to indent the editors
if(scope.editors.length >= allowedNumberOfVisibleEditors) {
$(editor).css({"left": index * editorIndent});
} else {
$(editor).css({"left": (index + 1) * editorIndent});
}
});
/*
// collapse open editors before opening the new one
var collapseEditorAnimation = anime({
targets: moveEditors,
@@ -61,9 +42,8 @@
return (index + 1) * editorIndent;
},
easing: 'easeInOutQuint',
duration: 500
duration: 300
});
*/
// push the new editor to the dom
scope.editors.push(editor);
@@ -95,7 +75,7 @@
translateX: [100 + '%', 0],
opacity: [0, 1],
easing: 'easeInOutQuint',
duration: 400,
duration: 300,
complete: function() {
$timeout(function(){
editor.animating = false;
@@ -126,11 +106,12 @@
$timeout(function(){
scope.editors.splice(-1,1);
removeOverlayFromPrevEditor();
expandEditors();
});
}
});
expandEditors();
});
}
@@ -142,42 +123,32 @@
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+'+ 4 +')');
// 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;
// this is a temporary fix because the animations doesn't perform well
// TODO: fix animation and remove this
moveEditors.forEach(function(editor, index){
// set left position
$(editor).css({"left": (index + 1) * editorIndent});
// if the new top editor is a small editor we will have to resize it back to the right size on
// move it all the way to the right side
if(editor.classList.contains("umb-editor--small") && index + 1 === moveEditors.length) {
editor.style.width = "500px";
$(editor).css({"left": ""});
}
});
// We need to figure out how to performance optimize this
// TODO: optimize animation
/*
var expandEditorAnimation = anime({
targets: moveEditors,
left: function(el, index, length){
return (index + 1) * editorIndent;
// 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) {
if(el.classList.contains("umb-editor--small")) {
// set the correct size if the top editor is of type "small"
if(el.classList.contains("umb-editor--small") && index + 1 === length) {
return "500px";
}
},
easing: 'easeInOutQuint',
duration: 500,
completed: function() {
}
duration: 300
});
*/
});

2
src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
View File

@@ -42,6 +42,6 @@
bottom: 0;
right: 0;
left: 0;
background: rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
z-index: @zIndexEditor;
}