Add multi-page support

lang/en_us.php

@@ -59,5 +59,6 @@ define("STRINGS", [
     "save" => "Save",
     "edit content" => "Edit Content",
     "delete" => "Delete",
-    "open" => "Open"
+    "open" => "Open",
+    "page" => "Page"
 ]);

lib/gencontent.php

@@ -37,12 +37,16 @@ if (defined("EDIT_MODE") && EDIT_MODE == true) {
         max-width: <?php echo ($pubdata["landscape"] == 0 ? $pagesize["width"] : $pagesize["height"]); ?>;
         min-height: <?php echo ($pubdata["landscape"] == 0 ? $pagesize["height"] : $pagesize["width"]); ?>;
     }
+    
+    .page-safe-line .bottom {
+        top: calc(<?php echo ($pubdata["landscape"] == 0 ? $pagesize["height"] : $pagesize["width"]); ?> - 5mm);
+    }
 </style>
 
 <style nonce="<?php echo $SECURE_NONCE; ?>" media="all">
 <?php
 $styles = $database->select("tile_styles", ["styleid", "css"]);
-$tiles = $database->select("tiles", ["tileid", "page", "styleid", "content", "width", "order"], ["pubid" => $pub, "ORDER" => "order"]);
+$tiles = $database->select("tiles", ["tileid", "page", "styleid", "content", "width", "order"], ["pubid" => $pub, "ORDER" => ["page", "order"]]);
 foreach ($styles as $style) {
     ?> 
         .tile-style-<?php echo $style["styleid"]; ?> {
@@ -64,10 +68,25 @@ foreach ($tiles as $tile) {
 ?>
 </style>
 
+<?php
+// Get a list of pages
+$pages = [];
+foreach ($tiles as $tile) {
+    if (!in_array($tile["page"], $pages)) {
+        $pages[] = $tile["page"];
+    }
+}
+
+foreach ($pages as $page) {
+    ?>
     <div class="pub-content">
+        <div class="page-safe-line">
+            <div class="bottom"></div>
+        </div>
         <div class="tile-bin">
             <?php
             foreach ($tiles as $tile) {
+                if ($tile["page"] == $page) {
                     ?>
                     <div class="tile" id="tile-<?php echo $tile["tileid"]; ?>" data-tileid="<?php echo $tile["tileid"]; ?>" data-page="<?php echo $tile["page"]; ?>" data-styleid="<?php echo $tile["styleid"]; ?>" data-width="<?php echo $tile["width"]; ?>" data-order="<?php echo $tile["order"]; ?>">
                         <?php
@@ -84,10 +103,13 @@ foreach ($tiles as $tile) {
                     </div>
                     <?php
                 }
+            }
             ?>
         </div>
     </div>
     <?php
+}
+
 $content = ob_get_clean();
 
 if (defined("HTML_ME") || !defined("IN_NEWSPEN")) {

pages/content.php

@@ -56,6 +56,10 @@ if ($pub === false) {
                         <label for="order" class="control-label"><i class="fa fa-sort"></i> <?php lang("order"); ?></label>
                         <input type="number" class="form-control" id="order">
                     </div>
+                    <div class="form-group">
+                        <label for="page" class="control-label"><i class="fa fa-file-o"></i> <?php lang("page"); ?></label>
+                        <input type="number" class="form-control" id="page">
+                    </div>
                     <div class="form-group">
                         <label for="style" class="control-label"><i class="fa fa-star"></i> <?php lang("style"); ?></label>
                         <select id="style" class="form-control">
@@ -95,6 +99,10 @@ if ($pub === false) {
                         <label for="order" class="control-label"><i class="fa fa-sort"></i> <?php lang("order"); ?></label>
                         <input type="number" class="form-control" id="neworder" value="1">
                     </div>
+                    <div class="form-group">
+                        <label for="page" class="control-label"><i class="fa fa-file-o"></i> <?php lang("page"); ?></label>
+                        <input type="number" class="form-control" id="newpage" value="1">
+                    </div>
                     <div class="form-group">
                         <label for="style" class="control-label"><i class="fa fa-star"></i> <?php lang("style"); ?></label>
                         <select id="newstyle" class="form-control">

static/css/content.css

@@ -4,12 +4,26 @@
     flex-wrap: wrap;
     justify-content: space-between;
     padding: 5px;
+    margin: 10mm 10mm 10mm 10mm;
 }
 
 .pub-content {
     border: 1px solid grey;
     margin: 0px auto;
     box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.75);
+    margin-bottom: 20px;
+}
+
+.page-safe-line div {
+    display: none;
+    background-color: grey;
+    position: relative;
+}
+
+.page-safe-line .bottom {
+    height: 1px;
+    left: 0;
+    right: 0;
 }
 
 .tile {
@@ -26,19 +40,25 @@
 }
 
 @media print {
+    @page {
+        margin: 10mm 10mm 10mm 10mm;
+    }
+    .tile-bin {
+        margin: 0px;
+        overflow: visible;
+    }
     .pub-content {
-        height: 100%;
-        width: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-        margin: 0;
         z-index: 999999;
         border: 0px;
         box-shadow: none;
+        overflow: visible;
     }
 
     .btn-group, .footer {
         display: none;
     }
+    
+    .page-safe-line {
+        display: none;
+    }
 }

static/js/content.js

@@ -94,9 +94,11 @@ $("#edit-tile-save-btn").click(function () {
     var tileid = $("#edit-tile-save-btn").data("tile");
     var oldstyle = $("#tile-" + tileid).data("styleid");
     var oldorder = $("#tile-" + tileid).data("order");
+    var oldpage = $("#tile-" + tileid).data("page");
     var newstyle = $("#style").val();
     var width = $("#width").val();
     var order = $("#order").val();
+    var page = $("#page").val();
     $("#tile-" + tileid).data("styleid", newstyle);
     $("#tile-" + tileid + "-content").removeClass("tile-style-" + oldstyle);
     $("#tile-" + tileid + "-content").addClass("tile-style-" + newstyle);
@@ -105,8 +107,9 @@ $("#edit-tile-save-btn").click(function () {
     $("#tile-" + tileid).css("flex-basis", ((width * 1.0) / (pubcolumns * 1.0) * 100) + "%");
     $("#tile-" + tileid).data("order", order);
     $("#tile-" + tileid).css("order", order);
+    $("#tile-" + tileid).data("page", page);
     saveTile(tileid);
-    if (oldorder != order) {
+    if (oldorder != order || oldpage != page) {
         // refresh page because the order might not look right
         safeReload();
     }
@@ -126,10 +129,11 @@ $("#edit-tile-del-btn").click(function () {
 });
 
 $("#new-tile-save-btn").click(function () {
+    var page = $("#newpage").val();
     var style = $("#newstyle").val();
     var width = $("#newwidth").val();
     var order = $("#neworder").val();
-    newTile(1, style, width, order);
+    newTile(page, style, width, order);
 });
 
 $('#tile-options-modal').on('show.bs.modal', function (event) {
@@ -140,6 +144,7 @@ $('#tile-options-modal').on('show.bs.modal', function (event) {
     modal.find('#width').val(tile.data("width"));
     modal.find('#order').val(tile.data("order"));
     modal.find('#style').val(tile.data("styleid"));
+    modal.find('#page').val(tile.data("page"));
     modal.find('#edit-tile-save-btn').data("tile", tileid);
 });