From ef6e181eb1fc61d70884680517ff4de2cfcb34eb Mon Sep 17 00:00:00 2001 From: antoine Date: Sat, 6 Sep 2014 17:40:52 +0200 Subject: [PATCH] control sorting with editor control (with ui.sortable last version) --- .../lib/angular/angular-ui-sortable.js | 262 +++++++++++++++++- .../src/less/gridview.less | 4 +- .../propertyeditors/grid/grid.controller.js | 94 +++---- 3 files changed, 296 insertions(+), 64 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/lib/angular/angular-ui-sortable.js b/src/Umbraco.Web.UI.Client/lib/angular/angular-ui-sortable.js index abb6556f0e..92e88f60ca 100644 --- a/src/Umbraco.Web.UI.Client/lib/angular/angular-ui-sortable.js +++ b/src/Umbraco.Web.UI.Client/lib/angular/angular-ui-sortable.js @@ -1 +1,261 @@ -angular.module("ui.sortable",[]).value("uiSortableConfig",{}).directive("uiSortable",["uiSortableConfig",function(e){return{require:"?ngModel",link:function(t,n,r,i){function s(e,t){if(t&&typeof t==="function"){return function(n,r){e(n,r);t(n,r)}}return e}var o={};var u={receive:null,remove:null,start:null,stop:null,update:null};angular.extend(o,e);if(i){i.$render=function(){n.sortable("refresh")};u.start=function(e,t){t.item.sortable={index:t.item.index()}};u.update=function(e,t){t.item.sortable.resort=i};u.receive=function(e,t){t.item.sortable.relocate=true;i.$modelValue.splice(t.item.index(),0,t.item.sortable.moved)};u.remove=function(e,t){if(i.$modelValue.length===1){t.item.sortable.moved=i.$modelValue.splice(0,1)[0]}else{t.item.sortable.moved=i.$modelValue.splice(t.item.sortable.index,1)[0]}};u.stop=function(e,n){if(n.item.sortable.resort&&!n.item.sortable.relocate){var r,i;i=n.item.sortable.index;r=n.item.index();n.item.sortable.resort.$modelValue.splice(r,0,n.item.sortable.resort.$modelValue.splice(i,1)[0])}if(n.item.sortable.resort||n.item.sortable.relocate){t.$apply()}}}t.$watch(r.uiSortable,function(e,t){angular.forEach(e,function(e,t){if(u[t]){e=s(u[t],e)}n.sortable("option",t,e);n.disableSelection()})},true);angular.forEach(u,function(e,t){o[t]=s(e,o[t])});n.sortable(o);n.disableSelection()}}}]) \ No newline at end of file +/* + jQuery UI Sortable plugin wrapper + + @param [ui-sortable] {object} Options to pass to $.fn.sortable() merged onto ui.config + */ +angular.module('ui.sortable', []) + .value('uiSortableConfig',{}) + .directive('uiSortable', [ + 'uiSortableConfig', '$timeout', '$log', + function(uiSortableConfig, $timeout, $log) { + return { + require: '?ngModel', + link: function(scope, element, attrs, ngModel) { + var savedNodes; + + function combineCallbacks(first,second){ + if(second && (typeof second === 'function')) { + return function(e, ui) { + first(e, ui); + second(e, ui); + }; + } + return first; + } + + function hasSortingHelper (element, ui) { + var helperOption = element.sortable('option','helper'); + return helperOption === 'clone' || (typeof helperOption === 'function' && ui.item.sortable.isCustomHelperUsed()); + } + + var opts = {}; + + var callbacks = { + receive: null, + remove:null, + start:null, + stop:null, + update:null + }; + + var wrappers = { + helper: null + }; + + angular.extend(opts, uiSortableConfig, scope.$eval(attrs.uiSortable)); + + if (!angular.element.fn || !angular.element.fn.jquery) { + $log.error('ui.sortable: jQuery should be included before AngularJS!'); + return; + } + + if (ngModel) { + + // When we add or remove elements, we need the sortable to 'refresh' + // so it can find the new/removed elements. + scope.$watch(attrs.ngModel+'.length', function() { + // Timeout to let ng-repeat modify the DOM + $timeout(function() { + // ensure that the jquery-ui-sortable widget instance + // is still bound to the directive's element + if (!!element.data('ui-sortable')) { + element.sortable('refresh'); + } + }); + }); + + callbacks.start = function(e, ui) { + // Save the starting position of dragged item + ui.item.sortable = { + index: ui.item.index(), + cancel: function () { + ui.item.sortable._isCanceled = true; + }, + isCanceled: function () { + return ui.item.sortable._isCanceled; + }, + isCustomHelperUsed: function () { + return !!ui.item.sortable._isCustomHelperUsed; + }, + _isCanceled: false, + _isCustomHelperUsed: ui.item.sortable._isCustomHelperUsed + }; + }; + + callbacks.activate = function(/*e, ui*/) { + // We need to make a copy of the current element's contents so + // we can restore it after sortable has messed it up. + // This is inside activate (instead of start) in order to save + // both lists when dragging between connected lists. + savedNodes = element.contents(); + + // If this list has a placeholder (the connected lists won't), + // don't inlcude it in saved nodes. + var placeholder = element.sortable('option','placeholder'); + + // placeholder.element will be a function if the placeholder, has + // been created (placeholder will be an object). If it hasn't + // been created, either placeholder will be false if no + // placeholder class was given or placeholder.element will be + // undefined if a class was given (placeholder will be a string) + if (placeholder && placeholder.element && typeof placeholder.element === 'function') { + var phElement = placeholder.element(); + // workaround for jquery ui 1.9.x, + // not returning jquery collection + phElement = angular.element(phElement); + + // exact match with the placeholder's class attribute to handle + // the case that multiple connected sortables exist and + // the placehoilder option equals the class of sortable items + var excludes = element.find('[class="' + phElement.attr('class') + '"]'); + + savedNodes = savedNodes.not(excludes); + } + }; + + callbacks.update = function(e, ui) { + // Save current drop position but only if this is not a second + // update that happens when moving between lists because then + // the value will be overwritten with the old value + if(!ui.item.sortable.received) { + ui.item.sortable.dropindex = ui.item.index(); + ui.item.sortable.droptarget = ui.item.parent(); + + // Cancel the sort (let ng-repeat do the sort for us) + // Don't cancel if this is the received list because it has + // already been canceled in the other list, and trying to cancel + // here will mess up the DOM. + element.sortable('cancel'); + } + + // Put the nodes back exactly the way they started (this is very + // important because ng-repeat uses comment elements to delineate + // the start and stop of repeat sections and sortable doesn't + // respect their order (even if we cancel, the order of the + // comments are still messed up). + if (hasSortingHelper(element, ui) && !ui.item.sortable.received) { + // restore all the savedNodes except .ui-sortable-helper element + // (which is placed last). That way it will be garbage collected. + savedNodes = savedNodes.not(savedNodes.last()); + } + savedNodes.appendTo(element); + + // If this is the target connected list then + // it's safe to clear the restored nodes since: + // update is currently running and + // stop is not called for the target list. + if(ui.item.sortable.received) { + savedNodes = null; + } + + // If received is true (an item was dropped in from another list) + // then we add the new item to this list otherwise wait until the + // stop event where we will know if it was a sort or item was + // moved here from another list + if(ui.item.sortable.received && !ui.item.sortable.isCanceled()) { + scope.$apply(function () { + ngModel.$modelValue.splice(ui.item.sortable.dropindex, 0, + ui.item.sortable.moved); + }); + } + }; + + callbacks.stop = function(e, ui) { + // If the received flag hasn't be set on the item, this is a + // normal sort, if dropindex is set, the item was moved, so move + // the items in the list. + if(!ui.item.sortable.received && + ('dropindex' in ui.item.sortable) && + !ui.item.sortable.isCanceled()) { + + scope.$apply(function () { + ngModel.$modelValue.splice( + ui.item.sortable.dropindex, 0, + ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0]); + }); + } else { + // if the item was not moved, then restore the elements + // so that the ngRepeat's comment are correct. + if ((!('dropindex' in ui.item.sortable) || ui.item.sortable.isCanceled()) && + !hasSortingHelper(element, ui)) { + savedNodes.appendTo(element); + } + } + + // It's now safe to clear the savedNodes + // since stop is the last callback. + savedNodes = null; + }; + + callbacks.receive = function(e, ui) { + // An item was dropped here from another list, set a flag on the + // item. + ui.item.sortable.received = true; + }; + + callbacks.remove = function(e, ui) { + // Workaround for a problem observed in nested connected lists. + // There should be an 'update' event before 'remove' when moving + // elements. If the event did not fire, cancel sorting. + if (!('dropindex' in ui.item.sortable)) { + element.sortable('cancel'); + ui.item.sortable.cancel(); + } + + // Remove the item from this list's model and copy data into item, + // so the next list can retrive it + if (!ui.item.sortable.isCanceled()) { + scope.$apply(function () { + ui.item.sortable.moved = ngModel.$modelValue.splice( + ui.item.sortable.index, 1)[0]; + }); + } + }; + + wrappers.helper = function (inner) { + if (inner && typeof inner === 'function') { + return function (e, item) { + var innerResult = inner(e, item); + item.sortable._isCustomHelperUsed = item !== innerResult; + return innerResult; + }; + } + return inner; + }; + + scope.$watch(attrs.uiSortable, function(newVal /*, oldVal*/) { + // ensure that the jquery-ui-sortable widget instance + // is still bound to the directive's element + if (!!element.data('ui-sortable')) { + angular.forEach(newVal, function(value, key) { + if(callbacks[key]) { + if( key === 'stop' ){ + // call apply after stop + value = combineCallbacks( + value, function() { scope.$apply(); }); + } + // wrap the callback + value = combineCallbacks(callbacks[key], value); + } else if (wrappers[key]) { + value = wrappers[key](value); + } + + element.sortable('option', key, value); + }); + } + }, true); + + angular.forEach(callbacks, function(value, key) { + opts[key] = combineCallbacks(value, opts[key]); + }); + + } else { + $log.info('ui.sortable: ngModel not provided!', element); + } + + // Create sortable + element.sortable(opts); + } + }; + } + ]); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less index a64af94915..a2ee0ae953 100644 --- a/src/Umbraco.Web.UI.Client/src/less/gridview.less +++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less @@ -219,7 +219,9 @@ } .usky-grid .usky-control:hover{ - border-bottom:2px solid rgba(182, 182, 182, 0.3); + border: 1px dashed rgba(182, 182, 182, 0.3); + border-bottom: 2px solid rgba(182, 182, 182, 0.3); + } .usky-grid .usky-control-placeholder:hover{ diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js index 15a85a0d7c..5b08329eac 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js @@ -38,6 +38,7 @@ angular.module("umbraco") var includedRte = []; var allowedEditors = []; var currentEditor = ""; + var rteUpdateDone = false; $scope.sortableOptionsCell = { @@ -48,101 +49,70 @@ angular.module("umbraco") connectWith: ".usky-cell", forcePlaceholderSize: true, - receive: function (event, ui) { + over: function (event, ui) { - ui.sender.sortable("cancel"); + allowedEditors = $(event.target).scope().area.allowed; - $scope.$apply(); + console.info(allowedEditors) - //if ($(this).scope().area) - //{ - // var allowedEditors = $(this).scope().area.allowed; - //} - - //if (ui.item.scope().control) { - // var currentEditor = ui.item.scope().control.editor.alias; - //} + if ($.inArray(currentEditor, allowedEditors) < 0 && allowedEditors) { + ui.placeholder.hide(); + } + else { + ui.placeholder.show(); + } }, update: function (event, ui) { - //ui.sender.sortable("cancel"); + if (!ui.sender) { - //$scope.$apply(); + if ($.inArray(currentEditor, allowedEditors) < 0 && allowedEditors) { + ui.item.sortable.cancel(); + } - //if ($.inArray(currentEditor, allowedEditors) < 0) { + ui.item.parents(".usky-cell").find('.mceNoEditor').each(function () { + tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); + tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id')); + }); - // var notIncludedRte = []; - // ui.item.find('.mceNoEditor').each(function () { - // notIncludedRte.splice(0, 0, $(this).attr('id')); - // }); + rteUpdateDone = true; - // if (ui.sender) { - // ui.item.parents(".usky-cell").find('.mceNoEditor').each(function () { - // if ($.inArray($(this).attr('id'), notIncludedRte) < 0) { - // tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); - // includedRte.splice(0, 0, $(this).attr('id')); - // } - // }); - // } + } + else { - // ui.item.sortable.cancel(); + console.info("sender"); - - - - //} - //else { - - if (ui.sender) { var notIncludedRte = []; + ui.item.find('.mceNoEditor').each(function () { notIncludedRte.splice(0, 0, $(this).attr('id')); }); - - ui.item.parents(".usky-cell").find('.mceNoEditor').each(function () { - if ($.inArray($(this).attr('id'), notIncludedRte) < 0) { - tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); - includedRte.splice(0, 0, $(this).attr('id')); - } - }); - - - ui.item.find('.mceNoEditor').each(function () { - tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id')); + $(event.target).find('.mceNoEditor').each(function () { + if ($.inArray($(this).attr('id'), notIncludedRte) < 0) { + tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); + tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id')); + } }); - } - //} - - - - - - + } }, start: function (e, ui) { + currentEditor = ui.item.scope().control.editor.alias; ui.item.find('.mceNoEditor').each(function () { tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')) }); }, stop: function (e, ui) { - - $scope.$apply(); - - ui.item.find('.mceNoEditor').each(function () { + ui.item.parents(".usky-cell").find('.mceNoEditor').each(function () { + tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id')); tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id')); }); - - _.forEach(includedRte, function (value, index) { - tinyMCE.execCommand('mceAddEditor', false, value); - }); - } }