axis.wavesurfer.js
Version:
A wavesurfer.js plugin just to display axes
114 lines • 3.77 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// WaveSurferAxis
// TODO: fix d.ts:
// * class -> interface
// * WaveSurferPlugin.constructor
var WaveSurferAxis = /** @class */ (function () {
// WaveSurferAxis()
function WaveSurferAxis(params, ws) {
this.waveContainer = null;
this.axisX = null;
this.axisY = null;
// options:
this.width = 1;
this.color = "black";
this.hideOnReady = false;
this.wavesurfer = ws;
if (params.width !== undefined) {
this.width = params.width;
}
if (params.color !== undefined) {
this.color = params.color;
}
if (params.hideOnReady !== undefined) {
this.hideOnReady = params.hideOnReady;
}
}
// WaveSurferAxis.create()
WaveSurferAxis.create = function (params) {
return {
name: "axis",
params: params || {},
instance: WaveSurferAxis
};
};
// init()
WaveSurferAxis.prototype.init = function () {
var _this = this;
this._checkIfWSElementLoaded(function (elem) {
_this.waveContainer = elem;
_this._appendAxisElements();
});
this.wavesurfer.on("ready", function () { _this._onReady(); });
};
// destroy()
WaveSurferAxis.prototype.destroy = function () {
var _this = this;
this.wavesurfer.un("ready", function () { _this._onReady(); });
this._removeAxisElements();
};
// _checkIfWSElementLoaded()
WaveSurferAxis.prototype._checkIfWSElementLoaded = function (onLoaded) {
var _this = this;
var childNodes = this.wavesurfer.container.childNodes;
if (0 < childNodes.length) {
onLoaded(childNodes[0]);
}
else {
window.setTimeout(function () {
_this._checkIfWSElementLoaded(onLoaded);
}, 100);
}
};
// _onReady()
WaveSurferAxis.prototype._onReady = function () {
if (this.hideOnReady) {
this._removeAxisElements();
}
};
// _appendAxisElements()
WaveSurferAxis.prototype._appendAxisElements = function () {
if (this.waveContainer === null) {
return;
}
this._removeAxisElements();
var axisX = document.createElement("div");
axisX.style.cssText =
"background-color: " + this.color + ";" +
"position: absolute;" +
"top: 50%;" +
"left: 0px;" +
("width: " + this.waveContainer.offsetWidth + "px;") +
("height: " + this.width + "px;");
var axisY = document.createElement("div");
axisY.style.cssText =
"background-color: " + this.color + ";" +
"position: absolute;" +
"top: 0px;" +
"left: 0px;" +
("width: " + this.width + "px;") +
("height: " + this.waveContainer.clientHeight + "px;");
this.axisX = axisX;
this.axisY = axisY;
this.waveContainer.appendChild(axisY);
this.waveContainer.appendChild(axisX);
};
// _removeAxisElements()
WaveSurferAxis.prototype._removeAxisElements = function () {
if (this.waveContainer === null) {
return;
}
if (this.axisX !== null) {
this.waveContainer.removeChild(this.axisX);
this.axisX = null;
}
if (this.axisY !== null) {
this.waveContainer.removeChild(this.axisY);
this.axisY = null;
}
};
return WaveSurferAxis;
}());
exports.WaveSurferAxis = WaveSurferAxis;
//# sourceMappingURL=index.js.map