ignite-html-select/ignite-html-select.js

540 lines
23 KiB
JavaScript
Raw Normal View History

2021-07-27 17:52:01 -07:00
import { IgniteTemplate } from "../ignite-html/ignite-template.js";
/**
* Generates a series of years from the starting to the ending point.
* @param {Number} from Starting 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 {Boolean} descending Whether or not the to year is first and the from year is last.
* @returns {IgniteTemplate} This ignite template.
2021-07-27 17:52:01 -07:00
*
* @example
* .years(1950, 2021, true) //Generates a select descending, 2021, 2020, 2019.. ect.
*/
2021-08-25 00:01:33 -07:00
IgniteTemplate.prototype.years = function(from, to, placeholder = null, descending = false) {
2021-07-27 17:52:01 -07:00
//Generate html and populate the template with it.
var html = '';
//If to is 0, null, or undefined, use the current year.
if (to == 0 || !to) {
to = new Date().getFullYear();
}
//If from is negative, adjust it with the to year.
if (from < 0) {
from += to;
}
2021-07-27 17:52:01 -07:00
if (placeholder) {
html += `<option value='0'>${placeholder}</option>`;
}
if (descending) {
for (var i = to; i >= from; i--) {
html += `<option value='${i}'>${i}</option>`;
}
} else {
for (var i = from; i <= to; i++) {
html += `<option value='${i}'>${i}</option>`;
}
}
return this.innerHTML(html);
};
/**
* 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 {Boolean} shorthand If true the option text will be the shorthand version of the month.
* @returns {IgniteTemplate} This ignite template.
2021-07-27 17:52:01 -07:00
*/
2021-08-25 00:01:33 -07:00
IgniteTemplate.prototype.months = function(placeholder = null, shorthand = true) {
2021-07-27 17:52:01 -07:00
//Generate html and populate the template with it.
var html = '';
if (placeholder) {
html += `<option value='0'>${placeholder}</option>`;
}
if (shorthand) {
html += `
<option value='1'>Jan</option>
<option value='2'>Feb</option>
<option value='3'>Mar</option>
<option value='4'>Apr</option>
<option value='5'>May</option>
<option value='6'>Jun</option>
<option value='7'>Jul</option>
<option value='8'>Aug</option>
<option value='9'>Sep</option>
<option value='10'>Oct</option>
<option value='11'>Nov</option>
<option value='12'>Dec</option>
`;
} else {
html += `
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>June</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
`;
}
return this.innerHTML(html);
}
/**
* Generates a series of days.
2021-07-27 17:52:01 -07:00
* @param {Number} from The starting 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 {Boolean} descending Whether or not the to day is first and the from year is last.
* @returns {IgniteTemplate} This ignite template.
2021-07-27 17:52:01 -07:00
*/
2021-08-25 00:01:33 -07:00
IgniteTemplate.prototype.days = function(from = 1, to = 31, placeholder = null, descending = false) {
2021-07-27 17:52:01 -07:00
//Generate html and populate the template with it.
var html = '';
if (placeholder) {
html += `<option value='0'>${placeholder}</option>`;
}
if (descending) {
for (var i = to; i >= from; i--) {
html += `<option value='${i}'>${i}</option>`;
}
} else {
for (var i = from; i <= to; i++) {
html += `<option value='${i}'>${i}</option>`;
}
}
return this.innerHTML(html);
}
/**
* Generates a list of US States.
* @param {String} placeholder If set, outputs a placeholder option with a value of 0.
* @param {Boolean} shorthand If true, outputs the states in the two letter form.
* @returns {IgniteTemplate} This ignite template
*/
IgniteTemplate.prototype.states = function(placeholder = null, shorthand = true) {
//Generate html and populate the template with it.
var html = '';
if (placeholder) {
html += `<option value='0'>${placeholder}</option>`;
}
if (shorthand) {
html += `
2022-12-14 11:43:36 -08:00
<option value='Alaska'>AK</option>
<option value='Alabama'>AL</option>
<option value='Arkansas'>AR</option>
<option value='Arizona'>AZ</option>
<option value='California'>CA</option>
<option value='Colorado'>CO</option>
<option value='Connecticut'>CT</option>
<option value='Delaware'>DE</option>
<option value='Florida'>FL</option>
<option value='Georgia'>GA</option>
<option value='Hawaii'>HI</option>
<option value='Iowa'>IA</option>
<option value='Idaho'>ID</option>
<option value='Illinois'>IL</option>
<option value='Indiana'>IN</option>
<option value='Kansas'>KS</option>
<option value='Kentucky'>KY</option>
<option value='Louisiana'>LA</option>
<option value='Massachusetts'>MA</option>
<option value='Maryland'>MD</option>
<option value='Maine'>ME</option>
<option value='Michigan'>MI</option>
<option value='Minnesota'>MN</option>
<option value='Missouri'>MO</option>
<option value='Mississippi'>MS</option>
<option value='Montana'>MT</option>
<option value='North Carolina'>NC</option>
<option value='North Dakota'>ND</option>
<option value='Nebraska'>NE</option>
<option value='New Hampshire'>NH</option>
<option value='New Jersey'>NJ</option>
<option value='New Mexico'>NM</option>
<option value='Nevada'>NV</option>
<option value='New York'>NY</option>
<option value='Ohio'>OH</option>
<option value='Oklahoma'>OK</option>
<option value='Oregon'>OR</option>
<option value='Pennsylvania'>PA</option>
<option value='Rhode Island'>RI</option>
<option value='South Carolina'>SC</option>
<option value='South Dakota'>SD</option>
<option value='Tennessee'>TN</option>
<option value='Texas'>TX</option>
<option value='Utah'>UT</option>
<option value='Virginia'>VA</option>
<option value='Vermont'>VT</option>
<option value='Washington'>WA</option>
<option value='Wisconsin'>WI</option>
<option value='West Virginia'>WV</option>
<option value='Wyoming'>WY</option>
`;
} else {
html += `
2022-12-14 11:43:36 -08:00
<option value='Alabama'>Alabama</option>
<option value='Alaska'>Alaska</option>
<option value='Arizona'>Arizona</option>
<option value='Arkansas'>Arkansas</option>
<option value='California'>California</option>
<option value='Colorado'>Colorado</option>
<option value='Connecticut'>Connecticut</option>
<option value='Delaware'>Delaware</option>
<option value='Florida'>Florida</option>
<option value='Georgia'>Georgia</option>
<option value='Hawaii'>Hawaii</option>
<option value='Idaho'>Idaho</option>
<option value='Illinois'>Illinois</option>
<option value='Indiana'>Indiana</option>
<option value='Iowa'>Iowa</option>
<option value='Kansas'>Kansas</option>
<option value='Kentucky'>Kentucky</option>
<option value='Louisiana'>Louisiana</option>
<option value='Maine'>Maine</option>
<option value='Maryland'>Maryland</option>
<option value='Massachusetts'>Massachusetts</option>
<option value='Michigan'>Michigan</option>
<option value='Minnesota'>Minnesota</option>
<option value='Mississippi'>Mississippi</option>
<option value='Missouri'>Missouri</option>
<option value='Montana'>Montana</option>
<option value='Nebraska'>Nebraska</option>
<option value='Nevada'>Nevada</option>
<option value='New Hampshire'>New Hampshire</option>
<option value='New Jersey'>New Jersey</option>
<option value='New Mexico'>New Mexico</option>
<option value='New York'>New York</option>
<option value='North Carolina'>North Carolina</option>
<option value='North Dakota'>North Dakota</option>
<option value='Ohio'>Ohio</option>
<option value='Oklahoma'>Oklahoma</option>
<option value='Oregon'>Oregon</option>
<option value='Pennsylvania'>Pennsylvania</option>
<option value='Rhode Island'>Rhode Island</option>
<option value='South Carolina'>South Carolina</option>
<option value='South Dakota'>South Dakota</option>
<option value='Tennessee'>Tennessee</option>
<option value='Texas'>Texas</option>
<option value='Utah'>Utah</option>
<option value='Vermont'>Vermont</option>
<option value='Virginia'>Virginia</option>
<option value='Washington'>Washington</option>
<option value='West Virginia'>West Virginia</option>
<option value='Wisconsin'>Wisconsin</option>
<option value='Wyoming'>Wyoming</option>
`;
}
return this.innerHTML(html);
}
/**
* Generates a list of countries.
* @param {String} placeholder If set, outputs a placeholder option with a value of 0.
* @returns {IgniteTemplate} This ignite template
*/
IgniteTemplate.prototype.countries = function(placeholder = null) {
//Generate html and populate the template with it.
var html = '';
if (placeholder) {
html += `<option value='0'>${placeholder}</option>`;
}
html += `
<option value='Andorra'>Andorra</option>
<option value='United Arab Emirates'>United Arab Emirates</option>
<option value='Afghanistan'>Afghanistan</option>
<option value='Antigua and Barbuda'>Antigua and Barbuda</option>
<option value='Anguilla'>Anguilla</option>
<option value='Albania'>Albania</option>
<option value='Armenia'>Armenia</option>
<option value='Netherlands Antilles'>Netherlands Antilles</option>
<option value='Angola'>Angola</option>
<option value='Antarctica'>Antarctica</option>
<option value='Argentina'>Argentina</option>
<option value='American Samoa'>American Samoa</option>
<option value='Austria'>Austria</option>
<option value='Australia'>Australia</option>
<option value='Aruba'>Aruba</option>
<option value='Azerbaijan'>Azerbaijan</option>
<option value='Bosnia and Herzegovina'>Bosnia and Herzegovina</option>
<option value='Barbados'>Barbados</option>
<option value='Bangladesh'>Bangladesh</option>
<option value='Belgium'>Belgium</option>
<option value='Burkina Faso'>Burkina Faso</option>
<option value='Bulgaria'>Bulgaria</option>
<option value='Bahrain'>Bahrain</option>
<option value='Burundi'>Burundi</option>
<option value='Benin'>Benin</option>
<option value='Bermuda'>Bermuda</option>
<option value='Brunei'>Brunei</option>
<option value='Bolivia'>Bolivia</option>
<option value='Brazil'>Brazil</option>
<option value='Bahamas'>Bahamas</option>
<option value='Bhutan'>Bhutan</option>
<option value='Bouvet Island'>Bouvet Island</option>
<option value='Botswana'>Botswana</option>
<option value='Belarus'>Belarus</option>
<option value='Belize'>Belize</option>
<option value='Canada'>Canada</option>
<option value='Cocos [Keeling] Islands'>Cocos [Keeling] Islands</option>
<option value='Congo [DRC]'>Congo [DRC]</option>
<option value='Central African Republic'>Central African Republic</option>
<option value='Congo [Republic]'>Congo [Republic]</option>
<option value='Switzerland'>Switzerland</option>
<option value='Côte d'Ivoire'>Côte d'Ivoire</option>
<option value='Cook Islands'>Cook Islands</option>
<option value='Chile'>Chile</option>
<option value='Cameroon'>Cameroon</option>
<option value='China'>China</option>
<option value='Colombia'>Colombia</option>
<option value='Costa Rica'>Costa Rica</option>
<option value='Cuba'>Cuba</option>
<option value='Cape Verde'>Cape Verde</option>
<option value='Christmas Island'>Christmas Island</option>
<option value='Cyprus'>Cyprus</option>
<option value='Czech Republic'>Czech Republic</option>
<option value='Germany'>Germany</option>
<option value='Djibouti'>Djibouti</option>
<option value='Denmark'>Denmark</option>
<option value='Dominica'>Dominica</option>
<option value='Dominican Republic'>Dominican Republic</option>
<option value='Algeria'>Algeria</option>
<option value='Ecuador'>Ecuador</option>
<option value='Estonia'>Estonia</option>
<option value='Egypt'>Egypt</option>
<option value='Western Sahara'>Western Sahara</option>
<option value='Eritrea'>Eritrea</option>
<option value='Spain'>Spain</option>
<option value='Ethiopia'>Ethiopia</option>
<option value='Finland'>Finland</option>
<option value='Fiji'>Fiji</option>
<option value='Falkland Islands'>Falkland Islands</option>
<option value='Micronesia'>Micronesia</option>
<option value='Faroe Islands'>Faroe Islands</option>
<option value='France'>France</option>
<option value='Gabon'>Gabon</option>
<option value='United Kingdom'>United Kingdom</option>
<option value='Grenada'>Grenada</option>
<option value='Georgia'>Georgia</option>
<option value='French Guiana'>French Guiana</option>
<option value='Guernsey'>Guernsey</option>
<option value='Ghana'>Ghana</option>
<option value='Gibraltar'>Gibraltar</option>
<option value='Greenland'>Greenland</option>
<option value='Gambia'>Gambia</option>
<option value='Guinea'>Guinea</option>
<option value='Guadeloupe'>Guadeloupe</option>
<option value='Equatorial Guinea'>Equatorial Guinea</option>
<option value='Greece'>Greece</option>
<option value='South Georgia and the South Sandwich Islands'>South Georgia and the South Sandwich Islands</option>
<option value='Guatemala'>Guatemala</option>
<option value='Guam'>Guam</option>
<option value='Guinea-Bissau'>Guinea-Bissau</option>
<option value='Guyana'>Guyana</option>
<option value='Gaza Strip'>Gaza Strip</option>
<option value='Hong Kong'>Hong Kong</option>
<option value='Heard Island and McDonald Islands'>Heard Island and McDonald Islands</option>
<option value='Honduras'>Honduras</option>
<option value='Croatia'>Croatia</option>
<option value='Haiti'>Haiti</option>
<option value='Hungary'>Hungary</option>
<option value='Indonesia'>Indonesia</option>
<option value='Ireland'>Ireland</option>
<option value='Israel'>Israel</option>
<option value='Isle of Man'>Isle of Man</option>
<option value='India'>India</option>
<option value='British Indian Ocean Territory'>British Indian Ocean Territory</option>
<option value='Iraq'>Iraq</option>
<option value='Iran'>Iran</option>
<option value='Iceland'>Iceland</option>
<option value='Italy'>Italy</option>
<option value='Jersey'>Jersey</option>
<option value='Jamaica'>Jamaica</option>
<option value='Jordan'>Jordan</option>
<option value='Japan'>Japan</option>
<option value='Kenya'>Kenya</option>
<option value='Kyrgyzstan'>Kyrgyzstan</option>
<option value='Cambodia'>Cambodia</option>
<option value='Kiribati'>Kiribati</option>
<option value='Comoros'>Comoros</option>
<option value='Saint Kitts and Nevis'>Saint Kitts and Nevis</option>
<option value='North Korea'>North Korea</option>
<option value='South Korea'>South Korea</option>
<option value='Kuwait'>Kuwait</option>
<option value='Cayman Islands'>Cayman Islands</option>
<option value='Kazakhstan'>Kazakhstan</option>
<option value='Laos'>Laos</option>
<option value='Lebanon'>Lebanon</option>
<option value='Saint Lucia'>Saint Lucia</option>
<option value='Liechtenstein'>Liechtenstein</option>
<option value='Sri Lanka'>Sri Lanka</option>
<option value='Liberia'>Liberia</option>
<option value='Lesotho'>Lesotho</option>
<option value='Lithuania'>Lithuania</option>
<option value='Luxembourg'>Luxembourg</option>
<option value='Latvia'>Latvia</option>
<option value='Libya'>Libya</option>
<option value='Morocco'>Morocco</option>
<option value='Monaco'>Monaco</option>
<option value='Moldova'>Moldova</option>
<option value='Montenegro'>Montenegro</option>
<option value='Madagascar'>Madagascar</option>
<option value='Marshall Islands'>Marshall Islands</option>
<option value='Macedonia FYROM'>Macedonia FYROM</option>
<option value='Mali'>Mali</option>
<option value='Myanmar Burma'>Myanmar Burma</option>
<option value='Mongolia'>Mongolia</option>
<option value='Macau'>Macau</option>
<option value='Northern Mariana Islands'>Northern Mariana Islands</option>
<option value='Martinique'>Martinique</option>
<option value='Mauritania'>Mauritania</option>
<option value='Montserrat'>Montserrat</option>
<option value='Malta'>Malta</option>
<option value='Mauritius'>Mauritius</option>
<option value='Maldives'>Maldives</option>
<option value='Malawi'>Malawi</option>
<option value='Mexico'>Mexico</option>
<option value='Malaysia'>Malaysia</option>
<option value='Mozambique'>Mozambique</option>
<option value='Namibia'>Namibia</option>
<option value='New Caledonia'>New Caledonia</option>
<option value='Niger'>Niger</option>
<option value='Norfolk Island'>Norfolk Island</option>
<option value='Nigeria'>Nigeria</option>
<option value='Nicaragua'>Nicaragua</option>
<option value='Netherlands'>Netherlands</option>
<option value='Norway'>Norway</option>
<option value='Nepal'>Nepal</option>
<option value='Nauru'>Nauru</option>
<option value='Niue'>Niue</option>
<option value='New Zealand'>New Zealand</option>
<option value='Oman'>Oman</option>
<option value='Panama'>Panama</option>
<option value='Peru'>Peru</option>
<option value='French Polynesia'>French Polynesia</option>
<option value='Papua New Guinea'>Papua New Guinea</option>
<option value='Philippines'>Philippines</option>
<option value='Pakistan'>Pakistan</option>
<option value='Poland'>Poland</option>
<option value='Saint Pierre and Miquelon'>Saint Pierre and Miquelon</option>
<option value='Pitcairn Islands'>Pitcairn Islands</option>
<option value='Puerto Rico'>Puerto Rico</option>
<option value='Palestinian Territories'>Palestinian Territories</option>
<option value='Portugal'>Portugal</option>
<option value='Palau'>Palau</option>
<option value='Paraguay'>Paraguay</option>
<option value='Qatar'>Qatar</option>
<option value='Réunion'>Réunion</option>
<option value='Romania'>Romania</option>
<option value='Serbia'>Serbia</option>
<option value='Russia'>Russia</option>
<option value='Rwanda'>Rwanda</option>
<option value='Saudi Arabia'>Saudi Arabia</option>
<option value='Solomon Islands'>Solomon Islands</option>
<option value='Seychelles'>Seychelles</option>
<option value='Sudan'>Sudan</option>
<option value='Sweden'>Sweden</option>
<option value='Singapore'>Singapore</option>
<option value='Saint Helena'>Saint Helena</option>
<option value='Slovenia'>Slovenia</option>
<option value='Svalbard and Jan Mayen'>Svalbard and Jan Mayen</option>
<option value='Slovakia'>Slovakia</option>
<option value='Sierra Leone'>Sierra Leone</option>
<option value='San Marino'>San Marino</option>
<option value='Senegal'>Senegal</option>
<option value='Somalia'>Somalia</option>
<option value='Suriname'>Suriname</option>
<option value='São Tomé and Príncipe'>São Tomé and Príncipe</option>
<option value='El Salvador'>El Salvador</option>
<option value='Syria'>Syria</option>
<option value='Swaziland'>Swaziland</option>
<option value='Turks and Caicos Islands'>Turks and Caicos Islands</option>
<option value='Chad'>Chad</option>
<option value='French Southern Territories'>French Southern Territories</option>
<option value='Togo'>Togo</option>
<option value='Thailand'>Thailand</option>
<option value='Tajikistan'>Tajikistan</option>
<option value='Tokelau'>Tokelau</option>
<option value='Timor-Leste'>Timor-Leste</option>
<option value='Turkmenistan'>Turkmenistan</option>
<option value='Tunisia'>Tunisia</option>
<option value='Tonga'>Tonga</option>
<option value='Turkey'>Turkey</option>
<option value='Trinidad and Tobago'>Trinidad and Tobago</option>
<option value='Tuvalu'>Tuvalu</option>
<option value='Taiwan'>Taiwan</option>
<option value='Tanzania'>Tanzania</option>
<option value='Ukraine'>Ukraine</option>
<option value='Uganda'>Uganda</option>
<option value='U.S. Minor Outlying Islands'>U.S. Minor Outlying Islands</option>
<option value='United States'>United States</option>
<option value='Uruguay'>Uruguay</option>
<option value='Uzbekistan'>Uzbekistan</option>
<option value='Vatican City'>Vatican City</option>
<option value='Saint Vincent and the Grenadines'>Saint Vincent and the Grenadines</option>
<option value='Venezuela'>Venezuela</option>
<option value='British Virgin Islands'>British Virgin Islands</option>
<option value='U.S. Virgin Islands'>U.S. Virgin Islands</option>
<option value='Vietnam'>Vietnam</option>
<option value='Vanuatu'>Vanuatu</option>
<option value='Wallis and Futuna'>Wallis and Futuna</option>
<option value='Samoa'>Samoa</option>
<option value='Kosovo'>Kosovo</option>
<option value='Yemen'>Yemen</option>
<option value='Mayotte'>Mayotte</option>
<option value='South Africa'>South Africa</option>
<option value='Zambia'>Zambia</option>
<option value='Zimbabwe'>Zimbabwe</option>
`;
return this.innerHTML(html);
}
/**
* Generates a series of numbers.
* @param {Number} from The starting number.
* @param {Number} to The ending number.
* @param {String} placeholder The placeholder option if set, it's value will be -1, this will be the text displayed.
* @param {Number} placeholderValue The value of the placeholder option if the placeholder is set. Default is -1.
* @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, placeholderValue = -1, descending = false) {
//Generate html and populate the template with it.
var html = '';
if (placeholder) {
html += `<option value='${placeholderValue}'>${placeholder}</option>`;
}
if (descending) {
for (var i = to; i >= from; i--) {
html += `<option value='${i}'>${i}</option>`;
}
} else {
for (var i = from; i <= to; i++) {
html += `<option value='${i}'>${i}</option>`;
}
}
2021-07-27 17:52:01 -07:00
return this.innerHTML(html);
2021-08-25 00:01:33 -07:00
}