Merge branch temp8 into temp8-p103

This commit is contained in:
Stephan
2018-09-12 11:59:17 +02:00
12 changed files with 305 additions and 189 deletions

View File

@@ -1,10 +1,10 @@
(function () {
'use strict';
function ContentEditController($rootScope, $scope, $routeParams, $q, $timeout, $window, $location,
appState, contentResource, entityResource, navigationService, notificationsService, angularHelper,
serverValidationManager, contentEditingHelper, treeService, fileManager, formHelper, umbRequestHelper,
keyboardService, umbModelMapper, editorState, $http, eventsService, relationResource, overlayService, localizationService) {
function ContentEditController($rootScope, $scope, $routeParams, $q, $window,
appState, contentResource, entityResource, navigationService, notificationsService,
serverValidationManager, contentEditingHelper, treeService, formHelper, umbRequestHelper,
editorState, $http, eventsService, relationResource, overlayService) {
var evts = [];
var infiniteMode = $scope.infiniteModel && $scope.infiniteModel.infiniteMode;
@@ -46,10 +46,6 @@
}
bindEvents();
// set first app to active
// We need to track active
$scope.content.apps[0].active = true;
resetVariantFlags();
}

View File

@@ -15,7 +15,8 @@
openVariants: "<",
onCloseSplitView: "&",
onSelectVariant: "&",
onOpenSplitView: "&"
onOpenSplitView: "&",
onSelectApp: "&"
},
controllerAs: 'vm',
controller: umbVariantContentController
@@ -32,7 +33,7 @@
vm.selectVariant = selectVariant;
vm.openSplitView = openSplitView;
vm.backToListView = backToListView;
vm.selectApp = selectApp;
/** Called when the component has linked all elements, this is when the form controller is available */
function postLink() {
@@ -51,10 +52,6 @@
}
}
function backToListView() {
$location.path(vm.page.listViewPath);
};
/**
* Used to proxy a callback
* @param {any} variant
@@ -65,6 +62,16 @@
}
}
/**
* Used to proxy a callback
* @param {any} item
*/
function selectApp(item) {
if(vm.onSelectApp) {
vm.onSelectApp({"app": item});
}
}
/**
* Used to proxy a callback
* @param {any} variant

View File

@@ -15,11 +15,12 @@
controller: umbVariantContentEditorsController
};
function umbVariantContentEditorsController($scope, $element, $location, $timeout) {
function umbVariantContentEditorsController($scope, $location, $timeout) {
var prevContentDateUpdated = null;
var vm = this;
var activeAppAlias = null;
vm.$onInit = onInit;
vm.$onChanges = onChanges;
@@ -29,6 +30,7 @@
vm.openSplitView = openSplitView;
vm.closeSplitView = closeSplitView;
vm.selectVariant = selectVariant;
vm.selectApp = selectApp;
//Used to track how many content views there are (for split view there will be 2, it could support more in theory)
vm.editors = [];
@@ -37,6 +39,8 @@
/** Called when the component initializes */
function onInit() {
// set first app to active
vm.content.apps[0].active = true;
prevContentDateUpdated = angular.copy(vm.content.updateDate);
setActiveCulture();
}
@@ -141,7 +145,7 @@
//with a copy of the contentApps. This is required because each editor renders it's own
//header and content apps section and the content apps contains the view for editing content itself
//and we need to assign a view model to the subView so that it is scoped to the current
//editor so that split views work.
//editor so that split views work.
//copy the apps from the main model if not assigned yet to the variant
if (!variant.apps) {
@@ -191,6 +195,16 @@
vm.openVariants[editorIndex] = variant.language.culture;
}
// make sure the same app it set to active in the new variant
if(activeAppAlias) {
angular.forEach(variant.apps, function(app) {
app.active = false;
if(app.alias === activeAppAlias) {
app.active = true;
}
});
}
return variant;
}
/**
@@ -288,6 +302,17 @@
}
}
/**
* Stores the active app in a variable so we can remember it when changing language
* @param {any} app This is the model of the selected app
*/
function selectApp(app) {
if(app && app.alias) {
activeAppAlias = app.alias;
}
}
}
angular.module('umbraco.directives').component('umbVariantContentEditors', umbVariantContentEditors);

