diff --git a/LICENSE.txt b/LICENSE similarity index 96% rename from LICENSE.txt rename to LICENSE index 8b39b8f..d62450d 100644 --- a/LICENSE.txt +++ b/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 index 5c4cb01..b787a5d 100644 --- 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 index 7364214..03872f1 100644 --- a/overflow-color.min.js +++ b/overflow-color.min.js @@ -1 +1 @@ -var ocTopColor,ocBottomColor;var ocStyleTag;var currentColor;var bodyBackground;var bodyWrap;function setBgColor(o){currentColor=o;if(ocStyleTag){ocStyleTag.parentNode.removeChild(ocStyleTag)}var e="html { background: "+o+"; }",t=document.head||document.getElementsByTagName("head")[0];ocStyleTag=document.createElement("style");if(ocStyleTag.styleSheet){ocStyleTag.styleSheet.cssText=e}else{ocStyleTag.appendChild(document.createTextNode(e))}t.appendChild(ocStyleTag)}function handleScroll(){if(document.body.scrollHeight===window.innerHeight){setBgColor(ocBottomColor)}else{var o=Math.max(document.body.scrollTop,document.documentElement.scrollTop);var e=document.body.scrollHeight-(o+window.innerHeight);if(oe&¤tColor!==ocBottomColor){setBgColor(ocBottomColor)}}}function initOverflowColor(){var o=document.querySelector("[data-oc-top]"),e=document.querySelector("[data-oc-bottom]");if(o){ocTopColor=o.getAttribute("data-oc-top")}if(e){ocBottomColor=e.getAttribute("data-oc-bottom")}if(ocTopColor||ocBottomColor){var t=window.getComputedStyle(document.body,null);bodyBackground=t.getPropertyValue("background");if(bodyBackground===""||t.getPropertyValue("background-color")==="rgba(0, 0, 0, 0)"&&bodyBackground.substring(21,17)==="none"){bodyBackground="white"}document.body.style.background="transparent";bodyWrap=document.createElement("div");bodyWrap.setAttribute("data-oc-wrap","");bodyWrap.style.background=bodyBackground;for(var r=0,l=document.body.childNodes.length;rwindow.innerHeight){setBgColor(ocTopColor)}else{setBgColor(ocBottomColor)}if(typeof window.addEventListener!=="undefined"){window.addEventListener("scroll",handleScroll,false);window.addEventListener("resize",handleScroll,false)}else{window.attachEvent("scroll",handleScroll);window.attachEvent("resize",handleScroll)}}}if(document.readyState==="complete"||document.readyState==="loaded"){initOverflowColor()}else{if(typeof document.addEventListener!=="undefined"){document.addEventListener("DOMContentLoaded",initOverflowColor,false)}else{document.attachEvent("onreadystatechange",initOverflowColor)}} \ No newline at end of file +var ocTopColor,ocBottomColor;var ocStyleTag;var currentColor;var bodyBackground;var bodyWrap;function setBgColor(o){currentColor=o;if(ocStyleTag){ocStyleTag.parentNode.removeChild(ocStyleTag)}var e="html { background: "+o+"; }",t=document.head||document.getElementsByTagName("head")[0];ocStyleTag=document.createElement("style");if(ocStyleTag.styleSheet){ocStyleTag.styleSheet.cssText=e}else{ocStyleTag.appendChild(document.createTextNode(e))}t.appendChild(ocStyleTag)}function handleScroll(){if(document.body.scrollHeight===window.innerHeight){setBgColor(ocBottomColor)}else{var o=Math.max(document.body.scrollTop,document.documentElement.scrollTop);var e=document.body.scrollHeight-(o+window.innerHeight);if(oe&¤tColor!==ocBottomColor){setBgColor(ocBottomColor)}}}function initOverflowColor(){var o=document.querySelector("[data-oc-top]"),e=document.querySelector("[data-oc-bottom]"),t=document.querySelector("[data-oc]");if(t){var r=t.getAttribute("data-oc").split(",");if(r.length>1){ocTopColor=r[0];ocBottomColor=r[1]}else if(r.length===1){ocTopColor=ocBottomColor=r[0]}}else{if(o){ocTopColor=o.getAttribute("data-oc-top")}if(e){ocBottomColor=e.getAttribute("data-oc-bottom")}}if(ocTopColor||ocBottomColor){var l=window.getComputedStyle(document.body,null);bodyBackground=l.getPropertyValue("background");if(bodyBackground===""||l.getPropertyValue("background-color")==="rgba(0, 0, 0, 0)"&&bodyBackground.substring(21,17)==="none"){bodyBackground="white"}document.body.style.background="transparent";bodyWrap=document.createElement("div");bodyWrap.setAttribute("data-oc-wrap","");bodyWrap.style.background=bodyBackground;for(var d=0,c=document.body.childNodes.length;dwindow.innerHeight){setBgColor(ocTopColor)}else{setBgColor(ocBottomColor)}if(typeof window.addEventListener!=="undefined"){window.addEventListener("scroll",handleScroll,false);window.addEventListener("resize",handleScroll,false)}else{window.attachEvent("scroll",handleScroll);window.attachEvent("resize",handleScroll)}}}if(document.readyState==="complete"||document.readyState==="loaded"){initOverflowColor()}else{if(typeof document.addEventListener!=="undefined"){document.addEventListener("DOMContentLoaded",initOverflowColor,false)}else{document.attachEvent("onreadystatechange",initOverflowColor)}} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1417a3b..cf344fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "overflow-color", - "version": "2.0.0", + "version": "2.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index c4ed618..213ef4e 100644 --- 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 index 779123a..8aaa66b 100644 --- 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 @@ -22,6 +22,22 @@ You simply must add the script and two attributes to your body tag ``` +You can use the shortcut `data-oc` by separating the two values with a comma + +```html + +``` + +#### 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)