{"_id":"custom-select","_rev":"22-e349bc0bdb776c7dd103a08403b689d9","name":"custom-select","description":"A lightweight JavaScript library for custom HTML creation and managing. No dependencies needed.","version":"1.1.15","main":"build","repository":{"type":"git","url":"git+https://github.com/custom-select/custom-select.git"},"bugs":{"url":"https://github.com/custom-select/custom-select/issues"},"scripts":{"clean":"rimraf build && mkdir build && rimraf examples/build && mkdir examples/build && cpx src/css/custom-select.css build/","test":"cross-env NODE_PATH=src browserify -t babelify src/test/index.js | tape-run","prebuild":"npm run clean","build":"babel src/index.js -s -o build/index.js && browserify src/global.js -o build/custom-select.min.js -t [ babelify ] -p [minifyify --no-map] && browserify src/jquery-adaptor.js -o build/jquery.custom-select.min.js -t [ babelify ] -p [minifyify --no-map]","prepublish":"npm run build"},"keywords":["select","custom select","html select"],"devDependencies":{"babel-cli":"^6.26.0","babel-eslint":"^8.0.2","babel-plugin-transform-object-assign":"^6.22.0","babel-preset-es2015":"^6.24.1","babel-register":"^6.26.0","babelify":"^8.0.0","browserify":"^14.5.0","cpx":"^1.5.0","cross-env":"^5.1.1","eslint":"^4.11.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-react":"^7.5.1","minifyify":"^7.3.5","rimraf":"^2.6.2","tape":"^4.8.0","tape-run":"^3.0.0"},"dependencies":{"custom-event-polyfill":"^0.3.0"},"author":{"name":"Gionatan Lombardi","url":"https://github.com/gionatan-lombardi"},"contributors":[{"name":"Marco Nucara","url":"https://github.com/nuky89"},{"name":"Simone Scalbi","url":"https://github.com/pennywiz"}],"license":"MIT","gitHead":"2b5b2b022b3cab9f058b74f26479aeff11ea9ce2","homepage":"https://github.com/custom-select/custom-select#readme","_id":"custom-select@1.1.15","_npmVersion":"5.2.0","_nodeVersion":"6.10.2","_npmUser":{"name":"gionatan-lombardi","email":"gionatan.lombardi@gmail.com"},"dist":{"integrity":"sha512-hkxx4atVZ6sj0auhgtPPHa8tKuGGkhwrgBZatxOMSLUAVbljQklMzPAqs/H+t8SYPHRL2AFwUJuRiKtq4MltSA==","shasum":"4f342a405afa00c043afd753f0a578b2862d0b91","tarball":"https://registry.npmjs.org/custom-select/-/custom-select-1.1.15.tgz","fileCount":56,"unpackedSize":188559,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVniKHauOl0vq3Doee3XvNuF9Jf+g2xhzXK6RooqtQiwIhANiXOZf/K95PQUuomnpkAgRJQZdQcaw58Wxf09TA0LNs"}]},"maintainers":[{"name":"gionatan-lombardi","email":"gionatan.lombardi@gmail.com"},{"name":"marconucara","email":"marco.nucara@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/custom-select_1.1.15_1521819903569_0.5494300184107133"},"_hasShrinkwrap":false}},"readme":"# custom-select\nA lightweight JavaScript library for custom HTML ``:\n```html\n\n```\n```js\ncustomSelect('select');\n```\nYou can nest the select in their `label` or you can use the `for` attribute on the label.\nNested will work fine but it's formally wrong due to [label element specification](https://www.w3.org/TR/html5/forms.html#the-label-element): only a `select` element can be nested in a `label` tag.\n\nHere's the HTML result:\n```html\n
\n \n Select...\n \n \n
\n
Select...
\n
Foo
\n
Buz
\n
\n
\n```\n\nAlso [state classes](#state-classes) will be added and removed while plugin working.\n\nYou can use default css included in plugin [release](https://github.com/custom-select/custom-select/releases/latest) or style it by yourself.\nYou can also use advanced techniques for using native select on Mobile/touch devices. Check the examples for inspirations.\n\n## Plugin init\n```js\nArray customSelect(elements[, pluginOptions]);\n```\n\nThe *elements* parameter could be:\n\nA DOMString selectors:\n```js\ncustomSelect('.myForm .mySelect');\n```\n\nA instance of HTMLElement, tag SELECT:\n```js\ncustomSelect(document.getElementById('mySelect'));\n```\n\nA list (NodeList, HTMLCollection, Array, etc) of instances of HTMLElement, tag SELECT:\n```js\ncustomSelect(document.querySelector('.mySelect'));\n//or\ncustomSelect(document.getElementsByClassName('mySelect'));\n```\n\n\nThe *pluginOptions* parameter is an object that overwrites some default plugin configurations.\n\nThe default config is:\n```js\n{\n containerClass: 'custom-select-container',\n openerClass: 'custom-select-opener',\n panelClass: 'custom-select-panel',\n optionClass: 'custom-select-option',\n optgroupClass: 'custom-select-optgroup',\n isSelectedClass: 'is-selected',\n hasFocusClass: 'has-focus',\n isDisabledClass: 'is-disabled',\n isOpenClass: 'is-open'\n}\n```\n\nThe return is an Array of customSelect [instances](#how-to-get-plugin-instance), that contains all the public exposed [methods and properties](#methods--properties).\n\n## Style Classes\nAll css classes can be configured using *pluginOptions*, except container secondary class `customSelect` which is only for internal use and should not be removed or used for styling purpose.\n\n### Structure Classes\n\nSelf explained structure classes, and relative may-have status classes:\n\n`containerClass: 'custom-select-container'` may have `isDisabledClass`, `isOpenClass`\n\n`openerClass: 'custom-select-opener'`\n\n`panelClass: 'custom-select-panel'`\n\n`optionClass: 'custom-select-option'` may have `isSelectedClass`, `hasFocusClass`\n\n`optgroupClass: 'custom-select-optgroup'`\n\n### State Classes\n\n`isSelectedClass: 'is-selected'` - when the custom option is selected (as native selected attribute).\n\n`hasFocusClass: 'has-focus'` - when the custom option has current focus (mouseover, arrow navigation and keyboard autocomplete changes the focus).\n\n`isDisabledClass: 'is-disabled'` - when the select is disabled.\n\n`isOpenClass: 'is-open'` - when the panel is open.\n\n## How to get Plugin instance\n\nInit return\n```js\nconst cstSel = customSelect('select')[0]; // return is an array of instances!\nconsole.log(cstSel.open); // true|false\n```\nThe DOM select\n```js\ncustomSelect('select');\nconst cstSel = document.querySelector('select').customSelect\nconsole.log(cstSel.open); // true|false\n```\nThe DOM select container\n```js\ncustomSelect('select');\nconst cstSel = document.querySelector('.customSelect').customSelect\nconsole.log(cstSel.open); // true|false\n```\n\n## Methods & Properties\n\n### pluginOptions `property [readonly]`\nGet the plugin options.\n```js\ncstSel.pluginOptions;\n```\n\n### open `property`\nGet/set property.\n```js\ncstSel.open = true; // open the custom select\nconsole.log(cstSel.open); // true\ncstSel.open = false; // close the custom select\nconsole.log(cstSel.open); // false\n```\n\n### disabled `property`\nGet/set property.\n```js\ncstSel.disabled = true; // disable the custom select\nconsole.log(cstSel.disabled); // true\ncstSel.disabled = false; // enable the custom select\nconsole.log(cstSel.disabled); // false\n```\n\n### value `property`\nGet/set property. \nChange both the native select and the custom select. Use it just like nativeSelect.value\n```js\ncstSel.value = 'foo'; // the first option with that value will be selected. If there is no option with that value the first one'll be selected.\nconsole.log(cstSel.value); // return foo if there was an option with 'foo' value\n```\n\n### append(elements[, target]) `method`\nAppend an option or an optgroup to the select.\n```js\nconst option = document.createElement('option');\noption.text = 'Foo';\noption.value = 'bar';\ncstSel.append(option);\n```\n\nThe *elements* parameter could be:\n\nAn instance of HTMLElement, tag OPTION:\n```js\nconst toBeAppend = document.createElement('option');\n```\nAn instance of HTMLElement, tag OPTGROUP:\n```js\nconst toBeAppend = document.createElement('optgroup');\n```\nA list (NodeList, HTMLCollection, Array, etc) of instance of HTMLElement, tag OPTION/OPTGROUP:\n```js\nconst toBeAppend = cstSel.empty();\n```\n\nThe *target* parameter must be the `select` **(default)** or an optgroup that is already inside the select.\n\n### insertBefore(elements, target) `method`\ninsert an option or an optgroup before the specified target.\n```js\nconst option = document.createElement('option');\noption.text = 'Foo';\noption.value = 'foo';\nconst target = cstSel.select.options[2];\ncstSel.insertBefore(option, target);\n```\n\nThe *elements* parameter could be:\n\nAn instance of HTMLElement, tag OPTION:\n```js\nconst toBeAppend = document.createElement('option');\n```\nAn instance of HTMLElement, tag OPTGROUP:\n```js\nconst toBeAppend = document.createElement('optgroup');\n```\nA list (NodeList, HTMLCollection, Array, etc) of instance of HTMLElement, tag OPTION/OPTGROUP:\n```js\nconst toBeAppend = cstSel.empty();\n```\n\nThe *target* parameter must be an `option` or an `optgroup` that is already inside the select.\n\n### remove(node) `method`\nremove an option or an optgroup\n```js\ncstSel.remove(cstSel.select.options[1]);\n```\n\n### empty() `method`\nempty the select\n```js\ncstSel.empty();\n```\n\n### destroy() `method`\ndestroy the plugin, removing custom markup, classes, and listeners.\n```js\ncstSel.destroy();\n```\n\n### opener `property [readonly]`\nDOM Element\n\n### select `property [readonly]`\nDOM Element\n\n### panel `property [readonly]`\nDOM Element\n\n### container `property [readonly]`\nDOM Element\n\n\n## Events\n\n### custom-select:open\nOnly on `container`.\n```js\ncstSel.container.addEventListener('custom-select:open',\n (e) => { console.log(`${e.target} is open 😊`)});\n```\n\n### custom-select:close\nOnly on `container`.\n```js\ncstSel.container.addEventListener('custom-select:close',\n (e) => { console.log(`${e.target} is closed 😔`)});\n```\n\n### custom-select:disabled\nOnly on `container`.\n```js\ncstSel.container.addEventListener('custom-select:disabled',\n (e) => { console.log(`${e.target} is disabled 👋`)});\n```\n\n### custom-select:enabled\nOnly on `container`.\n```js\ncstSel.container.addEventListener('custom-select:enabled',\n (e) => { console.log(`${e.target} is enabled 👏`)});\n```\n\n### custom-select:focus-outside-panel\nFired on custom option, recommended listener on `panel`. \n\nThis `CustomEvent` fires when the focused option moves outside the visible part of the `panel`. \nIt bubbles, so the listener can be placed on every ancestor of the custom options. \nThis event is useful for custom animations on select's autocomplete-search, when the focus moves to the found option.\nBy default there's no animation but a simply `scrollTop` change of the `panel`. \nYou can overwrite this behaviour by simply adding an `EventListener`, with `useCapture` argument set to `true` and an `e.stopPropagation()` statement inside you listener's callback-function.\n```js\n// Example with jQuery animate\ncstSel.panel.addEventListener('custom-select:focus-outside-panel',\n (e) => {\n e.stopPropagation();\n $(cstSel.panel).animate({\n scrollTop: e.target.offsetTop,\n }, 300)\n }, true);\n```\n\n### change\nOnly on `select`.\n```js\ncstSel.select.addEventListener('change',\n (e) => { console.log(`${e.target} has changed it's value 👌`)});\n```\n\n## jQuery adaptor\nIf you really can't live without jQuery, an adaptor was made for you 😩: [download jQuery version here](https://github.com/custom-select/custom-select/releases/latest).\n\n### jQuery init\n```js\n$('#mySelect').customSelect();\n```\n\n### jQuery property set\n```js\n$('#mySelect').customSelect('open', true);\n```\n\n### jQuery property get\n```js\n$('#mySelect').customSelect('open');\n```\n\n### jQuery methods\n```js\n$('#mySelect').customSelect('remove', $('#mySelect')[0].options[1]);\n```\n\n## That's all folks!\n**And now have fun ✌**\n\n## Browser support\nOh wait, I was almost forgetting:\n* Chrome\n* Safari 7.0\n* Firefox 10 (maybe also older, but come on...)\n* Android 4.0\n* Mobile Safari 6.0\n* Internet Explorer 10\n","maintainers":[{"name":"gionatan-lombardi","email":"gionatan.lombardi@gmail.com"},{"name":"marconucara","email":"marco.nucara@gmail.com"}],"time":{"modified":"2022-06-14T06:18:23.502Z","created":"2016-09-01T15:58:56.962Z","0.0.6":"2016-09-01T15:58:56.962Z","0.0.7":"2016-09-01T16:54:02.261Z","0.0.8":"2016-09-06T15:24:27.732Z","0.0.9":"2016-09-07T10:12:52.807Z","0.0.10":"2016-09-07T14:03:24.496Z","0.14.0":"2016-09-13T09:34:11.552Z","0.15.0":"2016-09-13T09:54:44.201Z","1.0.0":"2016-09-13T10:50:49.158Z","1.0.1":"2016-09-14T07:26:17.955Z","1.1.0":"2016-09-15T09:43:13.564Z","1.1.1":"2017-07-11T10:46:02.155Z","1.1.2":"2017-07-11T12:55:02.977Z","1.1.14":"2017-11-22T13:11:44.071Z","1.1.15":"2018-03-23T15:45:03.643Z"},"homepage":"https://github.com/custom-select/custom-select#readme","keywords":["select","custom select","html select"],"repository":{"type":"git","url":"git+https://github.com/custom-select/custom-select.git"},"contributors":[{"name":"Marco Nucara","url":"https://github.com/nuky89"},{"name":"Simone Scalbi","url":"https://github.com/pennywiz"}],"author":{"name":"Gionatan Lombardi","url":"https://github.com/gionatan-lombardi"},"bugs":{"url":"https://github.com/custom-select/custom-select/issues"},"license":"MIT","readmeFilename":"README.md","users":{"gionatan-lombardi":true}}