Add complex icon picker (close #13)

lang/en_us.php

@@ -94,4 +94,6 @@ define("STRINGS", [
     "email" => "Email",
     "social links" => "Social Links",
     "site info" => "Site Info",
+    "loading" => "Loading...",
+    "current" => "Current",
 ]);

lib/iconpicker.php

@@ -0,0 +1,33 @@
+<?php
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+include_once __DIR__ . "/fontawesome5_iconlist.php";
+?>
+<div class="card">
+    <div class="input-group" id="iconsearchrow">
+        <div class="input-group-prepend px-2">
+            <span class="input-group-text"><i class="fas fa-search"></i></span>
+        </div>
+        <input type="text" id="icon_search" class="form-control" />
+    </div>
+    <div class="icon_bin">
+        <?php
+        foreach ($FONTAWESOME as $fa => $info) {
+            ?>
+            <label title="<?php echo $info["label"]; ?>" data-search="<?php echo implode(" ", $info["search"]) . ' ' . strtolower($info["label"]); ?>" data-icon="<?php echo $fa; ?>">
+                <input type="radio" class="iconselector_radio" name="selectedicon" value="<?php echo $fa; ?>" />
+                <div class="card icon">
+                    <div class="card-body m-0 p-1">
+                        <span class="<?php echo $fa; ?> fa-fw"></span>
+                    </div>
+                </div>
+            </label>
+            <?php
+        }
+        ?>
+    </div>
+</div>

pages.php

@@ -28,10 +28,12 @@ define("PAGES", [
     "editor" => [
         "title" => "editor",
         "styles" => [
-            "static/css/editorparent.css"
+            "static/css/editorparent.css",
+            "static/css/iconselector.css"
         ],
         "scripts" => [
-            "static/js/editorparent.js"
+            "static/js/editorparent.js",
+            "static/js/iconselector.js"
         ]
     ],
     "analytics" => [

pages/editor.php

@@ -147,7 +147,7 @@ if (!is_empty($VARS['siteid'])) {
 </div>
 
 <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-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="editLabel"><?php lang("edit component"); ?></h5>
@@ -158,7 +158,12 @@ if (!is_empty($VARS['siteid'])) {
             <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>
-
+                    <br /> <div class="card d-inline-block mb-2">
+                        <div class="card-body p-1">
+                            <?php lang("current"); ?>: <span id="selectedicon"><i class="fa-fw"></i></span>
+                        </div>
+                    </div>
+                    <div id="iconpicker"><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>

static/css/iconselector.css

@@ -0,0 +1,50 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+.icon_bin {
+    min-height: 100px;
+    height: 30vh;
+    overflow-y: scroll;
+    padding: 10px;
+}
+
+.icon_bin label input[type=radio] {
+    visibility: hidden;
+    position: absolute;
+}
+
+.icon_bin label input[type=radio].form-check-input {
+    visibility: visible;
+    position: inherit;
+}
+
+.icon_bin label input[type=radio] + .icon {
+    cursor: pointer;
+    border: 3px solid white;
+    margin: 2px;
+}
+
+.icon_bin label input[type=radio]:checked + .icon {
+    transform: scale(1.5);
+    z-index: 10;
+    box-shadow: 0 0 3px black;
+}
+
+.icon_bin label .icon:hover {
+    transform: scale(2);
+    z-index: 11;
+}
+
+.icon_bin label {
+    max-width: 50px;
+}
+
+#iconsearchrow {
+    box-shadow: inset 0 -1px 0 #ddd;
+}
+
+#iconsearchrow:focus-within {
+    box-shadow: inset 0 -2px 0 #2196F3;
+}

static/js/iconselector.js

@@ -0,0 +1,26 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+function initIconSearch() {
+    $("#icon_search").keyup(function () {
+        var q = $("#icon_search").val().toLowerCase();
+        var icons = $(".icon_bin label");
+        if (q == "") {
+            icons.removeClass("d-none");
+        } else {
+            icons.addClass("d-none");
+            var matches = icons.filter(function () {
+                return $(this).data("search").includes(q);
+            });
+            matches.removeClass("d-none");
+        }
+    });
+
+    $(".iconselector_radio").change(function () {
+        console.log($(this).val());
+        $("#selectedicon").html("<i class=\"" + $(this).val() + " fa-fw\"></i>");
+    });
+}