View File

@@ -0,0 +1,124 @@
(function () {
'use strict';
function EditorContentHeader($location, $routeParams) {
function link(scope, el, attr, ctrl) {
if (!scope.serverValidationNameField) {
scope.serverValidationNameField = "Name";
}
if (!scope.serverValidationAliasField) {
scope.serverValidationAliasField = "Alias";
}
scope.vm = {};
scope.vm.dropdownOpen = false;
scope.vm.currentVariant = "";
function onInit() {
setCurrentVariant();
}
function setCurrentVariant() {
angular.forEach(scope.variants, function (variant) {
if (variant.active) {
scope.vm.currentVariant = variant;
}
});
}
scope.goBack = function () {
$location.path('/' + $routeParams.section + '/' + $routeParams.tree + '/' + $routeParams.method + '/' + scope.menu.currentNode.parentId);
};
scope.selectVariant = function (event, variant) {
if (scope.onSelectVariant) {
scope.vm.dropdownOpen = false;
scope.onSelectVariant({ "variant": variant });
}
};
scope.selectNavigationItem = function(item) {
if(scope.onSelectNavigationItem) {
scope.onSelectNavigationItem({"item": item});
}
}
scope.closeSplitView = function () {
if (scope.onCloseSplitView) {
scope.onCloseSplitView();
}
};
scope.openInSplitView = function (event, variant) {
if (scope.onOpenInSplitView) {
scope.vm.dropdownOpen = false;
scope.onOpenInSplitView({ "variant": variant });
}
};
/**
* keep track of open variants - this is used to prevent the same variant to be open in more than one split view
* @param {any} culture
*/
scope.variantIsOpen = function(culture) {
if(scope.openVariants.indexOf(culture) !== -1) {
return true;
}
}
onInit();
//watch for the active culture changing, if it changes, update the current variant
if (scope.variants) {
scope.$watch(function () {
for (var i = 0; i < scope.variants.length; i++) {
var v = scope.variants[i];
if (v.active) {
return v.language.culture;
}
}
return scope.vm.currentVariant.language.culture; //should never get here
}, function (newValue, oldValue) {
if (newValue !== scope.vm.currentVariant.language.culture) {
setCurrentVariant();
}
});
}
}
var directive = {
transclude: true,
restrict: 'E',
replace: true,
templateUrl: 'views/components/editor/umb-editor-content-header.html',
scope: {
name: "=",
nameLocked: "=",
menu: "=",
hideMenu: "<?",
variants: "=",
openVariants: "<",
hideChangeVariant: "<?",
navigation: "=",
onSelectNavigationItem: "&?",
showBackButton: "<?",
splitViewOpen: "=?",
onOpenInSplitView: "&?",
onCloseSplitView: "&?",
onSelectVariant: "&?",
serverValidationNameField: "@?",
serverValidationAliasField: "@?"
},
link: link
};
return directive;
}
angular.module('umbraco.directives').directive('umbEditorContentHeader', EditorContentHeader);
})();

View File

