From 57847f38e9565bbbe3f34b777d9172af24257d7f Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:23:57 +0200 Subject: [PATCH 01/15] Remove angular.element --- .../directives/components/umbimagelazyload.directive.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js index 9d76993fd341..5882d3db71bf 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js @@ -31,7 +31,7 @@ Use this directive to lazy-load an image only when it is scrolled into view. **/ -(function() { +(function () { 'use strict'; function ImageLazyLoadDirective() { @@ -41,7 +41,8 @@ Use this directive to lazy-load an image only when it is scrolled into view. function link(scope, element, attrs) { const observer = new IntersectionObserver(loadImg); - const img = angular.element(element)[0]; + const img = element[0]; + console.log(img); img.src = placeholder; observer.observe(img); From 694b9d9291de909d38462b4f3933bf652f28cac0 Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:29:06 +0200 Subject: [PATCH 02/15] Remove console.log --- .../common/directives/components/umbimagelazyload.directive.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js index 5882d3db71bf..988f8fab2447 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js @@ -42,7 +42,6 @@ Use this directive to lazy-load an image only when it is scrolled into view. const observer = new IntersectionObserver(loadImg); const img = element[0]; - console.log(img); img.src = placeholder; observer.observe(img); From ef416485da19475f62894398072e511ac93e96fb Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:32:56 +0200 Subject: [PATCH 03/15] Switch from angular.element to jQuery --- .../components/umbrangeslider.directive.js | 104 +++++++++--------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js index 00036586004d..21a1f181a6fc 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js @@ -57,13 +57,13 @@ For extra details about options and events take a look here: https://refreshless **/ -(function() { - 'use strict'; +(function () { + 'use strict'; - var umbRangeSlider = { + var umbRangeSlider = { template: '
', - controller: UmbRangeSliderController, - bindings: { + controller: UmbRangeSliderController, + bindings: { ngModel: '<', options: '<', onSetup: '&?', @@ -73,15 +73,15 @@ For extra details about options and events take a look here: https://refreshless onChange: '&?', onStart: '&?', onEnd: '&?' - } + } }; - - function UmbRangeSliderController($element, $timeout, $scope, assetsService) { - + + function UmbRangeSliderController($element, $timeout, $scope, assetsService) { + const ctrl = this; let sliderInstance = null; - ctrl.$onInit = function() { + ctrl.$onInit = function () { // load css file for the date picker assetsService.loadCss('lib/nouislider/nouislider.min.css', $scope); @@ -94,13 +94,13 @@ For extra details about options and events take a look here: https://refreshless }; - function grabElementAndRun() { - $timeout(function() { + function grabElementAndRun() { + $timeout(function () { const element = $element.find('.umb-range-slider')[0]; - setSlider(element); - }, 0, true); + setSlider(element); + }, 0, true); } - + function setSlider(element) { sliderInstance = element; @@ -117,82 +117,82 @@ For extra details about options and events take a look here: https://refreshless // create new slider noUiSlider.create(sliderInstance, options); - - if (ctrl.onSetup) { - ctrl.onSetup({ - slider: sliderInstance - }); + + if (ctrl.onSetup) { + ctrl.onSetup({ + slider: sliderInstance + }); } // If has ngModel set the date - if (ctrl.ngModel) { + if (ctrl.ngModel) { sliderInstance.noUiSlider.set(ctrl.ngModel); } // destroy the slider instance when the dom element is removed - angular.element(element).on('$destroy', function() { + $(element).on('$destroy', function () { sliderInstance.noUiSlider.off(); }); setUpCallbacks(); - // Refresh the scope - $scope.$applyAsync(); + // Refresh the scope + $scope.$applyAsync(); } - + function setUpCallbacks() { - if(sliderInstance) { + if (sliderInstance) { // bind hook for update - if(ctrl.onUpdate) { - sliderInstance.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) { - $timeout(function() { - ctrl.onUpdate({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + if (ctrl.onUpdate) { + sliderInstance.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) { + $timeout(function () { + ctrl.onUpdate({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions }); }); }); } // bind hook for slide - if(ctrl.onSlide) { - sliderInstance.noUiSlider.on('slide', function (values, handle, unencoded, tap, positions) { - $timeout(function() { - ctrl.onSlide({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + if (ctrl.onSlide) { + sliderInstance.noUiSlider.on('slide', function (values, handle, unencoded, tap, positions) { + $timeout(function () { + ctrl.onSlide({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions }); }); }); } // bind hook for set - if(ctrl.onSet) { - sliderInstance.noUiSlider.on('set', function (values, handle, unencoded, tap, positions) { - $timeout(function() { - ctrl.onSet({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + if (ctrl.onSet) { + sliderInstance.noUiSlider.on('set', function (values, handle, unencoded, tap, positions) { + $timeout(function () { + ctrl.onSet({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions }); }); }); } // bind hook for change - if(ctrl.onChange) { - sliderInstance.noUiSlider.on('change', function (values, handle, unencoded, tap, positions) { - $timeout(function() { - ctrl.onChange({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + if (ctrl.onChange) { + sliderInstance.noUiSlider.on('change', function (values, handle, unencoded, tap, positions) { + $timeout(function () { + ctrl.onChange({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions }); }); }); } // bind hook for start - if(ctrl.onStart) { - sliderInstance.noUiSlider.on('start', function (values, handle, unencoded, tap, positions) { - $timeout(function() { - ctrl.onStart({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + if (ctrl.onStart) { + sliderInstance.noUiSlider.on('start', function (values, handle, unencoded, tap, positions) { + $timeout(function () { + ctrl.onStart({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions }); }); }); } // bind hook for end - if(ctrl.onEnd) { - sliderInstance.noUiSlider.on('end', function (values, handle, unencoded, tap, positions) { - $timeout(function() { - ctrl.onEnd({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); + if (ctrl.onEnd) { + sliderInstance.noUiSlider.on('end', function (values, handle, unencoded, tap, positions) { + $timeout(function () { + ctrl.onEnd({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions }); }); }); } @@ -201,7 +201,7 @@ For extra details about options and events take a look here: https://refreshless } } - + angular.module('umbraco.directives').component('umbRangeSlider', umbRangeSlider); - + })(); From 5a75170fe1a7a7f6608136a45df2359ea632ba32 Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:37:40 +0200 Subject: [PATCH 04/15] Replace angular.element with jQuery --- .../application/umbtour.directive.js | 100 +++++++++--------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js index 287962b6d352..6f98dbca6e05 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js @@ -198,27 +198,27 @@ In the following example you see how to run some custom logic before a step goes scope.loadingStep = false; scope.elementNotFound = false; - scope.model.nextStep = function() { + scope.model.nextStep = function () { nextStep(); }; - scope.model.endTour = function() { + scope.model.endTour = function () { unbindEvent(); tourService.endTour(scope.model); backdropService.close(); }; - scope.model.completeTour = function() { + scope.model.completeTour = function () { unbindEvent(); - tourService.completeTour(scope.model).then(function() { - backdropService.close(); + tourService.completeTour(scope.model).then(function () { + backdropService.close(); }); }; - scope.model.disableTour = function() { + scope.model.disableTour = function () { unbindEvent(); - tourService.disableTour(scope.model).then(function() { - backdropService.close(); + tourService.disableTour(scope.model).then(function () { + backdropService.close(); }); } @@ -227,7 +227,7 @@ In the following example you see how to run some custom logic before a step goes pulseElement = el.find(".umb-tour__pulse"); popover.hide(); scope.model.currentStepIndex = 0; - backdropService.open({disableEventsOnClick: true}); + backdropService.open({ disableEventsOnClick: true }); startStep(); } @@ -249,20 +249,20 @@ In the following example you see how to run some custom logic before a step goes } function nextStep() { - + popover.hide(); pulseElement.hide(); $timeout.cancel(pulseTimer); scope.model.currentStepIndex++; // make sure we don't go too far - if(scope.model.currentStepIndex !== scope.model.steps.length) { + if (scope.model.currentStepIndex !== scope.model.steps.length) { startStep(); - // tour completed - final step + // tour completed - final step } else { scope.loadingStep = true; - waitForPendingRerequests().then(function(){ + waitForPendingRerequests().then(function () { scope.loadingStep = false; // clear current step scope.model.currentStep = {}; @@ -280,17 +280,17 @@ In the following example you see how to run some custom logic before a step goes backdropService.setOpacity(scope.model.steps[scope.model.currentStepIndex].backdropOpacity); backdropService.setHighlight(null); - waitForPendingRerequests().then(function() { + waitForPendingRerequests().then(function () { scope.model.currentStep = scope.model.steps[scope.model.currentStepIndex]; setView(); - + // if highlight element is set - find it findHighlightElement(); // if a custom event needs to be bound we do it now - if(scope.model.currentStep.event) { + if (scope.model.currentStep.event) { bindEvent(); } @@ -301,7 +301,7 @@ In the following example you see how to run some custom logic before a step goes function findHighlightElement() { - scope.elementNotFound = false; + scope.elementNotFound = false; $timeout(function () { // clear element when step as marked as intro, so it always displays in the center @@ -312,15 +312,15 @@ In the following example you see how to run some custom logic before a step goes } // if an element isn't set - show the popover in the center - if(scope.model.currentStep && !scope.model.currentStep.element) { + if (scope.model.currentStep && !scope.model.currentStep.element) { setPopoverPosition(null); return; } - var element = angular.element(scope.model.currentStep.element); + var element = $(scope.model.currentStep.element); // we couldn't find the element in the dom - abort and show error - if(element.length === 0) { + if (element.length === 0) { scope.elementNotFound = true; setPopoverPosition(null); return; @@ -337,7 +337,7 @@ In the following example you see how to run some custom logic before a step goes el = el.offsetParent(); } } - + var scrollToCenterOfContainer = offsetTop - (scrollParent[0].clientHeight / 2); if (element[0].clientHeight < scrollParent[0].clientHeight) { scrollToCenterOfContainer += (element[0].clientHeight / 2); @@ -366,7 +366,7 @@ In the following example you see how to run some custom logic before a step goes function setPopoverPosition(element) { $timeout(function () { - + var position = "center"; var margin = 20; var css = {}; @@ -374,10 +374,10 @@ In the following example you see how to run some custom logic before a step goes var popoverWidth = popover.outerWidth(); var popoverHeight = popover.outerHeight(); var popoverOffset = popover.offset(); - var documentWidth = angular.element(document).width(); - var documentHeight = angular.element(document).height(); + var documentWidth = $(document).width(); + var documentHeight = $(document).height(); - if(element) { + if (element) { var offset = element.offset(); var width = element.outerWidth(); @@ -436,29 +436,29 @@ In the following example you see how to run some custom logic before a step goes } else { // if there is no dom element center the popover - css.top = "calc(50% - " + popoverHeight/2 + "px)"; - css.left = "calc(50% - " + popoverWidth/2 + "px)"; + css.top = "calc(50% - " + popoverHeight / 2 + "px)"; + css.left = "calc(50% - " + popoverWidth / 2 + "px)"; } popover.css(css).fadeIn("fast"); - + }); } function setPulsePosition() { - if(scope.model.currentStep.event) { + if (scope.model.currentStep.event) { + + pulseTimer = $timeout(function () { - pulseTimer = $timeout(function(){ - var clickElementSelector = scope.model.currentStep.eventElement ? scope.model.currentStep.eventElement : scope.model.currentStep.element; var clickElement = $(clickElementSelector); - + var offset = clickElement.offset(); var width = clickElement.outerWidth(); var height = clickElement.outerHeight(); - + pulseElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top }); pulseElement.fadeIn(); @@ -468,24 +468,24 @@ In the following example you see how to run some custom logic before a step goes function waitForPendingRerequests() { var deferred = $q.defer(); - var timer = window.setInterval(function(){ - + var timer = window.setInterval(function () { + var requestsReady = false; var animationsDone = false; // check for pending requests both in angular and on the document - if($http.pendingRequests.length === 0 && document.readyState === "complete") { + if ($http.pendingRequests.length === 0 && document.readyState === "complete") { requestsReady = true; } // check for animations. ng-enter and ng-leave are default angular animations. // Also check for infinite editors animating - if(document.querySelectorAll(".ng-enter, .ng-leave, .umb-editor--animating").length === 0) { + if (document.querySelectorAll(".ng-enter, .ng-leave, .umb-editor--animating").length === 0) { animationsDone = true; } - if(requestsReady && animationsDone) { - $timeout(function(){ + if (requestsReady && animationsDone) { + $timeout(function () { deferred.resolve(); clearInterval(timer); }); @@ -512,14 +512,14 @@ In the following example you see how to run some custom logic before a step goes var bindToElement = scope.model.currentStep.element; var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex; var removeEventName = "remove.step-" + scope.model.currentStepIndex; - var handled = false; + var handled = false; - if(scope.model.currentStep.eventElement) { + if (scope.model.currentStep.eventElement) { bindToElement = scope.model.currentStep.eventElement; } - $(bindToElement).on(eventName, function(){ - if(!handled) { + $(bindToElement).on(eventName, function () { + if (!handled) { unbindEvent(); nextStep(); handled = true; @@ -530,7 +530,7 @@ In the following example you see how to run some custom logic before a step goes // for some reason it seems the elements gets removed before the event is raised. This is a temp solution which assumes: // "if you ask me to click on an element, and it suddenly gets removed from the dom, let's go on to the next step". $(bindToElement).on(removeEventName, function () { - if(!handled) { + if (!handled) { unbindEvent(); nextStep(); handled = true; @@ -542,13 +542,13 @@ In the following example you see how to run some custom logic before a step goes function unbindEvent() { var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex; var removeEventName = "remove.step-" + scope.model.currentStepIndex; - - if(scope.model.currentStep.eventElement) { - angular.element(scope.model.currentStep.eventElement).off(eventName); - angular.element(scope.model.currentStep.eventElement).off(removeEventName); + + if (scope.model.currentStep.eventElement) { + $(scope.model.currentStep.eventElement).off(eventName); + $(scope.model.currentStep.eventElement).off(removeEventName); } else { - angular.element(scope.model.currentStep.element).off(eventName); - angular.element(scope.model.currentStep.element).off(removeEventName); + $(scope.model.currentStep.element).off(eventName); + $(scope.model.currentStep.element).off(removeEventName); } } From 69c299be7cb235db5e9b321aa4e5083b99b71c8c Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:41:49 +0200 Subject: [PATCH 05/15] Replace angular.element with jQuery --- .../application/umbbackdrop.directive.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js index 39e4f1066662..4b2407574896 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js @@ -7,8 +7,8 @@ var events = []; - scope.clickBackdrop = function(event) { - if(scope.disableEventsOnClick === true) { + scope.clickBackdrop = function (event) { + if (scope.disableEventsOnClick === true) { event.preventDefault(); event.stopPropagation(); } @@ -22,16 +22,16 @@ } - function setHighlight () { + function setHighlight() { scope.loading = true; $timeout(function () { // The element to highlight - var highlightElement = angular.element(scope.highlightElement); + var highlightElement = $(scope.highlightElement); - if(highlightElement && highlightElement.length > 0) { + if (highlightElement && highlightElement.length > 0) { var offset = highlightElement.offset(); var width = highlightElement.outerWidth(); @@ -48,7 +48,7 @@ var rectRight = el.find(".umb-backdrop__rect--right"); var rectBottom = el.find(".umb-backdrop__rect--bottom"); var rectLeft = el.find(".umb-backdrop__rect--left"); - + // Add the css scope.rectTopCss = { "height": topDistance, "left": leftDistance + "px", opacity: scope.backdropOpacity }; scope.rectRightCss = { "left": leftAndWidth + "px", "top": topDistance + "px", "height": height, opacity: scope.backdropOpacity }; @@ -56,14 +56,14 @@ scope.rectLeftCss = { "width": leftDistance, opacity: scope.backdropOpacity }; // Prevent interaction in the highlighted area - if(scope.highlightPreventClick) { + if (scope.highlightPreventClick) { var preventClickElement = el.find(".umb-backdrop__highlight-prevent-click"); preventClickElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top }); } } - scope.loading = false; + scope.loading = false; }); @@ -74,8 +74,8 @@ } events.push(scope.$watch("highlightElement", function (newValue, oldValue) { - if(!newValue) {return;} - if(newValue === oldValue) {return;} + if (!newValue) { return; } + if (newValue === oldValue) { return; } setHighlight(); })); From 22bf0bc42866c3c38febf37572f0d1b028ec6e07 Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:42:40 +0200 Subject: [PATCH 06/15] Replace angular.element with jQuery --- .../util/disabletabindex.directive.js | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js index 759d05df71e5..d43282715e85 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js @@ -1,46 +1,46 @@ angular.module("umbraco.directives") .directive('disableTabindex', function (tabbableService) { - return { - restrict: 'A', //Can only be used as an attribute, - scope: { - "disableTabindex": "<" - }, - link: function (scope, element, attrs) { - - if(scope.disableTabindex) { - //Select the node that will be observed for mutations (native DOM element not jQLite version) - var targetNode = element[0]; - - //Watch for DOM changes - so when the property editor subview loads in - //We can be notified its updated the child elements inside the DIV we are watching - var observer = new MutationObserver(domChange); - - // Options for the observer (which mutations to observe) - var config = { attributes: true, childList: true, subtree: true }; - - function domChange(mutationsList, observer) { - for(var mutation of mutationsList) { - - //DOM items have been added or removed - if (mutation.type == 'childList') { - - //Check if any child items in mutation.target contain an input - var childInputs = tabbableService.tabbable(mutation.target); - - //For each item in childInputs - override or set HTML attribute tabindex="-1" - angular.forEach(childInputs, function(element){ - angular.element(element).attr('tabindex', '-1'); - }); + return { + restrict: 'A', //Can only be used as an attribute, + scope: { + "disableTabindex": "<" + }, + link: function (scope, element, attrs) { + + if (scope.disableTabindex) { + //Select the node that will be observed for mutations (native DOM element not jQLite version) + var targetNode = element[0]; + + //Watch for DOM changes - so when the property editor subview loads in + //We can be notified its updated the child elements inside the DIV we are watching + var observer = new MutationObserver(domChange); + + // Options for the observer (which mutations to observe) + var config = { attributes: true, childList: true, subtree: true }; + + function domChange(mutationsList, observer) { + for (var mutation of mutationsList) { + + //DOM items have been added or removed + if (mutation.type == 'childList') { + + //Check if any child items in mutation.target contain an input + var childInputs = tabbableService.tabbable(mutation.target); + + //For each item in childInputs - override or set HTML attribute tabindex="-1" + angular.forEach(childInputs, function (element) { + $(element).attr('tabindex', '-1'); + }); + } } } + + // Start observing the target node for configured mutations + //GO GO GO + observer.observe(targetNode, config); } - // Start observing the target node for configured mutations - //GO GO GO - observer.observe(targetNode, config); } - - } - }; -}); + }; + }); From 0e3d666fc3c822b370024050363237c89d450a88 Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:47:22 +0200 Subject: [PATCH 07/15] Refactor selector to pure jQuery --- .../src/views/templates/edit.controller.js | 198 +++++++++--------- 1 file changed, 99 insertions(+), 99 deletions(-) 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 30aa677b8be3..fc8713caf4e7 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 @@ -8,7 +8,7 @@ var infiniteMode = $scope.model && $scope.model.infiniteMode; var id = infiniteMode ? $scope.model.id : $routeParams.id; var create = infiniteMode ? $scope.model.create : $routeParams.create; - + vm.header = {}; vm.header.editorfor = "template_template"; vm.header.setPageTitle = true; @@ -26,7 +26,7 @@ vm.page.insertDefaultButton = { labelKey: "general_insert", addEllipsis: "true", - handler: function() { + handler: function () { vm.openInsertOverlay(); } }; @@ -68,16 +68,16 @@ //Keyboard shortcuts for help dialog vm.page.keyboardShortcutsOverview = []; - templateHelper.getGeneralShortcuts().then(function(data){ + templateHelper.getGeneralShortcuts().then(function (data) { vm.page.keyboardShortcutsOverview.push(data); }); - templateHelper.getEditorShortcuts().then(function(data){ + templateHelper.getEditorShortcuts().then(function (data) { vm.page.keyboardShortcutsOverview.push(data); }); - templateHelper.getTemplateEditorShortcuts().then(function(data){ + templateHelper.getTemplateEditorShortcuts().then(function (data) { vm.page.keyboardShortcutsOverview.push(data); }); - + vm.save = function (suppressNotification) { vm.page.saveButtonState = "busy"; @@ -87,36 +87,36 @@ saveMethod: templateResource.save, scope: $scope, content: vm.template, - rebindCallback: function (orignal, saved) {} + rebindCallback: function (orignal, saved) { } }).then(function (saved) { - if (!suppressNotification) { - localizationService.localizeMany(["speechBubbles_templateSavedHeader", "speechBubbles_templateSavedText"]).then(function(data){ + if (!suppressNotification) { + localizationService.localizeMany(["speechBubbles_templateSavedHeader", "speechBubbles_templateSavedText"]).then(function (data) { var header = data[0]; var message = data[1]; notificationsService.success(header, message); }); - } + } vm.page.saveButtonState = "success"; vm.template = saved; //sync state - if(!infiniteMode) { + if (!infiniteMode) { editorState.set(vm.template); } - + // sync tree // if master template alias has changed move the node to it's new location - if(!infiniteMode && oldMasterTemplateAlias !== vm.template.masterTemplateAlias) { - + if (!infiniteMode && oldMasterTemplateAlias !== vm.template.masterTemplateAlias) { + // When creating a new template the id is -1. Make sure We don't remove the root node. if (vm.page.menu.currentNode.id !== "-1") { // move node to new location in tree //first we need to remove the node that we're working on treeService.removeNode(vm.page.menu.currentNode); } - + // update stored alias to the new one so the node won't move again unless the alias is changed again oldMasterTemplateAlias = vm.template.masterTemplateAlias; @@ -127,7 +127,7 @@ } else { // normal tree sync - if(!infiniteMode) { + if (!infiniteMode) { navigationService.syncTree({ tree: "templates", path: vm.template.path, forceReload: true }).then(function (syncArgs) { vm.page.menu.currentNode = syncArgs.node; }); @@ -138,7 +138,7 @@ // clear $dirty state on form setFormState("pristine"); - if(infiniteMode) { + if (infiniteMode) { submit(); } @@ -164,16 +164,16 @@ // load templates - used in the master template picker templateResource.getAll() - .then(function(templates) { + .then(function (templates) { vm.templates = templates; }); - if(create) { + if (create) { templateResource.getScaffold((id)).then(function (template) { - vm.ready(template); - }); + vm.ready(template); + }); } else { - templateResource.getById(id).then(function(template){ + templateResource.getById(id).then(function (template) { vm.ready(template); }); } @@ -181,26 +181,26 @@ }; - vm.ready = function(template){ - vm.page.loading = false; + vm.ready = function (template) { + vm.page.loading = false; vm.template = template; - // if this is a new template, bind to the blur event on the name - if (create) { - $timeout(function() { - var nameField = angular.element(document.querySelector('[data-element="editor-name-field"]')); - if (nameField) { - nameField.on('blur', function(event) { - if (event.target.value) { - vm.save(true); - } - }); - } - }); - } - + // if this is a new template, bind to the blur event on the name + if (create) { + $timeout(function () { + var nameField = $('[data-element="editor-name-field"]'); + if (nameField) { + nameField.on('blur', function (event) { + if (event.target.value) { + vm.save(true); + } + }); + } + }); + } + // sync state - if(!infiniteMode) { + if (!infiniteMode) { editorState.set(vm.template); navigationService.syncTree({ tree: "templates", path: vm.template.path, forceReload: true }).then(function (syncArgs) { vm.page.menu.currentNode = syncArgs.node; @@ -221,12 +221,12 @@ enableBasicAutocompletion: true, enableLiveAutocompletion: false }, - onLoad: function(_editor) { + onLoad: function (_editor) { vm.editor = _editor; - + //Update the auto-complete method to use ctrl+alt+space _editor.commands.bindKey("ctrl-alt-space", "startAutocomplete"); - + // Unassigns the keybinding (That was previously auto-complete) // As conflicts with our own tree search shortcut _editor.commands.bindKey("ctrl-space", null); @@ -238,20 +238,20 @@ { name: 'unSelectOrFindPrevious', bindKey: 'Alt-Shift-K', - exec: function() { + exec: function () { // Toggle the show keyboard shortcuts overlay - $scope.$apply(function(){ + $scope.$apply(function () { vm.showKeyboardShortcut = !vm.showKeyboardShortcut; }); - + }, readOnly: true }, { name: 'insertUmbracoValue', bindKey: 'Alt-Shift-V', - exec: function() { - $scope.$apply(function(){ + exec: function () { + $scope.$apply(function () { openPageFieldOverlay(); }); }, @@ -260,18 +260,18 @@ { name: 'insertPartialView', bindKey: 'Alt-Shift-P', - exec: function() { - $scope.$apply(function(){ + exec: function () { + $scope.$apply(function () { openPartialOverlay(); }); }, readOnly: true }, - { + { name: 'insertDictionary', bindKey: 'Alt-Shift-D', - exec: function() { - $scope.$apply(function(){ + exec: function () { + $scope.$apply(function () { openDictionaryItemOverlay(); }); }, @@ -280,8 +280,8 @@ { name: 'insertUmbracoMacro', bindKey: 'Alt-Shift-M', - exec: function() { - $scope.$apply(function(){ + exec: function () { + $scope.$apply(function () { openMacroOverlay(); }); }, @@ -290,8 +290,8 @@ { name: 'insertQuery', bindKey: 'Alt-Shift-Q', - exec: function() { - $scope.$apply(function(){ + exec: function () { + $scope.$apply(function () { openQueryBuilderOverlay(); }); }, @@ -300,8 +300,8 @@ { name: 'insertSection', bindKey: 'Alt-Shift-S', - exec: function() { - $scope.$apply(function(){ + exec: function () { + $scope.$apply(function () { openSectionsOverlay(); }); }, @@ -310,21 +310,21 @@ { name: 'chooseMasterTemplate', bindKey: 'Alt-Shift-T', - exec: function() { - $scope.$apply(function(){ + exec: function () { + $scope.$apply(function () { openMasterTemplateOverlay(); }); }, readOnly: true } - + ]); - + // initial cursor placement // Keep cursor in name field if we are create a new template // else set the cursor at the bottom of the code editor - if(!create) { - $timeout(function(){ + if (!create) { + $timeout(function () { vm.editor.navigateFileEnd(); vm.editor.focus(); persistCurrentLocation(); @@ -335,9 +335,9 @@ vm.editor.on("blur", persistCurrentLocation); vm.editor.on("focus", persistCurrentLocation); vm.editor.on("change", changeAceEditor); - } + } } - + }; vm.openPageFieldOverlay = openPageFieldOverlay; @@ -363,15 +363,15 @@ partial: true, umbracoField: true }, - submit: function(model) { - switch(model.insert.type) { + submit: function (model) { + switch (model.insert.type) { case "macro": var macroObject = macroService.collectValueData(model.insert.selectedMacro, model.insert.macroParams, "Mvc"); insert(macroObject.syntax); break; case "dictionary": - var code = templateHelper.getInsertDictionarySnippet(model.insert.node.name); - insert(code); + var code = templateHelper.getInsertDictionarySnippet(model.insert.node.name); + insert(code); break; case "partial": var code = templateHelper.getInsertPartialSnippet(model.insert.node.parentId, model.insert.node.name); @@ -383,7 +383,7 @@ } editorService.close(); }, - close: function(oldModel) { + close: function (oldModel) { // close the dialog editorService.close(); // focus editor @@ -401,7 +401,7 @@ insert(macroObject.syntax); editorService.close(); }, - close: function() { + close: function () { editorService.close(); vm.editor.focus(); } @@ -431,7 +431,7 @@ "emptyStates_emptyDictionaryTree" ]; - localizationService.localizeMany(labelKeys).then(function(values){ + localizationService.localizeMany(labelKeys).then(function (values) { var title = values[0]; var emptyStateMessage = values[1]; @@ -442,7 +442,7 @@ multiPicker: false, title: title, emptyStateMessage: emptyStateMessage, - select: function(node){ + select: function (node) { var code = templateHelper.getInsertDictionarySnippet(node.name); insert(code); editorService.close(); @@ -463,22 +463,22 @@ function openPartialOverlay() { - localizationService.localize("template_insertPartialView").then(function(value){ + localizationService.localize("template_insertPartialView").then(function (value) { var title = value; var partialItem = { - section: "settings", + section: "settings", treeAlias: "partialViews", entityType: "partialView", multiPicker: false, title: title, - filter: function(i) { - if(i.name.indexOf(".cshtml") === -1 && i.name.indexOf(".vbhtml") === -1) { + filter: function (i) { + if (i.name.indexOf(".cshtml") === -1 && i.name.indexOf(".vbhtml") === -1) { return true; } }, filterCssClass: "not-allowed", - select: function(node){ + select: function (node) { var code = templateHelper.getInsertPartialSnippet(node.parentId, node.name); insert(code); editorService.close(); @@ -505,7 +505,7 @@ close: function () { editorService.close(); // focus editor - vm.editor.focus(); + vm.editor.focus(); } }; editorService.queryBuilder(queryBuilder); @@ -515,7 +515,7 @@ function openSectionsOverlay() { var templateSections = { isMaster: vm.template.isMasterTemplate, - submit: function(model) { + submit: function (model) { if (model.insertType === 'renderBody') { var code = templateHelper.getRenderBodySnippet(); @@ -535,7 +535,7 @@ editorService.close(); }, - close: function(model) { + close: function (model) { editorService.close(); vm.editor.focus(); } @@ -559,12 +559,12 @@ } }); - localizationService.localize("template_mastertemplate").then(function(value){ + localizationService.localize("template_mastertemplate").then(function (value) { var title = value; var masterTemplate = { title: title, availableItems: availableMasterTemplates, - submit: function(model) { + submit: function (model) { var template = model.selectedItem; if (template && template.alias) { vm.template.masterTemplateAlias = template.alias; @@ -575,7 +575,7 @@ } editorService.close(); }, - close: function(oldModel) { + close: function (oldModel) { // close dialog editorService.close(); // focus editor @@ -596,14 +596,14 @@ vm.template.masterTemplateAlias = null; setLayout(null); } - + } function getMasterTemplateName(masterTemplateAlias, templates) { - if(masterTemplateAlias) { + if (masterTemplateAlias) { var templateName = ""; - angular.forEach(templates, function(template){ - if(template.alias === masterTemplateAlias) { + angular.forEach(templates, function (template) { + if (template.alias === masterTemplateAlias) { templateName = template.name; } }); @@ -620,8 +620,8 @@ } - function setLayout(templatePath){ - + function setLayout(templatePath) { + var templateCode = vm.editor.getValue(); var newValue = templatePath; var layoutDefRegex = new RegExp("(@{[\\s\\S]*?Layout\\s*?=\\s*?)(\"[^\"]*?\"|null)(;[\\s\\S]*?})", "gi"); @@ -645,7 +645,7 @@ vm.editor.setValue(templateCode); vm.editor.clearSelection(); vm.editor.navigateFileStart(); - + vm.editor.focus(); // set form state to $dirty setFormState("dirty"); @@ -668,7 +668,7 @@ str = str.replace("{0}", selectedContent); vm.editor.insert(str); vm.editor.focus(); - + // set form state to $dirty setFormState("dirty"); } @@ -682,14 +682,14 @@ } function setFormState(state) { - + // get the current form var currentForm = angularHelper.getCurrentForm($scope); // set state - if(state === "dirty") { + if (state === "dirty") { currentForm.$setDirty(); - } else if(state === "pristine") { + } else if (state === "pristine") { currentForm.$setPristine(); } } @@ -699,18 +699,18 @@ } function submit() { - if($scope.model.submit) { + if ($scope.model.submit) { $scope.model.template = vm.template; $scope.model.submit($scope.model); } } function close() { - if($scope.model.close) { + if ($scope.model.close) { $scope.model.close(); } } - + vm.init(); } From 1383ab0e746540c397c75d5498ba4c5970b8f90a Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:49:27 +0200 Subject: [PATCH 08/15] Refactor angular.element to jQuery and remove unused variable --- .../templatetree/templatetree.controller.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.controller.js index 3fdeb8d3c0ea..4edd9c9837ad 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.controller.js @@ -2,13 +2,12 @@ "use strict"; function TemplatesTreeController($scope) { - - var vm = this; - var eventElement = angular.element($scope.model.currentStep.eventElement); - + + var eventElement = $($scope.model.currentStep.eventElement); + function onInit() { // check if tree is already open - if it is - go to next step - if(eventElement.hasClass("icon-navigation-down")) { + if (eventElement.hasClass("icon-navigation-down")) { $scope.model.nextStep(); } } From b8f6c6e39cc79d66a7d793acf7323506f0f82c1a Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:52:06 +0200 Subject: [PATCH 09/15] Remove unused element, which holds an angular.element() reference --- .../uploadimages/uploadimages.controller.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.controller.js index 0989076e9523..08f075151060 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.controller.js @@ -2,12 +2,11 @@ "use strict"; function UploadImagesController($scope, editorState, mediaResource) { - + var vm = this; - var element = angular.element($scope.model.currentStep.element); vm.error = false; - + vm.initNextStep = initNextStep; function initNextStep() { @@ -23,7 +22,7 @@ var children = data; - if(children.items && children.items.length > 0) { + if (children.items && children.items.length > 0) { $scope.model.nextStep(); } else { vm.error = true; From f3585cecd339d97f64ebb5055a686c9b797d632b Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 22:58:41 +0200 Subject: [PATCH 10/15] Refactor from angular.element to jQuery and removing unused params from various methods --- .../mediapicker/mediapicker.controller.js | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js index 62b675b28b6c..b4eeb83448c5 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js @@ -1,13 +1,13 @@ //used for the media picker dialog angular.module("umbraco") .controller("Umbraco.Editors.MediaPickerController", - function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService, editorService, umbSessionStorage) { + function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService, editorService, umbSessionStorage) { var vm = this; - + vm.submit = submit; vm.close = close; - + vm.toggle = toggle; vm.upload = upload; vm.dragLeave = dragLeave; @@ -26,7 +26,7 @@ angular.module("umbraco") vm.shouldShowUrl = shouldShowUrl; var dialogOptions = $scope.model; - + $scope.disableFolderSelect = (dialogOptions.disableFolderSelect && dialogOptions.disableFolderSelect !== "0") ? true : false; $scope.disableFocalPoint = (dialogOptions.disableFocalPoint && dialogOptions.disableFocalPoint !== "0") ? true : false; $scope.onlyImages = (dialogOptions.onlyImages && dialogOptions.onlyImages !== "0") ? true : false; @@ -133,21 +133,21 @@ angular.module("umbraco") // media object so we need to look it up var id = $scope.target.udi ? $scope.target.udi : $scope.target.id; var altText = $scope.target.altText; - + // ID of a UDI or legacy int ID still could be null/undefinied here // As user may dragged in an image that has not been saved to media section yet if (id) { entityResource.getById(id, "Media") - .then(function (node) { - $scope.target = node; - if (ensureWithinStartNode(node)) { - selectMedia(node); - $scope.target.url = mediaHelper.resolveFileFromEntity(node); - $scope.target.thumbnail = mediaHelper.resolveFileFromEntity(node, true); - $scope.target.altText = altText; - openDetailsDialog(); - } - }, gotoStartNode); + .then(function (node) { + $scope.target = node; + if (ensureWithinStartNode(node)) { + selectMedia(node); + $scope.target.url = mediaHelper.resolveFileFromEntity(node); + $scope.target.thumbnail = mediaHelper.resolveFileFromEntity(node, true); + $scope.target.altText = altText; + openDetailsDialog(); + } + }, gotoStartNode); } else { // No ID set - then this is going to be a tmpimg that has not been uploaded // User editing this will want to be changing the ALT text @@ -156,15 +156,15 @@ angular.module("umbraco") } } - function upload(v) { - angular.element(".umb-file-dropzone .file-select").trigger("click"); + function upload() { + $(".umb-file-dropzone .file-select").trigger("click"); } - function dragLeave(el, event) { + function dragLeave() { $scope.activeDrag = false; } - function dragEnter(el, event) { + function dragEnter() { $scope.activeDrag = true; } @@ -240,16 +240,16 @@ angular.module("umbraco") } } else { if ($scope.showDetails) { - + $scope.target = media; - + // handle both entity and full media object if (media.image) { $scope.target.url = media.image; } else { $scope.target.url = mediaHelper.resolveFile(media); } - + openDetailsDialog(); } else { selectMedia(media); @@ -301,7 +301,7 @@ angular.module("umbraco") $timeout(function () { if ($scope.multiPicker) { var images = _.rest($scope.images, $scope.images.length - files.length); - _.each(images, function(image) { + _.each(images, function (image) { selectMedia(image); }); } else { @@ -341,7 +341,7 @@ angular.module("umbraco") return false; } - function gotoStartNode(err) { + function gotoStartNode() { gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" }); } @@ -373,7 +373,7 @@ angular.module("umbraco") if (vm.searchOptions.filter) { searchMedia(); } else { - + // reset pagination vm.searchOptions = { pageNumber: 1, @@ -383,7 +383,7 @@ angular.module("umbraco") filter: '', dataTypeKey: dataTypeKey }; - + getChildren($scope.currentFolder.id); } }); From bfa1177c5c1e7c8fe81e44a5efeaa8f156efe00b Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 23:01:31 +0200 Subject: [PATCH 11/15] Refactor selector to pure jQuery --- .../foldername/foldername.controller.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.controller.js index ebda50481d6f..bad9718251d1 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.controller.js @@ -2,16 +2,16 @@ "use strict"; function FolderNameController($scope) { - + var vm = this; - var element = angular.element($scope.model.currentStep.element); + var element = $($scope.model.currentStep.element); vm.error = false; - + vm.initNextStep = initNextStep; function initNextStep() { - if(element.val().toLowerCase() === "my images") { + if (element.val().toLowerCase() === "my images") { $scope.model.nextStep(); } else { vm.error = true; From f854d89d2e1e51bf6e6556c956360465d5e7f201 Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 23:11:21 +0200 Subject: [PATCH 12/15] Replace angular.element with jQuery --- .../application/umbsearch.directive.js | 28 +- .../components/umbdatetimepicker.directive.js | 268 +++++++++--------- .../nodename/nodename.controller.js | 8 +- .../doctypename/doctypename.controller.js | 8 +- .../propertyname/propertyname.controller.js | 6 +- .../tabname/tabname.controller.js | 6 +- 6 files changed, 162 insertions(+), 162 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js index 8434a96ba504..e03e63b68f1a 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js @@ -12,7 +12,7 @@ onClose: "&" } }; - + function umbSearchController($timeout, backdropService, searchService, focusService) { var vm = this; @@ -25,7 +25,7 @@ vm.handleKeyDown = handleKeyDown; vm.closeSearch = closeSearch; vm.focusSearch = focusSearch; - + //we need to capture the focus before this element is initialized. vm.focusBeforeOpening = focusService.getLastKnownFocus(); @@ -66,8 +66,8 @@ */ function focusSearch() { vm.searchHasFocus = false; - $timeout(function(){ - vm.searchHasFocus = true; + $timeout(function () { + vm.searchHasFocus = true; }); } @@ -76,14 +76,14 @@ * @param {object} event */ function handleKeyDown(event) { - + // esc - if(event.keyCode === 27) { + if (event.keyCode === 27) { event.stopPropagation(); event.preventDefault(); - + closeSearch(); - return; + return; } // up/down (navigate search results) @@ -132,7 +132,7 @@ } $timeout(function () { - var resultElementLink = angular.element(".umb-search-item[active-result='true'] .umb-search-result__link"); + var resultElementLink = $(".umb-search-item[active-result='true'] .umb-search-result__link"); resultElementLink[0].focus(); }); } @@ -142,10 +142,10 @@ * Used to proxy a callback */ function closeSearch() { - if(vm.focusBeforeOpening) { + if (vm.focusBeforeOpening) { vm.focusBeforeOpening.focus(); } - if(vm.onClose) { + if (vm.onClose) { vm.onClose(); } } @@ -155,9 +155,9 @@ * @param {string} searchQuery */ function search(searchQuery) { - if(searchQuery.length > 0) { - var search = {"term": searchQuery}; - searchService.searchAll(search).then(function(result){ + if (searchQuery.length > 0) { + var search = { "term": searchQuery }; + searchService.searchAll(search).then(function (result) { //result is a dictionary of group Title and it's results var filtered = {}; _.each(result, function (value, key) { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js index 5433f73fa6fd..0498b819635d 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js @@ -67,37 +67,37 @@ Use this directive to render a date time picker @param {callback} onDayCreate (callback): Take full control of every date cell with theonDayCreate()hook. **/ -(function() { - 'use strict'; - - var umbDateTimePicker = { - template: '' + - '' + - '
' + - '', - controller: umbDateTimePickerCtrl, - transclude: true, - bindings: { - ngModel: '<', - options: '<', - onSetup: '&?', - onChange: '&?', - onOpen: '&?', - onClose: '&?', - onMonthChange: '&?', - onYearChange: '&?', - onReady: '&?', - onValueUpdate: '&?', - onDayCreate: '&?' - } +(function () { + 'use strict'; + + var umbDateTimePicker = { + template: '' + + '' + + '
' + + '', + controller: umbDateTimePickerCtrl, + transclude: true, + bindings: { + ngModel: '<', + options: '<', + onSetup: '&?', + onChange: '&?', + onOpen: '&?', + onClose: '&?', + onMonthChange: '&?', + onYearChange: '&?', + onReady: '&?', + onValueUpdate: '&?', + onDayCreate: '&?' + } }; - + function umbDateTimePickerCtrl($element, $timeout, $scope, assetsService, userService) { var ctrl = this; var userLocale = null; - ctrl.$onInit = function() { + ctrl.$onInit = function () { // load css file for the date picker assetsService.loadCss('lib/flatpickr/flatpickr.css', $scope).then(function () { @@ -113,27 +113,27 @@ Use this directive to render a date time picker }); }); - }; + }; - function grabElementAndRunFlatpickr() { - $timeout(function() { - var transcludeEl = $element.find('ng-transclude')[0]; - var element = transcludeEl.children[0]; + function grabElementAndRunFlatpickr() { + $timeout(function () { + var transcludeEl = $element.find('ng-transclude')[0]; + var element = transcludeEl.children[0]; - setDatepicker(element); - }, 0, true); - } + setDatepicker(element); + }, 0, true); + } - function setDatepicker(element) { - var fpLib = flatpickr ? flatpickr : FlatpickrInstance; + function setDatepicker(element) { + var fpLib = flatpickr ? flatpickr : FlatpickrInstance; - if (!fpLib) { - return console.warn('Unable to find any flatpickr installation'); - } + if (!fpLib) { + return console.warn('Unable to find any flatpickr installation'); + } var fpInstance; - setUpCallbacks(); + setUpCallbacks(); if (!ctrl.options.locale) { ctrl.options.locale = userLocale; @@ -149,101 +149,101 @@ Use this directive to render a date time picker }; fpInstance = new fpLib(element, ctrl.options); - - if (ctrl.onSetup) { - ctrl.onSetup({ - fpItem: fpInstance - }); - } - - // If has ngModel set the date - if (ctrl.ngModel) { - fpInstance.setDate(ctrl.ngModel); - } - - // destroy the flatpickr instance when the dom element is removed - angular.element(element).on('$destroy', function() { - fpInstance.destroy(); - }); - - // Refresh the scope - $scope.$applyAsync(); - } - - function setUpCallbacks() { - // bind hook for onChange - if(ctrl.options && ctrl.onChange) { - ctrl.options.onChange = function(selectedDates, dateStr, instance) { - $timeout(function() { - ctrl.onChange({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); - }); - }; - } - - // bind hook for onOpen - if(ctrl.options && ctrl.onOpen) { - ctrl.options.onOpen = function(selectedDates, dateStr, instance) { - $timeout(function() { - ctrl.onOpen({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); - }); - }; - } - - // bind hook for onOpen - if(ctrl.options && ctrl.onClose) { - ctrl.options.onClose = function(selectedDates, dateStr, instance) { - $timeout(function() { - ctrl.onClose({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); - }); - }; - } - - // bind hook for onMonthChange - if(ctrl.options && ctrl.onMonthChange) { - ctrl.options.onMonthChange = function(selectedDates, dateStr, instance) { - $timeout(function() { - ctrl.onMonthChange({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); - }); - }; - } - - // bind hook for onYearChange - if(ctrl.options && ctrl.onYearChange) { - ctrl.options.onYearChange = function(selectedDates, dateStr, instance) { - $timeout(function() { - ctrl.onYearChange({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); - }); - }; - } - - // bind hook for onReady - if(ctrl.options && ctrl.onReady) { - ctrl.options.onReady = function(selectedDates, dateStr, instance) { - $timeout(function() { - ctrl.onReady({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); - }); - }; - } - - // bind hook for onValueUpdate - if(ctrl.onValueUpdate) { - ctrl.options.onValueUpdate = function(selectedDates, dateStr, instance) { - $timeout(function() { - ctrl.onValueUpdate({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); - }); - }; - } - - // bind hook for onDayCreate - if(ctrl.onDayCreate) { - ctrl.options.onDayCreate = function(selectedDates, dateStr, instance) { - $timeout(function() { - ctrl.onDayCreate({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); - }); - }; - } - - } + + if (ctrl.onSetup) { + ctrl.onSetup({ + fpItem: fpInstance + }); + } + + // If has ngModel set the date + if (ctrl.ngModel) { + fpInstance.setDate(ctrl.ngModel); + } + + // destroy the flatpickr instance when the dom element is removed + $(element).on('$destroy', function () { + fpInstance.destroy(); + }); + + // Refresh the scope + $scope.$applyAsync(); + } + + function setUpCallbacks() { + // bind hook for onChange + if (ctrl.options && ctrl.onChange) { + ctrl.options.onChange = function (selectedDates, dateStr, instance) { + $timeout(function () { + ctrl.onChange({ selectedDates: selectedDates, dateStr: dateStr, instance: instance }); + }); + }; + } + + // bind hook for onOpen + if (ctrl.options && ctrl.onOpen) { + ctrl.options.onOpen = function (selectedDates, dateStr, instance) { + $timeout(function () { + ctrl.onOpen({ selectedDates: selectedDates, dateStr: dateStr, instance: instance }); + }); + }; + } + + // bind hook for onOpen + if (ctrl.options && ctrl.onClose) { + ctrl.options.onClose = function (selectedDates, dateStr, instance) { + $timeout(function () { + ctrl.onClose({ selectedDates: selectedDates, dateStr: dateStr, instance: instance }); + }); + }; + } + + // bind hook for onMonthChange + if (ctrl.options && ctrl.onMonthChange) { + ctrl.options.onMonthChange = function (selectedDates, dateStr, instance) { + $timeout(function () { + ctrl.onMonthChange({ selectedDates: selectedDates, dateStr: dateStr, instance: instance }); + }); + }; + } + + // bind hook for onYearChange + if (ctrl.options && ctrl.onYearChange) { + ctrl.options.onYearChange = function (selectedDates, dateStr, instance) { + $timeout(function () { + ctrl.onYearChange({ selectedDates: selectedDates, dateStr: dateStr, instance: instance }); + }); + }; + } + + // bind hook for onReady + if (ctrl.options && ctrl.onReady) { + ctrl.options.onReady = function (selectedDates, dateStr, instance) { + $timeout(function () { + ctrl.onReady({ selectedDates: selectedDates, dateStr: dateStr, instance: instance }); + }); + }; + } + + // bind hook for onValueUpdate + if (ctrl.onValueUpdate) { + ctrl.options.onValueUpdate = function (selectedDates, dateStr, instance) { + $timeout(function () { + ctrl.onValueUpdate({ selectedDates: selectedDates, dateStr: dateStr, instance: instance }); + }); + }; + } + + // bind hook for onDayCreate + if (ctrl.onDayCreate) { + ctrl.options.onDayCreate = function (selectedDates, dateStr, instance) { + $timeout(function () { + ctrl.onDayCreate({ selectedDates: selectedDates, dateStr: dateStr, instance: instance }); + }); + }; + } + + } } // umbFlatpickr (umb-flatpickr) is deprecated, but we keep it for backwards compatibility diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.controller.js index bdd7eb65d04a..eca0c4582b3f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.controller.js @@ -2,16 +2,16 @@ "use strict"; function NodeNameController($scope) { - + var vm = this; - var element = angular.element($scope.model.currentStep.element); + var element = $($scope.model.currentStep.element); vm.error = false; - + vm.initNextStep = initNextStep; function initNextStep() { - if(element.val().toLowerCase() === 'home') { + if (element.val().toLowerCase() === 'home') { $scope.model.nextStep(); } else { vm.error = true; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.controller.js index fee52eb5067f..ed5a0b93e3f5 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.controller.js @@ -2,16 +2,16 @@ "use strict"; function DocTypeNameController($scope) { - + var vm = this; - var element = angular.element($scope.model.currentStep.element); + var element = $($scope.model.currentStep.element); vm.error = false; - + vm.initNextStep = initNextStep; function initNextStep() { - if(element.val().toLowerCase() === 'home page') { + if (element.val().toLowerCase() === 'home page') { $scope.model.nextStep(); } else { vm.error = true; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.controller.js index 1ebe8789282d..5ceae2f2f8cb 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.controller.js @@ -2,12 +2,12 @@ "use strict"; function PropertyNameController($scope) { - + var vm = this; - var element = angular.element($scope.model.currentStep.element); + var element = $($scope.model.currentStep.element); vm.error = false; - + vm.initNextStep = initNextStep; function initNextStep() { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.controller.js index c477204cb77a..c134e50a348d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.controller.js @@ -2,12 +2,12 @@ "use strict"; function TabNameController($scope) { - + var vm = this; - var element = angular.element($scope.model.currentStep.element); + var element = $($scope.model.currentStep.element); vm.error = false; - + vm.initNextStep = initNextStep; function initNextStep() { From a963ee01c38331b1ac395264f99e40ed3beb8044 Mon Sep 17 00:00:00 2001 From: BatJan Date: Sat, 11 Apr 2020 23:11:38 +0200 Subject: [PATCH 13/15] Remove angular.element - Not needed --- .../components/forms/hexbackgroundcolor.directive.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js index 6780ad8e582b..eff05c94ff54 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js @@ -7,13 +7,12 @@ * a color will not be set. **/ function hexBgColor() { - return { + return { restrict: "A", link: function (scope, element, attr, formCtrl) { function setBackgroundColor(color) { - // note: can't use element.css(), it doesn't support hexa background colors - angular.element(element)[0].style.backgroundColor = "#" + color; + element[0].style.backgroundColor = "#" + color; } // Only add inline hex background color if defined and not "true". @@ -24,7 +23,7 @@ function hexBgColor() { // Set the orig based on the attribute if there is one. origColor = attr.hexBgOrig; } - + attr.$observe("hexBgColor", function (newVal) { if (newVal) { if (!origColor) { From 62b799c333f272acada3b66016810f43baacdad9 Mon Sep 17 00:00:00 2001 From: BatJan Date: Sun, 12 Apr 2020 00:11:36 +0200 Subject: [PATCH 14/15] Remove angular.element - Not neededReplace angular.element with jQuery --- .../directives/util/autoscale.directive.js | 4 +- .../src/preview/preview.controller.js | 38 +++++++++---------- .../test/lib/angular/angular-mocks.js | 38 +++++++++---------- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/autoscale.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/autoscale.directive.js index 029a4e420f6d..023692be864b 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/autoscale.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/autoscale.directive.js @@ -21,7 +21,7 @@ angular.module("umbraco.directives") var totalOffset = 0; var offsety = parseInt(attrs.autoScale, 10); - var window = angular.element($window); + var window = $($window); if (offsety !== undefined) { totalOffset += offsety; } @@ -34,7 +34,7 @@ angular.module("umbraco.directives") el.height(window.height() - (el.offset().top + totalOffset)); } - var resizeCallback = function() { + var resizeCallback = function () { setElementSize(); }; diff --git a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js index dc40338d01a7..5ff8dd3633c5 100644 --- a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js @@ -6,8 +6,8 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.services']) .controller("previewController", function ($scope, $window, $location) { - - $scope.currentCulture = {iso:'', title:'...', icon:'icon-loading'} + + $scope.currentCulture = { iso: '', title: '...', icon: 'icon-loading' } var cultures = []; $scope.tabbingActive = false; @@ -21,7 +21,7 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi window.addEventListener('mousedown', disableTabbingActive); } } - + function disableTabbingActive(evt) { $scope.tabbingActive = false; $scope.$digest(); @@ -113,10 +113,10 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi $scope.sizeOpen = false; $scope.cultureOpen = false; - $scope.toggleSizeOpen = function() { + $scope.toggleSizeOpen = function () { $scope.sizeOpen = toggleMenu($scope.sizeOpen); } - $scope.toggleCultureOpen = function() { + $scope.toggleCultureOpen = function () { $scope.cultureOpen = toggleMenu($scope.cultureOpen); } @@ -132,8 +132,8 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi $scope.sizeOpen = false; $scope.cultureOpen = false; } - - $scope.windowClickHandler = function() { + + $scope.windowClickHandler = function () { closeOthers(); } function windowBlurHandler() { @@ -141,16 +141,16 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi $scope.$digest(); } - var win = angular.element($window); + var win = $($window); win.on("blur", windowBlurHandler); - + $scope.$on("$destroy", function () { - win.off("blur", handleBlwindowBlurHandlerur ); + win.off("blur", handleBlwindowBlurHandlerur); }); - - function setPageUrl(){ + + function setPageUrl() { $scope.pageId = $location.search().id || getParameterByName("id"); var culture = $location.search().culture || getParameterByName("culture"); @@ -204,27 +204,27 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi /* Change culture */ /*****************************************************************************/ $scope.changeCulture = function (iso) { - if($location.search().culture !== iso) { + if ($location.search().culture !== iso) { $scope.frameLoaded = false; $scope.currentCultureIso = iso; $location.search("culture", iso); setPageUrl(); } }; - $scope.registerCulture = function(iso, title, isDefault) { - var cultureObject = {iso: iso, title: title, isDefault: isDefault}; + $scope.registerCulture = function (iso, title, isDefault) { + var cultureObject = { iso: iso, title: title, isDefault: isDefault }; cultures.push(cultureObject); } - $scope.$watch("currentCultureIso", function(oldIso, newIso) { + $scope.$watch("currentCultureIso", function (oldIso, newIso) { // if no culture is selected, we will pick the default one: if ($scope.currentCultureIso === null) { - $scope.currentCulture = cultures.find(function(culture) { + $scope.currentCulture = cultures.find(function (culture) { return culture.isDefault === true; }) return; } - $scope.currentCulture = cultures.find(function(culture) { + $scope.currentCulture = cultures.find(function (culture) { return culture.iso === $scope.currentCultureIso; }) }); @@ -252,7 +252,7 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi }); } - function hideUmbracoPreviewBadge (iframe) { + function hideUmbracoPreviewBadge(iframe) { if (iframe && iframe.contentDocument && iframe.contentDocument.getElementById("umbracoPreviewBadge")) { iframe.contentDocument.getElementById("umbracoPreviewBadge").style.display = "none"; } diff --git a/src/Umbraco.Web.UI.Client/test/lib/angular/angular-mocks.js b/src/Umbraco.Web.UI.Client/test/lib/angular/angular-mocks.js index 965fcdce71b1..2eed674cb9e9 100644 --- a/src/Umbraco.Web.UI.Client/test/lib/angular/angular-mocks.js +++ b/src/Umbraco.Web.UI.Client/test/lib/angular/angular-mocks.js @@ -51,12 +51,12 @@ angular.mock.$Browser = function () { self.onUrlChange = function (listener) { self.pollFns.push( - function () { - if (self.$$lastUrl != self.$$url) { - self.$$lastUrl = self.$$url; - listener(self.$$url); - } - } + function () { + if (self.$$lastUrl != self.$$url) { + self.$$lastUrl = self.$$url; + listener(self.$$url); + } + } ); return listener; @@ -397,7 +397,7 @@ angular.mock.$LogProvider = function () { }); if (errors.length) { errors.unshift("Expected $log to be empty! Either a message was logged unexpectedly, or an expected " + - "log message was not checked and removed:"); + "log message was not checked and removed:"); errors.push(''); throw new Error(errors.join('\n---------\n')); } @@ -581,12 +581,12 @@ angular.mock.$LogProvider = function () { if (self.toISOString) { self.toISOString = function () { return padNumber(self.origDate.getUTCFullYear(), 4) + '-' + - padNumber(self.origDate.getUTCMonth() + 1, 2) + '-' + - padNumber(self.origDate.getUTCDate(), 2) + 'T' + - padNumber(self.origDate.getUTCHours(), 2) + ':' + - padNumber(self.origDate.getUTCMinutes(), 2) + ':' + - padNumber(self.origDate.getUTCSeconds(), 2) + '.' + - padNumber(self.origDate.getUTCMilliseconds(), 3) + 'Z' + padNumber(self.origDate.getUTCMonth() + 1, 2) + '-' + + padNumber(self.origDate.getUTCDate(), 2) + 'T' + + padNumber(self.origDate.getUTCHours(), 2) + ':' + + padNumber(self.origDate.getUTCMinutes(), 2) + ':' + + padNumber(self.origDate.getUTCSeconds(), 2) + '.' + + padNumber(self.origDate.getUTCMilliseconds(), 3) + 'Z' } } @@ -686,10 +686,10 @@ angular.mock.dump = function (object) { var out; if (angular.isElement(object)) { - object = angular.element(object); - out = angular.element('
'); + object = $(object); + out = $('
'); angular.forEach(object, function (element) { - out.append(angular.element(element).clone()); + out.append($(element).clone()); }); out = out.html(); } else if (Utilities.isArray(object)) { @@ -1004,7 +1004,7 @@ function createHttpBackendMock($rootScope, $delegate, $browser) { throw wasExpected ? Error('No response defined !') : Error('Unexpected request: ' + method + ' ' + url + '\n' + - (expectation ? 'Expected ' + expectation : 'No more request expected')); + (expectation ? 'Expected ' + expectation : 'No more request expected')); } /** @@ -1499,7 +1499,7 @@ angular.mock.$TimeoutDecorator = function ($delegate, $browser) { */ angular.mock.$RootElementProvider = function () { this.$get = function () { - return angular.element('
'); + return $('
'); } }; @@ -1710,7 +1710,7 @@ angular.mock.clearDataCache = function () { if (cache.hasOwnProperty(key)) { var handle = cache[key].handle; - handle && angular.element(handle.elem).unbind(); + handle && $(handle.elem).unbind(); delete cache[key]; } } From c3101e5e1e2cbbce75a87b60b3ecb85627462c65 Mon Sep 17 00:00:00 2001 From: BatJan Date: Sun, 12 Apr 2020 00:16:20 +0200 Subject: [PATCH 15/15] Replace angular.element with jQuery --- .../directives/components/umbpasswordtoggle.directive.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpasswordtoggle.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpasswordtoggle.directive.js index aac1b8dac149..010387c1d8fd 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpasswordtoggle.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpasswordtoggle.directive.js @@ -20,9 +20,9 @@ var directive = { restrict: 'A', scope: {}, - link: function(scope, elem, attrs) { + link: function (scope, elem, attrs) { scope.tgl = function () { elem.attr("type", (elem.attr("type") === "text" ? "password" : "text")); } - var lnk = angular.element("Toggle"); + var lnk = $("Toggle"); $compile(lnk)(scope); elem.wrap("
").after(lnk); }