From da18a89540a42f3ae1d5ed01d3b08fcf94fe5688 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 23 Jun 2015 13:58:43 +0200 Subject: [PATCH] move design view logic from edit.controller to design.controller --- .../src/less/pages/document-type-editor.less | 4 +- .../src/views/documenttype/edit.controller.js | 267 +---------------- .../src/views/documenttype/edit.html | 11 +- .../views/design/design.controller.js | 282 ++++++++++++++++++ .../documenttype/views/design/design.html | 216 +++++++------- 5 files changed, 401 insertions(+), 379 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.controller.js diff --git a/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less b/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less index 03ffb62f7f..c699e837c2 100644 --- a/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less @@ -349,7 +349,7 @@ /* ---------- SORTING ---------- */ // sorting tabs - .editors-document-type-canvas.is-in-sorting-mode { + .is-in-sorting-mode { .edt-tab { min-height: 0; cursor: move; @@ -367,7 +367,7 @@ // sorting properties - .editors-document-type-canvas.is-in-sorting-mode { + .is-in-sorting-mode { .edt-property { height: 40px; diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js index 502aeb4516..2dd88f312b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js @@ -9,7 +9,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, contentTypeResource, entityResource, dataTypeResource, editorState, contentEditingHelper, formHelper, navigationService, iconHelper, contentTypeHelper, dataTypeHelper) { $scope.page = {actions: [], menu: [], subViews: [] }; - $scope.sortingMode = false; $scope.currentNode = null; //the editors affiliated node $scope.page.navigation = [ @@ -23,14 +22,14 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont "name": "Compositions", "icon": "merge", "action": function() { - $scope.openCompositionsDialog(); + $scope.page.openCompositionsDialog(); } }, { "name": "Reorder", "icon": "navigation", "action": function() { - $scope.toggleSortingMode(); + $scope.page.toggleSortingMode(); } } ] @@ -92,77 +91,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont }); }; - /* ---------- TOOLBAR ---------- */ - - $scope.toggleSortingMode = function() { - $scope.sortingMode = !$scope.sortingMode; - }; - - $scope.openCompositionsDialog = function() { - $scope.dialogModel = {}; - $scope.dialogModel.title = "Compositions"; - $scope.dialogModel.availableCompositeContentTypes = $scope.contentType.availableCompositeContentTypes; - $scope.dialogModel.compositeContentTypes = $scope.contentType.compositeContentTypes; - $scope.dialogModel.view = "views/documentType/dialogs/compositions/compositions.html"; - $scope.showDialog = true; - - $scope.dialogModel.close = function(){ - $scope.showDialog = false; - $scope.dialogModel = null; - }; - - $scope.dialogModel.selectCompositeContentType = function(compositeContentType) { - - if( $scope.contentType.compositeContentTypes.indexOf(compositeContentType.alias) === -1 ) { - - //merge composition with content type - contentTypeHelper.mergeCompositeContentType($scope.contentType, compositeContentType); - - } else { - - // split composition from content type - contentTypeHelper.splitCompositeContentType($scope.contentType, compositeContentType); - - } - - } - - }; - - /* ---------- TABS ---------- */ - - $scope.addTab = function(tab){ - - $scope.activateTab(tab); - - // push new init tab to the scope - contentTypeHelper.addInitTab($scope.contentType); - - }; - - $scope.removeTab = function(tabIndex) { - $scope.contentType.groups.splice(tabIndex, 1); - }; - - $scope.activateTab = function(tab) { - - // set all other tabs that are inactive to active - angular.forEach($scope.contentType.groups, function(group){ - // skip init tab - if(group.tabState !== "init") { - group.tabState = "inActive"; - } - }); - - tab.tabState = "active"; - - }; - - $scope.updateTabTitle = function(tab) { - if(tab.properties.length === 0) { - contentTypeHelper.addInitProperty(tab); - } - }; function init(contentType){ @@ -230,155 +158,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont } } - /* ---------- PROPERTIES ---------- */ - $scope.toggleGroupSize = function(group){ - if(group.columns !== 12){ - group.columns = 12; - }else{ - group.columns = 6; - } - }; - - $scope.editPropertyTypeSettings = function(property) { - - if(!property.inherited) { - - $scope.dialogModel = {}; - $scope.dialogModel.title = "Edit property type settings"; - $scope.dialogModel.property = property; - $scope.dialogModel.view = "views/documentType/dialogs/editPropertySettings/editPropertySettings.html"; - $scope.showDialog = true; - - // set indicator on property to tell the dialog is open - is used to set focus on the element - property.dialogIsOpen = true; - - // set property to active - property.propertyState = "active"; - - $scope.dialogModel.changePropertyEditor = function(property) { - $scope.choosePropertyType(property); - }; - - $scope.dialogModel.editDataType = function(property) { - $scope.configDataType(property); - }; - - $scope.dialogModel.submit = function(model){ - - property.dialogIsOpen = false; - - $scope.showDialog = false; - $scope.dialogModel = null; - - // push new init property to scope - contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType); - - }; - - $scope.dialogModel.close = function(model){ - $scope.showDialog = false; - $scope.dialogModel = null; - - // push new init property to scope - contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType); - }; - - } - }; - - $scope.choosePropertyType = function(property) { - - $scope.dialogModel = {}; - $scope.dialogModel.title = "Choose property type"; - $scope.dialogModel.view = "views/documentType/dialogs/property.html"; - $scope.showDialog = true; - - property.dialogIsOpen = true; - - $scope.dialogModel.selectDataType = function(selectedDataType) { - - contentTypeResource.getPropertyTypeScaffold(selectedDataType.id).then(function(propertyType){ - - property.config = propertyType.config; - property.editor = propertyType.editor; - property.view = propertyType.view; - property.dataTypeId = selectedDataType.id; - property.dataTypeIcon = selectedDataType.icon; - property.dataTypeName = selectedDataType.name; - - property.propertyState = "active"; - - console.log(property); - - // open data type configuration - $scope.editPropertyTypeSettings(property); - - // push new init tab to scope - contentTypeHelper.addInitTab($scope.contentType); - - }); - - }; - - $scope.dialogModel.close = function(model){ - $scope.editPropertyTypeSettings(property); - }; - - }; - - $scope.configDataType = function(property) { - - $scope.dialogModel = {}; - $scope.dialogModel.title = "Edit data type"; - $scope.dialogModel.dataType = {}; - $scope.dialogModel.property = property; - $scope.dialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html"; - $scope.dialogModel.multiActions = [ - { - label: "Save", - action: function(dataType) { - saveDataType(dataType, false); - } - }, - { - label: "Save as new", - action: function(dataType) { - saveDataType(dataType, true); - } - } - ]; - $scope.showDialog = true; - - function saveDataType(dataType, isNew) { - - var preValues = dataTypeHelper.createPreValueProps(dataType.preValues); - - dataTypeResource.save(dataType, preValues, isNew).then(function(dataType) { - - contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType){ - - property.config = propertyType.config; - property.editor = propertyType.editor; - property.view = propertyType.view; - property.dataTypeId = dataType.id; - property.dataTypeIcon = dataType.icon; - property.dataTypeName = dataType.name; - - // open settings dialog - $scope.editPropertyTypeSettings(property); - - }); - - }); - - } - - $scope.dialogModel.close = function(model){ - $scope.editPropertyTypeSettings(property); - }; - - }; /** Syncs the content type to it's tree node - this occurs on first load and after saving */ function syncTreeNode(dt, path, initialLoad) { @@ -389,49 +169,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont } - $scope.deleteProperty = function(tab, propertyIndex) { - tab.properties.splice(propertyIndex, 1); - }; - - /* ---------- SORTING OPTIONS ---------- */ - - $scope.sortableOptionsTab = { - distance: 10, - tolerance: "pointer", - opacity: 0.7, - scroll: true, - cursor: "move", - placeholder: "ui-sortable-tabs-placeholder", - zIndex: 6000, - handle: ".edt-tab-handle", - items: ".edt-tab-sortable", - start: function (e, ui) { - ui.placeholder.height(ui.item.height()); - }, - stop: function(e, ui){ - - } - }; - - $scope.sortableOptionsEditor = { - distance: 10, - tolerance: "pointer", - connectWith: ".edt-property-list", - opacity: 0.7, - scroll: true, - cursor: "move", - placeholder: "ui-sortable-properties-placeholder", - zIndex: 6000, - handle: ".edt-property-handle", - items: ".edt-property-sortable", - start: function (e, ui) { - ui.placeholder.height(ui.item.height()); - }, - stop: function(e, ui){ - - } - }; - } angular.module("umbraco").controller("Umbraco.Editors.DocumentType.EditController", DocumentTypeEditController); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html index e7fb796973..5c7b2dc3df 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html @@ -15,7 +15,7 @@ -
+
@@ -36,13 +36,4 @@ - - -
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.controller.js new file mode 100644 index 0000000000..0a199e653f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.controller.js @@ -0,0 +1,282 @@ +/** + * @ngdoc controller + * @name Umbraco.Editors.DocumentType.ListViewController + * @function + * + * @description + * The controller for the content type editor list view section + */ +function DesignController($scope, contentTypeResource, dataTypeResource, contentTypeHelper, dataTypeHelper) { + + $scope.sortingMode = false; + + /* ---------- TOOLBAR ---------- */ + + $scope.page.toggleSortingMode = function() { + $scope.sortingMode = !$scope.sortingMode; + }; + + $scope.page.openCompositionsDialog = function() { + $scope.dialogModel = {}; + $scope.dialogModel.title = "Compositions"; + $scope.dialogModel.availableCompositeContentTypes = $scope.contentType.availableCompositeContentTypes; + $scope.dialogModel.compositeContentTypes = $scope.contentType.compositeContentTypes; + $scope.dialogModel.view = "views/documentType/dialogs/compositions/compositions.html"; + $scope.showDialog = true; + + $scope.dialogModel.close = function(){ + $scope.showDialog = false; + $scope.dialogModel = null; + }; + + $scope.dialogModel.selectCompositeContentType = function(compositeContentType) { + + if( $scope.contentType.compositeContentTypes.indexOf(compositeContentType.alias) === -1 ) { + + //merge composition with content type + contentTypeHelper.mergeCompositeContentType($scope.contentType, compositeContentType); + + } else { + + // split composition from content type + contentTypeHelper.splitCompositeContentType($scope.contentType, compositeContentType); + + } + + } + + }; + + /* ---------- TABS ---------- */ + + $scope.addTab = function(tab){ + + $scope.activateTab(tab); + + // push new init tab to the scope + contentTypeHelper.addInitTab($scope.contentType); + + }; + + $scope.removeTab = function(tabIndex) { + $scope.contentType.groups.splice(tabIndex, 1); + }; + + $scope.activateTab = function(tab) { + + // set all other tabs that are inactive to active + angular.forEach($scope.contentType.groups, function(group){ + // skip init tab + if(group.tabState !== "init") { + group.tabState = "inActive"; + } + }); + + tab.tabState = "active"; + + }; + + $scope.updateTabTitle = function(tab) { + if(tab.properties.length === 0) { + contentTypeHelper.addInitProperty(tab); + } + }; + + /* ---------- PROPERTIES ---------- */ + + $scope.toggleGroupSize = function(group){ + if(group.columns !== 12){ + group.columns = 12; + }else{ + group.columns = 6; + } + }; + + $scope.editPropertyTypeSettings = function(property) { + + if(!property.inherited) { + + $scope.dialogModel = {}; + $scope.dialogModel.title = "Edit property type settings"; + $scope.dialogModel.property = property; + $scope.dialogModel.view = "views/documentType/dialogs/editPropertySettings/editPropertySettings.html"; + $scope.showDialog = true; + + // set indicator on property to tell the dialog is open - is used to set focus on the element + property.dialogIsOpen = true; + + // set property to active + property.propertyState = "active"; + + $scope.dialogModel.changePropertyEditor = function(property) { + $scope.choosePropertyType(property); + }; + + $scope.dialogModel.editDataType = function(property) { + $scope.configDataType(property); + }; + + $scope.dialogModel.submit = function(model){ + + property.dialogIsOpen = false; + + $scope.showDialog = false; + $scope.dialogModel = null; + + // push new init property to scope + contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType); + + }; + + $scope.dialogModel.close = function(model){ + $scope.showDialog = false; + $scope.dialogModel = null; + + // push new init property to scope + contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType); + }; + + } + }; + + $scope.choosePropertyType = function(property) { + + $scope.dialogModel = {}; + $scope.dialogModel.title = "Choose property type"; + $scope.dialogModel.view = "views/documentType/dialogs/property.html"; + $scope.showDialog = true; + + property.dialogIsOpen = true; + + $scope.dialogModel.selectDataType = function(selectedDataType) { + + contentTypeResource.getPropertyTypeScaffold(selectedDataType.id).then(function(propertyType){ + + property.config = propertyType.config; + property.editor = propertyType.editor; + property.view = propertyType.view; + property.dataTypeId = selectedDataType.id; + property.dataTypeIcon = selectedDataType.icon; + property.dataTypeName = selectedDataType.name; + + property.propertyState = "active"; + + console.log(property); + + // open data type configuration + $scope.editPropertyTypeSettings(property); + + // push new init tab to scope + contentTypeHelper.addInitTab($scope.contentType); + + }); + + }; + + $scope.dialogModel.close = function(model){ + $scope.editPropertyTypeSettings(property); + }; + + }; + + $scope.configDataType = function(property) { + + $scope.dialogModel = {}; + $scope.dialogModel.title = "Edit data type"; + $scope.dialogModel.dataType = {}; + $scope.dialogModel.property = property; + $scope.dialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html"; + $scope.dialogModel.multiActions = [ + { + label: "Save", + action: function(dataType) { + saveDataType(dataType, false); + } + }, + { + label: "Save as new", + action: function(dataType) { + saveDataType(dataType, true); + } + } + ]; + $scope.showDialog = true; + + function saveDataType(dataType, isNew) { + + var preValues = dataTypeHelper.createPreValueProps(dataType.preValues); + + dataTypeResource.save(dataType, preValues, isNew).then(function(dataType) { + + contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType){ + + property.config = propertyType.config; + property.editor = propertyType.editor; + property.view = propertyType.view; + property.dataTypeId = dataType.id; + property.dataTypeIcon = dataType.icon; + property.dataTypeName = dataType.name; + + // open settings dialog + $scope.editPropertyTypeSettings(property); + + }); + + }); + + } + + $scope.dialogModel.close = function(model){ + $scope.editPropertyTypeSettings(property); + }; + + }; + + $scope.deleteProperty = function(tab, propertyIndex) { + tab.properties.splice(propertyIndex, 1); + }; + + + /* ---------- SORTING OPTIONS ---------- */ + + $scope.sortableOptionsTab = { + distance: 10, + tolerance: "pointer", + opacity: 0.7, + scroll: true, + cursor: "move", + placeholder: "ui-sortable-tabs-placeholder", + zIndex: 6000, + handle: ".edt-tab-handle", + items: ".edt-tab-sortable", + start: function (e, ui) { + ui.placeholder.height(ui.item.height()); + }, + stop: function(e, ui){ + + } + }; + + $scope.sortableOptionsEditor = { + distance: 10, + tolerance: "pointer", + connectWith: ".edt-property-list", + opacity: 0.7, + scroll: true, + cursor: "move", + placeholder: "ui-sortable-properties-placeholder", + zIndex: 6000, + handle: ".edt-property-handle", + items: ".edt-property-sortable", + start: function (e, ui) { + ui.placeholder.height(ui.item.height()); + }, + stop: function(e, ui){ + + } + }; + + +} + +angular.module("umbraco").controller("Umbraco.Editors.DocumentType.DesignController", DesignController); diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.html b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.html index dc8189a934..52d89ce29b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.html @@ -1,147 +1,159 @@ - -
    +
    +
      -
    • +
    • - -
      + +
      -
      -
      - -
      -
      - -
      - Add new tab - Add another tab -
      - -
      - - -
      - -
      - -
      - -
      - -
      - - +
      +
      + +
      -
      - Inherited from {{ tab.inheritedFromName }} - - {{ contentTypeName }} - , - +
      + Add new tab + Add another tab
      -
      -
        -
      • + +
        - -
        +
        + +
        -
        -
        -
        -
        -
        -
        -
        +
        + +
        + + +
        + +
        + Inherited from {{ tab.inheritedFromName }} + + {{ contentTypeName }} + , + +
        + +
        + +
        +
          +
        • + + +
          + +
          +
          +
          +
          +
          +
          +
          +
          + +
          + Add property +
          + +
          +
          -
          - Add property -
          +
          -
          + +
          -
          +
          Inherited from {{property.contentTypeName}}
          -
          +
          - -
          +
          {{ property.alias }}
          -
          Inherited from {{property.contentTypeName}}
          +
          + +
          -
          +
          + +
          -
          {{ property.alias }}
          - -
          -
          -
          - +
          + + {{ property.label }} + ({{ property.alias }})
          -
          - - {{ property.label }} - ({{ property.alias }}) + +
          + + + + + {{property.dataTypeName}} + Preview + + + +
          -
          + +
          +
          -
          + + + + - + + + + - - {{property.dataTypeName}} - Preview - - - - -
          - - -
          - -
          - - - - - - - - - - +
          -
          +
          • - +
        +
        -
      -
      +
      -
      +
      • - +
    -
\ No newline at end of file + + + + +
\ No newline at end of file