paste feature for block-picker

This commit is contained in:
Niels Lyngsø
2020-04-15 14:38:25 +02:00
parent d81dcc1537
commit 061be643c8
6 changed files with 103 additions and 27 deletions
@@ -4,6 +4,35 @@ angular.module("umbraco")
function ($scope) {
var vm = this;
vm.navigation = [
{
"alias": "empty",
"name": "Create empty",
"icon": "icon-add",
"active": true,
"view": ""
},
{
"alias": "clipboard",
"name": "Clipboard",
"icon": "icon-paste-in",
"view": ""
}
];
vm.activeTab = vm.navigation[0];
vm.onNavigationChanged = function(tab) {
vm.activeTab.active = false;
vm.activeTab = tab;
vm.activeTab.active = true;
}
vm.clickClearClipboard = function() {
vm.onNavigationChanged(vm.navigation[0]);
vm.model.clipboardItems = [];// This dialog is not connected via the clipboardService events, so we need to update manually.
vm.model.clickClearClipboard();
}
vm.model = $scope.model;
vm.selectItem = function(item) {
@@ -4,6 +4,8 @@
<umb-editor-header
name="vm.model.title"
navigation="vm.navigation"
on-select-navigation-item="vm.onNavigationChanged(item)"
name-locked="true"
hide-alias="true"
hide-icon="true"
@@ -11,14 +13,49 @@
</umb-editor-header>
<div class="umb-editor-container umb-panel-body umb-scrollable row-fluid">
<div class="umb-pane">
<div class="umb-pane" ng-if="vm.activeTab.alias === 'empty'">
<div class="form-search" ng-hide="vm.model.filter === false" style="margin-bottom: 20px;">
<i class="icon-search"></i>
<input type="text"
ng-model="searchTerm"
class="umb-search-field search-query input-block-level -full-width-input"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
</div>
<div class="umb-block-card-grid">
<umb-block-card
ng-repeat="block in vm.model.availableItems | filter:searchTerm"
block-config-model="block.blockConfigModel"
element-type-model="block.elementTypeModel"
ng-click="vm.selectItem(block)">
</umb-block-card>
</div>
</div>
<div class="umb-pane" ng-if="vm.activeTab.alias === 'clipboard'">
<div style="margin-bottom:20px; text-align: right;">
<umb-button
type="button"
icon="icon-trash"
button-style="link"
label-key="clipboard_labelForClearClipboard"
action="vm.clickClearClipboard()">
</umb-button>
</div>
<div class="umb-block-card-grid">
<umb-block-card
block-config-model="block.blockConfigModel"
element-type-model="block.elementTypeModel"
ng-repeat="block in vm.model.availableItems"
ng-click="vm.selectItem(block)">
ng-repeat="block in vm.model.clipboardItems"
ng-click="vm.model.clickPasteItem(block)">
</umb-block-card>
</div>
</div>
@@ -241,20 +241,19 @@
clickPasteItem: function(item) {
if (item.type === "elementTypeArray") {
var indexIncrementor = 0;
item.data.forEach(function (entry) {
item.pasteData.forEach(function (entry) {
if (requestPasteFromClipboard(createIndex + indexIncrementor, entry)) {
indexIncrementor++;
}
});
} else {
requestPasteFromClipboard(createIndex, item.data);
requestPasteFromClipboard(createIndex, item.pasteData);
}
blockPickerModel.close();
},
submit: function(blockPickerModel) {
var added = false;
if (blockPickerModel && blockPickerModel.selectedItem) {
console.log(blockPickerModel.selectedItem)
added = addNewBlock(createIndex, blockPickerModel.selectedItem.blockConfigModel.contentTypeAlias);
}
blockPickerModel.close();
@@ -267,36 +266,44 @@
}
};
blockPickerModel.pasteItems = [];
blockPickerModel.clickClearClipboard = function ($event) {
clipboardService.clearEntriesOfType("elementType", vm.availableContentTypes);
clipboardService.clearEntriesOfType("elementTypeArray", vm.availableContentTypes);
};
blockPickerModel.clipboardItems = [];
var singleEntriesForPaste = clipboardService.retriveEntriesOfType("elementType", vm.availableContentTypes);
singleEntriesForPaste.forEach(function (entry) {
blockPickerModel.pasteItems.push({
type: "elementType",
name: entry.label,
data: entry.data,
icon: entry.icon
});
console.log("paste Entry: ", entry)
blockPickerModel.clipboardItems.push(
{
type: "elementType",
pasteData: entry.data,
blockConfigModel: modelObject.getScaffoldFor(entry.alias),
elementTypeModel: {
name: entry.label,
icon: entry.icon
}
}
);
});
var arrayEntriesForPaste = clipboardService.retriveEntriesOfType("elementTypeArray", vm.availableContentTypes);
arrayEntriesForPaste.forEach(function (entry) {
blockPickerModel.pasteItems.push({
type: "elementTypeArray",
name: entry.label,
data: entry.data,
icon: entry.icon
});
blockPickerModel.clipboardItems.push(
{
type: "elementTypeArray",
pasteData: entry.data,
blockConfigModel: {}, // no block configuration for paste items of elementTypeArray.
elementTypeModel: {
name: entry.label,
icon: entry.icon
}
}
);
});
blockPickerModel.clickClearPaste = function ($event) {
$event.stopPropagation();
$event.preventDefault();
clipboardService.clearEntriesOfType("elementType", vm.availableContentTypes);
clipboardService.clearEntriesOfType("elementTypeArray", vm.availableContentTypes);
vm.blockTypePicker.pasteItems = [];// This dialog is not connected via the clipboardService events, so we need to update manually.
};
// open block picker overlay
editorService.open(blockPickerModel);
@@ -1791,6 +1791,7 @@ Mange hilsner fra Umbraco robotten
<key alias="labelForCopyAllEntries">Kopier %0%</key>
<key alias="labelForArrayOfItemsFrom">%0% fra %1%</key>
<key alias="labelForRemoveAllEntries">Fjern alle elementer</key>
<key alias="labelForClearClipboard">Ryd udklipsholder</key>
</area>
<area alias="propertyActions">
<key alias="tooltipForPropertyActionsMenu">Åben egenskabshandlinger</key>
@@ -2279,6 +2279,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="labelForCopyAllEntries">Copy %0%</key>
<key alias="labelForArrayOfItemsFrom">%0% from %1%</key>
<key alias="labelForRemoveAllEntries">Remove all items</key>
<key alias="labelForClearClipboard">Clear clipboard</key>
</area>
<area alias="propertyActions">
<key alias="tooltipForPropertyActionsMenu">Open Property Actions</key>
@@ -2290,6 +2290,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="labelForCopyAllEntries">Copy %0%</key>
<key alias="labelForArrayOfItemsFrom">%0% from %1%</key>
<key alias="labelForRemoveAllEntries">Remove all items</key>
<key alias="labelForClearClipboard">Clear clipboard</key>
</area>
<area alias="propertyActions">
<key alias="tooltipForPropertyActionsMenu">Open Property Actions</key>