Merge pull request #33 from editor-js/feature/popover-improvements

Add new methods to Popover

Author: gohabereg

.yarn/install-state.gz

@@ -3,7 +3,7 @@
   "description": "Utils useful for Editor.js tools development",
   "repository": "https://github.com/editor-js/utils/tree/main/packages/helpers",
   "link": "https://github.com/editor-js/utils/tree/main/packages/helpers",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "type": "module",
   "license": "MIT",

packages/helpers/package.json

@@ -72,7 +72,7 @@ export class Listeners {
 
     const alreadyExist = this.findOne(element, eventType, handler);
 
-    if (alreadyExist !== undefined) {
+    if (alreadyExist !== null) {
       return;
     }
 

packages/helpers/src/Listeners/Listeners.ts

@@ -2,7 +2,7 @@
   "name": "@editorjs/ui-kit",
   "description": "UI Components for Editor.js",
   "packageManager": "yarn@4.4.0",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/src/index.d.ts",

packages/ui-kit/package.json

@@ -9,7 +9,7 @@
 
     const popover = new PopoverDesktop(
       {
-        items: [{ title: 'Item 1' }],
+        items: [{ title: 'Item 1', onActivate: console.log }],
         scopeElement: document.body,
         searchable: true,
       }

packages/ui-kit/preview/index.html

@@ -11,3 +11,5 @@ import { PopoverMobile } from './popover-mobile';
 export type Popover = PopoverDesktop | PopoverMobile | PopoverInline;
 
 export { PopoverDesktop, PopoverMobile, PopoverInline };
+
+export * from './types';

packages/ui-kit/src/popover/index.ts

@@ -120,6 +120,34 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     return this.nodes.popover;
   }
 
+  /**
+   * Adds a single item to the popover
+   * @param params - item parameters
+   */
+  public addItem(params: PopoverItemParams): void {
+    const [item] = this.buildItems([params]);
+
+    this.items.push(item);
+    this.nodes.items.appendChild(item.getElement());
+  }
+
+  /**
+   * Removes an item from the popover by its name
+   * @param name - name of the item to be removed
+   */
+  public removeItemByName(name: string): void {
+    const foundItemIndex = this.items.findIndex(item => item.name === name);
+
+    if (foundItemIndex === -1) {
+      return;
+    }
+
+    const [removedItem] = this.items.splice(foundItemIndex, 1);
+
+    removedItem.destroy();
+    removedItem.getElement().remove();
+  }
+
   /**
    * Open popover
    */