HTMLify

index.html
Views: 56 | Author: devwajahat
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Trumbowyg Fixed</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.27.3/ui/trumbowyg.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.27.3/trumbowyg.min.js"></script>

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css"
      rel="stylesheet"
    />

    <style>
      body {
        font-family: "Segoe UI", sans-serif;
        padding: 40px;
        background: #f9f9f9;
      }

      /* EDITOR STYLES */
      .trumbowyg-box {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-top: 20px;
        min-height: 350px;
      }
      .trumbowyg-editor {
        padding: 30px;
        font-size: 16px;
        line-height: 1.6;
      }
      .trumbowyg-button-pane {
        background: #fff;
        border-bottom: 1px solid #eee;
      }

      /* Custom Button Color */
      .trumbowyg-authorGrid-button {
        color: #0098f7 !important;
        font-weight: bold !important;
        width: auto !important;
        padding: 0 10px !important;
      }

      /* GRID CARD */
      .author-grid-card {
        display: flex;
        align-items: flex-start;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-left: 4px solid #4ade80;
        border-radius: 8px;
        padding: 20px;
        margin: 15px 0;
        max-width: 600px;
        font-family: sans-serif;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        transition: all 0.2s;
      }
      .author-grid-card:hover {
        border-color: #4ade80;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .author-grid-icon {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        background: #f0fdf4;
        color: #16a34a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-right: 15px;
      }
      .author-grid-content h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
        font-weight: 700;
        color: #111;
      }
      .author-grid-content p {
        margin: 0;
        font-size: 14px;
        color: #555;
        line-height: 1.5;
      }

      /* MODAL */
      #grid-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99999;
        backdrop-filter: blur(2px);
        align-items: center;
        justify-content: center;
      }
      #grid-modal-box {
        background: white;
        padding: 25px;
        border-radius: 12px;
        width: 500px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        max-height: 85vh;
        overflow-y: auto; /* Scrollbar Fix */
      }

      .form-group {
        margin-bottom: 15px;
      }
      .form-group label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        font-size: 13px;
        color: #555;
      }
      .form-group input,
      .form-group textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        box-sizing: border-box;
      }

      /* API SEARCH GRID */
      .icon-search-bar {
        margin-bottom: 5px;
        border-color: #0098f7;
      }
      .search-status {
        font-size: 12px;
        color: #666;
        margin-bottom: 10px;
        min-height: 18px;
      }
      .icon-results-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 8px;
        min-height: 120px;
        padding: 10px;
        border: 1px solid #eee;
        background: #fafafa;
        border-radius: 6px;
      }
      .api-icon-btn {
        height: 45px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #555;
        cursor: pointer;
      }
      .api-icon-btn:hover {
        border-color: #0098f7;
        color: #0098f7;
      }
      .api-icon-btn.selected {
        background: #0098f7;
        border-color: #0098f7;
        color: white;
      }
      .api-icon-btn.selected i {
        color: white;
      }

      .btn-row {
        display: flex;
        gap: 10px;
        margin-top: 15px;
      }
      .btn-insert {
        flex: 2;
        padding: 12px;
        background: #0098f7;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
      }
      .btn-cancel {
        flex: 1;
        padding: 12px;
        background: #eee;
        color: #333;
        border: none;
        border-radius: 6px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h2 style="text-align: center">Trumbowyg Editor (Fixed)</h2>

    <div id="my-editor">
      <p>
        Click <strong>"Grid +"</strong> to insert. Double-click a grid box to
        edit.
      </p>
    </div>

    <div id="grid-modal-overlay">
      <div id="grid-modal-box">
        <h3 style="margin: 0 0 15px 0" id="modal-title-text">
          Add Grid Element
        </h3>

        <div class="form-group">
          <label>Search Remix Icons</label>
          <input
            type="text"
            id="api-search-input"
            class="icon-search-bar"
            placeholder="e.g. user, google, arrow..."
            oninput="handleSearch()"
          />
          <div id="search-status" class="search-status">Ready.</div>
          <div id="api-results-display" class="icon-results-grid"></div>
        </div>

        <input type="hidden" id="selected-api-class" />
        <input type="hidden" id="editing-element-id" />

        <div class="form-group">
          <label>Title</label>
          <input type="text" id="m-title" placeholder="Title" />
        </div>
        <div class="form-group">
          <label>Description</label>
          <textarea id="m-desc" rows="3" placeholder="Description"></textarea>
        </div>

        <div class="btn-row">
          <button class="btn-cancel" onclick="closeGridModal()">Cancel</button>
          <button
            class="btn-insert"
            id="btn-save-action"
            onclick="saveGridItem()"
          >
            Insert
          </button>
        </div>
      </div>
    </div>

    <script>
      // --- 1. SAFE LOAD WRAPPER ---
      $(document).ready(function () {
        // --- 2. ENTER KEY LOGIC ---
        function handleEnterKey(e) {
          if (e.key === "Enter") {
            // Check if we are inside a Grid Card
            var selection = document.getSelection();
            if (!selection.rangeCount) return;
            var $node = $(selection.anchorNode);
            var $card = $node.closest(".author-grid-card");

            if ($card.length > 0) {
              e.preventDefault(); // Stop normal Enter behavior
              // Insert a paragraph AFTER the card
              var $newP = $("<p><br></p>");
              $card.after($newP);

              // Move cursor there
              var range = document.createRange();
              range.setStart($newP[0], 0);
              range.setEnd($newP[0], 0);
              selection.removeAllRanges();
              selection.addRange(range);
            }
          }
        }

        // --- 3. PLUGIN DEFINITION ---
        $.extend(true, $.trumbowyg, {
          plugins: {
            authorGrid: {
              init: function (trumbowyg) {
                // Add Button
                trumbowyg.addBtnDef("authorGrid", { fn: openGridModal });

                // SAFELY Bind Events (Wait for editor to be built)
                setTimeout(function () {
                  if (trumbowyg.$ed) {
                    // Edit on Double Click
                    trumbowyg.$ed.on(
                      "dblclick",
                      ".author-grid-card",
                      function () {
                        openEditModal(this);
                      }
                    );
                    // Enter Key Logic
                    trumbowyg.$ed.on("keydown", handleEnterKey);
                  }
                }, 500);
              },
            },
          },
        });

        // --- 4. INITIALIZE EDITOR ---
        $("#my-editor").trumbowyg({
          btns: [
            ["viewHTML"],
            ["formatting"],
            ["strong", "em"],
            ["authorGrid"], // Our Button
            ["unorderedList", "orderedList"],
            ["fullscreen"],
          ],
          btnsDef: {
            authorGrid: {
              text: "Grid +",
              title: "Insert Grid",
              hasIcon: false,
            },
          },
        });
      }); // End Document Ready

      // --- 5. MODAL FUNCTIONS (Global Scope) ---

      // Search API
      let searchTimeout;
      const statusEl = document.getElementById("search-status");

      function handleSearch() {
        const query = document.getElementById("api-search-input").value.trim();
        clearTimeout(searchTimeout);
        if (query.length < 2) {
          statusEl.innerText = "Type 2+ chars...";
          return;
        }
        statusEl.innerText = "Searching...";
        searchTimeout = setTimeout(() => {
          fetchIcons(query);
        }, 400);
      }

      async function fetchIcons(keyword) {
        const grid = document.getElementById("api-results-display");
        grid.innerHTML =
          '<div style="text-align:center; padding-top:20px; color:#666;">Loading...</div>';
        try {
          const res = await fetch(
            `https://api.iconify.design/search?query=${keyword}&limit=50&prefix=ri`
          );
          const data = await res.json();
          grid.innerHTML = "";

          if (data.icons && data.icons.length) {
            statusEl.innerText = `Found ${data.icons.length} icons.`;
            data.icons.forEach((str) => {
              const clean = str.replace("ri:", "");
              const cls = `ri-${clean}`;
              const btn = document.createElement("div");
              btn.className = "api-icon-btn";
              btn.innerHTML = `<i class="${cls}"></i>`;
              btn.title = clean;
              btn.onclick = () => {
                $(".api-icon-btn").removeClass("selected");
                btn.classList.add("selected");
                $("#selected-api-class").val(cls);
              };
              grid.appendChild(btn);
            });
          } else {
            statusEl.innerText = "No icons found.";
            grid.innerHTML =
              '<div style="text-align:center; padding-top:20px;">No results.</div>';
          }
        } catch (e) {
          statusEl.innerText = "API Error";
        }
      }

      // Open/Close/Save Logic
      function openGridModal() {
        resetModal();
        $("#modal-title-text").text("Add Grid Element");
        $("#btn-save-action").text("Insert");
        $("#editing-element-id").val("");
        $("#grid-modal-overlay").css("display", "flex");
      }

      function openEditModal(el) {
        resetModal();
        $("#modal-title-text").text("Edit Grid Element");
        $("#btn-save-action").text("Update");

        // Mark element with ID to find it later
        var $el = $(el);
        var tempId = $el.attr("id");
        if (!tempId) {
          tempId = "edit-" + Date.now();
          $el.attr("id", tempId);
        }
        $("#editing-element-id").val(tempId);

        // Fill Data
        $("#m-title").val($el.find("h4").text());
        $("#m-desc").val($el.find("p").text());
        var iconCls = $el.find(".author-grid-icon i").attr("class");
        $("#selected-api-class").val(iconCls);
        $("#search-status").html(`Current: <i class="${iconCls}"></i>`);

        $("#grid-modal-overlay").css("display", "flex");
      }

      function resetModal() {
        $("#api-search-input").val("");
        $("#api-results-display").empty();
        statusEl.innerText = "Ready.";
        $("#m-title").val("");
        $("#m-desc").val("");
        $("#selected-api-class").val("");
      }

      function closeGridModal() {
        $("#grid-modal-overlay").hide();
      }

      function saveGridItem() {
        const title = $("#m-title").val();
        const desc = $("#m-desc").val();
        let icon = $("#selected-api-class").val();
        const editId = $("#editing-element-id").val();

        if (!title) {
          alert("Title is required");
          return;
        }
        if (!icon) icon = "ri-star-line";

        const html = `
                <div class="author-grid-card" id="${editId || ""}">
                    <div class="author-grid-icon"><i class="${icon}"></i></div>
                    <div class="author-grid-content">
                        <h4>${title}</h4>
                        <p>${desc}</p>
                    </div>
                </div>`;

        // Insert vs Update
        if (editId) {
          // We must find the element inside Trumbowyg's editable area
          var $editor = $("#my-editor").data("trumbowyg").$ed;
          var $target = $editor.find("#" + editId);
          if ($target.length) {
            $target.replaceWith(html);
            // Force Trumbowyg to recognize change
            $("#my-editor").trumbowyg("saveRange");
            $("#my-editor").trigger("tbwchange");
          }
        } else {
          $("#my-editor").trumbowyg("execCmd", {
            cmd: "insertHTML",
            param: html + "<p><br></p>",
            forceCss: false,
          });
        }
        closeGridModal();
      }
    </script>
  </body>
</html>
HTMLify

Share this file:
