Update generator

generator/css/card-size.css

@@ -41,6 +41,11 @@ page[size="Letter"] {
     height: 278mm; /* full: 279.4mm (11.0in) */
 }
 
+page[size="25x35"] {
+    width: 63.6mm;
+    height: 89.0mm;
+}
+
 /* Default card size */
 .card {
     width:2.5in;
@@ -54,6 +59,10 @@ page[size="Letter"] {
     min-width:2.25in;
     height:3.5in;
 }
+.card-size-225x35 .card-back-icon {
+    width: 1in;
+    height: 1in;
+}
 
 /* Poker / Magic card size */
 .card-size-25x35 {
@@ -61,6 +70,10 @@ page[size="Letter"] {
     min-width:2.5in;
     height:3.5in;
 }
+.card-size-25x35 .card-back-icon {
+    width: 1in;
+    height: 1in;
+}
 
 /* Poker / Magic card size */
 .card-size-35x50 {
@@ -68,6 +81,10 @@ page[size="Letter"] {
     min-width:3.5in;
     height:5.0in;
 }
+.card-size-35x50 .card-back-icon {
+    width: 1.5in;
+    height: 1.5in;
+}
 
 /* Landscape big card */
 .card-size-75x50 {
@@ -75,6 +92,10 @@ page[size="Letter"] {
     min-width:7.5in;
     height:5.0in;
 }
+.card-size-75x50 .card-back-icon {
+    width: 2in;
+    height: 2in;
+}
 
 .page[size="A4"] .card-size-full3x3 {
     width:69mm;

generator/css/cards.css

@@ -26,13 +26,13 @@
     background-color: white;
     border-radius: 4mm;
     border-color: inherit;
-    margin: 2mm;
+    margin: 1mm;
     flex: 1;
     display: flex;
 }
 
 .card-back-inner {
-    margin: 2mm;
+    margin: 3mm;
     border: 1mm solid;
     border-color: inherit;
     border-radius: 4mm;
@@ -45,8 +45,8 @@
 }
 
 .card-back-icon {
-    width: 30mm;
-    height: 30mm;
+    width: 1in;
+    height: 1in;
     border: 4mm solid;
     border-color: inherit;
     border-radius: 4mm;
@@ -130,7 +130,7 @@
 .card-subtitle {
     height: 18px;
     line-height: 18px;
-    margin-bottom: 1mm;
+    margin-bottom: 0.0em;
     font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
     font-size: 10pt;
     font-style: italic;
@@ -158,26 +158,29 @@
     font-weight: normal;
     letter-spacing: 1px;
     margin: 0;
-    margin-bottom: 0.3em;
+    margin-bottom: -0.2em;
     border-color: inherit;
 }
 
 .card-p {
-    margin-top: 0.0em;
-    margin-bottom: 0.5em;
-    font-size: inherit;
+
 }
 
 .card-fill {flex:1;}
 
 .card-description-line {
-    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+    margin-bottom: 0.0em;
     font-size: inherit;
     color: black;
 }
 .card-description-name {
     display: inline;
     font-size: inherit;
+    font-style: italic;
+}
+.card-description-name::after {
+    content: ".";
 }
 .card-description-text {
     display: inline;
@@ -186,8 +189,8 @@
 .card-ruler {
     width: 100%;
     height: 1.0mm;
-    margin-top: 0.5em;
-    margin-bottom: 0.2em;
+    margin-top: 0.3em;
+    margin-bottom: 0.3em;
 }
 
 .card-bullet-line {
@@ -203,8 +206,4 @@
     margin-bottom: 0;
     margin-top: 0;
     font-size: inherit;
-}
-
-.card-element:last-of-type{
-    margin-bottom: 0;
 }

generator/generate.html

@@ -45,8 +45,10 @@
         <div class="row">
             <div class="col-md-12 col-lg-3">
                 <!--<h3>Menu</h3>-->
-                <form role="form" class="form-horizontal">
+                <form style="display:none" id="file-load-form">
                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
+                </form>
+                <form role="form" class="form-horizontal">
                     <div class="form-group">
                         <div class="col-sm-6">
                             <button type="button" class="btn btn-info btn-block" id="button-help">Open Help</button>
@@ -90,6 +92,7 @@
                             <select class="form-control" id="page-size" data-option="page_size">
                                 <option value="A4" selected>A4</option>
                                 <option value="Letter">US letter</option>
+                                <option value="25x35">2.5&quot; x 3.5&quot;</option>
                             </select>
                         </div>
                     </div>
@@ -116,6 +119,16 @@
                             <input type="text" id="page-columns" class="form-control" data-option="page_columns" value="3">
                         </div>
                     </div>
+                    <div class="form-group">
+                        <label for="card-arrangement" class="col-sm-4 control-label">Arrangement</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" id="card-arrangement" data-option="card_arrangement">
+                                <option value="doublesided" selected>Double sided printing</option>
+                                <option value="front_only">Front side only</option>
+                                <option value="side_by_side">Side by side</option>
+                            </select>
+                        </div>
+                    </div>
                 </form>
                 <h3>Default values</h3>
                 <form role="form" class="form-horizontal">
@@ -134,7 +147,7 @@
                         <div class="col-sm-10">
                             <div class="input-group">
                                 <select id="default_color_selector" class="colorselector-data"></select>
-                                <input type="text" id="default-color" class="form-control" placeholder="Card color" data-property="color">
+                                <input type="text" id="default-color" class="form-control" placeholder="Card color" data-property="color" value="black">
                             </div>
                         </div>
                     </div>

generator/js/cards.js

@@ -9,6 +9,7 @@ function card_default_options() {
         page_size: "A4",
         page_rows: 3,
         page_columns: 3,
+        card_arrangement: "doublesided",
         card_size: "25x35",
         icon_inline: true
     }
@@ -137,6 +138,10 @@ function card_element_unknown(params, card_data, options) {
     return '<div>Unknown element: ' + params.join('<br />') + '</div>';
 }
 
+function card_element_empty(params, card_data, options) {
+    return '';
+}
+
 var card_element_generators = {
     subtitle: card_element_subtitle,
     property: card_element_property,
@@ -146,7 +151,8 @@ var card_element_generators = {
     text: card_element_text,
     bullet: card_element_bullet,
     fill: card_element_fill,
-    section: card_element_section
+    section: card_element_section,
+    disabled: card_element_empty
 };
 
 // ============================================================================
@@ -273,12 +279,30 @@ function card_pages_add_padding(cards, options) {
     }
 }
 
+function card_pages_interleave_cards(front_cards, back_cards, options) {
+    var result = [];
+    var i = 0;
+    while (i < front_cards.length) {
+        result.push(front_cards[i]);
+        result.push(back_cards[i]);
+        if (options.page_columns > 2) {
+            result.push(card_generate_empty(options.page_columns - 2, options));
+        }
+        ++i;
+    }
+    return result;
+}
+
 function card_pages_wrap(pages, options) {
     var size = options.page_size || "A4";
 
     var result = "";
     for (var i = 0; i < pages.length; ++i) {
-        result += '<page class="page page-preview" size="' + size + '">\n';
+        var style = "";
+        if ((options.card_arrangement == "doublesided") &&  (i % 2 == 1)) {
+            style += 'style="background-color:'+options.default_color+'"';
+        }
+        result += '<page class="page page-preview" size="' + size + '" ' + style + '>\n';
         result += pages[i].join("\n");
         result += '</page>\n';
     }
@@ -301,21 +325,31 @@ function card_pages_generate_html(card_data, options) {
         back_cards = back_cards.concat(card_repeat(back, count));
     });
 
-    // Add padding cards so that the last page is full of cards
-    front_cards = card_pages_add_padding(front_cards, options);
-    back_cards = card_pages_add_padding(back_cards, options);
-
-    // Split cards to pages
-    var front_pages = card_pages_split(front_cards, rows, cols);
-    var back_pages = card_pages_split(back_cards, rows, cols);
-
-    // Shuffle back cards so that they line up with their corresponding front cards
-    back_pages = back_pages.map(function (page) {
-        return cards_pages_flip_left_right(page, rows, cols);
-    });
-
-    // Interleave front and back pages so that we can print double-sided
-    var pages = card_pages_merge(front_pages, back_pages);
+    var pages = [];
+    if (options.card_arrangement == "doublesided") {
+        // Add padding cards so that the last page is full of cards
+        front_cards = card_pages_add_padding(front_cards, options);
+        back_cards = card_pages_add_padding(back_cards, options);
+
+        // Split cards to pages
+        var front_pages = card_pages_split(front_cards, rows, cols);
+        var back_pages = card_pages_split(back_cards, rows, cols);
+
+        // Shuffle back cards so that they line up with their corresponding front cards
+        back_pages = back_pages.map(function (page) {
+            return cards_pages_flip_left_right(page, rows, cols);
+        });
+
+        // Interleave front and back pages so that we can print double-sided
+        pages = card_pages_merge(front_pages, back_pages);
+    } else if (options.card_arrangement == "front_only") {
+        var cards = card_pages_add_padding(front_cards, options);
+        pages = card_pages_split(cards, rows, cols);
+    } else if (options.card_arrangement == "side_by_side") {
+        var cards = card_pages_interleave_cards(front_cards, back_cards, options);
+        cards = card_pages_add_padding(cards, options);
+        pages = card_pages_split(cards, rows, cols);
+    }
 
     // Wrap all pages in a <page> element
     return card_pages_wrap(pages, options);

generator/js/ui.js

@@ -63,7 +63,7 @@ function ui_clear_all() {
 }
 
 function ui_load_files(evt) {
-    ui_clear_all();
+    // ui_clear_all();
 
     var files = evt.target.files;
 
@@ -77,6 +77,9 @@ function ui_load_files(evt) {
 
         reader.readAsText(f);
     }
+
+    // Reset file input
+    $("#file-load-form")[0].reset();
 }
 
 function ui_add_cards(data) {
@@ -385,6 +388,7 @@ $(document).ready(function () {
     $("#page-size").change(ui_change_option);
     $("#page-rows").change(ui_change_option);
     $("#page-columns").change(ui_change_option);
+    $("#card-arrangement").change(ui_change_option);
     $("#card-size").change(ui_change_option);
 
     $("#default-color").change(ui_change_default_color);