drkmd-js - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

CHANGELOG.md

@@ -7,2 +7,6 @@ # Changelog
 
+## [v0.2.6] - 2020-10-03
+### Changed
+- **BREAKING**: emit `theme-change` event instead of `theme` event
+
 ## [v0.2.5] - 2020-09-20
@@ -9,0 +13,0 @@ ### Added

dist/drkmd-js.min.js

@@ -1,1 +0,1 @@
-!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).drkmdJs=t()}}((function(){return function t(e,o,n){function i(a,s){if(!o[a]){if(!e[a]){var d="function"==typeof require&&require;if(!s&&d)return d(a,!0);if(r)return r(a,!0);var c=new Error("Cannot find module '"+a+"'");throw c.code="MODULE_NOT_FOUND",c}var u=o[a]={exports:{}};e[a][0].call(u.exports,(function(t){return i(e[a][1][t]||t)}),u,u.exports,t,e,o,n)}return o[a].exports}for(var r="function"==typeof require&&require,a=0;a<n.length;a++)i(n[a]);return i}({1:[function(t,e,o){"use strict";function n(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}Object.defineProperty(o,"__esModule",{value:!0}),o.default=o.IS_BROWSER=void 0;var i="undefined"!=typeof window;o.IS_BROWSER=i;var r=function(){function t(e){var o=this;if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),i){e=Object.assign({},{top:"unset",bottom:"20px",right:"20px",left:"unset",buttonLight:"#fff",buttonDark:"#000",events:!0,cookie:!1,localStorage:!0,label:"🌓",autoMatchOsTheme:!0,defaultTheme:"light"},e),this.options=e,this.dark=!1,e.autoMatchOsTheme&&(window.matchMedia("(prefers-color-scheme: dark)").addListener((function(t){return t.matches&&o.switchThemePrefers()})),window.matchMedia("(prefers-color-scheme: light)").addListener((function(t){return t.matches&&o.switchThemePrefers()})));var n=e.localStorage&&null!==window.localStorage?window.localStorage.getItem("darkmode"):e.cookie?this.getCookie():null;null!==n?"true"===n||!0===n?this.toDark():this.toLight():e.autoMatchOsTheme?this.preferedTheme()?this.toDark():this.toLight():"light"===e.defaultTheme?this.toLight():this.toDark()}else console.warn("Detected environment without a `window` object")}var e,o,r;return e=t,(o=[{key:"attach",value:function(){var t=this,e="\n            .drkmd-toggle-button{\n                position: fixed;\n                z-index: 1000;\n                left: ".concat(this.options.left,";\n                right: ").concat(this.options.right,";\n                bottom: ").concat(this.options.bottom,";\n                top: ").concat(this.options.top,";\n                height: 3rem;\n                min-width: 3rem;\n                border-radius: 3rem;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background: ").concat(this.options.buttonDark,";\n                color: ").concat(this.options.buttonLight,";\n                cursor: pointer;\n            }\n\n            .drkmd-toggle-button span{\n                margin: 0;\n                padding: 0px 10px;\n            }\n\n            .theme-dark .drkmd-toggle-button{\n                background: ").concat(this.options.buttonLight,";\n                color: ").concat(this.options.buttonDark,"\n            }\n        "),o=document.createElement("div"),n=document.createElement("span");n.innerHTML=this.options.label,o.className="drkmd-toggle-button",o.setAttribute("title","Toggle dark mode"),o.setAttribute("aria-label","Toggle dark mode"),o.setAttribute("aria-checked","false"),o.setAttribute("role","checkbox"),o.appendChild(n),o.addEventListener("click",(function(){!0===t.dark?t.toLight():t.toDark()})),document.body.insertBefore(o,document.body.firstChild),this.addStyle(e)}},{key:"toLight",value:function(){this.options.events&&window.dispatchEvent(new CustomEvent("theme",{detail:{to:"light"}})),document.documentElement.setAttribute("data-theme","light"),this.options.localStorage&&null!==window.localStorage?window.localStorage.setItem("darkmode",!1):this.options.cookie&&this.setCookie(!1),document.body.classList.remove("theme-dark"),document.body.classList.add("theme-light"),this.dark=!1}},{key:"toDark",value:function(){this.options.events&&window.dispatchEvent(new CustomEvent("theme",{detail:{to:"dark"}})),document.documentElement.setAttribute("data-theme","dark"),this.options.localStorage&&null!==window.localStorage?window.localStorage.setItem("darkmode",!0):this.options.cookie&&this.setCookie(!0),document.body.classList.add("theme-dark"),document.body.classList.remove("theme-light"),this.dark=!0}},{key:"preferedTheme",value:function(){return window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches}},{key:"switchThemePrefers",value:function(){!0===this.preferedTheme()?this.swichToDark():this.swichToLight()}},{key:"getCookie",value:function(){var t=document.cookie.match(RegExp("(?:^|;\\s*)darkmode=([^;]*)"));return t?t[1]:null}},{key:"setCookie",value:function(t){document.cookie="darkmode=".concat(t)}},{key:"toggle",value:function(){return this.dark?this.toLight():this.toDark(),this.dark}},{key:"isActivated",value:function(){return this.dark}},{key:"addStyle",value:function(t){var e=document.createElement("link");e.setAttribute("rel","stylesheet"),e.setAttribute("type","text/css"),e.setAttribute("href","data:text/css;charset=UTF-8,"+encodeURIComponent(t)),document.head.appendChild(e)}}])&&n(e.prototype,o),r&&n(e,r),t}();o.default=r},{}],2:[function(t,e,o){"use strict";function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}Object.defineProperty(o,"__esModule",{value:!0}),o.default=void 0;var i=function(t){if(t&&t.__esModule)return t;if(null===t||"object"!==n(t)&&"function"!=typeof t)return{default:t};var e=r();if(e&&e.has(t))return e.get(t);var o={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in t)if(Object.prototype.hasOwnProperty.call(t,a)){var s=i?Object.getOwnPropertyDescriptor(t,a):null;s&&(s.get||s.set)?Object.defineProperty(o,a,s):o[a]=t[a]}o.default=t,e&&e.set(t,o);return o}(t("./drkmd"));function r(){if("function"!=typeof WeakMap)return null;var t=new WeakMap;return r=function(){return t},t}var a=i.default;o.default=a,i.IS_BROWSER&&function(t){t.Darkmode=i.default}(window)},{"./drkmd":1}]},{},[2])(2)}));
+!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).drkmdJs=t()}}((function(){return function t(e,o,n){function i(a,s){if(!o[a]){if(!e[a]){var c="function"==typeof require&&require;if(!s&&c)return c(a,!0);if(r)return r(a,!0);var d=new Error("Cannot find module '"+a+"'");throw d.code="MODULE_NOT_FOUND",d}var u=o[a]={exports:{}};e[a][0].call(u.exports,(function(t){return i(e[a][1][t]||t)}),u,u.exports,t,e,o,n)}return o[a].exports}for(var r="function"==typeof require&&require,a=0;a<n.length;a++)i(n[a]);return i}({1:[function(t,e,o){"use strict";function n(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}Object.defineProperty(o,"__esModule",{value:!0}),o.default=o.IS_BROWSER=void 0;var i="undefined"!=typeof window;o.IS_BROWSER=i;var r=function(){function t(e){var o=this;if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),i){e=Object.assign({},{top:"unset",bottom:"20px",right:"20px",left:"unset",buttonLight:"#fff",buttonDark:"#000",events:!0,cookie:!1,localStorage:!0,label:"🌓",autoMatchOsTheme:!0,defaultTheme:"light"},e),this.options=e,this.dark=!1,e.autoMatchOsTheme&&(window.matchMedia("(prefers-color-scheme: dark)").addListener((function(t){return t.matches&&o.switchThemePrefers()})),window.matchMedia("(prefers-color-scheme: light)").addListener((function(t){return t.matches&&o.switchThemePrefers()})));var n=e.localStorage&&null!==window.localStorage?window.localStorage.getItem("darkmode"):e.cookie?this.getCookie():null;null!==n?"true"===n||!0===n?this.toDark():this.toLight():e.autoMatchOsTheme?this.preferedTheme()?this.toDark():this.toLight():"light"===e.defaultTheme?this.toLight():this.toDark()}else console.warn("Detected environment without a `window` object")}var e,o,r;return e=t,(o=[{key:"attach",value:function(){var t=this,e="\n            .drkmd-toggle-button{\n                position: fixed;\n                z-index: 1000;\n                left: ".concat(this.options.left,";\n                right: ").concat(this.options.right,";\n                bottom: ").concat(this.options.bottom,";\n                top: ").concat(this.options.top,";\n                height: 3rem;\n                min-width: 3rem;\n                border-radius: 3rem;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background: ").concat(this.options.buttonDark,";\n                color: ").concat(this.options.buttonLight,";\n                cursor: pointer;\n            }\n\n            .drkmd-toggle-button span{\n                margin: 0;\n                padding: 0px 10px;\n            }\n\n            .theme-dark .drkmd-toggle-button{\n                background: ").concat(this.options.buttonLight,";\n                color: ").concat(this.options.buttonDark,"\n            }\n        "),o=document.createElement("div"),n=document.createElement("span");n.innerHTML=this.options.label,o.className="drkmd-toggle-button",o.setAttribute("title","Toggle dark mode"),o.setAttribute("aria-label","Toggle dark mode"),o.setAttribute("aria-checked","false"),o.setAttribute("role","checkbox"),o.appendChild(n),o.addEventListener("click",(function(){!0===t.dark?t.toLight():t.toDark()})),document.body.insertBefore(o,document.body.firstChild),this.addStyle(e)}},{key:"toLight",value:function(){this.options.events&&window.dispatchEvent(new CustomEvent("theme-change",{detail:{to:"light"}})),document.documentElement.setAttribute("data-theme","light"),this.options.localStorage&&null!==window.localStorage?window.localStorage.setItem("darkmode",!1):this.options.cookie&&this.setCookie(!1),document.body.classList.remove("theme-dark"),document.body.classList.add("theme-light"),this.dark=!1}},{key:"toDark",value:function(){this.options.events&&window.dispatchEvent(new CustomEvent("theme-change",{detail:{to:"dark"}})),document.documentElement.setAttribute("data-theme","dark"),this.options.localStorage&&null!==window.localStorage?window.localStorage.setItem("darkmode",!0):this.options.cookie&&this.setCookie(!0),document.body.classList.add("theme-dark"),document.body.classList.remove("theme-light"),this.dark=!0}},{key:"preferedTheme",value:function(){return window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches}},{key:"switchThemePrefers",value:function(){!0===this.preferedTheme()?this.swichToDark():this.swichToLight()}},{key:"getCookie",value:function(){var t=document.cookie.match(RegExp("(?:^|;\\s*)darkmode=([^;]*)"));return t?t[1]:null}},{key:"setCookie",value:function(t){document.cookie="darkmode=".concat(t)}},{key:"toggle",value:function(){return this.dark?this.toLight():this.toDark(),this.dark}},{key:"isActivated",value:function(){return this.dark}},{key:"addStyle",value:function(t){var e=document.createElement("link");e.setAttribute("rel","stylesheet"),e.setAttribute("type","text/css"),e.setAttribute("href","data:text/css;charset=UTF-8,"+encodeURIComponent(t)),document.head.appendChild(e)}}])&&n(e.prototype,o),r&&n(e,r),t}();o.default=r},{}],2:[function(t,e,o){"use strict";function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}Object.defineProperty(o,"__esModule",{value:!0}),o.default=void 0;var i=function(t){if(t&&t.__esModule)return t;if(null===t||"object"!==n(t)&&"function"!=typeof t)return{default:t};var e=r();if(e&&e.has(t))return e.get(t);var o={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in t)if(Object.prototype.hasOwnProperty.call(t,a)){var s=i?Object.getOwnPropertyDescriptor(t,a):null;s&&(s.get||s.set)?Object.defineProperty(o,a,s):o[a]=t[a]}o.default=t,e&&e.set(t,o);return o}(t("./drkmd"));function r(){if("function"!=typeof WeakMap)return null;var t=new WeakMap;return r=function(){return t},t}var a=i.default;o.default=a,i.IS_BROWSER&&function(t){t.Darkmode=i.default}(window)},{"./drkmd":1}]},{},[2])(2)}));

