Refactor block manager files to classes

4 years ago · d430aadd92
8 changed files with 54 additions and 57 deletions
--- a/src/block_manager/index.js
+++ b/src/block_manager/index.js
@ -45,7 +45,7 @@
 * @module BlockManager
 */
 import { isElement, isArray } from 'underscore';
-import Module from 'common/module';
+import Module from '../common/module';
 import defaults from './config/config';
 import Block from './model/Block';
 import Blocks from './model/Blocks';
--- a/src/block_manager/model/Block.js
+++ b/src/block_manager/model/Block.js
@ -1,4 +1,4 @@
-import { Model } from 'common';
+import { Model } from '../../common';
 import { isFunction } from 'underscore';

 /**
@ -25,7 +25,7 @@ export default class Block extends Model {
      resetId: false,
      disable: false,
      onClick: null,
-      attributes: {}
+      attributes: {},
    };
  }

--- a/src/block_manager/model/Blocks.js
+++ b/src/block_manager/model/Blocks.js
@ -1,4 +1,4 @@
-import { Collection } from 'common';
+import { Collection } from '../../common';
 import Block from './Block';

 export default class Blocks extends Collection {}
--- a/src/block_manager/model/Categories.js
+++ b/src/block_manager/model/Categories.js
@ -1,4 +1,4 @@
-import { Collection } from 'common';
+import { Collection } from '../../common';
 import Category from './Category';

 export default class Categories extends Collection {}
--- a/src/block_manager/model/Category.js
+++ b/src/block_manager/model/Category.js
@ -1,4 +1,4 @@
-import { Model } from 'common';
+import { Model } from '../../common';

 export default class Category extends Model {
  defaults() {
@ -6,7 +6,7 @@ export default class Category extends Model {
      id: '',
      label: '',
      open: true,
-      attributes: {}
+      attributes: {},
    };
  }
 }
--- a/src/block_manager/view/BlockView.js
+++ b/src/block_manager/view/BlockView.js
@ -1,15 +1,17 @@
-import Backbone from 'backbone';
 import { isFunction } from 'underscore';
-import { on, off, hasDnd } from 'utils/mixins';
+import { View } from '../../common';
+import { on, off, hasDnd } from '../../utils/mixins';

-export default Backbone.View.extend({
-  events: {
-    click: 'handleClick',
-    mousedown: 'startDrag',
-    dragstart: 'handleDragStart',
-    drag: 'handleDrag',
-    dragend: 'handleDragEnd'
-  },
+export default class BlockView extends View {
+  events() {
+    return {
+      click: 'handleClick',
+      mousedown: 'startDrag',
+      dragstart: 'handleDragStart',
+      drag: 'handleDrag',
+      dragend: 'handleDragEnd',
+    };
+  }

  initialize(o, config = {}) {
    const { model } = this;
@ -19,11 +21,11 @@ export default Backbone.View.extend({
    this.ppfx = config.pStylePrefix || '';
    this.listenTo(model, 'destroy remove', this.remove);
    this.listenTo(model, 'change', this.render);
-  },
+  }

  __getModule() {
    return this.em.get('BlockManager');
-  },
+  }

  handleClick(ev) {
    const { config, model, em } = this;
@ -64,9 +66,9 @@ export default Backbone.View.extend({
      if (valid.valid) target = wrapper;
    }

-    const result = target && target.append(content, {at: insertAt})[0];
+    const result = target && target.append(content, { at: insertAt })[0];
    result && em.setSelected(result, { scroll: 1 });
-  },
+  }

  /**
   * Start block dragging
@ -76,27 +78,26 @@ export default Backbone.View.extend({
    const { config, em, model } = this;
    const disable = model.get('disable');
    //Right or middel click
-    if (e.button !== 0 || !config.getSorter || this.el.draggable || disable)
-      return;
+    if (e.button !== 0 || !config.getSorter || this.el.draggable || disable) return;
    em.refreshCanvas();
    const sorter = config.getSorter();
    sorter.setDragHelper(this.el, e);
    sorter.setDropContent(this.model.get('content'));
    sorter.startSort(this.el);
    on(document, 'mouseup', this.endDrag);
-  },
+  }

  handleDragStart(ev) {
    this.__getModule().__startDrag(this.model, ev);
-  },
+  }

  handleDrag(ev) {
    this.__getModule().__drag(ev);
-  },
+  }

  handleDragEnd() {
    this.__getModule().__endDrag();
-  },
+  }

  /**
   * Drop block
@ -112,7 +113,7 @@ export default Backbone.View.extend({
    // the block helper I use the trick of 'moved = 0' to void those errors.
    sorter.moved = 0;
    sorter.endMove();
-  },
+  }

  render() {
    const { em, el, $el, ppfx, model } = this;
@ -120,8 +121,7 @@ export default Backbone.View.extend({
    const attr = model.get('attributes') || {};
    const cls = attr.class || '';
    const className = `${ppfx}block`;
-    const label =
-      (em && em.t(`blockManager.labels.${model.id}`)) || model.get('label');
+    const label = (em && em.t(`blockManager.labels.${model.id}`)) || model.get('label');
    const render = model.get('render');
    const media = model.get('media');
    const clsAdd = disable ? `${className}--disable` : `${ppfx}four-color-h`;
@ -137,4 +137,4 @@ export default Backbone.View.extend({
    if (result) el.innerHTML = result;
    return this;
  }
-});
+}
--- a/src/block_manager/view/BlocksView.js
+++ b/src/block_manager/view/BlocksView.js
@ -1,9 +1,9 @@
-import Backbone from 'backbone';
 import { isString, isObject, bindAll } from 'underscore';
+import { View } from '../../common';
 import BlockView from './BlockView';
 import CategoryView from './CategoryView';

-export default Backbone.View.extend({
+export default class BlocksView extends View {
  initialize(opts, config) {
    bindAll(this, 'getSorter', 'onDrag', 'onDrop', 'onMove');
    this.config = config || {};
@ -25,14 +25,14 @@ export default Backbone.View.extend({
      this.config.getSorter = this.getSorter;
      this.canvas = this.em.get('Canvas');
    }
-  },
+  }

  updateConfig(opts = {}) {
    this.config = {
      ...this.config,
-      ...opts
+      ...opts,
    };
-  },
+  }

  /**
   * Get sorter
@ -57,11 +57,11 @@ export default Backbone.View.extend({
        wmargin: 1,
        nested: 1,
        em: this.em,
-        canvasRelative: 1
+        canvasRelative: 1,
      });
    }
    return this.sorter;
-  },
+  }

  /**
   * Callback when block is on drag
@ -70,11 +70,11 @@ export default Backbone.View.extend({
  onDrag(e) {
    this.em.stopDefault();
    this.em.trigger('block:drag:start', e);
-  },
+  }

  onMove(e) {
    this.em.trigger('block:drag:move', e);
-  },
+  }

  /**
   * Callback when block is dropped
@ -94,7 +94,7 @@ export default Backbone.View.extend({

      em.trigger('block:drag:stop', model);
    }
-  },
+  }

  /**
   * Add new model to the collection
@ -103,7 +103,7 @@ export default Backbone.View.extend({
   * */
  addTo(model) {
    this.add(model);
-  },
+  }

  /**
   * Render new model inside the view
@ -117,7 +117,7 @@ export default Backbone.View.extend({
    var view = new BlockView(
      {
        model,
-        attributes: model.get('attributes')
+        attributes: model.get('attributes'),
      },
      config
    );
@ -129,7 +129,7 @@ export default Backbone.View.extend({
      if (isString(category)) {
        category = {
          id: category,
-          label: category
+          label: category,
        };
      } else if (isObject(category) && !category.id) {
        category.id = category.label;
@ -144,7 +144,7 @@ export default Backbone.View.extend({
      if (!catView && categories) {
        catView = new CategoryView(
          {
-            model: catModel
+            model: catModel,
          },
          this.config
        ).render();
@ -158,7 +158,7 @@ export default Backbone.View.extend({

    if (frag) frag.appendChild(rendered);
    else this.append(rendered);
-  },
+  }

  getCategoriesEl() {
    if (!this.catsEl) {
@ -166,22 +166,20 @@ export default Backbone.View.extend({
    }

    return this.catsEl;
-  },
+  }

  getBlocksEl() {
    if (!this.blocksEl) {
-      this.blocksEl = this.el.querySelector(
-        `.${this.noCatClass} .${this.blockContClass}`
-      );
+      this.blocksEl = this.el.querySelector(`.${this.noCatClass} .${this.blockContClass}`);
    }

    return this.blocksEl;
-  },
+  }

  append(el) {
    let blocks = this.getBlocksEl();
    blocks && blocks.appendChild(el);
-  },
+  }

  render() {
    const ppfx = this.ppfx;
@ -203,4 +201,4 @@ export default Backbone.View.extend({
    this.rendered = true;
    return this;
  }
-});
+}
--- a/src/block_manager/view/CategoryView.js
+++ b/src/block_manager/view/CategoryView.js
@ -1,5 +1,5 @@
-import { View } from 'backbone';
-import html from 'utils/html';
+import { View } from '../../common';
+import html from '../../utils/html';

 export default class CategoryView extends View {
  template({ pfx, label }) {
@ -77,8 +77,7 @@ export default class CategoryView extends View {

  render() {
    const { em, el, $el, model, pfx } = this;
-    const label =
-      em.t(`blockManager.categories.${model.id}`) || model.get('label');
+    const label = em.t(`blockManager.categories.${model.id}`) || model.get('label');
    el.innerHTML = this.template({ pfx, label });
    $el.addClass(this.className);
    $el.css({ order: model.get('order') });