Feature request block manager filter implementation

src/abstract/FilterView.js

@@ -0,0 +1,77 @@
+import { template } from 'underscore';
+import Backbone from 'backbone';
+import $ from '../utils/cash-dom';
+
+//const $ = Backbone.$;
+
+export default Backbone.View.extend({
+  events: {
+    input: 'handleChange',
+    'click [data-clear]': 'clearInput',
+  },
+
+  iconDelete:
+    '<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>',
+
+  holderClass() {
+    return `${this.ppfx}input-holder`;
+  },
+
+  inputClass() {
+    return `${this.ppfx}field`;
+  },
+
+  initialize(o = {}) {
+    const ppfx = o.ppfx || '';
+    this.clb = o.clb;
+    this.em = o.editor;
+    this.ppfx = ppfx;
+  },
+
+  template() {
+    return `
+      <div style="padding: 5px; display: flex; justify-content: flex-end;">
+        <div class=${this.holderClass()} style="display: flex; width: 100%">
+        </div>
+        <span class="${this.ppfx}clm-tags-btn" style="justify-content: flex-center;" data-clear>
+          ${this.iconDelete} 
+        </span>
+      </div>
+    `;
+  },
+
+  getInputElement() {
+    if (!this.inputEl) {
+      const label = this.em ? this.em.t('panels.searchLabel') : '';
+      this.inputEl = $(`<input type="text" placeholder="${label}">`);
+    }
+
+    return this.inputEl.get(0);
+  },
+
+  handleChange(e) {
+    e.stopPropagation();
+    const inputEl = this.getInputElement();
+    const value = inputEl.value;
+    this.clb && this.clb(value);
+    this.getInputElement().focus();
+  },
+
+  clearInput(e) {
+    const inputEl = this.getInputElement();
+    inputEl.value = '';
+    this.clb && this.clb(inputEl.value);
+  },
+
+  render() {
+    if (!this.rendered) {
+      const el = this.$el;
+      el.addClass(this.inputClass());
+      el.html(this.template());
+      el.find(`.${this.holderClass()}`).append(this.getInputElement());
+      this.rendered = true;
+    }
+
+    return this;
+  },
+});

src/block_manager/config/config.ts

@@ -36,13 +36,16 @@ export interface BlockManagerConfig {
    * @default false
    */
   custom?: boolean;
+
+  showSearch?: boolean;
 }
 
 const config: BlockManagerConfig = {
   appendTo: '',
   blocks: [],
   appendOnClick: false,
   custom: false,
+  showSearch: true,
 };
 
 export default config;

src/block_manager/model/Block.ts

@@ -62,6 +62,8 @@ export interface BlockProperties {
    * @deprecated
    */
   activeOnRender?: boolean;
+
+  visible?: boolean;
 }
 
 /**
@@ -91,6 +93,7 @@ export default class Block extends Model<BlockProperties> {
       disable: false,
       onClick: undefined,
       attributes: {},
+      visible: true,
     };
   }
 

src/block_manager/view/BlocksView.ts

@@ -7,6 +7,8 @@ import Block from '../model/Block';
 import Categories from '../../abstract/ModuleCategories';
 import BlockView from './BlockView';
 import CategoryView from '../../abstract/ModuleCategoryView';
+import Filter from '../../abstract/FilterView';
+import blockManagerConfig from '../../block_manager/config/config';
 
 export interface BlocksViewConfig {
   em: EditorModel;
@@ -28,6 +30,8 @@ export default class BlocksView extends View {
   blocksEl?: HTMLElement;
   rendered?: boolean;
   sorter: any;
+  searchField: any;
+  showSearch: any;
 
   constructor(opts: any, config: BlocksViewConfig) {
     super(opts);
@@ -43,10 +47,19 @@ export default class BlocksView extends View {
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.render);
     this.em = this.config.em;
+    this.showSearch = blockManagerConfig.showSearch;
 
     if (this.em) {
       this.config.getSorter = this.getSorter;
     }
+
+    if (this.showSearch) {
+      this.searchField = new Filter({
+        clb: this.searchCallBack.bind(this),
+        editor: this.em,
+        ppfx: this.ppfx,
+      }).render();
+    }
   }
 
   __getModule(): BlockManager {
@@ -93,6 +106,32 @@ export default class BlocksView extends View {
 
     return this.sorter;
   }
+  /**
+   * @private
+   */
+  searchCallBack(value: string) {
+    var index = 1;
+    const processedValue = value ? value.toLowerCase() : '';
+    this.collection.models.forEach(model => {
+      const blockLabel = model
+        .get('label')
+        .toLowerCase()
+        .replace(/(<([^>]+)>|\r\n|\n|\r|  )/gi, '');
+      const category = model.get('category');
+      const categoryLabel = category ? category.id.toLowerCase() : '';
+      if (!blockLabel.includes(processedValue) && !categoryLabel.includes(processedValue)) {
+        model.set('visible', false);
+      } else {
+        model.set('visible', true);
+      }
+
+      if (index >= this.collection.length) {
+        this.render();
+      } else {
+        index++;
+      }
+    });
+  }
 
   onDrag(ev: Event) {
     this.em.stopDefault();
@@ -126,8 +165,13 @@ export default class BlocksView extends View {
    * */
   add(model: Block, fragment?: DocumentFragment) {
     const { config, renderedCategories } = this;
-    const attributes = model.get('attributes');
-    const view = new BlockView({ model, attributes }, config);
+    const view = new BlockView(
+      {
+        model,
+        attributes: model.get('attributes'),
+      },
+      config
+    );
     const rendered = view.render().el;
     const category = model.parent.initCategory(model);
 
@@ -183,8 +227,8 @@ export default class BlocksView extends View {
         <div class="${this.blockContClass}"></div>
       </div>
     `;
-
-    this.collection.each(model => this.add(model, frag));
+    this.searchField && this.el.prepend(this.searchField.el);
+    this.collection.each(model => model.get('visible') && this.add(model, frag));
     this.append(frag);
     const cls = `${this.blockContClass}s ${ppfx}one-bg ${ppfx}two-color`;
     this.$el.addClass(cls);

src/i18n/locale/en.js

@@ -58,6 +58,7 @@ export default {
         'open-blocks': 'Open Blocks',
       },
     },
+    searchLabel: 'filter',
   },
   selectorManager: {
     label: 'Classes',