From 88f11ab9355b7ac920dbe4584ebeea45ae57eca4 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Fri, 1 Dec 2017 23:47:52 -0700
Subject: [PATCH] Add multi-page support

---
 lang/en_us.php         |  3 +-
 lib/gencontent.php     | 70 +++++++++++++++++++++++++++---------------
 pages/content.php      |  8 +++++
 static/css/content.css | 32 +++++++++++++++----
 static/js/content.js   |  9 ++++--
 5 files changed, 89 insertions(+), 33 deletions(-)

diff --git a/lang/en_us.php b/lang/en_us.php
index c92d9d3..0b585fc 100644
--- a/lang/en_us.php
+++ b/lang/en_us.php
@@ -59,5 +59,6 @@ define("STRINGS", [
     "save" => "Save",
     "edit content" => "Edit Content",
     "delete" => "Delete",
-    "open" => "Open"
+    "open" => "Open",
+    "page" => "Page"
 ]);
\ No newline at end of file
diff --git a/lib/gencontent.php b/lib/gencontent.php
index 2e8e7d9..a6293ea 100644
--- a/lib/gencontent.php
+++ b/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,30 +68,48 @@ foreach ($tiles as $tile) {
 ?>
 </style>
 
-<div class="pub-content">
-    <div class="tile-bin">
-        <?php
-        foreach ($tiles as $tile) {
-            ?>
-            <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
-                if (defined("EDIT_MODE") && EDIT_MODE == true) {
-                    ?><div class="btn-group btn-group-sm">
-                        <button type="button" class="btn btn-default edit-btn" data-tile="<?php echo $tile["tileid"]; ?>"><i class="fa fa-pencil"></i> <?php lang("edit"); ?></button>
-                        <button type="button" class="btn btn-default save-btn" data-tile="<?php echo $tile["tileid"]; ?>"><i class="fa fa-save"></i> <?php lang("save"); ?></button>
-                        <button type="button" class="btn btn-default opts-btn" data-tile="<?php echo $tile["tileid"]; ?>" data-toggle="modal" data-target="#tile-options-modal"><i class="fa fa-gear"></i> <?php lang("options"); ?></button>
-                    </div>
-                <?php } ?>
-                <div id="tile-<?php echo $tile["tileid"]; ?>-content" class="tile-style-<?php echo $tile["styleid"]; ?>">
-                    <div class="tile-html"><?php echo $tile["content"]; ?></div>
-                </div>
-            </div>
-            <?php
-        }
-        ?>
-    </div>
-</div>
 <?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
+                        if (defined("EDIT_MODE") && EDIT_MODE == true) {
+                            ?><div class="btn-group btn-group-sm">
+                                <button type="button" class="btn btn-default edit-btn" data-tile="<?php echo $tile["tileid"]; ?>"><i class="fa fa-pencil"></i> <?php lang("edit"); ?></button>
+                                <button type="button" class="btn btn-default save-btn" data-tile="<?php echo $tile["tileid"]; ?>"><i class="fa fa-save"></i> <?php lang("save"); ?></button>
+                                <button type="button" class="btn btn-default opts-btn" data-tile="<?php echo $tile["tileid"]; ?>" data-toggle="modal" data-target="#tile-options-modal"><i class="fa fa-gear"></i> <?php lang("options"); ?></button>
+                            </div>
+                        <?php } ?>
+                        <div id="tile-<?php echo $tile["tileid"]; ?>-content" class="tile-style-<?php echo $tile["styleid"]; ?>">
+                            <div class="tile-html"><?php echo $tile["content"]; ?></div>
+                        </div>
+                    </div>
+                    <?php
+                }
+            }
+            ?>
+        </div>
+    </div>
+    <?php
+}
+
 $content = ob_get_clean();
 
 if (defined("HTML_ME") || !defined("IN_NEWSPEN")) {
diff --git a/pages/content.php b/pages/content.php
index a41dc83..2b90d2d 100644
--- a/pages/content.php
+++ b/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">
diff --git a/static/css/content.css b/static/css/content.css
index d913e99..04c91b4 100644
--- a/static/css/content.css
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/static/js/content.js b/static/js/content.js
index f10a219..3fefdbf 100644
--- a/static/js/content.js
+++ b/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);
 });