Methods is a class

CSP02 · CSP02 · commit 1d51e7d83694 · 2022-03-26T19:10:00.000+05:30
diff --git a/Methods.js b/Methods.js
diff --git a/README.md b/README.md
@@ -6,12 +6,17 @@
 # What is Methods?
  Have you ever get frustated of writing the same code in html to get what you want. Then here you are use this package? to make it easy by defining your method using a **"def"** tag and **"name"** attribute to name your method.
 
+# Version info:
+ - Methods class - Added because the import is not working when ``window.onload`` is used in the user script because Methods.js uses the same event.
+ - Organised the folder structure
+ - As Methods class is available user can access in their own script only when using ``window.onload`` event. If the event is not used in user script there is no need to access the class they can just link methods.js and can use import tags. For more info visit [docs](https://the-atelier.ml/Pages/Methods/methods.html)
 # Usage:
 **Using on same file (``<def>``):**
  - Methods package is very simple to use.
  - All you need to do is to define the method using **"def"** tag and **"name"** attribute.
  - And then to call the method you can use the value you provided in name attribute.
  - That's it.
+
 **Example**
 ```html
 <test></test>
diff --git a/examples/anotherHtml.html b/examples/anotherHtml.html
@@ -3,7 +3,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="Methods.js"></script>
+    <script src="/source/Methods.js"></script>
     <title>Document</title>
 </head>
 <body>
diff --git a/examples/ex.html b/examples/ex.html
@@ -4,7 +4,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <script src="../Methods.js"></script>
+    <script src="/source/Methods.js"></script>
 </head>
 <body>
     <def name="example">
diff --git a/examples/index.html b/examples/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <script src="Methods.js"></script>
+    <script src="/source/Methods.js"></script>
 </head>
 <body>
     <!--use the method name as the tag name i.e here test and commit are the method names-->
diff --git a/examples/yetAnotherHtml.html b/examples/yetAnotherHtml.html
diff --git a/source/Methods.js b/source/Methods.js
@@ -0,0 +1,58 @@
+window.onload = function () {
+    methods = new Methods()
+    methods.run()
+}
+
+class Methods {
+    run() {
+        let definition = document.getElementsByTagName('def')
+        let importStatements = document.getElementsByTagName('import')
+        let methodNames = []
+        let methodContent = []
+        let methodDefTags = []
+        let DOMparser = new DOMParser()
+
+        for (let k = 0; k < importStatements.length; k++) {
+            let importStatement = importStatements[k]
+            let importFrom = importStatement.getAttribute('from')
+            let importTag = importStatement.getAttribute('name')
+
+            fetch(importFrom)
+                .then(response => {
+                    response.text().then(data => {
+                        let defTags = (DOMparser.parseFromString(data, 'text/html').body.getElementsByTagName('def'))
+                        for (let d = 0; d < defTags.length; d++) {
+                            const def = defTags[d]
+                            const defAttr = def.getAttribute('name')
+
+                            if (importTag == defAttr) {
+                                importStatement.innerHTML = def.innerHTML
+                                importStatement.style.width = '100%'
+                            }
+                        }
+                    })
+                })
+        }
+
+        for (let i = 0; i < definition.length; i++) {
+            let methodDefs = definition[i];
+            methodDefs.style.visibility = 'hidden'
+            methodNames.push(methodDefs.getAttribute('name'))
+            methodContent.push(methodDefs.innerHTML)
+            methodDefTags.push(methodDefs)
+        }
+
+        for (let j = 0; j < methodNames.length; j++) {
+            const methodName = methodNames[j];
+            let methodCall = document.getElementsByTagName(methodName)
+            for (let k = 0; k < methodCall.length; k++) {
+                let tag = methodCall[k];
+                tag.innerHTML = methodContent[j]
+            }
+        }
+
+        for (var l = 0; l < methodDefTags.length; l++) {
+            methodDefTags[l].remove()
+        }
+    }
+}
