Working print, needs more details and print styles

assets/app.css

@@ -2,8 +2,13 @@ body {
     background: #fafafa;
 }
 
+[data-action=print],
+.printonly {
+    display: none;
+}
+
 .mdl-mini-footer {
-    padding: .5em 1em 2.75em 1em
+    padding: .5em 1em .75em 1em
 }
 
 .do-nothing {

assets/print.css

@@ -0,0 +1,14 @@
+@media print {
+    body {
+        background: white;
+    }
+
+    body > .printonly {
+        display: block;
+    }
+
+    body > :not(.printonly) {
+        display: none;
+    }
+
+}

dist/app.js

@@ -57,6 +57,12 @@ view.table_sort.update(store.tableSort);
 view.spell_list = Monkberry.render(spell_list, el('spell-list'));
 view.spell_list.update({});
 
+/**
+ * Render Spell Print List
+ */
+view.spell_list_print = Monkberry.render(spell_list_print, el('spell-list-print'));
+view.spell_list_print.update({});
+
 /**
  * Render Spell Details
  */
@@ -274,7 +280,20 @@ $('body')
         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());
+    let selectedSpells = $('form[data-selected]').serializeArray().map(sel => store.spells.find(spell => sel.value === spell.name)).sort((a, b) => {
+        if (a.name > b.name) return 1;
+        if (a.name < b.name) return -1;
+        return 0;
+    });
+    view.spell_list_print.update({ data: selectedSpells });
+    if (selectedSpells.length) {
+        $('[data-action=print] [data-badge]').attr('data-badge', selectedSpells.length);
+        $('[data-action=print]').slideDown('fast');
+    } else {
+        $('[data-action=print]').slideUp('fast');
+    }
+}).on('click', '[data-action=print]', e => {
+    window.print();
 })
 // Article Scroll with User
 .on('scroll', '.mdl-layout__content', debounce(() => {

dist/view.js

@@ -553,6 +553,97 @@ spell_details_else1.prototype.update = function (__data__) {
 
 window.spell_details = spell_details;
 
+/**
+ * @class
+ */
+function spell_list_print() {
+  Monkberry.call(this);
+  var _this = this;
+
+  // Create elements
+  var for0 = document.createComment('for');
+  var children0 = new Monkberry.Map();
+
+  // Update functions
+  this.__update__ = {
+    data: function (data) {
+      Monkberry.loop(_this, for0, children0, spell_list_print_for0, data, {"value":"spell"});
+    }
+  };
+
+  // On update actions
+  this.onUpdate = function (__data__) {
+    children0.forEach(function (view) {
+      view.update(__data__);
+      view.update(view.__state__);
+    });
+  };
+
+  // Set root nodes
+  this.nodes = [document.createTextNode("Test Test "), for0];
+}
+spell_list_print.prototype = Object.create(Monkberry.prototype);
+spell_list_print.prototype.constructor = spell_list_print;
+spell_list_print.pool = [];
+spell_list_print.prototype.update = function (__data__) {
+  if (__data__.data !== undefined) {
+    this.__update__.data(__data__.data);
+  }
+  this.onUpdate(__data__);
+};
+
+/**
+ * @class
+ */
+function spell_list_print_for0() {
+  Monkberry.call(this);
+  this.__state__ = {};
+
+  // Create elements
+  var tr0 = document.createElement('tr');
+  var td1 = document.createElement('td');
+  var strong2 = document.createElement('strong');
+  var text3 = document.createTextNode('');
+  var td4 = document.createElement('td');
+  var text5 = document.createTextNode('');
+  var td6 = document.createElement('td');
+  var text7 = document.createTextNode('');
+
+  // Construct dom
+  strong2.appendChild(text3);
+  td1.appendChild(strong2);
+  td1.setAttribute("class", "spell-name mdl-data-table__cell--non-numeric");
+  td4.appendChild(text5);
+  td4.setAttribute("class", "spell-school mdl-data-table__cell--non-numeric");
+  td6.appendChild(text7);
+  td6.setAttribute("class", "spell-level");
+  tr0.appendChild(td1);
+  tr0.appendChild(td4);
+  tr0.appendChild(td6);
+
+  // Update functions
+  this.__update__ = {
+    spell: function (spell) {
+      text3.textContent = spell.name;
+      text5.textContent = spell.school;
+      text7.textContent = spell.prettyLevel;
+    }
+  };
+
+  // Set root nodes
+  this.nodes = [tr0];
+}
+spell_list_print_for0.prototype = Object.create(Monkberry.prototype);
+spell_list_print_for0.prototype.constructor = spell_list_print_for0;
+spell_list_print_for0.pool = [];
+spell_list_print_for0.prototype.update = function (__data__) {
+  if (__data__.spell !== undefined && __data__.__index__ !== undefined) {
+    this.__update__.spell(__data__.spell);
+  }
+};
+
+window.spell_list_print = spell_list_print;
+
 /**
  * @class
  */
@@ -677,10 +768,8 @@ function spell_list_if0_for0() {
 
   // Update functions
   this.__update__ = {
-    name: function (name) {
-      input3.value = name;;
-    },
     spell: function (spell) {
+      input3.value = spell.name;;
       text6.textContent = spell.name;
       text8.textContent = spell.school;
       text10.textContent = spell.prettyLevel;
@@ -695,9 +784,6 @@ 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);
   }

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-print.monk","spell-list.monk","table-sort.monk"],"names":[],"mappings":"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","file":"view.js"}

index.html

@@ -8,14 +8,15 @@
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.teal-pink.min.css" />
         <link rel="stylesheet" href="./assets/app.css" />
+        <link rel="stylesheet" href="./assets/print.css" />
     </head>
     <body>
         <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
             <header class="mdl-layout__header">
                 <div class="mdl-layout__header-row">
                     <div class="mdl-layout-spacer"></div>
-                    <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
+                    <button data-action="print" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
-                        <span class="mdl-badge" data-badge="4">
+                        <span class="mdl-badge" data-badge="0">
                             <i class="material-icons">print</i>
                             Print
                         </span>
@@ -89,6 +90,18 @@
             </div>
         </div>
 
+        <table class="printonly">
+            <thead>
+                <tr>
+                    <td>
+                        test1
+                    </td>
+                </tr>
+            </thead>
+            <tbody data-template="spell-list-print">
+            </tbody>
+        </table>
+
         <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
         <script src="./dist/jquery.min.js"></script>
         <script src="./dist/monkberry.js"></script>

src/app.js

@@ -58,6 +58,12 @@ view.table_sort.update(store.tableSort);
 view.spell_list = Monkberry.render(spell_list, el('spell-list'));
 view.spell_list.update({});
 
+/**
+ * Render Spell Print List
+ */
+view.spell_list_print = Monkberry.render(spell_list_print, el('spell-list-print'));
+view.spell_list_print.update({});
+
 /**
  * Render Spell Details
  */
@@ -286,7 +292,24 @@ $('body')
     });
 })
 .on('change', 'input[name=selected][type=checkbox]', e => {
-    console.log($('form[data-selected]').serialize());
+    let selectedSpells = $('form[data-selected]')
+        .serializeArray()
+        .map(sel => store.spells.find(spell => sel.value === spell.name))
+        .sort((a, b) => {
+            if (a.name > b.name) return 1;
+            if (a.name < b.name) return -1;
+            return 0
+        });
+    view.spell_list_print.update({data: selectedSpells});
+    if (selectedSpells.length) {
+        $('[data-action=print] [data-badge]').attr('data-badge', selectedSpells.length);
+        $('[data-action=print]').slideDown('fast');
+    } else {
+        $('[data-action=print]').slideUp('fast');
+    }
+})
+.on('click', '[data-action=print]', e => {
+    window.print();
 })
 // Article Scroll with User
 .on('scroll', '.mdl-layout__content', debounce(() => {

src/views/spell-list-print.monk

@@ -0,0 +1,16 @@
+Test Test
+{% for spell of data %}
+    <tr>
+        <td class="spell-name mdl-data-table__cell--non-numeric">
+            <strong>
+                {{ spell.name }}
+            </strong>
+        </td>
+        <td class="spell-school mdl-data-table__cell--non-numeric">
+            {{ spell.school }}
+        </td>
+        <td class="spell-level">
+            {{ spell.prettyLevel }}
+        </td>
+    </tr>
+{% endfor %}

src/views/spell-list.monk

@@ -3,7 +3,7 @@
         <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" />
+                    <input type="checkbox" name="selected" value="{{ spell.name }}" class="mdl-checkbox__input dontprop" />
                 </label>
             </td>
             <td class="spell-name mdl-data-table__cell--non-numeric">