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

wip animation experiments

Browse Source
This commit is contained in:
Mads Rasmussen
2018-04-25 10:29:18 +02:00
parent 7e383ea961
commit 79f303ddcf
12 changed files with 243 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/Umbraco.Web.UI.Client/bower.json
View File

@@ -32,7 +32,8 @@
"moment": "~2.10.3",
"ace-builds": "^1.2.3",
"clipboard": "1.7.1",
"font-awesome": "~4.2"
"font-awesome": "~4.2",
"animejs": "^2.2.0"
},
"install": {
"path": "lib-bower",
@@ -44,11 +45,11 @@
],
"sources": {
"moment": [
"bower_components/moment/min/moment.min.js",
"bower_components/moment/min/moment-with-locales.js",
"bower_components/moment/min/moment-with-locales.min.js",
"bower_components/moment/locale/*.js"
],
"bower_components/moment/min/moment.min.js",
"bower_components/moment/min/moment-with-locales.js",
"bower_components/moment/min/moment-with-locales.min.js",
"bower_components/moment/locale/*.js"
],
"underscore": [
"bower_components/underscore/underscore-min.js",
"bower_components/underscore/underscore-min.map"
@@ -73,7 +74,8 @@
"ng-file-upload": "bower_components/ng-file-upload/ng-file-upload.min.js",
"jquery-ui": "bower_components/jquery-ui/jquery-ui.min.js",
"jquery-migrate": "bower_components/jquery-migrate/jquery-migrate.min.js",
"clipboard": "bower_components/clipboard/dist/clipboard.min.js"
"clipboard": "bower_components/clipboard/dist/clipboard.min.js",
"animejs": "bower_components/animejs/anime.min.js"
}
}
}

7
src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
View File

@@ -502,6 +502,13 @@
}
// methods for infinite editing
$scope.close = function() {
if($scope.model.close) {
$scope.model.close($scope.model);
}
};
//ensure to unregister from all events!
$scope.$on('$destroy', function () {
for (var e in evts) {

7
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditor.directive.js
View File

@@ -3,18 +3,13 @@
function EditorDirective() {
function link(scope, el, attr, ctrl) {
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/editor/umb-editor.html',
scope: {
model: "="
},
link: link
}
};
return directive;

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

@@ -0,0 +1,163 @@
(function () {
'use strict';
function EditorsDirective($timeout, eventsService) {
function link(scope, el, attr, ctrl) {
scope.editors = [];
var evts = [];
var minAvailableSpace = 1000;
var allowedNumberOfVisibleEditors = 3;
function addEditor(editor) {
// start collapsing editors to make room for new ones
if(scope.editors.length >= allowedNumberOfVisibleEditors) {
console.log("doo something NOW");
var editorsElement = el[0];
var moveEditors = editorsElement.querySelectorAll('.umb-editor:nth-last-child(-n+'+ allowedNumberOfVisibleEditors +')');
// var moveEditors = editorsElement.querySelectorAll('.umb-editor');
var collapseEditorAnimation = anime({
targets: moveEditors,
left: {
value: '-=80'
},
easing: 'easeInOutQuint',
duration: 200,
update: function(a) {
//console.log('Animation update, called every frame', a.duration);
},
begin: function(a) {
console.log('collapse begin', a.duration);
},
complete: function(a) {
console.log('collapse done', a.duration);
}
});
}
scope.editors.push(editor);
$timeout(function() {
var editorsElement = el[0];
var lastEditor = editorsElement.querySelector('.umb-editor:last-of-type');
var indentValue = scope.editors.length * 80;
// don't allow indent larger than what
// fits the max number of visible editors
if(scope.editors.length >= allowedNumberOfVisibleEditors) {
indentValue = allowedNumberOfVisibleEditors * 80;
}
var translateX = [100 + '%', 0];
// indent all large editors
if(editor.size !== "small") {
lastEditor.style.left = indentValue + "px";
}
var addEditorAnimation = anime({
targets: lastEditor,
translateX: translateX,
opacity: [0, 1],
easing: 'easeInOutQuint',
duration: 200,
update: function(a) {
//console.log('Animation update, called every frame', a.duration);
},
begin: function(a) {
console.log('Animation begin after delay:', a.duration);
},
complete: function(a) {
console.log('Animation end', a.duration);
}
});
});
}
function removeEditor(editor) {
$timeout(function(){
var editorsElement = el[0];
var lastEditor = editorsElement.querySelector('.umb-editor:last-of-type');
var test = 0;
// only move small editors the size of the editor
/*
if(editor.size === "small") {
test = "500px";
}
*/
var removeEditorAnimation = anime({
targets: lastEditor,
translateX: [test, 100 + '%'],
opacity: [1, 0],
easing: 'easeInOutQuint',
duration: 200,
update: function(a) {
console.log('Animation update, called every frame', a.duration);
},
begin: function(a) {
console.log('Animation begin after delay:', a.duration);
},
complete: function(a) {
$timeout(function(){
console.log('Animation end', a.duration);
scope.editors.splice(-1,1);
console.log(scope.editors);
});
}
});
});
}
// show backdrop on previous editor
function showOverlay() {
var numberOfEditors = scope.editors.length;
if(numberOfEditors > 0) {
scope.editors[numberOfEditors - 1].showOverlay = true;
}
}
evts.push(eventsService.on("appState.editors.open", function (name, args) {
addEditor(args.editor);
}));
evts.push(eventsService.on("appState.editors.close", function (name, args) {
removeEditor(args.editor);
}));
//ensure to unregister from all events!
scope.$on('$destroy', function () {
for (var e in evts) {
eventsService.unsubscribe(evts[e]);
}
});
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/editor/umb-editors.html',
link: link
};
return directive;
}
angular.module('umbraco.directives').directive('umbEditors', EditorsDirective);
})();

28
src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
View File

@@ -19,26 +19,38 @@
editors.push(editor);
setIndent();
var args = {
editors: editors,
editor: editor
};
// setIndent();
eventsService.emit("appState.editors", editors);
eventsService.emit("appState.editors.open", args);
}
function close(editorId) {
var newEditorsArray = [];
var selectedEditor = {};
// remove closed editor
angular.forEach(editors, function(editor){
if(editor.id !== editorId) {
selectedEditor = editor;
newEditorsArray.push(editor);
}
});
editors = newEditorsArray;
setIndent();
eventsService.emit("appState.editors", editors);
var args = {
editors: editors,
editor: selectedEditor
};
// setIndent();
eventsService.emit("appState.editors.close", args);
}
function setIndent() {
@@ -77,6 +89,11 @@
});
}
function contentEditor(editor) {
editor.view = "views/content/edit.html",
open(editor)
}
function mediaEditor(editor) {
editor.view = "views/media/edit.html",
@@ -93,6 +110,7 @@
open: open,
close: close,
mediaEditor: mediaEditor,
contentEditor: contentEditor,
mediaPicker: mediaPicker
};

