From 04fcd8c01e34c41dfb30facef152d462b752497d Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Wed, 11 Aug 2021 00:53:30 +0200 Subject: [PATCH] Add infinite editor for file picker and static file picker --- .../src/common/services/editor.service.js | 45 ++++++++++++ ...t.blockconfiguration.overlay.controller.js | 69 ++++++++----------- 2 files changed, 72 insertions(+), 42 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js index b0a2465f42..c68e005d7b 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js @@ -905,6 +905,50 @@ When building a custom infinite editor view you can use the same components as a open(editor); } + /** + * @ngdoc method + * @name umbraco.services.editorService#filePicker + * @methodOf umbraco.services.editorService + * + * @description + * Opens a file picker in infinite editing, the submit callback returns an array of selected items. + * + * @param {object} editor rendering options. + * @param {function} editor.submit Callback function when the submit button is clicked. Returns the editor model object. + * @param {function} editor.close Callback function when the close button is clicked. + * @returns {object} editor object. + */ + function filePicker(editor) { + editor.view = "views/common/infiniteeditors/treepicker/treepicker.html"; + if (!editor.size) editor.size = "small"; + editor.section = "settings"; + editor.treeAlias = "files"; + editor.entityType = "file"; + open(editor); + } + + /** + * @ngdoc method + * @name umbraco.services.editorService#staticFilePicker + * @methodOf umbraco.services.editorService + * + * @description + * Opens a static file picker in infinite editing, the submit callback returns an array of selected items. + * + * @param {object} editor rendering options. + * @param {function} editor.submit Callback function when the submit button is clicked. Returns the editor model object. + * @param {function} editor.close Callback function when the close button is clicked. + * @returns {object} editor object. + */ + function staticFilePicker(editor) { + editor.view = "views/common/infiniteeditors/treepicker/treepicker.html"; + if (!editor.size) editor.size = "small"; + editor.section = "settings"; + editor.treeAlias = "staticFiles"; + editor.entityType = "file"; + open(editor); + } + /** * @ngdoc method * @name umbraco.services.editorService#itemPicker @@ -1069,6 +1113,7 @@ When building a custom infinite editor view you can use the same components as a move: move, embed: embed, rollback: rollback, + filePicker: filePicker, linkPicker: linkPicker, mediaPicker: mediaPicker, iconPicker: iconPicker, diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js index c655ad3606..cb9b31909c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js @@ -76,33 +76,28 @@ vm.addSettingsForBlock = function($event, block) { - localizationService.localize("blockEditor_headlineAddSettingsElementType").then(function(localizedTitle) { + localizationService.localize("blockEditor_headlineAddSettingsElementType").then(localizedTitle => { const settingsTypePicker = { title: localizedTitle, - section: "settings", - treeAlias: "documentTypes", entityType: "documentType", - isDialog: true, - filter: function (node) { + filter: node => { if (node.metaData.isElement === true) { return false; } return true; }, filterCssClass: "not-allowed", - select: function (node) { + select: node => { vm.applySettingsToBlock(block, udiService.getKey(node.udi)); editorService.close(); }, - close: function () { - editorService.close(); - }, + close: () => editorService.close(), extraActions: [ { style: "primary", labelKey: "blockEditor_labelcreateNewElementType", - action: function () { + action: () => { vm.createElementTypeAndCallback((key) => { vm.applySettingsToBlock(block, key); @@ -113,7 +108,8 @@ } ] }; - editorService.treePicker(settingsTypePicker); + + editorService.contentTypePicker(settingsTypePicker); }); }; @@ -170,24 +166,19 @@ const filePicker = { title: localizedTitle, - section: "settings", - treeAlias: "files", - entityType: "file", - isDialog: true, - filter: function (i) { + filter: i => { return !(i.name.indexOf(".html") !== -1); }, filterCssClass: "not-allowed", - select: function (node) { + select: node => { const filepath = decodeURIComponent(node.id.replace(/\+/g, " ")); block.view = "~/" + filepath; editorService.close(); }, - close: function () { - editorService.close(); - } + close: () => editorService.close() }; - editorService.treePicker(filePicker); + + editorService.filePicker(filePicker); }); }; @@ -217,24 +208,20 @@ const filePicker = { title: localizedTitle, - section: "settings", - treeAlias: "files", - entityType: "file", isDialog: true, - filter: function (i) { + filter: i => { return !(i.name.indexOf(".css") !== -1); }, filterCssClass: "not-allowed", - select: function (node) { + select: node => { const filepath = decodeURIComponent(node.id.replace(/\+/g, " ")); block.stylesheet = "~/" + filepath; editorService.close(); }, - close: function () { - editorService.close(); - } + close: () => editorService.close() }; - editorService.treePicker(filePicker); + + editorService.filePicker(filePicker); }); }; @@ -261,28 +248,26 @@ vm.addThumbnailForBlock = function(block) { - localizationService.localize("blockEditor_headlineAddThumbnail").then(function (localizedTitle) { + localizationService.localize("blockEditor_headlineAddThumbnail").then(function (localizedTitle) { + + let allowedFileExtensions = ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif']; const thumbnailPicker = { title: localizedTitle, - section: "settings", - treeAlias: "staticFiles", - entityType: "file", - isDialog: true, - filter: function (i) { - return !(i.name.indexOf(".jpg") !== -1 || i.name.indexOf(".jpeg") !== -1 || i.name.indexOf(".png") !== -1 || i.name.indexOf(".svg") !== -1 || i.name.indexOf(".webp") !== -1 || i.name.indexOf(".gif") !== -1); + filter: i => { + let ext = i.name.substr((i.name.lastIndexOf('.') + 1)); + return allowedFileExtensions.includes(ext) === false; }, filterCssClass: "not-allowed", - select: function (file) { + select: file => { const id = decodeURIComponent(file.id.replace(/\+/g, " ")); block.thumbnail = "~/" + id.replace("wwwroot/", ""); editorService.close(); }, - close: function () { - editorService.close(); - } + close: () => editorService.close() }; - editorService.treePicker(thumbnailPicker); + + editorService.staticFilePicker(thumbnailPicker); }); };