swcs/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
+10 -10
View File
@@ -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();
}));
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
+14 -14
View File
@@ -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) {
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js
+50 -50
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.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);
}
}
src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js
+3 -4
View File
@@ -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) {
src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js
+121 -121
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.
**/
(function() {
'use strict';
(function () {
'use strict';
var umbDateTimePicker = {
template: '<ng-transclude>' +
'<input type="text" ng-if="!$ctrl.options.inline" ng-model="$ctrl.ngModel" placeholder="Select Date.."></input>' +
'<div ng-if="$ctrl.options.inline"></div>' +
'</ng-transclude>',
controller: umbDateTimePickerCtrl,
transclude: true,
bindings: {
ngModel: '<',
options: '<',
onSetup: '&?',
onChange: '&?',
onOpen: '&?',
onClose: '&?',
onMonthChange: '&?',
onYearChange: '&?',
onReady: '&?',
onValueUpdate: '&?',
onDayCreate: '&?'
}
var umbDateTimePicker = {
template: '<ng-transclude>' +
'<input type="text" ng-if="!$ctrl.options.inline" ng-model="$ctrl.ngModel" placeholder="Select Date.."></input>' +
'<div ng-if="$ctrl.options.inline"></div>' +
'</ng-transclude>',
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);
}
if (ctrl.onSetup) {
ctrl.onSetup({
fpItem: fpInstance
});
}
// destroy the flatpickr instance when the dom element is removed
angular.element(element).on('$destroy', function() {
fpInstance.destroy();
});
// If has ngModel set the date
if (ctrl.ngModel) {
fpInstance.setDate(ctrl.ngModel);
}
// Refresh the scope
$scope.$applyAsync();
}
// destroy the flatpickr instance when the dom element is removed
$(element).on('$destroy', function () {
fpInstance.destroy();
});
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});
});
};
}
// Refresh the scope
$scope.$applyAsync();
}
// 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});
});
};
}
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.onClose) {
ctrl.options.onClose = function(selectedDates, dateStr, instance) {
$timeout(function() {
ctrl.onClose({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 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 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 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 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 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 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 onValueUpdate
if(ctrl.onValueUpdate) {
ctrl.options.onValueUpdate = function(selectedDates, dateStr, instance) {
$timeout(function() {
ctrl.onValueUpdate({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 onDayCreate
if(ctrl.onDayCreate) {
ctrl.options.onDayCreate = function(selectedDates, dateStr, instance) {
$timeout(function() {
ctrl.onDayCreate({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
src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js
+2 -2
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';
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) {
const observer = new IntersectionObserver(loadImg);
const img = angular.element(element)[0];
const img = element[0];
img.src = placeholder;
observer.observe(img);
src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
+52 -52
View File
@@ -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: '<div class="umb-range-slider"></div>',
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);
})();
src/Umbraco.Web.UI.Client/src/common/directives/util/autoscale.directive.js
+2 -2
View File
@@ -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();
};
src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js
+31 -31
View File
@@ -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) {
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];
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);
//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 };
// 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) {
function domChange(mutationsList, observer) {
for (var mutation of mutationsList) {
//DOM items have been added or removed
if (mutation.type == 'childList') {
//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);
//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');
});
//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);
}
}
};
});
};
});
src/Umbraco.Web.UI.Client/src/preview/preview.controller.js
+19 -19
View File
@@ -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";
}
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js
+5 -5
View File
@@ -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;
}
@@ -341,7 +341,7 @@ angular.module("umbraco")
return false;
}
function gotoStartNode(err) {
function gotoStartNode() {
gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
}
src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.controller.js
+4 -4
View File
@@ -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;
src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.controller.js
+4 -4
View File
@@ -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;
src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.controller.js
+3 -3
View File
@@ -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() {
src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.controller.js
+3 -3
View File
@@ -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() {
src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.controller.js
+4 -4
View File
@@ -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;
src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.controller.js
+3 -4
View File
@@ -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;
src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.controller.js
+4 -5
View File
@@ -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();
}
}
src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
+1 -1
View File
@@ -188,7 +188,7 @@
// 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"]'));
var nameField = $('[data-element="editor-name-field"]');
if (nameField) {
nameField.on('blur', function (event) {
if (event.target.value) {
src/Umbraco.Web.UI.Client/test/lib/angular/angular-mocks.js
Vendored
+5 -5
View File
@@ -686,10 +686,10 @@ angular.mock.dump = function (object) {
var out;
if (angular.isElement(object)) {
object = angular.element(object);
out = angular.element('<div></div>');
object = $(object);
out = $('<div></div>');
angular.forEach(object, function (element) {
out.append(angular.element(element).clone());
out.append($(element).clone());
});
out = out.html();
} else if (Utilities.isArray(object)) {
@@ -1499,7 +1499,7 @@ angular.mock.$TimeoutDecorator = function ($delegate, $browser) {
*/
angular.mock.$RootElementProvider = 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)) {
var handle = cache[key].handle;
handle && angular.element(handle.elem).unbind();
handle && $(handle.elem).unbind();
delete cache[key];
}
}