Added footer, print to header, checkboxes beside spells

assets/app.css

@@ -2,6 +2,10 @@ body {
     background: #fafafa;
 }
 
+.mdl-mini-footer {
+    padding: .5em 1em 2.75em 1em
+}
+
 .do-nothing {
     pointer-events: none;
 }
@@ -17,6 +21,15 @@ body {
     background: url('wand.svg') no-repeat top center;
 }
 
+.mdl-layout__header .mdl-button .mdl-badge[data-badge] {
+    margin-right: 0;
+}
+
+.mdl-layout__header .mdl-button .mdl-badge[data-badge]::after {
+    left: -1em;
+    right: auto;
+}
+
 .mdl-navigation .mdl-textfield__label i {
     vertical-align: top;
     font-size: 1.25em;

dist/app.js

@@ -217,8 +217,9 @@ const spellDetails = name => {
 /**
  * Event Bindings
  */
+$('body')
 // Listen for header sorts
-$('body').on('click', '[data-action-sort]', e => {
+.on('click', '[data-action-sort]', e => {
     let name = $(e.currentTarget).attr('data-action-sort');
     let rev = store.tableSort.current === name && !store.tableSort.rev;
     store.tableSort.current = name;
@@ -227,10 +228,9 @@ $('body').on('click', '[data-action-sort]', e => {
     localStorage.setItem('tableSortRev', rev);
     view.spell_list.update({ data: sortSpells(store.spells) });
     view.table_sort.update(store.tableSort);
-});
+})
-
 // Listen for checkbox changes to filter spells
-$('body').on('change', '[data-action-classtoggle]', e => {
+.on('change', '[data-action-classtoggle]', e => {
     let name = $(e.currentTarget).attr('data-action-classtoggle');
     let add = $(e.currentTarget).prop('checked');
     let index = store.classes.current.indexOf(name);
@@ -242,10 +242,9 @@ $('body').on('change', '[data-action-classtoggle]', e => {
     localStorage.setItem('classes', store.classes.current);
     view.spell_list.update({ data: applyFilters() });
     view.table_sort.update({ current: store.tableSort.current });
-});
+})
-
 // Listen to search to filter by
-$('body').on('change keyup cut paste', '[data-action-search]', e => {
+.on('change keyup cut paste', '[data-action-search]', e => {
     setTimeout(() => {
         // Delay for value to change
         store.search = $(e.currentTarget).val();
@@ -257,17 +256,28 @@ $('body').on('change keyup cut paste', '[data-action-search]', e => {
         view.spell_list.update({ data: applyFilters() });
         view.table_sort.update(store.tableSort);
     }, 0);
-});
+})
-
 // Listen for click on spells to open details
-$('body').on('click', '[data-action-details]', e => {
+.on('click', '[data-action-details]', e => {
     let name = $(e.currentTarget).attr('data-action-details');
     window.location.hash = name;
     spellDetails(name);
+})
+// Stop propogation if dontprop clicked
+.on('click', '.dontprop', e => {
+    e.stopPropagation();
+})
+// Toggle All
+.on('change', 'label[for=table-header] input[type=checkbox]', e => {
+    $(e.target).closest('form').find('[name=selected]').each(function () {
+        this.checked = e.target.checked;
+        if (this.checked) $(this).closest('label').addClass('is-checked');else $(this).closest('label').removeClass('is-checked');
     });
-
+}).on('change', 'input[name=selected][type=checkbox]', e => {
+    console.log($('form[data-selected]').serialize());
+})
 // Article Scroll with User
-$('.mdl-layout__content').on('scroll', debounce(() => {
+.on('scroll', '.mdl-layout__content', debounce(() => {
     let distance = $('.mdl-layout__content')[0].scrollTop;
     $('[data-template=spell-details]').css('margin-top', distance);
 }, 10));

dist/view.js

@@ -254,7 +254,6 @@ function search_field() {
   input0.setAttribute("class", "mdl-textfield__input");
   input0.setAttribute("data-action-search", "");
   input0.setAttribute("type", "text");
-  input0.setAttribute("name", "sample");
   input0.id = "fixed-header-drawer-exp";
 
   // Update functions
@@ -647,31 +646,44 @@ function spell_list_if0_for0() {
   // Create elements
   var tr0 = document.createElement('tr');
   var td1 = document.createElement('td');
-  var strong2 = document.createElement('strong');
+  var label2 = document.createElement('label');
-  var text3 = document.createTextNode('');
+  var input3 = document.createElement('input');
   var td4 = document.createElement('td');
-  var text5 = document.createTextNode('');
+  var strong5 = document.createElement('strong');
-  var td6 = document.createElement('td');
+  var text6 = document.createTextNode('');
-  var text7 = document.createTextNode('');
+  var td7 = document.createElement('td');
+  var text8 = document.createTextNode('');
+  var td9 = document.createElement('td');
+  var text10 = document.createTextNode('');
 
   // Construct dom
-  strong2.appendChild(text3);
+  input3.setAttribute("type", "checkbox");
-  td1.appendChild(strong2);
+  input3.setAttribute("name", "selected");
-  td1.setAttribute("class", "spell-name mdl-data-table__cell--non-numeric");
+  input3.setAttribute("class", "mdl-checkbox__input dontprop");
-  td4.appendChild(text5);
+  label2.appendChild(input3);
-  td4.setAttribute("class", "spell-school mdl-data-table__cell--non-numeric");
+  label2.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select dontprop");
-  td6.appendChild(text7);
+  td1.appendChild(label2);
-  td6.setAttribute("class", "spell-level");
+  strong5.appendChild(text6);
+  td4.appendChild(strong5);
+  td4.setAttribute("class", "spell-name mdl-data-table__cell--non-numeric");
+  td7.appendChild(text8);
+  td7.setAttribute("class", "spell-school mdl-data-table__cell--non-numeric");
+  td9.appendChild(text10);
+  td9.setAttribute("class", "spell-level");
   tr0.appendChild(td1);
   tr0.appendChild(td4);
-  tr0.appendChild(td6);
+  tr0.appendChild(td7);
+  tr0.appendChild(td9);
 
   // Update functions
   this.__update__ = {
+    name: function (name) {
+      input3.value = name;;
+    },
     spell: function (spell) {
-      text3.textContent = spell.name;
+      text6.textContent = spell.name;
-      text5.textContent = spell.school;
+      text8.textContent = spell.school;
-      text7.textContent = spell.prettyLevel;
+      text10.textContent = spell.prettyLevel;
       tr0.setAttribute("data-action-details", spell.name);;
     }
   };
@@ -683,6 +695,9 @@ spell_list_if0_for0.prototype = Object.create(Monkberry.prototype);
 spell_list_if0_for0.prototype.constructor = spell_list_if0_for0;
 spell_list_if0_for0.pool = [];
 spell_list_if0_for0.prototype.update = function (__data__) {
+  if (__data__.name !== undefined) {
+    this.__update__.name(__data__.name);
+  }
   if (__data__.spell !== undefined && __data__.__index__ !== undefined) {
     this.__update__.spell(__data__.spell);
   }
@@ -800,9 +815,21 @@ function table_sort() {
   var _this = this;
 
   // Create elements
+  var th0 = document.createElement('th');
+  var label1 = document.createElement('label');
+  var input2 = document.createElement('input');
   var for0 = document.createComment('for');
   var children0 = new Monkberry.Map();
 
+  // Construct dom
+  input2.setAttribute("type", "checkbox");
+  input2.id = "table-header";
+  input2.setAttribute("class", "mdl-checkbox__input");
+  label1.appendChild(input2);
+  label1.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select");
+  label1.setAttribute("for", "table-header");
+  th0.appendChild(label1);
+
   // Update functions
   this.__update__ = {
     data: function (data) {
@@ -819,7 +846,7 @@ function table_sort() {
   };
 
   // Set root nodes
-  this.nodes = [for0];
+  this.nodes = [th0, for0];
 }
 table_sort.prototype = Object.create(Monkberry.prototype);
 table_sort.prototype.constructor = table_sort;

dist/view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["class-list.monk","search-field.monk","spell-details.monk","spell-list.monk","table-sort.monk"],"names":[],"mappings":"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","file":"view.js"}
+{"version":3,"sources":["class-list.monk","search-field.monk","spell-details.monk","spell-list.monk","table-sort.monk"],"names":[],"mappings":"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","file":"view.js"}

index.html

@@ -14,20 +14,12 @@
             <header class="mdl-layout__header">
                 <div class="mdl-layout__header-row">
                     <div class="mdl-layout-spacer"></div>
-                    <nav class="mdl-navigation">
+                    <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
-                        <a class="mdl-navigation__link" href="https://dark12222000.github.io/lootsplit/">
+                        <span class="mdl-badge" data-badge="4">
-                            <i class="material-icons">local_atm</i>
+                            <i class="material-icons">print</i>
-                            Loot Split
+                            Print
-                        </a>
+                        </span>
-                        <a class="mdl-navigation__link" href="http://paulvmoreau.github.io/BeltFedNPCs/">
+                    </button>
-                            <i class="material-icons">people</i>
-                            NPC Generator
-                        </a>
-                        <a class="mdl-navigation__link mdl-color-text--teal-100" href="https://github.com/sharpshark28/my_spells">
-                            <i class="material-icons">code</i>
-                            Fork Me On Github
-                        </a>
-                    </nav>
                     <div data-action-details="" role="button" tabindex="0"><i class="material-icons">keyboard_arrow_left</i></div>
                 </div>
             </header>
@@ -40,7 +32,7 @@
                     <form>
                         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                             <div data-template="search-field"></div>
-                            <label class="mdl-textfield__label" for="sample3">
+                            <label class="mdl-textfield__label">
                                 <i class="material-icons">search</i>
                                 Search
                             </label>
@@ -53,7 +45,7 @@
             </aside>
             <main class="mdl-layout__content">
                 <div class="page-content">
-                    <div class="mdl-grid">
+                    <form class="mdl-grid" id="selected-spells" data-selected>
                         <table id="spell-list-container" class="mdl-cell mdl-cell--12-col mdl-cell--6-col-desktop mdl-data-table mdl-shadow--2dp">
                             <thead>
                                 <tr data-template="table-sort"></tr>
@@ -61,10 +53,36 @@
                             <tbody data-template="spell-list"></tbody>
                         </table>
                         <article data-template="spell-details" class="mdl-cell mdl-cell--12-col mdl-cell--6-col-desktop mdl-color-text--grey-600"></article>
-                    </div>
+                    </form>
                 </div>
             </main>
 
+            <footer class="mdl-mini-footer">
+                <div class="mdl-mini-footer__left-section">
+                    <div class="mdl-logo">My Spells</div>
+                    <ul class="mdl-mini-footer__link-list">
+                        <li>
+                            <a class="mdl-navigation__link mdl-color-text--teal-100" href="https://github.com/sharpshark28/my_spells">
+                                <i class="material-icons">code</i>
+                                Fork Me On Github
+                            </a>
+                        </li>
+                        <li>
+                            <a class="mdl-navigation__link" href="https://dark12222000.github.io/lootsplit/">
+                                <i class="material-icons">local_atm</i>
+                                Loot Split
+                            </a>
+                        </li>
+                        <li>
+                            <a class="mdl-navigation__link" href="http://paulvmoreau.github.io/BeltFedNPCs/">
+                                <i class="material-icons">people</i>
+                                NPC Generator
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </footer>
+
             <div id="toast" class="mdl-js-snackbar mdl-snackbar">
                 <div class="mdl-snackbar__text"></div>
                 <button class="mdl-snackbar__action" type="button"></button>

src/app.js

@@ -228,8 +228,9 @@ const spellDetails = name => {
 /**
  * Event Bindings
  */
+$('body')
 // Listen for header sorts
-$('body').on('click', '[data-action-sort]', e => {
+.on('click', '[data-action-sort]', e => {
     let name = $(e.currentTarget).attr('data-action-sort');
     let rev = store.tableSort.current === name && !store.tableSort.rev;
     store.tableSort.current = name;
@@ -238,10 +239,9 @@ $('body').on('click', '[data-action-sort]', e => {
     localStorage.setItem('tableSortRev', rev);
     view.spell_list.update({data: sortSpells(store.spells)});
     view.table_sort.update(store.tableSort);
-});
+})
-
 // Listen for checkbox changes to filter spells
-$('body').on('change', '[data-action-classtoggle]', e => {
+.on('change', '[data-action-classtoggle]', e => {
     let name = $(e.currentTarget).attr('data-action-classtoggle');
     let add = $(e.currentTarget).prop('checked');
     let index = store.classes.current.indexOf(name);
@@ -253,10 +253,9 @@ $('body').on('change', '[data-action-classtoggle]', e => {
     localStorage.setItem('classes', store.classes.current);
     view.spell_list.update({data: applyFilters()});
     view.table_sort.update({current: store.tableSort.current});
-});
+})
-
 // Listen to search to filter by
-$('body').on('change keyup cut paste', '[data-action-search]', e => {
+.on('change keyup cut paste', '[data-action-search]', e => {
     setTimeout(() => { // Delay for value to change
         store.search = $(e.currentTarget).val();
         store.tableSort.current = store.search.length || store.classes.current.length ? 'ranking' : null;
@@ -267,17 +266,30 @@ $('body').on('change keyup cut paste', '[data-action-search]', e => {
         view.spell_list.update({data: applyFilters()});
         view.table_sort.update(store.tableSort);
     }, 0);
-});
+})
-
 // Listen for click on spells to open details
-$('body').on('click', '[data-action-details]', e => {
+.on('click', '[data-action-details]', e => {
     let name = $(e.currentTarget).attr('data-action-details');
     window.location.hash = name;
     spellDetails(name);
+})
+// Stop propogation if dontprop clicked
+.on('click', '.dontprop', e => {
+    e.stopPropagation();
+})
+// Toggle All
+.on('change', 'label[for=table-header] input[type=checkbox]', e => {
+    $(e.target).closest('form').find('[name=selected]').each(function() {
+        this.checked = e.target.checked;
+        if(this.checked) $(this).closest('label').addClass('is-checked');
+        else $(this).closest('label').removeClass('is-checked');
     });
-
+})
+.on('change', 'input[name=selected][type=checkbox]', e => {
+    console.log($('form[data-selected]').serialize());
+})
 // Article Scroll with User
-$('.mdl-layout__content').on('scroll', debounce(() => {
+.on('scroll', '.mdl-layout__content', debounce(() => {
     let distance = $('.mdl-layout__content')[0].scrollTop;
     $('[data-template=spell-details]').css('margin-top', distance);
 }, 10));

src/views/search-field.monk

@@ -1 +1 @@
-<input value="{{ data }}" class="mdl-textfield__input" data-action-search type="text" name="sample" id="fixed-header-drawer-exp" />
+<input value="{{ data }}" class="mdl-textfield__input" data-action-search type="text" id="fixed-header-drawer-exp" />

src/views/spell-list.monk

@@ -1,6 +1,11 @@
 {% if data.length %}
     {% for spell of data %}
         <tr data-action-details="{{ spell.name }}">
+            <td>
+                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select dontprop">
+                    <input type="checkbox" name="selected" value="{{ name }}" class="mdl-checkbox__input dontprop" />
+                </label>
+            </td>
             <td class="spell-name mdl-data-table__cell--non-numeric">
                 <strong>
                     {{ spell.name }}

src/views/table-sort.monk

@@ -1,3 +1,8 @@
+<th>
+    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="table-header">
+        <input type="checkbox" id="table-header" class="mdl-checkbox__input" />
+    </label>
+</th>
 {% for name of data %}
     <th data-action-sort="{{ name }}" class="mdl-data-table__cell--non-numeric {{ current === 'ranking' ? 'mdl-color-text--grey-200 do-nothing' : '' }}">
         <i class="material-icons mdl-list__item-icon">