Sha256: ead8c8a2a6d1274a128ab0b7e413d9b3165e2ef6b768b274ccc5b17f3fdbe320
Contents?: true
Size: 1.54 KB
Versions: 46
Compression:
Stored size: 1.54 KB
Contents
/* eslint-disable require-jsdoc */
/**
* This component allows for an element's text value to be updated with the value
* of an input whenever this input's value is changed.
*
* @param {object} options
*
* Available options:
* {string} `inputSelector`: The query selector to locate the input element
* {string} `targetSelector`: The query selector to locate the target element
* {number} `maxLength`: The maximum characters from the input value to be displayed in the target
* {string} `omission`: The string used to shorten the value to the given maxLength (e.g. "...")
* {string} `placeholder`: The string to be displayed in the target element when the input has no value
*/
class LiveTextUpdateComponent {
constructor(options = {}) {
this.inputSelector = options.inputSelector;
this.targetSelector = options.targetSelector;
this.maxLength = options.maxLength;
this.omission = options.omission;
this.placeholder = options.placeholder;
this._bindEvent();
this._run();
}
_run() {
const $input = $(this.inputSelector);
const $target = $(this.targetSelector);
let text = $input.val() || this.placeholder;
// truncate string
if (text.length > this.maxLength) {
text = text.substring(0, this.maxLength - this.omission.length) + this.omission;
}
$target.text(text);
}
_bindEvent() {
const $input = $(this.inputSelector);
$input.on("change", this._run.bind(this));
}
}
export default function createLiveTextUpdateComponent(options) {
return new LiveTextUpdateComponent(options);
}
Version data entries
46 entries across 46 versions & 1 rubygems