Replace instances of angular.element() (#7951)

This commit is contained in:
Jan Skovgaard
2020-04-14 10:28:16 +02:00
committed by GitHub
parent bd26cb36ec
commit 90890cea33
20 changed files with 340 additions and 343 deletions

View File

@@ -7,8 +7,8 @@
var events = []; var events = [];
scope.clickBackdrop = function(event) { scope.clickBackdrop = function (event) {
if(scope.disableEventsOnClick === true) { if (scope.disableEventsOnClick === true) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} }
@@ -22,16 +22,16 @@
} }
function setHighlight () { function setHighlight() {
scope.loading = true; scope.loading = true;
$timeout(function () { $timeout(function () {
// The element to highlight // 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 offset = highlightElement.offset();
var width = highlightElement.outerWidth(); var width = highlightElement.outerWidth();
@@ -48,7 +48,7 @@
var rectRight = el.find(".umb-backdrop__rect--right"); var rectRight = el.find(".umb-backdrop__rect--right");
var rectBottom = el.find(".umb-backdrop__rect--bottom"); var rectBottom = el.find(".umb-backdrop__rect--bottom");
var rectLeft = el.find(".umb-backdrop__rect--left"); var rectLeft = el.find(".umb-backdrop__rect--left");
// Add the css // Add the css
scope.rectTopCss = { "height": topDistance, "left": leftDistance + "px", opacity: scope.backdropOpacity }; scope.rectTopCss = { "height": topDistance, "left": leftDistance + "px", opacity: scope.backdropOpacity };
scope.rectRightCss = { "left": leftAndWidth + "px", "top": topDistance + "px", "height": height, 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 }; scope.rectLeftCss = { "width": leftDistance, opacity: scope.backdropOpacity };
// Prevent interaction in the highlighted area // Prevent interaction in the highlighted area
if(scope.highlightPreventClick) { if (scope.highlightPreventClick) {
var preventClickElement = el.find(".umb-backdrop__highlight-prevent-click"); var preventClickElement = el.find(".umb-backdrop__highlight-prevent-click");
preventClickElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top }); 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) { events.push(scope.$watch("highlightElement", function (newValue, oldValue) {
if(!newValue) {return;} if (!newValue) { return; }
if(newValue === oldValue) {return;} if (newValue === oldValue) { return; }
setHighlight(); setHighlight();
})); }));

View File

@@ -12,7 +12,7 @@
onClose: "&" onClose: "&"
} }
}; };
function umbSearchController($timeout, backdropService, searchService, focusService) { function umbSearchController($timeout, backdropService, searchService, focusService) {
var vm = this; var vm = this;
@@ -25,7 +25,7 @@
vm.handleKeyDown = handleKeyDown; vm.handleKeyDown = handleKeyDown;
vm.closeSearch = closeSearch; vm.closeSearch = closeSearch;
vm.focusSearch = focusSearch; vm.focusSearch = focusSearch;
//we need to capture the focus before this element is initialized. //we need to capture the focus before this element is initialized.
vm.focusBeforeOpening = focusService.getLastKnownFocus(); vm.focusBeforeOpening = focusService.getLastKnownFocus();
@@ -66,8 +66,8 @@
*/ */
function focusSearch() { function focusSearch() {
vm.searchHasFocus = false; vm.searchHasFocus = false;
$timeout(function(){ $timeout(function () {
vm.searchHasFocus = true; vm.searchHasFocus = true;
}); });
} }
@@ -76,14 +76,14 @@
* @param {object} event * @param {object} event
*/ */
function handleKeyDown(event) { function handleKeyDown(event) {
// esc // esc
if(event.keyCode === 27) { if (event.keyCode === 27) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
closeSearch(); closeSearch();
return; return;
} }
// up/down (navigate search results) // up/down (navigate search results)
@@ -132,7 +132,7 @@
} }
$timeout(function () { $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(); resultElementLink[0].focus();
}); });
} }
@@ -142,10 +142,10 @@
* Used to proxy a callback * Used to proxy a callback
*/ */
function closeSearch() { function closeSearch() {
if(vm.focusBeforeOpening) { if (vm.focusBeforeOpening) {
vm.focusBeforeOpening.focus(); vm.focusBeforeOpening.focus();
} }
if(vm.onClose) { if (vm.onClose) {
vm.onClose(); vm.onClose();
} }
} }
@@ -155,9 +155,9 @@
* @param {string} searchQuery * @param {string} searchQuery
*/ */
function search(searchQuery) { function search(searchQuery) {
if(searchQuery.length > 0) { if (searchQuery.length > 0) {
var search = {"term": searchQuery}; var search = { "term": searchQuery };
searchService.searchAll(search).then(function(result){ searchService.searchAll(search).then(function (result) {
//result is a dictionary of group Title and it's results //result is a dictionary of group Title and it's results
var filtered = {}; var filtered = {};
_.each(result, function (value, key) { _.each(result, function (value, key) {

View File

@@ -198,27 +198,27 @@ In the following example you see how to run some custom logic before a step goes
scope.loadingStep = false; scope.loadingStep = false;
scope.elementNotFound = false; scope.elementNotFound = false;
scope.model.nextStep = function() { scope.model.nextStep = function () {
nextStep(); nextStep();
}; };
scope.model.endTour = function() { scope.model.endTour = function () {
unbindEvent(); unbindEvent();
tourService.endTour(scope.model); tourService.endTour(scope.model);
backdropService.close(); backdropService.close();
}; };
scope.model.completeTour = function() { scope.model.completeTour = function () {
unbindEvent(); unbindEvent();
tourService.completeTour(scope.model).then(function() { tourService.completeTour(scope.model).then(function () {
backdropService.close(); backdropService.close();
}); });
}; };
scope.model.disableTour = function() { scope.model.disableTour = function () {
unbindEvent(); unbindEvent();
tourService.disableTour(scope.model).then(function() { tourService.disableTour(scope.model).then(function () {
backdropService.close(); 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"); pulseElement = el.find(".umb-tour__pulse");
popover.hide(); popover.hide();
scope.model.currentStepIndex = 0; scope.model.currentStepIndex = 0;
backdropService.open({disableEventsOnClick: true}); backdropService.open({ disableEventsOnClick: true });
startStep(); startStep();
} }
@@ -249,20 +249,20 @@ In the following example you see how to run some custom logic before a step goes
} }
function nextStep() { function nextStep() {
popover.hide(); popover.hide();
pulseElement.hide(); pulseElement.hide();
$timeout.cancel(pulseTimer); $timeout.cancel(pulseTimer);
scope.model.currentStepIndex++; scope.model.currentStepIndex++;
// make sure we don't go too far // 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(); startStep();
// tour completed - final step // tour completed - final step
} else { } else {
scope.loadingStep = true; scope.loadingStep = true;
waitForPendingRerequests().then(function(){ waitForPendingRerequests().then(function () {
scope.loadingStep = false; scope.loadingStep = false;
// clear current step // clear current step
scope.model.currentStep = {}; 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.setOpacity(scope.model.steps[scope.model.currentStepIndex].backdropOpacity);
backdropService.setHighlight(null); backdropService.setHighlight(null);
waitForPendingRerequests().then(function() { waitForPendingRerequests().then(function () {
scope.model.currentStep = scope.model.steps[scope.model.currentStepIndex]; scope.model.currentStep = scope.model.steps[scope.model.currentStepIndex];
setView(); setView();
// if highlight element is set - find it // if highlight element is set - find it
findHighlightElement(); findHighlightElement();
// if a custom event needs to be bound we do it now // if a custom event needs to be bound we do it now
if(scope.model.currentStep.event) { if (scope.model.currentStep.event) {
bindEvent(); bindEvent();
} }
@@ -301,7 +301,7 @@ In the following example you see how to run some custom logic before a step goes
function findHighlightElement() { function findHighlightElement() {
scope.elementNotFound = false; scope.elementNotFound = false;
$timeout(function () { $timeout(function () {
// clear element when step as marked as intro, so it always displays in the center // 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 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); setPopoverPosition(null);
return; 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 // we couldn't find the element in the dom - abort and show error
if(element.length === 0) { if (element.length === 0) {
scope.elementNotFound = true; scope.elementNotFound = true;
setPopoverPosition(null); setPopoverPosition(null);
return; return;
@@ -337,7 +337,7 @@ In the following example you see how to run some custom logic before a step goes
el = el.offsetParent(); el = el.offsetParent();
} }
} }
var scrollToCenterOfContainer = offsetTop - (scrollParent[0].clientHeight / 2); var scrollToCenterOfContainer = offsetTop - (scrollParent[0].clientHeight / 2);
if (element[0].clientHeight < scrollParent[0].clientHeight) { if (element[0].clientHeight < scrollParent[0].clientHeight) {
scrollToCenterOfContainer += (element[0].clientHeight / 2); 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) { function setPopoverPosition(element) {
$timeout(function () { $timeout(function () {
var position = "center"; var position = "center";
var margin = 20; var margin = 20;
var css = {}; 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 popoverWidth = popover.outerWidth();
var popoverHeight = popover.outerHeight(); var popoverHeight = popover.outerHeight();
var popoverOffset = popover.offset(); var popoverOffset = popover.offset();
var documentWidth = angular.element(document).width(); var documentWidth = $(document).width();
var documentHeight = angular.element(document).height(); var documentHeight = $(document).height();
if(element) { if (element) {
var offset = element.offset(); var offset = element.offset();
var width = element.outerWidth(); 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 { } else {
// if there is no dom element center the popover // if there is no dom element center the popover
css.top = "calc(50% - " + popoverHeight/2 + "px)"; css.top = "calc(50% - " + popoverHeight / 2 + "px)";
css.left = "calc(50% - " + popoverWidth/2 + "px)"; css.left = "calc(50% - " + popoverWidth / 2 + "px)";
} }
popover.css(css).fadeIn("fast"); popover.css(css).fadeIn("fast");
}); });
} }
function setPulsePosition() { 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 clickElementSelector = scope.model.currentStep.eventElement ? scope.model.currentStep.eventElement : scope.model.currentStep.element;
var clickElement = $(clickElementSelector); var clickElement = $(clickElementSelector);
var offset = clickElement.offset(); var offset = clickElement.offset();
var width = clickElement.outerWidth(); var width = clickElement.outerWidth();
var height = clickElement.outerHeight(); var height = clickElement.outerHeight();
pulseElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top }); pulseElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top });
pulseElement.fadeIn(); pulseElement.fadeIn();
@@ -468,24 +468,24 @@ In the following example you see how to run some custom logic before a step goes
function waitForPendingRerequests() { function waitForPendingRerequests() {
var deferred = $q.defer(); var deferred = $q.defer();
var timer = window.setInterval(function(){ var timer = window.setInterval(function () {
var requestsReady = false; var requestsReady = false;
var animationsDone = false; var animationsDone = false;
// check for pending requests both in angular and on the document // 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; requestsReady = true;
} }
// check for animations. ng-enter and ng-leave are default angular animations. // check for animations. ng-enter and ng-leave are default angular animations.
// Also check for infinite editors animating // 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; animationsDone = true;
} }
if(requestsReady && animationsDone) { if (requestsReady && animationsDone) {
$timeout(function(){ $timeout(function () {
deferred.resolve(); deferred.resolve();
clearInterval(timer); 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 bindToElement = scope.model.currentStep.element;
var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex; var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex;
var removeEventName = "remove.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 = scope.model.currentStep.eventElement;
} }
$(bindToElement).on(eventName, function(){ $(bindToElement).on(eventName, function () {
if(!handled) { if (!handled) {
unbindEvent(); unbindEvent();
nextStep(); nextStep();
handled = true; 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: // 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". // "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 () { $(bindToElement).on(removeEventName, function () {
if(!handled) { if (!handled) {
unbindEvent(); unbindEvent();
nextStep(); nextStep();
handled = true; handled = true;
@@ -542,13 +542,13 @@ In the following example you see how to run some custom logic before a step goes
function unbindEvent() { function unbindEvent() {
var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex; var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex;
var removeEventName = "remove.step-" + scope.model.currentStepIndex; var removeEventName = "remove.step-" + scope.model.currentStepIndex;
if(scope.model.currentStep.eventElement) { if (scope.model.currentStep.eventElement) {
angular.element(scope.model.currentStep.eventElement).off(eventName); $(scope.model.currentStep.eventElement).off(eventName);
angular.element(scope.model.currentStep.eventElement).off(removeEventName); $(scope.model.currentStep.eventElement).off(removeEventName);
} else { } else {
angular.element(scope.model.currentStep.element).off(eventName); $(scope.model.currentStep.element).off(eventName);
angular.element(scope.model.currentStep.element).off(removeEventName); $(scope.model.currentStep.element).off(removeEventName);
} }
} }

View File

@@ -7,13 +7,12 @@
* a color will not be set. * a color will not be set.
**/ **/
function hexBgColor() { function hexBgColor() {
return { return {
restrict: "A", restrict: "A",
link: function (scope, element, attr, formCtrl) { link: function (scope, element, attr, formCtrl) {
function setBackgroundColor(color) { function setBackgroundColor(color) {
// note: can't use element.css(), it doesn't support hexa background colors element[0].style.backgroundColor = "#" + color;
angular.element(element)[0].style.backgroundColor = "#" + color;
} }
// Only add inline hex background color if defined and not "true". // 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. // Set the orig based on the attribute if there is one.
origColor = attr.hexBgOrig; origColor = attr.hexBgOrig;
} }
attr.$observe("hexBgColor", function (newVal) { attr.$observe("hexBgColor", function (newVal) {
if (newVal) { if (newVal) {
if (!origColor) { if (!origColor) {

View File

@@ -67,37 +67,37 @@ Use this directive to render a date time picker
@param {callback} onDayCreate (<code>callback</code>): Take full control of every date cell with theonDayCreate()hook. @param {callback} onDayCreate (<code>callback</code>): Take full control of every date cell with theonDayCreate()hook.
**/ **/
(function() { (function () {
'use strict'; 'use strict';
var umbDateTimePicker = { var umbDateTimePicker = {
template: '<ng-transclude>' + template: '<ng-transclude>' +
'<input type="text" ng-if="!$ctrl.options.inline" ng-model="$ctrl.ngModel" placeholder="Select Date.."></input>' + '<input type="text" ng-if="!$ctrl.options.inline" ng-model="$ctrl.ngModel" placeholder="Select Date.."></input>' +
'<div ng-if="$ctrl.options.inline"></div>' + '<div ng-if="$ctrl.options.inline"></div>' +
'</ng-transclude>', '</ng-transclude>',
controller: umbDateTimePickerCtrl, controller: umbDateTimePickerCtrl,
transclude: true, transclude: true,
bindings: { bindings: {
ngModel: '<', ngModel: '<',
options: '<', options: '<',
onSetup: '&?', onSetup: '&?',
onChange: '&?', onChange: '&?',
onOpen: '&?', onOpen: '&?',
onClose: '&?', onClose: '&?',
onMonthChange: '&?', onMonthChange: '&?',
onYearChange: '&?', onYearChange: '&?',
onReady: '&?', onReady: '&?',
onValueUpdate: '&?', onValueUpdate: '&?',
onDayCreate: '&?' onDayCreate: '&?'
} }
}; };
function umbDateTimePickerCtrl($element, $timeout, $scope, assetsService, userService) { function umbDateTimePickerCtrl($element, $timeout, $scope, assetsService, userService) {
var ctrl = this; var ctrl = this;
var userLocale = null; var userLocale = null;
ctrl.$onInit = function() { ctrl.$onInit = function () {
// load css file for the date picker // load css file for the date picker
assetsService.loadCss('lib/flatpickr/flatpickr.css', $scope).then(function () { assetsService.loadCss('lib/flatpickr/flatpickr.css', $scope).then(function () {
@@ -113,27 +113,27 @@ Use this directive to render a date time picker
}); });
}); });
}; };
function grabElementAndRunFlatpickr() { function grabElementAndRunFlatpickr() {
$timeout(function() { $timeout(function () {
var transcludeEl = $element.find('ng-transclude')[0]; var transcludeEl = $element.find('ng-transclude')[0];
var element = transcludeEl.children[0]; var element = transcludeEl.children[0];
setDatepicker(element); setDatepicker(element);
}, 0, true); }, 0, true);
} }
function setDatepicker(element) { function setDatepicker(element) {
var fpLib = flatpickr ? flatpickr : FlatpickrInstance; var fpLib = flatpickr ? flatpickr : FlatpickrInstance;
if (!fpLib) { if (!fpLib) {
return console.warn('Unable to find any flatpickr installation'); return console.warn('Unable to find any flatpickr installation');
} }
var fpInstance; var fpInstance;
setUpCallbacks(); setUpCallbacks();
if (!ctrl.options.locale) { if (!ctrl.options.locale) {
ctrl.options.locale = userLocale; ctrl.options.locale = userLocale;
@@ -149,101 +149,101 @@ Use this directive to render a date time picker
}; };
fpInstance = new fpLib(element, ctrl.options); fpInstance = new fpLib(element, ctrl.options);
if (ctrl.onSetup) {
ctrl.onSetup({
fpItem: fpInstance
});
}
// If has ngModel set the date if (ctrl.onSetup) {
if (ctrl.ngModel) { ctrl.onSetup({
fpInstance.setDate(ctrl.ngModel); fpItem: fpInstance
} });
}
// destroy the flatpickr instance when the dom element is removed // If has ngModel set the date
angular.element(element).on('$destroy', function() { if (ctrl.ngModel) {
fpInstance.destroy(); fpInstance.setDate(ctrl.ngModel);
}); }
// Refresh the scope // destroy the flatpickr instance when the dom element is removed
$scope.$applyAsync(); $(element).on('$destroy', function () {
} fpInstance.destroy();
});
function setUpCallbacks() { // Refresh the scope
// bind hook for onChange $scope.$applyAsync();
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 function setUpCallbacks() {
if(ctrl.options && ctrl.onOpen) { // bind hook for onChange
ctrl.options.onOpen = function(selectedDates, dateStr, instance) { if (ctrl.options && ctrl.onChange) {
$timeout(function() { ctrl.options.onChange = function (selectedDates, dateStr, instance) {
ctrl.onOpen({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); $timeout(function () {
}); ctrl.onChange({ selectedDates: selectedDates, dateStr: dateStr, instance: instance });
}; });
} };
}
// bind hook for onOpen // bind hook for onOpen
if(ctrl.options && ctrl.onClose) { if (ctrl.options && ctrl.onOpen) {
ctrl.options.onClose = function(selectedDates, dateStr, instance) { ctrl.options.onOpen = function (selectedDates, dateStr, instance) {
$timeout(function() { $timeout(function () {
ctrl.onClose({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); ctrl.onOpen({ selectedDates: selectedDates, dateStr: dateStr, instance: instance });
}); });
}; };
} }
// bind hook for onMonthChange // bind hook for onOpen
if(ctrl.options && ctrl.onMonthChange) { if (ctrl.options && ctrl.onClose) {
ctrl.options.onMonthChange = function(selectedDates, dateStr, instance) { ctrl.options.onClose = function (selectedDates, dateStr, instance) {
$timeout(function() { $timeout(function () {
ctrl.onMonthChange({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); ctrl.onClose({ selectedDates: selectedDates, dateStr: dateStr, instance: instance });
}); });
}; };
} }
// bind hook for onYearChange // bind hook for onMonthChange
if(ctrl.options && ctrl.onYearChange) { if (ctrl.options && ctrl.onMonthChange) {
ctrl.options.onYearChange = function(selectedDates, dateStr, instance) { ctrl.options.onMonthChange = function (selectedDates, dateStr, instance) {
$timeout(function() { $timeout(function () {
ctrl.onYearChange({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); ctrl.onMonthChange({ selectedDates: selectedDates, dateStr: dateStr, instance: instance });
}); });
}; };
} }
// bind hook for onReady // bind hook for onYearChange
if(ctrl.options && ctrl.onReady) { if (ctrl.options && ctrl.onYearChange) {
ctrl.options.onReady = function(selectedDates, dateStr, instance) { ctrl.options.onYearChange = function (selectedDates, dateStr, instance) {
$timeout(function() { $timeout(function () {
ctrl.onReady({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); ctrl.onYearChange({ selectedDates: selectedDates, dateStr: dateStr, instance: instance });
}); });
}; };
} }
// bind hook for onValueUpdate // bind hook for onReady
if(ctrl.onValueUpdate) { if (ctrl.options && ctrl.onReady) {
ctrl.options.onValueUpdate = function(selectedDates, dateStr, instance) { ctrl.options.onReady = function (selectedDates, dateStr, instance) {
$timeout(function() { $timeout(function () {
ctrl.onValueUpdate({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); ctrl.onReady({ selectedDates: selectedDates, dateStr: dateStr, instance: instance });
}); });
}; };
} }
// bind hook for onDayCreate // bind hook for onValueUpdate
if(ctrl.onDayCreate) { if (ctrl.onValueUpdate) {
ctrl.options.onDayCreate = function(selectedDates, dateStr, instance) { ctrl.options.onValueUpdate = function (selectedDates, dateStr, instance) {
$timeout(function() { $timeout(function () {
ctrl.onDayCreate({selectedDates: selectedDates, dateStr: dateStr, instance: instance}); 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 // umbFlatpickr (umb-flatpickr) is deprecated, but we keep it for backwards compatibility

View File

@@ -31,7 +31,7 @@ Use this directive to lazy-load an image only when it is scrolled into view.
**/ **/
(function() { (function () {
'use strict'; 'use strict';
function ImageLazyLoadDirective() { function ImageLazyLoadDirective() {
@@ -41,7 +41,7 @@ Use this directive to lazy-load an image only when it is scrolled into view.
function link(scope, element, attrs) { function link(scope, element, attrs) {
const observer = new IntersectionObserver(loadImg); const observer = new IntersectionObserver(loadImg);
const img = angular.element(element)[0]; const img = element[0];
img.src = placeholder; img.src = placeholder;
observer.observe(img); observer.observe(img);

View File

@@ -57,13 +57,13 @@ For extra details about options and events take a look here: https://refreshless
**/ **/
(function() { (function () {
'use strict'; 'use strict';
var umbRangeSlider = { var umbRangeSlider = {
template: '<div class="umb-range-slider"></div>', template: '<div class="umb-range-slider"></div>',
controller: UmbRangeSliderController, controller: UmbRangeSliderController,
bindings: { bindings: {
ngModel: '<', ngModel: '<',
options: '<', options: '<',
onSetup: '&?', onSetup: '&?',
@@ -73,15 +73,15 @@ For extra details about options and events take a look here: https://refreshless
onChange: '&?', onChange: '&?',
onStart: '&?', onStart: '&?',
onEnd: '&?' onEnd: '&?'
} }
}; };
function UmbRangeSliderController($element, $timeout, $scope, assetsService) { function UmbRangeSliderController($element, $timeout, $scope, assetsService) {
const ctrl = this; const ctrl = this;
let sliderInstance = null; let sliderInstance = null;
ctrl.$onInit = function() { ctrl.$onInit = function () {
// load css file for the date picker // load css file for the date picker
assetsService.loadCss('lib/nouislider/nouislider.min.css', $scope); 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() { function grabElementAndRun() {
$timeout(function() { $timeout(function () {
const element = $element.find('.umb-range-slider')[0]; const element = $element.find('.umb-range-slider')[0];
setSlider(element); setSlider(element);
}, 0, true); }, 0, true);
} }
function setSlider(element) { function setSlider(element) {
sliderInstance = element; sliderInstance = element;
@@ -117,82 +117,82 @@ For extra details about options and events take a look here: https://refreshless
// create new slider // create new slider
noUiSlider.create(sliderInstance, options); noUiSlider.create(sliderInstance, options);
if (ctrl.onSetup) { if (ctrl.onSetup) {
ctrl.onSetup({ ctrl.onSetup({
slider: sliderInstance slider: sliderInstance
}); });
} }
// If has ngModel set the date // If has ngModel set the date
if (ctrl.ngModel) { if (ctrl.ngModel) {
sliderInstance.noUiSlider.set(ctrl.ngModel); sliderInstance.noUiSlider.set(ctrl.ngModel);
} }
// destroy the slider instance when the dom element is removed // destroy the slider instance when the dom element is removed
angular.element(element).on('$destroy', function() { $(element).on('$destroy', function () {
sliderInstance.noUiSlider.off(); sliderInstance.noUiSlider.off();
}); });
setUpCallbacks(); setUpCallbacks();
// Refresh the scope // Refresh the scope
$scope.$applyAsync(); $scope.$applyAsync();
} }
function setUpCallbacks() { function setUpCallbacks() {
if(sliderInstance) { if (sliderInstance) {
// bind hook for update // bind hook for update
if(ctrl.onUpdate) { if (ctrl.onUpdate) {
sliderInstance.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) { sliderInstance.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) {
$timeout(function() { $timeout(function () {
ctrl.onUpdate({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); ctrl.onUpdate({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions });
}); });
}); });
} }
// bind hook for slide // bind hook for slide
if(ctrl.onSlide) { if (ctrl.onSlide) {
sliderInstance.noUiSlider.on('slide', function (values, handle, unencoded, tap, positions) { sliderInstance.noUiSlider.on('slide', function (values, handle, unencoded, tap, positions) {
$timeout(function() { $timeout(function () {
ctrl.onSlide({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); ctrl.onSlide({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions });
}); });
}); });
} }
// bind hook for set // bind hook for set
if(ctrl.onSet) { if (ctrl.onSet) {
sliderInstance.noUiSlider.on('set', function (values, handle, unencoded, tap, positions) { sliderInstance.noUiSlider.on('set', function (values, handle, unencoded, tap, positions) {
$timeout(function() { $timeout(function () {
ctrl.onSet({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); ctrl.onSet({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions });
}); });
}); });
} }
// bind hook for change // bind hook for change
if(ctrl.onChange) { if (ctrl.onChange) {
sliderInstance.noUiSlider.on('change', function (values, handle, unencoded, tap, positions) { sliderInstance.noUiSlider.on('change', function (values, handle, unencoded, tap, positions) {
$timeout(function() { $timeout(function () {
ctrl.onChange({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); ctrl.onChange({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions });
}); });
}); });
} }
// bind hook for start // bind hook for start
if(ctrl.onStart) { if (ctrl.onStart) {
sliderInstance.noUiSlider.on('start', function (values, handle, unencoded, tap, positions) { sliderInstance.noUiSlider.on('start', function (values, handle, unencoded, tap, positions) {
$timeout(function() { $timeout(function () {
ctrl.onStart({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); ctrl.onStart({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions });
}); });
}); });
} }
// bind hook for end // bind hook for end
if(ctrl.onEnd) { if (ctrl.onEnd) {
sliderInstance.noUiSlider.on('end', function (values, handle, unencoded, tap, positions) { sliderInstance.noUiSlider.on('end', function (values, handle, unencoded, tap, positions) {
$timeout(function() { $timeout(function () {
ctrl.onEnd({values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions}); 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); angular.module('umbraco.directives').component('umbRangeSlider', umbRangeSlider);
})(); })();

View File

@@ -21,7 +21,7 @@ angular.module("umbraco.directives")
var totalOffset = 0; var totalOffset = 0;
var offsety = parseInt(attrs.autoScale, 10); var offsety = parseInt(attrs.autoScale, 10);
var window = angular.element($window); var window = $($window);
if (offsety !== undefined) { if (offsety !== undefined) {
totalOffset += offsety; totalOffset += offsety;
} }
@@ -34,7 +34,7 @@ angular.module("umbraco.directives")
el.height(window.height() - (el.offset().top + totalOffset)); el.height(window.height() - (el.offset().top + totalOffset));
} }
var resizeCallback = function() { var resizeCallback = function () {
setElementSize(); setElementSize();
}; };

View File

@@ -1,46 +1,46 @@
angular.module("umbraco.directives") angular.module("umbraco.directives")
.directive('disableTabindex', function (tabbableService) { .directive('disableTabindex', function (tabbableService) {
return { return {
restrict: 'A', //Can only be used as an attribute, restrict: 'A', //Can only be used as an attribute,
scope: { scope: {
"disableTabindex": "<" "disableTabindex": "<"
}, },
link: function (scope, element, attrs) { link: function (scope, element, attrs) {
if(scope.disableTabindex) { if (scope.disableTabindex) {
//Select the node that will be observed for mutations (native DOM element not jQLite version) //Select the node that will be observed for mutations (native DOM element not jQLite version)
var targetNode = element[0]; var targetNode = element[0];
//Watch for DOM changes - so when the property editor subview loads in //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 //We can be notified its updated the child elements inside the DIV we are watching
var observer = new MutationObserver(domChange); var observer = new MutationObserver(domChange);
// Options for the observer (which mutations to observe) // Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true }; var config = { attributes: true, childList: true, subtree: true };
function domChange(mutationsList, observer) { function domChange(mutationsList, observer) {
for(var mutation of mutationsList) { for (var mutation of mutationsList) {
//DOM items have been added or removed //DOM items have been added or removed
if (mutation.type == 'childList') { if (mutation.type == 'childList') {
//Check if any child items in mutation.target contain an input //Check if any child items in mutation.target contain an input
var childInputs = tabbableService.tabbable(mutation.target); var childInputs = tabbableService.tabbable(mutation.target);
//For each item in childInputs - override or set HTML attribute tabindex="-1" //For each item in childInputs - override or set HTML attribute tabindex="-1"
angular.forEach(childInputs, function(element){ angular.forEach(childInputs, function (element) {
angular.element(element).attr('tabindex', '-1'); $(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);
} }
};
} });
};
});

View File

@@ -6,8 +6,8 @@
var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.services']) var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.services'])
.controller("previewController", function ($scope, $window, $location) { .controller("previewController", function ($scope, $window, $location) {
$scope.currentCulture = {iso:'', title:'...', icon:'icon-loading'} $scope.currentCulture = { iso: '', title: '...', icon: 'icon-loading' }
var cultures = []; var cultures = [];
$scope.tabbingActive = false; $scope.tabbingActive = false;
@@ -21,7 +21,7 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
window.addEventListener('mousedown', disableTabbingActive); window.addEventListener('mousedown', disableTabbingActive);
} }
} }
function disableTabbingActive(evt) { function disableTabbingActive(evt) {
$scope.tabbingActive = false; $scope.tabbingActive = false;
$scope.$digest(); $scope.$digest();
@@ -113,10 +113,10 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
$scope.sizeOpen = false; $scope.sizeOpen = false;
$scope.cultureOpen = false; $scope.cultureOpen = false;
$scope.toggleSizeOpen = function() { $scope.toggleSizeOpen = function () {
$scope.sizeOpen = toggleMenu($scope.sizeOpen); $scope.sizeOpen = toggleMenu($scope.sizeOpen);
} }
$scope.toggleCultureOpen = function() { $scope.toggleCultureOpen = function () {
$scope.cultureOpen = toggleMenu($scope.cultureOpen); $scope.cultureOpen = toggleMenu($scope.cultureOpen);
} }
@@ -132,8 +132,8 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
$scope.sizeOpen = false; $scope.sizeOpen = false;
$scope.cultureOpen = false; $scope.cultureOpen = false;
} }
$scope.windowClickHandler = function() { $scope.windowClickHandler = function () {
closeOthers(); closeOthers();
} }
function windowBlurHandler() { function windowBlurHandler() {
@@ -141,16 +141,16 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
$scope.$digest(); $scope.$digest();
} }
var win = angular.element($window); var win = $($window);
win.on("blur", windowBlurHandler); win.on("blur", windowBlurHandler);
$scope.$on("$destroy", function () { $scope.$on("$destroy", function () {
win.off("blur", handleBlwindowBlurHandlerur ); win.off("blur", handleBlwindowBlurHandlerur);
}); });
function setPageUrl(){ function setPageUrl() {
$scope.pageId = $location.search().id || getParameterByName("id"); $scope.pageId = $location.search().id || getParameterByName("id");
var culture = $location.search().culture || getParameterByName("culture"); var culture = $location.search().culture || getParameterByName("culture");
@@ -204,27 +204,27 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi
/* Change culture */ /* Change culture */
/*****************************************************************************/ /*****************************************************************************/
$scope.changeCulture = function (iso) { $scope.changeCulture = function (iso) {
if($location.search().culture !== iso) { if ($location.search().culture !== iso) {
$scope.frameLoaded = false; $scope.frameLoaded = false;
$scope.currentCultureIso = iso; $scope.currentCultureIso = iso;
$location.search("culture", iso); $location.search("culture", iso);
setPageUrl(); setPageUrl();
} }
}; };
$scope.registerCulture = function(iso, title, isDefault) { $scope.registerCulture = function (iso, title, isDefault) {
var cultureObject = {iso: iso, title: title, isDefault: isDefault}; var cultureObject = { iso: iso, title: title, isDefault: isDefault };
cultures.push(cultureObject); 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 no culture is selected, we will pick the default one:
if ($scope.currentCultureIso === null) { if ($scope.currentCultureIso === null) {
$scope.currentCulture = cultures.find(function(culture) { $scope.currentCulture = cultures.find(function (culture) {
return culture.isDefault === true; return culture.isDefault === true;
}) })
return; return;
} }
$scope.currentCulture = cultures.find(function(culture) { $scope.currentCulture = cultures.find(function (culture) {
return culture.iso === $scope.currentCultureIso; 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")) { if (iframe && iframe.contentDocument && iframe.contentDocument.getElementById("umbracoPreviewBadge")) {
iframe.contentDocument.getElementById("umbracoPreviewBadge").style.display = "none"; iframe.contentDocument.getElementById("umbracoPreviewBadge").style.display = "none";
} }

View File

@@ -156,15 +156,15 @@ angular.module("umbraco")
} }
} }
function upload(v) { function upload() {
angular.element(".umb-file-dropzone .file-select").trigger("click"); $(".umb-file-dropzone .file-select").trigger("click");
} }
function dragLeave(el, event) { function dragLeave() {
$scope.activeDrag = false; $scope.activeDrag = false;
} }
function dragEnter(el, event) { function dragEnter() {
$scope.activeDrag = true; $scope.activeDrag = true;
} }
@@ -341,7 +341,7 @@ angular.module("umbraco")
return false; return false;
} }
function gotoStartNode(err) { function gotoStartNode() {
gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" }); gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
} }

View File

@@ -2,16 +2,16 @@
"use strict"; "use strict";
function NodeNameController($scope) { function NodeNameController($scope) {
var vm = this; var vm = this;
var element = angular.element($scope.model.currentStep.element); var element = $($scope.model.currentStep.element);
vm.error = false; vm.error = false;
vm.initNextStep = initNextStep; vm.initNextStep = initNextStep;
function initNextStep() { function initNextStep() {
if(element.val().toLowerCase() === 'home') { if (element.val().toLowerCase() === 'home') {
$scope.model.nextStep(); $scope.model.nextStep();
} else { } else {
vm.error = true; vm.error = true;

View File

@@ -2,16 +2,16 @@
"use strict"; "use strict";
function DocTypeNameController($scope) { function DocTypeNameController($scope) {
var vm = this; var vm = this;
var element = angular.element($scope.model.currentStep.element); var element = $($scope.model.currentStep.element);
vm.error = false; vm.error = false;
vm.initNextStep = initNextStep; vm.initNextStep = initNextStep;
function initNextStep() { function initNextStep() {
if(element.val().toLowerCase() === 'home page') { if (element.val().toLowerCase() === 'home page') {
$scope.model.nextStep(); $scope.model.nextStep();
} else { } else {
vm.error = true; vm.error = true;

View File

@@ -2,12 +2,12 @@
"use strict"; "use strict";
function PropertyNameController($scope) { function PropertyNameController($scope) {
var vm = this; var vm = this;
var element = angular.element($scope.model.currentStep.element); var element = $($scope.model.currentStep.element);
vm.error = false; vm.error = false;
vm.initNextStep = initNextStep; vm.initNextStep = initNextStep;
function initNextStep() { function initNextStep() {

View File

@@ -2,12 +2,12 @@
"use strict"; "use strict";
function TabNameController($scope) { function TabNameController($scope) {
var vm = this; var vm = this;
var element = angular.element($scope.model.currentStep.element); var element = $($scope.model.currentStep.element);
vm.error = false; vm.error = false;
vm.initNextStep = initNextStep; vm.initNextStep = initNextStep;
function initNextStep() { function initNextStep() {

View File

@@ -2,16 +2,16 @@
"use strict"; "use strict";
function FolderNameController($scope) { function FolderNameController($scope) {
var vm = this; var vm = this;
var element = angular.element($scope.model.currentStep.element); var element = $($scope.model.currentStep.element);
vm.error = false; vm.error = false;
vm.initNextStep = initNextStep; vm.initNextStep = initNextStep;
function initNextStep() { function initNextStep() {
if(element.val().toLowerCase() === "my images") { if (element.val().toLowerCase() === "my images") {
$scope.model.nextStep(); $scope.model.nextStep();
} else { } else {
vm.error = true; vm.error = true;

View File

@@ -2,12 +2,11 @@
"use strict"; "use strict";
function UploadImagesController($scope, editorState, mediaResource) { function UploadImagesController($scope, editorState, mediaResource) {
var vm = this; var vm = this;
var element = angular.element($scope.model.currentStep.element);
vm.error = false; vm.error = false;
vm.initNextStep = initNextStep; vm.initNextStep = initNextStep;
function initNextStep() { function initNextStep() {
@@ -23,7 +22,7 @@
var children = data; var children = data;
if(children.items && children.items.length > 0) { if (children.items && children.items.length > 0) {
$scope.model.nextStep(); $scope.model.nextStep();
} else { } else {
vm.error = true; vm.error = true;

View File

@@ -2,13 +2,12 @@
"use strict"; "use strict";
function TemplatesTreeController($scope) { function TemplatesTreeController($scope) {
var vm = this; var eventElement = $($scope.model.currentStep.eventElement);
var eventElement = angular.element($scope.model.currentStep.eventElement);
function onInit() { function onInit() {
// check if tree is already open - if it is - go to next step // 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(); $scope.model.nextStep();
} }
} }

View File

@@ -188,7 +188,7 @@
// if this is a new template, bind to the blur event on the name // if this is a new template, bind to the blur event on the name
if (create) { if (create) {
$timeout(function () { $timeout(function () {
var nameField = angular.element(document.querySelector('[data-element="editor-name-field"]')); var nameField = $('[data-element="editor-name-field"]');
if (nameField) { if (nameField) {
nameField.on('blur', function (event) { nameField.on('blur', function (event) {
if (event.target.value) { if (event.target.value) {

View File

@@ -686,10 +686,10 @@ angular.mock.dump = function (object) {
var out; var out;
if (angular.isElement(object)) { if (angular.isElement(object)) {
object = angular.element(object); object = $(object);
out = angular.element('<div></div>'); out = $('<div></div>');
angular.forEach(object, function (element) { angular.forEach(object, function (element) {
out.append(angular.element(element).clone()); out.append($(element).clone());
}); });
out = out.html(); out = out.html();
} else if (Utilities.isArray(object)) { } else if (Utilities.isArray(object)) {
@@ -1499,7 +1499,7 @@ angular.mock.$TimeoutDecorator = function ($delegate, $browser) {
*/ */
angular.mock.$RootElementProvider = function () { angular.mock.$RootElementProvider = function () {
this.$get = function () { this.$get = function () {
return angular.element('<div ng-app></div>'); return $('<div ng-app></div>');
} }
}; };
@@ -1710,7 +1710,7 @@ angular.mock.clearDataCache = function () {
if (cache.hasOwnProperty(key)) { if (cache.hasOwnProperty(key)) {
var handle = cache[key].handle; var handle = cache[key].handle;
handle && angular.element(handle.elem).unbind(); handle && $(handle.elem).unbind();
delete cache[key]; delete cache[key];
} }
} }