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

control sorting with editor control (with ui.sortable last version)

Browse Source
This commit is contained in:
antoine
2014-09-06 17:40:52 +02:00
parent 142c4c09e1
commit ef6e181eb1
3 changed files with 296 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
src/Umbraco.Web.UI.Client/lib/angular/angular-ui-sortable.js vendored
View File

@@ -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()}}}])
/*
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);
}
};
}
]);

4
src/Umbraco.Web.UI.Client/src/less/gridview.less
View File

@@ -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{

94
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
View File

@@ -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);
});
}
}