Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@prof-dev/improved-select

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@prof-dev/improved-select - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

lib/utils.js

13

lib/ImprovedSelect.d.ts

@@ -0,1 +1,2 @@

import { EventEmitter } from "@prof-dev/event-emitter";
declare type ImprovedSelectInfo = {

@@ -9,4 +10,3 @@ isActive: boolean;

declare type ImprovedSelectEventType = "open" | "close" | "toggle" | "change";
declare type ImprovedSelectEventListener = (info: ImprovedSelectInfo) => void;
export declare class ImprovedSelect {
export declare class ImprovedSelect extends EventEmitter<ImprovedSelectEventType, ImprovedSelect> {
private element;

@@ -18,3 +18,2 @@ private isActive;

private closeElements;
private events;
private select;

@@ -28,3 +27,2 @@ private selectBody;

private isHtmlValue;
static improvedSelectElements: ImprovedSelect[];
constructor(element: HTMLElement);

@@ -45,11 +43,10 @@ private initChangeStateBehavior;

close(): void;
on(type: ImprovedSelectEventType, listener: ImprovedSelectEventListener): void;
off(type: ImprovedSelectEventType, listener: ImprovedSelectEventListener): void;
dispatch(type: ImprovedSelectEventType): void;
updateDisabledOptions(): void;
reset(): void;
clear(): void;
static create(element: HTMLElement): ImprovedSelect;
static initAllAvailableOnPage(): void;
static getInstance(element: HTMLElement): ImprovedSelect;
static getInstance(element: HTMLElement): ImprovedSelect | undefined;
static blurSimulationHandler(event: MouseEvent | TouchEvent): void;
}
export {};

@@ -1,1 +0,383 @@

(()=>{"use strict";var e={906:()=>{},951:function(e,t,i){var n=this&&this.__values||function(e){var t="function"==typeof Symbol&&Symbol.iterator,i=t&&e[t],n=0;if(i)return i.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")};Object.defineProperty(t,"__esModule",{value:!0}),t.ImprovedSelect=void 0;var s=i(593),o=function(){function e(t){var i;this.element=t,this.isActive=!1,this.isSearchActive=!1,this.isSelected=!1,this.toggleElements=[],this.closeElements=[],this.events={open:[],close:[],toggle:[],change:[]},this.linkedOptions=[],this.selectedValueElements=[],this.initialSelection=[],this.defaultSelection=[],this.isHtmlValue=!1,this.isActive=this.element.classList.contains("is-active"),this.isHtmlValue=this.element.hasAttribute("data-select-html-value"),this.toggleElements=Array.from(this.element.querySelectorAll("[data-select-toggle]")),this.closeElements=Array.from(this.element.querySelectorAll("[data-select-close]")),this.select=this.element.querySelector("select"),this.linkedOptions=Array.from(this.element.querySelectorAll("[data-select-option]")),this.selectedValueElements=Array.from(this.element.querySelectorAll("[data-select-value]")),this.selectBody=this.element.querySelector("[data-select-body]"),this.searchInput=this.element.querySelector("[data-select-search]"),this.initToggleBehavior(),this.initCloseBehavior(),this.initSelectBehavior(),this.initSearchBehavior(),this.initChangeStateBehavior(),this.updateActiveState(),this.element.setAttribute("data-improved-select","initialized"),this.element.classList.toggle("is-multiple",!0===(null===(i=this.select)||void 0===i?void 0:i.multiple)),e.improvedSelectElements.push(this)}return e.prototype.initChangeStateBehavior=function(){var e,t,i,s;if(this.select){try{for(var o=n(Array.from(this.select.selectedOptions)),l=o.next();!l.done;l=o.next()){var r=l.value;this.initialSelection.push(r.index)}}catch(t){e={error:t}}finally{try{l&&!l.done&&(t=o.return)&&t.call(o)}finally{if(e)throw e.error}}try{for(var c=n(Array.from(this.select.options)),a=c.next();!a.done;a=c.next())(r=a.value).hasAttribute("data-select-default")&&this.defaultSelection.push(r.index)}catch(e){i={error:e}}finally{try{a&&!a.done&&(s=c.return)&&s.call(c)}finally{if(i)throw i.error}}0===this.defaultSelection.length&&this.select.options.length>0&&this.defaultSelection.push(0)}},e.prototype.initToggleBehavior=function(){var e=this;this.toggleElements.forEach((function(t){t.addEventListener("click",(function(){e.isActive?e.close():e.toggle()}))})),!1===this.element.hasAttribute("data-improved-select-modal")&&this.on("toggle",(function(){e.fixBodyVisibility()}))},e.prototype.initCloseBehavior=function(){var e=this;this.closeElements.forEach((function(t){t.addEventListener("click",(function(){e.close()}))}))},e.prototype.initSelectBehavior=function(){var e=this;this.linkedOptions.forEach((function(t,i){t.addEventListener("click",(function(){if(e.select&&e.select.options[i]){var t=e.select.options[i];t.selected=!t.selected,e.select.dispatchEvent(new Event("change"))}null!==e.select&&!1!==e.select.multiple||e.close()}))})),this.select&&this.select.addEventListener("change",(function(){e.dispatch("change")})),this.on("change",(function(){e.updateActiveState()}))},e.prototype.initSearchBehavior=function(){var e=this;this.searchInput&&(this.searchInput.addEventListener("input",(function(){e.updateSearchState()})),this.updateSearchState()),this.on("toggle",(function(){e.resetSearchState()}))},e.prototype.updateActiveState=function(){var e=this;if(this.select){var t=Array.from(this.select.selectedOptions),i=this.isHtmlValue?t.map((function(t){var i;return null===(i=e.linkedOptions[t.index])||void 0===i?void 0:i.innerHTML})).join(", "):t.map((function(e){return e.innerHTML})).join(", ");this.isSelected=this.element.classList.toggle("is-selected",t.length>0),this.selectedValueElements.forEach((function(e){e.innerHTML=i})),this.linkedOptions.forEach((function(i,n){e.select&&(i.classList.toggle("is-active",t.some((function(e){return!1===e.disabled&&e.index===n}))),i.classList.toggle("is-disabled",t.some((function(e){return!0===e.disabled&&e.index===n}))))})),this.element.classList.toggle("is-changed",!1===s.arrayEqual(this.defaultSelection,t.map((function(e){return e.index}))))}},e.prototype.updateSearchState=function(){var e=this;if(this.searchInput){var t=this.searchInput.value.trim();this.isSearchActive=this.element.classList.toggle("is-search-active",t.length>0),this.select&&Array.from(this.select.options).forEach((function(i,n){if(e.linkedOptions[n]){var s=t.length>0&&e.searchInString(i.value,t),o=t.length>0&&e.searchInString(i.innerText,t);e.linkedOptions[n].classList.toggle("is-hidden",t.length>0&&!0!==s&&!0!==o)}}))}},e.prototype.searchInString=function(e,t){var i=e.toLocaleLowerCase();return t.toLocaleLowerCase().split(/[\s]+/).some((function(e){return i.includes(e)}))},e.prototype.resetSearchState=function(){this.searchInput&&(this.searchInput.value="",this.searchInput.dispatchEvent(new Event("input")))},e.prototype.fixBodyVisibility=function(){if(this.selectBody)if(this.isActive){var e=this.selectBody.getBoundingClientRect(),t=e.left,i=e.width,n=window.innerWidth-document.body.clientWidth,s=window.innerWidth-(t+i+16+n);this.selectBody.style.transform="translate("+Math.min(s,0)+"px, 0)"}else this.selectBody.removeAttribute("style")},e.prototype.info=function(){return{isActive:this.isActive,isSearchActive:this.isSearchActive,isSelected:this.isSelected,element:this.element,select:this.select}},e.prototype.toggle=function(e){this.isActive=this.element.classList.toggle("is-active",e),this.element.hasAttribute("data-improved-select-modal")&&document.body.classList.toggle("no-scroll",this.isActive),this.dispatch("toggle")},e.prototype.open=function(){!1===this.isActive&&(this.toggle(!0),this.dispatch("open"))},e.prototype.close=function(){this.isActive&&(this.toggle(!1),this.dispatch("close"))},e.prototype.on=function(e,t){this.events[e].push(t)},e.prototype.off=function(e,t){this.events[e]=this.events[e].filter((function(e){return e!==t}))},e.prototype.dispatch=function(e){var t=this;this.events[e].forEach((function(e){e(t.info())}))},e.prototype.reset=function(){var e,t;if(this.select){Array.from(this.select.options).forEach((function(e){e.selected=!1}));try{for(var i=n(this.initialSelection),s=i.next();!s.done;s=i.next()){var o=s.value;void 0!==this.select.options[o]&&(this.select.options[o].selected=!0)}}catch(t){e={error:t}}finally{try{s&&!s.done&&(t=i.return)&&t.call(i)}finally{if(e)throw e.error}}this.select.dispatchEvent(new Event("change"))}},e.create=function(e){return new this(e)},e.initAllAvailableOnPage=function(){document.querySelectorAll('[data-improved-select]:not([data-improved-select="initialized"])').forEach((function(t){e.create(t)}))},e.getInstance=function(t){var i=e.improvedSelectElements.find((function(e){return e.info().element===t}));return void 0===i?e.create(t):i},e.blurSimulationHandler=function(t){e.improvedSelectElements.forEach((function(e){var i=e.info(),n=i.element;!0===i.isActive&&!1===n.contains(t.target)&&e.close()}))},e.improvedSelectElements=[],e}();t.ImprovedSelect=o,document.addEventListener("mousedown",(function(e){o.blurSimulationHandler(e)})),document.addEventListener("touchstart",(function(e){o.blurSimulationHandler(e)}))},593:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.arrayEqual=void 0,t.arrayEqual=function(e,t){if(e.length!==t.length)return!1;for(var i=0;i<e.length;i++)if(!1===t.includes(e[i]))return!1;return!0}}},t={};function i(n){var s=t[n];if(void 0!==s)return s.exports;var o=t[n]={exports:{}};return e[n].call(o.exports,o,o.exports,i),o.exports}i(951),i(906)})();
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImprovedSelect = void 0;
var event_emitter_1 = require("@prof-dev/event-emitter");
var utils_1 = require("./utils");
var improvedSelectElementsMap = new Map();
var ImprovedSelect = /** @class */ (function (_super) {
__extends(ImprovedSelect, _super);
function ImprovedSelect(element) {
var _a;
var _this = _super.call(this) || this;
_this.element = element;
_this.isActive = false;
_this.isSearchActive = false;
_this.isSelected = false;
_this.toggleElements = [];
_this.closeElements = [];
_this.linkedOptions = [];
_this.selectedValueElements = [];
_this.initialSelection = [];
_this.defaultSelection = [];
_this.isHtmlValue = false;
_this.isActive = _this.element.classList.contains("is-active");
_this.isHtmlValue = _this.element.hasAttribute("data-select-html-value");
_this.toggleElements = Array.from(_this.element.querySelectorAll("[data-select-toggle]"));
_this.closeElements = Array.from(_this.element.querySelectorAll("[data-select-close]"));
_this.select = _this.element.querySelector("select");
_this.linkedOptions = Array.from(_this.element.querySelectorAll("[data-select-option]"));
_this.selectedValueElements = Array.from(_this.element.querySelectorAll("[data-select-value]"));
_this.selectBody = _this.element.querySelector("[data-select-body]");
_this.searchInput = _this.element.querySelector("[data-select-search]");
_this.initToggleBehavior();
_this.initCloseBehavior();
_this.initSelectBehavior();
_this.initSearchBehavior();
_this.initChangeStateBehavior();
_this.updateActiveState();
_this.element.setAttribute("data-improved-select", "initialized");
_this.element.classList.toggle("is-multiple", ((_a = _this.select) === null || _a === void 0 ? void 0 : _a.multiple) === true);
improvedSelectElementsMap.set(element, _this);
return _this;
}
ImprovedSelect.prototype.initChangeStateBehavior = function () {
var e_1, _a, e_2, _b;
if (this.select) {
try {
for (var _c = __values(Array.from(this.select.selectedOptions)), _d = _c.next(); !_d.done; _d = _c.next()) {
var option = _d.value;
this.initialSelection.push(option.index);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
try {
for (var _e = __values(Array.from(this.select.options)), _f = _e.next(); !_f.done; _f = _e.next()) {
var option = _f.value;
if (option.hasAttribute("data-select-default")) {
this.defaultSelection.push(option.index);
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_2) throw e_2.error; }
}
if (this.defaultSelection.length === 0 &&
this.select.options.length > 0) {
this.defaultSelection.push(0);
}
}
};
ImprovedSelect.prototype.initToggleBehavior = function () {
var _this = this;
this.toggleElements.forEach(function (toggleElement) {
toggleElement.addEventListener("click", function () {
if (_this.isActive) {
_this.close();
}
else {
_this.toggle();
}
});
});
if (this.element.hasAttribute("data-improved-select-modal") === false) {
this.on("toggle", function () {
_this.fixBodyVisibility();
});
}
};
ImprovedSelect.prototype.initCloseBehavior = function () {
var _this = this;
this.closeElements.forEach(function (closeElement) {
closeElement.addEventListener("click", function () {
_this.close();
});
});
};
ImprovedSelect.prototype.initSelectBehavior = function () {
var _this = this;
this.linkedOptions.forEach(function (linkedOption, index) {
linkedOption.addEventListener("click", function () {
if (_this.select && _this.select.options[index]) {
var option = _this.select.options[index];
if (_this.select.multiple) {
option.selected = !option.selected;
}
else {
option.selected = true;
}
_this.select.dispatchEvent(new Event("change", {
bubbles: true,
}));
}
if (_this.select === null || _this.select.multiple === false) {
_this.close();
}
});
});
if (this.select) {
this.select.addEventListener("change", function () {
_this.dispatch("change", _this);
});
}
this.on("change", function () {
_this.updateActiveState();
});
};
ImprovedSelect.prototype.initSearchBehavior = function () {
var _this = this;
if (this.searchInput) {
this.searchInput.addEventListener("input", function () {
_this.updateSearchState();
});
this.updateSearchState();
}
this.on("toggle", function () {
_this.resetSearchState();
});
};
ImprovedSelect.prototype.updateActiveState = function () {
var _this = this;
if (this.select) {
var selectedOptions_1 = Array.from(this.select.selectedOptions);
var selectedValuesText_1 = selectedOptions_1.length > 0
? this.isHtmlValue
? selectedOptions_1
.map(function (option) { var _a; return (_a = _this.linkedOptions[option.index]) === null || _a === void 0 ? void 0 : _a.innerHTML; })
.join(", ")
: selectedOptions_1.map(function (option) { return option.innerHTML; }).join(", ")
: "";
this.isSelected = this.element.classList.toggle("is-selected", selectedOptions_1.length > 0);
this.selectedValueElements.forEach(function (selectedValueElement) {
selectedValueElement.innerHTML = selectedValuesText_1;
});
this.linkedOptions.forEach(function (linkedOption, index) {
if (_this.select) {
var isActive = selectedOptions_1.some(function (opt) { return opt.disabled === false && opt.index === index; });
linkedOption.classList.toggle("is-active", isActive);
_this.updateDisabledOptions();
}
});
this.element.classList.toggle("is-changed", utils_1.arrayEqual(this.defaultSelection, selectedOptions_1.map(function (option) { return option.index; })) === false);
}
};
ImprovedSelect.prototype.updateSearchState = function () {
var _this = this;
if (this.searchInput) {
var searchValue_1 = this.searchInput.value.trim();
this.isSearchActive = this.element.classList.toggle("is-search-active", searchValue_1.length > 0);
if (this.select) {
Array.from(this.select.options).forEach(function (option, index) {
if (_this.linkedOptions[index]) {
var valueMatch = searchValue_1.length > 0
? _this.searchInString(option.value, searchValue_1)
: false;
var textMatch = searchValue_1.length > 0
? _this.searchInString(option.innerText, searchValue_1)
: false;
_this.linkedOptions[index].classList.toggle("is-hidden", searchValue_1.length > 0 &&
valueMatch !== true &&
textMatch !== true);
}
});
}
}
};
ImprovedSelect.prototype.searchInString = function (target, value) {
var searchTarget = target.toLocaleLowerCase();
var searchValue = value.toLocaleLowerCase();
return searchValue.split(/[\s]+/).some(function (str) { return searchTarget.includes(str); });
};
ImprovedSelect.prototype.resetSearchState = function () {
if (this.searchInput) {
this.searchInput.value = "";
this.searchInput.dispatchEvent(new Event("input"));
}
};
ImprovedSelect.prototype.fixBodyVisibility = function () {
if (this.selectBody) {
if (this.isActive) {
var _a = this.selectBody.getBoundingClientRect(), left = _a.left, width = _a.width;
var scrollBarWidth = window.innerWidth - document.body.clientWidth;
var offset = window.innerWidth - (left + width + 16 + scrollBarWidth);
this.selectBody.style.transform = "translate(" + Math.min(offset, 0) + "px, 0)";
}
else {
this.selectBody.removeAttribute("style");
}
}
};
ImprovedSelect.prototype.info = function () {
return {
isActive: this.isActive,
isSearchActive: this.isSearchActive,
isSelected: this.isSelected,
element: this.element,
select: this.select,
};
};
ImprovedSelect.prototype.toggle = function (force) {
this.isActive = this.element.classList.toggle("is-active", force);
if (this.element.hasAttribute("data-improved-select-modal")) {
document.body.classList.toggle("no-scroll", this.isActive);
}
this.dispatch("toggle", this);
};
ImprovedSelect.prototype.open = function () {
if (this.isActive === false) {
this.toggle(true);
this.dispatch("open", this);
}
};
ImprovedSelect.prototype.close = function () {
if (this.isActive) {
this.toggle(false);
this.dispatch("close", this);
}
};
ImprovedSelect.prototype.updateDisabledOptions = function () {
var _this = this;
if (this.select) {
var options_1 = Array.from(this.select.options);
this.linkedOptions.forEach(function (linkedOption, index) {
var _a;
if (_this.select) {
var isDisabled = ((_a = options_1[index]) === null || _a === void 0 ? void 0 : _a.disabled) === true;
linkedOption.classList.toggle("is-disabled", isDisabled);
}
});
}
};
ImprovedSelect.prototype.reset = function () {
var e_3, _a;
if (this.select) {
Array.from(this.select.options).forEach(function (option) {
option.selected = false;
});
try {
for (var _b = __values(this.initialSelection), _c = _b.next(); !_c.done; _c = _b.next()) {
var index = _c.value;
if (this.select.options[index] !== undefined) {
this.select.options[index].selected = true;
}
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
this.select.dispatchEvent(new Event("change", {
bubbles: true,
}));
}
};
ImprovedSelect.prototype.clear = function () {
if (this.select) {
Array.from(this.select.options).forEach(function (option) {
option.selected = false;
});
this.select.dispatchEvent(new Event("change", {
bubbles: true,
}));
}
};
ImprovedSelect.create = function (element) {
var instance = improvedSelectElementsMap.get(element);
if (instance !== undefined) {
return instance;
}
return new ImprovedSelect(element);
};
ImprovedSelect.initAllAvailableOnPage = function () {
document
.querySelectorAll("[data-improved-select]:not([data-improved-select=\"initialized\"])")
.forEach(function (element) {
ImprovedSelect.create(element);
});
};
ImprovedSelect.getInstance = function (element) {
return improvedSelectElementsMap.get(element);
};
ImprovedSelect.blurSimulationHandler = function (event) {
var e_4, _a;
try {
for (var improvedSelectElementsMap_1 = __values(improvedSelectElementsMap), improvedSelectElementsMap_1_1 = improvedSelectElementsMap_1.next(); !improvedSelectElementsMap_1_1.done; improvedSelectElementsMap_1_1 = improvedSelectElementsMap_1.next()) {
var _b = __read(improvedSelectElementsMap_1_1.value, 2), _ = _b[0], improvedSelect = _b[1];
var _c = improvedSelect.info(), element = _c.element, isActive = _c.isActive;
if (isActive === true &&
element.contains(event.target) === false) {
improvedSelect.close();
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (improvedSelectElementsMap_1_1 && !improvedSelectElementsMap_1_1.done && (_a = improvedSelectElementsMap_1.return)) _a.call(improvedSelectElementsMap_1);
}
finally { if (e_4) throw e_4.error; }
}
};
return ImprovedSelect;
}(event_emitter_1.EventEmitter));
exports.ImprovedSelect = ImprovedSelect;
document.addEventListener("mousedown", function (event) {
ImprovedSelect.blurSimulationHandler(event);
});
document.addEventListener("touchstart", function (event) {
ImprovedSelect.blurSimulationHandler(event);
});
{
"name": "@prof-dev/improved-select",
"version": "1.0.2",
"version": "1.0.3",
"description": "Helper for live clicks events management",
"main": "lib/ImprovedSelect.js",
"types": "lib/ImprovedSelect.d.ts",
"files": [
"lib"
],
"scripts": {

@@ -38,3 +35,6 @@ "test": "echo \"Error: no test specified\" && exit 1",

"webpack-cli": "^4.7.2"
},
"dependencies": {
"@prof-dev/event-emitter": "^1.0.3"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc