offline-search/index.html

<div id="root"></div>
<script type="module">

import _ from "https://dev.jspm.io/lodash";
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=>
    {
        let indexNumeric = inRef.lastIndexOf(" ");
        let partBook = inRef.substring(0, indexNumeric);
        let chapterVerse = inRef.substring(indexNumeric+1).split(":");
        return [partBook, chapterVerse[0], chapterVerse[1]];
    }
};
let h = React.createElement;

let ElemApp = props =>
{
    return h("div", null,
    [
        h("h4", {key:0}, "topics"),
        h(ElemTopics, {key:1}),
        h(ElemItems, {key:3})
    ]
    );
};

let ElemItems = props =>
{
    let list = App.State.Pages.All[App.State.Pages.Active].map( i=>h(ElemItem, {...i, key:i.id} ) );

    let pages = h(ElemPager, {count:App.State.Pages.All.length, active:App.State.Pages.Active}, null);

    return h("div", null, [
        h("h4", {key:0}, App.State.Items.Active.length+" results"),
        h("div", {key:1}, pages),
        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:0}, props.title),
            h("em", {key:1}, props.id)
        ]
        ),
        h("small", {key:3}, props.bible)
    ])
};
let ElemPager = ({count, active}) =>
{
    var children;
    var blockIntro, blockAt, blockOutro;
    var hitLeft, hitRight;

    let renderRange = (inStart, inStop) =>
    {
        let output = [];
        for(let i=inStart; i<=inStop; i++)
        {
            output.push(h("button", {key:i, onClick:e=>App.Update("page", i)}, i+1));
        }
        return output;
    }
    let renderSpacer = () => h("span", {key:Math.random()}, "…");


    blockIntro = [0, 1, 2];
    blockAt = [active-1, active, active+1];
    blockOutro = [count-3, count-2, count-1];

    hitLeft = _.last(blockIntro) >= _.head(blockAt);
    hitRight = _.last(blockAt) >= _.head(blockOutro);

    if(count < 2)
    {
        children = [];
    }
    else
    {
        if( (hitLeft && hitRight) || count < 7)
        {
            children = renderRange(_.head(blockIntro), _.last(blockOutro))
        }
        else if(!hitLeft && hitRight)
        {
            children = [
                ...renderRange(_.head(blockIntro), _.last(blockIntro)),
                renderSpacer(),
                ...renderRange(Math.min(_.head(blockAt), _.head(blockOutro)), _.last(blockOutro)) /* merge end */
            ];
        }
        else if(hitLeft && !hitRight)
        {
            children = [
                ...renderRange(_.head(blockIntro), Math.max(_.last(blockAt), _.last(blockIntro)) ), /* merge beginning */
                renderSpacer(),
                ...renderRange(_.head(blockOutro), _.last(blockOutro))
            ];
        }
        else if(!hitLeft && !hitRight)
        {
            children = [
                ...renderRange(_.head(blockIntro), _.last(blockIntro)),
                renderSpacer(),
                ...renderRange(_.head(blockAt), _.last(blockAt)),
                renderSpacer(),
                ...renderRange(_.head(blockOutro), _.last(blockOutro))
            ];
        }

    }

    return h("div", {}, children);
};

let ElemTopics = props =>
{
    let children = App.State.Topics.All.map( t=>
    {
        return h(ElemTopic, {
            onClick:e=>App.Update("topic-toggle", 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);
};

var App = {
    State:
    {
        Items:
        {
            All:[],
            Active:[]
        },
        Pages:
        {
            All:[],
            Active:0,
        },
        Topics:
        {
            All:
            [
                {
                    id:"gospel-the",
                    display:"The Gospel",
                    active:false,
                    members:[]
                },
                {
                    id:"jesus-christ",
                    display:"Jesus Christ",
                    active:false,
                    members:[]
                },
                {
                    id:"biblical-figures",
                    display:"Biblical Figures",
                    active:false,
                    members:[]
                },
                {
                    id:"free-will",
                    display:"Free Will",
                    active:false,
                    members:[]
                },
                {
                    id:"secular-culture",
                    display:"Secular Culture",
                    active:false,
                    members:[]
                }
            ],
            Active:[]
        },
        Scripture:
        {
            All:{},
            Active:[]
        }
    },
    RootDOM:document.querySelector("#root"),
    RootComponent:ElemApp,
    Render:()=>ReactDOM.render( h(App.RootComponent), App.RootDOM ),
    ApplyFilters:()=>
    {
        if(App.State.Topics.Active.length == 0)
        {
            App.State.Items.Active = [...App.State.Items.All];
        }
        else
        {
            App.State.Items.Active = App.State.Items.All.filter( item =>
            {
                for(let i=0; i<item.topics.length; i++)
                {
                    for(let j=0; j<App.State.Topics.Active.length; j++)
                    {
                        if(item.topics[i] == App.State.Topics.Active[j].id)
                        {
                            return true;
                        }
                    }
                }
                return false;
            });
        }
        App.State.Pages.All = _.chunk(App.State.Items.Active, 10);
        App.State.Pages.Active = 0;
    },
    Update:(...action)=>
    {
        if(action)
        {
            switch(action[0])
            {
                case "load":
                    fetch(action[1])
                    .then(inAccept=>inAccept.text())
                    .then(inAccept=>
                    {
                        let columns = inAccept.split("|");
                        App.State.Items.All = [];
                        for(let i=0; i<columns.length; i+=4)
                        {
                            let row = Math.floor(i/4);
                            App.State.Items.All[row] = {
                                title:columns[i+0],
                                id:columns[i+1],
                                bible:columns[i+2].split("*"),
                                topics:columns[i+3].split("*")
                            };
                        }
                        App.ApplyFilters();
                        App.Render();
                    }
                    );
                    break;

                case "topic-toggle" :
                    let topic = action[1];
                    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();
                    break;

                case "page" :
                    if(action[1] !== false)
                    {
                        App.State.Pages.Active = action[1];
                        App.Render();
                    }
            }
        }
    }
};


App.Update("load", "data-flat.csv");


</script>