package.json

 {
   "name": "drkmd-js",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Simple dark-mode/light-mode toggle for any website",
@@ -5,0 +5,0 @@ "main": "dist/drkmd-js.min.js",

README.md

@@ -82,3 +82,3 @@ <div align="center">
 
-By default [drkmd.js](https://github.com/BetaHuhn/drkmd.js) emits a `theme` event if the theme changes:
+By default [drkmd.js](https://github.com/BetaHuhn/drkmd.js) emits a `theme-change` event if the theme changes:
 
@@ -90,3 +90,3 @@ ```js
 
-window.addEventListener('theme', e => {
+window.addEventListener('theme-change', e => {
     console.log(e.detail.to); // will return 'light' or 'dark'
@@ -93,0 +93,0 @@ });

src/drkmd.js

@@ -97,3 +97,3 @@ export const IS_BROWSER = typeof window !== 'undefined';
     toLight(){
-        if(this.options.events) window.dispatchEvent(new CustomEvent('theme', { detail: { to: 'light' } }));
+        if(this.options.events) window.dispatchEvent(new CustomEvent('theme-change', { detail: { to: 'light' } }));
         document.documentElement.setAttribute('data-theme', 'light');
@@ -107,3 +107,3 @@ this.options.localStorage && window.localStorage !== null ? window.localStorage.setItem('darkmode', false) : this.options.cookie ? this.setCookie(false) : ""
     toDark(){
-        if(this.options.events) window.dispatchEvent(new CustomEvent('theme', { detail: { to: 'dark' } }));
+        if(this.options.events) window.dispatchEvent(new CustomEvent('theme-change', { detail: { to: 'dark' } }));
         document.documentElement.setAttribute('data-theme', 'dark');
@@ -110,0 +110,0 @@ this.options.localStorage && window.localStorage !== null ? window.localStorage.setItem('darkmode', true) : this.options.cookie ? this.setCookie(true) : ""

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20097

increased by0.74%

No dependency changes