UNPKG

hotkeys-js

Version:

A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.

12 lines (11 loc) 4.02 kB
var e=Object.defineProperty,t=(t,o,s)=>((t,o,s)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[o]=s)(t,"symbol"!=typeof o?o+"":o,s) /** * @package @wcj/dark-mode * Web Component that toggles dark mode 🌒 * Github: https://github.com/jaywcjlove/dark-mode.git * Website: https://jaywcjlove.github.io/dark-mode * * Licensed under the MIT license. * @license Copyright © 2022. Licensed under the MIT License * @author kenny wong <wowohoo@qq.com> */;const o=document,s="_dark_mode_theme_",i="permanent",n="colorschemechange",h="light",r="dark",a=(e,t,o=t)=>{Object.defineProperty(e,o,{enumerable:!0,get(){const e=this.getAttribute(t);return null===e?"":e},set(e){this.setAttribute(t,e)}})},m=(e,t,o=t)=>{Object.defineProperty(e,o,{enumerable:!0,get(){return this.hasAttribute(t)},set(e){e?this.setAttribute(t,""):this.removeAttribute(t)}})};class l extends HTMLElement{constructor(){super(),t(this,"LOCAL_NANE",s),this.t()}static get observedAttributes(){return["mode",h,r,i]}connectedCallback(){a(this,"mode"),a(this,r),a(this,h),m(this,i);const e=localStorage.getItem(s);e&&[h,r].includes(e)&&(this.mode=e,this.permanent=!0),this.permanent&&!e&&localStorage.setItem(s,this.mode);const t=[h,r].includes(e);this.permanent&&e?this.o():(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(this.mode=r,this.o()),window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches&&(this.mode=h,this.o())),this.permanent||t||(window.matchMedia("(prefers-color-scheme: light)").onchange=e=>{this.mode=e.matches?h:r,this.o()},window.matchMedia("(prefers-color-scheme: dark)").onchange=e=>{this.mode=e.matches?r:h,this.o()});new MutationObserver(((e,i)=>{this.mode=o.documentElement.dataset.colorMode,this.permanent&&t&&(localStorage.setItem(s,this.mode),this.i("permanentcolorscheme",{permanent:this.permanent})),this.h(),this.i(n,{colorScheme:this.mode})})).observe(o.documentElement,{attributes:!0}),this.i(n,{colorScheme:this.mode}),this.h()}attributeChangedCallback(e,t,o){if("mode"===e&&t!==o&&[h,r].includes(o)){const e=localStorage.getItem(s);this.mode===e?(this.mode=o,this.h(),this.o()):this.mode&&this.mode!==e&&(this.h(),this.o())}else e!==h&&e!==r||t===o||this.h();"permanent"===e&&"boolean"==typeof this.permanent&&(this.permanent?localStorage.setItem(s,this.mode):localStorage.removeItem(s))}o(){o.documentElement.setAttribute("data-color-mode",this.mode)}h(){this.icon.textContent=this.mode===h?"🌒":"🌞",this.text.textContent=this.mode===h?this.getAttribute(r):this.getAttribute(h),!this.text.textContent&&this.text.parentElement&&this.text&&this.text.parentElement.removeChild(this.text)}t(){var e=this.attachShadow({mode:"open"});this.label=o.createElement("span"),this.label.setAttribute("class","wrapper"),this.label.onclick=()=>{this.mode=this.mode===h?r:h,this.permanent&&localStorage.setItem(s,this.mode),this.o(),this.h()},e.appendChild(this.label),this.icon=o.createElement("span"),this.icon.part="icon",this.label.appendChild(this.icon),this.text=o.createElement("span"),this.text.part="text",this.label.appendChild(this.text);const t="_dark_mode_style_";if(!o.getElementById(t)){var i=o.createElement("style");i.id=t,i.textContent="\n[data-color-mode*='dark'], [data-color-mode*='dark'] body {\n color-scheme: dark;\n --color-theme-bg: #0d1117;\n --color-theme-text: #c9d1d9;\n background-color: var(--color-theme-bg);\n color: var(--color-theme-text);\n}\n\n[data-color-mode*='light'], [data-color-mode*='light'] body {\n color-scheme: light;\n --color-theme-bg: #fff;\n --color-theme-text: #24292f;\n background-color: var(--color-theme-bg);\n color: var(--color-theme-text);\n}",o.head.appendChild(i)}var n=o.createElement("style");n.textContent="\n .wrapper { cursor: pointer; user-select: none; position: relative; }\n .wrapper > span + span { margin-left: .4rem; }\n ",e.appendChild(n)}i(e,t){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:t}))}}customElements.define("dark-mode",l);