@ithaka/bonsai/js/index.js

ITHAKA core styling

/**
 * This file is used solely for generation of the style guide
 */

import $ from "jquery";
import Modernizr from "modernizr";  // imported to use modernizr to replace "no-js" class to "js" when javaScript is enabled
import { BonsaiMediaQuery } from "./bonsai.mediaquery";
import { BonsaiDropdownMenu } from "./bonsai.dropdownmenu";
import { BonsaiDropdown } from "./bonsai.dropdown";
import { BonsaiModal } from "./bonsai.modal";
import { BonsaiSticky } from "./bonsai.sticky";
import { BonsaiTabs } from "./bonsai.tabs";
import { BonsaiTooltip } from "./bonsai.tooltip";
import { BonsaiAccordionMenu } from "./bonsai.accordionmenu";
import { BonsaiOffCanvas } from "./bonsai.offcanvas";
import { BonsaiSocialSharing } from "./social/bonsai.socialsharing";
import { BonsaiTextEditor } from "./bonsai.texteditor";
import { BonsaiFuzzySearch } from "./bonsai.fuzzy.search";
import { BonsaiGlobalNav } from "./bonsai.globalnav";

// These are imported so that webpack watches the documentation html / md for changes
import Template from "../documentation/template.html";
import Nav from "../documentation/partials/nav.html";

// Iterates through everything in the documentation/pages directory allowing
// webpack to watch the files for changes
function requireAll(routes) {
    routes.keys().forEach(routes);
}

requireAll(require.context("../documentation/pages/", true, /\.md$/));

function setActiveRoute() {
    // Pull the active component from the URL and select its jquery element
    // and its parent jquery element to mark each with an active class
    const $activeListElement = getActiveListElement();

    if ($activeListElement) {
        const $parentListElements = $activeListElement.parents("ul");

        $activeListElement.addClass("active");
        $parentListElements.addClass("is-active");
    }
}

function getActiveListElement() {
    try {
        const path = window.location.pathname,
            pagePath = path.substring(path.lastIndexOf("/") + 1),
            pageKey = pagePath.substring(0, pagePath.lastIndexOf("."));

        return $(pageKey ? `#${pageKey}` : "#root");
    }
    catch (error) {
        return $("");
    }
}

setActiveRoute();

new BonsaiMediaQuery();
new BonsaiDropdownMenu($("[data-dropdown-menu]"), {"hoverDelay": 500,"closingTime": 100});
new BonsaiDropdown($("[data-dropdown]"));
new BonsaiModal($(".reveal"));
new BonsaiSticky($(".sticky"));
new BonsaiTabs($(".tabs"));
new BonsaiTooltip($(".has-tip"));
new BonsaiAccordionMenu($(".accordion-menu"));
new BonsaiOffCanvas($("div[data-off-canvas]"));
new BonsaiSocialSharing();
new BonsaiGlobalNav($("[data-top-bar-nav]"));

const editors = BonsaiTextEditor.editorFactory();
const editor2 = BonsaiTextEditor.getEditorById(editors, "editor2");

$("#editor").on("save.bonsai-text-editor", (event, data, html) => {
    alert("Saving first text editor content." + html);
});

$("#editor2").on("save.bonsai-text-editor", (event, data, html) => {
    $("#prebaked-note").html(html);
    $("#rendered-content").toggle();
    editor2.toggle();
});

$("#editor2").on("cancel.bonsai-text-editor", () => {
    $("#rendered-content").toggle();
    editor2.toggle();
});

if (editor2 !== undefined) {
    $("#edit-button").on("click", () => {
        editor2.insertEditorContent($("#prebaked-note").html());
        editor2.toggle();
        $("#rendered-content").toggle();
    });
}

if ($("ul#title-search").length) {
    const ExampleSearch = new BonsaiFuzzySearch($("ul#title-search li")),
        ExampleAdditionalFieldSearch = new BonsaiFuzzySearch($("ul#add-field-search li"), {keys: ["title", "director", "genre"]}, $("#add-field-no-results"));

    let searchTimer = 0,
        userQuerySize = 0;

    $("#title-search-filter").on("input propertychange paste", (event) => {
        clearTimeout(searchTimer);

        searchTimer = setTimeout(() => {
            userQuerySize = event.target.value.length;
            if (userQuerySize === 0 || userQuerySize > 1) {
                ExampleSearch.search(event.target.value);
            }
        }, 500);
    });

    $("#add-field-search-filter").on("input propertychange paste", (event) => {
        clearTimeout(searchTimer);

        searchTimer = setTimeout(() => {
            userQuerySize = event.target.value.length;
            if (userQuerySize === 0 || userQuerySize > 1) {
                ExampleAdditionalFieldSearch.search(event.target.value);
            }
        }, 500);
    });
}