@@ -204,47 +204,25 @@ Use this directive to construct a header inside the main editor window.
(function () {
'use strict';
function EditorHeaderDirective($timeout, editorService, $location, $routeParams) {
function EditorHeaderDirective(editorService) {
function link(scope, el, attr, ctrl) {
if (!scope.serverValidationNameField) {
scope.serverValidationNameField = "Name";
}
if (!scope.serverValidationAliasField) {
scope.serverValidationAliasField = "Alias";
}
function link(scope) {
scope.vm = {};
scope.vm.dropdownOpen = false;
scope.vm.currentVariant = "";
function onInit() {
setCurrentVariant();
}
function setCurrentVariant() {
angular.forEach(scope.variants, function (variant) {
if (variant.active) {
scope.vm.currentVariant = variant;
}
});
}
scope.goBack = function () {
if (scope.onBack) {
$location.path('/' + $routeParams.section + '/' + $routeParams.tree + '/' + $routeParams.method + '/' + scope.menu.currentNode.parentId);
scope.onBack();
}
};
scope.selectVariant = function (event, variant) {
if (scope.onSelectVariant) {
scope.vm.dropdownOpen = false;
scope.onSelectVariant({ "variant": variant });
scope.selectNavigationItem = function(item) {
if(scope.onSelectNavigationItem) {
scope.onSelectNavigationItem({"item": item});
}
};
}
scope.openIconPicker = function () {
var iconPicker = {
@@ -269,58 +247,14 @@ Use this directive to construct a header inside the main editor window.
editorService.iconPicker(iconPicker);
};
scope.closeSplitView = function () {
if (scope.onCloseSplitView) {
scope.onCloseSplitView();
}
};
scope.openInSplitView = function (event, variant) {
if (scope.onOpenInSplitView) {
scope.vm.dropdownOpen = false;
scope.onOpenInSplitView({ "variant": variant });
}
};
/**
* keep track of open variants - this is used to prevent the same variant to be open in more than one split view
* @param {any} culture
*/
scope.variantIsOpen = function(culture) {
if(scope.openVariants.indexOf(culture) !== -1) {
return true;
}
}
onInit();
//watch for the active culture changing, if it changes, update the current variant
if (scope.variants) {
scope.$watch(function () {
for (var i = 0; i < scope.variants.length; i++) {
var v = scope.variants[i];
if (v.active) {
return v.language.culture;
}
}
return scope.vm.currentVariant.language.culture; //should never get here
}, function (newValue, oldValue) {
if (newValue !== scope.vm.currentVariant.language.culture) {
setCurrentVariant();
}
});
}
}
var directive = {
transclude: true,
restrict: 'E',
replace: true,
templateUrl: 'views/components/editor/umb-editor-header.html',
scope: {
tabs: "=",
actions: "=",
name: "=",
nameLocked: "=",
menu: "=",
@@ -332,19 +266,11 @@ Use this directive to construct a header inside the main editor window.
description: "=",
hideDescription: "@",
descriptionLocked: "@",
variants: "=",
openVariants: "<",
hideChangeVariant: "<?",
navigation: "=",
onSelectNavigationItem: "&?",
key: "=",
onBack: "&?",
showBackButton: "<?",
splitViewOpen: "=?",
onOpenInSplitView: "&?",
onCloseSplitView: "&?",
onSelectVariant: "&?",
serverValidationNameField: "@?",
serverValidationAliasField: "@?"
showBackButton: "<?"
},
link: link
};

View File

@@ -20,8 +20,11 @@
scope.clickNavigationItem = function (selectedItem) {
scope.showDropdown = false;
runItemAction(selectedItem);
eventsService.emit("app.tabChange", selectedItem);
setItemToActive(selectedItem);
if(scope.onSelect) {
scope.onSelect({"item": selectedItem});
}
eventsService.emit("app.tabChange", selectedItem);
};
scope.toggleDropdown = function () {
@@ -124,7 +127,8 @@
replace: true,
templateUrl: 'views/components/editor/umb-editor-navigation.html',
scope: {
navigation: "="
navigation: "=",
onSelect: "&"
},
link: link
};

View File

@@ -6,9 +6,10 @@
<umb-editor-view ng-if="!page.loading">
<umb-variant-content-editors page="page"
content="content"
culture="culture">
<umb-variant-content-editors
page="page"
content="content"
culture="culture">
</umb-variant-content-editors>
<umb-editor-footer>

View File

@@ -12,7 +12,8 @@
open-variants="vm.openVariants"
on-open-split-view="vm.openSplitView(variant)"
on-close-split-view="vm.closeSplitView($index)"
on-select-variant="vm.selectVariant(variant, $index)">
on-select-variant="vm.selectVariant(variant, $index)"
on-select-app="vm.selectApp(app)">
</umb-variant-content>
</div>

View File

@@ -1,28 +1,27 @@
<div>
<umb-load-indicator ng-if="vm.editor.loading">
<umb-load-indicator
ng-if="vm.editor.loading">
</umb-load-indicator>
<div class="umb-split-view__content" ng-show="!vm.editor.loading">
<ng-form name="contentHeaderForm">
<umb-editor-header menu="vm.page.menu"
hide-menu="vm.page.hideActionsMenu"
name="vm.editor.content.name"
hide-icon="true"
hide-description="true"
hide-alias="true"
navigation="vm.editor.content.apps"
variants="vm.editor.content.variants"
open-variants="vm.openVariants"
hide-change-variant="vm.page.hideChangeVariant"
on-back="vm.backToListView()"
show-back-button="vm.page.listViewPath !== null"
split-view-open="vm.editorCount > 1"
on-open-in-split-view="vm.openSplitView(variant)"
on-close-split-view="vm.onCloseSplitView()"
on-select-variant="vm.selectVariant(variant)"
server-validation-name-field="{{'Variants[' + vm.editorIndex + '].Name'}}">
</umb-editor-header>
<umb-editor-content-header
menu="vm.page.menu"
hide-menu="vm.page.hideActionsMenu"
name="vm.editor.content.name"
navigation="vm.editor.content.apps"
on-select-navigation-item="vm.selectApp(item)"
variants="vm.editor.content.variants"
open-variants="vm.openVariants"
hide-change-variant="vm.page.hideChangeVariant"
show-back-button="vm.page.listViewPath !== null"
split-view-open="vm.editorCount > 1"
on-open-in-split-view="vm.openSplitView(variant)"
on-close-split-view="vm.onCloseSplitView()"
on-select-variant="vm.selectVariant(variant)"
server-validation-name-field="{{'Variants[' + vm.editorIndex + '].Name'}}">
</umb-editor-content-header>
</ng-form>
<umb-editor-container>

View File

@@ -0,0 +1,83 @@
<div data-element="editor-header" class="umb-editor-header">
<div class="flex items-center" style="height: 100%;">
<div ng-if="showBackButton === true && splitViewOpen !== true" style="margin-right: 15px;">
<a class="umb-editor-header__back" href="#" ng-click="goBack()" prevent-default>
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</a>
</div>
<div class="flex items-center" style="flex: 1;">
<div id="nameField" style="flex: 1 1 auto;">
<div class="umb-editor-header__name-wrapper">
<ng-form name="headerNameForm">
<input data-element="editor-name-field"
type="text"
class="umb-editor-header__name-input"
localize="placeholder"
placeholder="@placeholders_entername"
name="headerName"
ng-show="!nameLocked"
ng-model="name"
ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
umb-auto-focus
val-server-field="{{serverValidationNameField}}"
required
autocomplete="off" />
</ng-form>
<a ng-if="variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
<span>{{vm.currentVariant.language.name}}</span>
<ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
</a>
<span ng-if="hideChangeVariant" class="umb-variant-switcher__toggle">
<span>{{vm.currentVariant.language.name}}</span>
</span>
<umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
<umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active, 'umb-variant-switcher_item--not-allowed': variantIsOpen(variant.language.culture)}" ng-repeat="variant in variants">
<a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
<span class="umb-variant-switcher__name">{{variant.language.name}}</span>
<umb-variant-state variant="variant" class="umb-variant-switcher__state"></umb-variant-state>
</a>
<div ng-if="splitViewOpen !== true && !variant.active" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, variant)">Open in split view</div>
</umb-dropdown-item>
</umb-dropdown>
</div>
<div class="umb-panel-header-name" ng-if="nameLocked">{{ name }}</div>
</div>
</div>
<div ng-if="splitViewOpen" style="margin-left: 20px;">
<a class="umb-editor-header__close-split-view" href="" ng-click="closeSplitView()">
<i class="icon-delete"></i>
</a>
</div>
<div ng-if="navigation && splitViewOpen !== true" style="margin-left: 20px;">
<umb-editor-navigation
data-element="editor-sub-views"
navigation="navigation"
on-select="selectNavigationItem(item)">
</umb-editor-navigation>
</div>
<div ng-if="menu.currentNode && splitViewOpen !== true && hideMenu !== true" style="margin-left: 20px;">
<umb-editor-menu
data-element="editor-actions"
current-node="menu.currentNode"
current-section="{{menu.currentSection}}">
</umb-editor-menu>
</div>
</div>
</div>

View File

@@ -34,7 +34,7 @@
ng-model="name"
ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
umb-auto-focus
val-server-field="{{serverValidationNameField}}"
val-server-field="Name"
required
autocomplete="off" />
</ng-form>
@@ -45,28 +45,9 @@
alias="$parent.alias"
alias-from="$parent.name"
enable-lock="true"
server-validation-field="{{serverValidationAliasField}}">
server-validation-field="Alias">
</umb-generate-alias>
<a ng-if="variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
<span>{{vm.currentVariant.language.name}}</span>
<ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
</a>
<span ng-if="hideChangeVariant" class="umb-variant-switcher__toggle">
<span>{{vm.currentVariant.language.name}}</span>
</span>
<umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
<umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.active, 'umb-variant-switcher_item--not-allowed': variantIsOpen(variant.language.culture)}" ng-repeat="variant in variants">
<a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
<span class="umb-variant-switcher__name">{{variant.language.name}}</span>
<umb-variant-state variant="variant" class="umb-variant-switcher__state"></umb-variant-state>
</a>
<div ng-if="splitViewOpen !== true && !variant.active" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, variant)">Open in split view</div>
</umb-dropdown-item>
</umb-dropdown>
</div>
<div class="umb-panel-header-name" ng-if="nameLocked" title="{{key}}">{{ name }}</div>
@@ -85,22 +66,19 @@
</div>
<div ng-if="splitViewOpen" style="margin-left: 20px;">
<a class="umb-editor-header__close-split-view" href="" ng-click="closeSplitView()">
<i class="icon-delete"></i>
</a>
</div>
<div ng-if="navigation && splitViewOpen !== true" style="margin-left: 20px;">
<umb-editor-navigation data-element="editor-sub-views"
navigation="navigation">
<umb-editor-navigation
data-element="editor-sub-views"
navigation="navigation"
on-select="selectNavigationItem(item)">
</umb-editor-navigation>
</div>
<div ng-if="menu.currentNode && splitViewOpen !== true && hideMenu !== true" style="margin-left: 20px;">
<umb-editor-menu data-element="editor-actions"
current-node="menu.currentNode"
current-section="{{menu.currentSection}}">
<umb-editor-menu
data-element="editor-actions"
current-node="menu.currentNode"
current-section="{{menu.currentSection}}">
</umb-editor-menu>
</div>

View File

@@ -6,7 +6,7 @@
* @description
* The controller for the media editor
*/
function mediaEditController($scope, $routeParams, $q, appState, mediaResource, entityResource, navigationService, notificationsService, angularHelper, serverValidationManager, contentEditingHelper, fileManager, treeService, formHelper, umbModelMapper, editorState, umbRequestHelper, $http, eventsService) {
function mediaEditController($scope, $routeParams, $q, appState, mediaResource, entityResource, navigationService, notificationsService, angularHelper, serverValidationManager, contentEditingHelper, fileManager, formHelper, editorState, umbRequestHelper, $http, eventsService) {
var evts = [];
var nodeId = null;
@@ -79,10 +79,7 @@ function mediaEditController($scope, $routeParams, $q, appState, mediaResource,
editorState.set($scope.content);
// We don't get the info tab from the server from version 7.8 so we need to manually add it
//contentEditingHelper.addInfoTab($scope.content.tabs);
init($scope.content);
init();
$scope.page.loading = false;
@@ -96,29 +93,7 @@ function mediaEditController($scope, $routeParams, $q, appState, mediaResource,
});
}
function init(content) {
// prototype content and info apps
var contentApp = {
"name": "Content",
"alias": "content",
"icon": "icon-document",
"view": "views/media/apps/content/content.html"
};
var infoApp = {
"name": "Info",
"alias": "info",
"icon": "icon-info",
"view": "views/media/apps/info/info.html"
};
var listview = {
"name": "Child items",
"alias": "childItems",
"icon": "icon-list",
"view": "views/media/apps/listview/listview.html"
};
function init() {
// set first app to active
$scope.content.apps[0].active = true;
@@ -154,7 +129,7 @@ function mediaEditController($scope, $routeParams, $q, appState, mediaResource,
syncTreeNode($scope.content, data.path);
init($scope.content);
init();
$scope.page.saveButtonState = "success";
@@ -216,10 +191,7 @@ function mediaEditController($scope, $routeParams, $q, appState, mediaResource,
});
}
// We don't get the info tab from the server from version 7.8 so we need to manually add it
//contentEditingHelper.addInfoTab($scope.content.tabs);
init($scope.content);
init();
$scope.page.loading = false;