Skip to content
This repository was archived by the owner on Feb 10, 2024. It is now read-only.

Commit 94faf0c

Browse files
skttlskttl
committed
rewrite to use editorService in stead of umb-overlay - and we get infinite editing :)
1 parent 944b81f commit 94faf0c

File tree

3 files changed

+117
-112
lines changed

3 files changed

+117
-112
lines changed

‎src/Our.Umbraco.DocTypeGridEditor/Web/UI/App_Plugins/DocTypeGridEditor/Js/doctypegrideditor.controllers.js

Lines changed: 69 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
angular.module("umbraco").controller("Our.Umbraco.DocTypeGridEditor.GridEditors.DocTypeGridEditor", [
22

33
"$scope",
4-
"$rootScope",
54
"$timeout",
6-
"$routeParams",
75
"editorState",
86
'assetsService',
97
"Our.Umbraco.DocTypeGridEditor.Resources.DocTypeGridEditorResources",
108
"umbRequestHelper",
119
"localizationService",
10+
"editorService",
1211

13-
function ($scope, $rootScope, $timeout, $routeParams, editorState, assetsService, dtgeResources, umbRequestHelper, localizationService) {
12+
function ($scope, $timeout, editorState, assetsService, dtgeResources, umbRequestHelper, localizationService, editorService) {
1413

1514
const defaultTitle = "Click to insert item",
1615
defaultSelectContentTypeLabel = "Choose a Content Type",
17-
defaultOverlayTitle = "Edit tem";
16+
defaultOverlayTitle = "Edit item";
1817

1918
$scope.title = defaultTitle;
2019
$scope.selectContentTypeLabel = defaultSelectContentTypeLabel;
2120

2221
var overlayTitle = defaultOverlayTitle;
22+
23+
var overlayOptions = {
24+
view: umbRequestHelper.convertVirtualToAbsolutePath(
25+
"~/App_Plugins/DocTypeGridEditor/Views/doctypegrideditor.dialog.html"),
26+
model: {}
27+
};
28+
2329
$scope.icon = "icon-item-arrangement";
24-
$scope.overlay = {};
25-
$scope.overlay.show = false;
26-
$scope.overlay.view =
27-
umbRequestHelper.convertVirtualToAbsolutePath(
28-
"~/App_Plugins/DocTypeGridEditor/Views/doctypegrideditor.dialog.html");
2930

3031
// localize strings
3132
localizationService.localizeMany(["docTypeGridEditor_insertItem", "docTypeGridEditor_editItem", "docTypeGridEditor_selectContentType"]).then(function (data) {
@@ -55,45 +56,40 @@
5556

5657
$scope.setDocType = function () {
5758

58-
$scope.overlay = {};
59-
$scope.overlay.show = true;
60-
$scope.overlay.title = overlayTitle;
61-
$scope.overlay.submitButtonLabelKey = "bulk_done";
62-
$scope.overlay.view =
63-
umbRequestHelper.convertVirtualToAbsolutePath(
64-
"~/App_Plugins/DocTypeGridEditor/Views/doctypegrideditor.dialog.html");
65-
$scope.overlay.editorName = $scope.control.editor.name;
66-
$scope.overlay.allowedDocTypes = $scope.control.editor.config.allowedDocTypes || [];
67-
$scope.overlay.nameTemplate = $scope.control.editor.config.nameTemplate;
68-
$scope.overlay.dialogData = {
59+
overlayOptions.title = overlayTitle;
60+
overlayOptions.submitButtonLabelKey = "bulk_done";
61+
overlayOptions.editorName = $scope.control.editor.name;
62+
overlayOptions.allowedDocTypes = $scope.control.editor.config.allowedDocTypes || [];
63+
overlayOptions.nameTemplate = $scope.control.editor.config.nameTemplate;
64+
65+
overlayOptions.dialogData = {
6966
docTypeAlias: $scope.control.value.dtgeContentTypeAlias,
7067
value: $scope.control.value.value,
7168
id: $scope.control.value.id
7269
};
73-
$scope.overlay.close = function (oldModel) {
74-
$scope.overlay.show = false;
75-
$scope.overlay = null;
70+
overlayOptions.close = function () {
71+
editorService.close();
7672
}
77-
$scope.overlay.submit = function (newModel) {
73+
overlayOptions.submit = function (newModel) {
7874

7975
// Copy property values to scope model value
8076
if (newModel.node) {
8177
var value = {
8278
name: newModel.editorName
8379
};
8480

85-
for (var v = 0; v < newModel.node.variants.length; v++) {
86-
var variant = newModel.node.variants[v];
87-
for (var t = 0; t < variant.tabs.length; t++) {
88-
var tab = variant.tabs[t];
89-
for (var p = 0; p < tab.properties.length; p++) {
90-
var prop = tab.properties[p];
91-
if (typeof prop.value !== "function") {
92-
value[prop.alias] = prop.value;
93-
}
94-
}
95-
}
96-
}
81+
for (var v = 0; v < newModel.node.variants.length; v++) {
82+
var variant = newModel.node.variants[v];
83+
for (var t = 0; t < variant.tabs.length; t++) {
84+
var tab = variant.tabs[t];
85+
for (var p = 0; p < tab.properties.length; p++) {
86+
var prop = tab.properties[p];
87+
if (typeof prop.value !== "function") {
88+
value[prop.alias] = prop.value;
89+
}
90+
}
91+
}
92+
}
9793

9894
if (newModel.nameExp) {
9995
var newName = newModel.nameExp(value); // Run it against the stored dictionary value, NOT the node object
@@ -114,9 +110,10 @@
114110
id: newModel.dialogData.id
115111
});
116112
$scope.setPreview($scope.control.value);
117-
$scope.overlay.show = false;
118-
$scope.overlay = null;
113+
editorService.close();
119114
};
115+
116+
editorService.open(overlayOptions);
120117
};
121118

122119
$scope.setPreview = function (model) {
@@ -207,6 +204,21 @@ angular.module("umbraco").controller("Our.Umbraco.DocTypeGridEditor.Dialogs.DocT
207204

208205
function ($scope, $interpolate, formHelper, contentResource, dtgeResources, dtgeUtilityService) {
209206

207+
var vm = this;
208+
vm.submit = submit;
209+
vm.close = close;
210+
vm.loading = true;
211+
function submit() {
212+
if ($scope.model.submit) {
213+
$scope.model.submit($scope.model);
214+
}
215+
}
216+
function close() {
217+
if ($scope.model.close) {
218+
$scope.model.close();
219+
}
220+
}
221+
210222
$scope.docTypes = [];
211223
$scope.dialogMode = "selectDocType";
212224
$scope.selectedDocType = null;
@@ -225,26 +237,29 @@ angular.module("umbraco").controller("Our.Umbraco.DocTypeGridEditor.Dialogs.DocT
225237
};
226238

227239
function loadNode() {
240+
vm.loading = true;
228241
contentResource.getScaffold(-20, $scope.model.dialogData.docTypeAlias).then(function (data) {
229-
242+
230243
// Merge current value
231244
if ($scope.model.dialogData.value) {
232-
for (var v = 0; v < data.variants.length; v++) {
233-
var variant = data.variants[v];
234-
for (var t = 0; t < variant.tabs.length; t++) {
235-
var tab = variant.tabs[t];
236-
for (var p = 0; p < tab.properties.length; p++) {
237-
var prop = tab.properties[p];
238-
if ($scope.model.dialogData.value[prop.alias]) {
239-
prop.value = $scope.model.dialogData.value[prop.alias];
240-
}
241-
}
242-
}
243-
}
245+
for (var v = 0; v < data.variants.length; v++) {
246+
var variant = data.variants[v];
247+
for (var t = 0; t < variant.tabs.length; t++) {
248+
var tab = variant.tabs[t];
249+
for (var p = 0; p < tab.properties.length; p++) {
250+
var prop = tab.properties[p];
251+
if ($scope.model.dialogData.value[prop.alias]) {
252+
prop.value = $scope.model.dialogData.value[prop.alias];
253+
}
254+
}
255+
}
256+
}
244257
};
245258

246259
// Assign the model to scope
247260
$scope.nodeContext = $scope.model.node = data;
261+
vm.content = $scope.nodeContext.variants[0];
262+
vm.loading = false;
248263
});
249264
}
250265

@@ -261,6 +276,9 @@ angular.module("umbraco").controller("Our.Umbraco.DocTypeGridEditor.Dialogs.DocT
261276
$scope.dialogMode = "edit";
262277
loadNode();
263278
}
279+
else {
280+
vm.loading = false;
281+
}
264282
});
265283
}
266284

‎src/Our.Umbraco.DocTypeGridEditor/Web/UI/App_Plugins/DocTypeGridEditor/Views/doctypegrideditor.dialog.html

Lines changed: 48 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,48 @@
1-
<div class="dtge-dialog" ng-controller="Our.Umbraco.DocTypeGridEditor.Dialogs.DocTypeGridEditorDialog">
2-
3-
<div>
4-
<umb-control-group label="{{selectContentTypeLabel}}" ng-if="dialogMode == 'selectDocType'">
5-
<ul class="umb-actions umb-actions-child">
6-
<li data-element="action-create-{{docType.alias}}" ng-repeat="docType in docTypes | orderBy:'name':false">
7-
<a ng-click="selectDocType(docType.alias)">
8-
<i class="large {{docType.icon}}"></i>
9-
<span class="menu-label">
10-
{{docType.name}}
11-
<small>
12-
{{docType.description}}
13-
</small>
14-
</span>
15-
</a>
16-
</li>
17-
</ul>
18-
</umb-control-group>
19-
20-
<div ng-if="dialogMode == 'edit'">
21-
22-
<ng-form name="tabbedContentForm">
23-
<div class="umb-group-panel" retrive-dom-element="registerPropertyGroup(element[0], attributes.appAnchor)" data-app-anchor="{{group.id}}" data-element="group-{{group.alias}}" ng-repeat="group in model.node.variants[0].tabs track by group.label">
24-
25-
<div class="umb-group-panel__header">
26-
<div>{{ group.label }}</div>
27-
</div>
28-
29-
<div class="umb-group-panel__content">
30-
<umb-property data-element="property-{{property.alias}}"
31-
ng-repeat="property in group.properties track by property.alias"
32-
property="property"
33-
show-inherit="content.variants.length > 1 && !property.culture && !activeVariant.language.isDefault"
34-
inherits-from="defaultVariant.language.name">
35-
36-
<div ng-class="{'o-40 cursor-not-allowed': content.variants.length > 1 && !activeVariant.language.isDefault && !property.culture && !property.unlockInvariantValue}">
37-
<umb-property-editor model="property"
38-
preview="content.variants.length > 1 && !activeVariant.language.isDefault && !property.culture && !property.unlockInvariantValue">
39-
</umb-property-editor>
40-
</div>
41-
42-
</umb-property>
43-
</div>
44-
45-
</div>
46-
47-
<umb-empty-state ng-if="content.tabs.length === 0"
48-
position="center">
49-
<localize key="content_noProperties"></localize>
50-
</umb-empty-state>
51-
52-
</ng-form>
53-
</div>
54-
</div>
55-
56-
</div>
1+
<div class="dtge-dialog" ng-controller="Our.Umbraco.DocTypeGridEditor.Dialogs.DocTypeGridEditorDialog as vm">
2+
<umb-editor-view>
3+
<umb-editor-header name="model.title"
4+
name-locked="true"
5+
hide-alias="true"
6+
hide-icon="true"
7+
hide-description="true">
8+
</umb-editor-header>
9+
<umb-editor-container>
10+
<umb-control-group label="{{selectContentTypeLabel}}" ng-if="dialogMode == 'selectDocType'">
11+
<ul class="umb-actions umb-actions-child">
12+
<li data-element="action-create-{{docType.alias}}" ng-repeat="docType in docTypes | orderBy:'name':false">
13+
<a ng-click="selectDocType(docType.alias)">
14+
<i class="large {{docType.icon}}"></i>
15+
<span class="menu-label">
16+
{{docType.name}}
17+
<small>
18+
{{docType.description}}
19+
</small>
20+
</span>
21+
</a>
22+
</li>
23+
</ul>
24+
</umb-control-group>
25+
<div ng-if="dialogMode == 'edit'">
26+
<ng-form val-form-manager>
27+
<umb-tabbed-content ng-if="!vm.loading"
28+
content="vm.content">
29+
</umb-tabbed-content>
30+
</ng-form>
31+
</div>
32+
</umb-editor-container>
33+
<umb-editor-footer>
34+
<umb-editor-footer-content-right>
35+
<umb-button type="button"
36+
button-style="link"
37+
label-key="general_close"
38+
action="vm.close()">
39+
</umb-button>
40+
<umb-button type="button"
41+
button-style="action"
42+
label-key="general_submit"
43+
action="vm.submit(model)">
44+
</umb-button>
45+
</umb-editor-footer-content-right>
46+
</umb-editor-footer>
47+
</umb-editor-view>
48+
</div>

‎src/Our.Umbraco.DocTypeGridEditor/Web/UI/App_Plugins/DocTypeGridEditor/Views/doctypegrideditor.html

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,4 @@
1212
prevent-default>
1313
</div>
1414
</div>
15-
<umb-overlay ng-if="overlay.show"
16-
model="overlay"
17-
view="overlay.view"
18-
position="right">
19-
</umb-overlay>
2015
</div>

0 commit comments

Comments
 (0)