devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
531 lines (462 loc) • 15.4 kB
JavaScript
"use strict";
var $ = require("../core/renderer"),
window = require("../core/utils/window").getWindow(),
noop = require("../core/utils/common").noop,
messageLocalization = require("../localization/message"),
registerComponent = require("../core/component_registrator"),
extend = require("../core/utils/extend").extend,
Button = require("./button"),
CollectionWidget = require("./collection/ui.collection_widget.edit"),
Popup = require("./popup"),
Popover = require("./popover"),
BindableTemplate = require("./widget/bindable_template"),
Deferred = require("../core/utils/deferred").Deferred;
var ACTION_SHEET_CLASS = "dx-actionsheet",
ACTION_SHEET_CONTAINER_CLASS = "dx-actionsheet-container",
ACTION_SHEET_POPUP_WRAPPER_CLASS = "dx-actionsheet-popup-wrapper",
ACTION_SHEET_POPOVER_WRAPPER_CLASS = "dx-actionsheet-popover-wrapper",
ACTION_SHEET_CANCEL_BUTTON_CLASS = "dx-actionsheet-cancel",
ACTION_SHEET_ITEM_CLASS = "dx-actionsheet-item",
ACTION_SHEET_ITEM_DATA_KEY = "dxActionSheetItemData",
ACTION_SHEET_WITHOUT_TITLE_CLASS = "dx-actionsheet-without-title";
/**
* @name dxactionsheet
* @publicName dxActionSheet
* @inherits CollectionWidget
* @module ui/action_sheet
* @export default
*/
var ActionSheet = CollectionWidget.inherit({
_getDefaultOptions: function _getDefaultOptions() {
return extend(this.callBase(), {
/**
* @name dxActionSheetOptions.usePopover
* @publicName usePopover
* @type boolean
* @default false
*/
usePopover: false,
/**
* @name dxActionSheetOptions.target
* @publicName target
* @type string|Node|jQuery
*/
target: null,
/**
* @name dxActionSheetOptions.title
* @publicName title
* @type string
* @default ""
*/
title: "",
/**
* @name dxActionSheetOptions.showTitle
* @publicName showTitle
* @type boolean
* @default true
*/
showTitle: true,
/**
* @name dxActionSheetOptions.showCancelButton
* @publicName showCancelButton
* @type boolean
* @default true
*/
showCancelButton: true,
/**
* @name dxActionSheetOptions.cancelText
* @publicName cancelText
* @type string
* @default "Cancel"
*/
cancelText: messageLocalization.format("Cancel"),
/**
* @name dxActionSheetOptions.onCancelClick
* @publicName onCancelClick
* @type function(e)|string
* @extends Action
* @type_function_param1 e:object
* @type_function_param1_field4 cancel:boolean
* @action
*/
onCancelClick: null,
/**
* @name dxActionSheetOptions.visible
* @publicName visible
* @type boolean
* @default false
*/
visible: false,
/**
* @name dxActionSheetOptions.noDataText
* @publicName noDataText
* @hidden
* @inheritdoc
*/
noDataText: "",
/**
* @name dxActionSheetOptions.activeStateEnabled
* @publicName activeStateEnabled
* @hidden
* @inheritdoc
*/
/**
* @name dxActionSheetOptions.selectedIndex
* @publicName selectedIndex
* @hidden
* @inheritdoc
*/
/**
* @name dxActionSheetOptions.selectedItem
* @publicName selectedItem
* @hidden
* @inheritdoc
*/
/**
* @name dxActionSheetOptions.onSelectionChanged
* @publicName onSelectionChanged
* @action
* @hidden
* @inheritdoc
*/
/**
* @name dxActionSheetOptions.selectedItems
* @publicName selectedItems
* @hidden
* @inheritdoc
*/
/**
* @name dxActionSheetOptions.selectedItemKeys
* @publicName selectedItemKeys
* @hidden
* @inheritdoc
*/
/**
* @name dxActionSheetOptions.keyExpr
* @publicName keyExpr
* @hidden
* @inheritdoc
*/
/**
* @name dxActionSheetOptions.accessKey
* @publicName accessKey
* @hidden
* @inheritdoc
*/
/**
* @name dxActionSheetOptions.tabIndex
* @publicName tabIndex
* @hidden
* @inheritdoc
*/
/**
* @name dxActionSheetOptions.focusStateEnabled
* @publicName focusStateEnabled
* @type boolean
* @default false
* @hidden
*/
focusStateEnabled: false,
selectionByClick: false
});
},
_defaultOptionsRules: function _defaultOptionsRules() {
return this.callBase().concat([{
device: { platform: "ios", tablet: true },
options: {
/**
* @name dxActionSheetOptions.usePopover
* @publicName usePopover
* @default true @for iPad
*/
usePopover: true
}
}]);
},
_initTemplates: function _initTemplates() {
this.callBase();
/**
* @name dxActionSheetItemTemplate
* @publicName dxActionSheetItemTemplate
* @inherits CollectionWidgetItemTemplate
* @type object
*/
/**
* @name dxActionSheetItemTemplate.type
* @publicName type
* @type Enums.ButtonType
* @default 'normal'
*/
/**
* @name dxActionSheetItemTemplate.onClick
* @publicName onClick
* @type function(e)|string
* @extends Action
* @type_function_param1 e:object
* @type_function_param1_field4 jQueryEvent:jQuery.Event:deprecated(event)
* @type_function_param1_field5 event:event
*/
/**
* @name dxActionSheetItemTemplate.icon
* @publicName icon
* @type String
*/
/**
* @name dxActionSheetItemTemplate.visible
* @publicName visible
* @type boolean
* @default true
* @hidden
*/
/**
* @name dxActionSheetItemTemplate.html
* @publicName html
* @type String
* @hidden
*/
this._defaultTemplates["item"] = new BindableTemplate(function ($container, data) {
var button = new Button($("<div>"), extend({ onClick: data && data.click }, data));
$container.append(button.$element());
}, ["disabled", "icon", "text", "type", "onClick", "click"], this.option("integrationOptions.watchMethod"));
},
_itemContainer: function _itemContainer() {
return this._$itemContainer;
},
_itemClass: function _itemClass() {
return ACTION_SHEET_ITEM_CLASS;
},
_itemDataKey: function _itemDataKey() {
return ACTION_SHEET_ITEM_DATA_KEY;
},
_toggleVisibility: noop,
_renderDimensions: noop,
_initMarkup: function _initMarkup() {
this.callBase();
this.$element().addClass(ACTION_SHEET_CLASS);
this._createItemContainer();
},
_render: function _render() {
this._renderPopup();
},
_createItemContainer: function _createItemContainer() {
this._$itemContainer = $("<div>").addClass(ACTION_SHEET_CONTAINER_CLASS);
this._renderDisabled();
},
_renderDisabled: function _renderDisabled() {
this._$itemContainer.toggleClass("dx-state-disabled", this.option("disabled"));
},
_renderPopup: function _renderPopup() {
this._$popup = $("<div>").appendTo(this.$element());
this._isPopoverMode() ? this._createPopover() : this._createPopup();
this._renderPopupTitle();
this._mapPopupOption("visible");
},
_mapPopupOption: function _mapPopupOption(optionName) {
this._popup && this._popup.option(optionName, this.option(optionName));
},
_isPopoverMode: function _isPopoverMode() {
return this.option("usePopover") && this.option("target");
},
_renderPopupTitle: function _renderPopupTitle() {
this._mapPopupOption("showTitle");
this._popup && this._popup._wrapper().toggleClass(ACTION_SHEET_WITHOUT_TITLE_CLASS, !this.option("showTitle"));
},
_clean: function _clean() {
if (this._$popup) {
this._$popup.remove();
}
this.callBase();
},
_overlayConfig: function _overlayConfig() {
return {
onInitialized: function (args) {
this._popup = args.component;
}.bind(this),
disabled: false,
showTitle: true,
title: this.option("title"),
deferRendering: !window.angular,
onContentReady: this._popupContentReadyAction.bind(this),
onHidden: this.hide.bind(this)
};
},
_createPopover: function _createPopover() {
this._createComponent(this._$popup, Popover, extend(this._overlayConfig(), {
width: this.option("width") || 200,
height: this.option("height") || "auto",
target: this.option("target")
}));
this._popup._wrapper().addClass(ACTION_SHEET_POPOVER_WRAPPER_CLASS);
},
_createPopup: function _createPopup() {
this._createComponent(this._$popup, Popup, extend(this._overlayConfig(), {
dragEnabled: false,
width: this.option("width") || "100%",
height: this.option("height") || "auto",
showCloseButton: false,
position: {
my: "bottom",
at: "bottom",
of: window
},
animation: {
show: {
type: "slide",
duration: 400,
from: {
position: {
my: "top",
at: "bottom",
of: window
}
},
to: {
position: {
my: "bottom",
at: "bottom",
of: window
}
}
},
hide: {
type: "slide",
duration: 400,
from: {
position: {
my: "bottom",
at: "bottom",
of: window
}
},
to: {
position: {
my: "top",
at: "bottom",
of: window
}
}
}
}
}));
this._popup._wrapper().addClass(ACTION_SHEET_POPUP_WRAPPER_CLASS);
},
_popupContentReadyAction: function _popupContentReadyAction() {
this._popup.$content().append(this._$itemContainer);
this._attachClickEvent();
this._attachHoldEvent();
this._prepareContent();
this._renderContent();
this._renderCancelButton();
},
_renderCancelButton: function _renderCancelButton() {
if (this._isPopoverMode()) {
return;
}
if (this._$cancelButton) {
this._$cancelButton.remove();
}
if (this.option("showCancelButton")) {
var cancelClickAction = this._createActionByOption("onCancelClick") || noop,
that = this;
this._$cancelButton = $("<div>").addClass(ACTION_SHEET_CANCEL_BUTTON_CLASS).appendTo(this._popup && this._popup.$content());
this._createComponent(this._$cancelButton, Button, {
disabled: false,
text: this.option("cancelText"),
onClick: function onClick(e) {
var hidingArgs = { event: e, cancel: false };
cancelClickAction(hidingArgs);
if (!hidingArgs.cancel) {
that.hide();
}
},
integrationOptions: {}
});
}
},
_attachItemClickEvent: noop,
_itemClickHandler: function _itemClickHandler(e) {
this.callBase(e);
if (!$(e.target).is(".dx-state-disabled, .dx-state-disabled *")) {
this.hide();
}
},
_itemHoldHandler: function _itemHoldHandler(e) {
this.callBase(e);
if (!$(e.target).is(".dx-state-disabled, .dx-state-disabled *")) {
this.hide();
}
},
_optionChanged: function _optionChanged(args) {
switch (args.name) {
case "width":
case "height":
case "visible":
case "title":
this._mapPopupOption(args.name);
break;
case "disabled":
this._renderDisabled();
break;
case "showTitle":
this._renderPopupTitle();
break;
case "showCancelButton":
case "onCancelClick":
case "cancelText":
this._renderCancelButton();
break;
case "target":
case "usePopover":
case "items":
this._invalidate();
break;
default:
this.callBase(args);
}
},
/**
* @name dxactionsheetmethods.toggle
* @publicName toggle(showing)
* @param1 showing:boolean
* @return Promise<void>
*/
toggle: function toggle(showing) {
var that = this,
d = new Deferred();
that._popup.toggle(showing).done(function () {
that.option("visible", showing);
d.resolveWith(that);
});
return d.promise();
},
/**
* @name dxactionsheetmethods.show
* @publicName show()
* @return Promise<void>
*/
show: function show() {
return this.toggle(true);
},
/**
* @name dxactionsheetmethods.hide
* @publicName hide()
* @return Promise<void>
*/
hide: function hide() {
return this.toggle(false);
}
/**
* @name dxactionsheetmethods.registerKeyHandler
* @publicName registerKeyHandler(key, handler)
* @hidden
* @inheritdoc
*/
/**
* @name dxactionsheetmethods.focus
* @publicName focus()
* @hidden
* @inheritdoc
*/
});
registerComponent("dxActionSheet", ActionSheet);
module.exports = ActionSheet;