From 79f303ddcfb80a79671ef7519ed84ea0ea519507 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 25 Apr 2018 10:29:18 +0200 Subject: [PATCH] wip animation experiments --- src/Umbraco.Web.UI.Client/bower.json | 16 +- .../components/content/edit.controller.js | 7 + .../components/editor/umbeditor.directive.js | 7 +- .../components/editor/umbeditors.directive.js | 163 ++++++++++++++++++ .../src/common/services/editor.service.js | 28 ++- .../src/controllers/main.controller.js | 2 +- .../src/less/components/editor.less | 4 +- .../less/components/editor/umb-editor.less | 14 ++ .../src/views/components/content/edit.html | 8 + .../views/components/editor/umb-editors.html | 7 + .../umbraco/Views/Default.cshtml | 15 +- src/Umbraco.Web/UI/JavaScript/JsInitialize.js | 2 + 12 files changed, 243 insertions(+), 30 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editors.html diff --git a/src/Umbraco.Web.UI.Client/bower.json b/src/Umbraco.Web.UI.Client/bower.json index f63e987755..ac8a79ca26 100644 --- a/src/Umbraco.Web.UI.Client/bower.json +++ b/src/Umbraco.Web.UI.Client/bower.json @@ -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" } } } diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js index 00577379ef..9e7bae74b3 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js @@ -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) { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditor.directive.js index b26a15f928..fc78869cf4 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditor.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditor.directive.js @@ -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; 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 new file mode 100644 index 0000000000..9f1f102892 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js @@ -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); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js index 5016e0f50f..67e1f59318 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js @@ -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 }; diff --git a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js index 635fdf9d27..c118a7353b 100644 --- a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js +++ b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js @@ -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! diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less index 4f5820a92c..7e37b622d3 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -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 { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less index a6a5792372..b4a0ffe895 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less @@ -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; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html index de13b1206d..d2ef73106f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html @@ -56,6 +56,14 @@ + + + + + + diff --git a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml index d157aa757c..fac7c29655 100644 --- a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml +++ b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml @@ -66,17 +66,14 @@
-
+
-
-
+
+
+ + - - - -
+
diff --git a/src/Umbraco.Web/UI/JavaScript/JsInitialize.js b/src/Umbraco.Web/UI/JavaScript/JsInitialize.js index 39185cff3f..877bba06f4 100644 --- a/src/Umbraco.Web/UI/JavaScript/JsInitialize.js +++ b/src/Umbraco.Web/UI/JavaScript/JsInitialize.js @@ -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',