defer-css - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

index.js

@@ -6,10 +6,11 @@ // @ts-check
 /**
- * @param {*[]} links
- * @param {string|object} [mountOn]
+ * @param {*[]|string} links
+ * @param {string|object} [mountOnId]
  */
-const deferCss = function (links, mountOn) {
+const deferCss = function (links, mountOnId) {
     // Setup Config default Values.
-    if (mountOn === undefined) mountOn = 'defer-css';
+    if (mountOnId === undefined) mountOnId = 'defer-css';
+    if(typeof links === 'string') links = [links];
 
-    deferCssData[mountOn] = {
+    deferCssData[mountOnId] = {
         total: links.length,
@@ -26,3 +27,2 @@ loaded: 0
 
-        let linkDataKeys = Object.keys(linkData);
         let newLink = document.createElement('link');
@@ -32,2 +32,22 @@
 
+        // Functions
+        // Setup Onload Function
+        if (typeof linkData['onload'] === "function") {
+            // Load User defined function after incrementing loaded
+
+            newLink.onload = function () {
+                deferCssData[mountOnId].loaded++;
+                linkData.onload(linkData);
+            };
+        } else {
+            // Increment loaded after each load
+            newLink.onload = function () {
+                deferCssData[mountOnId].loaded++;
+            }
+        }
+
+        const ignoreKeys = ['onload'];
+
+        // Other Properties
+        let linkDataKeys = Object.keys(linkData);
         for (let j = 0; j < linkDataKeys.length; j++) {
@@ -40,3 +60,5 @@ let scriptKey = linkDataKeys[j];
             } else {
-                newLink[scriptKey] = linkData[scriptKey];
+                if (!ignoreKeys.includes(scriptKey)) {
+                    newLink[scriptKey] = linkData[scriptKey];
+                }
             }
@@ -46,22 +68,8 @@
 
-        // Setup Onload Function
-        if (typeof linkData['onload'] === "function") {
-            // Load User defined function after incrementing loaded
-            newLink.onload = function () {
-                deferCssData[mountOn].loaded++;
-                linkData.onload(linkData)
-            }
-        } else {
-            // Increment loaded after each load
-            newLink.onload = function () {
-                deferCssData[mountOn].loaded++;
-            }
-        }
+        // Check if mountOnId Element Exists
+        let firstLink = document.getElementById(mountOnId);
 
-        // Check if mountOn Element Exists
-        let firstLink = document.getElementById(mountOn);
-
         if (firstLink === null) {
             // Log Error if not exists.
-            return console.error('DEFER-CSS: no link element with id: <' + mountOn + '> found in DOM');
+            return console.error('DEFER-CSS: no link element with id: <' + mountOnId + '> found in DOM');
         }
@@ -72,8 +80,42 @@ // @ts-ignore
 
-    const mountOnElement = document.getElementById(mountOn);
-    if (mountOnElement !== null) mountOnElement.remove();
+    const mountOnIdElement = document.getElementById(mountOnId);
+    if (mountOnIdElement !== null) mountOnIdElement.remove();
 };
 
+/**
+ *  Check if style sheet exists in dom.
+ * @param {string} search - string to search
+ * @param {boolean|string} [$return] - What to return (Default: Boolean)
+ */
+const hasStyleSheet = function (search, $return) {
+    if ($return === undefined) $return = false;
+
+    const allStyles = document.styleSheets;
+    for (let i = 0; i < allStyles.length; i++) {
+        let styleSheet = allStyles[i];
+        if (styleSheet.href !== null) {
+            let hasStyle = styleSheet.href.includes(search);
+
+            // if has style and $return is string
+            if (hasStyle && typeof $return === 'string') {
+                // if $return is all we return the CSSStyleSheet Object
+                if ($return === 'all') {
+                    return styleSheet;
+                } else {
+                    // else we assume $return is a key and return that key if exists.
+                    if (typeof styleSheet[$return] !== "undefined")
+                        return styleSheet[$return];
+                }
+            } else {
+                // else we return the results.
+                return hasStyle;
+            }
+        }
+    }
+
+    return false;
+};
+
 window['deferCss'] = deferCss;
 window['deferCssData'] = deferCssData;
-
+window['hasStyleSheet'] = hasStyleSheet;

index.min.js

@@ -1,1 +0,1 @@
-let deferCssData={};const deferCss=function(b,a){if(a===undefined){a="defer-css"}deferCssData[a]={total:b.length,loaded:0};for(let i=0;i<b.length;i++){let linkData=b[i];if(typeof linkData==="string"){linkData={href:linkData}}let linkDataKeys=Object.keys(linkData);let newLink=document.createElement("link");newLink.rel="stylesheet";for(let j=0;j<linkDataKeys.length;j++){let scriptKey=linkDataKeys[j];if(scriptKey==="crossorigin"){newLink.crossOrigin=linkData[scriptKey]}else{newLink[scriptKey]=linkData[scriptKey]}}if(typeof linkData.onload==="function"){newLink.onload=function(){deferCssData[a].loaded++;linkData.onload(linkData)}}else{newLink.onload=function(){deferCssData[a].loaded++}}let firstLink=document.getElementById(a);if(firstLink===null){return console.error("DEFER-CSS: no link element with id: <"+a+"> found in DOM")}firstLink.parentNode.insertBefore(newLink,firstLink)}const c=document.getElementById(a);if(c!==null){c.remove()}};window.deferCss=deferCss;window.deferCssData=deferCssData;
+let deferCssData={};const deferCss=function(a,c){if(c===undefined){c="defer-css"}if(typeof a==="string"){a=[a]}deferCssData[c]={total:a.length,loaded:0};for(let i=0;i<a.length;i++){let linkData=a[i];if(typeof linkData==="string"){linkData={href:linkData}}let newLink=document.createElement("link");newLink.rel="stylesheet";if(typeof linkData.onload==="function"){newLink.onload=function(){deferCssData[c].loaded++;linkData.onload(linkData)}}else{newLink.onload=function(){deferCssData[c].loaded++}}const b=["onload"];let linkDataKeys=Object.keys(linkData);for(let j=0;j<linkDataKeys.length;j++){let scriptKey=linkDataKeys[j];if(scriptKey==="crossorigin"){newLink.crossOrigin=linkData[scriptKey]}else{if(!b.includes(scriptKey)){newLink[scriptKey]=linkData[scriptKey]}}}let firstLink=document.getElementById(c);if(firstLink===null){return console.error("DEFER-CSS: no link element with id: <"+c+"> found in DOM")}firstLink.parentNode.insertBefore(newLink,firstLink)}const d=document.getElementById(c);if(d!==null){d.remove()}};const hasStyleSheet=function(b,c){if(c===undefined){c=false}const a=document.styleSheets;for(let i=0;i<a.length;i++){let styleSheet=a[i];if(styleSheet.href!==null){let hasStyle=styleSheet.href.includes(b);if(hasStyle&&typeof c==="string"){if(c==="all"){return styleSheet}else{if(typeof styleSheet[c]!=="undefined"){return styleSheet[c]}}}else{return hasStyle}}}return false};window.deferCss=deferCss;window.deferCssData=deferCssData;window.hasStyleSheet=hasStyleSheet;

package.json

 {
   "name": "defer-css",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "ExtraSlim Javascript to Load css in your page without affecting load speed.",
@@ -5,0 +5,0 @@ "main": "index.min.js",

readme.md

 ### Defer Css
 
-A simple LightWeight function to defer css in your web applications or websites.
+Simple LightWeight functions to defer css in your web applications or websites.
 
+Two **functions** and one **object** is set to global `window`
+
+| Function | Arguments | Usage |
+| --------  |---------  | -----|
+| deferCss | `(scripts=[], mountOnId='defer-css')` | For loading a style or array of styles 
+| hasStyleSheet | `(search='', return=false)` | A bonus helper function for checking if the browser has loaded a particular stylesheet using `document.styleSheets`
+| | | if `$return` is "all" the `CSSStyleSheet` Object is returned, else if any string we assume its a key in the `CSSStyleSheet` object you are trying to get.
+
 #### Direct Browser Installation
@@ -6,0 +14,0 @@ ```html

No alert changes

Improved metrics

Total package byte prevSize

11740

increased by26.95%

Lines of code

95

increased by61.02%

Number of lines in readme file

189

increased by4.42%

No dependency changes