Adjust example for overlay in umb-child-selector (#8045)

This commit is contained in:
Bjarne Fyrstenborg
2020-07-09 16:48:27 +02:00
committed by GitHub
parent 327d5ae7fb
commit 7b106ebefb
4 changed files with 38 additions and 38 deletions

View File

@@ -21,14 +21,6 @@ Use this directive to render a ui component for selecting child items to a paren
on-remove="vm.removeChild">
</umb-child-selector>
<!-- use overlay to select children from -->
<umb-overlay
ng-if="vm.overlay.show"
model="vm.overlay"
position="target"
view="vm.overlay.view">
</umb-overlay>
</div>
</pre>
@@ -37,7 +29,7 @@ Use this directive to render a ui component for selecting child items to a paren
(function () {
"use strict";
function Controller() {
function Controller(overlayService) {
var vm = this;
@@ -64,23 +56,29 @@ Use this directive to render a ui component for selecting child items to a paren
vm.removeChild = removeChild;
function addChild($event) {
vm.overlay = {
const dialog = {
view: "itempicker",
title: "Choose child",
availableItems: vm.availableChildren,
selectedItems: vm.selectedChildren,
event: $event,
show: true,
submit: function(model) {
// add selected child
vm.selectedChildren.push(model.selectedItem);
if (model.selectedItem) {
// add selected child
vm.selectedChildren.push(model.selectedItem);
}
// close overlay
vm.overlay.show = false;
vm.overlay = null;
overlayService.close();
},
close: function() {
overlayService.close();
}
};
overlayService.open(dialog);
}
function removeChild($index) {

View File

@@ -3,7 +3,7 @@
<div class="umb-child-selector__child -parent">
<div class="umb-child-selector__child-description">
<div class="umb-child-selector__child-icon-holder">
<i class="umb-child-selector__child-icon {{ parentIcon }}"></i>
<i class="umb-child-selector__child-icon {{ parentIcon }}" aria-hidden="true"></i>
</div>
<span class="umb-child-selector__child-name">
<strong>{{ parentName }}</strong>

View File

@@ -14,12 +14,9 @@
/* ----------- SCOPE VARIABLES ----------- */
var vm = this;
var childNodeSelectorOverlayTitle = "";
vm.contentTypes = [];
vm.selectedChildren = [];
vm.overlayTitle = "";
vm.showAllowSegmentationOption = Umbraco.Sys.ServerVariables.umbracoSettings.showAllowSegmentationForDocumentTypes || false;
vm.addChild = addChild;
@@ -65,16 +62,18 @@
}
function addChild($event) {
var childNodeSelectorOverlay = {
const dialog = {
view: "itempicker",
title: childNodeSelectorOverlayTitle,
availableItems: vm.contentTypes,
selectedItems: vm.selectedChildren,
position: "target",
event: $event,
submit: function(model) {
vm.selectedChildren.push(model.selectedItem);
$scope.model.allowedContentTypes.push(model.selectedItem.id);
submit: function (model) {
if (model.selectedItem) {
vm.selectedChildren.push(model.selectedItem);
$scope.model.allowedContentTypes.push(model.selectedItem.id);
}
overlayService.close();
},
close: function() {
@@ -82,8 +81,10 @@
}
};
overlayService.open(childNodeSelectorOverlay);
localizationService.localize("contentTypeEditor_chooseChildNode").then(value => {
dialog.title = value;
overlayService.open(dialog);
});
}
function removeChild(selectedChild, index) {

View File

@@ -6,7 +6,6 @@
/* ----------- SCOPE VARIABLES ----------- */
var vm = this;
var childNodeSelectorOverlayTitle = "";
vm.mediaTypes = [];
vm.selectedChildren = [];
@@ -22,10 +21,6 @@
function init() {
localizationService.localize("contentTypeEditor_chooseChildNode").then(function(value){
childNodeSelectorOverlayTitle = value;
});
mediaTypeResource.getAll().then(function(mediaTypes){
vm.mediaTypes = mediaTypes;
@@ -44,23 +39,29 @@
}
function addChild($event) {
var childNodeSelectorOverlay = {
var dialog = {
view: "itempicker",
title: childNodeSelectorOverlayTitle,
availableItems: vm.mediaTypes,
selectedItems: vm.selectedChildren,
position: "target",
event: $event,
submit: function(model) {
vm.selectedChildren.push(model.selectedItem);
$scope.model.allowedContentTypes.push(model.selectedItem.id);
submit: function (model) {
if (model.selectedItem) {
vm.selectedChildren.push(model.selectedItem);
$scope.model.allowedContentTypes.push(model.selectedItem.id);
}
overlayService.close();
},
close: function() {
overlayService.close();
}
};
overlayService.open(childNodeSelectorOverlay);
localizationService.localize("contentTypeEditor_chooseChildNode").then(value => {
dialog.title = value;
overlayService.open(dialog);
});
}
function removeChild(selectedChild, index) {