one-index v1.0.0

One Index

An electron application template framework using a modular building structure to which creates a single html file to run.

This is conceptual and a fun project.

Quickstart

Assumed installations:

Node.js and npm 1. Install

npm install one-index

2. Build dependencies

yarn install

3. Build and run application

yarn dev

Yarn package manager scripts

Rebuild index.html and run application

yarn dev

Run application (no rebuild)

yarn start

Rebuild index.html

yarn build

Remove index.html and stored cache

yarn clean

Documentation

Components

• Path resources/components/

Components are to be thought of as constant static DOM Elements. Components are key html files associated and defined within resources/layout.blay. Removing blay pointer will result in the corresponding html component not being added to index.html.

Main

• Path resources/components/

The main component is the contents wrapper and is only called if @@CONTENT is called in blay file. @@CONTENT must be declared in the main file to represent where contents is to be inserted.

An example main file:

<!-- Main -->
<main>
    <div class="main">
        <!-- Content -->
        @@CONTENT
    </div>
</main>

Contents

• Path resources/contents/

Contents are to be thought of as interchangeable dynamic DOM Elements - typically the webpage body.

On build, all contents html files will be wrapped in a <div> element containing an id matching the file basename, and the main-wrapper class to inherit display properties.

Home

The home.html file by default will be considered the app home contents, and all other contents will be hidden with display: none; property.

Example Home: resources/contents/home.html

<div>
    <span>home</span>
    <div>
        <input type="text" id="home-home" value="Display Example"/>
    </div>
</div>

Example Home: index.html

<div id="home" class="main-wrapper">
    <div>
        <span>home</span>
        <div>
            <input type="text" id="home-home" value="Display Example"/>
        </div>
    </div>
</div>

Routes

• Path resources/routes/routes.js

Typical route navigation and information uses properties and attributes such as

• window.location.href
• window.location.path
• href

...which is not useable in a single file webpage (as far as I am aware - or care to research). Instead One Index uses the CSS display: none property to visually 'navigate' contents. The current global route is initiallised and stored as a property of window.

window.oneindex = {
    route: {
        path: '',
        title: '',
        el: {}
    },
}

Routes are defined in the routes.js file as a single object and parse to the main app.js file and imported as routes. Navigating contents uses the setRoute function which takes a routes object property.

function setRoute(route) {
    if (window.oneindex.route.path !== route.path) {
        window.oneindex.route.el.classList.add('hide')
        window.oneindex.route = route
        frameTitle.innerText = route.title
        window.oneindex.route.el.classList.remove('hide')
    }
}

Usage in form of click event listener

goHomeButtonElement.addEventListener('click', () => {
    setRoute(routes.home)
})