Adjust example for overlay in umb-child-selector (#8045)
This commit is contained in:
committed by
GitHub
parent
327d5ae7fb
commit
7b106ebefb
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user