devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
172 lines (170 loc) • 7.42 kB
JavaScript
/**
* DevExtreme (esm/ui/notify.js)
* Version: 23.2.6
* Build date: Wed May 01 2024
*
* Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import $ from "../core/renderer";
import {
value as viewPort
} from "../core/utils/view_port";
import {
extend
} from "../core/utils/extend";
import {
isPlainObject,
isString
} from "../core/utils/type";
import {
getWindow
} from "../core/utils/window";
import Toast from "./toast";
var window = getWindow();
var $notify = null;
var $containers = {};
function notify(message, typeOrStack, displayTime) {
var options = isPlainObject(message) ? message : {
message: message
};
var stack = isPlainObject(typeOrStack) ? typeOrStack : void 0;
var type = isPlainObject(typeOrStack) ? void 0 : typeOrStack;
var {
onHidden: userOnHidden
} = options;
if (null !== stack && void 0 !== stack && stack.position) {
var {
position: position
} = stack;
var direction = stack.direction || getDefaultDirection(position);
var containerKey = isString(position) ? position : "".concat(position.top, "-").concat(position.left, "-").concat(position.bottom, "-").concat(position.right);
var {
onShowing: userOnShowing
} = options;
var $container = getStackContainer(containerKey);
setContainerClasses($container, direction);
extend(options, {
container: $container,
_skipContentPositioning: true,
onShowing: function(args) {
setContainerStyles($container, direction, position);
null === userOnShowing || void 0 === userOnShowing ? void 0 : userOnShowing(args)
}
})
}
extend(options, {
type: type,
displayTime: displayTime,
onHidden: function(args) {
$(args.element).remove();
null === userOnHidden || void 0 === userOnHidden ? void 0 : userOnHidden(args)
}
});
$notify = $("<div>").appendTo(viewPort());
new Toast($notify, options).show()
}
var getDefaultDirection = position => isString(position) && position.includes("top") ? "down-push" : "up-push";
var createStackContainer = key => {
var $container = $("<div>").appendTo(viewPort());
$containers[key] = $container;
return $container
};
var getStackContainer = key => {
var $container = $containers[key];
return $container ? $container : createStackContainer(key)
};
var setContainerClasses = (container, direction) => {
var containerClasses = "dx-toast-stack dx-toast-stack-".concat(direction, "-direction");
container.removeAttr("class").addClass(containerClasses)
};
var setContainerStyles = (container, direction, position) => {
var {
offsetWidth: toastWidth,
offsetHeight: toastHeight
} = container.children().first().get(0);
var dimensions = {
toastWidth: toastWidth,
toastHeight: toastHeight,
windowHeight: window.innerHeight,
windowWidth: window.innerWidth
};
var coordinates = isString(position) ? getCoordinatesByAlias(position, dimensions) : position;
var styles = getPositionStylesByCoordinates(direction, coordinates, dimensions);
container.css(styles)
};
var getCoordinatesByAlias = (alias, _ref) => {
var {
toastWidth: toastWidth,
toastHeight: toastHeight,
windowHeight: windowHeight,
windowWidth: windowWidth
} = _ref;
switch (alias) {
case "top left":
return {
top: 10, left: 10
};
case "top right":
return {
top: 10, right: 10
};
case "bottom left":
return {
bottom: 10, left: 10
};
case "bottom right":
return {
bottom: 10, right: 10
};
case "top center":
return {
top: 10, left: Math.round(windowWidth / 2 - toastWidth / 2)
};
case "left center":
return {
top: Math.round(windowHeight / 2 - toastHeight / 2), left: 10
};
case "right center":
return {
top: Math.round(windowHeight / 2 - toastHeight / 2), right: 10
};
case "center":
return {
top: Math.round(windowHeight / 2 - toastHeight / 2), left: Math.round(windowWidth / 2 - toastWidth / 2)
};
case "bottom center":
default:
return {
bottom: 10, left: Math.round(windowWidth / 2 - toastWidth / 2)
}
}
};
var getPositionStylesByCoordinates = (direction, coordinates, dimensions) => {
var _coordinates$bottom, _coordinates$left, _coordinates$right, _coordinates$top, _coordinates$left2, _coordinates$right2, _coordinates$right3, _coordinates$top2, _coordinates$bottom2, _coordinates$left3, _coordinates$top3, _coordinates$bottom3;
var {
toastWidth: toastWidth,
toastHeight: toastHeight,
windowHeight: windowHeight,
windowWidth: windowWidth
} = dimensions;
switch (direction.replace(/-push|-stack/g, "")) {
case "up":
return {
bottom: null !== (_coordinates$bottom = coordinates.bottom) && void 0 !== _coordinates$bottom ? _coordinates$bottom : windowHeight - toastHeight - coordinates.top, top: "", left: null !== (_coordinates$left = coordinates.left) && void 0 !== _coordinates$left ? _coordinates$left : "", right: null !== (_coordinates$right = coordinates.right) && void 0 !== _coordinates$right ? _coordinates$right : ""
};
case "down":
return {
top: null !== (_coordinates$top = coordinates.top) && void 0 !== _coordinates$top ? _coordinates$top : windowHeight - toastHeight - coordinates.bottom, bottom: "", left: null !== (_coordinates$left2 = coordinates.left) && void 0 !== _coordinates$left2 ? _coordinates$left2 : "", right: null !== (_coordinates$right2 = coordinates.right) && void 0 !== _coordinates$right2 ? _coordinates$right2 : ""
};
case "left":
return {
right: null !== (_coordinates$right3 = coordinates.right) && void 0 !== _coordinates$right3 ? _coordinates$right3 : windowWidth - toastWidth - coordinates.left, left: "", top: null !== (_coordinates$top2 = coordinates.top) && void 0 !== _coordinates$top2 ? _coordinates$top2 : "", bottom: null !== (_coordinates$bottom2 = coordinates.bottom) && void 0 !== _coordinates$bottom2 ? _coordinates$bottom2 : ""
};
case "right":
return {
left: null !== (_coordinates$left3 = coordinates.left) && void 0 !== _coordinates$left3 ? _coordinates$left3 : windowWidth - toastWidth - coordinates.right, right: "", top: null !== (_coordinates$top3 = coordinates.top) && void 0 !== _coordinates$top3 ? _coordinates$top3 : "", bottom: null !== (_coordinates$bottom3 = coordinates.bottom) && void 0 !== _coordinates$bottom3 ? _coordinates$bottom3 : ""
}
}
};
export default notify;