Add complex component editing (close #5), improve editor, add more theme functions, add URL options (close #6)

action.php

@@ -41,10 +41,19 @@ switch ($VARS['action']) {
             die(json_encode(["status" => "ERROR", "msg" => "Invalid page or site"]));
         }
         foreach ($content as $name => $value) {
-            if ($database->has("components", ["AND" => ["pageid" => $pageid, "name" => $name]])) {
-                $database->update("components", ["content" => $value], ["AND" => ["pageid" => $pageid, "name" => $name]]);
+            if (is_array($value)) {
+                $json = json_encode($value);
+                if ($database->has("complex_components", ["AND" => ["pageid" => $pageid, "name" => $name]])) {
+                    $database->update("complex_components", ["content" => $json], ["AND" => ["pageid" => $pageid, "name" => $name]]);
+                } else {
+                    $database->insert("complex_components", ["name" => $name, "content" => $json, "pageid" => $pageid]);
+                }
             } else {
-                $database->insert("components", ["name" => $name, "content" => $value, "pageid" => $pageid]);
+                if ($database->has("components", ["AND" => ["pageid" => $pageid, "name" => $name]])) {
+                    $database->update("components", ["content" => $value], ["AND" => ["pageid" => $pageid, "name" => $name]]);
+                } else {
+                    $database->insert("components", ["name" => $name, "content" => $value, "pageid" => $pageid]);
+                }
             }
         }
         exit(json_encode(["status" => "OK"]));

lang/en_us.php

@@ -30,10 +30,11 @@ define("STRINGS", [
     "captcha error" => "There was a problem with the CAPTCHA (robot test).  Try again.",
     "actions" => "Actions",
     "home" => "Home",
-    "more" => "More",
+    "editor" => "Editor",
     "sites" => "Sites",
     "theme" => "Theme",
     "name" => "Name",
+    "new site" => "New Site",
     "site name" => "Site Name",
     "url" => "URL",
     "editing site" => "Editing {site}",
@@ -41,5 +42,16 @@ define("STRINGS", [
     "single page" => "Single page",
     "multiple page" => "Multiple page",
     "templates" => "Templates",
-    "color styles" => "Color styles"
+    "color styles" => "Color styles",
+    "save" => "Save",
+    "edit" => "Edit",
+    "view" => "View",
+    "cancel" => "Cancel",
+    "save needed" => "Press Save to see recent changes.",
+    "saved" => "Saved",
+    "icon" => "Icon",
+    "link" => "Link",
+    "text" => "Text",
+    "select page or enter url" => "Select a page or enter URL",
+    "edit component" => "Edit component"
 ]);

lib/requiredpublic.php

@@ -85,6 +85,12 @@ function getdatabase() {
 
 function getsiteid() {
     global $database;
+    if (isset($_GET['siteid'])) {
+        $id = preg_replace("/[^0-9]/", '', $_GET['siteid']);
+        if ($database->has('sites', ["siteid" => $id])) {
+            return $id;
+        }
+    }
     return $database->get("sites", "siteid");
 }
 
@@ -104,6 +110,9 @@ function getpageslug() {
 function getpagetemplate() {
     global $database;
     $slug = getpageslug();
+    if (isset($_GET['template'])) {
+        return preg_replace("/[^A-Za-z0-9]/", '', $_GET['template']);
+    }
     if (!is_null($slug)) {
         return $database->get("pages", "template", ["AND" => ["slug" => $slug, "siteid" => getsiteid()]]);
     }

lib/themefunctions.php

@@ -63,7 +63,19 @@ function get_page_url($echo = true, $slug = null) {
     if (isset($_GET['edit'])) {
         $edit = "&edit";
     }
-    $url = get_site_url(false) . "index.php?id=$slug$edit";
+    $theme = "";
+    if (isset($_GET['theme'])) {
+        $theme = "&theme=" . preg_replace("/[^A-Za-z0-9]/", '', $_GET['theme']);
+    }
+    $template = "";
+    if (isset($_GET['template'])) {
+        $template = "&template=" . preg_replace("/[^A-Za-z0-9]/", '', $_GET['template']);
+    }
+    $siteid = "";
+    if (isset($_GET['siteid'])) {
+        $siteid = "&siteid=" . preg_replace("/[^0-9]/", '', $_GET['siteid']);
+    }
+    $url = get_site_url(false) . "index.php?id=$slug$edit$theme$template$siteid";
     if ($echo) {
         echo $url;
     } else {
@@ -77,7 +89,10 @@ function get_component($name, $context = null, $echo = true) {
         $context = get_page_slug(false);
     }
     $pageid = $db->get("pages", "pageid", ["AND" => ["slug" => $context, "siteid" => getsiteid()]]);
-    $content = "Edit me";
+    $content = "";
+    if (isset($_GET['edit'])) {
+        $content = "Click here to edit me";
+    }
     if ($db->has("components", ["AND" => ["pageid" => $pageid, "name" => $name]])) {
         $content = $db->get("components", "content", ["AND" => ["pageid" => $pageid, "name" => $name]]);
     }
@@ -111,13 +126,42 @@ function get_complex_component($name, $context = null) {
         $context = get_page_slug(false);
     }
     $pageid = $db->get("pages", "pageid", ["AND" => ["slug" => $context, "siteid" => getsiteid()]]);
-    $content = null;
+    $content = ["icon" => "", "link" => "", "text" => ""];
     if ($db->has("complex_components", ["AND" => ["pageid" => $pageid, "name" => $name]])) {
         $content = json_decode($db->get("complex_components", "content", ["AND" => ["pageid" => $pageid, "name" => $name]]), true);
     }
     return $content;
 }
 
+function get_escaped_json($json, $echo = true) {
+    $text = htmlspecialchars(json_encode($json), ENT_QUOTES, 'UTF-8');
+    if ($echo) {
+        echo $text;
+    } else {
+        return $text;
+    }
+}
+
+/**
+ * Detects if a string is a URL or a page slug, and returns something usable for href
+ * @param string $str
+ * @param boolean $echo
+ * @return string
+ */
+function get_url_or_slug($str, $echo = true) {
+    $url = $str;
+    if ($str == "") {
+        $url = "#";
+    } else if (strpos($str, "http") !== 0) {
+        $url = get_page_url(false, $str);
+    }
+    if ($echo) {
+        echo $url;
+    } else {
+        return $url;
+    }
+}
+
 function get_page_content($slug = null) {
     get_component("content", $slug);
 }
@@ -143,10 +187,10 @@ function get_theme_color_url($echo = true) {
     if ($site["color"] == null) {
         $site["color"] = "default";
     }
-    if (!file_exists(__DIR__ . "/../public/themes/" . $site["theme"] . "/colors/" . $site['color'])) {
+    if (!file_exists(__DIR__ . "/../public/themes/" . SITE_THEME . "/colors/" . $site['color'])) {
         $site['color'] = "default";
     }
-    $url = $site["url"] . "themes/" . $site["theme"] . "/colors/" . $site["color"];
+    $url = $site["url"] . "themes/" . SITE_THEME . "/colors/" . $site["color"];
     if ($echo) {
         echo $url;
     } else {

pages/editor.php

@@ -40,10 +40,60 @@ if (!is_empty($VARS['siteid'])) {
     die();
 }
 ?>
-<div class="row mb-2">
+
+<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="editLabel"><?php lang("edit component"); ?></h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" id="editModalBody">
+                <div class="form-group d-none" id="iconEdit">
+                    <label><i class="fas fa-paint-brush"></i> <?php lang("icon"); ?></label>
+
+                </div>
+                <div class="form-group" id="linkEdit">
+                    <label><i class="fas fa-link"></i> <?php lang("link"); ?></label>
+                    <select id="linkPage" class="form-control">
+                        <option value=""><?php lang("select page or enter url"); ?></option>
+                        <?php
+                        foreach ($pagedata as $p) {
+                            echo "<option value=\"" . $p['slug'] . "\">" . $p['title'] . ' (' . $p['slug'] . ')' . "</option>\n";
+                        }
+                        ?>
+                    </select>
+                    <input type="text" id="linkBox" class="form-control" placeholder="http://example.com" />
+                </div>
+                <div class="form-group" id="textEdit">
+                    <label><i class="fas fa-font"></i> <?php lang("text"); ?></label>
+                    <input type="text" id="textBox" class="form-control" placeholder="Edit me" />
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal"><?php lang("cancel"); ?></button>
+                <button type="button" class="btn btn-success" id="editModalSave"><i class="fas fa-save"></i> <?php lang("save"); ?></button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row mb-2 justify-content-between">
     <div class="col-12 col-sm-6 col-md-4">
-        <div class="btn btn-success" id="savebtn">
-            <i class="fas fa-save"></i> <?php lang("save"); ?>
+        <div class="btn-group">
+            <div class="btn btn-success" id="savebtn">
+                <i class="fas fa-save"></i> <?php lang("save"); ?>
+            </div>
+            <a class="btn btn-info" id="viewbtn" target="_BLANK" href="public/index.php?id=<?php echo $slug; ?>&siteid=<?php echo $VARS['siteid']; ?>">
+                <i class="fas fa-eye"></i> <?php lang("view"); ?>
+            </a>
+        </div>
+        <span class="badge badge-success d-none" id="savedBadge"><i class="fas fa-check"></i> <?php lang("saved"); ?></span>
+        <div id="reloadprompt" class="badge badge-info d-none">
+            <i class="fas fa-sync-alt"></i>
+            <?php lang("save needed"); ?>
         </div>
     </div>
     <form method="GET" action="app.php" class="col-12 col-sm-6 col-md-4">
@@ -68,4 +118,4 @@ if (!is_empty($VARS['siteid'])) {
     </form>
 </div>
 
-<iframe id="editorframe" src="public/index.php?id=<?php echo $slug; ?>&edit"></iframe>
+<iframe id="editorframe" src="public/index.php?id=<?php echo $slug; ?>&edit&siteid=<?php echo $VARS['siteid']; ?>"></iframe>

public/index.php

@@ -12,7 +12,13 @@ if (!getsiteid()) {
     sendError("No website has been created yet.  Please open " . SITE_TITLE . " and make one.");
 }
 
-$theme = $database->get("sites", "theme", ["siteid" => getsiteid()]);
+if (isset($_GET['theme']) && file_exists(__DIR__ . "/themes/" . preg_replace("/[^A-Za-z0-9]/", '', $_GET['theme']) . "/theme.json")) {
+    $theme = preg_replace("/[^A-Za-z0-9]/", '', $_GET['theme']);
+} else {
+    $theme = $database->get("sites", "theme", ["siteid" => getsiteid()]);
+}
+
+define("SITE_THEME", $theme);
 
 $template = getpagetemplate();
 if (file_exists(__DIR__ . "/themes/$theme/$template.php")) {

static/css/editor.css

@@ -32,4 +32,11 @@ button.note-btn, .note-modal button {
     -moz-appearance: checkbox;
     -webkit-appearance: checkbox;
     -ms-appearance: checkbox;
+}
+
+.sw-editbtn {
+    border: 2px dashed red !important;
+    color: black !important;
+    background: white !important;
+    border-radius: 0px;
 }

static/js/editor.js

@@ -12,6 +12,13 @@ function saveEdits() {
     $(".sw-text-input").each(function (e) {
         components[$(this).data("component")] = $(this).val();
     });
+    $(".sw-complex").each(function (e) {
+        if (typeof $(this).data("json") === "string") {
+            components[$(this).data("component")] = JSON.parse($(this).data("json"));
+        } else {
+            components[$(this).data("component")] = $(this).data("json");
+        }
+    });
     var output = {
         slug: page_slug,
         site: site_id,
@@ -19,6 +26,7 @@ function saveEdits() {
     };
     //console.log(output);
     var json = JSON.stringify(output);
+    console.log(output);
     console.log("editor: sent page content");
     parent.postMessage('save ' + json, "*");
 }
@@ -50,10 +58,27 @@ $(document).ready(function () {
         $(this).html("<input type=\"text\" data-component=\"" + component + "\" class=\"sw-text-input\" value=\"" + text + "\" placeholder=\"Click to edit\">");
     });
 
+    $(".sw-complex").each(function () {
+        $(this).append("<div class=\"sw-editbtn\">Click to edit</div>");
+    });
+
+    $(".sw-editbtn").on("click", function () {
+        var data = $(this).parent().data("json");
+        var send = {"component": $(this).parent().data("component"), "content": data};
+        //console.log(send);
+        parent.postMessage('editcomplex ' + JSON.stringify(send), "*");
+        return false;
+    });
+
     window.addEventListener('message', function (event) {
         console.log("editor: received message: " + event.data);
         if (event.data == "save") {
             saveEdits();
+        } else if (event.data.startsWith("complex ")) {
+            var json = JSON.parse(event.data.slice(8));
+            var comp = json["component"];
+            var data = json["content"];
+            $(".sw-complex[data-component='" + comp + "']").data("json", JSON.stringify(data));
         }
     });
 });

static/js/editorparent.js

@@ -15,17 +15,78 @@ function save(json) {
         content: output["content"]
     }, function (data) {
         if (data.status == "OK") {
-            alert("Saved");
+            $("#reloadprompt").addClass("d-none");
+            document.getElementById("editorframe").contentDocument.location.reload(true);
+            $("#savedBadge").removeClass("d-none");
+            $("#savedBadge").show();
+            setTimeout(function () {
+                $("#savedBadge").fadeOut("slow");
+            }, 1500);
         } else {
             alert(data.msg);
         }
     });
 }
 
+function editComplex(json) {
+    var data = JSON.parse(json);
+    console.log(data);
+    if (typeof data.content === "string") {
+        var content = JSON.parse(data.content);
+    } else {
+        var content = data.content;
+    }
+    $("#iconEdit").removeClass("d-none");
+    $("#linkEdit").removeClass("d-none");
+    $("#textEdit").removeClass("d-none");
+    $("#linkPage").val("");
+    $("#linkBox").val("");
+    $("#textBox").val("");
+    if (typeof content.icon === 'undefined') {
+        $("#iconEdit").addClass("d-none");
+    }
+    if (typeof content.link === 'undefined') {
+        $("#linkEdit").addClass("d-none");
+    } else {
+        if (content.link.startsWith("http")) {
+            $("#linkBox").val(content.link);
+        } else {
+            $("#linkPage").val(content.link);
+        }
+    }
+    if (typeof content.text === 'undefined') {
+        $("#textEdit").addClass("d-none");
+    } else {
+        $("#textBox").val(content.text);
+    }
+    $("#editModal").data("component", data.component);
+    $("#editModal").modal();
+}
+
+$("#editModalSave").on("click", function () {
+    var data = {};
+    data["component"] = $("#editModal").data("component");
+    var content = {};
+    content["icon"] = "";
+    if ($("#linkBox").val() != "") {
+        content["link"] = $("#linkBox").val();
+    } else {
+        content["link"] = $("#linkPage").val();
+    }
+    content["text"] = $("#textBox").val();
+    data["content"] = content;
+    var json = JSON.stringify(data);
+    document.getElementById("editorframe").contentWindow.postMessage("complex " + json, "*");
+    $("#reloadprompt").removeClass("d-none");
+    $('#editModal').modal('hide');
+});
+
 window.addEventListener('message', function (event) {
     //console.log("parent: received message: " + event.data);
     if (event.data.startsWith("save ")) {
         save(event.data.slice(5));
+    } else if (event.data.startsWith("editcomplex ")) {
+        editComplex(event.data.slice(12));
     }
 });