attribute shortcut data-oc

dimitrinicolas · Mar 10, 2018 · e8db29b · e8db29b
1 parent 32c5003
commit e8db29b
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 17 deletions.
diff --git a/LICENSE.txt → LICENSE b/LICENSE.txt → LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Maxime Thirouin
+Copyright (c) 2017 Dimitri Nicolas
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

diff --git a/overflow-color.js b/overflow-color.js
@@ -57,13 +57,26 @@ function handleScroll() {
 function initOverflowColor() {
 
     var topEl = document.querySelector('[data-oc-top]'),
-        bottomEl = document.querySelector('[data-oc-bottom]');
-
-    if (topEl) {
-        ocTopColor = topEl.getAttribute('data-oc-top');
+        bottomEl = document.querySelector('[data-oc-bottom]'),
+        shortcutEl = document.querySelector('[data-oc]');
+
+    if (shortcutEl) {
+        var split = shortcutEl.getAttribute('data-oc').split(',');
+        if (split.length > 1) {
+            ocTopColor = split[0];
+            ocBottomColor = split[1];
+        }
+        else if (split.length === 1) {
+            ocTopColor = ocBottomColor = split[0];
+        }
     }
-    if (bottomEl) {
-        ocBottomColor = bottomEl.getAttribute('data-oc-bottom');
+    else {
+        if (topEl) {
+            ocTopColor = topEl.getAttribute('data-oc-top');
+        }
+        if (bottomEl) {
+            ocBottomColor = bottomEl.getAttribute('data-oc-bottom');
+        }
     }
 
     if (ocTopColor || ocBottomColor) {
@@ -109,7 +122,7 @@ function initOverflowColor() {
 
 }
 
-if (document.readyState === "complete" || document.readyState === "loaded") {
+if (document.readyState === 'complete' || document.readyState === 'loaded') {
     initOverflowColor();
 }
 else {

diff --git a/overflow-color.min.js b/overflow-color.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "overflow-color",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Automatically switch css html background color",
   "main": "overflow-color.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "uglifyjs overflow-color.js -o overflow-color.min.js -m"
   },
   "repository": {
     "type": "git",
@@ -24,8 +24,5 @@
   "homepage": "https://github.com/dimitrinicolas/overflow-color#readme",
   "devDependencies": {
     "uglify-js": "^3.3.9"
-  },
-  "scripts": {
-    "build": "uglifyjs overflow-color.js -o overflow-color.min.js -m"
   }
 }
diff --git a/readme.md b/readme.md
@@ -13,7 +13,7 @@ $ npm i overflow-color
 
 ## Usage
 
-You simply must add the script and two attributes to your body tag
+You simply must add the script and the two attributes `data-oc-top` and `data-oc-bottom` to your body tag
 
 ```html
 <body data-oc-top="red" data-oc-bottom="blue">
@@ -22,6 +22,22 @@ You simply must add the script and two attributes to your body tag
 </body>
 ```
 
+You can use the shortcut `data-oc` by separating the two values with a comma
+
+```html
+<body data-oc="red,blue">
+```
+
+#### With a module bundler
+
+You can import this package with a simple require or import
+
+```javascript
+require('overflow-color');
+// with ES6+
+import overflowColor from 'overflow-color';
+```
+
 ## CSS tricks
 #### Behind the Scenes
 
@@ -58,4 +74,4 @@ Minify script
 $ npm run build
 ```
 
-## [License](LICENSE.txt)
+## [License](LICENSE)