bb.js

bb.js

"use strict";
(function () {

    function toArray(list) {
        return Array.prototype.slice.call(list);
    }
    var list = {}, replacements = {},
    re = /(\{\{)(\w+)(\}\})/gi;
    document.body.innerHTML = document.body.innerHTML.replace(re, function (b, a, c) {

        ///this finds {{c}}
        if (!list.hasOwnProperty(c)) {
            list[c] = c;

            Object.defineProperty(replacements, c, {
                get: function () {
                    return list[c];
                },
                set: function (d) {
                    list[c] = d;

                    toArray(document.querySelectorAll("[data-set]")).forEach(function (e) {
                        e.setAttribute(e.getAttribute('data-set'), list[e.getAttribute('data-id')]);
                        e.textContent = list[e.getAttribute('data-id')];
                    });
                    ///finding each object with data-id=
                    toArray(document.querySelectorAll("[data-id=" + c + "]")).forEach(function (e) {
                        if (e.hasAttribute("data-set")) {
                            e[(e.getAttribute("data-set"))] = list[c];
                            } else {
                                e.innerHTML = list[c];
                            }
                        });
                    toArray(document.getElementsByClassName(c)).forEach(function (e) {
                        e.innerHTML = d;
                    });
                    }
                });
            }
            return "<" + c + " class='" + c + "'></" + c + ">";
        });
    var focus = document.getElementById("focus");

    //////*all of the input boxes are grabbed*/////////////////////
    toArray(document.getElementsByTagName("input")).forEach(function caller(j) {
        ////////*only the ones with a data-id attribute just incase we have others*///
        if (j.hasAttribute("data-id")) {

            ['mousedown',"click", "keypress", "keyup"].forEach(function (b) {
                j.addEventListener(b, function (c) {
                    ///*these are the events we want to modify on the input boxes so they are watched as the user types */

                    list[c.target.getAttribute('data-id')] = c.target.value
                    toArray(document.getElementsByTagName(c.target.getAttribute("data-id"))).forEach(function (d) {

                        //*grabs all the elements whose tag names are the string in {{string}}
                        d.innerHTML = c.target.value;

                    });
                    replacements[c.target.getAttribute("data-id")] = c.target.value;
                   focus.setAttribute('class',c.target.getAttribute("data-id"));
                });
            });
        }
    });
    })();