Add image picker for complex components (close #17)

lang/en_us.php

@@ -54,6 +54,7 @@ define("STRINGS", [
     "save needed" => "Press Save to see recent changes.",
     "saved" => "Saved",
     "icon" => "Icon",
+    "image" => "Image",
     "link" => "Link",
     "text" => "Text",
     "select page or enter url" => "Select a page or enter URL",

pages/editor.php

@@ -191,6 +191,17 @@ if (!is_empty($VARS['siteid'])) {
                     </div>
                     <div id="iconpicker"><i class="fas fa-spin fa-circle-notch ml-2"></i> <?php lang("loading"); ?></div>
                 </div>
+                <div class="form-group d-none" id="imageEdit" data-image="">
+                    <label><i class="fas fa-image"></i> <?php lang("image"); ?></label>
+                    <br /> <div class="card d-inline-block mb-2">
+                        <div class="card-body p-1">
+                            <img id="selectedimage" class="img-responsive" />
+                        </div>
+                    </div>
+                    <div id="imagepicker">
+                        <i class="fas fa-spin fa-circle-notch ml-2"></i> <?php lang("loading"); ?>
+                    </div>
+                </div>
                 <div class="form-group" id="linkEdit">
                     <label><i class="fas fa-link"></i> <?php lang("link"); ?></label>
                     <select id="linkPage" class="form-control">
@@ -229,9 +240,9 @@ if (!is_empty($VARS['siteid'])) {
                 <i class="fas fa-eye"></i> <?php lang("view"); ?>
             </a>
             <?php if (!$singlepage) { ?>
-            <div class="btn btn-primary" id="newpagebtn">
+                <div class="btn btn-primary" id="newpagebtn">
-                <i class="fas fa-plus"></i> <?php lang("new"); ?>
+                    <i class="fas fa-plus"></i> <?php lang("new"); ?>
-            </div>
+                </div>
             <?php } ?>
         </div>
         <span class="badge badge-success d-none" id="savedBadge"><i class="fas fa-check"></i> <?php lang("saved"); ?></span>
@@ -241,26 +252,26 @@ if (!is_empty($VARS['siteid'])) {
         </div>
     </div>
     <?php if (!$singlepage) { ?>
-    <form method="GET" action="app.php" class="col-12 col-sm-6 col-md-4">
+        <form method="GET" action="app.php" class="col-12 col-sm-6 col-md-4">
-        <input type="hidden" name="page" value="editor" />
+            <input type="hidden" name="page" value="editor" />
-        <input type="hidden" name="siteid" value="<?php echo $VARS['siteid']; ?>" />
+            <input type="hidden" name="siteid" value="<?php echo $VARS['siteid']; ?>" />
-        <div class="input-group">
+            <div class="input-group">
-            <select name="slug" class="form-control">
+                <select name="slug" class="form-control">
-                <?php
+                    <?php
-                foreach ($pagedata as $p) {
+                    foreach ($pagedata as $p) {
-                    $selected = "";
+                        $selected = "";
-                    if ($slug == $p['slug']) {
+                        if ($slug == $p['slug']) {
-                        $selected = " selected";
+                            $selected = " selected";
+                        }
+                        echo "<option value=\"" . $p['slug'] . "\"$selected>" . $p['title'] . ' (' . $p['slug'] . ')' . "</option>\n";
                     }
-                    echo "<option value=\"" . $p['slug'] . "\"$selected>" . $p['title'] . ' (' . $p['slug'] . ')' . "</option>\n";
+                    ?>
-                }
+                </select>
-                ?>
+                <div class="input-group-append">
-            </select>
+                    <button type="submit" class="btn btn-primary"><?php lang("edit"); ?></button>
-            <div class="input-group-append">
+                </div>
-                <button type="submit" class="btn btn-primary"><?php lang("edit"); ?></button>
             </div>
-        </div>
+        </form>
-    </form>
     <?php } ?>
 </div>
 

public/themes/identity/inc/header.inc.php

@@ -23,7 +23,13 @@
         <!-- Main -->
         <section id="main">
             <header>
-                <span class="avatar"><img src="<?php get_theme_url(); ?>/images/avatar.jpg" alt="" /></span>
+                <?php
+                $img = get_complex_component("header-img", "index", ["image"]);
+                $url = "file.php?file=" . $img['image'];
+                ?>
+                <span class="avatar sw-complex" data-json="<?php echo get_escaped_json($img); ?>" data-component="header-img">
+                    <img src="<?php echo $url; ?>" alt="" />
+                </span>
                 <h1><?php get_page_clean_title(); ?></h1>
                 <p><div class="sw-text" data-component="lead">
                     <?php get_component("lead"); ?>

static/css/filepicker.css

@@ -8,3 +8,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     cursor: pointer;
     color: #2196F3;
 }
+
+#selectedimage {
+    max-height: 200px;
+    max-width: 200px;
+}

static/js/editorparent.js

@@ -37,6 +37,7 @@ function editComplex(json) {
         var content = data.content;
     }
     $("#iconEdit").removeClass("d-none");
+    $("#imageEdit").removeClass("d-none");
     $("#linkEdit").removeClass("d-none");
     $("#textEdit").removeClass("d-none");
     $("#linkPage").val("");
@@ -60,6 +61,32 @@ function editComplex(json) {
             setSelectedIcon();
         }
     }
+    if (typeof content.image === 'undefined') {
+        $("#imageEdit").addClass("d-none");
+    } else {
+        $("#imageEdit").data("image", content.image);
+        if (content.image != "") {
+            $("#imageEdit #selectedimage").attr("src", "public/file.php?file=" + content.image);
+        }
+        function loadComplexImageBrowser(path) {
+            $.get("lib/filepicker.php", {
+                path: path,
+                type: "image"
+            }, function (data) {
+                $("#imagepicker").html(data);
+                $("#imagepicker .filepicker-item").click(function () {
+                    if ($(this).data("type") == "dir") {
+                        loadComplexImageBrowser($(this).data("path"));
+                    } else {
+                        var path = $(this).data("path");
+                        $("#imageEdit").data("image", path);
+                        $("#imageEdit #selectedimage").attr("src", "public/file.php?file=" + path);
+                    }
+                })
+            });
+        }
+        loadComplexImageBrowser();
+    }
     if (typeof content.link === 'undefined') {
         $("#linkEdit").addClass("d-none");
     } else {
@@ -93,7 +120,7 @@ function loadFilePickerFolder(path, type) {
         type: ty
     }, function (data) {
         $("#fileBrowseModalBody").html(data);
-        $(".filepicker-item").click(function () {
+        $("#fileBrowseModalBody .filepicker-item").click(function () {
             if ($(this).data("type") == "dir") {
                 loadFilePickerFolder($(this).data("path"), type);
             } else {
@@ -121,6 +148,7 @@ $("#editModalSave").on("click", function () {
     data["component"] = $("#editModal").data("component");
     var content = {};
     content["icon"] = $('input[name="selectedicon"]:checked').val();
+    content["image"] = $("#imageEdit").data("image");
     if ($("#linkBox").val() != "") {
         content["link"] = $("#linkBox").val();
     } else {