devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
223 lines (218 loc) • 8.43 kB
JavaScript
/**
* DevExtreme (cjs/ui/speed_dial_action/speed_dial_item.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/
*/
"use strict";
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _extend = require("../../core/utils/extend");
var _events_engine = _interopRequireDefault(require("../../events/core/events_engine"));
var _index = require("../../events/utils/index");
var _click = require("../../events/click");
var _icon = require("../../core/utils/icon");
var _ui = _interopRequireDefault(require("../overlay/ui.overlay"));
var _utils = require("../widget/utils.ink_ripple");
var _themes = require("../themes");
var _type = require("../../core/utils/type");
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass)
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
o.__proto__ = p;
return o
};
return _setPrototypeOf(o, p)
}
const FAB_CLASS = "dx-fa-button";
const FAB_ICON_CLASS = "dx-fa-button-icon";
const FAB_LABEL_CLASS = "dx-fa-button-label";
const FAB_LABEL_WRAPPER_CLASS = "dx-fa-button-label-wrapper";
const FAB_CONTENT_REVERSE_CLASS = "dx-fa-button-content-reverse";
const OVERLAY_CONTENT_SELECTOR = ".dx-overlay-content";
let SpeedDialItem = function(_Overlay) {
_inheritsLoose(SpeedDialItem, _Overlay);
function SpeedDialItem() {
return _Overlay.apply(this, arguments) || this
}
var _proto = SpeedDialItem.prototype;
_proto._getDefaultOptions = function() {
return (0, _extend.extend)(_Overlay.prototype._getDefaultOptions.call(this), {
shading: false,
useInkRipple: false,
callOverlayRenderShading: false,
width: "auto",
zIndex: 1500,
_observeContentResize: false
})
};
_proto._defaultOptionsRules = function() {
return _Overlay.prototype._defaultOptionsRules.call(this).concat([{
device: () => (0, _themes.isMaterial)(),
options: {
useInkRipple: true
}
}])
};
_proto._moveToContainer = function() {
this._$wrapper.appendTo(this.$element());
this._$content.appendTo(this._$wrapper)
};
_proto._render = function() {
this.$element().addClass(FAB_CLASS);
this._renderIcon();
this._renderLabel();
_Overlay.prototype._render.call(this);
this.option("useInkRipple") && this._renderInkRipple();
this._renderClick()
};
_proto._renderLabel = function() {
!!this._$label && this._$label.remove();
const labelText = this.option("label");
if (!labelText) {
this._$label = null;
return
}
const $element = (0, _renderer.default)("<div>").addClass(FAB_LABEL_CLASS);
const $wrapper = (0, _renderer.default)("<div>").addClass(FAB_LABEL_WRAPPER_CLASS);
this._$label = $wrapper.prependTo(this.$content()).append($element.text(labelText));
this.$content().toggleClass(FAB_CONTENT_REVERSE_CLASS, this._isPositionLeft(this.option("parentPosition")))
};
_proto._isPositionLeft = function(position) {
let currentLocation = "";
if (position) {
if ((0, _type.isPlainObject)(position) && position.at) {
if (position.at.x) {
currentLocation = position.at.x
} else {
currentLocation = position.at
}
} else if ("string" === typeof position) {
currentLocation = position
}
}
return "left" === currentLocation.split(" ")[0]
};
_proto._renderButtonIcon = function($element, icon, iconClass) {
!!$element && $element.remove();
$element = (0, _renderer.default)("<div>").addClass(iconClass);
const $iconElement = (0, _icon.getImageContainer)(icon);
$element.append($iconElement).appendTo(this.$content());
return $element
};
_proto._renderIcon = function() {
this._$icon = this._renderButtonIcon(this._$icon, this._options.silent("icon"), FAB_ICON_CLASS)
};
_proto._renderWrapper = function() {
if (this._options.silent("callOverlayRenderShading")) {
_Overlay.prototype._renderWrapper.call(this)
}
};
_proto._getVisibleActions = function(actions) {
const currentActions = actions || this.option("actions") || [];
return currentActions.filter(action => action.option("visible"))
};
_proto._getActionComponent = function() {
if (1 === this._getVisibleActions().length) {
return this._getVisibleActions()[0]
} else {
return this.option("actionComponent") || this.option("actions")[0]
}
};
_proto._initContentReadyAction = function() {
this._contentReadyAction = this._getActionComponent()._createActionByOption("onContentReady", {
excludeValidators: ["disabled", "readOnly"]
}, true)
};
_proto._fireContentReadyAction = function() {
this._contentReadyAction({
actionElement: this.$element()
})
};
_proto._updateZIndexStackPosition = function() {
const zIndex = this.option("zIndex");
this._$wrapper.css("zIndex", zIndex);
this._$content.css("zIndex", zIndex)
};
_proto._setClickAction = function() {
const eventName = (0, _index.addNamespace)(_click.name, this.NAME);
const overlayContent = this.$element().find(".dx-overlay-content");
_events_engine.default.off(overlayContent, eventName);
_events_engine.default.on(overlayContent, eventName, e => {
const clickActionArgs = {
event: e,
actionElement: this.element(),
element: this._getActionComponent().$element()
};
this._clickAction(clickActionArgs)
})
};
_proto._defaultActionArgs = function() {
return {
component: this._getActionComponent()
}
};
_proto._renderClick = function() {
this._clickAction = this._getActionComponent()._createActionByOption("onClick");
this._setClickAction()
};
_proto._renderInkRipple = function() {
this._inkRipple = (0, _utils.render)()
};
_proto._getInkRippleContainer = function() {
return this._$icon
};
_proto._toggleActiveState = function($element, value, e) {
_Overlay.prototype._toggleActiveState.apply(this, arguments);
if (!this._inkRipple) {
return
}
const config = {
element: this._getInkRippleContainer(),
event: e
};
if (value) {
this._inkRipple.showWave(config)
} else {
this._inkRipple.hideWave(config)
}
};
_proto._optionChanged = function(args) {
switch (args.name) {
case "icon":
this._renderIcon();
break;
case "onClick":
this._renderClick();
break;
case "label":
this._renderLabel();
break;
case "visible":
this._currentVisible = args.previousValue;
args.value ? this._show() : this._hide();
break;
case "useInkRipple":
this._render();
break;
default:
_Overlay.prototype._optionChanged.call(this, args)
}
};
return SpeedDialItem
}(_ui.default);
var _default = SpeedDialItem;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;