From d430aadd925d620a6f8ad549d5d4b6ae9642f46b Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 1 Apr 2022 16:05:14 +0200 Subject: [PATCH] Refactor block manager files to classes --- src/block_manager/index.js | 2 +- src/block_manager/model/Block.js | 4 +-- src/block_manager/model/Blocks.js | 2 +- src/block_manager/model/Categories.js | 2 +- src/block_manager/model/Category.js | 4 +-- src/block_manager/view/BlockView.js | 48 +++++++++++++------------- src/block_manager/view/BlocksView.js | 42 +++++++++++----------- src/block_manager/view/CategoryView.js | 7 ++-- 8 files changed, 54 insertions(+), 57 deletions(-) diff --git a/src/block_manager/index.js b/src/block_manager/index.js index 96861bdad..e57f735dc 100644 --- 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'; diff --git a/src/block_manager/model/Block.js b/src/block_manager/model/Block.js index d62654fd5..ab3c693c6 100644 --- 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: {}, }; } diff --git a/src/block_manager/model/Blocks.js b/src/block_manager/model/Blocks.js index 65a38ce2d..063522740 100644 --- 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 {} diff --git a/src/block_manager/model/Categories.js b/src/block_manager/model/Categories.js index 8006c9d8c..7008f44fe 100644 --- 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 {} diff --git a/src/block_manager/model/Category.js b/src/block_manager/model/Category.js index 6b57aacb2..5e2154d79 100644 --- 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: {}, }; } } diff --git a/src/block_manager/view/BlockView.js b/src/block_manager/view/BlockView.js index f82b59589..c3d8634a0 100644 --- 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; } -}); +} diff --git a/src/block_manager/view/BlocksView.js b/src/block_manager/view/BlocksView.js index d5ff64e09..2e3e08748 100644 --- 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; } -}); +} diff --git a/src/block_manager/view/CategoryView.js b/src/block_manager/view/CategoryView.js index c086fa032..01e643b49 100644 --- 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') });