MontoyaTech/ignite-html-select
MontoyaTech/ignite-html-select
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added options extension. Improved docs.

Browse Source
This commit is contained in:
Matt Mo 2021-08-11 10:43:59 -07:00
parent 9ccdb53eee
commit de96f13f76
1 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ignite-html-select.js
View File

@ -6,7 +6,7 @@ import { IgniteTemplate } from "../ignite-html/ignite-template.js";
* @param {Number} to Ending year. * @param {Number} to Ending year.
* @param {String} placeholder The placeholder option, it's value will be 0, if set this text will be shown. * @param {String} placeholder The placeholder option, it's value will be 0, if set this text will be shown.
* @param {Boolean} descending Whether or not the to year is first and the from year is last. * @param {Boolean} descending Whether or not the to year is first and the from year is last.
* @returns This ignite template. * @returns {IgniteTemplate} This ignite template.
* *
* @example * @example
* .years(1950, 2021, true) //Generates a select descending, 2021, 2020, 2019.. ect. * .years(1950, 2021, true) //Generates a select descending, 2021, 2020, 2019.. ect.
@ -36,7 +36,7 @@ IgniteTemplate.prototype.years = function (from, to, placeholder = null, descend
* Generates a series of months. * Generates a series of months.
* @param {String} placeholder The placeholder option, it's value will be 0, if set this text will be shown. * @param {String} placeholder The placeholder option, it's value will be 0, if set this text will be shown.
* @param {Boolean} shorthand If true the option text will be the shorthand version of the month. * @param {Boolean} shorthand If true the option text will be the shorthand version of the month.
* @returns This ignite template. * @returns {IgniteTemplate} This ignite template.
*/ */
IgniteTemplate.prototype.months = function (placeholder = null, shorthand = true) { IgniteTemplate.prototype.months = function (placeholder = null, shorthand = true) {
//Generate html and populate the template with it. //Generate html and populate the template with it.
@ -87,6 +87,7 @@ IgniteTemplate.prototype.months = function (placeholder = null, shorthand = true
* @param {Number} to The ending day. * @param {Number} to The ending day.
* @param {String} placeholder The placeholder option if set, it's value will be 0, this will be the text displayed. * @param {String} placeholder The placeholder option if set, it's value will be 0, this will be the text displayed.
* @param {Boolean} descending Whether or not the to day is first and the from year is last. * @param {Boolean} descending Whether or not the to day is first and the from year is last.
* @returns {IgniteTemplate} This ignite template.
*/ */
IgniteTemplate.prototype.days = function (from = 1, to = 31, placeholder = null, descending = false) { IgniteTemplate.prototype.days = function (from = 1, to = 31, placeholder = null, descending = false) {
//Generate html and populate the template with it. //Generate html and populate the template with it.
@ -111,10 +112,11 @@ IgniteTemplate.prototype.days = function (from = 1, to = 31, placeholder = null,
/** /**
* Generates a series of numbers. * Generates a series of numbers.
* @param {*} from The starting number. * @param {Number} from The starting number.
* @param {*} to The ending number. * @param {Number} to The ending number.
* @param {*} placeholder The placeholder option if set, it's value will be -1, this will be the text displayed. * @param {String} placeholder The placeholder option if set, it's value will be -1, this will be the text displayed.
* @param {*} descending Whether or not the from number if first and the to number is last. * @param {Boolean} descending Whether or not the from number if first and the to number is last.
* @returns {IgniteTemplate} This ignite template.
*/ */
IgniteTemplate.prototype.numbers = function (from = 0, to = 100, placeholder = null, descending = false) { IgniteTemplate.prototype.numbers = function (from = 0, to = 100, placeholder = null, descending = false) {
//Generate html and populate the template with it. //Generate html and populate the template with it.
@ -136,3 +138,31 @@ IgniteTemplate.prototype.numbers = function (from = 0, to = 100, placeholder = n
return this.innerHTML(html); return this.innerHTML(html);
} }
/**
* Generates a series of options based on key value pairs.
* @param {Array|Object} options An array of strings or list of key value pairs to create options from.
* @param {*} placeholder The placeholder option, it's value will be 0, if set this text will be shown.
* @returns {IgniteTemplate} This ignite template.
*/
IgniteTemplate.prototype.options = function (options, placeholder = null) {
//Generate html and populate the template with it.
var html = '';
if (placeholder) {
html += `<option value='-1'>${placeholder}</option>`;
}
if (Array.isArray(options)) {
for (var i = 0; i < options.length; i++) {
html += `<option value='${options[i]}'>${options[i]}</option>`;
}
} else {
var keys = Object.keys(options);
for (var i = 0; i < keys.length; i++) {
html += `<option value='${keys[i]}'>${options[keys[i]]}</option>`;
}
}
return this.innerHTML(html);
}