✨ Detect data attributes

BetaHuhn · BetaHuhn · commit ef0ffc3ae2fa · 2021-04-07T13:50:54.000+02:00
diff --git a/dist/drkmd-js.min.js b/dist/drkmd-js.min.js
diff --git a/example/index.html b/example/index.html
@@ -31,12 +31,19 @@ <h1>Darkmode example</h1>
     <p>This is an example</p>
 </body>
 
-<script src="../dist/drkmd-js.min.js"></script>
+<!-- Basic usage -->
+<script src="../dist/drkmd-js.min.js" data-drkmd></script>
+
+<!-- Specify options -->
+<!--<script src="../dist/drkmd-js.min.js" data-drkmd='{ "defaultTheme": "dark", "cookie": true }'></script>-->
+
+<!-- Programmatic usage -->
+<!-- <script src="../dist/drkmd-js.min.js"></script>
 <script>
     function addDarkmode() {
         new Darkmode().attach();
     }
     window.addEventListener('load', addDarkmode);
-</script>
+</script> -->
 
 </html>
diff --git a/src/drkmd.js b/src/drkmd.js
@@ -12,6 +12,7 @@ export default class Darkmode {
 			bottom: '20px',
 			right: '20px',
 			left: 'unset',
+			attachButton: true,
 			buttonLight: '#fff',
 			buttonDark: '#000',
 			events: true,
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,25 @@
 import Darkmode, { IS_BROWSER } from './drkmd'
 export default Darkmode
 
+const detect = () => {
+	const elem = document.querySelector('[data-drkmd]')
+
+	if (!elem) {
+		window.darkmode = Darkmode
+
+		return
+	}
+
+	const attribute = elem.getAttribute('data-drkmd') || '{}'
+	const options = JSON.parse(attribute)
+
+	window.darkmode = new Darkmode(options)
+
+	if (window.darkmode.options.attachButton) {
+		window.darkmode.attach()
+	}
+}
+
 if (IS_BROWSER) {
-	(function(window) {
-		window.Darkmode = Darkmode
-	}(window))
+	detect()
 }
