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

Grid controls sortable first approach

Browse Source
This commit is contained in:
antoine
2014-09-03 17:26:18 +02:00
parent 5ac4b2b305
commit c04fee2aba
2 changed files with 64 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,15 +2,15 @@ angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridController",
function ($scope, $http, assetsService, $rootScope, dialogService, gridService, mediaResource, imageHelper, $timeout) {
// Grid status variables
// Grid status variables
$scope.currentRow = null;
$scope.currentCell = null;
$scope.currentCell = null;
$scope.currentToolsControl = null;
$scope.currentControl = null;
$scope.openRTEToolbarId = null;
$scope.openRTEToolbarId = null;
// *********************************************
// *********************************************
// Sortable options
// *********************************************
@@ -32,6 +32,25 @@ angular.module("umbraco")
}
};
$scope.sortableOptionsCell = {
distance: 10,
cursor: "move",
placeholder: "ui-sortable-placeholder",
handle: '.cell-tools-move',
connectWith: ".usky-cell",
start: function (e, ui) {
ui.item.find('.mceNoEditor').each(function () {
tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'));
});
},
stop: function (e, ui) {
ui.item.find('.mceNoEditor').each(function () {
tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id'));
});
}
};
// *********************************************
// Template management functions
// *********************************************
@@ -58,6 +77,13 @@ angular.module("umbraco")
$scope.currentRow = null;
};
$scope.setCurrentMovedRow = function (Row) {
$scope.currentMovedRow = Row;
};
$scope.disableCurrentMovedRow = function (Row) {
$scope.currentMovedRow = null;
};
$scope.getAllowedLayouts = function(column){
var layouts = $scope.model.config.items.layouts;
@@ -71,8 +97,6 @@ angular.module("umbraco")
}
};
$scope.addRow = function (section, layout) {
//copy the selected layout into the rows collection
var row = angular.copy(layout);
@@ -92,7 +116,7 @@ angular.module("umbraco")
}
};
// *********************************************
// Cell management functions
// *********************************************
@@ -144,12 +168,12 @@ angular.module("umbraco")
$scope.currentRemoveControl = null;
};
$scope.setCurrentMoveControl = function (Control) {
$scope.currentMoveControl = Control;
$scope.setCurrentMovedControl = function (Control) {
$scope.currentMovedControl = Control;
};
$scope.disableCurrentMoveControl = function (Control) {
$scope.currentMoveControl = null;
$scope.disableCurrentMovedControl = function (Control) {
$scope.currentMovedControl = null;
};
$scope.setUniqueId = function (cell, index) {

50
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
View File

@@ -27,25 +27,24 @@
<!-- Grids -->
<div class="usky-grid-width">
<div class="tb">
<div class="tb" >
<!-- for each column in model -->
<div
class="usky-column td"
ng-class="{last:$last}"
ng-repeat="section in model.value.sections"
ng-init="initSection(section)"
style="width:{{section.$percentage}}%">
<div class="usky-column td"
ng-class="{last:$last}"
ng-repeat="section in model.value.sections"
ng-init="initSection(section)"
style="width:{{section.$percentage}}%">
<!--<div ui-sortable="sortableOptionsTest" ng-model="section.rows">-->
<div ng-model="section.rows">
<div ui-sortable="sortableOptions" ng-model="section.rows">
<!-- for each row in template section -->
<div
ng-repeat="row in section.rows"
<div ng-repeat="row in section.rows"
class="usky-row"
ng-mouseover="setCurrentRow(row)"
ng-mouseleave="disableCurrentRow()"
ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMoveControl == row}">
ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMovedRow == row}">
<!-- Row tool -->
<div class="row-tools" ng-animate="'fade'"
@@ -56,7 +55,7 @@
<div class="iconBox"
ng-click="deletePrompt = true"
ng-mouseover="setCurrentRemoveControl(row)"
ng-mouseleave="disableCurrentRemoveControl(row)">
ng-mouseleave="disableCurrentRemoveControl(row)">
<span ng-if="deletePrompt">
Are you sure?
@@ -69,8 +68,8 @@
<div class="cell-tools-move">
<div class="iconBox"
ng-mouseover="setCurrentMoveControl(row)"
ng-mouseleave="disableCurrentMoveControl(row)">
ng-mouseover="setCurrentMovedRow(row)"
ng-mouseleave="disableCurrentMovedRow(row)">
<i class="icon icon-navigation"></i>
</div>
</div>
@@ -88,8 +87,7 @@
<div style="width:{{ area.$percentage }}%"
ng-class="{last:$last,first:$first}"
class="td mainTd usky-cell"
ng-repeat="area in row.areas">
ng-repeat="area in row.areas" ui-sortable="sortableOptionsCell" ng-model="area.controls">
<!-- if area is empty tools -->
<div class="usky-control usky-control-placeholder"
@@ -125,10 +123,10 @@
</div>
</div>
<!-- Controls in cell -->
<div ng-repeat="control in area.controls"
ng-class="{last:$last,
movingControl:currentMovedControl == control,
removingControl:currentRemoveControl == control,
toolsControl:currentToolsControl == control,
selectedControl:currentControl == control}"
@@ -171,9 +169,21 @@
<a href style="text-decoration: underline" ng-click="removeControl(area, $parent.$index)">Yes</a>
</span>
<i ng-if="!deletePrompt" class="icon icon-trash"></i>
</div>
</div>
<!-- move cell -->
<div class="cell-tools-move">
<div class="iconBox"
ng-mouseover="setCurrentMovedControl(control)"
ng-mouseleave="disableCurrentMovedControl(control)">
<i class="icon icon-navigation"></i>
</div>
</div>
</div>
<!-- Redering the editor for specific control -->
@@ -198,8 +208,6 @@
</div>
<!-- row sortable end -->
<!-- column tools -->
<div class="usky-templates-columns tb">
@@ -224,7 +232,7 @@
</div>
<div class="tr">
<div class="td middle">
<br/>
<br />
<span class="help-text">Add rows to your layout</span>
</div>
</div>