From 3777ea9a7df30fb6c7953dab25f3a5209414bc3a Mon Sep 17 00:00:00 2001 From: Shannon Date: Mon, 6 Aug 2018 21:19:36 +1000 Subject: [PATCH] Moves the 'editor' variant editor to a separate directive so that we can separate out a bit of logic and have a form to watch for dirty tracking on the header value --- .../components/content/edit.controller.js | 73 +---------- .../content/variantcontent.directive.js | 118 ++++++++++++++++++ .../src/views/components/content/edit.html | 39 +----- .../components/content/variant-content.html | 34 +++++ 4 files changed, 160 insertions(+), 104 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/content/variantcontent.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/content/variant-content.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js index 8af09e3c00..3fda284a11 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js @@ -556,76 +556,7 @@ }); }; - $scope.selectVariant = function (editorIndex, variantDropDownItem) { - - //if the editor index is zero, then update the query string to track the lang selection, otherwise if it's part - //of a 2nd split view editor then update the model directly. - if (editorIndex === 0) { - //if we've made it this far, then update the query string - $location.search("cculture", variantDropDownItem.language.culture); - } - else { - //set all variant drop down items as inactive for this editor and then set the selected on as active - var editor = $scope.editors[editorIndex]; - for (var i = 0; i < editor.content.variants.length; i++) { - editor.content.variants[i].active = false; - } - variantDropDownItem.active = true; - - //get the variant content model and initialize the editor with that - var variant = _.find($scope.content.variants, function (v) { - return v.language.culture === variantDropDownItem.language.culture; - }); - editor.content = initVariant(variant); - } - }; - - $scope.closeSplitView = function (index, editor) { - //TODO: hacking animation states - these should hopefully be easier to do when we upgrade angular - editor.loading = true; - editor.collapsed = true; - $timeout(function () { - $scope.editors.splice(index, 1); - }, 400); - }; - - $scope.openInSplitView = function (selectedVariant) { - - var selectedCulture = selectedVariant.language.culture; - - //only the content app can be selected since no other apps are shown, and because we copy all of these apps - //to the "editors" we need to update this across all editors - for (var e = 0; e < $scope.editors.length; e++) { - var editor = $scope.editors[e]; - for (var i = 0; i < editor.content.apps.length; i++) { - var app = editor.content.apps[i]; - if (app.alias === "content") { - app.active = true; - } - else { - app.active = false; - } - } - } - - //Find the whole variant model based on the culture that was chosen - var variant = _.find($scope.content.variants, function (v) { - return v.language.culture === selectedCulture; - }); - - var editor = { - content: initVariant(variant) - }; - $scope.editors.push(editor); - - //TODO: hacking animation states - these should hopefully be easier to do when we upgrade angular - editor.collapsed = true; - editor.loading = true; - $timeout(function () { - editor.collapsed = false; - editor.loading = false; - }, 100); - }; + $scope.initVariant = initVariant; /* publish method used in infinite editing */ $scope.publishAndClose = function (content) { @@ -650,7 +581,7 @@ $scope.saveAndCloseButtonState = "success"; }).catch(angular.noop);; }; - + function moveNode(node, target) { contentResource.move({ "parentId": target.id, "id": node.id }) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/variantcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/variantcontent.directive.js new file mode 100644 index 0000000000..813bf81cee --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/variantcontent.directive.js @@ -0,0 +1,118 @@ +(function () { + 'use strict'; + + /** + * A directive to encapsulate each variant editor which includes the name header and all content apps for a given variant + * @param {any} $timeout + * @param {any} $location + */ + function variantContentDirective($timeout, $location) { + + var directive = { + restrict: 'E', + replace: true, + templateUrl: 'views/components/content/variant-content.html', + link: function (scope) { + + scope.openInSplitView = function (selectedVariant) { + + var selectedCulture = selectedVariant.language.culture; + + //only the content app can be selected since no other apps are shown, and because we copy all of these apps + //to the "editors" we need to update this across all editors + for (var e = 0; e < scope.editors.length; e++) { + var editor = scope.editors[e]; + for (var i = 0; i < editor.content.apps.length; i++) { + var app = editor.content.apps[i]; + if (app.alias === "content") { + app.active = true; + } + else { + app.active = false; + } + } + } + + //Find the whole variant model based on the culture that was chosen + var variant = _.find(scope.content.variants, function (v) { + return v.language.culture === selectedCulture; + }); + + var editor = { + content: scope.initVariant({ variant: variant}) + }; + scope.editors.push(editor); + + //TODO: hacking animation states - these should hopefully be easier to do when we upgrade angular + editor.collapsed = true; + editor.loading = true; + $timeout(function () { + editor.collapsed = false; + editor.loading = false; + }, 100); + }; + + scope.selectVariant = function (variantDropDownItem) { + + var editorIndex = _.findIndex(scope.editors, function (e) { + return e === scope.editor; + }); + + //if the editor index is zero, then update the query string to track the lang selection, otherwise if it's part + //of a 2nd split view editor then update the model directly. + if (editorIndex === 0) { + //if we've made it this far, then update the query string + $location.search("cculture", variantDropDownItem.language.culture); + } + else { + //set all variant drop down items as inactive for this editor and then set the selected on as active + for (var i = 0; i < scope.editor.content.variants.length; i++) { + scope.editor.content.variants[i].active = false; + } + variantDropDownItem.active = true; + + //get the variant content model and initialize the editor with that + var variant = _.find(scope.content.variants, function (v) { + return v.language.culture === variantDropDownItem.language.culture; + }); + scope.editor.content = scope.initVariant({ variant: variant }); + } + }; + + scope.closeSplitView = function () { + //TODO: hacking animation states - these should hopefully be easier to do when we upgrade angular + scope.editor.loading = true; + scope.editor.collapsed = true; + $timeout(function () { + var index = _.findIndex(scope.editors, function(e) { + return e === scope.editor; + }); + scope.editors.splice(index, 1); + }, 400); + }; + + //set the content to dirty if the header changes + scope.$watch("contentHeaderForm.$dirty", + function (newValue, oldValue) { + if (newValue === true) { + scope.editor.content.isDirty = true; + } + }); + + }, + scope: { + page: "=", + content: "=", + editor: "=", + editors: "=", + initVariant: "&" + } + }; + + return directive; + + } + + angular.module('umbraco.directives').directive('variantContent', variantContentDirective); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html index 88b5343c1f..c4ac56ff96 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html @@ -8,39 +8,12 @@
- - - - -
- - - - -
-
- -
-
- -
- + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/variant-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/variant-content.html new file mode 100644 index 0000000000..f0c1132005 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/variant-content.html @@ -0,0 +1,34 @@ +
+ + + +
+ + + + + + + +
+
+ +
+
+ +
+