loading main page content on load function

intHomeContent function is to generate home page content directly
HamzaElkotp · Sep 22, 2022 · cd71405 · cd71405
1 parent 34c02a9
commit cd71405
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 20,002 deletions.
diff --git a/index.html b/index.html
@@ -22,11 +22,12 @@
                     i created a meta tag "SPAname" to can access them and add events easly
                     also to get their content from JSON using this meta tag
                  -->
+
             </ul>
         </aside>
 
-        <div class="" id="content">
-
+        <div class='column is-10' id="SPAoutContent">
+            
         </div>
     </div>
 

diff --git a/main.css b/main.css
@@ -4,6 +4,10 @@ html,body {
 body{
     position: sticky;
     top: 0;
+    margin: 0 10px !important;
+}
+*{
+    box-sizing: border-box !important;
 }
 
 :root{
@@ -16,6 +20,14 @@ body{
 .sideBar{
     margin-bottom: 0;
     height: 100vh;
+    top: 0;
+    position: sticky;
+}
+
+.link {
+    display: block;
+    font-size: 20px;
+    color: #00d1b2;
 }
 
 .columns:not(:last-child){

diff --git a/main.js b/main.js
@@ -1,4 +1,6 @@
-function jsonRead(jsonpages, metatagArr = ["SPAname", "SPAurl", "SPAtitle"]){
+let contentBox = document.getElementById("SPAoutContent");
+
+function intContent(jsonpages, metatagArr = ["SPAname", "SPAurl", "SPAtitle"]){
 
     let xhr = fetch(jsonpages);
     xhr.then((res)=>{
@@ -19,15 +21,25 @@ function jsonRead(jsonpages, metatagArr = ["SPAname", "SPAurl", "SPAtitle"]){
             elements.forEach((ele, index)=>{
                 ele.addEventListener('click',()=>{
 
+                    let eleIndex = ""
+
                     // change title, url   regardless of pages or json file objects order
                     for(let dataI = 0; dataI<data.length ; dataI++){
                         if(data[dataI][SPAname] == ele.getAttribute("SPAname")){
                             document.title = data[dataI][SPAtitle];
                             window.history.pushState("","",data[dataI][SPAurl]);
+                            eleIndex = dataI;
                             break
                         }
                     }
 
+
+                    contentBox.innerHTML = ``;
+
+                    for (i in data[eleIndex]["Body"]){
+                        contentBox.innerHTML += `${data[eleIndex]["Body"][i]}`
+                    }
+
                     elements.forEach((eles)=>{
                         eles.classList.remove("is-active", "is-primary");
                     })
@@ -40,7 +52,23 @@ function jsonRead(jsonpages, metatagArr = ["SPAname", "SPAurl", "SPAtitle"]){
     });
 }
 
-jsonRead("spa.json",["SPAname1", "SPAurl1", "SPAtitle1"]);
-
+function intHomeContent (jsonpages, homePageSPAname, keyName){
+    let xhr = fetch(jsonpages);
+    xhr.then((res)=>{
+        return res.json()
+    }).then((data)=>{
+        return data
+    }).then((data)=>{
+        for(let ind = 0; ind<data.length; ind++){
+            if(data[ind][keyName] == homePageSPAname){
+                for (item in data[ind]["Body"]){
+                    contentBox.innerHTML += `${data[ind]["Body"][item]}`;
+                }
+                break;
+            }
+        }
+    })
+}
 
-// You have a problem, many requests, to window.history.pushState  because looping on every element
+intContent("spa.json",["SPAname1", "SPAurl1", "SPAtitle1"],true);
+intHomeContent("spa.json","home","SPAname1");