@easepick/kbd-plugin
Advanced tools
Comparing version 1.0.0-beta.1 to 1.0.0-beta.2
@@ -0,1 +1,10 @@ | ||
/** | ||
* @license | ||
* Package: @easepick/kbd-plugin | ||
* Version: 1.0.0-beta.2 | ||
* https://easepick.com/ | ||
* Copyright 2022 Rinat G. | ||
* | ||
* Licensed under the terms of GNU General Public License Version 2 or later. (http://www.gnu.org/licenses/gpl.html) | ||
*/ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@easepick/base-plugin")):"function"==typeof define&&define.amd?define(["exports","@easepick/base-plugin"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).easepick=e.easepick||{},e.easepick)}(this,(function(e,t){"use strict";class n extends t.BasePlugin{docElement=null;rangePlugin;binds={onView:this.onView.bind(this),onKeydown:this.onKeydown.bind(this)};options={unitIndex:1,dayIndex:2};getName(){return"KbdPlugin"}onAttach(){if(this.docElement=document.createElement("span"),this.docElement.style.position="absolute",this.docElement.style.top="0px",this.docElement.style.right="0px",this.docElement.attachShadow({mode:"open"}),this.options.html)this.docElement.shadowRoot.innerHTML=this.options.html;else{const e=`\n <style>\n button {\n border: none;\n background: transparent;\n font-size: ${window.getComputedStyle(this.picker.options.element).fontSize};\n }\n </style>\n\n <button>📅</button>\n `;this.docElement.shadowRoot.innerHTML=e}const e=this.docElement.shadowRoot.querySelector("button");e&&(e.addEventListener("click",(e=>{e.preventDefault(),this.picker.show({target:this.picker.options.element})}),{capture:!0}),e.addEventListener("keydown",(e=>{"Escape"===e.code&&this.picker.hide()}),{capture:!0})),this.picker.options.element.after(this.docElement),this.picker.on("view",this.binds.onView),this.picker.on("keydown",this.binds.onKeydown)}onDetach(){this.docElement&&this.docElement.isConnected&&this.docElement.remove(),this.picker.off("view",this.binds.onView),this.picker.off("keydown",this.binds.onKeydown)}onView(e){const{view:t,target:n}=e.detail;if(n&&"querySelector"in n)if("CalendarDay"!==t||["locked","not-available"].some((e=>n.classList.contains(e)))){[...n.querySelectorAll(".unit:not(.day)")].forEach((e=>e.tabIndex=this.options.unitIndex))}else n.tabIndex=this.options.dayIndex}onKeydown(e){switch(this.onMouseEnter(e),e.code){case"ArrowUp":case"ArrowDown":this.verticalMove(e);break;case"ArrowLeft":case"ArrowRight":this.horizontalMove(e);break;case"Enter":case"Space":this.handleEnter(e);break;case"Escape":this.picker.hide()}}findAllowableDaySibling(e,t,n){const i=Array.from(e.querySelectorAll(`.day[tabindex="${this.options.dayIndex}"]`)),o=i.indexOf(t);return i.filter(((e,t)=>n(t,o)&&e.tabIndex===this.options.dayIndex))[0]}changeMonth(e){const t={ArrowLeft:"previous",ArrowRight:"next"},n=this.picker.ui.container.querySelector(`.${t[e.code]}-button[tabindex="${this.options.unitIndex}"]`);n&&!n.parentElement.classList.contains(`no-${t[e.code]}-month`)&&(n.dispatchEvent(new Event("click",{bubbles:!0})),setTimeout((()=>{let t=null;switch(e.code){case"ArrowLeft":const e=this.picker.ui.container.querySelectorAll(`.day[tabindex="${this.options.dayIndex}"]`);t=e[e.length-1];break;case"ArrowRight":t=this.picker.ui.container.querySelector(`.day[tabindex="${this.options.dayIndex}"]`)}t&&t.focus()})))}verticalMove(e){const t=e.target;if(t.classList.contains("day")){e.preventDefault();const n=this.findAllowableDaySibling(this.picker.ui.container,t,((t,n)=>t===(n="ArrowUp"===e.code?n-7:n+7)));n&&n.focus()}}horizontalMove(e){const t=e.target;if(t.classList.contains("day")){e.preventDefault();const n=this.findAllowableDaySibling(this.picker.ui.container,t,((t,n)=>t===(n="ArrowLeft"===e.code?n-1:n+1)));n?n.focus():this.changeMonth(e)}}handleEnter(e){const t=e.target;t.classList.contains("day")&&(e.preventDefault(),t.dispatchEvent(new Event("click",{bubbles:!0})),setTimeout((()=>{if(this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin"),this.rangePlugin||!this.picker.options.autoApply){const e=this.picker.ui.container.querySelector(".day.selected");e&&setTimeout((()=>{e.focus()}))}})))}onMouseEnter(e){e.target.classList.contains("day")&&setTimeout((()=>{const e=this.picker.ui.shadowRoot.activeElement;e&&e.dispatchEvent(new Event("mouseenter",{bubbles:!0}))}))}}e.KbdPlugin=n,Object.defineProperty(e,"__esModule",{value:!0})})); |
{ | ||
"name": "@easepick/kbd-plugin", | ||
"description": "Plugin for easepick.", | ||
"version": "1.0.0-beta.1", | ||
"version": "1.0.0-beta.2", | ||
"main": "dist/index.umd.js", | ||
@@ -6,0 +6,0 @@ "module": "dist/index.esm.js", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
10752
132