2
src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
View File

@@ -160,7 +160,7 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
}));
evts.push(eventsService.on("appState.editors", function (name, args) {
$scope.editors = args;
//$scope.editors = args;
}));
//ensure to unregister from all events!

4
src/Umbraco.Web.UI.Client/src/less/components/editor.less
View File

@@ -29,7 +29,7 @@
flex-basis: auto;
position: relative;
background: transparent;
transition: flex-grow 0.4s ease-in-out;
// transition: flex-grow 0.4s ease-in-out;
}
.umb-split-view--collapsed {
@@ -41,7 +41,7 @@
}
.umb-split-view__content {
animation: fadein 0.5s ease-in-out;
//animation: fadein 0.5s ease-in-out;
}
@keyframes fadein {

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

@@ -1,3 +1,11 @@
.umb-editors {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.umb-editor {
position: absolute;
top: 0;
@@ -9,6 +17,12 @@
box-shadow: 0px 0 30px 0 rgba(0,0,0,.3);
}
// hide all infinite editors by default
// will be shown through animation
.umb-editors .umb-editor {
opacity: 0;
}
.umb-editor--small {
width: 500px;
left: auto;

8
src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
View File

@@ -56,6 +56,14 @@
<umb-editor-footer-content-right>
<umb-button
ng-if="model.infiniteMode"
action="close()"
button-style="link"
label="Close"
type="button">
</umb-button>
<umb-button
alias="preview"
ng-if="!page.isNew && content.allowPreview"

7
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editors.html Normal file
View File

@@ -0,0 +1,7 @@
<div class="umb-editors">
<umb-editor
ng-repeat="editor in editors"
model="editor">
</umb-editor>
</div>

15
src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
View File

@@ -66,17 +66,14 @@
<section id="contentwrapper" ng-if="navReady">
<div id="contentcolumn">
<div id="contentcolumn">
<div class="umb-editor" ng-view></div>
<div class="umb-editor__overlay" ng-if="editors.length > 0"></div>
<div class="umb-editor" ng-view></div>
<div class="umb-editor__overlay" ng-if="editors.length > 0"></div>
<umb-editors></umb-editors>
<umb-editor
ng-repeat="editor in editors"
model="editor">
</umb-editor>
</div>
</div>
</section>

2
src/Umbraco.Web/UI/JavaScript/JsInitialize.js
View File

@@ -5,6 +5,8 @@
'lib/moment/moment.min.js',
'lib/animejs/anime.min.js',
'lib/jquery-ui/jquery-ui.min.js',
'lib/jquery-ui-touch-punch/jquery.ui.touch-punch.js',