devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
219 lines (218 loc) • 7.08 kB
JavaScript
/**
* DevExtreme (cjs/viz/core/loading_indicator.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.plugin = exports.LoadingIndicator = void 0;
var _utils = require("./utils");
const STATE_HIDDEN = 0;
const STATE_SHOWN = 1;
const ANIMATION_EASING = "linear";
const ANIMATION_DURATION = 400;
const LOADING_INDICATOR_READY = "loadingIndicatorReady";
let LoadingIndicator = function(parameters) {
const renderer = parameters.renderer;
this._group = renderer.g().attr({
class: "dx-loading-indicator"
}).linkOn(renderer.root, {
name: "loading-indicator",
after: "peripheral"
});
this._rect = renderer.rect().attr({
opacity: 0
}).append(this._group);
this._text = renderer.text().attr({
align: "center"
}).append(this._group);
this._createStates(parameters.eventTrigger, this._group, renderer.root, parameters.notify)
};
exports.LoadingIndicator = LoadingIndicator;
LoadingIndicator.prototype = {
constructor: LoadingIndicator,
_createStates: function(eventTrigger, group, root, notify) {
this._states = [{
opacity: 0,
start: function() {
notify(false)
},
complete: function() {
group.linkRemove();
root.css({
"pointer-events": ""
});
eventTrigger("loadingIndicatorReady")
}
}, {
opacity: .85,
start: function() {
group.linkAppend();
root.css({
"pointer-events": "none"
});
notify(true)
},
complete: function() {
eventTrigger("loadingIndicatorReady")
}
}];
this._state = 0
},
setSize: function(size) {
const width = size.width;
const height = size.height;
this._rect.attr({
width: width,
height: height
});
this._text.attr({
x: width / 2,
y: height / 2
})
},
setOptions: function(options) {
this._rect.attr({
fill: options.backgroundColor
});
this._text.css((0, _utils.patchFontOptions)(options.font)).attr({
text: options.text,
class: options.cssClass
});
this[options.show ? "show" : "hide"]()
},
dispose: function() {
this._group.linkRemove().linkOff();
this._group = this._rect = this._text = this._states = null
},
_transit: function(stateId) {
const that = this;
let state;
if (that._state !== stateId) {
that._state = stateId;
that._isHiding = false;
state = that._states[stateId];
that._rect.stopAnimation().animate({
opacity: state.opacity
}, {
complete: state.complete,
easing: "linear",
duration: 400,
unstoppable: true
});
that._noHiding = true;
state.start();
that._noHiding = false
}
},
show: function() {
this._transit(1)
},
hide: function() {
this._transit(0)
},
scheduleHiding: function() {
if (!this._noHiding) {
this._isHiding = true
}
},
fulfillHiding: function() {
if (this._isHiding) {
this.hide()
}
}
};
const plugin = exports.plugin = {
name: "loading_indicator",
init: function() {
const that = this;
that._loadingIndicator = new LoadingIndicator({
eventTrigger: that._eventTrigger,
renderer: that._renderer,
notify: function(state) {
that._skipLoadingIndicatorOptions = true;
that.option("loadingIndicator", {
show: state
});
that._skipLoadingIndicatorOptions = false;
if (state) {
that._stopCurrentHandling()
}
}
});
that._scheduleLoadingIndicatorHiding()
},
dispose: function() {
this._loadingIndicator.dispose();
this._loadingIndicator = null
},
members: {
_scheduleLoadingIndicatorHiding: function() {
this._loadingIndicator.scheduleHiding()
},
_fulfillLoadingIndicatorHiding: function() {
this._loadingIndicator.fulfillHiding()
},
showLoadingIndicator: function() {
this._loadingIndicator.show()
},
hideLoadingIndicator: function() {
this._loadingIndicator.hide()
},
_onBeginUpdate: function() {
if (!this._optionChangedLocker) {
this._scheduleLoadingIndicatorHiding()
}
}
},
extenders: {
_dataSourceLoadingChangedHandler(isLoading) {
if (isLoading && (this._options.silent("loadingIndicator") || {}).enabled) {
this._loadingIndicator.show()
}
},
_setContentSize() {
this._loadingIndicator.setSize(this._canvas)
},
endUpdate() {
if (this._initialized && this._dataIsReady()) {
this._fulfillLoadingIndicatorHiding()
}
}
},
customize: function(constructor) {
const proto = constructor.prototype;
if (proto._dataSourceChangedHandler) {
const _dataSourceChangedHandler = proto._dataSourceChangedHandler;
proto._dataSourceChangedHandler = function() {
this._scheduleLoadingIndicatorHiding();
_dataSourceChangedHandler.apply(this, arguments)
}
}
constructor.addChange({
code: "LOADING_INDICATOR",
handler: function() {
if (!this._skipLoadingIndicatorOptions) {
this._loadingIndicator.setOptions(this._getOption("loadingIndicator"))
}
this._scheduleLoadingIndicatorHiding()
},
isThemeDependent: true,
option: "loadingIndicator",
isOptionChange: true
});
proto._eventsMap.onLoadingIndicatorReady = {
name: "loadingIndicatorReady"
};
const _drawn = proto._drawn;
proto._drawn = function() {
_drawn.apply(this, arguments);
if (this._dataIsReady()) {
this._fulfillLoadingIndicatorHiding()
}
}
},
fontFields: ["loadingIndicator.font"]
};