Initial import
This commit is contained in:
Admin Nasledstvo
@@ -0,0 +1 @@
|
||||
.nice-select{-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#fff;border-radius:5px;border:solid 1px #e8e8e8;box-sizing:border-box;clear:both;cursor:pointer;display:block;float:left;font-family:inherit;font-size:14px;font-weight:normal;height:38px;line-height:36px;outline:none;padding-left:18px;padding-right:30px;position:relative;text-align:left !important;transition:all .2s ease-in-out;user-select:none;white-space:nowrap;width:auto}.nice-select:hover{border-color:#dbdbdb}.nice-select:active,.nice-select.open,.nice-select:focus{border-color:#999}.nice-select:after{border-bottom:2px solid #999;border-right:2px solid #999;content:"";display:block;height:5px;margin-top:-4px;pointer-events:none;position:absolute;right:12px;top:50%;transform-origin:66% 66%;transform:rotate(45deg);transition:all .15s ease-in-out;width:5px}.nice-select.open:after{transform:rotate(-135deg)}.nice-select.open .nice-select-dropdown{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}.nice-select.disabled{border-color:#ededed;color:#999;pointer-events:none}.nice-select.disabled:after{border-color:#ccc}.nice-select.wide{width:100%}.nice-select.wide .nice-select-dropdown{left:0 !important;right:0 !important}.nice-select.right{float:right}.nice-select.right .nice-select-dropdown{left:auto;right:0}.nice-select.small{font-size:12px;height:36px;line-height:34px}.nice-select.small:after{height:4px;width:4px}.nice-select.small .option{line-height:34px;min-height:34px}.nice-select .nice-select-dropdown{margin-top:4px;background-color:#fff;border-radius:5px;box-shadow:0 0 0 1px rgba(68,68,68,.11);pointer-events:none;position:absolute;top:100%;left:0;transform-origin:50% 0;transform:scale(0.75) translateY(19px);transition:all .2s cubic-bezier(0.5, 0, 0, 1.25),opacity .15s ease-out;z-index:9;opacity:0}.nice-select .list{border-radius:5px;box-sizing:border-box;overflow:hidden;padding:0;max-height:210px;overflow-y:auto}.nice-select .list:hover .option:not(:hover){background-color:transparent !important}.nice-select .option{cursor:pointer;font-weight:400;line-height:40px;list-style:none;outline:none;padding-left:18px;padding-right:29px;text-align:left;transition:all .2s}.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{background-color:#f6f6f6}.nice-select .option.selected{font-weight:bold}.nice-select .option.disabled{background-color:transparent;color:#999;cursor:default}.nice-select .optgroup{font-weight:bold}.no-csspointerevents .nice-select .nice-select-dropdown{display:none}.no-csspointerevents .nice-select.open .nice-select-dropdown{display:block}.nice-select .list::-webkit-scrollbar{width:0}.nice-select .has-multiple{white-space:inherit;height:auto;padding:7px 12px;min-height:36px;line-height:22px}.nice-select .has-multiple span.current{border:1px solid #ccc;background:#eee;padding:0 10px;border-radius:3px;display:inline-block;line-height:24px;font-size:14px;margin-bottom:3px;margin-right:3px}.nice-select .has-multiple .multiple-options{display:block;line-height:24px;padding:0}.nice-select .nice-select-search-box{box-sizing:border-box;width:100%;padding:5px;pointer-events:none;border-radius:5px 5px 0 0}.nice-select .nice-select-search{box-sizing:border-box;background-color:#fff;border:1px solid #e8e8e8;border-radius:3px;color:#444;display:inline-block;vertical-align:middle;padding:7px 12px;margin:0 10px 0 0;width:100%;min-height:36px;line-height:22px;height:auto;outline:0 !important;font-size:14px}
|
||||
@@ -0,0 +1,199 @@
|
||||
!function (e, t) {
|
||||
"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.NiceSelect = t() : e.NiceSelect = t()
|
||||
}(self, (function () {
|
||||
return (() => {
|
||||
"use strict";
|
||||
var e = {
|
||||
d: (t, i) => {
|
||||
for (var s in i) e.o(i, s) && !e.o(t, s) && Object.defineProperty(t, s, {enumerable: !0, get: i[s]})
|
||||
}, o: (e, t) => Object.prototype.hasOwnProperty.call(e, t), r: e => {
|
||||
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
|
||||
}
|
||||
}, t = {};
|
||||
|
||||
function i(e) {
|
||||
var t = document.createEvent("MouseEvents");
|
||||
t.initEvent("click", !0, !1), e.dispatchEvent(t)
|
||||
}
|
||||
|
||||
function s(e) {
|
||||
var t = document.createEvent("HTMLEvents");
|
||||
t.initEvent("change", !0, !1), e.dispatchEvent(t)
|
||||
}
|
||||
|
||||
function o(e) {
|
||||
var t = document.createEvent("FocusEvent");
|
||||
t.initEvent("focusin", !0, !1), e.dispatchEvent(t)
|
||||
}
|
||||
|
||||
function n(e) {
|
||||
var t = document.createEvent("FocusEvent");
|
||||
t.initEvent("focusout", !0, !1), e.dispatchEvent(t)
|
||||
}
|
||||
|
||||
function d(e, t) {
|
||||
return e.getAttribute(t)
|
||||
}
|
||||
|
||||
function r(e, t) {
|
||||
return !!e && e.classList.contains(t)
|
||||
}
|
||||
|
||||
function l(e, t) {
|
||||
if (e) return e.classList.add(t)
|
||||
}
|
||||
|
||||
function a(e, t) {
|
||||
if (e) return e.classList.remove(t)
|
||||
}
|
||||
|
||||
e.r(t), e.d(t, {default: () => p, bind: () => u});
|
||||
var c = {data: null, searchable: !1};
|
||||
|
||||
function p(e, t) {
|
||||
this.el = e, this.config = Object.assign({}, c, t || {}), this.data = this.config.data, this.selectedOptions = [], this.placeholder = d(this.el, "placeholder") || this.config.placeholder || "Select an option", this.dropdown = null, this.multiple = d(this.el, "multiple"), this.disabled = d(this.el, "disabled"), this.create()
|
||||
}
|
||||
|
||||
function u(e, t) {
|
||||
return new p(e, t)
|
||||
}
|
||||
|
||||
return p.prototype.create = function () {
|
||||
this.el.style.display = "none", this.data ? this.processData(this.data) : this.extractData(), this.renderDropdown(), this.bindEvent()
|
||||
}, p.prototype.processData = function (e) {
|
||||
var t = [];
|
||||
e.forEach((e => {
|
||||
t.push({data: e, attributes: {selected: !1, disabled: !1, optgroup: "optgroup" == e.value}})
|
||||
})), this.options = t
|
||||
}, p.prototype.extractData = function () {
|
||||
var e = this.el.querySelectorAll("option,optgroup"), t = [], i = [], s = [];
|
||||
e.forEach((e => {
|
||||
if ("OPTGROUP" == e.tagName) var s = {text: e.label, value: "optgroup"}; else s = {
|
||||
text: e.innerText,
|
||||
value: e.value
|
||||
};
|
||||
var o = {
|
||||
selected: null != e.getAttribute("selected"),
|
||||
disabled: null != e.getAttribute("disabled"),
|
||||
optgroup: "OPTGROUP" == e.tagName
|
||||
};
|
||||
t.push(s), i.push({data: s, attributes: o})
|
||||
})), this.data = t, this.options = i, this.options.forEach((function (e) {
|
||||
e.attributes.selected && s.push(e)
|
||||
})), this.selectedOptions = s
|
||||
}, p.prototype.renderDropdown = function () {
|
||||
var e = `<div class="${["nice-select", d(this.el, "class") || "", this.disabled ? "disabled" : "", this.multiple ? "has-multiple" : ""].join(" ")}" tabindex="${this.disabled ? null : 0}">\n <span class="${this.multiple ? "multiple-options" : "current"}"></span>\n <div class="nice-select-dropdown">\n ${this.config.searchable ? '<div class="nice-select-search-box">\n<input type="text" class="nice-select-search" placeholder="Search..."/>\n</div>' : ""}\n <ul class="list"></ul>\n </div></div>\n`;
|
||||
this.el.insertAdjacentHTML("afterend", e), this.dropdown = this.el.nextElementSibling, this._renderSelectedItems(), this._renderItems()
|
||||
}, p.prototype._renderSelectedItems = function () {
|
||||
if (this.multiple) {
|
||||
var e = "";
|
||||
"auto" == window.getComputedStyle(this.dropdown).width || this.selectedOptions.length < 2 ? (this.selectedOptions.forEach((function (t) {
|
||||
e += `<span class="current">${t.data.text}</span>`
|
||||
})), e = "" == e ? this.placeholder : e) : e = this.selectedOptions.length + " selected", this.dropdown.querySelector(".multiple-options").innerHTML = e
|
||||
} else {
|
||||
var t = this.selectedOptions.length > 0 ? this.selectedOptions[0].data.text : this.placeholder;
|
||||
this.dropdown.querySelector(".current").innerHTML = t
|
||||
}
|
||||
}, p.prototype._renderItems = function () {
|
||||
var e = this.dropdown.querySelector("ul");
|
||||
this.options.forEach((t => {
|
||||
e.appendChild(this._renderItem(t))
|
||||
}))
|
||||
}, p.prototype._renderItem = function (e) {
|
||||
var t = document.createElement("li");
|
||||
if (t.innerHTML = e.data.text, e.attributes.optgroup) t.classList.add("optgroup"); else {
|
||||
t.setAttribute("data-value", e.data.value);
|
||||
var i = ["option", e.attributes.selected ? "selected" : null, e.attributes.disabled ? "disabled" : null];
|
||||
t.addEventListener("click", this._onItemClicked.bind(this, e)), t.classList.add(...i)
|
||||
}
|
||||
return e.element = t, t
|
||||
}, p.prototype.update = function () {
|
||||
if (this.extractData(), this.dropdown) {
|
||||
var e = r(this.dropdown, "open");
|
||||
this.dropdown.parentNode.removeChild(this.dropdown), this.create(), e && i(this.dropdown)
|
||||
}
|
||||
}, p.prototype.disable = function () {
|
||||
this.disabled || (this.disabled = !0, l(this.dropdown, "disabled"))
|
||||
}, p.prototype.enable = function () {
|
||||
this.disabled && (this.disabled = !1, a(this.dropdown, "disabled"))
|
||||
}, p.prototype.clear = function () {
|
||||
this.selectedOptions = [], this._renderSelectedItems(), this.updateSelectValue(), s(this.el)
|
||||
}, p.prototype.destroy = function () {
|
||||
this.dropdown && (this.dropdown.parentNode.removeChild(this.dropdown), this.el.style.display = "")
|
||||
}, p.prototype.bindEvent = function () {
|
||||
this.dropdown.addEventListener("click", this._onClicked.bind(this)), this.dropdown.addEventListener("keydown", this._onKeyPressed.bind(this)), this.dropdown.addEventListener("focusin", o.bind(this, this.el)), this.dropdown.addEventListener("focusout", n.bind(this, this.el)), window.addEventListener("click", this._onClickedOutside.bind(this)), this.config.searchable && this._bindSearchEvent()
|
||||
}, p.prototype._bindSearchEvent = function () {
|
||||
var e = this.dropdown.querySelector(".nice-select-search");
|
||||
e && e.addEventListener("click", (function (e) {
|
||||
return e.stopPropagation(), !1
|
||||
})), e.addEventListener("input", this._onSearchChanged.bind(this))
|
||||
}, p.prototype._onClicked = function (e) {
|
||||
if (this.multiple ? this.dropdown.classList.add("open") : this.dropdown.classList.toggle("open"), this.dropdown.classList.contains("open")) {
|
||||
var t = this.dropdown.querySelector(".nice-select-search");
|
||||
t && (t.value = "", t.focus());
|
||||
var i = this.dropdown.querySelector(".focus");
|
||||
a(i, "focus"), l(i = this.dropdown.querySelector(".selected"), "focus"), this.dropdown.querySelectorAll("ul li").forEach((function (e) {
|
||||
e.style.display = ""
|
||||
}))
|
||||
} else this.dropdown.focus()
|
||||
}, p.prototype._onItemClicked = function (e, t) {
|
||||
var i = t.target;
|
||||
r(i, "disabled") || (this.multiple ? r(i, "selected") ? (a(i, "selected"), this.selectedOptions.splice(this.selectedOptions.indexOf(e), 1), this.el.querySelector('option[value="' + i.dataset.value + '"]').selected = !1) : (l(i, "selected"), this.selectedOptions.push(e)) : (this.selectedOptions.forEach((function (e) {
|
||||
a(e.element, "selected")
|
||||
})), l(i, "selected"), this.selectedOptions = [e]), this._renderSelectedItems(), this.updateSelectValue())
|
||||
}, p.prototype.updateSelectValue = function () {
|
||||
if (this.multiple) {
|
||||
var e = this.el;
|
||||
this.selectedOptions.forEach((function (t) {
|
||||
var i = e.querySelector('option[value="' + t.data.value + '"]');
|
||||
i && i.setAttribute("selected", !0)
|
||||
}))
|
||||
} else this.selectedOptions.length > 0 && (this.el.value = this.selectedOptions[0].data.value);
|
||||
s(this.el)
|
||||
}, p.prototype._onClickedOutside = function (e) {
|
||||
this.dropdown.contains(e.target) || this.dropdown.classList.remove("open")
|
||||
}, p.prototype._onKeyPressed = function (e) {
|
||||
var t = this.dropdown.querySelector(".focus"), s = this.dropdown.classList.contains("open");
|
||||
if (32 == e.keyCode || 13 == e.keyCode) i(s ? t : this.dropdown); else if (40 == e.keyCode) {
|
||||
if (s) {
|
||||
var o = this._findNext(t);
|
||||
o && (a(this.dropdown.querySelector(".focus"), "focus"), l(o, "focus"))
|
||||
} else i(this.dropdown);
|
||||
e.preventDefault()
|
||||
} else if (38 == e.keyCode) {
|
||||
if (s) {
|
||||
var n = this._findPrev(t);
|
||||
n && (a(this.dropdown.querySelector(".focus"), "focus"), l(n, "focus"))
|
||||
} else i(this.dropdown);
|
||||
e.preventDefault()
|
||||
} else 27 == e.keyCode && s && i(this.dropdown);
|
||||
return !1
|
||||
}, p.prototype._findNext = function (e) {
|
||||
for (e = e ? e.nextElementSibling : this.dropdown.querySelector(".list .option"); e;) {
|
||||
if (!r(e, "disabled") && "none" != e.style.display) return e;
|
||||
e = e.nextElementSibling
|
||||
}
|
||||
return null
|
||||
}, p.prototype._findPrev = function (e) {
|
||||
for (e = e ? e.previousElementSibling : this.dropdown.querySelector(".list .option:last-child"); e;) {
|
||||
if (!r(e, "disabled") && "none" != e.style.display) return e;
|
||||
e = e.previousElementSibling
|
||||
}
|
||||
return null
|
||||
}, p.prototype._onSearchChanged = function (e) {
|
||||
var t = this.dropdown.classList.contains("open"), i = e.target.value;
|
||||
if ("" == (i = i.toLowerCase())) this.options.forEach((function (e) {
|
||||
e.element.style.display = ""
|
||||
})); else if (t) {
|
||||
var s = new RegExp(i);
|
||||
this.options.forEach((function (e) {
|
||||
var t = e.data.text.toLowerCase(), i = s.test(t);
|
||||
e.element.style.display = i ? "" : "none"
|
||||
}))
|
||||
}
|
||||
this.dropdown.querySelectorAll(".focus").forEach((function (e) {
|
||||
a(e, "focus")
|
||||
})), l(this._findNext(null), "focus")
|
||||
}, t
|
||||
})()
|
||||
}));
|
||||
@@ -0,0 +1 @@
|
||||
code[class*=language-],pre[class*=language-]{border-radius:2px;color:#445870;hyphens:none;line-height:1.5;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal;word-wrap:normal;direction:ltr;font-family:Inconsolata,monospace;font-size:13px;letter-spacing:0}pre[class*=language-]{padding:18px 24px;margin:0 0 24px;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f6f7f9}:not(pre)>code[class*=language-]{padding:0 2px 1px}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#90a1b5}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#ec4444}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#4abf60}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#55a1fb}.token.function{color:#dd4a68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#445870;font-family:"Work Sans",sans-serif;font-size:14px;font-weight:normal;letter-spacing:-0.25px;margin:0;padding:0 18px}p{line-height:1.6;margin:0 0 1.6em}h1{font-size:36px;font-weight:300;letter-spacing:-2px;margin:0 0 24px}h2{font-size:22px;font-weight:700;margin:0 0 12px;padding-top:48px}h3{font-size:18px;font-weight:400;margin:0 0 12px;padding-top:12px}ul{margin:0;padding-left:16px}a:not(.button){color:#55a1fb;outline:none;text-decoration:none;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border-bottom:1px solid transparent}a:not(.button):hover,a:not(.button):focus{border-bottom:1px solid #88bfff}::selection{background:#f3f4f7}.container{margin:96px auto 60px;max-width:40em}.box{background-color:#f6f7f9;border-radius:2px;margin-bottom:30px;padding:24px 30px}.box:before,.box:after{content:"";display:table}.box:after{clear:both}label{color:#90a1b5;font-size:11px;margin:0 2px 4px;text-transform:uppercase;float:left}label.right{float:right}.button{-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#55a1fb;border-radius:5px;border:none;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-weight:600;height:38px;line-height:38px;outline:none;padding:0 24px;text-align:center;text-decoration:none;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;white-space:nowrap;width:auto}.button:hover,.button:focus{background-color:#4196fb}.button:active{background-color:#2d8bfa}.button.light{background-color:#fff;border:1px solid #e8e8e8;color:#55a1fb;line-height:36px;margin-left:24px}.button.light:hover{border-color:#dbdbdb}.button.light:active,.button.light:focus{border-color:#88bfff}@media screen and (max-width: 360px){.button{width:100%}.button.light{margin:18px 0 0}}.header{text-align:center;margin-bottom:60px}@media screen and (min-width: 600px){.header{padding:0 18px}}.header p{color:#90a1b5;font-size:18px;margin-bottom:36px}.footer{text-align:center}.footer p{margin-bottom:90px}.credit{color:#90a1b5;clear:both;font-size:12px;margin-top:90px}
|
||||
@@ -0,0 +1 @@
|
||||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.NiceSelect=t():e.NiceSelect=t()}(self,(function(){return(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()}));
|
||||
Reference in New Issue
Block a user