index.html

@@ -2,12 +2,10 @@
 <script type="module">
 
 import _ from "https://dev.jspm.io/lodash";
-import styled from "https://dev.jspm.io/styled-components";
 import React from "https://dev.jspm.io/react/index.js";
 import ReactDOM from "https://dev.jspm.io/react-dom/index.js";
 import ReactDOMServer from "https://dev.jspm.io/react-dom/server.js";
 
-
 let Util = {
     ParsePassage:inRef=>
     {
@@ -19,7 +17,6 @@ let Util = {
 };
 
 let h = React.createElement;
-let s = styled.default;
 
 let ElemApp = props =>
 {
@@ -27,7 +24,6 @@ let ElemApp = props =>
     [
         h(ElemTree, {key:"tree1", tree:App.State.Topics}),
         h(ElemTree, {key:"tree2", tree:App.State.Bible}),
-        h(ElemTree, {key:"tree3", tree:App.State.Date}),
         h(ElemItems, {key:3})
     ]
     );
@@ -50,15 +46,14 @@ let ElemItems = props =>
         h("div", {key:2}, list),
         h("div", {key:3}, pages)
     ]);
-};
+}
 let ElemItem = props =>
 {
     return h("div", {key:0}, [
         h("div", {key:1},
         [
             h("span", {key:2}, props.title),
-            h("em", {key:3}, props.id),
+            h("em", {key:3}, props.id)
-            h("strong", {key:4}, props.date),
         ]
         ),
         h("small", {key:4}, props.bible)
@@ -131,17 +126,31 @@ let ElemPager = ({count, active}) =>
     return h("div", {}, children);
 };
 
-let ElemColumn = s.div`
+let ElemTopics = props =>
-    display:inline-block;
+{
-    vertical-align:top;
+    let children = App.State.Topics.All.map( t=>
-`;
+    {
+        return h(ElemTopic, {
+            onClick:e=>App.Update.Topic(t),
+            key:t.id,
+            label:t.display, 
+            active:t.active
+        });
+    });
+    return h("div", null, children);
+};
+let ElemTopic = props =>
+{
+    let label = props.active? props.label+" !" : props.label;
+    return h("button", {onClick:props.onClick}, label);
+};
 
 let ElemTree = ({tree}) =>
 {
     let activeItems = tree.Active.map( a=>{
         return h("button", {disabled:a.Parent?false:true, key:a.ID, onClick:e=>App.Update.Select(a, tree)}, a.Display )
-    });
+     })
-    return h(ElemColumn, {},
+    return h("div", {},
     [
         h("h3", {key:"title"}, tree.Display),
         h("div", {key:"filters-active"}, [
@@ -153,7 +162,7 @@ let ElemTree = ({tree}) =>
             h(ElemTreeNode, {key:"tree", node:tree.Root, tree:tree})
         ])
     ]);
-};
+}
 let ElemTreeNode = ({node, tree}) =>
 {
     let children = [];
@@ -400,30 +409,25 @@ var App = {
                     Node.Create("1 Thessalonians")
                 ])
             ])
-        },
-        Date:
-        {
-            Display:"Date",
-            Results:[],
-            Active:[],
-            Root:
-            Node.Create("all", "All", [
-                Node.Create("", "Unclassified"),
-                Node.Create("8", "1980s"),
-                Node.Create("9", "1990s"),
-                Node.Create("0", "2000s"),
-                Node.Create("1", "2010s"),
-                Node.Create("2", "2020s")
-            ])
         }
     },
