From d59ba4ce8f1bba24904ae9e636111f0e67a6ac1d Mon Sep 17 00:00:00 2001
From: Ahmad Limbada <Ahmadlimbada@gmail.com>
Date: Wed, 20 Jul 2022 16:41:09 +0530
Subject: [PATCH] [AL] changed update event binding to open style manager from
 selector and limited total shown classes to 5

---
 src/index.js | 138 +++++++++++++++++++++++++++++----------------------
 1 file changed, 80 insertions(+), 58 deletions(-)

diff --git a/src/index.js b/src/index.js
index 7169cbc..8ebf3d0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,16 @@
-import {html, render} from 'lit-html';
-import {styleMap} from 'lit-html/directives/style-map.js';
+import { html, render } from "lit-html";
+import { styleMap } from "lit-html/directives/style-map.js";
 
 export default (editor, opts = {}) => {
   const sm = editor.SelectorManager;
-  const listEl = document.createElement('div');
-  const prefix =  editor.Config.selectorManager.pStylePrefix;
-  const selIdAttr = 'data-sel-id';
+  const listEl = document.createElement("div");
+  const prefix = editor.Config.selectorManager.pStylePrefix;
+  const selIdAttr = "data-sel-id";
 
-  const options = { ...{
-    // default options
-    containerStyle: `
+  const options = {
+    ...{
+      // default options
+      containerStyle: `
       .${prefix}suggest {
         position: absolute;
         z-index: 999;
@@ -22,7 +23,7 @@ export default (editor, opts = {}) => {
         padding: 0 5px;
       }
     `,
-    tagStyle: `
+      tagStyle: `
       div.${prefix}suggest__class {
         list-style: none;
         cursor: pointer;
@@ -33,66 +34,87 @@ export default (editor, opts = {}) => {
         font-size: x-small;
       }
     `,
-  },  ...opts };
+    },
+    ...opts,
+  };
 
-  function update(show, filter = '') {
-    const allComps = []
-    editor.Pages.getAll()
-    .forEach(page => {
-      page.getMainComponent()
-      .onAll((comp => allComps.push(comp)))
-    })
-    render(html`
-    <div
-      class="${prefix}suggest ${prefix}one-bg"
-      style=${styleMap({
-        opacity: show ? '1' : '0',
-        'pointer-events': show ? 'initial' : 'none',
-      })}
-    >
-      ${ sm.getAll()
-        .filter(sel => !sel.private && !sm.getSelected().includes(sel) && sel.getLabel().includes(filter))
-        // count the number of times each css class is used
-        .map(sel => ({
-          sel,
-          count: allComps.reduce((num, comp) => comp.getClasses().includes(sel.id) ? num+1 : num, 0),
-        }))
-        .sort((first, second) => second.count - first.count)
-        // only classes which are in use
-        .filter(({sel, count}) => count > 0)
-        // same structure as the tags in the input field
-        .map(({sel, count}) => html`
-          <div
-            data-sel-id=${sel.id}
-            class="${prefix}clm-tag ${prefix}three-bg ${prefix}suggest__class"
-            @mousedown=${() => select(sel.id)}
-          >
-            <span data-tag-name="">${sel.getLabel()}</span>
-            <span class="${prefix}clm-tag-status ${prefix}suggest__count" data-tag-status="">${count}</span>
-          </div>
-        `) 
-      }
-    </div>
-  `, listEl);
+  function update(show, filter = "") {
+    const allComps = [];
+    editor.Pages.getAll().forEach((page) => {
+      page.getMainComponent().onAll((comp) => allComps.push(comp));
+    });
+    render(
+      html`
+        <div
+          class="${prefix}suggest ${prefix}one-bg"
+          style=${styleMap({
+            opacity: show ? "1" : "0",
+            "pointer-events": show ? "initial" : "none",
+          })}
+        >
+          ${sm
+            .getAll()
+            .filter(
+              (sel) =>
+                !sel.private &&
+                !sm.getSelected().includes(sel) &&
+                sel.getLabel().includes(filter)
+            )
+            // count the number of times each css class is used
+            .map((sel) => ({
+              sel,
+              count: allComps.reduce(
+                (num, comp) =>
+                  comp.getClasses().includes(sel.id) ? num + 1 : num,
+                0
+              ),
+            }))
+            .sort((first, second) => second.count - first.count)
+            // only classes which are in use
+            .filter(({ sel, count }) => count > 0)
+            .slice(0, 5)
+            // same structure as the tags in the input field
+            .map(
+              ({ sel, count }) => html`
+                <div
+                  data-sel-id=${sel.id}
+                  class="${prefix}clm-tag ${prefix}three-bg ${prefix}suggest__class"
+                  @mousedown=${() => select(sel.id)}
+                >
+                  <span data-tag-name="">${sel.getLabel()}</span>
+                  <span
+                    class="${prefix}clm-tag-status ${prefix}suggest__count"
+                    data-tag-status=""
+                    >${count}</span
+                  >
+                </div>
+              `
+            )}
+        </div>
+      `,
+      listEl
+    );
   }
 
   function select(selId) {
-    const selector = sm.getAll().find(s => s.id === selId);
+    const selector = sm.getAll().find((s) => s.id === selId);
     sm.addSelected(selector);
   }
 
-  editor.on('load', () => {
+  editor.on("load", () => {
     // build the UI
-    const tags = editor.getContainer().querySelector(`#${prefix}clm-tags-field`);
+    const tags = editor
+      .getContainer()
+      .querySelector(`#${prefix}clm-tags-field`);
     const input = tags.querySelector(`#${prefix}clm-new`);
     tags.parentNode.insertBefore(listEl, tags.nextSibling);
-    const styleEl = document.createElement('style');
+    const styleEl = document.createElement("style");
     styleEl.innerHTML = options.containerStyle + options.tagStyle;
     document.head.appendChild(styleEl);
     // bind to events
-    input.addEventListener('blur', () => update(false));
-    input.addEventListener('focus', () => update(true, input.value));
-    editor.on('selector', () => update(false));
-    input.addEventListener('keyup', () => update(true, input.value));
-  })
+    input.addEventListener("blur", () => update(false));
+    input.addEventListener("focus", () => update(true, input.value));
+    editor.on("start:open-sm", () => update(false));
+    input.addEventListener("keyup", () => update(true, input.value));
+  });
 };