{{ vm.package.name }}
- -
-
-
-
-
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html
index a0f56ee883..56c7a9cf48 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html
@@ -1,17 +1,12 @@
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less b/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less
index 3d06c8b16f..c0b6cd9e79 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less
+++ b/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less
@@ -3,9 +3,7 @@ umb-media-card {
position: relative;
display: inline-block;
width: 100%;
- //background-color: white;
border-radius: @baseBorderRadius;
- //box-shadow: 0 1px 2px rgba(0,0,0,.2);
overflow: hidden;
transition: box-shadow 120ms;
cursor: pointer;
@@ -194,3 +192,32 @@ umb-media-card {
}
}
}
+
+
+.umb-media-card {
+ .__upload-progress-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ backdrop-filter: blur(2px);
+ background-color: rgba(255,255,255,.7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .__upload-progress {
+ width: 66%;
+ margin-top: 13px;
+ }
+
+ .__upload-progress-label {
+ font-size: 13px;
+ margin-top: 3px;
+ }
+ }
+}
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/overview.controller.js b/src/Umbraco.Web.UI.Client/src/views/packages/overview.controller.js
index f5fd3bfd9c..d0de742205 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/overview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/overview.controller.js
@@ -1,99 +1,99 @@
(function () {
- "use strict";
+ "use strict";
- function PackagesOverviewController($scope, $location, $routeParams, localizationService, localStorageService) {
+ function PackagesOverviewController($location, $routeParams, localizationService, localStorageService) {
- //Hack!
- // if there is a local storage value for packageInstallData then we need to redirect there,
- // the issue is that we still have webforms and we cannot go to a hash location and then window.reload
- // because it will double load it.
- // we will refresh and then navigate there.
+ //Hack!
+ // if there is a local storage value for packageInstallData then we need to redirect there,
+ // the issue is that we still have webforms and we cannot go to a hash location and then window.reload
+ // because it will double load it.
+ // we will refresh and then navigate there.
- let packageInstallData = localStorageService.get("packageInstallData");
- let packageUri = $routeParams.method;
+ let packageInstallData = localStorageService.get("packageInstallData");
+ let packageUri = $routeParams.method;
- if (packageInstallData) {
- localStorageService.remove("packageInstallData");
+ if (packageInstallData) {
+ localStorageService.remove("packageInstallData");
- if (packageInstallData.postInstallationPath) {
- //navigate to the custom installer screen if set
- $location.path(packageInstallData.postInstallationPath).search("packageId", packageInstallData.id);
- return;
- }
+ if (packageInstallData.postInstallationPath) {
+ //navigate to the custom installer screen if set
+ $location.path(packageInstallData.postInstallationPath).search("packageId", packageInstallData.id);
+ return;
+ }
- //if it is "installed" then set the uri/path to that
- if (packageInstallData === "installed") {
- packageUri = "installed";
- }
- }
-
- var vm = this;
- vm.page = {};
- vm.page.labels = {};
- vm.page.name = "";
- vm.page.navigation = [];
-
- onInit();
-
- function onInit() {
-
- loadNavigation();
-
- setPageName();
- }
-
- function loadNavigation() {
-
- var labels = ["sections_packages", "packager_installed", "packager_installLocal", "packager_created"];
-
- localizationService.localizeMany(labels).then(function (data) {
- vm.page.labels.packages = data[0];
- vm.page.labels.installed = data[1];
- vm.page.labels.install = data[2];
- vm.page.labels.created = data[3];
-
- vm.page.navigation = [
- {
- "name": vm.page.labels.packages,
- "icon": "icon-cloud",
- "view": "views/packages/views/repo.html",
- "active": !packageUri || packageUri === "repo",
- "alias": "umbPackages",
- "action": function () {
- $location.path("/packages/packages/repo");
- }
- },
- {
- "name": vm.page.labels.installed,
- "icon": "icon-box",
- "view": "views/packages/views/installed.html",
- "active": packageUri === "installed",
- "alias": "umbInstalled",
- "action": function () {
- $location.path("/packages/packages/installed");
- }
- },
- {
- "name": vm.page.labels.created,
- "icon": "icon-files",
- "view": "views/packages/views/created.html",
- "active": packageUri === "created",
- "alias": "umbCreatedPackages",
- "action": function () {
- $location.path("/packages/packages/created");
- }
- }
- ];
- });
- }
-
- function setPageName() {
- localizationService.localize("sections_packages").then(function (data) {
- vm.page.name = data;
- })
- }
+ //if it is "installed" then set the uri/path to that
+ if (packageInstallData === "installed") {
+ packageUri = "installed";
+ }
}
- angular.module("umbraco").controller("Umbraco.Editors.Packages.OverviewController", PackagesOverviewController);
+ var vm = this;
+ vm.page = {};
+ vm.page.labels = {};
+ vm.page.name = "";
+ vm.page.navigation = [];
+
+ onInit();
+
+ function onInit() {
+
+ loadNavigation();
+
+ setPageName();
+ }
+
+ function loadNavigation() {
+
+ var labels = ["sections_marketplace", "packager_installed", "packager_installLocal", "packager_created"];
+
+ localizationService.localizeMany(labels).then(function (data) {
+ vm.page.labels.marketplace = data[0];
+ vm.page.labels.installed = data[1];
+ vm.page.labels.install = data[2];
+ vm.page.labels.created = data[3];
+
+ vm.page.navigation = [
+ {
+ "name": vm.page.labels.marketplace,
+ "icon": "icon-cloud",
+ "view": "views/packages/views/marketplace.html",
+ "active": !packageUri || packageUri === "repo",
+ "alias": "umbMarketplace",
+ "action": function () {
+ $location.path("/packages/packages/repo");
+ }
+ },
+ {
+ "name": vm.page.labels.installed,
+ "icon": "icon-box",
+ "view": "views/packages/views/installed.html",
+ "active": packageUri === "installed",
+ "alias": "umbInstalled",
+ "action": function () {
+ $location.path("/packages/packages/installed");
+ }
+ },
+ {
+ "name": vm.page.labels.created,
+ "icon": "icon-files",
+ "view": "views/packages/views/created.html",
+ "active": packageUri === "created",
+ "alias": "umbCreatedPackages",
+ "action": function () {
+ $location.path("/packages/packages/created");
+ }
+ }
+ ];
+ });
+ }
+
+ function setPageName() {
+ localizationService.localize("sections_marketplace").then(function (data) {
+ vm.page.name = data;
+ })
+ }
+ }
+
+ angular.module("umbraco").controller("Umbraco.Editors.Packages.OverviewController", PackagesOverviewController);
})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/marketplace.controller.js b/src/Umbraco.Web.UI.Client/src/views/packages/views/marketplace.controller.js
new file mode 100644
index 0000000000..f2a4deb2c1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/views/marketplace.controller.js
@@ -0,0 +1,18 @@
+(function () {
+ "use strict";
+
+ function MarketplaceController($sce) {
+
+ var vm = this;
+ var marketplaceUrl = new URL(Umbraco.Sys.ServerVariables.umbracoUrls.marketplaceUrl);
+
+ function init() {
+ vm.marketplaceUrl = $sce.trustAsResourceUrl(marketplaceUrl.toString());
+ }
+
+ init();
+ }
+
+ angular.module("umbraco").controller("Umbraco.Editors.Packages.MarketplaceController", MarketplaceController);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/marketplace.html b/src/Umbraco.Web.UI.Client/src/views/packages/views/marketplace.html
new file mode 100644
index 0000000000..95a28061b4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/views/marketplace.html
@@ -0,0 +1,13 @@
+
-
-
-
+
-
-
-
+
+
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.controller.js b/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.controller.js
deleted file mode 100644
index 0c7a2bd91c..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.controller.js
+++ /dev/null
@@ -1,265 +0,0 @@
-(function () {
- "use strict";
-
- function PackagesRepoController($scope, $timeout, ourPackageRepositoryResource, $q, localizationService, notificationsService) {
-
- var vm = this;
-
- vm.packageViewState = "packageList";
- vm.categories = [];
- vm.loading = true;
- vm.pagination = {
- pageNumber: 1,
- totalPages: 10,
- pageSize: 24
- };
- vm.searchQuery = "";
- vm.selectCategory = selectCategory;
- vm.showPackageDetails = showPackageDetails;
- vm.setPackageViewState = setPackageViewState;
- vm.nextPage = nextPage;
- vm.prevPage = prevPage;
- vm.goToPage = goToPage;
- vm.openLightbox = openLightbox;
- vm.closeLightbox = closeLightbox;
- vm.search = search;
- vm.installCompleted = false;
- vm.highlightedPackageCollections = [];
- vm.labels = {};
-
- var defaultSort = "Latest";
- var currSort = defaultSort;
-
- //used to cancel any request in progress if another one needs to take it's place
- var canceler = null;
-
- function getActiveCategory() {
- if (vm.searchQuery !== "") {
- return "";
- }
- for (var i = 0; i < vm.categories.length; i++) {
- if (vm.categories[i].active === true) {
- return vm.categories[i].name;
- }
- }
- return "";
- }
-
- function init() {
-
- vm.loading = true;
- localizationService.localizeMany(["packager_packagesPopular", "packager_packagesPromoted"])
- .then(function (labels) {
- vm.labels.popularPackages = labels[0];
- vm.labels.promotedPackages = labels[1];
-
- var popularPackages, promotedPackages;
- $q.all([
- ourPackageRepositoryResource.getCategories()
- .then(function (cats) {
- vm.categories = cats.filter(function (cat) {
- return cat.name !== "Umbraco Pro";
- });
- }),
- ourPackageRepositoryResource.getPopular(10)
- .then(function (pack) {
- popularPackages = { title: vm.labels.popularPackages, packages: pack.packages };
- }),
- ourPackageRepositoryResource.getPromoted(20)
- .then(function (pack) {
- promotedPackages = { title: vm.labels.promotedPackages, packages: pack.packages };
- }),
- ourPackageRepositoryResource.search(vm.pagination.pageNumber - 1, vm.pagination.pageSize, currSort)
- .then(function (pack) {
- vm.packages = pack.packages;
- vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
- })
- ])
- .then(function () {
- vm.highlightedPackageCollections = [popularPackages, promotedPackages];
- vm.loading = false;
- });
- });
- }
-
- function selectCategory(selectedCategory, categories) {
-
- for (var i = 0; i < categories.length; i++) {
- var category = categories[i];
- if (category.name === selectedCategory.name) {
- //it's already selected, let's unselect to show all again
- if (category.active === true) {
- category.active = false;
- }
- else {
- category.active = true;
- }
- }
- else {
- category.active = false;
- }
- }
-
- vm.loading = true;
- vm.searchQuery = "";
-
- var reset = selectedCategory.active === false;
- var searchCategory = reset ? "" : selectedCategory.name;
-
- currSort = defaultSort;
-
- var popularPackages, promotedPackages;
- $q.all([
- ourPackageRepositoryResource.getPopular(10, searchCategory)
- .then(function (pack) {
- popularPackages = { title: vm.labels.popularPackages, packages: pack.packages };
- }),
- ourPackageRepositoryResource.getPromoted(20, searchCategory)
- .then(function (pack) {
- promotedPackages = { title: vm.labels.promotedPackages, packages: pack.packages };
- }),
- ourPackageRepositoryResource.search(vm.pagination.pageNumber - 1, vm.pagination.pageSize, currSort, searchCategory, vm.searchQuery)
- .then(function (pack) {
- vm.packages = pack.packages;
- vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
- vm.pagination.pageNumber = 1;
- })
- ])
- .then(function () {
- vm.highlightedPackageCollections = [popularPackages, promotedPackages];
- vm.loading = false;
- });
- }
-
- function showPackageDetails(selectedPackage) {
- ourPackageRepositoryResource.getDetails(selectedPackage.id)
- .then(function (pack) {
- vm.package = pack;
- vm.packageViewState = "packageDetails";
- });
- }
-
- function setPackageViewState(state) {
- if (state) {
- vm.packageViewState = state;
- }
- }
-
- function nextPage(pageNumber) {
- ourPackageRepositoryResource.search(pageNumber - 1, vm.pagination.pageSize, currSort, getActiveCategory(), vm.searchQuery)
- .then(function (pack) {
- vm.packages = pack.packages;
- vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
- });
- }
-
- function prevPage(pageNumber) {
- ourPackageRepositoryResource.search(pageNumber - 1, vm.pagination.pageSize, currSort, getActiveCategory(), vm.searchQuery)
- .then(function (pack) {
- vm.packages = pack.packages;
- vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
- });
- }
-
- function goToPage(pageNumber) {
- ourPackageRepositoryResource.search(pageNumber - 1, vm.pagination.pageSize, currSort, getActiveCategory(), vm.searchQuery)
- .then(function (pack) {
- vm.packages = pack.packages;
- vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
- });
- }
- var previousElement = null;
-
- function openLightbox(itemIndex, items) {
-
- previousElement = ( document.activeElement || document.body );
-
- vm.lightbox = {
- show: true,
- items: items,
- activeIndex: itemIndex,
- focus: true
- };
- }
-
- function closeLightbox() {
- vm.lightbox.show = false;
- vm.lightbox = null;
-
- if(previousElement){
- setTimeout(function(){
- previousElement.focus();
- previousElement = null;
- }, 100)
- }
- document.activeElement.blur();
- }
-
-
- var searchDebounced = _.debounce(function (e) {
- //a canceler exists, so perform the cancelation operation and reset
- if (canceler) {
- canceler.resolve();
- }
-
- canceler = $q.defer();
-
- $scope.$apply(function () {
- currSort = vm.searchQuery ? "Default" : "Latest";
-
- ourPackageRepositoryResource.search(vm.pagination.pageNumber - 1,
- vm.pagination.pageSize,
- currSort,
- "",
- vm.searchQuery,
- canceler.promise)
- .then(function (pack) {
- vm.packages = pack.packages;
- vm.pagination.totalPages = Math.ceil(pack.total / vm.pagination.pageSize);
- vm.pagination.pageNumber = 1;
- vm.loading = false;
- //set back to null so it can be re-created
- canceler = null;
- })
- .catch(function (err) {
- canceler = null;
-
- if (err) {
- // If an abort happened, ignore it since it happened because of a new search
- if (err.xhrStatus === 'abort') {
- return;
- }
-
- // Otherwise, show the error
- if (err.errorMsg) {
- notificationsService.error(err.errorMsg);
- return;
- }
- }
-
- console.error(err);
- });
-
- });
-
- }, 200);
-
- function search(searchQuery) {
- vm.loading = true;
- searchDebounced();
- }
-
- vm.reloadPage = function () {
- //reload on next digest (after cookie)
- $timeout(function () {
- window.location.reload(true);
- });
- }
-
- init();
-
- }
-
- angular.module("umbraco").controller("Umbraco.Editors.Packages.RepoController", PackagesRepoController);
-
-})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
deleted file mode 100644
index 3ed1216d52..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
+++ /dev/null
@@ -1,318 +0,0 @@
-
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.controller.js
index c3f0314389..b7a38e562e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.controller.js
@@ -27,15 +27,17 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.ColorPickerControl
if (!isValidHex(oldValue.value || oldValue))
continue;
+ var hexCode;
+
if (oldValue.hasOwnProperty("value")) {
- var hexCode = toFullHex(oldValue.value);
+ hexCode = toFullHex(oldValue.value);
items.push({
value: hexCode.substr(1, hexCode.length),
label: oldValue.label,
id: i
});
} else {
- var hexCode = toFullHex(oldValue);
+ hexCode = toFullHex(oldValue);
items.push({
value: hexCode.substr(1, hexCode.length),
label: oldValue,
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridentryeditors/gridinlineblock/gridinlineblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridentryeditors/gridinlineblock/gridinlineblock.editor.html
index 3a67a1be88..71c4da4178 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridentryeditors/gridinlineblock/gridinlineblock.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridentryeditors/gridinlineblock/gridinlineblock.editor.html
@@ -71,7 +71,11 @@
min-height: 48px;
height: auto;
}
-
+
+ .blockelement-gridinlineblock-editor > slot {
+ --umb-block-grid--inline-editor--pointer-events--condition: var(--umb-block-grid--dragging-mode) none;
+ pointer-events: var(--umb-block-grid--inline-editor--pointer-events--condition, auto);
+ }
@@ -100,6 +104,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{highlightedPackageCollection.title}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- New Releases
- Results for '{{ vm.searchQuery }}'
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- We couldn't find anything for '{{ vm.searchQuery }}'
- Sorry, we can not find what you are looking for.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js
index ceb0a99a11..f24520dda6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js
@@ -43,7 +43,6 @@
var unsubscribe = [];
const vm = this;
-
vm.openBlock = null;
vm.showSampleDataCTA = false;
@@ -57,7 +56,6 @@
if (blockGroupModel.value == null) {
blockGroupModel.value = [];
}
-
vm.blockGroups = blockGroupModel.value;
if (!$scope.model.value) {
@@ -89,14 +87,13 @@
}
}
}
-
unsubscribe.push(eventsService.on("editors.documentType.saved", updateUsedElementTypes));
function removeReferencesToElementTypeKey(contentElementTypeKey) {
// Clean up references to this one:
$scope.model.value.forEach(blockType => {
blockType.areas.forEach(area => {
- area.specifiedAllowance = area.specifiedAllowance?.filter(allowance =>
+ area.specifiedAllowance = area.specifiedAllowance?.filter(allowance =>
allowance.elementTypeKey !== contentElementTypeKey
) || [];
});
@@ -107,7 +104,7 @@
// Clean up references to this one:
$scope.model.value.forEach(blockType => {
blockType.areas.forEach(area => {
- area.specifiedAllowance = area.specifiedAllowance?.filter(allowance =>
+ area.specifiedAllowance = area.specifiedAllowance?.filter(allowance =>
allowance.groupKey !== groupKey
) || [];
});
@@ -156,7 +153,7 @@
};
vm.blockSortableOptions = {
- ...defaultOptions,
+ ...defaultOptions,
"ui-floating": true,
connectWith: ".umb-block-card-grid",
items: "umb-block-card",
@@ -242,7 +239,6 @@
infiniteMode: true,
noTemplate: true,
isElement: true,
- noTemplate: true,
submit: function(model) {
loadElementTypes().then(function() {
callback(model.documentTypeKey);
@@ -284,11 +280,11 @@
title: data,
openAreas: openAreas,
view: "views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html",
- size: "large",
+ size: "medium",
submit: function(overlayModel) {
loadElementTypes()// lets load elementType again, to ensure we are up to date.
TransferProperties(overlayModel.block, block);// transfer properties back to block object. (Doing this cause we dont know if block object is added to model jet, therefor we cant use index or replace the object.)
-
+
overlayModel.close();
},
close: function() {
@@ -338,7 +334,7 @@
return false;
} else {
- return true;
+ return true;
}
}
);
@@ -360,7 +356,6 @@
});
}
}
-
dataTypeResource.getAll().then(function(dataTypes) {
if (dataTypes.filter(x => x.alias === "Umbraco.BlockGrid").length === 0) {
vm.showSampleDataCTA = true;
@@ -383,7 +378,7 @@
};
vm.blockGroups.push(sampleGroup);
}
-
+
function initSampleBlock(udi, groupKey, options) {
const key = udiService.getKey(udi);
if ($scope.model.value.find(X => X.contentElementTypeKey === key) === undefined) {
@@ -391,7 +386,7 @@
$scope.model.value.push(blockType);
}
}
-
+
initSampleBlock(data.umbBlockGridDemoHeadlineBlock, sampleGroup.key, {"label": "Headline ({{headline | truncate:true:36}})", "view": "~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoHeadlineBlock.html"});
initSampleBlock(data.umbBlockGridDemoImageBlock, sampleGroup.key, {"label": "Image", "view": "~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoImageBlock.html"});
initSampleBlock(data.umbBlockGridDemoRichTextBlock, sampleGroup.key, { "label": "Rich Text ({{richText | ncRichText | truncate:true:36}})", "view": "~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoRichTextBlock.html"});
@@ -416,10 +411,10 @@
}
];
initSampleBlock(data.umbBlockGridDemoTwoColumnLayoutBlock, sampleGroup.key, {"label": "Two Column Layout", "view": "~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoTwoColumnLayoutBlock.html", "allowInAreas": false, "areas": twoColumnLayoutAreas});
-
+
vm.showSampleDataCTA = false;
});
-
+
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.controller.js
index 0bb9f6e703..11a0972309 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.controller.js
@@ -93,7 +93,7 @@
var elementTypeId = elementType.id;
const editor = {
id: elementTypeId,
- submit: function (model) {
+ submit: function () {
editorService.close();
},
close: function () {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html
index 4d398844ed..85668c0786 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html
@@ -15,9 +15,9 @@
-
+
-
+
General
@@ -80,124 +80,9 @@
-
-
-
-
-
-
-
-
-
-
- Size options
-
- Define one or more size options, this enables resizing of the Block
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Define the different number of layout columns this block is allowed to span across.
-
-
-
-
-
-
-
-
-
-
- Define the range of layout rows this block is allowed to span across.
-
-
-
-
-
-
-
-
-
-
- Catalogue appearance
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
Permissions
@@ -244,11 +129,61 @@
+
+
+
+
+
+
+
+
+
+
+ Size options
+
+ Define one or more size options, this enables resizing of the Block
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Define the different number of layout columns this block is allowed to span across.
+
+
+
+
+
+
+
+
+
+
+ Define the range of layout rows this block is allowed to span across.
+
+
+
+
+
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.less
index 57507f8044..5861cfdda5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.less
@@ -1,28 +1,5 @@
.umb-block-grid-block-configuration-overlay {
- .umb-block-grid-block-configuration-layout {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
-
- grid-gap: 0 20px;
- grid-auto-flow: row;
- grid-auto-rows: minmax(50px, auto);
-
-
- }
-
-
- .umb-block-grid-block-configuration__umb-group-panel {
- @media (max-width: 1024px) {
- grid-column: span 2;
- }
- &.--span-two-cols {
- grid-column: span 2;
- }
- &.--span-two-rows {
- grid-row: span 2;
- }
- }
.umb-node-preview {
flex-grow: 1;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.html
index 64a7909b7a..7ee2ee6344 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.html
@@ -2,33 +2,40 @@
modelEntry.key === el.dataset.areaKey,
+ querySelectModelToElement: (container, modelEntry) => container.querySelector(`[data-area-key='${modelEntry.key}']`),
+ itemHasNestedContainersResolver: () => false,// We never have nested in this case.
+ containerSelector: ".umb-block-grid-area-editor__grid-wrapper",
+ itemSelector: ".umb-block-grid-area-editor__area",
+ placeholderClass: "umb-block-grid-area-editor__area-placeholder",
+ onSync: onSortSync
}
- const gridContainerEl = $element[0].querySelector('.umb-block-grid-area-editor__grid-wrapper');
+ function onSortSync() {
+ $scope.$evalAsync();
+ setDirty();
+ }
- const sortable = Sortable.create(gridContainerEl, {
- sort: true, // sorting inside list
- animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
- easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
- cancel: '',
- draggable: ".umb-block-grid-area-editor__area", // Specifies which items inside the element should be draggable
- ghostClass: "umb-block-grid-area-editor__area-placeholder",
- onAdd: function (evt) {
- _sync(evt);
- $scope.$evalAsync();
- },
- onUpdate: function (evt) {
- _sync(evt);
- $scope.$evalAsync();
+ function resolveVerticalDirection(data) {
+
+ /** We need some data about the grid to figure out if there is room to be placed next to the found element */
+ const approvedContainerComputedStyles = getComputedStyle(data.containerElement);
+ const gridColumnGap = Number(approvedContainerComputedStyles.columnGap.split("px")[0]) || 0;
+ const gridColumnNumber = vm.rootLayoutColumns;
+
+ const foundElColumns = parseInt(data.relatedElement.dataset.colSpan, 10);
+ const currentElementColumns = data.item.columnSpan;
+
+ if(currentElementColumns >= gridColumnNumber) {
+ return true;
}
- });
-
- // TODO: setDirty if sort has happend.
+
+ // Get grid template:
+ const approvedContainerGridColumns = approvedContainerComputedStyles.gridTemplateColumns.trim().split("px").map(x => Number(x)).filter(n => n > 0).map((n, i, list) => list.length === i ? n : n + gridColumnGap);
+
+ // ensure all columns are there.
+ // This will also ensure handling non-css-grid mode,
+ // use container width divided by amount of columns( or the item width divided by its amount of columnSpan)
+ let amountOfColumnsInWeightMap = approvedContainerGridColumns.length;
+ const amountOfUnknownColumns = gridColumnNumber-amountOfColumnsInWeightMap;
+ if(amountOfUnknownColumns > 0) {
+ let accumulatedValue = getAccumulatedValueOfIndex(amountOfColumnsInWeightMap, approvedContainerGridColumns) || 0;
+ const layoutWidth = data.containerRect.width;
+ const missingColumnWidth = (layoutWidth-accumulatedValue)/amountOfUnknownColumns;
+ if(missingColumnWidth > 0) {
+ while(amountOfColumnsInWeightMap++ < gridColumnNumber) {
+ approvedContainerGridColumns.push(missingColumnWidth);
+ }
+ }
+ }
+
+ let offsetPlacement = 0;
+ /* If placeholder is in this same line, we want to assume that it will offset the placement of the found element,
+ which provides more potential space for the item to drop at.
+ This is relevant in this calculation where we look at the space to determine if its a vertical or horizontal drop in relation to the found element.
+ */
+ if(data.placeholderIsInThisRow && data.elementRect.left < data.relatedRect.left) {
+ offsetPlacement = -(data.elementRect.width + gridColumnGap);
+ }
+
+ const relatedStartX = Math.max(data.relatedRect.left - data.containerRect.left + offsetPlacement, 0);
+ const relatedStartCol = Math.round(getInterpolatedIndexOfPositionInWeightMap(relatedStartX, approvedContainerGridColumns));
+
+ // If the found related element does not have enough room after which for the current element, then we go vertical mode:
+ return (relatedStartCol + (data.horizontalPlaceAfter ? foundElColumns : 0) + currentElementColumns > gridColumnNumber);
+
+ }
+
}
@@ -93,7 +164,6 @@
}
vm.requestDeleteArea = function (area) {
- // TODO: Translations
localizationService.localizeMany(["general_delete", "blockEditor_confirmDeleteBlockAreaMessage", "blockEditor_confirmDeleteBlockAreaNotice"]).then(function (data) {
overlayService.confirmDelete({
title: data[0],
@@ -145,8 +215,6 @@
vm.openArea = null;
vm.openAreaOverlay = function (area) {
-
- // TODO: use the right localization key:
localizationService.localize("blockEditor_blockConfigurationOverlayTitle").then(function (localized) {
var clonedAreaData = Utilities.copy(area);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridColumnEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridColumnEditor.component.js
index 864f479009..1dcbc5b2da 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridColumnEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridColumnEditor.component.js
@@ -25,9 +25,7 @@
}
});
- function BlockGridColumnController($scope) {
-
- //var unsubscribe = [];
+ function BlockGridColumnController() {
var vm = this;
@@ -58,12 +56,6 @@
}
}
- /*$scope.$on("$destroy", function () {
- for (const subscription of unsubscribe) {
- subscription();
- }
- });*/
-
}
})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridConfigurationAreaEntry.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridConfigurationAreaEntry.component.js
index f7c1351c47..64d5e421e2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridConfigurationAreaEntry.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridConfigurationAreaEntry.component.js
@@ -2,9 +2,7 @@
"use strict";
/**
- *
* Note for new backoffice: there is a lot of similarities between the Area configuration and the Block entry, as they both share Grid scaling features.
- * TODO: Can we already as part of this PR make it shared as a dictionary or something?
*/
@@ -100,6 +98,13 @@
function updateGridLayoutData() {
+ if(!layoutContainer) {
+ layoutContainer = $element[0].closest('.umb-block-grid-area-editor__grid-wrapper');
+ if(!layoutContainer) {
+ console.error($element[0], 'could not find area-container');
+ }
+ }
+
const computedStyles = window.getComputedStyle(layoutContainer);
gridColumns = computedStyles.gridTemplateColumns.trim().split("px").map(x => Number(x));
@@ -126,12 +131,6 @@
window.addEventListener('mouseup', vm.onMouseUp);
window.addEventListener('mouseleave', vm.onMouseUp);
-
- layoutContainer = $element[0].closest('.umb-block-grid-area-editor__grid-wrapper');
- if(!layoutContainer) {
- console.error($element[0], 'could not find area-container');
- }
-
updateGridLayoutData();
scaleBoxBackdropEl = document.createElement('div');
@@ -217,6 +216,8 @@
vm.scaleHandlerKeyUp = function($event) {
+ updateGridLayoutData();
+
let addCol = 0;
let addRow = 0;
@@ -236,7 +237,7 @@
}
// Todo: Ensure value fit with configuration.
- vm.area.columnSpan = Math.max(vm.area.columnSpan + addCol, 1);
+ vm.area.columnSpan = Math.min(Math.max(vm.area.columnSpan + addCol, 1), gridColumns.length);
vm.area.rowSpan = Math.max(vm.area.rowSpan + addRow, 1);
$event.originalEvent.stopPropagation();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entries.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entries.html
index 4aed670ffd..ef02d28318 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entries.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entries.html
@@ -2,9 +2,10 @@
{
let aDiff = Math.abs(a - target);
let bDiff = Math.abs(b - target);
-
+
if (aDiff === bDiff) {
return a < b ? a : b;
} else {
@@ -30,9 +31,12 @@
return interpolatedIndex;
}
-
- function isWithinRect(x, y, rect, modifier) {
- return (x > rect.left - modifier && x < rect.right + modifier && y > rect.top - modifier && y < rect.bottom + modifier);
+ function getAccumulatedValueOfIndex(index, weights) {
+ let i = 0, len = Math.min(index, weights.length), calc = 0;
+ while(i area.key === vm.areaKey);
}
-
+
vm.locallyAvailableBlockTypes = vm.blockEditorApi.internal.getAllowedTypesOf(vm.parentBlock, vm.areaKey);
-
+
unsubscribe.push($scope.$watch('vm.entries', onLocalAmountOfBlocksChanged, true));
};
- unsubscribe.push($scope.$watch("layoutColumns", (newVal, oldVal) => {
- vm.layoutColumnsInt = parseInt(vm.layoutColumns, 10);
- }));
-
function onLocalAmountOfBlocksChanged() {
if (vm.entriesForm && vm.areaConfig) {
-
+
var isMinRequirementGood = vm.entries.length >= vm.areaConfig.minAllowed;
vm.entriesForm.areaMinCount.$setValidity("areaMinCount", isMinRequirementGood);
@@ -126,12 +126,12 @@
'maxRequirement': maxAllowed
});
}
- } else
+ } else
// For specific elementTypes:
if(allowance.elementTypeKey) {
const amount = vm.entries.filter(entry => entry.$block.data.contentTypeKey === allowance.elementTypeKey).length;
-
+
if(amount < minAllowed || (maxAllowed > 0 && amount > maxAllowed)) {
vm.invalidBlockTypes.push({
'key': allowance.elementTypeKey,
@@ -153,254 +153,41 @@
}
}
-
- vm.notifyVisualUpdate = function () {
+ // Used by umb block grid entries component, to trigger other blocks to update.
+ vm.notifyVisualUpdate = notifyVisualUpdate;
+ function notifyVisualUpdate() {
$scope.$broadcast("blockGridEditorVisualUpdate", {areaKey: vm.areaKey});
}
- vm.acceptBlock = function(contentTypeKey) {
- return vm.blockEditorApi.internal.isElementTypeKeyAllowedAt(vm.parentBlock, vm.areaKey, contentTypeKey);
+ function removeAllContainedPropertyEditorProxies() {
+ currentContainedPropertyEditorProxies.forEach(slotName => {
+ removePropertyEditorProxies(slotName);
+ });
+ }
+ function removePropertyEditorProxies(slotName) {
+ const event = new CustomEvent("UmbBlockGrid_RemoveProperty", {composed: true, bubbles: true, detail: {'slotName': slotName}});
+ $element[0].dispatchEvent(event);
}
- vm.getLayoutEntryByIndex = function(index) {
- return vm.blockEditorApi.internal.getLayoutEntryByIndex(vm.parentBlock, vm.areaKey, index);
- }
- vm.showNotAllowed = function() {
- vm.showNotAllowedUI = true;
- $scope.$evalAsync();
- }
- vm.hideNotAllowed = function() {
- vm.showNotAllowedUI = false;
- $scope.$evalAsync();
- }
- var revertIndicateDroppableTimeout;
- vm.revertIndicateDroppable = function() {
- revertIndicateDroppableTimeout = $timeout(() => {
- vm.droppableIndication = false;
- }, 2000);
- }
- vm.indicateDroppable = function() {
- if (revertIndicateDroppableTimeout) {
- $timeout.cancel(revertIndicateDroppableTimeout);
- revertIndicateDroppableTimeout = null;
- }
- vm.droppableIndication = true;
- $scope.$evalAsync();
- }
- function initializeSortable() {
+ function resolveVerticalDirection(data) {
- const gridLayoutContainerEl = $element[0].querySelector('.umb-block-grid__layout-container');
- var _lastIndicationContainerVM = null;
+ /** We need some data about the grid to figure out if there is room to be placed next to the found element */
+ const approvedContainerComputedStyles = getComputedStyle(data.containerElement);
+ const gridColumnGap = Number(approvedContainerComputedStyles.columnGap.split("px")[0]) || 0;
+ const gridColumnNumber = parseInt(approvedContainerComputedStyles.getPropertyValue("--umb-block-grid--grid-columns"), 10);
- var targetRect = null;
- var relatedEl = null;
- var ghostEl = null;
- var ghostRect = null;
- var dragX = 0;
- var dragY = 0;
- var dragOffsetX = 0;
+ const foundElColumns = parseInt(data.relatedElement.dataset.colSpan, 10);
+ const currentElementColumns = data.item.columnSpan;
- var approvedContainerEl = null;
-
- // Setup DOM method for communication between sortables:
- gridLayoutContainerEl['Sortable:controller'] = () => {
- return vm;
- };
-
- var nextSibling;
-
- function _removePropertyProxy(eventTarget, slotName) {
- const event = new CustomEvent("UmbBlockGrid_RemoveProperty", {composed: true, bubbles: true, detail: {'slotName': slotName}});
- eventTarget.dispatchEvent(event);
+ if(currentElementColumns >= gridColumnNumber) {
+ return true;
}
- // Borrowed concept from, its not identical as more has been implemented: https://github.com/SortableJS/angular-legacy-sortablejs/blob/master/angular-legacy-sortable.js
- function _sync(evt) {
-
- const oldIndex = evt.oldIndex,
- newIndex = evt.newIndex;
-
- // If not the same gridLayoutContainerEl, then test for transfer option:
- if (gridLayoutContainerEl !== evt.from) {
- const fromCtrl = evt.from['Sortable:controller']();
- const prevEntries = fromCtrl.entries;
- const syncEntry = prevEntries[oldIndex];
-
- // Make sure Property Editor Proxies are destroyed, as we need to establish new when moving context:
-
-
- // unregister all property editor proxies via events:
- fromCtrl.containedPropertyEditorProxies.forEach(slotName => {
- _removePropertyProxy(evt.from, slotName);
- });
-
- // Perform the transfer:
- if (Sortable.active && Sortable.active.lastPullMode === 'clone') {
- syncEntry = Utilities.copy(syncEntry);
- prevEntries.splice(Sortable.utils.index(evt.clone, sortable.options.draggable), 0, prevEntries.splice(oldIndex, 1)[0]);
- }
- else {
- prevEntries.splice(oldIndex, 1);
- }
- vm.entries.splice(newIndex, 0, syncEntry);
-
- const contextColumns = vm.blockEditorApi.internal.getContextColumns(vm.parentBlock, vm.areaKey);
-
- // if colSpan is lower than contextColumns, and we do have some columnSpanOptions:
- if (syncEntry.columnSpan < contextColumns && syncEntry.$block.config.columnSpanOptions.length > 0) {
- // then check if the colSpan is a columnSpanOption, if NOT then reset to contextColumns.
- const found = syncEntry.$block.config.columnSpanOptions.find(option => option.columnSpan === syncEntry.columnSpan);
- if(!found) {
- syncEntry.columnSpan = contextColumns;
- }
- } else {
- syncEntry.columnSpan = contextColumns;
- }
-
- }
- else {
- vm.entries.splice(newIndex, 0, vm.entries.splice(oldIndex, 1)[0]);
- }
- }
-
- function _indication(contextVM, movingEl) {
-
- // Remove old indication:
- if(_lastIndicationContainerVM !== contextVM && _lastIndicationContainerVM !== null) {
- _lastIndicationContainerVM.hideNotAllowed();
- _lastIndicationContainerVM.revertIndicateDroppable();
- }
- _lastIndicationContainerVM = contextVM;
-
- if(contextVM.acceptBlock(movingEl.dataset.contentElementTypeKey) === true) {
- _lastIndicationContainerVM.hideNotAllowed();
- _lastIndicationContainerVM.indicateDroppable();// This block is accepted so we will indicate a good drop.
- return true;
- }
-
- contextVM.showNotAllowed();// This block is not accepted to we will indicate that its not allowed.
-
- return false;
- }
-
- function _moveGhostElement() {
-
- rqaId = null;
- if(!ghostEl) {
- return;
- }
- if(!approvedContainerEl) {
- console.error("Cancel cause had no approvedContainerEl", approvedContainerEl)
- return;
- }
-
- ghostRect = ghostEl.getBoundingClientRect();
-
- const insideGhost = isWithinRect(dragX, dragY, ghostRect);
- if (insideGhost) {
- return;
- }
-
- var approvedContainerRect = approvedContainerEl.getBoundingClientRect();
-
- const approvedContainerHasItems = approvedContainerEl.querySelector('.umb-block-grid__layout-item:not(.umb-block-grid__layout-item-placeholder)');
- if(!approvedContainerHasItems && isWithinRect(dragX, dragY, approvedContainerRect, 20) || approvedContainerHasItems && isWithinRect(dragX, dragY, approvedContainerRect, -10)) {
- // we are good...
- } else {
- var parentContainer = approvedContainerEl.parentNode.closest('.umb-block-grid__layout-container');
- if(parentContainer) {
-
- if(parentContainer['Sortable:controller']().sortGroupIdentifier === vm.sortGroupIdentifier) {
- approvedContainerEl = parentContainer;
- approvedContainerRect = approvedContainerEl.getBoundingClientRect();
- }
- }
- }
-
- // gather elements on the same row.
- let elementInSameRow = [];
- const containerElements = Array.from(approvedContainerEl.children);
- for (const el of containerElements) {
- const elRect = el.getBoundingClientRect();
- // gather elements on the same row.
- if(dragY >= elRect.top && dragY <= elRect.bottom && el !== ghostEl) {
- elementInSameRow.push({el: el, rect:elRect});
- }
- }
-
- let lastDistance = 99999;
- let foundRelatedEl = null;
- let placeAfter = false;
- elementInSameRow.forEach( sameRow => {
- const centerX = (sameRow.rect.left + (sameRow.rect.width*.5));
- let distance = Math.abs(dragX - centerX);
- if(distance < lastDistance) {
- foundRelatedEl = sameRow.el;
- lastDistance = Math.abs(distance);
- placeAfter = dragX > centerX;
- }
- });
-
- if (foundRelatedEl === ghostEl) {
- return;
- }
-
- if (foundRelatedEl) {
-
-
- let newIndex = containerElements.indexOf(foundRelatedEl);
-
- const foundRelatedElRect = foundRelatedEl.getBoundingClientRect();
-
- // Ghost is already on same line and we are not hovering the related element?
- const ghostCenterY = ghostRect.top + (ghostRect.height*.5);
- const isInsideFoundRelated = isWithinRect(dragX, dragY, foundRelatedElRect, 0);
-
-
- if (isInsideFoundRelated && foundRelatedEl.classList.contains('--has-areas')) {
- // If mouse is on top of an area, then make that the new approvedContainer?
- const blockView = foundRelatedEl.querySelector('.umb-block-grid__block--view');
- const subLayouts = blockView.querySelectorAll('.umb-block-grid__layout-container');
- for (const subLayout of subLayouts) {
- const subLayoutRect = subLayout.getBoundingClientRect();
- const hasItems = subLayout.querySelector('.umb-block-grid__layout-item:not(.umb-block-grid__layout-item-placeholder)');
- // gather elements on the same row.
- if(!hasItems && isWithinRect(dragX, dragY, subLayoutRect, 20) || hasItems && isWithinRect(dragX, dragY, subLayoutRect, -10)) {
-
- var subVm = subLayout['Sortable:controller']();
- if(subVm.sortGroupIdentifier === vm.sortGroupIdentifier) {
- approvedContainerEl = subLayout;
- _moveGhostElement();
- return;
- }
- }
- }
- }
-
- if (ghostCenterY > foundRelatedElRect.top && ghostCenterY < foundRelatedElRect.bottom && !isInsideFoundRelated) {
- return;
- }
-
- const containerVM = approvedContainerEl['Sortable:controller']();
- if(_indication(containerVM, ghostEl) === false) {
- return;
- }
-
- let verticalDirection = false;
-
- // TODO: move calculations out so they can be persisted a bit longer?
- //const approvedContainerRect = approvedContainerEl.getBoundingClientRect();
- const approvedContainerComputedStyles = getComputedStyle(approvedContainerEl);
- const gridColumnNumber = parseInt(approvedContainerComputedStyles.getPropertyValue("--umb-block-grid--grid-columns"), 10);
-
- const relatedColumns = parseInt(foundRelatedEl.dataset.colSpan, 10);
- const ghostColumns = parseInt(ghostEl.dataset.colSpan, 10);
-
// Get grid template:
- const approvedContainerGridColumns = approvedContainerComputedStyles.gridTemplateColumns.trim().split("px").map(x => Number(x)).filter(n => n > 0);
+ const approvedContainerGridColumns = approvedContainerComputedStyles.gridTemplateColumns.trim().split("px").map(x => Number(x)).filter(n => n > 0).map((n, i, list) => list.length === i ? n : n + gridColumnGap);
// ensure all columns are there.
// This will also ensure handling non-css-grid mode,
@@ -409,184 +196,127 @@
const amountOfUnknownColumns = gridColumnNumber-amountOfColumnsInWeightMap;
if(amountOfUnknownColumns > 0) {
let accumulatedValue = getAccumulatedValueOfIndex(amountOfColumnsInWeightMap, approvedContainerGridColumns) || 0;
- const layoutWidth = approvedContainerRect.width;
- const missingColumnWidth = (layoutWidth-accumulatedValue)/amountOfUnknownColumns;
+ const layoutWidth = data.containerRect.width;
+ const missingColumnWidth = (layoutWidth-accumulatedValue)/amountOfUnknownColumns;if(missingColumnWidth > 0) {
while(amountOfColumnsInWeightMap++ < gridColumnNumber) {
approvedContainerGridColumns.push(missingColumnWidth);
}
- }
+ }}
+ let offsetPlacement = 0;
+ /* If placeholder is in this same line, we want to assume that it will offset the placement of the found element,
+ which provides more potential space for the item to drop at.
+ This is relevant in this calculation where we look at the space to determine if its a vertical or horizontal drop in relation to the found element.
+ */
+ if(data.placeholderIsInThisRow && data.elementRect.left < data.relatedRect.left) {
+ offsetPlacement = -(data.elementRect.width + gridColumnGap);
+ }
- const relatedStartX = foundRelatedElRect.left - approvedContainerRect.left;
+ const relatedStartX = Math.max(data.relatedRect.left - data.containerRect.left + offsetPlacement, 0);
const relatedStartCol = Math.round(getInterpolatedIndexOfPositionInWeightMap(relatedStartX, approvedContainerGridColumns));
- if(relatedStartCol + relatedColumns + ghostColumns > gridColumnNumber) {
- verticalDirection = true;
- }
-
- if (verticalDirection) {
- placeAfter = (dragY > foundRelatedElRect.top + (foundRelatedElRect.height*.5));
- }
-
+ // If the found related element does not have enough room after which for the current element, then we go vertical mode:
+ return (relatedStartCol + (data.horizontalPlaceAfter ? foundElColumns : 0) + currentElementColumns > gridColumnNumber);
+ }
- const nextEl = containerElements[(placeAfter ? newIndex+1 : newIndex)];
- if (nextEl) {
- approvedContainerEl.insertBefore(ghostEl, nextEl);
- } else {
- approvedContainerEl.appendChild(ghostEl);
- }
- return;
- }
- // If above or below container, we will go first or last.
- const containerVM = approvedContainerEl['Sortable:controller']();
- if(_indication(containerVM, ghostEl) === false) {
- return;
- }
- if(dragY < approvedContainerRect.top) {
- const firstEl = containerElements[0];
- if (firstEl) {
- approvedContainerEl.insertBefore(ghostEl, firstEl);
- } else {
- approvedContainerEl.appendChild(ghostEl);
- }
- } else if(dragY > approvedContainerRect.bottom) {
- approvedContainerEl.appendChild(ghostEl);
- }
+
+ function initializeSorter() {
+ vm.sorterOptions = {
+ ownerVM: vm,
+ resolveVerticalDirection: resolveVerticalDirection,
+ dataTransferResolver: (dataTransfer, item) => {dataTransfer.setData("text/plain", item.$block.label)}, // (Optional) Append OS data to the moved item.
+ compareElementToModel: (el, modelEntry) => modelEntry.contentUdi === el.dataset.elementUdi,
+ querySelectModelToElement: (container, modelEntry) => container.querySelector(`[data-element-udi='${modelEntry.contentUdi}']`),
+ itemHasNestedContainersResolver: (foundEl) => foundEl.classList.contains('--has-areas'), // (Optional) improve performance for recognizing if an items has inner containers.
+ identifier: "BlockGridEditor_"+vm.blockEditorApi.internal.uniqueEditorKey,
+ boundarySelector: ".umb-block-grid__area", // (Optional) Used for extended boundary between containers.
+ containerSelector: ".umb-block-grid__layout-container", // Used for connecting with others
+ itemSelector: ".umb-block-grid__layout-item",
+ draggableSelector: ".umb-block-grid__block--view",
+ placeholderClass: "umb-block-grid__layout-item-placeholder",
+ ghostClass: "umb-block-grid__layout-item-ghost",
+ onStart: onSortStart,
+ onEnd: onSortEnd,
+ onContainerChange: onSortContainerChange,
+ onSync: onSortSync,
+ onDisallowed: onSortDisallowed,
+ onAllowed: onSortAllowed,
+ onRequestDrop: onSortRequestDrop
}
+ }
- var rqaId = null
- function _onDragMove(evt) {
+ var currentItemColumnSpanTarget;
+ function onSortStart(data) {
+ currentItemColumnSpanTarget = data.item.columnSpan;
- const clientX = (evt.touches ? evt.touches[0] : evt).clientX;
- const clientY = (evt.touches ? evt.touches[1] : evt).clientY;
- if(vm.movingLayoutEntry && targetRect && ghostRect && clientX !== 0 && clientY !== 0) {
+ // Gather containedPropertyEditorProxies from this element.
+ currentContainedPropertyEditorProxies = Array.from(data.element.querySelectorAll('slot[data-is-property-editor-proxy]')).map(x => x.getAttribute('name'));
+ vm.blockEditorApi.internal.startDraggingMode();
+ }
- if(dragX === clientX && dragY === clientY) {
- return;
- }
- dragX = clientX;
- dragY = clientY;
-
- ghostRect = ghostEl.getBoundingClientRect();
+ function onSortEnd() {
+ vm.blockEditorApi.internal.exitDraggingMode();
+ currentContainedPropertyEditorProxies = [];
+ notifyVisualUpdate();
+ $scope.$evalAsync();
+ }
- const insideGhost = isWithinRect(dragX, dragY, ghostRect, 0);
-
- if (!insideGhost) {
- if(rqaId === null) {
- rqaId = requestAnimationFrame(_moveGhostElement);
- }
+ function getColumnSpanForContext(currentColumnSpan, columnSpanOptions, contextColumns) {
+ if (columnSpanOptions.length > 0) {
+ const availableOptions = columnSpanOptions.filter(option => option.columnSpan <= contextColumns);
+ if(availableOptions.length > 0) {
+ const closestColumnSpan = availableOptions.map(x => x.columnSpan).reduce(
+ (prev, curr) => {
+ return Math.abs(curr - currentColumnSpan) < Math.abs(prev - currentColumnSpan) ? curr : prev
+ }, 99999
+ );
+ if(closestColumnSpan) {
+ return closestColumnSpan;
}
}
}
+ return contextColumns;
+ }
- vm.sortGroupIdentifier = "BlockGridEditor_"+vm.blockEditorApi.internal.uniqueEditorKey;
+ function onSortContainerChange(data) {
+ const contextColumns = vm.blockEditorApi.internal.getContextColumns(data.ownerVM.parentBlock, data.ownerVM.areaKey);
+ data.item.columnSpan = getColumnSpanForContext(currentItemColumnSpanTarget, data.item.$block.config.columnSpanOptions, contextColumns);
+ }
- const sortable = Sortable.create(gridLayoutContainerEl, {
- group: vm.sortGroupIdentifier,
- sort: true,
- animation: 0,
- cancel: '',
- draggable: ".umb-block-grid__layout-item",
- ghostClass: "umb-block-grid__layout-item-placeholder",
- swapThreshold: .4,
- dragoverBubble: true,
- emptyInsertThreshold: 40,
+ function onSortSync(data) {
+ if (data.fromController !== data.toController) {
+ removeAllContainedPropertyEditorProxies();
+ }
+ $scope.$evalAsync();
+ vm.blockEditorApi.internal.setDirty();
+ }
- scrollSensitivity: 50,
- scrollSpeed: 16,
- scroll: true,
- forceAutoScrollFallback: true,
+ function onSortDisallowed() {
+ vm.showNotAllowedUI = true;
+ $scope.$evalAsync();
+ }
+ function onSortAllowed() {
+ vm.showNotAllowedUI = false;
+ $scope.$evalAsync();
+ }
+ function onSortRequestDrop(data) {
+ return vm.blockEditorApi.internal.isElementTypeKeyAllowedAt(vm.parentBlock, vm.areaKey, data.item.$block.config.contentElementTypeKey);
+ }
- onStart: function (evt) {
-
- // TODO: This does not work correctly jet with SortableJS. With the replacement we should be able to call this before DOM is changed.
- vm.blockEditorApi.internal.startDraggingMode();
- nextSibling = evt.from === evt.item.parentNode ? evt.item.nextSibling : evt.clone.nextSibling;
- var contextVM = vm;
- if (gridLayoutContainerEl !== evt.to) {
- contextVM = evt.to['Sortable:controller']();
- }
- approvedContainerEl = evt.to;
-
- const oldIndex = evt.oldIndex;
- vm.movingLayoutEntry = contextVM.getLayoutEntryByIndex(oldIndex);
- ghostEl = evt.item;
- vm.containedPropertyEditorProxies = Array.from(ghostEl.querySelectorAll('slot[data-is-property-editor-proxy]')).map(x => x.getAttribute('name'));
- targetRect = evt.to.getBoundingClientRect();
- ghostRect = ghostEl.getBoundingClientRect();
- const clientX = (evt.originalEvent.touches ? evt.originalEvent.touches[0] : evt.originalEvent).clientX;
- dragOffsetX = clientX - ghostRect.left;
- window.addEventListener('drag', _onDragMove);
- window.addEventListener('dragover', _onDragMove);
-
- $scope.$evalAsync();
- },
- // Called by any change to the list (add / update / remove)
- onMove: function (evt) {
- relatedEl = evt.related;
- targetRect = evt.to.getBoundingClientRect();
- ghostRect = evt.draggedRect;
-
- // Disable SortableJS from handling the drop, instead we will use our own.
- return false;
- },
- // When an change actually was made, after drop has occurred:
- onSort: function (evt) {
- vm.blockEditorApi.internal.setDirty();
- },
-
- onAdd: function (evt) {
- _sync(evt);
- $scope.$evalAsync();
- },
- onUpdate: function (evt) {
- _sync(evt);
- $scope.$evalAsync();
- },
- onEnd: function(evt) {
- if(rqaId !== null) {
- cancelAnimationFrame(rqaId);
- }
- window.removeEventListener('drag', _onDragMove);
- window.removeEventListener('dragover', _onDragMove);
- vm.blockEditorApi.internal.exitDraggingMode();
-
- // ensure not-allowed indication is removed.
- if(_lastIndicationContainerVM) {
- _lastIndicationContainerVM.hideNotAllowed();
- _lastIndicationContainerVM.revertIndicateDroppable();
- _lastIndicationContainerVM = null;
- }
-
- approvedContainerEl = null;
- vm.movingLayoutEntry = null;
- targetRect = null;
- ghostRect = null;
- ghostEl = null;
- relatedEl = null;
- vm.containedPropertyEditorProxies = [];
-
- vm.notifyVisualUpdate();
- }
- });
-
- $scope.$on('$destroy', function () {
- sortable.destroy();
- for (const subscription of unsubscribe) {
- subscription();
- }
- });
-
- };
+ $scope.$on('$destroy', function () {
+ for (const subscription of unsubscribe) {
+ subscription();
+ }
+ });
}
})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
index abc1ec5016..28c4aa6847 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridentry.component.js
@@ -159,7 +159,7 @@
$scope.$evalAsync();
}
- unsubscribe.push($scope.$watch("depth", (newVal, oldVal) => {
+ unsubscribe.push($scope.$watch("depth", () => {
vm.childDepth = parseInt(vm.depth) + 1;
}));
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridsortable.directive.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridsortable.directive.js
new file mode 100644
index 0000000000..cfcab3b9be
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbblockgridsortable.directive.js
@@ -0,0 +1,717 @@
+(function () {
+ 'use strict';
+
+ function isWithinRect(x, y, rect, modifier) {
+ return (x > rect.left - modifier && x < rect.right + modifier && y > rect.top - modifier && y < rect.bottom + modifier);
+ }
+
+
+ function getParentScrollElement(el, includeSelf) {
+ // skip to window
+ if (!el || !el.getBoundingClientRect) return null;
+ var elem = el;
+ var gotSelf = false;
+
+ while(elem) {
+
+ // we don't need to get elem css if it isn't even overflowing in the first place (performance)
+ if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) {
+ var elemCSS = getComputedStyle(elem);
+
+ if (
+ elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')
+ ||
+ elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll')
+ ) {
+ if (!elem.getBoundingClientRect || elem === document.body) return null;
+ if (gotSelf || includeSelf) return elem;
+ gotSelf = true;
+ }
+ }
+
+ if(elem.parentNode === document) {
+ return null;
+ } else if(elem.parentNode instanceof DocumentFragment) {
+ elem = elem.parentNode.host;
+ } else {
+ elem = elem.parentNode;
+ }
+ }
+
+ return null;
+ }
+
+
+
+
+ const DefaultConfig = {
+ compareElementToModel: (el, modelEntry) => modelEntry.contentUdi === el.dataset.elementUdi,
+ querySelectModelToElement: (container, modelEntry) => container.querySelector(`[data-element-udi='${modelEntry.contentUdi}']`),
+ identifier: "UmbBlockGridSorter",
+ containerSelector: "ol", // To find container and to connect with others.
+ ignorerSelector: "a, img, iframe",
+ itemSelector: "li",
+ placeholderClass: "umb-drag-placeholder"
+ }
+
+
+
+ function UmbBlockGridSorter() {
+
+ function link(scope, element) {
+
+
+ let observer = new MutationObserver(function(mutations) {
+ mutations.forEach(function(mutation) {
+ mutation.addedNodes.forEach(function(addedNode) {
+ if (addedNode.matches && addedNode.matches(scope.config.itemSelector)) {
+ setupItem(addedNode);
+ }
+ });
+ mutation.removedNodes.forEach(function(removedNode) {
+ if (removedNode.matches && removedNode.matches(scope.config.itemSelector)) {
+ destroyItem(removedNode);
+ }
+ });
+ });
+ });
+
+
+ let vm = {};
+
+ const config = {...DefaultConfig, ...scope.config};
+
+ vm.identifier = config.identifier;
+ vm.ownerVM = config.ownerVM || null;
+
+ let scrollElement = null;
+
+ let containerEl = config.containerSelector ? element[0].closest(config.containerSelector) : element[0];
+ if (!containerEl) {
+ console.error("Could not initialize umb block grid sorter.", element[0])
+ return;
+ }
+
+
+
+ function init() {
+
+ containerEl['umbBlockGridSorter:vm'] = () => {
+ return vm;
+ };
+ containerEl.addEventListener('dragover', preventDragOver);
+
+ observer.observe(containerEl, {childList: true, subtree: false});
+ }
+ init();
+
+ function preventDragOver(e) {
+ e.preventDefault()
+ }
+
+ function setupItem(element) {
+
+ setupIgnorerElements(element);
+
+ element.draggable = true;
+ element.addEventListener('dragstart', handleDragStart);
+ }
+
+ function destroyItem(element) {
+
+ destroyIgnorerElements(element);
+
+ element.removeEventListener('dragstart', handleDragStart);
+ }
+
+ function setupIgnorerElements(element) {
+ config.ignorerSelector.split(',').forEach(function (criteria) {
+ element.querySelectorAll(criteria.trim()).forEach(setupPreventEvent);
+ });
+ }
+ function destroyIgnorerElements(element) {
+ config.ignorerSelector.split(',').forEach(function (criteria) {
+ element.querySelectorAll(criteria.trim()).forEach(destroyPreventEvent);
+ });
+ }
+ function setupPreventEvent(element) {
+ element.draggable = false
+ }
+ function destroyPreventEvent(element) {
+ element.removeAttribute('draggable');
+ }
+
+
+
+
+
+ let currentContainerElement = containerEl;
+ let currentContainerVM = vm;
+
+ let rqaId = null;
+ let currentItem = null;
+ let currentElement = null;
+ let currentDragElement = null;
+ let currentDragRect = null;
+ let dragX = 0;
+ let dragY = 0;
+
+ function handleDragStart(event) {
+
+ if(currentElement) {
+ handleDragEnd();
+ }
+
+ event.stopPropagation();
+ event.dataTransfer.effectAllowed = "move";// copyMove when we enhance the drag with clipboard data.
+ event.dataTransfer.dropEffect = "none";// visual feedback when dropped.
+
+ if(!scrollElement) {
+ scrollElement = getParentScrollElement(containerEl, true);
+ }
+
+ const element = event.target.closest(config.itemSelector);
+
+ currentElement = element;
+ currentDragElement = config.draggableSelector ? currentElement.querySelector(config.draggableSelector) : currentElement;
+ currentDragRect = currentDragElement.getBoundingClientRect();
+ currentItem = vm.getItemOfElement(currentElement);
+ if(!currentItem) {
+ console.error("Could not find item related to this element.");
+ return;
+ }
+
+ currentElement.style.transform = 'translateZ(0)';// Solves problem with FireFox and ShadowDom in the drag-image.
+
+ if (config.dataTransferResolver) {
+ config.dataTransferResolver(event.dataTransfer, currentItem);
+ }
+
+ if (config.onStart) {
+ config.onStart({item: currentItem, element: currentElement});
+ }
+
+ window.addEventListener('dragover', handleDragMove);
+ window.addEventListener('dragend', handleDragEnd);
+
+ // We must wait one frame before changing the look of the block.
+ rqaId = requestAnimationFrame(() => {// It should be okay to use the same refId, as the move does not or is okay not to happen on first frame/drag-move.
+ rqaId = null;
+ currentElement.style.transform = '';
+ currentElement.classList.add(config.placeholderClass);
+ });
+
+ }
+
+ function handleDragEnd() {
+
+ if(!currentElement) {
+ return;
+ }
+
+ window.removeEventListener('dragover', handleDragMove);
+ window.removeEventListener('dragend', handleDragEnd);
+ currentElement.style.transform = '';
+ currentElement.classList.remove(config.placeholderClass);
+
+ stopAutoScroll();
+ removeAllowIndication();
+
+ if(currentContainerVM.sync(currentElement, vm) === false) {
+ // Sync could not succeed, might be because item is not allowed here.
+
+ currentContainerVM = vm;
+ if (config.onContainerChange) {
+ config.onContainerChange({item: currentItem, element: currentElement, ownerVM: currentContainerVM.ownerVM});
+ }
+
+ // Lets move the Element back to where it came from:
+ const movingItemIndex = scope.model.indexOf(currentItem);
+ if(movingItemIndex < scope.model.length-1) {
+ const afterItem = scope.model[movingItemIndex+1];
+ const afterEl = config.querySelectModelToElement(containerEl, afterItem);
+ containerEl.insertBefore(currentElement, afterEl);
+ } else {
+ containerEl.appendChild(currentElement);
+ }
+
+ }
+
+ if (config.onEnd) {
+ config.onEnd({item: currentItem, element: currentElement});
+ }
+
+ if(rqaId) {
+ cancelAnimationFrame(rqaId);
+ }
+
+ currentContainerElement = containerEl;
+ currentContainerVM = vm;
+
+ rqaId = null
+ currentItem = null;
+ currentElement = null;
+ currentDragElement = null;
+ currentDragRect = null;
+ dragX = 0;
+ dragY = 0;
+
+ }
+
+ function handleDragMove(event) {
+
+ if(!currentElement) {
+ return;
+ }
+
+ const clientX = (event.touches ? event.touches[0] : event).clientX;
+ const clientY = (event.touches ? event.touches[1] : event).clientY;
+ if(clientX !== 0 && clientY !== 0) {
+
+
+ if(dragX === clientX && dragY === clientY) {
+ return;
+ }
+ dragX = clientX;
+ dragY = clientY;
+
+ handleAutoScroll(dragX, dragY);
+
+ currentDragRect = currentDragElement.getBoundingClientRect();
+ const insideCurrentRect = isWithinRect(dragX, dragY, currentDragRect, 0);
+ if (!insideCurrentRect) {
+ if(rqaId === null) {
+ rqaId = requestAnimationFrame(moveCurrentElement);
+ }
+ }
+ }
+ }
+
+
+
+ function moveCurrentElement() {
+
+ rqaId = null;
+ if(!currentElement) {
+ return;
+ }
+
+ const currentElementRect = currentElement.getBoundingClientRect();
+ const insideCurrentRect = isWithinRect(dragX, dragY, currentElementRect);
+ if (insideCurrentRect) {
+ return;
+ }
+
+ // If we have a boundarySelector, try it, if we didn't get anything fall back to currentContainerElement.
+ var currentBoundaryElement = (config.boundarySelector ? currentContainerElement.closest(config.boundarySelector) : currentContainerElement) || currentContainerElement;
+
+ var currentBoundaryRect = currentBoundaryElement.getBoundingClientRect();
+
+ const currentContainerHasItems = currentContainerVM.hasOtherItemsThan(currentItem);
+
+ // if empty we will be move likely to accept an item (add 20px to the bounding box)
+ // If we have items we must be 10 within the container to accept the move.
+ const offsetEdge = currentContainerHasItems ? -10 : 20;
+ if(!isWithinRect(dragX, dragY, currentBoundaryRect, offsetEdge)) {
+ // we are outside the current container boundary, so lets see if there is a parent we can move.
+ var parentContainer = currentContainerElement.parentNode.closest(config.containerSelector);
+ if(parentContainer) {
+ const parentContainerVM = parentContainer['umbBlockGridSorter:vm']();
+ if(parentContainerVM.identifier === vm.identifier) {
+ currentContainerElement = parentContainer;
+ currentContainerVM = parentContainerVM;
+ if (config.onContainerChange) {
+ config.onContainerChange({item: currentItem, element: currentElement, ownerVM: currentContainerVM.ownerVM});
+ }
+ }
+ }
+ }
+
+
+
+
+ // We want to retrieve the children of the container, every time to ensure we got the right order and index
+ const orderedContainerElements = Array.from(currentContainerElement.children);
+
+ var currentContainerRect = currentContainerElement.getBoundingClientRect();
+
+
+ // gather elements on the same row.
+ let elementsInSameRow = [];
+ let placeholderIsInThisRow = false;
+ for (const el of orderedContainerElements) {
+ const elRect = el.getBoundingClientRect();
+ // gather elements on the same row.
+ if(dragY >= elRect.top && dragY <= elRect.bottom) {
+
+ const dragElement = config.draggableSelector ? el.querySelector(config.draggableSelector) : el;
+ const dragElementRect = dragElement.getBoundingClientRect();
+ if(el !== currentElement) {
+ elementsInSameRow.push({el:el, dragRect:dragElementRect});
+ } else {
+ placeholderIsInThisRow = true;
+ }
+ }
+ }
+
+ let lastDistance = 99999;
+ let foundEl = null;
+ let foundElDragRect = null;
+ let placeAfter = false;
+ elementsInSameRow.forEach( sameRow => {
+ const centerX = (sameRow.dragRect.left + (sameRow.dragRect.width*.5));
+ let distance = Math.abs(dragX - centerX);
+ if(distance < lastDistance) {
+ foundEl = sameRow.el;
+ foundElDragRect = sameRow.dragRect;
+ lastDistance = Math.abs(distance);
+ placeAfter = dragX > centerX;
+ }
+ });
+
+ // If we are on top or closest to our self, we should not do anything.
+ if (foundEl === currentElement) {
+ return;
+ }
+
+ if (foundEl) {
+
+ const isInsideFound = isWithinRect(dragX, dragY, foundElDragRect, 0);
+
+ // If we are inside the found element, lets look for sub containers.
+ // use the itemHasNestedContainersResolver, if not configured fallback to looking for the existence of a container via DOM.
+ if (isInsideFound &&
+ config.itemHasNestedContainersResolver ? config.itemHasNestedContainersResolver(foundEl) : foundEl.querySelector(config.containerSelector)) {
+
+ // Find all sub containers:
+ const subLayouts = foundEl.querySelectorAll(config.containerSelector);
+ for (const subLayoutEl of subLayouts) {
+
+ // Use boundary element or fallback to container element.
+ var subBoundaryElement = (config.boundarySelector ? subLayoutEl.closest(config.boundarySelector) : subLayoutEl) || subLayoutEl;
+ var subBoundaryRect = subBoundaryElement.getBoundingClientRect();
+
+ const subContainerHasItems = subLayoutEl.querySelector(config.itemSelector+':not(.'+config.placeholderClass+')');
+ // gather elements on the same row.
+ const subOffsetEdge = subContainerHasItems ? -10 : 20;
+ if(isWithinRect(dragX, dragY, subBoundaryRect, subOffsetEdge)) {
+
+ var subVm = subLayoutEl['umbBlockGridSorter:vm']();
+ if(subVm.identifier === vm.identifier) {
+ currentContainerElement = subLayoutEl;
+ currentContainerVM = subVm;
+ if (config.onContainerChange) {
+ config.onContainerChange({item: currentItem, element: currentElement, ownerVM: currentContainerVM.ownerVM});
+ }
+ moveCurrentElement();
+ return;
+ }
+ }
+ }
+ }
+
+
+ // Indication if drop is good:
+ if(updateAllowIndication(currentContainerVM, currentItem) === false) {
+ return;
+ }
+
+ let verticalDirection = scope.config.resolveVerticalDirection ? scope.config.resolveVerticalDirection({
+ containerElement: currentContainerElement,
+ containerRect: currentContainerRect,
+ item: currentItem,
+ element: currentElement,
+ elementRect: currentElementRect,
+ relatedElement: foundEl,
+ relatedRect: foundElDragRect,
+ placeholderIsInThisRow: placeholderIsInThisRow,
+ horizontalPlaceAfter: placeAfter
+ }) : true;
+
+ if (verticalDirection) {
+ placeAfter = (dragY > foundElDragRect.top + (foundElDragRect.height*.5));
+ }
+
+ if(verticalDirection) {
+
+ let el;
+ if(placeAfter === false) {
+ let lastLeft = foundElDragRect.left;
+ elementsInSameRow.findIndex((x) => {
+ if(x.dragRect.left < lastLeft) {
+ lastLeft = x.dragRect.left;
+ el = x.el;
+ }
+ });
+ } else {
+ let lastRight = foundElDragRect.right;
+ elementsInSameRow.findIndex((x) => {
+ if(x.dragRect.right > lastRight) {
+ lastRight = x.dragRect.right;
+ el = x.el;
+ }
+ });
+ }
+ if(el) {
+ foundEl = el;
+ }
+ }
+
+ const foundElIndex = orderedContainerElements.indexOf(foundEl);
+ const placeAt = (placeAfter ? foundElIndex+1 : foundElIndex);
+
+ move(orderedContainerElements, placeAt);
+
+ return;
+ }
+ // We skipped the above part cause we are above or below container:
+
+ // Indication if drop is good:
+ if(updateAllowIndication(currentContainerVM, currentItem) === false) {
+ return;
+ }
+
+ if(dragY < currentContainerRect.top) {
+ move(orderedContainerElements, 0);
+ } else if(dragY > currentContainerRect.bottom) {
+ move(orderedContainerElements, -1);
+ }
+ }
+
+ function move(orderedContainerElements, newElIndex) {
+
+ newElIndex = newElIndex === -1 ? orderedContainerElements.length : newElIndex;
+
+ const placeBeforeElement = orderedContainerElements[newElIndex];
+ if (placeBeforeElement) {
+ // We do not need to move this, if the element to be placed before is it self.
+ if(placeBeforeElement !== currentElement) {
+ currentContainerElement.insertBefore(currentElement, placeBeforeElement);
+ }
+ } else {
+ currentContainerElement.appendChild(currentElement);
+ }
+
+ if(config.onChange) {
+ config.onChange({element: currentElement, item: currentItem, ownerVM: currentContainerVM.ownerVM});
+ }
+ }
+
+
+ /** Removes an element from container and returns its items-data entry */
+ vm.getItemOfElement = function (element) {
+ if(!element) {
+ return null;
+ }
+ return scope.model.find(entry => config.compareElementToModel(element, entry));
+ }
+ vm.removeItem = function (item) {
+ if(!item) {
+ return null;
+ }
+ const oldIndex = scope.model.indexOf(item);
+ if(oldIndex !== -1) {
+ return scope.model.splice(oldIndex, 1)[0];
+ }
+ return null;
+ }
+
+ vm.hasOtherItemsThan = function(item) {
+ return scope.model.filter(x => x !== item).length > 0;
+ }
+
+ vm.sync = function(element, fromVm) {
+
+ const movingItem = fromVm.getItemOfElement(element);
+ if(!movingItem) {
+ console.error("Could not find item of sync item")
+ return false;
+ }
+ if(vm.notifyRequestDrop({item: movingItem}) === false) {
+ return false;
+ }
+ if(fromVm.removeItem(movingItem) === null) {
+ console.error("Sync could not remove item")
+ return false;
+ }
+
+ /** Find next element, to then find the index of that element in items-data, to use as a safe reference to where the item will go in our items-data.
+ * This enables the container to contain various other elements and as well having these elements change while sorting is occurring.
+ */
+
+ // find next valid element (This assumes the next element in DOM is presented in items-data, aka. only moving one item between each sync)
+ let nextEl;
+ let loopEl = element;
+ while((loopEl = loopEl.nextElementSibling)) {
+ if(loopEl.matches && loopEl.matches(config.itemSelector)) {
+ nextEl = loopEl;
+ break;
+ }
+ }
+
+ let newIndex = scope.model.length;
+ if(nextEl) {
+ // We had a reference element, we want to get the index of it.
+ // This is problem if a item is being moved forward?
+ newIndex = scope.model.findIndex(entry => config.compareElementToModel(nextEl, entry));
+ }
+
+ scope.model.splice(newIndex, 0, movingItem);
+
+ const eventData = {item: movingItem, fromController:fromVm, toController:vm};
+ if(fromVm !== vm) {
+ fromVm.notifySync(eventData);
+ }
+ vm.notifySync(eventData);
+
+ return true;
+ }
+
+
+
+
+
+
+
+ var _lastIndicationContainerVM = null;
+ function updateAllowIndication(contextVM, item) {
+
+ // Remove old indication:
+ if(_lastIndicationContainerVM !== null && _lastIndicationContainerVM !== contextVM) {
+ _lastIndicationContainerVM.notifyAllowed();
+ }
+ _lastIndicationContainerVM = contextVM;
+
+ if(contextVM.notifyRequestDrop({item: item}) === true) {
+ contextVM.notifyAllowed();
+ return true;
+ }
+
+ contextVM.notifyDisallowed();// This block is not accepted to we will indicate that its not allowed.
+ return false;
+ }
+ function removeAllowIndication() {
+
+ // Remove old indication:
+ if(_lastIndicationContainerVM !== null) {
+ _lastIndicationContainerVM.notifyAllowed();
+ }
+ _lastIndicationContainerVM = null;
+ }
+
+
+
+
+
+ let autoScrollRAF;
+ let autoScrollEl;
+ const autoScrollSensitivity = 50;
+ const autoScrollSpeed = 16;
+ let autoScrollX = 0;
+ let autoScrollY = 0;
+
+ function handleAutoScroll(clientX, clientY) {
+
+ let scrollRect = null;
+ if (scrollElement) {
+ autoScrollEl = scrollElement;
+ scrollRect = scrollElement.getBoundingClientRect();
+ } else {
+ autoScrollEl = document.scrollingElement || document.documentElement;
+ scrollRect = {top: 0,
+ left: 0,
+ bottom: window.innerHeight,
+ right: window.innerWidth,
+ height: window.innerHeight,
+ width: window.innerWidth
+ }
+ }
+
+ const scrollWidth = autoScrollEl.scrollWidth;
+ const scrollHeight = autoScrollEl.scrollHeight;
+ const canScrollX = scrollRect.width < scrollWidth;
+ const canScrollY = scrollRect.height < scrollHeight;
+ const scrollPosX = autoScrollEl.scrollLeft;
+ const scrollPosY = autoScrollEl.scrollTop;
+
+ cancelAnimationFrame(autoScrollRAF);
+
+ if(canScrollX || canScrollY) {
+
+ autoScrollX = (Math.abs(scrollRect.right - clientX) <= autoScrollSensitivity && scrollPosX + scrollRect.width < scrollWidth) - (Math.abs(scrollRect.left - clientX) <= autoScrollSensitivity && !!scrollPosX);
+ autoScrollY = (Math.abs(scrollRect.bottom - clientY) <= autoScrollSensitivity && scrollPosY + scrollRect.height < scrollHeight) - (Math.abs(scrollRect.top - clientY) <= autoScrollSensitivity && !!scrollPosY);
+ autoScrollRAF = requestAnimationFrame(performAutoScroll);
+ }
+ }
+ function performAutoScroll() {
+ autoScrollEl.scrollLeft += autoScrollX * autoScrollSpeed;
+ autoScrollEl.scrollTop += autoScrollY * autoScrollSpeed;
+ autoScrollRAF = requestAnimationFrame(performAutoScroll);
+ }
+ function stopAutoScroll() {
+ cancelAnimationFrame(autoScrollRAF);
+ autoScrollRAF = null;
+ }
+
+
+
+
+ vm.notifySync = function(data) {
+ if(config.onSync) {
+ config.onSync(data);
+ }
+ }
+ vm.notifyDisallowed = function() {
+ if(config.onDisallowed) {
+ config.onDisallowed();
+ }
+ }
+ vm.notifyAllowed = function() {
+ if(config.onAllowed) {
+ config.onAllowed();
+ }
+ }
+ vm.notifyRequestDrop = function(data) {
+ if(config.onRequestDrop) {
+ return config.onRequestDrop(data);
+ }
+ return true;
+ }
+
+
+
+ scope.$on('$destroy', () => {
+
+ if(currentElement) {
+ handleDragEnd()
+ }
+
+ _lastIndicationContainerVM = null;
+
+ containerEl['umbBlockGridSorter:vm'] = null
+ containerEl.removeEventListener('dragover', preventDragOver);
+
+ observer.disconnect();
+ observer = null;
+ containerEl = null;
+ scrollElement = null;
+ vm = null;
+ });
+ }
+
+ var directive = {
+ restrict: 'A',
+ scope: {
+ config: '=umbBlockGridSorter',
+ model: '=umbBlockGridSorterModel'
+ },
+ link: link
+ };
+
+ return directive;
+
+ }
+
+ angular.module('umbraco.directives').directive('umbBlockGridSorter', UmbBlockGridSorter);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css
index a095fb438c..be009846f9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css
@@ -1,14 +1,15 @@
/** Example of how a grid layout stylehseet could be done with Flex box: */
-
.umb-block-grid__layout-container {
position: relative;
display: flex;
flex-wrap: wrap;
+ gap: var(--umb-block-grid--row-gap, 0) var(--umb-block-grid--column-gap, 0);
}
.umb-block-grid__layout-item {
+ position: relative;
--umb-block-grid__layout-item-calc: calc(var(--umb-block-grid--item-column-span) / var(--umb-block-grid--grid-columns));
- width: calc(var(--umb-block-grid__layout-item-calc) * 100%);
+ width: calc(var(--umb-block-grid__layout-item-calc) * 100% - (1 - var(--umb-block-grid__layout-item-calc)) * var(--umb-block-grid--column-gap, 0px));
}
@@ -17,13 +18,15 @@
display: flex;
flex-wrap: wrap;
width: 100%;
+ gap: var(--umb-block-grid--areas-row-gap, 0) var(--umb-block-grid--areas-column-gap, 0);
}
.umb-block-grid__area {
+ position: relative;
--umb-block-grid__area-calc: calc(var(--umb-block-grid--area-column-span) / var(--umb-block-grid--area-grid-columns, 1));
- width: calc(var(--umb-block-grid__area-calc) * 100%);
+ width: calc(var(--umb-block-grid__area-calc) * 100% - (1 - var(--umb-block-grid__area-calc)) * var(--umb-block-grid--areas-column-gap, 0px));
}
.umb-block-grid__actions {
clear: both;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css
index f6fe596b5c..60e0c4e96a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css
@@ -29,13 +29,13 @@
.umb-block-grid__area {
position: relative;
/* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
- grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
+ grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
grid-row: span var(--umb-block-grid--area-row-span, 1);
}
@media (min-width:1024px) {
.umb-block-grid__layout-item {
- grid-column-end: span var(--umb-block-grid--item-column-span, 1);
+ grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
}
.umb-block-grid__area {
grid-column-end: span var(--umb-block-grid--area-column-span, 1);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
index 91b1f88444..93d4398125 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
@@ -152,7 +152,6 @@
infiniteMode: true,
noTemplate: true,
isElement: true,
- noTemplate: true,
submit: function (model) {
loadElementTypes().then(() => {
callback(model.documentTypeKey);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
index ca9efe0382..2694052545 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js
@@ -506,7 +506,7 @@
}
vm.requestShowClipboard = requestShowClipboard;
- function requestShowClipboard(createIndex, mouseEvent) {
+ function requestShowClipboard(createIndex) {
showCreateDialog(createIndex, true);
}
@@ -617,10 +617,10 @@
pasteEntry.blockConfigModel = modelObject.getBlockConfiguration(scaffold.contentTypeKey);
}
}
- blockPickerModel.clipboardItems.push(pasteEntry);
+ vm.clipboardItems.push(pasteEntry);
});
- var entriesForPaste = clipboardService.retrieveEntriesOfType(clipboardService.TYPES.BLOCK, vm.availableContentTypesAliases);
+ entriesForPaste = clipboardService.retrieveEntriesOfType(clipboardService.TYPES.BLOCK, vm.availableContentTypesAliases);
entriesForPaste.forEach(function (entry) {
var pasteEntry = {
type: clipboardService.TYPES.BLOCK,
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
index 8166255a26..c04853957b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
@@ -35,7 +35,7 @@ function ColorPickerController($scope, $timeout) {
var items = [];
for (var i in $scope.model.config.items) {
var oldValue = $scope.model.config.items[i];
- if (oldValue.hasOwnProperty("value")) {
+ if (Object.prototype.hasOwnProperty.call(oldValue, "value")) {
items.push({
value: oldValue.value,
label: oldValue.label,
@@ -46,7 +46,7 @@ function ColorPickerController($scope, $timeout) {
items.push({
value: oldValue,
label: oldValue,
- sortOrder: sortOrder,
+ sortOrder: oldValue.sortOrder,
id: i
});
}
@@ -72,7 +72,7 @@ function ColorPickerController($scope, $timeout) {
var isValid = !$scope.model.validation.mandatory || (
$scope.model.value != null
&& $scope.model.value != ""
- && (!$scope.model.value.hasOwnProperty("value") || $scope.model.value.value !== "")
+ && (!Object.prototype.hasOwnProperty.call($scope.model.value, "value") || $scope.model.value.value !== "")
);
return {
isValid: isValid,
@@ -96,18 +96,19 @@ function ColorPickerController($scope, $timeout) {
}
// Complex color (value and label)?
- if (!$scope.model.value.hasOwnProperty("value"))
+ if (!Object.prototype.hasOwnProperty.call($scope.model.value, "value"))
return;
var modelColor = $scope.model.value.value;
var modelLabel = $scope.model.value.label;
// Check for a full match or partial match.
+ var item;
var foundItem = null;
// Look for a fully matching color.
for (var key in $scope.model.config.items) {
- var item = $scope.model.config.items[key];
+ item = $scope.model.config.items[key];
if (item.value == modelColor && item.label == modelLabel) {
foundItem = item;
break;
@@ -116,8 +117,8 @@ function ColorPickerController($scope, $timeout) {
// Look for a color with a matching value.
if (!foundItem) {
- for (var key in $scope.model.config.items) {
- var item = $scope.model.config.items[key];
+ for (var valueKey in $scope.model.config.items) {
+ item = $scope.model.config.items[valueKey];
if (item.value == modelColor) {
foundItem = item;
break;
@@ -127,8 +128,8 @@ function ColorPickerController($scope, $timeout) {
// Look for a color with a matching label.
if (!foundItem) {
- for (var key in $scope.model.config.items) {
- var item = $scope.model.config.items[key];
+ for (var colorKey in $scope.model.config.items) {
+ item = $scope.model.config.items[colorKey];
if (item.label == modelLabel) {
foundItem = item;
break;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
index cb5905e2c9..c81df25c76 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
@@ -31,12 +31,12 @@
showAlpha: false
};
- function hide(color) {
+ function hide() {
// show the add button
$element.find(".btn.add").show();
}
- function show(color) {
+ function show() {
// hide the add button
$element.find(".btn.add").hide();
}
@@ -62,7 +62,7 @@
var items = [];
for (var i in $scope.model.value) {
var oldValue = $scope.model.value[i];
- if (oldValue.hasOwnProperty("value")) {
+ if (Object.prototype.hasOwnProperty.call(oldValue, "value")) {
items.push({
value: oldValue.value,
label: oldValue.label,
@@ -73,7 +73,7 @@
items.push({
value: oldValue,
label: oldValue,
- sortOrder: sortOrder,
+ sortOrder: oldValue.sortOrder,
id: i
});
}
@@ -87,9 +87,9 @@
}
// ensure labels
- for (var i = 0; i < $scope.model.value.length; i++) {
- var item = $scope.model.value[i];
- item.label = item.hasOwnProperty("label") ? item.label : item.value;
+ for (var ii = 0; ii < $scope.model.value.length; ii++) {
+ var item = $scope.model.value[ii];
+ item.label = Object.prototype.hasOwnProperty.call(item, "label") ? item.label : item.value;
}
function validLabel(label) {
@@ -169,7 +169,7 @@
//handle: ".handle, .thumbnail",
items: '> div.control-group',
tolerance: 'pointer',
- update: function (e, ui) {
+ update: function () {
setDirty();
}
};
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
index de0602342c..bdbfd926f7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
@@ -186,7 +186,7 @@ function dateTimePickerController($scope, angularHelper, dateHelper, validationM
}
else {
//create a normal moment , no offset required
- var dateVal = $scope.model.value ? moment($scope.model.value, "YYYY-MM-DD HH:mm:ss") : moment();
+ dateVal = $scope.model.value ? moment($scope.model.value, "YYYY-MM-DD HH:mm:ss") : moment();
}
$scope.model.datetimePickerValue = dateVal.format($scope.model.config.format);
}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.config.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.config.js
index a2b1ca4097..0b751a532c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.config.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/config/grid.default.config.js
@@ -170,7 +170,7 @@ var uSkyGridConfig = [
}, {
grid: 3,
percentage: 25
- }, ]
+ } ]
}, {
models: [{
grid: 2,
@@ -279,7 +279,7 @@ var uSkyGridConfig = [
}, {
grid: 3,
percentage: 25
- }, ]
+ } ]
}, {
models: [{
grid: 2,
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
index c7227ad449..0add6cf0ef 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -46,7 +46,7 @@ angular.module("umbraco")
helper: "clone",
forcePlaceholderSize: true,
tolerance: "pointer",
- zIndex: 999999999999999999,
+ zIndex: '999999999999999999',
scrollSensitivity: 100,
disabled: $scope.readonly,
cursorAt: {
@@ -119,7 +119,7 @@ angular.module("umbraco")
connectWith: ".umb-cell-inner",
forcePlaceholderSize: true,
tolerance: "pointer",
- zIndex: 999999999999999999,
+ zIndex: '999999999999999999',
scrollSensitivity: 100,
disabled: $scope.readonly,
cursorAt: {
@@ -956,7 +956,7 @@ angular.module("umbraco")
});
// setup nametemplate
- value.nameExp = !!value.nameTemplate
+ value.nameExp = value.nameTemplate
? $interpolate(value.nameTemplate)
: undefined;
});
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
index ae611468b6..9745fd52b1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
@@ -130,7 +130,7 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time
$scope.options = {
useInfiniteEditor: $scope.model.config.useInfiniteEditor === true,
pageSize: $scope.model.config.pageSize ? $scope.model.config.pageSize : 10,
- pageNumber: (listParamsForCurrent && $routeParams.page && Number($routeParams.page) != NaN && Number($routeParams.page) > 0) ? $routeParams.page : 1,
+ pageNumber: (listParamsForCurrent && $routeParams.page && !isNaN($routeParams.page) && Number($routeParams.page) > 0) ? $routeParams.page : 1,
filter: (listParamsForCurrent && $routeParams.filter ? $routeParams.filter : '').trim(),
orderBy: (listParamsForCurrent && $routeParams.orderBy ? $routeParams.orderBy : $scope.model.config.orderBy ? $scope.model.config.orderBy : 'VersionDate').trim(),
orderDirection: (listParamsForCurrent && $routeParams.orderDirection ? $routeParams.orderDirection : $scope.model.config.orderDirection ? $scope.model.config.orderDirection : "desc").trim(),
@@ -154,7 +154,7 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time
};
_.each($scope.options.includeProperties, function (property) {
- property.nameExp = !!property.nameTemplate
+ property.nameExp = property.nameTemplate
? $interpolate(property.nameTemplate)
: undefined;
});
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/mediapicker3.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/mediapicker3.html
index c65172ab37..36e3e246b2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/mediapicker3.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/mediapicker3.html
@@ -1,4 +1,5 @@
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html
index 4fe0b24320..35f480aa0e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html
@@ -2,55 +2,121 @@
@@ -288,7 +223,7 @@
-
\ No newline at end of file
+
+
Advanced
@@ -384,6 +319,66 @@
+
@@ -413,4 +408,4 @@
-
+
+
+ Catalogue appearance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.less
index bf66c34661..4f5d45c67c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.less
@@ -217,6 +217,9 @@ Grid part:
display: flex;
align-items: center;
justify-content: center;
+
+ height:50px;
+ width:100%;
color: @ui-action-discreet-type;
font-weight: bold;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html
index ab63757bb5..05f55d3a07 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-column-editor-option.html
@@ -18,7 +18,7 @@
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html
index b479890d75..9909b640a1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html
@@ -4,18 +4,18 @@
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaAllowanceEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaAllowanceEditor.component.js
index 693cdcc223..9729ddd85b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaAllowanceEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaAllowanceEditor.component.js
@@ -27,7 +27,7 @@
}
});
- function BlockGridAreaAllowanceController($scope, $element, assetsService, localizationService, editorService) {
+ function BlockGridAreaAllowanceController($scope) {
var unsubscribe = [];
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaEditor.component.js
index 9126a6cc54..914e701fa6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umbBlockGridAreaEditor.component.js
@@ -1,6 +1,44 @@
(function () {
"use strict";
+
+ // Utils:
+
+ function getInterpolatedIndexOfPositionInWeightMap(target, weights) {
+ const map = [0];
+ weights.reduce((a, b, i) => { return map[i+1] = a+b; }, 0);
+ const foundValue = map.reduce((a, b) => {
+ let aDiff = Math.abs(a - target);
+ let bDiff = Math.abs(b - target);
+
+ if (aDiff === bDiff) {
+ return a < b ? a : b;
+ } else {
+ return bDiff < aDiff ? b : a;
+ }
+ })
+ const foundIndex = map.indexOf(foundValue);
+ const targetDiff = (target-foundValue);
+ let interpolatedIndex = foundIndex;
+ if (targetDiff < 0 && foundIndex === 0) {
+ // Don't adjust.
+ } else if (targetDiff > 0 && foundIndex === map.length-1) {
+ // Don't adjust.
+ } else {
+ const foundInterpolationWeight = weights[targetDiff >= 0 ? foundIndex : foundIndex-1];
+ interpolatedIndex += foundInterpolationWeight === 0 ? interpolatedIndex : (targetDiff/foundInterpolationWeight)
+ }
+ return interpolatedIndex;
+ }
+
+ function getAccumulatedValueOfIndex(index, weights) {
+ let i = 0, len = Math.min(index, weights.length), calc = 0;
+ while(i
+
- false
-
-
- appsettings.json
-
-
- appsettings-schema.json
-
-
-
false
false
-
-
-
- appsettings.json
-
-
- appsettings-schema.json
-
-
diff --git a/templates/UmbracoProject/appsettings.Development.json b/templates/UmbracoProject/appsettings.Development.json
index d789f6cd32..17b9f86361 100644
--- a/templates/UmbracoProject/appsettings.Development.json
+++ b/templates/UmbracoProject/appsettings.Development.json
@@ -1,5 +1,5 @@
{
- "$schema": "./appsettings-schema.json",
+ "$schema": "appsettings-schema.json",
"Serilog": {
"MinimumLevel": {
"Default": "Information"
diff --git a/templates/UmbracoProject/appsettings.json b/templates/UmbracoProject/appsettings.json
index 85f6c15dc7..f1e53a9e48 100644
--- a/templates/UmbracoProject/appsettings.json
+++ b/templates/UmbracoProject/appsettings.json
@@ -1,5 +1,5 @@
{
- "$schema": "./appsettings-schema.json",
+ "$schema": "appsettings-schema.json",
"Serilog": {
"MinimumLevel": {
"Default": "Information",
diff --git a/tools/Umbraco.JsonSchema/Options.cs b/tools/Umbraco.JsonSchema/Options.cs
new file mode 100644
index 0000000000..e2e8793db4
--- /dev/null
+++ b/tools/Umbraco.JsonSchema/Options.cs
@@ -0,0 +1,7 @@
+using CommandLine;
+
+internal class Options
+{
+ [Option("outputFile", Default = "appsettings-schema.Umbraco.Cms.json", HelpText = "Output file to save the generated JSON schema for Umbraco CMS.")]
+ public string OutputFile { get; set; } = null!;
+}
diff --git a/tools/Umbraco.JsonSchema/Program.cs b/tools/Umbraco.JsonSchema/Program.cs
new file mode 100644
index 0000000000..adf17c5c8c
--- /dev/null
+++ b/tools/Umbraco.JsonSchema/Program.cs
@@ -0,0 +1,14 @@
+using CommandLine;
+using Umbraco.Cms.Core.Configuration.Models;
+
+await Parser.Default.ParseArguments(args).WithParsedAsync(async options =>
+{
+ // Generate CMS schema
+ var jsonSchemaGenerator = new UmbracoJsonSchemaGenerator();
+ var jsonSchema = jsonSchemaGenerator.Generate(typeof(UmbracoCmsSchema));
+
+ // TODO: When the UmbracoPath setter is removed from GlobalSettings (scheduled for V12), remove this line as well
+ jsonSchema.Definitions[nameof(GlobalSettings)]?.Properties?.Remove(nameof(GlobalSettings.UmbracoPath));
+
+ await File.WriteAllTextAsync(options.OutputFile, jsonSchema.ToJson());
+});
diff --git a/src/JsonSchema/JsonSchema.csproj b/tools/Umbraco.JsonSchema/Umbraco.JsonSchema.csproj
similarity index 62%
rename from src/JsonSchema/JsonSchema.csproj
rename to tools/Umbraco.JsonSchema/Umbraco.JsonSchema.csproj
index 36463de3e0..32da8f798a 100644
--- a/src/JsonSchema/JsonSchema.csproj
+++ b/tools/Umbraco.JsonSchema/Umbraco.JsonSchema.csproj
@@ -8,14 +8,9 @@
-
-
-
-
diff --git a/tools/Umbraco.JsonSchema/UmbracoCmsSchema.cs b/tools/Umbraco.JsonSchema/UmbracoCmsSchema.cs
new file mode 100644
index 0000000000..86e64d2aa5
--- /dev/null
+++ b/tools/Umbraco.JsonSchema/UmbracoCmsSchema.cs
@@ -0,0 +1,81 @@
+using Umbraco.Cms.Core.Configuration;
+using Umbraco.Cms.Core.Configuration.Models;
+
+internal class UmbracoCmsSchema
+{
+ public UmbracoDefinition Umbraco { get; set; } = null!;
+
+ ///
+ /// Configuration container for all Umbraco products.
+ ///
+ public class UmbracoDefinition
+ {
+ public UmbracoCmsDefinition CMS { get; set; } = null!;
+ }
+
+ ///
+ /// Configuration of Umbraco CMS.
+ ///
+ public class UmbracoCmsDefinition
+ {
+ public ContentSettings Content { get; set; } = null!;
+
+ public CoreDebugSettings Debug { get; set; } = null!;
+
+ public ExceptionFilterSettings ExceptionFilter { get; set; } = null!;
+
+ public ModelsBuilderSettings ModelsBuilder { get; set; } = null!;
+
+ public GlobalSettings Global { get; set; } = null!;
+
+ public HealthChecksSettings HealthChecks { get; set; } = null!;
+
+ public HostingSettings Hosting { get; set; } = null!;
+
+ public ImagingSettings Imaging { get; set; } = null!;
+
+ public IndexCreatorSettings Examine { get; set; } = null!;
+
+ public KeepAliveSettings KeepAlive { get; set; } = null!;
+
+ public LoggingSettings Logging { get; set; } = null!;
+
+ public NuCacheSettings NuCache { get; set; } = null!;
+
+ public RequestHandlerSettings RequestHandler { get; set; } = null!;
+
+ public RuntimeSettings Runtime { get; set; } = null!;
+
+ public SecuritySettings Security { get; set; } = null!;
+
+ public TourSettings Tours { get; set; } = null!;
+
+ public TypeFinderSettings TypeFinder { get; set; } = null!;
+
+ public WebRoutingSettings WebRouting { get; set; } = null!;
+
+ public UmbracoPluginSettings Plugins { get; set; } = null!;
+
+ public UnattendedSettings Unattended { get; set; } = null!;
+
+ public RichTextEditorSettings RichTextEditor { get; set; } = null!;
+
+ public RuntimeMinificationSettings RuntimeMinification { get; set; } = null!;
+
+ public BasicAuthSettings BasicAuth { get; set; } = null!;
+
+ public PackageMigrationSettings PackageMigration { get; set; } = null!;
+
+ public LegacyPasswordMigrationSettings LegacyPasswordMigration { get; set; } = null!;
+
+ public ContentDashboardSettings ContentDashboard { get; set; } = null!;
+
+ public HelpPageSettings HelpPage { get; set; } = null!;
+
+ public InstallDefaultDataSettings DefaultDataCreation { get; set; } = null!;
+
+ public DataTypesSettings DataTypes { get; set; } = null!;
+
+ public MarketplaceSettings Marketplace { get; set; } = null!;
+ }
+}
diff --git a/tools/Umbraco.JsonSchema/UmbracoJsonSchemaGenerator.cs b/tools/Umbraco.JsonSchema/UmbracoJsonSchemaGenerator.cs
new file mode 100644
index 0000000000..f1a55479e3
--- /dev/null
+++ b/tools/Umbraco.JsonSchema/UmbracoJsonSchemaGenerator.cs
@@ -0,0 +1,35 @@
+using Newtonsoft.Json;
+using Newtonsoft.Json.Converters;
+using Newtonsoft.Json.Serialization;
+using NJsonSchema.Generation;
+
+///
+ /// Initializes a new instance of the
+ public UmbracoJsonSchemaGenerator()
+ : base(new JsonSchemaGeneratorSettings()
+ {
+ AlwaysAllowAdditionalObjectProperties = true,
+ DefaultReferenceTypeNullHandling = ReferenceTypeNullHandling.NotNull,
+ FlattenInheritanceHierarchy = true,
+ IgnoreObsoleteProperties = true,
+ SerializerSettings = new JsonSerializerSettings()
+ {
+ ContractResolver = new WritablePropertiesOnlyResolver()
+ }
+ })
+ {
+ Settings.SerializerSettings.Converters.Add(new StringEnumConverter());
+ }
+
+ /// CreateProperties(Type type, MemberSerialization memberSerialization)
+ => base.CreateProperties(type, memberSerialization).Where(p => p.Writable).ToList();
+ }
+}
diff --git a/umbraco.sln b/umbraco.sln
index a98ac5cc0d..f0122909d6 100644
--- a/umbraco.sln
+++ b/umbraco.sln
@@ -81,7 +81,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Umbraco.Tests.UnitTests", "
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Umbraco.Web.Common", "src\Umbraco.Web.Common\Umbraco.Web.Common.csproj", "{79E4293D-C92C-4649-AEC8-F1EFD95BDEB1}"
EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "JsonSchema", "src\JsonSchema\JsonSchema.csproj", "{2A5027D9-F71D-4957-929E-F7A56AA1B95A}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Umbraco.JsonSchema", "tools\Umbraco.JsonSchema\Umbraco.JsonSchema.csproj", "{2A5027D9-F71D-4957-929E-F7A56AA1B95A}"
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Umbraco.Cms.Persistence.Sqlite", "src\Umbraco.Cms.Persistence.Sqlite\Umbraco.Cms.Persistence.Sqlite.csproj", "{32F6A309-EC1E-4CDB-BA80-C804CF680BEE}"
EndProject
@@ -156,6 +156,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "styles", "styles", "{EA628A
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Umbraco.Cms.Imaging.ImageSharp", "src\Umbraco.Cms.Imaging.ImageSharp\Umbraco.Cms.Imaging.ImageSharp.csproj", "{C280181E-597B-4AA5-82E7-D7017E928749}"
EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Tools", "Tools", "{05878304-40EB-4F84-B40B-91BDB70DE094}"
+EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
@@ -325,6 +327,7 @@ Global
{D6319409-777A-4BD0-93ED-B2DFD805B32C} = {B5BD12C1-A454-435E-8A46-FF4A364C0382}
{A499779C-1B3B-48A8-B551-458E582E6E96} = {B5BD12C1-A454-435E-8A46-FF4A364C0382}
{9102ABDF-E537-4E46-B525-C9ED4833EED0} = {B5BD12C1-A454-435E-8A46-FF4A364C0382}
+ {2A5027D9-F71D-4957-929E-F7A56AA1B95A} = {05878304-40EB-4F84-B40B-91BDB70DE094}
{05C1D0C8-C592-468F-AF8F-A299B9B3A903} = {6D72A60B-0542-4AA9-A493-DD4179E838A1}
{0946531B-F06D-415B-A4E3-6CBFF5DB1C12} = {995D9EFA-8BB1-4333-80AD-C525A06FD984}
{CBCE0A1E-BF29-49A6-9581-EAB3587D823A} = {995D9EFA-8BB1-4333-80AD-C525A06FD984}
-
-
+
+
-
-
-
-
-
-
-
+
-
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![{{media.name}}]( "{{media.name}}")
+
+
+
+
+
+
+
+
+
+
+
+
+ Waiting...
+ {{media.$uploadProgress}}%
+
+
+
+
+
+
+
+
+ {{ invalidEntry.name }}
+ {{ invalidEntry.errorText }}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.less
index 37e7a4ee76..7f3af3aaa5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.less
@@ -18,4 +18,41 @@ umb-media-picker3-property-editor[readonly] {
border-color: @inputReadonlyBorderColor;
}
}
-}
\ No newline at end of file
+}
+
+.umb-mediapicker3 {
+ .dropzone {
+ position: relative;
+
+ .drop-overlay {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ padding: 12px;
+ background-color: rgba(27,38,79,.2);
+ z-index: 1;
+ backdrop-filter: blur(0px);
+ opacity: 0;
+ pointer-events: none;
+ transition: backdrop-filter 200ms ease-in-out, opacity 200ms ease-in-out;
+ margin: -1px;
+ }
+
+ &.drag-over {
+ .drop-overlay {
+ backdrop-filter: blur(2px);
+ opacity: 1;
+ pointer-events: all;
+ border: 2px solid @blueExtraDark;
+ }
+ }
+ };
+}
+
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
index 25ca237bb9..e052e7c1c6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
@@ -17,7 +17,8 @@
controller: MediaPicker3Controller,
controllerAs: "vm",
bindings: {
- model: "="
+ model: "=",
+ node: "="
},
require: {
propertyForm: "^form",
@@ -28,7 +29,10 @@
}
});
- function MediaPicker3Controller($scope, editorService, clipboardService, localizationService, overlayService, userService, entityResource, $attrs) {
+ function MediaPicker3Controller($scope, editorService, clipboardService, localizationService, overlayService, userService, entityResource, $attrs, umbRequestHelper, $injector, uploadTracker) {
+
+ const mediaUploader = $injector.instantiate(Utilities.MediaUploader);
+ let uploadInProgress = false;
var unsubscribe = [];
@@ -47,10 +51,15 @@
vm.allowRemoveMedia = true;
vm.allowEditMedia = true;
+ vm.handleFiles = handleFiles;
+
+ vm.invalidEntries = [];
+
vm.addMediaAt = addMediaAt;
vm.editMedia = editMedia;
vm.removeMedia = removeMedia;
vm.copyMedia = copyMedia;
+ vm.allowDir = true;
vm.labels = {};
@@ -70,7 +79,6 @@
});
vm.$onInit = function() {
-
vm.validationLimit = vm.model.config.validationLimit || {};
// If single-mode we only allow 1 item as the maximum:
if(vm.model.config.multiple === false) {
@@ -80,6 +88,17 @@
vm.singleMode = vm.validationLimit.max === 1;
vm.allowedTypes = vm.model.config.filter ? vm.model.config.filter.split(",") : null;
+ const uploaderOptions = {
+ uploadURL: umbRequestHelper.getApiUrl("mediaPickerThreeBaseUrl", "uploadMedia"),
+ allowedMediaTypeAliases: vm.allowedTypes
+ };
+
+ unsubscribe.push(mediaUploader.on('mediaEntryAccepted', _handleMediaEntryAccepted));
+ unsubscribe.push(mediaUploader.on('mediaEntryRejected', _handleMediaEntryRejected));
+ unsubscribe.push(mediaUploader.on('queueStarted', _handleMediaQueueStarted));
+ unsubscribe.push(mediaUploader.on('uploadSuccess', _handleMediaUploadSuccess));
+ unsubscribe.push(mediaUploader.on('queueCompleted', _handleMediaQueueCompleted));
+
copyAllMediasAction = {
labelKey: "clipboard_labelForCopyAllEntries",
labelTokens: [vm.model.label],
@@ -135,11 +154,51 @@
vm.allowEdit = hasAccessToMedia;
vm.allowAdd = hasAccessToMedia;
- vm.loading = false;
+ mediaUploader.init(uploaderOptions).then(() => {
+ vm.loading = false;
+ });
});
-
};
+ function handleFiles (files, invalidFiles) {
+ if (vm.readonly) return;
+ const allFiles = [...files, ...invalidFiles];
+ mediaUploader.requestUpload(allFiles);
+ };
+
+ function _handleMediaEntryAccepted (event, data) {
+ vm.model.value.push(data.mediaEntry);
+ setDirty();
+ }
+
+ function _handleMediaEntryRejected (event, data) {
+ // we need to make sure the media entry hasn't been accepted earlier in process
+ const index = vm.model.value.findIndex(mediaEntry => mediaEntry.key === data.mediaEntry.key);
+ if (index !== -1) {
+ vm.model.value.splice(index, 1);
+ }
+ vm.invalidEntries.push(data.mediaEntry);
+ setDirty();
+ }
+
+ function _handleMediaUploadSuccess (event, data) {
+ const mediaEntry = vm.model.value.find(mediaEntry => mediaEntry.key === data.mediaEntry.key);
+ if (!mediaEntry) return;
+
+ mediaEntry.tmpLocation = data.tmpLocation;
+ updateMediaEntryData(mediaEntry);
+ }
+
+ function _handleMediaQueueStarted () {
+ uploadInProgress = true;
+ uploadTracker.uploadStarted(vm.node.key);
+ }
+
+ function _handleMediaQueueCompleted () {
+ uploadInProgress = false;
+ uploadTracker.uploadEnded(vm.node.key);
+ }
+
function onServerValueChanged(newVal, oldVal) {
if(newVal === null || !Array.isArray(newVal)) {
newVal = [];
@@ -430,7 +489,7 @@
vm.sortableOptions = {
cursor: "grabbing",
- handle: "umb-media-card",
+ handle: "umb-media-card, .umb-media-card",
cancel: "input,textarea,select,option",
classes: ".umb-media-card--dragging",
distance: 5,
@@ -469,6 +528,10 @@
for (const subscription of unsubscribe) {
subscription();
}
+
+ if (uploadInProgress) {
+ uploadTracker.uploadEnded(vm.node.key);
+ }
});
}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.controller.js
index 8efbed00a4..dfdc9aa779 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.controller.js
@@ -97,13 +97,13 @@ function multiUrlPickerController($scope, localizationService, entityResource, i
setDirty();
};
- $scope.clear = function ($index) {
+ $scope.clear = function () {
$scope.renderModel = [];
setDirty();
};
- $scope.openLinkPicker = function (link, $index) {
+ $scope.openLinkPicker = function (link) {
if (!$scope.allowAdd || !$scope.allowEdit) return;
var target = link ? {
@@ -153,7 +153,7 @@ function multiUrlPickerController($scope, localizationService, entityResource, i
link.trashed = data.trashed;
if (link.trashed) {
- item.url = vm.labels.general_recycleBin;
+ link.url = vm.labels.general_recycleBin;
}
});
} else {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
index 7fcf5cc365..274fd1f15d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
@@ -79,7 +79,7 @@
});
_.each(model.config.contentTypes, function (contentType) {
- contentType.nameExp = !!contentType.nameTemplate
+ contentType.nameExp = contentType.nameTemplate
? $interpolate(contentType.nameTemplate)
: undefined;
});
@@ -626,7 +626,7 @@
// Enforce min items if we only have one scaffold type
var modelWasChanged = false;
if (vm.nodes.length < vm.minItems && vm.scaffolds.length === 1) {
- for (var i = vm.nodes.length; i < model.config.minItems; i++) {
+ for (var ii = vm.nodes.length; ii < model.config.minItems; ii++) {
addNode(vm.scaffolds[0].contentTypeAlias);
}
modelWasChanged = true;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js
index 4e90dd063b..454a4e5615 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js
@@ -112,10 +112,6 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController",
icon.name = "icon-settings-alt";
icon.isCustom = true;
break;
- case "umbmacro":
- icon.name = "icon-settings-alt";
- icon.isCustom = true;
- break;
default:
icon.name = alias;
icon.isCustom = false;
@@ -124,7 +120,7 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController",
return icon;
}
- var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
+ var unsubscribe = $scope.$on("formSubmitting", function () {
var commands = _.where($scope.tinyMceConfig.commands, {selected: true});
$scope.model.value.toolbar = _.pluck(commands, "alias");
diff --git a/src/Umbraco.Web.UI.Client/src/views/relationTypes/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/relationTypes/edit.controller.js
index 1f0c054257..c061bacf26 100644
--- a/src/Umbraco.Web.UI.Client/src/views/relationTypes/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/relationTypes/edit.controller.js
@@ -6,7 +6,7 @@
* @description
* The controller for editing relation types.
*/
-function RelationTypeEditController($scope, $routeParams, relationTypeResource, editorState, navigationService, dateHelper, userService, entityResource, formHelper, contentEditingHelper, localizationService, eventsService) {
+function RelationTypeEditController($scope, $routeParams, relationTypeResource, editorState, navigationService, dateHelper, userService, notificationsService, formHelper, contentEditingHelper, localizationService, eventsService) {
var vm = this;
diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
index 1e14cf1e87..1b6b000e28 100644
--- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
@@ -361,6 +361,7 @@
vm.close = close;
function openInsertOverlay() {
+ var code;
var insertOverlay = {
allowedTypes: {
macro: true,
@@ -375,11 +376,11 @@
insert(macroObject.syntax);
break;
case "dictionary":
- var code = templateHelper.getInsertDictionarySnippet(model.insert.node.name);
+ code = templateHelper.getInsertDictionarySnippet(model.insert.node.name);
insert(code);
break;
case "partial":
- var code = templateHelper.getInsertPartialSnippet(model.insert.node.parentId, model.insert.node.name);
+ code = templateHelper.getInsertPartialSnippet(model.insert.node.parentId, model.insert.node.name);
insert(code);
break;
case "umbracoField":
@@ -388,7 +389,7 @@
}
editorService.close();
},
- close: function (oldModel) {
+ close: function () {
// close the dialog
editorService.close();
// focus editor
@@ -452,7 +453,7 @@
insert(code);
editorService.close();
},
- close: function (model) {
+ close: function () {
// close dialog
editorService.close();
// focus editor
@@ -488,7 +489,7 @@
insert(code);
editorService.close();
},
- close: function (model) {
+ close: function () {
// close dialog
editorService.close();
// focus editor
@@ -518,29 +519,30 @@
function openSectionsOverlay() {
+ var code;
var templateSections = {
isMaster: vm.template.isMasterTemplate,
submit: function (model) {
if (model.insertType === 'renderBody') {
- var code = templateHelper.getRenderBodySnippet();
+ code = templateHelper.getRenderBodySnippet();
insert(code);
}
if (model.insertType === 'renderSection') {
- var code = templateHelper.getRenderSectionSnippet(model.renderSectionName, model.mandatoryRenderSection);
+ code = templateHelper.getRenderSectionSnippet(model.renderSectionName, model.mandatoryRenderSection);
insert(code);
}
if (model.insertType === 'addSection') {
- var code = templateHelper.getAddSectionSnippet(model.sectionName);
+ code = templateHelper.getAddSectionSnippet(model.sectionName);
wrap(code);
}
editorService.close();
},
- close: function (model) {
+ close: function () {
editorService.close();
vm.editor.focus();
}
diff --git a/src/Umbraco.Web.UI.Client/test/config/karma.conf.js b/src/Umbraco.Web.UI.Client/test/config/karma.conf.js
index 89101d2f1d..6619754315 100644
--- a/src/Umbraco.Web.UI.Client/test/config/karma.conf.js
+++ b/src/Umbraco.Web.UI.Client/test/config/karma.conf.js
@@ -29,7 +29,6 @@ module.exports = function (config) {
'lib/umbraco/Extensions.js',
'node_modules/lazyload-js/LazyLoad.min.js',
'node_modules/angular-dynamic-locale/dist/tmhDynamicLocale.min.js',
- 'node_modules/sortablejs/Sortable.min.js',
//app bootstrap and loader
'test/config/app.unit.js',
diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
index e1a0831efd..45d32a65ee 100644
--- a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
+++ b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
@@ -28,15 +28,6 @@