Maintenance

taufik-nurrohman · Mar 6, 2022 · 5a60437 · 5a60437
1 parent f4a048e
commit 5a60437
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 41 deletions.
diff --git a/.github/source/index.css.scss b/.github/source/index.css.scss
@@ -36,7 +36,11 @@ $name: 'option-picker';
 
 .#{$name} {
   &,
-  & * {
+  &::before,
+  &::after,
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box;
     font: inherit;
   }

diff --git a/.github/source/index.html.pug b/.github/source/index.html.pug
@@ -64,7 +64,7 @@ block style
     |   text-align: left;
     |   vertical-align: top;
     | }
-    | body > p:first-child {
+    | [role='alert'] {
     |   background: #ffa;
     |   border: 1px dashed;
     |   margin-top: 0;
@@ -78,7 +78,7 @@ block style
     | }
 
 block content
-  p Do you like this project? Please support my #[a(href='https://github.com/mecha-cms') Mecha CMS] project too. Thank you!
+  p(role='alert') Do you like this project? Please support my #[a(href='https://github.com/mecha-cms') Mecha CMS] project too. Thank you!
   header
     h1= title
     p Just a generic custom #[code &lt;select&gt;] element with accessibility in mind.

diff --git a/.github/source/index.js.mjs b/.github/source/index.js.mjs
@@ -1,4 +1,4 @@
-import {D, W, getAttribute, getChildren, getClasses, getHTML, getName, getParent, getStyle, getText, hasAttribute, hasClass, letAttribute, letClass, letElement, letText, setAttribute, setChildLast, setClass, setData, setElement, setHTML, setStyle, setStyles, setText, toggleClass} from '@taufik-nurrohman/document';
+import {D, W, getAttribute, getChildren, getClasses, getHTML, getName, getParent, getStyle, getText, hasAttribute, hasClass, letAttribute, letClass, letElement, letText, setAttribute, setChildLast, setClass, setData, setElement, setHTML, setNext, setStyle, setStyles, setText, toggleClass} from '@taufik-nurrohman/document';
 import {debounce, delay} from '@taufik-nurrohman/tick';
 import {fromStates, fromValue} from '@taufik-nurrohman/from';
 import {getOffset, getRect, getScroll, getSize, setScroll} from '@taufik-nurrohman/rect';
@@ -225,7 +225,7 @@ function OP(source, state = {}) {
     }
 
     setChildLast(selectBoxFake, selectBoxFakeInput || selectBoxFakeLabel);
-    getParent(selectBox).insertBefore(selectBoxFake, selectBox.nextSibling);
+    setNext(selectBox, selectBoxFake);
 
     function doBlur() {
         letClass(selectBoxFake, classNameM + 'focus');
@@ -437,10 +437,12 @@ function OP(source, state = {}) {
     }
 
     function onSelectBoxFakeInputValueFocus() {
-        let value = getText(this),
+        let t = this,
+            value = getText(t),
             selectBoxOption,
             selectBoxFakeOption;
         selectBoxOptionIndex = -1; // `<input>` does not have `selectedIndex` property!
+        selectElementContents(t);
         for (let i = 0, j = toCount(selectBoxOptions); i < j; ++i) {
             selectBoxOption = selectBoxOptions[i];
             selectBoxFakeOption = selectBoxFakeOptions[i];

diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Contribute
 Release Notes
 -------------
 
-### 1.3.2
+### 1.3.3
 
  - Added ability to convert `<input>` element with `list` attribute.
  - Fixed the custom select box insertion node that does not consider the text node.

diff --git a/index.css b/index.css
@@ -33,7 +33,11 @@
 }
 
 .option-picker,
-.option-picker * {
+.option-picker::before,
+.option-picker::after,
+.option-picker *,
+.option-picker *::before,
+.option-picker *::after {
   box-sizing: border-box;
   font: inherit;
 }

diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta content="#000" name="theme-color">
     <meta content="width=device-width" name="viewport">
     <meta content="Just a generic custom `&lt;select&gt;` element with accessibility in mind." name="description">
-    <title>Option Picker 1.3.2</title>
+    <title>Option Picker 1.3.3</title>
     <link href="index.min.css" rel="stylesheet">
     <style>
       * {
@@ -59,7 +59,7 @@
         text-align: left;
         vertical-align: top;
       }
-      body > p:first-child {
+      [role='alert'] {
         background: #ffa;
         border: 1px dashed;
         margin-top: 0;
@@ -74,9 +74,9 @@
     </style>
   </head>
   <body>
-    <p>Do you like this project? Please support my <a href="https://github.com/mecha-cms">Mecha CMS</a> project too. Thank you!</p>
+    <p role="alert">Do you like this project? Please support my <a href="https://github.com/mecha-cms">Mecha CMS</a> project too. Thank you!</p>
     <header>
-      <h1>Option Picker 1.3.2</h1>
+      <h1>Option Picker 1.3.3</h1>
       <p>Just a generic custom <code>&lt;select&gt;</code> element with accessibility in mind.</p>
       <hr>
     </header>

diff --git a/index.js b/index.js
@@ -176,10 +176,8 @@
         }
         return "" + x;
     };
-    var D = document;
-    var W = window;
-    var B = D.body;
-    var R = D.documentElement;
+    var D$1 = document;
+    var W$1 = window;
     var getAttribute = function getAttribute(node, attribute, parseValue) {
         if (parseValue === void 0) {
             parseValue = true;
@@ -206,6 +204,9 @@
     var getName = function getName(node) {
         return toCaseLower(node && node.nodeName || "") || null;
     };
+    var getNext = function getNext(node, anyNode) {
+        return node['next' + (anyNode ? "" : 'Element') + 'Sibling'] || null;
+    };
     var getParent = function getParent(node, query) {
         if (query) {
             return node.closest(query) || null;
@@ -216,7 +217,7 @@
         if (parseValue === void 0) {
             parseValue = true;
         }
-        var value = W.getComputedStyle(node).getPropertyValue(style);
+        var value = W$1.getComputedStyle(node).getPropertyValue(style);
         if (parseValue) {
             value = toValue(value);
         }
@@ -246,9 +247,6 @@
     var hasState = function hasState(node, state) {
         return state in node;
     };
-    var isWindow = function isWindow(node) {
-        return node === W;
-    };
     var letAttribute = function letAttribute(node, attribute) {
         return node.removeAttribute(attribute), node;
     };
@@ -312,7 +310,7 @@
         return setAttribute(node, 'data-' + datum, value);
     };
     var setElement = function setElement(node, content, attributes) {
-        node = isString(node) ? D.createElement(node) : node;
+        node = isString(node) ? D$1.createElement(node) : node;
         if (isObject(content)) {
             attributes = content;
             content = false;
@@ -335,6 +333,9 @@
         var state = 'innerHTML';
         return hasState(node, state) && (node[state] = trim ? content.trim() : content), node;
     };
+    var setNext = function setNext(current, node) {
+        return getParent(current).insertBefore(node, getNext(current, true)), node;
+    };
     var setStyle = function setStyle(node, style, value) {
         if (isNumber(value)) {
             value += 'px';
@@ -386,6 +387,13 @@
             }, time);
         };
     };
+    var D = document;
+    var W = window;
+    var B = D.body;
+    var R = D.documentElement;
+    var isWindow = function isWindow(node) {
+        return node === W;
+    };
     var getOffset = function getOffset(node) {
         return [node.offsetLeft, node.offsetTop];
     };
@@ -509,9 +517,9 @@
     const ZERO_WIDTH_SPACE = '\u200c';
 
     function selectElementContents(node) {
-        let range = D.createRange();
+        let range = D$1.createRange();
         range.selectNodeContents(node);
-        let selection = W.getSelection();
+        let selection = W$1.getSelection();
         selection.removeAllRanges();
         selection.addRange(range);
     }
@@ -635,7 +643,7 @@
             selectBoxMultiple = selectBox.multiple,
             selectBoxOptionIndex = 0,
             selectBoxOptions = selectBox.options,
-            selectBoxParent = state.parent || D,
+            selectBoxParent = state.parent || D$1,
             selectBoxSize = selectBox.size,
             selectBoxTitle = selectBox.title,
             selectBoxValue = getValue(),
@@ -670,7 +678,7 @@
             setChildLast(selectBoxFakeInput, selectBoxFakeInputPlaceholder);
         }
         setChildLast(selectBoxFake, selectBoxFakeInput || selectBoxFakeLabel);
-        getParent(selectBox).insertBefore(selectBoxFake, selectBox.nextSibling);
+        setNext(selectBox, selectBoxFake);
 
         function doBlur() {
             letClass(selectBoxFake, classNameM + 'focus');
@@ -880,10 +888,12 @@
         }
 
         function onSelectBoxFakeInputValueFocus() {
-            let value = getText(this),
+            let t = this,
+                value = getText(t),
                 selectBoxOption,
                 selectBoxFakeOption;
             selectBoxOptionIndex = -1; // `<input>` does not have `selectedIndex` property!
+            selectElementContents(t);
             for (let i = 0, j = toCount(selectBoxOptions); i < j; ++i) {
                 selectBoxOption = selectBoxOptions[i];
                 selectBoxFakeOption = selectBoxFakeOptions[i];
@@ -1030,7 +1040,7 @@
         function setSelectBoxFakeOptionsPosition(selectBoxFake, useEvent) {
             if (!selectBoxSize) {
                 let [left, top, width, height] = getRect(selectBoxFake),
-                    heightWindow = getSize(W)[1],
+                    heightWindow = getSize(W$1)[1],
                     heightMax = heightWindow - top - height;
                 setStyles(selectBoxFakeDropDown, {
                     'bottom': "",
@@ -1071,7 +1081,7 @@
             }
             fire('fit', getLot());
         }
-        onEvents(['resize', 'scroll'], W, onSelectBoxWindow);
+        onEvents(['resize', 'scroll'], W$1, onSelectBoxWindow);
         onEvent('click', selectBoxParent, onSelectBoxParentClick);
         onEvent('focus', selectBox, onSelectBoxFocus);
         onEvent('click', selectBoxFake, onSelectBoxFakeClick);
@@ -1114,7 +1124,7 @@
                 return $; // Already ejected
             }
             delete source[name];
-            offEvents(['resize', 'scroll'], W, onSelectBoxWindow);
+            offEvents(['resize', 'scroll'], W$1, onSelectBoxWindow);
             offEvent('click', selectBoxParent, onSelectBoxParentClick);
             offEvent('focus', selectBox, onSelectBoxFocus);
             letClass(selectBox, classNameE + 'source');
@@ -1154,6 +1164,6 @@
         'parent': null,
         'size': 5
     };
-    OP.version = '1.3.2';
+    OP.version = '1.3.3';
     return OP;
 });
diff --git a/index.min.css b/index.min.css