devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
386 lines (329 loc) • 10.7 kB
JavaScript
"use strict";
var $ = require("../core/renderer"),
noop = require("../core/utils/common").noop,
messageLocalization = require("../localization/message"),
registerComponent = require("../core/component_registrator"),
extend = require("../core/utils/extend").extend,
LoadIndicator = require("./load_indicator"),
Overlay = require("./overlay"),
Deferred = require("../core/utils/deferred").Deferred,
themes = require("./themes");
var LOADPANEL_CLASS = "dx-loadpanel",
LOADPANEL_WRAPPER_CLASS = "dx-loadpanel-wrapper",
LOADPANEL_INDICATOR_CLASS = "dx-loadpanel-indicator",
LOADPANEL_MESSAGE_CLASS = "dx-loadpanel-message",
LOADPANEL_CONTENT_CLASS = "dx-loadpanel-content",
LOADPANEL_CONTENT_WRAPPER_CLASS = "dx-loadpanel-content-wrapper",
LOADPANEL_PANE_HIDDEN_CLASS = "dx-loadpanel-pane-hidden";
/**
* @name dxLoadPanel
* @publicName dxLoadPanel
* @inherits dxOverlay
* @module ui/load_panel
* @export default
*/
var LoadPanel = Overlay.inherit({
_supportedKeys: function _supportedKeys() {
return extend(this.callBase(), {
escape: noop
});
},
_getDefaultOptions: function _getDefaultOptions() {
return extend(this.callBase(), {
/**
* @name dxLoadPanelOptions.message
* @publicName message
* @type string
* @default "Loading ..."
*/
message: messageLocalization.format("Loading"),
/**
* @name dxLoadPanelOptions.width
* @publicName width
* @inheritdoc
* @default 222
*/
width: 222,
/**
* @name dxLoadPanelOptions.height
* @publicName height
* @inheritdoc
* @default 90
*/
height: 90,
/**
* @name dxLoadPanelOptions.position
* @publicName position
* @type Enums.PositionAlignment|positionConfig|function
* @inheritdoc
*/
/**
* @name dxLoadPanelOptions.animation
* @publicName animation
* @type object
* @default null
*/
/**
* @name dxLoadPanelOptions.animation.show
* @publicName show
* @type animationConfig
* @default null
* @inheritdoc
*/
/**
* @name dxLoadPanelOptions.animation.hide
* @publicName hide
* @type animationConfig
* @default null
* @inheritdoc
*/
animation: null,
/**
* @name dxLoadPanelOptions.disabled
* @publicName disabled
* @hidden
* @inheritdoc
*/
/**
* @name dxLoadPanelOptions.showIndicator
* @publicName showIndicator
* @type boolean
* @default true
*/
showIndicator: true,
/**
* @name dxLoadPanelOptions.indicatorSrc
* @publicName indicatorSrc
* @type string
* @default ""
*/
indicatorSrc: "",
/**
* @name dxLoadPanelOptions.showPane
* @publicName showPane
* @type boolean
* @default true
*/
showPane: true,
/**
* @name dxLoadPanelOptions.delay
* @publicName delay
* @type Number
* @default 0
*/
delay: 0,
/**
* @name dxLoadPanelOptions.closeOnBackButton
* @publicName closeOnBackButton
* @default false
* @hidden
* @inheritdoc
*/
closeOnBackButton: false,
/**
* @name dxLoadPanelOptions.resizeEnabled
* @publicName resizeEnabled
* @hidden
* @inheritdoc
*/
resizeEnabled: false,
/**
* @name dxLoadPanelOptions.focusStateEnabled
* @publicName focusStateEnabled
* @type boolean
* @default false
*/
focusStateEnabled: false
/**
* @name dxLoadPanelOptions.dragEnabled
* @publicName dragEnabled
* @hidden
* @inheritdoc
*/
/**
* @name dxLoadPanelOptions.contentTemplate
* @publicName contentTemplate
* @hidden
* @inheritdoc
*/
/**
* @name dxLoadPanelOptions.accessKey
* @publicName accessKey
* @hidden
* @inheritdoc
*/
/**
* @name dxLoadPanelOptions.tabIndex
* @publicName tabIndex
* @hidden
* @inheritdoc
*/
});
},
_defaultOptionsRules: function _defaultOptionsRules() {
return this.callBase().concat([{
/**
* @name dxLoadPanelOptions.shadingColor
* @publicName shadingColor
* @default 'transparent'
* @default '' @for Android|iOS|Windows_Mobile
* @inheritdoc
*/
device: { platform: "generic" },
options: {
shadingColor: "transparent"
}
}, {
device: function device() {
return themes.isMaterial();
},
options: {
/**
* @name dxLoadPanelOptions.message
* @publicName message
* @default "" @for Material
*/
message: "",
/**
* @name dxLoadPanelOptions.width
* @publicName width
* @inheritdoc
* @default 60 @for Material
*/
width: 60,
/**
* @name dxLoadPanelOptions.height
* @publicName height
* @inheritdoc
* @default 60 @for Material
*/
height: 60,
/**
* @name dxLoadPanelOptions.maxHeight
* @publicName maxHeight
* @inheritdoc
* @default 60 @for Material
*/
maxHeight: 60,
/**
* @name dxLoadPanelOptions.maxWidth
* @publicName maxWidth
* @inheritdoc
* @default 60 @for Material
*/
maxWidth: 60
}
}]);
},
_init: function _init() {
this.callBase.apply(this, arguments);
},
_initOptions: function _initOptions() {
this.callBase.apply(this, arguments);
this.option("templatesRenderAsynchronously", false);
},
_render: function _render() {
this.callBase();
this.$element().addClass(LOADPANEL_CLASS);
this._wrapper().addClass(LOADPANEL_WRAPPER_CLASS);
},
_renderContentImpl: function _renderContentImpl() {
this.callBase();
this.$content().addClass(LOADPANEL_CONTENT_CLASS);
this._$contentWrapper = $("<div>").addClass(LOADPANEL_CONTENT_WRAPPER_CLASS);
this._$contentWrapper.appendTo(this._$content);
this._togglePaneVisible();
this._cleanPreviousContent();
this._renderLoadIndicator();
this._renderMessage();
},
_show: function _show() {
var delay = this.option("delay");
if (!delay) {
return this.callBase();
}
var deferred = new Deferred();
var callBase = this.callBase.bind(this);
this._clearShowTimeout();
this._showTimeout = setTimeout(function () {
callBase().done(function () {
deferred.resolve();
});
}, delay);
return deferred.promise();
},
_hide: function _hide() {
this._clearShowTimeout();
return this.callBase();
},
_clearShowTimeout: function _clearShowTimeout() {
clearTimeout(this._showTimeout);
},
_renderMessage: function _renderMessage() {
if (!this._$contentWrapper) {
return;
}
var message = this.option("message");
if (!message) return;
var $message = $("<div>").addClass(LOADPANEL_MESSAGE_CLASS).text(message);
this._$contentWrapper.append($message);
},
_renderLoadIndicator: function _renderLoadIndicator() {
if (!this._$contentWrapper || !this.option("showIndicator")) {
return;
}
this._$indicator = $("<div>").addClass(LOADPANEL_INDICATOR_CLASS).appendTo(this._$contentWrapper);
this._createComponent(this._$indicator, LoadIndicator, {
indicatorSrc: this.option("indicatorSrc")
});
},
_cleanPreviousContent: function _cleanPreviousContent() {
this.$content().find("." + LOADPANEL_MESSAGE_CLASS).remove();
this.$content().find("." + LOADPANEL_INDICATOR_CLASS).remove();
},
_togglePaneVisible: function _togglePaneVisible() {
this.$content().toggleClass(LOADPANEL_PANE_HIDDEN_CLASS, !this.option("showPane"));
},
_optionChanged: function _optionChanged(args) {
switch (args.name) {
case "delay":
break;
case "message":
case "showIndicator":
this._cleanPreviousContent();
this._renderLoadIndicator();
this._renderMessage();
break;
case "showPane":
this._togglePaneVisible();
break;
case "indicatorSrc":
if (this._$indicator) {
this._createComponent(this._$indicator, LoadIndicator, {
indicatorSrc: this.option("indicatorSrc")
});
}
break;
default:
this.callBase(args);
}
},
_dispose: function _dispose() {
this._clearShowTimeout();
this.callBase();
}
/**
* @name dxLoadPanelMethods.registerKeyHandler
* @publicName registerKeyHandler(key, handler)
* @hidden
* @inheritdoc
*/
/**
* @name dxLoadPanelMethods.focus
* @publicName focus()
* @hidden
* @inheritdoc
*/
});
registerComponent("dxLoadPanel", LoadPanel);
module.exports = LoadPanel;