Finish tile editor (close #2)

action.php

@@ -61,6 +61,15 @@ switch ($VARS['action']) {
         if ($insert) {
             $data['uid'] = $_SESSION['uid'];
             $database->insert('publications', $data);
+            // Make a header to get started
+            $database->insert('tiles', [
+                "pubid" => $database->id(),
+                "page" => 1,
+                "styleid" => 1,
+                "content" => "<h1>" . $VARS['name'] . "</h1>",
+                "width" => $VARS['columns'],
+                "order" => 0]
+            );
         } else {
             $database->update('publications', $data, ['pubid' => $VARS['pubid']]);
         }
@@ -68,6 +77,7 @@ switch ($VARS['action']) {
         returnToSender("pub_saved");
     case "deletepub":
         if ($database->has('publications', ['pubid' => $VARS['pubid']])) {
+            $database->delete('tiles', ['pubid' => $VARS['pubid']]);
             $database->delete('publications', ['pubid' => $VARS['pubid']]);
             returnToSender("pub_deleted");
         }

lib/gencontent.php

@@ -16,6 +16,15 @@ if (!defined("IN_NEWSPEN")) {
 }
 ob_end_flush();
 ob_start();
+
+if (defined("EDIT_MODE") && EDIT_MODE == true) {
+    ?>
+    <script nonce="<?php echo $SECURE_NONCE; ?>">
+        var pubid = <?php echo $pub; ?>;
+        var pubcolumns = <?php echo $pubdata["columns"]; ?>;
+    </script>
+    <?php
+}
 ?>
 <style nonce="<?php echo $SECURE_NONCE; ?>">
 <?php $pubcss = $database->get("pub_styles", "css", ["styleid" => $pubdata["styleid"]]); ?>

pages/content.php

@@ -72,15 +72,53 @@ if ($pub === false) {
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal"><?php lang("close"); ?></button>
-                    <button type="button" class="btn btn-primary" id="modal-save-btn" data-tile=""><?php lang("save"); ?></button>
+                    <button type="button" class="btn btn-primary" id="edit-tile-save-btn" data-tile=""><?php lang("save"); ?></button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="new-tile-modal" tabindex="-1" role="dialog" aria-labelledby="new-tile-title">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="new-tile-title"><?php lang("new tile"); ?></h4>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="width" class="control-label"><i class="fa fa-text-width"></i> <?php lang("width"); ?></label>
+                        <input type="number" class="form-control" id="newwidth" value="1">
+                    </div>
+                    <div class="form-group">
+                        <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="style" class="control-label"><i class="fa fa-star"></i> <?php lang("style"); ?></label>
+                        <select id="newstyle" class="form-control">
+                            <?php
+                            $styles = $database->select("tile_styles", ['styleid', 'stylename']);
+                            foreach ($styles as $s) {
+                                $si = $s['styleid'];
+                                $sn = $s['stylename'];
+                                echo "<option value=\"$si\">$sn</option>\n";
+                            }
+                            ?>
+                        </select>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal"><?php lang("close"); ?></button>
+                    <button type="button" class="btn btn-primary" id="new-tile-save-btn" data-tile=""><?php lang("new tile"); ?></button>
                 </div>
             </div>
         </div>
     </div>
 
     <div class="btn-group mgn-btm-10px">
-        <div class="btn btn-success" id="new_tile_btn"><i class="fa fa-plus"></i> <?php lang("new tile"); ?></div>
+        <div class="btn btn-success" id="new_tile_btn" data-toggle="modal" data-target="#new-tile-modal"><i class="fa fa-plus"></i> <?php lang("new tile"); ?></div>
-        <a class="btn btn-primary" id="preview_btn" href="lib/gencontent.php?pubid=1" target="_BLANK"><i class="fa fa-search"></i> <?php lang("preview"); ?></a>
+        <a class="btn btn-primary" id="preview_btn" href="lib/gencontent.php?pubid=<?php echo $pub; ?>" target="_BLANK"><i class="fa fa-search"></i> <?php lang("preview"); ?></a>
     </div>
 
     <div class="pages-box">

pages/editpub.php

@@ -21,7 +21,7 @@ if (!is_empty($VARS['id'])) {
             $cloning = true;
         }
         $pubdata = $database->select(
-                    'publications', [
+                        'publications', [
                     'pubname (name)',
                     'pubdate',
                     'styleid',
@@ -117,10 +117,10 @@ if (!is_empty($VARS['id'])) {
 
         <div class="panel-footer">
             <button type="submit" class="btn btn-success"><i class="fa fa-floppy-o"></i> <?php lang("save"); ?></button>
-            &nbsp; <a href="app.php?page=content&pubid=<?php echo htmlspecialchars($VARS['id']); ?>" class="btn btn-primary"><i class="fa fa-pencil"></i> <?php lang('edit content'); ?></a>
             <?php
             if ($editing && !$cloning) {
                 ?>
+                &nbsp; <a href="app.php?page=content&pubid=<?php echo htmlspecialchars($VARS['id']); ?>" class="btn btn-primary"><i class="fa fa-pencil"></i> <?php lang('edit content'); ?></a>
                 <a href="action.php?action=deletepub&source=home&pubid=<?php echo htmlspecialchars($VARS['id']); ?>" class="btn btn-danger btn-xs pull-right mgn-top-8px"><i class="fa fa-times"></i> <?php lang('delete'); ?></a>
                 <?php
             }

static/css/content.css

@@ -9,6 +9,7 @@
     max-width: 8.5in;
     margin: 0px auto;
     box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.75);
+    min-height: 11in;
 }
 
 .tile {
@@ -17,6 +18,7 @@
 
 .tile-html {
     font-family: sans-serif;
+    min-height: 10px;
 }
 
 @media print {

static/js/content.js

@@ -14,9 +14,90 @@ $(".save-btn").click(function () {
     saveTile(tileid);
 });
 
-$("#modal-save-btn").click(function () {
+var tobesaved = 0;
-    var tileid = $("#modal-save-btn").data("tile");
+
+function makeNewTileAfterWait(page, style, width, order) {
+    setTimeout(function () {
+        if (tobesaved > 0) {
+            makeNewTileAfterWait(page, style, width, order);
+        } else {
+            $.post("action.php", {
+                action: "savetile",
+                pubid: pubid,
+                page: page,
+                styleid: style,
+                width: width,
+                order: order,
+                content: ""
+            }, function (d) {
+                window.location.href = window.location.href;
+            });
+        }
+    }, 100);
+}
+
+/**
+ * Make a new tile after saving any tiles being edited.
+ * @param {type} page
+ * @param {type} style
+ * @param {type} width
+ * @param {type} order
+ * @returns {undefined}
+ */
+function newTile(page, style, width, order) {
+    // Make sure everything is saved before loading page
+    tobesaved = 0;
+    $(".tile").each(function (i) {
+        var tileid = $(this).data("tileid");
+        if (tileEditing(tileid)) {
+            tobesaved++;
+            saveTile(tileid, function () {
+                tobesaved--;
+            });
+        }
+    });
+    makeNewTileAfterWait(page, style, width, order);
+}
+
+function reloadAfterSaveWait() {
+    setTimeout(function () {
+        if (tobesaved > 0) {
+            reloadAfterWait();
+        } else {
+            window.location.href = window.location.href;
+        }
+    }, 100);
+}
+
+function safeReload() {
+    tobesaved = 0;
+    $(".tile").each(function (i) {
+        var tileid = $(this).data("tileid");
+        if (tileEditing(tileid)) {
+            tobesaved++;
+            saveTile(tileid, function () {
+                tobesaved--;
+            });
+        }
+    });
+    reloadAfterSaveWait();
+}
+
+/**
+ * Returns true if the tile is being edited, 
+ * false otherwise.
+ * 
+ * @param number tileid
+ * @returns boolean
+ */
+function tileEditing(tileid) {
+    return $("#tile-" + tileid + "-content .tile-html").css("display") == "none";
+}
+
+$("#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 newstyle = $("#style").val();
     var width = $("#width").val();
     var order = $("#order").val();
@@ -24,13 +105,25 @@ $("#modal-save-btn").click(function () {
     $("#tile-" + tileid + "-content").removeClass("tile-style-" + oldstyle);
     $("#tile-" + tileid + "-content").addClass("tile-style-" + newstyle);
     $("#tile-" + tileid).data("width", width);
-    $("#tile-" + tileid).css("width", width);
+    $("#tile-" + tileid).css("width", ((width * 1.0) / (pubcolumns * 1.0) * 100) + "%");
+    $("#tile-" + tileid).css("flex-basis", ((width * 1.0) / (pubcolumns * 1.0) * 100) + "%");
     $("#tile-" + tileid).data("order", order);
     $("#tile-" + tileid).css("order", order);
     saveTile(tileid);
+    if (oldorder != order) {
+        // refresh page because the order might not look right
+        safeReload();
+    }
     $("#tile-options-modal").modal('hide');
 });
 
+$("#new-tile-save-btn").click(function () {
+    var style = $("#newstyle").val();
+    var width = $("#newwidth").val();
+    var order = $("#neworder").val();
+    newTile(1, style, width, order);
+});
+
 $('#tile-options-modal').on('show.bs.modal', function (event) {
     var button = $(event.relatedTarget);
     var tileid = button.data('tile');
@@ -39,10 +132,10 @@ $('#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('#modal-save-btn').data("tile", tileid);
+    modal.find('#edit-tile-save-btn').data("tile", tileid);
 });
 
-function saveTile(tileid) {
+function saveTile(tileid, callback) {
     var tile = $("#tile-" + tileid);
     var tile_content = $("#tile-" + tileid + "-content .tile-html");
     var page = tile.data("page");
@@ -50,9 +143,9 @@ function saveTile(tileid) {
     var width = tile.data("width");
     var order = tile.data("order");
     var content = "";
-    if (tile_content.css("display") == "none") {
+    if (tileEditing(tileid)) {
-       content = tile_content.summernote("code");
+        content = tile_content.summernote("code");
-       tile_content.summernote("destroy");
+        tile_content.summernote("destroy");
     } else {
         content = tile_content.html();
     }
@@ -65,6 +158,9 @@ function saveTile(tileid) {
         width: width,
         order: order,
         content: content
+    }, function (resp) {
+        if (null != callback) {
+            callback();
+        }
     });
-
 }