Replace instances of angular.element() (#7951)
This commit is contained in:
@@ -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();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -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();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
});
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -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";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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" });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
@@ -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() {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user