New sorter and contentType editor
This commit is contained in:
perploug
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name umbraco.directives.directive:umbSort
|
||||
* @element div
|
||||
* @function
|
||||
*
|
||||
* @description
|
||||
* Resize div's automatically to fit to the bottom of the screen, as an optional parameter an y-axis offset can be set
|
||||
* So if you only want to scale the div to 70 pixels from the bottom you pass "70"
|
||||
*
|
||||
* @example
|
||||
<example module="umbraco.directives">
|
||||
<file name="index.html">
|
||||
<div umb-sort="70" class="input-block-level"></div>
|
||||
</file>
|
||||
</example>
|
||||
*/
|
||||
angular.module("umbraco.directives")
|
||||
.value('umbSortContextInternal',{})
|
||||
.directive('umbSort', function($log,umbSortContextInternal) {
|
||||
return {
|
||||
require: '?ngModel',
|
||||
link: function(scope, element, attrs, ngModel) {
|
||||
|
||||
|
||||
|
||||
var adjustment;
|
||||
var current = {};
|
||||
|
||||
// if(ngModel){
|
||||
|
||||
// ngModel.$render = function() {
|
||||
|
||||
$log.log(element);
|
||||
var cfg = scope.$eval(element.attr('umb-sort')) || {};
|
||||
|
||||
scope.opts = {
|
||||
pullPlaceholder: true,
|
||||
onDrop: null,
|
||||
onDragStart:null,
|
||||
onDrag:null,
|
||||
group: cfg.group,
|
||||
handle: ".handle",
|
||||
containerSelector: cfg.containerSelector || ".umb-" + cfg.group + "-container",
|
||||
nested: cfg.nested || true,
|
||||
drop: cfg.drop || true,
|
||||
drag: cfg.drag || true,
|
||||
isValidTarget: function(item, container) {
|
||||
|
||||
if(container.el.is(".umb-" + cfg.group + "-container")){
|
||||
$log.log(container);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
events: cfg
|
||||
};
|
||||
|
||||
element.addClass("umb-sort");
|
||||
element.addClass("umb-" + cfg.group + "-container");
|
||||
|
||||
scope.opts.onDrag = function (item, position) {
|
||||
item.css({
|
||||
left: position.left - adjustment.left,
|
||||
top: position.top - adjustment.top
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
scope.opts.onDrop = function (item, targetContainer, _super) {
|
||||
var children = $("li", targetContainer.el);
|
||||
var targetScope = $(targetContainer.el[0]).scope();
|
||||
var newIndex = children.index(item);
|
||||
|
||||
if(targetScope.opts.events.onDropHandler){
|
||||
var args = {
|
||||
sourceScope: umbSortContextInternal.startScope,
|
||||
startIndex: umbSortContextInternal.startIndex,
|
||||
startContainer: umbSortContextInternal.startContainer,
|
||||
|
||||
targetScope: targetScope,
|
||||
targetIndex: newIndex,
|
||||
targetContainer: targetContainer
|
||||
};
|
||||
|
||||
targetScope.opts.events.onDropHandler.call(this, item, args);
|
||||
}
|
||||
|
||||
if(umbSortContextInternal.startScope.opts.events.onReleaseHandler){
|
||||
var _args = {
|
||||
sourceScope: umbSortContextInternal.startScope,
|
||||
startIndex: umbSortContextInternal.startIndex,
|
||||
startContainer: umbSortContextInternal.startContainer,
|
||||
|
||||
targetScope: targetScope,
|
||||
targetIndex: newIndex,
|
||||
targetContainer: targetContainer
|
||||
};
|
||||
|
||||
umbSortContextInternal.startScope.opts.events.onReleaseHandler.call(this, item, _args);
|
||||
}
|
||||
|
||||
var clonedItem = $('<li/>').css({height: 0});
|
||||
item.before(clonedItem);
|
||||
clonedItem.animate({'height': item.height()});
|
||||
|
||||
scope.$apply(function(){
|
||||
item.animate(clonedItem.position(), function () {
|
||||
clonedItem.detach();
|
||||
_super(item);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
scope.opts.onDragStart = function (item, container, _super) {
|
||||
var children = $("li", container.el);
|
||||
var offset = item.offset();
|
||||
|
||||
umbSortContextInternal.startIndex = children.index(item);
|
||||
umbSortContextInternal.startScope = $(container.el[0]).scope();
|
||||
umbSortContextInternal.startContainer = container;
|
||||
|
||||
//current.item = ngModel.$modelValue.splice(current.index, 1)[0];
|
||||
|
||||
var pointer = container.rootGroup.pointer;
|
||||
adjustment = {
|
||||
left: pointer.left - offset.left,
|
||||
top: pointer.top - offset.top
|
||||
};
|
||||
|
||||
_super(item, container);
|
||||
};
|
||||
|
||||
|
||||
|
||||
element.sortable( scope.opts );
|
||||
// };
|
||||
|
||||
// }
|
||||
// Create sortable
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* @ngdoc controller
|
||||
* @name Umbraco.Editors.ContentType.EditController
|
||||
* @function
|
||||
*
|
||||
* @description
|
||||
* The controller for the content type editor
|
||||
*/
|
||||
function ContentTypeEditController($scope, $routeParams, $log, notificationsService, angularHelper, serverValidationManager, contentEditingHelper, entityResource) {
|
||||
|
||||
$scope.tabs = [];
|
||||
$scope.page = {};
|
||||
$scope.contentType = {tabs: [], name: "My content type", alias:"myType", icon:"icon-folder", allowedChildren: [], allowedTemplate: []};
|
||||
$scope.contentType.tabs = [
|
||||
{name: "Content", properties:[ {name: "test"}]},
|
||||
{name: "Generic Properties", properties:[]}
|
||||
];
|
||||
|
||||
|
||||
|
||||
$scope.dataTypesOptions ={
|
||||
group: "properties",
|
||||
onDropHandler: function(item, args){
|
||||
//alert("dropped on datatypes");
|
||||
},
|
||||
onReleaseHandler: function(item, args){
|
||||
//alert("released");
|
||||
}
|
||||
};
|
||||
|
||||
$scope.tabOptions ={
|
||||
group: "tabs",
|
||||
drop: false,
|
||||
nested: true,
|
||||
onDropHandler: function(item, args){
|
||||
|
||||
},
|
||||
onReleaseHandler: function(item, args){
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$scope.propertiesOptions ={
|
||||
group: "properties",
|
||||
onDropHandler: function(item, args){
|
||||
//alert("dropped on properties");
|
||||
//args.targetScope.ngModel.$modelValue.push({name: "bong"});
|
||||
},
|
||||
onReleaseHandler: function(item, args){
|
||||
//alert("released from properties");
|
||||
//args.targetScope.ngModel.$modelValue.push({name: "bong"});
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
$scope.omg = function(){
|
||||
alert("wat");
|
||||
};
|
||||
|
||||
entityResource.getAll("Datatype").then(function(data){
|
||||
$scope.page.datatypes = data;
|
||||
});
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.ContentType.EditController", ContentTypeEditController);
|
||||
74
src/Umbraco.Web.UI.Client/src/views/contenttype/edit.html
Normal file
74
src/Umbraco.Web.UI.Client/src/views/contenttype/edit.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<form novalidate name="contentForm"
|
||||
ng-controller="Umbraco.Editors.ContentType.EditController"
|
||||
ng-submit="save()">
|
||||
|
||||
|
||||
<umb-panel val-show-validation>
|
||||
<umb-header tabs="tabs">
|
||||
<div class="span4">
|
||||
<umb-content-name
|
||||
ng-model="contentType.name"
|
||||
placeholder="Enter a title">
|
||||
</umb-content-name>
|
||||
</div>
|
||||
|
||||
<div class="span8">
|
||||
<div class="btn-toolbar pull-right umb-btn-toolbar">
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn btn-success">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</umb-header>
|
||||
|
||||
<umb-tab-view>
|
||||
<umb-tab id="tabdata" active="true" rel="data" label="Data">
|
||||
<div class="umb-pane">
|
||||
<div class="row-fluid umb-type-editor">
|
||||
|
||||
<div class="span9">
|
||||
<ul class="tab-list">
|
||||
<li ng-repeat="tab in contentType.tabs">
|
||||
<h5 class="handle">{{tab.name}}</h5>
|
||||
|
||||
<ul umb-sort="propertiesOptions" ng-model="tab.properties" class="propety-list">
|
||||
<li class="handle" ng-repeat="property in tab.properties">
|
||||
{{property.name}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{{page.datatypes | json}}
|
||||
</div>
|
||||
|
||||
<div class="span3">
|
||||
<ul umb-sort="dataTypesOptions"
|
||||
ng-model="page.datatypes"
|
||||
class="nav nav-stacked datatype-list">
|
||||
|
||||
<li class="handle" ng-repeat="d in page.datatypes">
|
||||
<a href>
|
||||
<i class="icon-autofill"></i> {{d.name}}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{{model | json}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</umb-tab>
|
||||
|
||||
<umb-tab id="tabproperties" rel="properties" label="Properties">
|
||||
<div class="umb-pane">
|
||||
<umb-property property="contentType.icon">
|
||||
|
||||
</umb-property>
|
||||
</div>
|
||||
</umb-tab>
|
||||
</umb-tab-view>
|
||||
</umb-panel>
|
||||
</form>
|
||||
Reference in New Issue
Block a user