JSFiddle - React, Tailwind, and code Playground
by alexflav23
HTML
<div id="container"></div>
CSS
#container {
width: 300px;
height: 400px;
border: 1px solid #000;
}
JavaScript
var slotengine = {};
slotengine.nullFunction = function(){};
/**
* A slot instance.
* @param {Array.<Object>} selectOptions The array of options the slot has.
* @param {Object} defaultValue The option selected by default.
* @param {string} title The title of the slot instance.
* @constructor
*/
function Slot(selectOptions, defaultOption, title) {
/**
* The options of the slot.
* @type {Array.<Object>}
* @private
*/
this.options_ = selectOptions;
console.log(this.options_);
/**
* The option selected by default.
* @type {Object}
* @private
*/
this.defaultOption_ = defaultOption;
/**
* The title of the slot
* @type {string}
* @private
*/
this.title_ = title;
/**
* The item size
* @type {Object}
* @private
*/
this.itemSize_ = {
height: 30,
width: 100
};
/**
* Get the selectable options of the Slot instance.
* @return {Array.<Object>}
*/
this.getOptions = function() {
return this.options_;
};
};
/**
* Get the option selected by default for this slot instance.
* @return {Object}
*/
Slot.prototype.getDefaultOption = function() {
return this.defaultOption_;
};
/**
* Get the title of the slot instance.
* @return {string}
*/
Slot.prototype.getTitle = function() {
return this.title_;
};
/**
* Get the size of the current slot instance.
* @return {Object}
*/
Slot.prototype.getSize = function() {
return this.itemSize_;
};
/**
*
* @param {string} id The id of the created spinner.
* @constructor
*/
function Spinner(id) {
/**
* The id of the Spinner DOM element.
* @type {string}
* @private
*/
this.id_ = id;
/**
* The default done action.
* @type {*|void}
* @private
*/
this.doneAction_ = slotengine.nullFunction;
/**
* The default cancel action of the spinner.
* @type {*|void}
* @private
...