Merge pull request #10 from dsinn/navigation

Add ugly quick-nav
2015-12-24 01:19:42 -05:00
parent 2525dc20c9 467bd4b534
commit 5c8a86cfed
3 changed files with 33 additions and 2 deletions
@@ -7,6 +7,10 @@
    </head>

    <body>
+        <nav>
+            <ul id="navList"></ul>
+        </nav>
+
        <h1>Keep Talking and Nobody Explodes</h1>

        <section id="sectionWires">
@@ -183,7 +187,7 @@
            <ul id="sequenceInstruction"></ul>
        </section>

-        <section>
+        <section id="venn">
            <h2>Venn Diagram</h2>
            <ul id="vennOptions">
                <li><input type="checkbox" id="vennRed" /> <label for="vennRed">Red</label></li>
@@ -194,7 +198,7 @@
            <div id="vennInstruction"></div>
        </section>

-        <section>
+        <section id="passwords">
            <h2>Passwords</h2>
            <table id="passwords"></table>
            <ul id="passwordOptions">
@@ -80,6 +80,21 @@ h2 {
    margin-top: 1em;
 }

+nav {
+    background-color: white;
+    border-left: 1px solid black;
+    border-top: 1px solid black;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+}
+#navList {
+    line-height: 150%;
+    list-style-type: none;
+    margin: 0;
+    padding-left: 0.2em;
+}
+
 #sectionWires button {
    border-color: black;
    cursor: pointer;
@@ -7,6 +7,7 @@ $('h2').on('dblclick', function () {
    $(this).closest('section').toggleClass('collapsed');
 }).attr('title', 'Double-click to expand/collapse');

+/** Reset inputs */
 ktane.resetInputs = function ($container) {
    $container.find('textarea').val('');
    $container.find('.selected').removeClass('selected');
@@ -27,6 +28,17 @@ $('.jsResetSection').on('click', function () {
    ktane.resetInputs($(this).closest('section')).filter('[type="text"]').first().focus();
 });

+/** Navigation */
+$('section').each(function () {
+    var $section = $(this),
+        id = $section.attr('id'),
+        $a = $('<a href="#' + id + '">' + $(this).find('h2').first().text() + '</a>').on('click', function () {
+            $section.removeClass('collapsed');
+        });
+
+    id && $('#navList').append($('<li></li>').append($a));
+});
+
 (function () {
    /**
     * Wires