From 49da963dc5209cae89dc4415de3019056da4791d Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Sat, 30 Apr 2022 19:13:47 +0200 Subject: [PATCH] Convert code to using class --- src/dom_components/model/Components.js | 26 ++++---- src/dom_components/view/ComponentView.js | 80 ++++++++++++------------ 2 files changed, 53 insertions(+), 53 deletions(-) diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index bbf039546..0ccb91565 100644 --- a/src/dom_components/model/Components.js +++ b/src/dom_components/model/Components.js @@ -40,7 +40,7 @@ const getComponentsFromDefs = (items, all = {}, opts = {}) => { }); }; -export default Backbone.Collection.extend({ +export default class Components extends Backbone.Collection { initialize(models, opt = {}) { this.opt = opt; this.listenTo(this, 'add', this.onAdd); @@ -50,7 +50,7 @@ export default Backbone.Collection.extend({ this.config = config; this.em = em; this.domc = opt.domc || (em && em.get('DomComponents')); - }, + } resetChildren(models, opts = {}) { const coll = this; @@ -60,7 +60,7 @@ export default Backbone.Collection.extend({ opts.keepIds = getComponentIds(prev).filter(pr => newIds.indexOf(pr) >= 0); toRemove.forEach(md => this.removeChildren(md, coll, opts)); models.each(model => this.onAdd(model)); - }, + } resetFromString(input = '', opts = {}) { opts.keepIds = getComponentIds(this); @@ -71,7 +71,7 @@ export default Backbone.Collection.extend({ const newCmps = getComponentsFromDefs(cmps, allByID, opts); this.reset(newCmps, opts); this.em?.trigger('component:content', this.parent, opts, input); - }, + } removeChildren(removed, coll, opts = {}) { // Removing a parent component can cause this function @@ -123,7 +123,7 @@ export default Backbone.Collection.extend({ em.stopListening(removed); em.stopListening(removed.get('classes')); removed.__postRemove(); - }, + } model(attrs, options) { const { opt } = options.collection; @@ -155,7 +155,7 @@ export default Backbone.Collection.extend({ } return new model(attrs, options); - }, + } parseString(value, opt = {}) { const { em, domc } = this; @@ -173,7 +173,7 @@ export default Backbone.Collection.extend({ } return parsed.html; - }, + } add(models, opt = {}) { opt.keepIds = [...(opt.keepIds || []), ...getComponentIds(opt.previousModels)]; @@ -197,7 +197,7 @@ export default Backbone.Collection.extend({ const result = Backbone.Collection.prototype.add.apply(this, [models, opt]); this.__firstAdd = result; return result; - }, + } /** * Process component definition. @@ -250,7 +250,7 @@ export default Backbone.Collection.extend({ } return model; - }, + } onAdd(model, c, opts = {}) { const { domc, em } = this; @@ -267,9 +267,9 @@ export default Backbone.Collection.extend({ model.__postAdd({ recursive: 1 }); this.__onAddEnd(); - }, + } - __onAddEnd: debounce(function () { + __onAddEnd = debounce(function () { // TODO to check symbols on load, probably this might be removed as symbols // are always recovered from the model // const { domc } = this; @@ -295,5 +295,5 @@ export default Backbone.Collection.extend({ // }); // }; // onAll(toCheck); - }), -}); + }); +} diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 3c1e3d43e..db589d255 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -6,14 +6,14 @@ import Selectors from 'selector_manager/model/Selectors'; import { replaceWith } from 'utils/dom'; import { setViewEl } from 'utils/mixins'; -export default Backbone.View.extend({ +export default class ComponentView extends Backbone.View { className() { return this.getClasses(); - }, + } tagName() { return this.model.get('tagName'); - }, + } initialize(opt = {}) { const model = this.model; @@ -50,13 +50,13 @@ export default Backbone.View.extend({ }; this.delegateEvents(); !modelOpt.temporary && this.init(this._clbObj()); - }, + } __isDraggable() { const { model, config } = this; const { draggable } = model.attributes; return config.draggableComponents && draggable; - }, + } _clbObj() { const { em, model, el } = this; @@ -65,27 +65,27 @@ export default Backbone.View.extend({ model, el, }; - }, + } /** * Initialize callback */ - init() {}, + init() {} /** * Remove callback */ - removed() {}, + removed() {} /** * Callback executed when the `active` event is triggered on component */ - onActive() {}, + onActive() {} /** * Callback executed when the `disable` event is triggered on component */ - onDisable() {}, + onDisable() {} remove() { Backbone.View.prototype.remove.apply(this, arguments); @@ -102,7 +102,7 @@ export default Backbone.View.extend({ $el.data({ model: '', collection: '', view: '' }); // delete model.view; // Sorter relies on this property return this; - }, + } handleDragStart(event) { if (!this.__isDraggable()) return false; @@ -112,7 +112,7 @@ export default Backbone.View.extend({ target: this.model, event, }); - }, + } initClasses() { const { model } = this; @@ -125,7 +125,7 @@ export default Backbone.View.extend({ this.listenTo(classes, 'add remove change', this.updateClasses); classes.length && this.importClasses(); } - }, + } initComponents(opts = {}) { const { model, $el, childrenView } = this; @@ -140,7 +140,7 @@ export default Backbone.View.extend({ !opts.avoidRender && this.renderChildren(); this.listenTo(...toListen); } - }, + } /** * Handle any property change @@ -155,7 +155,7 @@ export default Backbone.View.extend({ for (let prop in model.changed) { model.emitUpdate(prop); } - }, + } /** * Import, if possible, classes inside main container @@ -169,7 +169,7 @@ export default Backbone.View.extend({ clm.add(m.get('name')); }); } - }, + } /** * Update item on status change @@ -212,7 +212,7 @@ export default Backbone.View.extend({ cls = cls.trim(); cls && el.setAttribute('class', cls); - }, + } /** * Update highlight attribute @@ -223,7 +223,7 @@ export default Backbone.View.extend({ const isTextable = model.get('textable'); const hl = model.get('highlightable') && (isTextable || !model.isChildOf('text')); this.setAttribute('data-gjs-highlightable', hl ? true : ''); - }, + } /** * Update style attribute @@ -238,7 +238,7 @@ export default Backbone.View.extend({ } else { this.setAttribute('style', model.styleToString(opts)); } - }, + } /** * Update classe attribute @@ -251,7 +251,7 @@ export default Backbone.View.extend({ // Regenerate status class this.updateStatus(); this.onAttrUpdate(); - }, + } /** * Update single attribute @@ -261,7 +261,7 @@ export default Backbone.View.extend({ setAttribute(name, value) { const el = this.$el; value ? el.attr(name, value) : el.removeAttr(name); - }, + } /** * Get classes from attributes. @@ -272,7 +272,7 @@ export default Backbone.View.extend({ * */ getClasses() { return this.model.getClasses().join(' '); - }, + } /** * Update attributes @@ -304,7 +304,7 @@ export default Backbone.View.extend({ keys(attr).forEach(key => attr[key] === false && delete attr[key]); $el.attr(attr); - }, + } /** * Update component content @@ -314,7 +314,7 @@ export default Backbone.View.extend({ const content = this.model.get('content'); const hasComps = this.model.components().length; this.getChildrenContainer().innerHTML = hasComps ? '' : content; - }, + } /** * Prevent default helper @@ -323,7 +323,7 @@ export default Backbone.View.extend({ */ prevDef(e) { e.preventDefault(); - }, + } /** * Render component's script @@ -333,7 +333,7 @@ export default Backbone.View.extend({ const { model, em } = this; if (!model.get('script')) return; em && em.get('Canvas').getCanvasView().updateScript(this); - }, + } /** * Return children container @@ -369,7 +369,7 @@ export default Backbone.View.extend({ } return container; - }, + } /** * This returns rect informations not affected by the canvas zoom. @@ -399,7 +399,7 @@ export default Backbone.View.extend({ assignRect(target); return rect; - }, + } isInViewport({ rect } = {}) { const { el } = this; @@ -415,7 +415,7 @@ export default Backbone.View.extend({ top <= frame.scrollBottom && left <= frameElement.offsetWidth + body.scrollLeft ); - }, + } scrollIntoView(opts = {}) { const rect = this.getOffsetRect(); @@ -435,7 +435,7 @@ export default Backbone.View.extend({ }); } } - }, + } /** * Recreate the element of the view @@ -447,18 +447,18 @@ export default Backbone.View.extend({ this._setData(); replaceWith(el, this.el); this.render(); - }, + } _setData() { const { model } = this; const collection = model.components(); const view = this; this.$el.data({ model, collection, view }); - }, + } _getFrame() { return this.config.frameView; - }, + } /** * Render children components @@ -482,14 +482,14 @@ export default Backbone.View.extend({ for (var i = 0, len = childNodes.length; i < len; i++) { container.appendChild(childNodes.shift()); } - }, + } renderAttributes() { this.updateAttributes(); this.updateClasses(); - }, + } - onAttrUpdate() {}, + onAttrUpdate() {} render() { this.renderAttributes(); @@ -500,13 +500,13 @@ export default Backbone.View.extend({ this.postRender(); return this; - }, + } postRender() { if (!this.modelOpt.temporary) { this.onRender(this._clbObj()); } - }, + } - onRender() {}, -}); + onRender() {} +}