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

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

Browse Source
This commit is contained in:
Shannon
2018-08-06 21:19:36 +10:00
parent a0f7dbbc60
commit 3777ea9a7d
4 changed files with 160 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
View File

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

118
src/Umbraco.Web.UI.Client/src/common/directives/components/content/variantcontent.directive.js Normal file
View File

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

39
src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
View File

@@ -8,39 +8,12 @@
<div class="umb-split-views">
<div class="umb-split-view" ng-class="{'umb-split-view--collapsed': editor.collapsed}" ng-repeat="editor in editors">
<umb-load-indicator
ng-if="editor.loading">
</umb-load-indicator>
<div class="umb-split-view__content" ng-if="!editor.loading">
<umb-editor-header
menu="page.menu"
hide-menu="page.hideActionsMenu"
name="editor.content.name"
hide-icon="true"
hide-description="true"
hide-alias="true"
navigation="editor.content.apps"
variants="editor.content.variants"
hide-change-variant="page.hideChangeVariant"
on-back="backToListView()"
show-back-button="page.listViewPath !== null"
split-view-open="editors.length > 1"
on-open-in-split-view="openInSplitView(variant)"
on-close-split-view="closeSplitView($index, editor)"
on-select-variant="selectVariant($index, variant)">
</umb-editor-header>
<umb-editor-container>
<div class="umb-editor-sub-views">
<div id="sub-view-{{$index}}" ng-repeat="app in editor.content.apps track by app.alias">
<umb-editor-sub-view model="app" content="content" />
</div>
</div>
</umb-editor-container>
</div>
<variant-content page="page"
content="content"
editor="editor"
editors="editors"
init-variant="initVariant(variant)">
</variant-content>
</div>
</div>

34
src/Umbraco.Web.UI.Client/src/views/components/content/variant-content.html Normal file
View File

@@ -0,0 +1,34 @@
<div>
<umb-load-indicator ng-if="editor.loading">
</umb-load-indicator>
<div class="umb-split-view__content" ng-show="!editor.loading">
<ng-form name="contentHeaderForm">
<umb-editor-header menu="page.menu"
hide-menu="page.hideActionsMenu"
name="editor.content.name"
hide-icon="true"
hide-description="true"
hide-alias="true"
navigation="editor.content.apps"
variants="editor.content.variants"
hide-change-variant="page.hideChangeVariant"
on-back="backToListView()"
show-back-button="page.listViewPath !== null"
split-view-open="editors.length > 1"
on-open-in-split-view="openInSplitView(variant)"
on-close-split-view="closeSplitView()"
on-select-variant="selectVariant(variant)">
</umb-editor-header>
</ng-form>
<umb-editor-container>
<div class="umb-editor-sub-views">
<div ng-repeat="app in editor.content.apps track by app.alias">
<umb-editor-sub-view model="app" content="content" />
</div>
</div>
</umb-editor-container>
</div>
</div>