devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
275 lines (232 loc) • 8.06 kB
JavaScript
"use strict";
var $ = require("../core/renderer"),
windowUtils = require("../core/utils/window"),
navigator = windowUtils.getNavigator(),
support = require("../core/utils/support"),
themes = require("./themes"),
browser = require("../core/utils/browser"),
extend = require("../core/utils/extend").extend,
devices = require("../core/devices"),
registerComponent = require("../core/component_registrator"),
Widget = require("./widget/ui.widget");
var LOADINDICATOR_CLASS = "dx-loadindicator",
LOADINDICATOR_WRAPPER_CLASS = "dx-loadindicator-wrapper",
LOADINDICATOR_CONTENT_CLASS = "dx-loadindicator-content",
LOADINDICATOR_ICON_CLASS = "dx-loadindicator-icon",
LOADINDICATOR_SEGMENT_CLASS = "dx-loadindicator-segment",
LOADINDICATOR_SEGMENT_INNER_CLASS = "dx-loadindicator-segment-inner",
LOADINDICATOR_IMAGE_CLASS = "dx-loadindicator-image";
/**
* @name dxLoadIndicator
* @publicName dxLoadIndicator
* @inherits Widget
* @module ui/load_indicator
* @export default
*/
var LoadIndicator = Widget.inherit({
_getDefaultOptions: function _getDefaultOptions() {
return extend(this.callBase(), {
/**
* @name dxLoadIndicatoroptions.indicatorsrc
* @publicName indicatorSrc
* @type string
* @default ""
*/
indicatorSrc: "",
/**
* @name dxLoadIndicatoroptions.disabled
* @publicName disabled
* @hidden
* @inheritdoc
*/
/**
* @name dxLoadIndicatoroptions.activeStateEnabled
* @publicName activeStateEnabled
* @hidden
* @inheritdoc
*/
activeStateEnabled: false,
/**
* @name dxLoadIndicatoroptions.hoverStateEnabled
* @publicName hoverStateEnabled
* @default false
* @hidden
* @inheritdoc
*/
hoverStateEnabled: false,
/**
* @name dxLoadIndicatoroptions.focusStateEnabled
* @publicName focusStateEnabled
* @hidden
* @inheritdoc
*/
/**
* @name dxLoadIndicatoroptions.accessKey
* @publicName accessKey
* @hidden
* @inheritdoc
*/
/**
* @name dxLoadIndicatoroptions.tabIndex
* @publicName tabIndex
* @hidden
* @inheritdoc
*/
_animatingSegmentCount: 1,
_animatingSegmentInner: false
});
},
_defaultOptionsRules: function _defaultOptionsRules() {
var themeName = function themeName() {
var currentTheme = themes.current();
return currentTheme && currentTheme.split(".")[0];
};
return this.callBase().concat([{
device: function device() {
var realDevice = devices.real(),
obsoleteAndroid = realDevice.platform === "android" && !/chrome/i.test(navigator.userAgent);
return browser.msie && browser.version < 10 || obsoleteAndroid;
},
options: {
viaImage: true
}
}, {
device: function device() {
return themeName() === "win8" || themeName() === "win10";
},
options: {
_animatingSegmentCount: 5
}
}, {
device: function device() {
return themeName() === "ios7";
},
options: {
_animatingSegmentCount: 11
}
}, {
device: function device() {
return (/(android5|material)/.test(themeName())
);
},
options: {
_animatingSegmentCount: 2,
_animatingSegmentInner: true
}
}, {
device: function device() {
return themeName() === "generic";
},
options: {
_animatingSegmentCount: 7
}
}]);
},
_init: function _init() {
this.callBase();
this.$element().addClass(LOADINDICATOR_CLASS);
},
_initMarkup: function _initMarkup() {
this.callBase();
this._renderWrapper();
this._renderIndicatorContent();
this._renderMarkup();
},
_renderWrapper: function _renderWrapper() {
this._$wrapper = $("<div>").addClass(LOADINDICATOR_WRAPPER_CLASS);
this.$element().append(this._$wrapper);
},
_renderIndicatorContent: function _renderIndicatorContent() {
this._$content = $("<div>").addClass(LOADINDICATOR_CONTENT_CLASS);
this._$wrapper.append(this._$content);
},
_renderMarkup: function _renderMarkup() {
if (support.animation() && !this.option("viaImage") && !this.option("indicatorSrc")) {
// B236922
this._renderMarkupForAnimation();
} else {
this._renderMarkupForImage();
}
},
_renderMarkupForAnimation: function _renderMarkupForAnimation() {
var animatingSegmentInner = this.option("_animatingSegmentInner");
this._$indicator = $("<div>").addClass(LOADINDICATOR_ICON_CLASS);
this._$content.append(this._$indicator);
// Indicator markup
for (var i = this.option("_animatingSegmentCount"); i >= 0; --i) {
var $segment = $("<div>").addClass(LOADINDICATOR_SEGMENT_CLASS).addClass(LOADINDICATOR_SEGMENT_CLASS + i);
if (animatingSegmentInner) {
$segment.append($("<div>").addClass(LOADINDICATOR_SEGMENT_INNER_CLASS));
}
this._$indicator.append($segment);
}
},
_renderMarkupForImage: function _renderMarkupForImage() {
var indicatorSrc = this.option("indicatorSrc");
this._$wrapper.addClass(LOADINDICATOR_IMAGE_CLASS);
if (indicatorSrc) {
this._$wrapper.css("backgroundImage", "url(" + indicatorSrc + ")");
}
},
_renderDimensions: function _renderDimensions() {
this.callBase();
this._updateContentSizeForAnimation();
},
_updateContentSizeForAnimation: function _updateContentSizeForAnimation() {
if (!this._$indicator) {
return;
}
var width = this.option("width"),
height = this.option("height");
if (width || height) {
width = this.$element().width();
height = this.$element().height();
var minDimension = Math.min(height, width);
this._$wrapper.css({
height: minDimension,
width: minDimension,
fontSize: minDimension
});
}
},
_clean: function _clean() {
this.callBase();
this._removeMarkupForAnimation();
this._removeMarkupForImage();
},
_removeMarkupForAnimation: function _removeMarkupForAnimation() {
if (!this._$indicator) {
return;
}
this._$indicator.remove();
delete this._$indicator;
},
_removeMarkupForImage: function _removeMarkupForImage() {
this._$wrapper.css("backgroundImage", "none");
},
_optionChanged: function _optionChanged(args) {
switch (args.name) {
case "_animatingSegmentCount":
case "_animatingSegmentInner":
case "indicatorSrc":
this._invalidate();
break;
default:
this.callBase(args);
}
}
/**
* @name dxLoadIndicatorMethods.registerKeyHandler
* @publicName registerKeyHandler(key, handler)
* @hidden
* @inheritdoc
*/
/**
* @name dxLoadIndicatorMethods.focus
* @publicName focus()
* @hidden
* @inheritdoc
*/
});
registerComponent("dxLoadIndicator", LoadIndicator);
module.exports = LoadIndicator;