-    Update:
+
+    RootDOM:document.querySelector("#root"),
+    RootComponent:ElemApp,
+    Render:()=>ReactDOM.render( h(App.RootComponent), App.RootDOM ),
+    ApplyFilters:()=>
     {
-        Load:(file)=>
+        App.State.Items.Active = _.union(App.State.Topics.Results, App.State.Bible.Results);
+        if(App.State.Items.Active.length == 0)
         {
-            let leafStructure = inTree=>
+            App.State.Items.Active = App.State.Items.All;
+        }
+        App.State.Pages.All = _.chunk(App.State.Items.Active, 10);
+        App.State.Pages.Active = 0;
+    },
+    LeafStructure:(inTree)=>
     {
-                let output = [];
+        let output = {};
         Node.IterateDown(inTree.Root, n=>
         {
             if(!n.Children)
@@ -432,97 +436,10 @@ var App = {
             }
         });
         return output;
-            };
-
-            let structTopics = leafStructure(App.State.Topics)
-            let structBible = leafStructure(App.State.Bible);
-            let structDate = leafStructure(App.State.Date);
-
-            fetch(file)
-            .then(inAccept=>inAccept.text())
-            .then(inAccept=>
-            {
-                let itrUp = inLeaf=>
-                {
-                    Node.IterateUp(inLeaf, inBranch=>
-                    {
-                        inBranch.Leaves = _.union(inBranch.Leaves, inLeaf.Leaves)
-                    });
-                };
-
-                let columns = inAccept.split("|");
-
-                for(let i=0; i<columns.length; i+=5)
-                {
-                    let title  = columns[i+0];
-                    let id     = columns[i+1];
-                    let date   = columns[i+2];
-                    let bible  = columns[i+3].split("*");
-                    let topics = columns[i+4].split("*");
-
-                    let output = { title, id, date, topics, bible };
-
-
-                    var matched, match;
-
-                    // match topics
-                    matched = false;
-                    topics.forEach(t=>
-                    {
-                        match = structTopics[t];
-                        if(match)
-                        {
-                            match.Leaves.push(output);
-                            matched = true;
-                        }
-                    });
-                    if(!matched)
-                    {
-                        structTopics[""].Leaves.push(output);
-                    }
-
-                    // match bible
-                    matched = false;
-                    bible.forEach(t=>
-                    {
-                        match = structBible[ Util.ParsePassage(t)[0] ];
-                        if(match)
-                        {
-                            match.Leaves.push(output);
-                            matched = true;
-                        }
-                    });
-                    if(!matched)
-                    {
-                        structBible[""].Leaves.push(output);
-                    }
-
-                    // match date
-                    matched = false;
-                    match = structDate[date[2]];
-                    if(match)
-                    {
-                        match.Leaves.push(output);
-                        matched = true;
-                    }
-                    if(!matched)
-                    {
-                        structDate[""].Leaves.push(output);
-                    }
-
-                    App.State.Items.All.push(output);
-                }
-
-                Object.values(structTopics).forEach(itrUp);
-                Object.values(structBible).forEach(itrUp);
-                Object.values(structDate).forEach(itrUp);
-            })
-            .then(inAccept=>
-            {
-                App.ApplyFilters();
-                App.Render();
-            });
     },
+
+    Update:
+    {
         Interact:(inNode)=>
         {
             if(inNode.Open)
@@ -576,6 +493,96 @@ var App = {
             App.ApplyFilters();
             App.Render();
         },
+        Load:(file)=>
+        {
+            
+            fetch(file)
+            .then(inAccept=>inAccept.text())
+            .then(inAccept=>
+            {
+                let structTopics = App.LeafStructure(App.State.Topics);
+                let structBible = App.LeafStructure(App.State.Bible);
+
+                let itrUp = inLeaf=>
+                {
+                    Node.IterateUp(inLeaf, inBranch=>
+                    {
+                        inBranch.Leaves = _.union(inBranch.Leaves, inLeaf.Leaves)
+                    });
+                };
+
+                let columns = inAccept.split("|");
+
+                for(let i=0; i<columns.length; i+=5)
+                {
+                    let title  = columns[i+0];
+                    let id     = columns[i+1];
+                    let year   = columns[i+2];
+                    let bible  = columns[i+3].split("*");
+                    let topics = columns[i+4].split("*");
+
+                    let output = { title, id, year, topics, bible };
+
+                    let matched = false;
+                    topics.forEach(t=>
+                    {
+                        let match = structTopics[t];
+                        if(match)
+                        {
+                            match.Leaves.push(output);
+                            matched = true;
+                        }
+                    });
+                    if(!matched)
+                    {
+                        structTopics[""].Leaves.push(output);
+                    }
+                    matched = false;
+                    bible.forEach(t=>
+                    {
+                        let passage = Util.ParsePassage(t);
+                        let match = structBible[ passage[0] ];
+                        if(match)
+                        {
+                            match.Leaves.push(output);
+                            matched = true;
+                        }
+                    });
+                    if(!matched)
+                    {
+                        structBible[""].Leaves.push(output);
+                    }
+
+                    App.State.Items.All.push(output);
+                }
+
+                Object.values(structTopics).forEach(itrUp);
+                Object.values(structBible).forEach(itrUp);
+                console.log(App.State.Items.All.length);
+            })
+            .then(inAccept=>
+            {
+                App.ApplyFilters();
+                App.Render();
+            });
+
+            
+        },
+        Topic:(topic)=>
+        {
+            if(topic.active)
+            {
+                topic.active = false;
+                App.State.Topics.Active = App.State.Topics.Active.filter( t=>t.id != topic.id );
+            }
+            else
+            {
+                topic.active = true;
+                App.State.Topics.Active.push(topic);
+            }
+            App.ApplyFilters();
+            App.Render();
+        },
         Page:(page)=>
         {
             if(page !== false)
@@ -584,19 +591,6 @@ var App = {
                 App.Render();
             }
         }
-    },
-    RootDOM:document.querySelector("#root"),
-    RootComponent:ElemApp,
-    Render:()=>ReactDOM.render( h(App.RootComponent), App.RootDOM ),
-    ApplyFilters:()=>
-    {
-        App.State.Items.Active = _.union(App.State.Topics.Results, App.State.Bible.Results, App.State.Date.Results);
-        if(App.State.Items.Active.length == 0)
-        {
-            App.State.Items.Active = App.State.Items.All;
-        }
-        App.State.Pages.All = _.chunk(App.State.Items.Active, 10);
-        App.State.Pages.Active = 0;
     }
 };