More refactor of files to classes

src/index.js

@@ -1,8 +1,8 @@
 import { isElement, isFunction } from 'underscore';
-import $ from 'utils/cash-dom';
+import $ from './utils/cash-dom';
 import Editor from './editor';
-import polyfills from 'utils/polyfills';
+import polyfills from './utils/polyfills';
-import { getGlobal } from 'utils/mixins';
+import { getGlobal } from './utils/mixins';
 import PluginManager from './plugin_manager';
 
 polyfills();
@@ -17,7 +17,7 @@ const defaultConfig = {
   plugins: [],
 
   // Custom options for plugins
-  pluginsOpts: {}
+  pluginsOpts: {},
 };
 
 export default {
@@ -51,8 +51,7 @@ export default {
     const els = config.container;
     if (!els && !headless) throw new Error("'container' is required");
     config = { ...defaultConfig, ...config, grapesjs: this };
-    config.el =
+    config.el = !headless && (isElement(els) ? els : document.querySelector(els));
-      !headless && (isElement(els) ? els : document.querySelector(els));
     const editor = new Editor(config, { $ }).init();
     const em = editor.getModel();
 
@@ -74,7 +73,7 @@ export default {
       } else {
         em.logWarning(`Plugin ${pluginId} not found`, {
           context: 'plugins',
-          plugin: pluginId
+          plugin: pluginId,
         });
       }
     });
@@ -87,5 +86,5 @@ export default {
     editors.push(editor);
 
     return editor;
-  }
+  },
 };

src/rich_text_editor/index.js

@@ -36,8 +36,8 @@
  * @module RichTextEditor
  */
 
+import { on, hasWin } from '../utils/mixins';
 import RichTextEditor from './model/RichTextEditor';
-import { on, hasWin } from 'utils/mixins';
 import defaults from './config/config';
 
 const eventsUp = 'change:canvasOffset frame:scroll component:update';

src/rich_text_editor/model/RichTextEditor.js

@@ -2,7 +2,7 @@
 // and adapted to the GrapesJS's need
 
 import { isString } from 'underscore';
-import { on, off, getPointerEvent, getModel } from 'utils/mixins';
+import { on, off, getPointerEvent, getModel } from '../../utils/mixins';
 
 const RTE_KEY = '_rte';
 

src/selector_manager/index.js

@@ -73,9 +73,8 @@
  */
 
 import { isString, debounce, isObject, isArray } from 'underscore';
-import { isComponent, isRule } from 'utils/mixins';
+import { isComponent, isRule } from '../utils/mixins';
-import { Model, Collection } from 'common';
+import { Model, Collection, Module } from '../common';
-import Module from 'common/module';
 import defaults from './config/config';
 import Selector from './model/Selector';
 import Selectors from './model/Selectors';

src/selector_manager/model/Selector.js

@@ -1,5 +1,5 @@
-import { Model } from 'common';
 import { result, forEach, keys } from 'underscore';
+import { Model } from '../../common';
 
 const TYPE_CLASS = 1;
 const TYPE_ID = 2;
@@ -22,7 +22,7 @@ export default class Selector extends Model {
       active: true,
       private: false,
       protected: false,
-      _undo: true
+      _undo: true,
     };
   }
 
@@ -39,9 +39,7 @@ export default class Selector extends Model {
 
     const namePreEsc = this.get('name');
     const { escapeName } = config;
-    const nameEsc = escapeName
+    const nameEsc = escapeName ? escapeName(namePreEsc) : Selector.escapeName(namePreEsc);
-      ? escapeName(namePreEsc)
-      : Selector.escapeName(namePreEsc);
     this.set('name', nameEsc);
     this.em = config.em;
   }

src/selector_manager/model/Selectors.js

@@ -1,5 +1,5 @@
 import { filter } from 'underscore';
-import { Collection } from 'common';
+import { Collection } from '../../common';
 import Selector from './Selector';
 
 const combine = (tail, curr) => {
@@ -17,16 +17,11 @@ export default class Selectors extends Collection {
   }
 
   getStyleable() {
-    return filter(
+    return filter(this.models, item => item.get('active') && !item.get('private'));
-      this.models,
-      item => item.get('active') && !item.get('private')
-    );
   }
 
   getValid({ noDisabled } = {}) {
-    return filter(this.models, item => !item.get('private')).filter(item =>
+    return filter(this.models, item => !item.get('private')).filter(item => (noDisabled ? item.get('active') : 1));
-      noDisabled ? item.get('active') : 1
-    );
   }
 
   getFullString(collection, opts = {}) {

src/selector_manager/model/State.js

@@ -1,4 +1,4 @@
-import { Model } from 'common';
+import { Model } from '../../common';
 
 /**
  * @typedef State
@@ -9,7 +9,7 @@ export default class State extends Model {
   defaults() {
     return {
       name: '',
-      label: ''
+      label: '',
     };
   }
 

src/selector_manager/view/ClassTagView.js

@@ -1,8 +1,8 @@
-import Backbone from 'backbone';
+import { View } from '../../common';
 
 const inputProp = 'contentEditable';
 
-export default Backbone.View.extend({
+export default class ClassTagView extends View {
   template() {
     const { pfx, model, config } = this;
     const label = model.get('label') || '';
@@ -14,14 +14,16 @@ export default Backbone.View.extend({
         ${config.iconTagRemove}
       </span>
     `;
-  },
+  }
 
-  events: {
+  events() {
-    'click [data-tag-remove]': 'removeTag',
+    return {
-    'click [data-tag-status]': 'changeStatus',
+      'click [data-tag-remove]': 'removeTag',
-    'dblclick [data-tag-name]': 'startEditTag',
+      'click [data-tag-status]': 'changeStatus',
-    'focusout [data-tag-name]': 'endEditTag'
+      'dblclick [data-tag-name]': 'startEditTag',
-  },
+      'focusout [data-tag-name]': 'endEditTag',
+    };
+  }
 
   initialize(o = {}) {
     const config = o.config || {};
@@ -32,7 +34,7 @@ export default Backbone.View.extend({
     this.ppfx = config.pStylePrefix || '';
     this.em = config.em;
     this.listenTo(this.model, 'change:active', this.updateStatus);
-  },
+  }
 
   /**
    * Returns the element which containes the anme of the tag
@@ -44,7 +46,7 @@ export default Backbone.View.extend({
     }
 
     return this.inputEl;
-  },
+  }
 
   /**
    * Start editing tag
@@ -56,7 +58,7 @@ export default Backbone.View.extend({
     inputEl[inputProp] = true;
     inputEl.focus();
     em && em.setEditing(1);
-  },
+  }
 
   /**
    * End editing tag. If the class typed already exists the
@@ -81,7 +83,7 @@ export default Backbone.View.extend({
         model.set({ name, label });
       }
     }
-  },
+  }
 
   /**
    * Update status of the tag
@@ -90,7 +92,7 @@ export default Backbone.View.extend({
   changeStatus() {
     const { model } = this;
     model.set('active', !model.get('active'));
-  },
+  }
 
   /**
    * Remove tag from the selected component
@@ -99,7 +101,7 @@ export default Backbone.View.extend({
    */
   removeTag() {
     this.module.removeSelected(this.model);
-  },
+  }
 
   /**
    * Update status of the checkbox
@@ -117,7 +119,7 @@ export default Backbone.View.extend({
       $chk.html(iconTagOff);
       $el.addClass('opac50');
     }
-  },
+  }
 
   render() {
     const pfx = this.pfx;
@@ -127,4 +129,4 @@ export default Backbone.View.extend({
     this.updateStatus();
     return this;
   }
-});
+}

src/selector_manager/view/ClassTagsView.js

@@ -1,9 +1,9 @@
 import { isEmpty, isArray, isString, debounce } from 'underscore';
-import Backbone from 'backbone';
+import { View } from '../../common';
 import ClassTagView from './ClassTagView';
 import html from 'utils/html';
 
-export default Backbone.View.extend({
+export default class ClassTagsView extends View {
   template({ labelInfo, labelHead, iconSync, iconAdd, pfx, ppfx }) {
     return `
     <div id="${pfx}up" class="${pfx}header">
@@ -35,15 +35,17 @@ export default Backbone.View.extend({
       <div class="${pfx}label-sel">${labelInfo}:</div>
       <div class="${pfx}sels" data-selected></div>
     </div>`;
-  },
+  }
-
+
-  events: {
+  events() {
-    'change [data-states]': 'stateChanged',
+    return {
-    'click [data-add]': 'startNewTag',
+      'change [data-states]': 'stateChanged',
-    'focusout [data-input]': 'endNewTag',
+      'click [data-add]': 'startNewTag',
-    'keyup [data-input]': 'onInputKeyUp',
+      'focusout [data-input]': 'endNewTag',
-    'click [data-sync-style]': 'syncStyle',
+      'keyup [data-input]': 'onInputKeyUp',
-  },
+      'click [data-sync-style]': 'syncStyle',
+    };
+  }
 
   initialize(o = {}) {
     this.config = o.config || {};
@@ -59,6 +61,8 @@ export default Backbone.View.extend({
     const md = o.module;
     this.module = md;
     this.em = em;
+    this.componentChanged = debounce(this.componentChanged.bind(this));
+    this.checkSync = debounce(this.checkSync.bind(this));
     const toList = 'component:toggled component:update:classes';
     const toListCls = 'component:update:classes change:state';
     this.listenTo(em, toList, this.componentChanged);
@@ -74,7 +78,7 @@ export default Backbone.View.extend({
       debounce(() => this.renderStates())
     );
     this.delegateEvents();
-  },
+  }
 
   syncStyle() {
     const { em } = this;
@@ -108,7 +112,7 @@ export default Backbone.View.extend({
       ruleComponents,
       state,
     });
-  },
+  }
 
   /**
    * Triggered when a tag is removed from collection
@@ -117,7 +121,7 @@ export default Backbone.View.extend({
    */
   tagRemoved(model) {
     this.updateStateVis();
-  },
+  }
 
   /**
    * Add new model
@@ -126,7 +130,7 @@ export default Backbone.View.extend({
    */
   addNew(model) {
     this.addToClasses(model);
-  },
+  }
 
   /**
    * Start tag creation
@@ -136,7 +140,7 @@ export default Backbone.View.extend({
   startNewTag() {
     this.$addBtn.css({ display: 'none' });
     this.$input.show().focus();
-  },
+  }
 
   /**
    * End tag creation
@@ -146,7 +150,7 @@ export default Backbone.View.extend({
   endNewTag() {
     this.$addBtn.css({ display: '' });
     this.$input.hide().val('');
-  },
+  }
 
   /**
    * Checks what to do on keyup event
@@ -160,22 +164,22 @@ export default Backbone.View.extend({
     } else if (e.keyCode === 27) {
       this.endNewTag();
     }
-  },
+  }
 
   checkStates() {
     const state = this.em.getState();
     const statesEl = this.getStates();
     statesEl && statesEl.val(state);
-  },
+  }
 
   /**
    * Triggered when component is changed
    * @param  {Object} e
    * @private
    */
-  componentChanged: debounce(function ({ targets } = {}) {
+  componentChanged({ targets } = {}) {
     this.updateSelection(targets);
-  }),
+  }
 
   updateSelection(targets) {
     let trgs = targets || this.getTargets();
@@ -191,18 +195,18 @@ export default Backbone.View.extend({
     this.updateStateVis(trgs);
     this.module.__trgCustom();
     return selectors;
-  },
+  }
 
   getCommonSelectors({ targets, opts = {} } = {}) {
     const trgs = targets || this.getTargets();
     return this.module.__getCommonSelectors(trgs, opts);
-  },
+  }
 
   _commonSelectors(...args) {
     return this.module.__common(...args);
-  },
+  }
 
-  checkSync: debounce(function () {
+  checkSync() {
     const { $btnSyncEl, config, collection } = this;
     const target = this.getTarget();
     let hasStyle;
@@ -213,15 +217,15 @@ export default Backbone.View.extend({
     }
 
     $btnSyncEl && $btnSyncEl[hasStyle ? 'show' : 'hide']();
-  }),
+  }
 
   getTarget() {
     return this.target.getSelected();
-  },
+  }
 
   getTargets() {
     return this.target.getSelectedAll();
-  },
+  }
 
   /**
    * Update states visibility. Hides states in case there is no tags
@@ -234,11 +238,11 @@ export default Backbone.View.extend({
     const display = this.collection.length || avoidInline ? '' : 'none';
     this.getStatesC().css('display', display);
     this.updateSelector(target);
-  },
+  }
 
   __handleStateChange() {
     this.updateSelector(this.getTargets());
-  },
+  }
 
   /**
    * Update selector helper
@@ -254,7 +258,7 @@ export default Backbone.View.extend({
     trgs.forEach(target => result.push(this.__getName(target)));
     elSel && (elSel.innerHTML = result.join(', '));
     this.checkStates();
-  },
+  }
 
   __getName(target) {
     const { pfx, config, em } = this;
@@ -280,7 +284,7 @@ export default Backbone.View.extend({
     }
 
     return result && `<span class="${pfx}sel">${result}</span>`;
-  },
+  }
 
   /**
    * Triggered when the select with states is changed
@@ -291,7 +295,7 @@ export default Backbone.View.extend({
     const { em } = this;
     const { value } = ev.target;
     em.set('state', value);
-  },
+  }
 
   /**
    * Add new tag to collection, if possible, and to the component
@@ -304,7 +308,7 @@ export default Backbone.View.extend({
     this.module.addSelected({ label });
     this.endNewTag();
     // this.updateStateVis(); // Check if required
-  },
+  }
 
   /**
    * Add new object to collection
@@ -326,7 +330,7 @@ export default Backbone.View.extend({
     fragment ? fragment.appendChild(rendered) : classes.append(rendered);
 
     return rendered;
-  },
+  }
 
   /**
    * Render the collection of classes
@@ -338,7 +342,7 @@ export default Backbone.View.extend({
     classes.empty();
     this.collection.each(model => this.addToClasses(model, frag));
     classes.append(frag);
-  },
+  }
 
   /**
    * Return classes element
@@ -347,7 +351,7 @@ export default Backbone.View.extend({
    */
   getClasses() {
     return this.$el.find('[data-selectors]');
-  },
+  }
 
   /**
    * Return states element
@@ -360,7 +364,7 @@ export default Backbone.View.extend({
       this.$states = el[0] && el;
     }
     return this.$states;
-  },
+  }
 
   /**
    * Return states container element
@@ -370,7 +374,7 @@ export default Backbone.View.extend({
   getStatesC() {
     if (!this.$statesC) this.$statesC = this.$el.find('#' + this.stateInputC);
     return this.$statesC;
-  },
+  }
 
   renderStates() {
     const { module, em } = this;
@@ -386,7 +390,7 @@ export default Backbone.View.extend({
     const statesEl = this.getStates();
     statesEl && statesEl.html(`<option value="">${labelStates}</option>${options}`);
     this.checkStates();
-  },
+  }
 
   render() {
     const { em, pfx, ppfx, config, $el, el } = this;
@@ -412,5 +416,5 @@ export default Backbone.View.extend({
     this.renderClasses();
     $el.attr('class', `${this.className} ${ppfx}one-bg ${ppfx}two-color`);
     return this;
-  },
+  }
-});
+}

src/storage_manager/index.js

@@ -51,10 +51,10 @@
  * @module StorageManager
  */
 
+import Module from '../common/module';
 import defaults from './config/config';
 import LocalStorage from './model/LocalStorage';
 import RemoteStorage from './model/RemoteStorage';
-import Module from 'common/module';
 import { isEmpty, isFunction } from 'underscore';
 
 const eventStart = 'storage:start';

src/storage_manager/model/LocalStorage.js

@@ -1,4 +1,4 @@
-import { hasWin } from 'utils/mixins';
+import { hasWin } from '../../utils/mixins';
 
 export default class LocalStorage {
   async store(data, opts = {}) {

src/storage_manager/model/RemoteStorage.js

@@ -1,5 +1,5 @@
-import fetch from 'utils/fetch';
 import { isUndefined, isFunction, isString } from 'underscore';
+import fetch from '../../utils/fetch';
 
 export default class RemoteStorage {
   async store(data, opts = {}) {

src/style_manager/index.js

@@ -64,9 +64,8 @@
  */
 
 import { isUndefined, isArray, isString, debounce, bindAll } from 'underscore';
-import { isComponent } from 'utils/mixins';
+import { isComponent } from '../utils/mixins';
-import Module from 'common/module';
+import { Model, Module } from '../common';
-import { Model } from 'common';
 import defaults from './config/config';
 import Sector from './model/Sector';
 import Sectors from './model/Sectors';

src/style_manager/model/Layer.js

@@ -1,5 +1,5 @@
-import { Model } from 'common';
+import { Model } from '../../common';
-import { camelCase } from 'utils/mixins';
+import { camelCase } from '../../utils/mixins';
 
 export default class Layer extends Model {
   defaults() {

src/style_manager/model/Layers.js

@@ -1,4 +1,4 @@
-import { Collection } from 'common';
+import { Collection } from '../../common';
 import Layer from './Layer';
 
 export default class Layers extends Collection {

src/style_manager/model/Property.js

@@ -1,6 +1,6 @@
-import { Model } from 'common';
 import { isUndefined, isString, isArray, result, keys, each, includes } from 'underscore';
-import { capitalize, camelCase, hasWin } from 'utils/mixins';
+import { Model } from '../../common';
+import { capitalize, camelCase, hasWin } from '../../utils/mixins';
 
 /**
  * @typedef Property

src/style_manager/model/PropertyNumber.js

@@ -1,7 +1,7 @@
 import { isUndefined } from 'underscore';
 import Property from './Property';
-import InputNumber from 'domain_abstract/ui/InputNumber';
+import InputNumber from '../../domain_abstract/ui/InputNumber';
-import { hasWin } from 'utils/mixins';
+import { hasWin } from '../../utils/mixins';
 
 /**
  * @typedef PropertyNumber

src/style_manager/model/PropertySelect.js

@@ -1,6 +1,6 @@
-import Property from './Property';
-import { isDef } from 'utils/mixins';
 import { isString } from 'underscore';
+import { isDef } from '../../utils/mixins';
+import Property from './Property';
 
 /**
  * @typedef PropertySelect

src/style_manager/model/PropertyStack.js

@@ -1,8 +1,8 @@
 import { keys, isUndefined, isArray, isString, isNumber } from 'underscore';
+import { camelCase } from '../../utils/mixins';
 import PropertyComposite, { isNumberType } from './PropertyComposite';
 import PropertyBase from './Property';
 import Layers from './Layers';
-import { camelCase } from 'utils/mixins';
 
 const VALUES_REG = /,(?![^\(]*\))/;
 const PARTS_REG = /\s(?![^(]*\))/;

src/style_manager/model/Sector.js

@@ -1,5 +1,5 @@
-import { Model } from 'common';
+import { extend, isString } from 'underscore';
-import { extend, isString, isArray } from 'underscore';
+import { Model } from '../../common';
 import Properties from './Properties';
 
 /**

src/style_manager/model/Sectors.js

@@ -1,4 +1,4 @@
-import { Collection } from 'common';
+import { Collection } from '../../common';
 import Sector from './Sector';
 
 export default class Sectors extends Collection {

src/style_manager/view/LayerView.js

@@ -1,4 +1,4 @@
-import { View } from 'backbone';
+import { View } from '../../common';
 import { keys } from 'underscore';
 
 export default class LayerView extends View {

src/style_manager/view/LayersView.js

@@ -1,4 +1,4 @@
-import { View } from 'common';
+import { View } from '../../common';
 import LayerView from './LayerView';
 
 export default class LayersView extends View {

src/style_manager/view/PropertiesView.js

@@ -1,5 +1,5 @@
-import { View } from 'common';
+import { View } from '../../common';
-import { appendAtIndex } from 'utils/dom';
+import { appendAtIndex } from '../../utils/dom';
 
 export default class PropertiesView extends View {
   initialize(o) {

src/style_manager/view/PropertyColorView.js

@@ -1,5 +1,5 @@
 import PropertyNumberView from './PropertyNumberView';
-import InputColor from 'domain_abstract/ui/InputColor';
+import InputColor from '../../domain_abstract/ui/InputColor';
 
 export default class PropertyColorView extends PropertyNumberView {
   setValue(value) {

src/style_manager/view/PropertyView.js

@@ -1,6 +1,6 @@
-import { View } from 'common';
 import { bindAll, isUndefined, debounce } from 'underscore';
-import { isObject } from 'utils/mixins';
+import { View } from '../../common';
+import { isObject } from '../../utils/mixins';
 
 const clearProp = 'data-clear-style';
 

src/style_manager/view/SectorView.js

@@ -1,5 +1,5 @@
-import { View } from 'common';
+import { View } from '../../common';
-import html from 'utils/html';
+import html from '../../utils/html';
 import PropertiesView from './PropertiesView';
 
 export default class SectorView extends View {

src/style_manager/view/SectorsView.js

@@ -1,5 +1,5 @@
-import { View } from 'common';
+import { View } from '../../common';
-import { appendAtIndex } from 'utils/dom';
+import { appendAtIndex } from '../../utils/dom';
 import SectorView from './SectorView';
 
 export default class SectorsView extends View {

src/trait_manager/index.js

@@ -1,4 +1,5 @@
 import { debounce } from 'underscore';
+import { Model, Module } from '../common';
 import defaults from './config/config';
 import TraitsView from './view/TraitsView';
 import TraitView from './view/TraitView';
@@ -7,7 +8,6 @@ import TraitCheckboxView from './view/TraitCheckboxView';
 import TraitNumberView from './view/TraitNumberView';
 import TraitColorView from './view/TraitColorView';
 import TraitButtonView from './view/TraitButtonView';
-import { Model, Module } from 'common';
 
 export const evAll = 'trait';
 export const evPfx = `${evAll}:`;

src/trait_manager/model/Trait.js

@@ -1,5 +1,5 @@
-import { Model } from 'common';
 import { isUndefined } from 'underscore';
+import { Model } from '../../common';
 
 /**
  * @typedef Trait

src/trait_manager/model/Traits.js

@@ -1,5 +1,5 @@
-import { Collection } from 'common';
 import { isString, isArray } from 'underscore';
+import { Collection } from '../../common';
 import Trait from './Trait';
 import TraitFactory from './TraitFactory';
 

src/trait_manager/view/TraitColorView.js

@@ -1,5 +1,5 @@
 import TraitView from './TraitView';
-import InputColor from 'domain_abstract/ui/InputColor';
+import InputColor from '../../domain_abstract/ui/InputColor';
 
 export default class TraitColorView extends TraitView {
   templateInput = '';

src/trait_manager/view/TraitNumberView.js

@@ -1,6 +1,6 @@
-import TraitView from './TraitView';
 import { isUndefined } from 'underscore';
-import InputNumber from 'domain_abstract/ui/InputNumber';
+import InputNumber from '../../domain_abstract/ui/InputNumber';
+import TraitView from './TraitView';
 
 export default class TraitNumberView extends TraitView {
   getValueForTarget() {

src/trait_manager/view/TraitsView.js

@@ -1,4 +1,4 @@
-import DomainViews from 'domain_abstract/view/DomainViews';
+import DomainViews from '../../domain_abstract/view/DomainViews';
 import TraitView from './TraitView';
 
 export default class TraitsView extends DomainViews {

src/utils/ColorPicker.js

@@ -4,7 +4,7 @@
 // https://github.com/bgrins/spectrum
 // Author: Brian Grinstead
 // License: MIT
-import { hasWin } from 'utils/mixins';
+import { hasWin } from './mixins';
 
 export default function ($, undefined) {
   'use strict';

src/utils/Dragger.js

@@ -1,5 +1,5 @@
 import { bindAll, isFunction, result, isUndefined } from 'underscore';
-import { on, off, isEscKey, getPointerEvent } from 'utils/mixins';
+import { on, off, isEscKey, getPointerEvent } from './mixins';
 
 const resetPos = () => ({ x: 0, y: 0 });
 
@@ -61,7 +61,7 @@ export default class Dragger {
       doc: 0,
 
       // Scale result points, can also be a function
-      scale: 1
+      scale: 1,
     };
     bindAll(this, 'drag', 'stop', 'keyHandle', 'handleScroll');
     this.setOptions(opts);
@@ -76,7 +76,7 @@ export default class Dragger {
   setOptions(opts = {}) {
     this.opts = {
       ...this.opts,
-      ...opts
+      ...opts,
     };
   }
 
@@ -97,7 +97,7 @@ export default class Dragger {
     const actualScroll = this.getScrollInfo();
     const scrollDiff = {
       x: actualScroll.x - lastScroll.x,
-      y: actualScroll.y - lastScroll.y
+      y: actualScroll.y - lastScroll.y,
     };
     this.move(delta.x + scrollDiff.x, delta.y + scrollDiff.y);
     this.lastScrollDiff = scrollDiff;
@@ -132,12 +132,12 @@ export default class Dragger {
     const currentPos = this.getPointerPos(ev);
     const glDiff = {
       x: globScrollDiff.x + lastScrollDiff.x,
-      y: globScrollDiff.y + lastScrollDiff.y
+      y: globScrollDiff.y + lastScrollDiff.y,
     };
     this.globScrollDiff = glDiff;
     const delta = {
       x: currentPos.x - startPointer.x + glDiff.x,
-      y: currentPos.y - startPointer.y + glDiff.y
+      y: currentPos.y - startPointer.y + glDiff.y,
     };
     this.lastScrollDiff = resetPos();
     let { lockedAxis } = this;
@@ -226,15 +226,13 @@ export default class Dragger {
     return {
       newDelta,
       trgX: this.trgX,
-      trgY: this.trgY
+      trgY: this.trgY,
     };
   }
 
   isPointIn(src, trg, { offset } = {}) {
     const ofst = offset || this.opts.snapOffset;
-    return (
+    return (src >= trg && src <= trg + ofst) || (src <= trg && src >= trg - ofst);
-      (src >= trg && src <= trg + ofst) || (src <= trg && src >= trg - ofst)
-    );
   }
 
   setGuideLock(guide, value) {
@@ -290,7 +288,7 @@ export default class Dragger {
     this.position = {
       x: xPos,
       y: yPos,
-      end
+      end,
     };
 
     isFunction(setPosition) && setPosition(this.position);
@@ -344,7 +342,7 @@ export default class Dragger {
       ? getPos(ev)
       : {
           x: pEv.clientX,
-          y: pEv.clientY
+          y: pEv.clientY,
         };
   }
 
@@ -358,7 +356,7 @@ export default class Dragger {
     } else if (el) {
       result = {
         x: parseFloat(el.style.left),
-        y: parseFloat(el.style.top)
+        y: parseFloat(el.style.top),
       };
     }
 
@@ -371,7 +369,7 @@ export default class Dragger {
 
     return {
       y: body ? body.scrollTop : 0,
-      x: body ? body.scrollLeft : 0
+      x: body ? body.scrollLeft : 0,
     };
   }
 

src/utils/Droppable.js

@@ -2,8 +2,8 @@
   This class makes the canvas droppable
  */
 
-import { on, off } from 'utils/mixins';
 import { bindAll, indexOf } from 'underscore';
+import { on, off } from './mixins';
 
 export default class Droppable {
   constructor(em, rootEl) {
@@ -17,13 +17,7 @@ export default class Droppable {
     const els = Array.isArray(el) ? el : [el];
     this.el = el;
     this.counter = 0;
-    bindAll(
+    bindAll(this, 'handleDragEnter', 'handleDragOver', 'handleDrop', 'handleDragLeave');
-      this,
-      'handleDragEnter',
-      'handleDragOver',
-      'handleDrop',
-      'handleDragLeave'
-    );
     els.forEach(el => this.toggleEffects(el, 1));
 
     return this;
@@ -52,7 +46,7 @@ export default class Droppable {
           },
           customTarget({ event }) {
             return doc.elementFromPoint(event.clientX, event.clientY);
-          }
+          },
         }
       : null;
     method(frameEl, 'pointerenter', this.handleDragEnter);
@@ -123,7 +117,7 @@ export default class Droppable {
           }
           this.handleDragEnd(comp, dt);
           target.remove();
-        }
+        },
       });
       dragStop = cancel => dragger.stop(ev, { cancel });
       dragContent = cnt => (content = cnt);
@@ -141,7 +135,7 @@ export default class Droppable {
         pfx: 'gjs-',
         onEndMove: model => this.handleDragEnd(model, dt),
         document: this.el.ownerDocument,
-        ...(this.sortOpts || {})
+        ...(this.sortOpts || {}),
       });
       sorter.setDropContent(content);
       sorter.startSort();
@@ -208,7 +202,7 @@ export default class Droppable {
           content.push({
             type,
             file,
-            attributes: { alt: file.name }
+            attributes: { alt: file.name },
           });
         }
       }
@@ -220,7 +214,7 @@ export default class Droppable {
       content = {
         type: 'link',
         attributes: { href: content },
-        content: content
+        content: content,
       };
     } else if (indexOf(types, 'text/json') >= 0) {
       const json = dt && dt.getData('text/json');

src/utils/Resizer.js

@@ -1,5 +1,5 @@
 import { bindAll, defaults, isFunction, each } from 'underscore';
-import { on, off, normalizeFloat } from 'utils/mixins';
+import { on, off, normalizeFloat } from './mixins';
 
 var defaultOpts = {
   // Function which returns custom X and Y coordinates of the mouse
@@ -66,7 +66,7 @@ var defaultOpts = {
   cr: 1, // Center right
   bl: 1, // Bottom left
   bc: 1, // Bottom center
-  br: 1 // Bottom right
+  br: 1, // Bottom right
 };
 
 var createHandler = (name, opts) => {
@@ -84,7 +84,7 @@ var getBoundingRect = (el, win) => {
     left: rect.left + w.pageXOffset,
     top: rect.top + w.pageYOffset,
     width: rect.width,
-    height: rect.height
+    height: rect.height,
   };
 };
 
@@ -267,23 +267,23 @@ class Resizer {
       t: rect.top,
       l: rect.left,
       w: rect.width,
-      h: rect.height
+      h: rect.height,
     };
     this.rectDim = {
       t: rect.top,
       l: rect.left,
       w: rect.width,
-      h: rect.height
+      h: rect.height,
     };
     this.startPos = {
       x: e.clientX,
-      y: e.clientY
+      y: e.clientY,
     };
     this.parentDim = {
       t: parentRect.top,
       l: parentRect.left,
       w: parentRect.width,
-      h: parentRect.height
+      h: parentRect.height,
     };
 
     // Listen events
@@ -291,8 +291,7 @@ class Resizer {
     on(doc, 'mousemove', this.move);
     on(doc, 'keydown', this.handleKeyDown);
     on(doc, 'mouseup', this.stop);
-    isFunction(this.onStart) &&
+    isFunction(this.onStart) && this.onStart(e, { docs: doc, config, el, resizer });
-      this.onStart(e, { docs: doc, config, el, resizer });
     this.toggleFrames(1);
     this.move(e);
   }
@@ -308,18 +307,18 @@ class Resizer {
       ? mouseFetch(e)
       : {
           x: e.clientX,
-          y: e.clientY
+          y: e.clientY,
         };
 
     this.currentPos = currentPos;
     this.delta = {
       x: currentPos.x - this.startPos.x,
-      y: currentPos.y - this.startPos.y
+      y: currentPos.y - this.startPos.y,
     };
     this.keys = {
       shift: e.shiftKey,
       ctrl: e.ctrlKey,
-      alt: e.altKey
+      alt: e.altKey,
     };
 
     this.rectDim = this.calc(this);
@@ -367,7 +366,7 @@ class Resizer {
         store,
         selectedHandler,
         resizer,
-        config
+        config,
       });
     } else {
       const elStyle = el.style;
@@ -396,8 +395,8 @@ class Resizer {
       resizer: this,
       opts: {
         ...opts,
-        ...opt
+        ...opt,
-      }
+      },
     });
   }
 
@@ -461,15 +460,13 @@ class Resizer {
     const parentH = this.parentDim.h;
     const unitWidth = this.opts.unitWidth;
     const unitHeight = this.opts.unitHeight;
-    const startW =
+    const startW = unitWidth === '%' ? (startDim.w / 100) * parentW : startDim.w;
-      unitWidth === '%' ? (startDim.w / 100) * parentW : startDim.w;
+    const startH = unitHeight === '%' ? (startDim.h / 100) * parentH : startDim.h;
-    const startH =
-      unitHeight === '%' ? (startDim.h / 100) * parentH : startDim.h;
     var box = {
       t: 0,
       l: 0,
       w: startW,
-      h: startH
+      h: startH,
     };
 
     if (!data) return;
@@ -537,5 +534,5 @@ class Resizer {
 export default {
   init(opts) {
     return new Resizer(opts);
-  }
+  },
 };

src/utils/extender.js

@@ -1,4 +1,4 @@
-import { isObject, isString, each, isUndefined } from 'underscore';
+import { isObject } from 'underscore';
 
 export default ({ $ }) => {
   if ($ && $.prototype && $.prototype.constructor.name !== 'jQuery') {
@@ -6,15 +6,15 @@ export default ({ $ }) => {
 
     // Additional helpers
 
-    fn.hide = function() {
+    fn.hide = function () {
       return this.css('display', 'none');
     };
 
-    fn.show = function() {
+    fn.show = function () {
       return this.css('display', 'block');
     };
 
-    fn.focus = function() {
+    fn.focus = function () {
       const el = this.get(0);
       el && el.focus();
       return this;
@@ -53,11 +53,11 @@ export default ({ $ }) => {
 
     // For spectrum compatibility
 
-    fn.bind = function(ev, h) {
+    fn.bind = function (ev, h) {
       return this.on(ev, h);
     };
 
-    fn.unbind = function(ev, h) {
+    fn.unbind = function (ev, h) {
       if (isObject(ev)) {
         for (let name in ev) {
           ev.hasOwnProperty(name) && this.off(name, ev[name]);
@@ -69,37 +69,37 @@ export default ({ $ }) => {
       }
     };
 
-    fn.click = function(h) {
+    fn.click = function (h) {
       return h ? this.on('click', h) : this.trigger('click');
     };
 
-    fn.change = function(h) {
+    fn.change = function (h) {
       return h ? this.on('change', h) : this.trigger('change');
     };
 
-    fn.keydown = function(h) {
+    fn.keydown = function (h) {
       return h ? this.on('keydown', h) : this.trigger('keydown');
     };
 
-    fn.delegate = function(selector, events, data, handler) {
+    fn.delegate = function (selector, events, data, handler) {
       if (!handler) {
         handler = data;
       }
 
-      return this.on(events, selector, function(e) {
+      return this.on(events, selector, function (e) {
         e.data = data;
         handler(e);
       });
     };
 
-    fn.scrollLeft = function() {
+    fn.scrollLeft = function () {
       let el = this.get(0);
       el = el.nodeType == 9 ? el.defaultView : el;
       let win = el instanceof Window ? el : null;
       return win ? win.pageXOffset : el.scrollLeft || 0;
     };
 
-    fn.scrollTop = function() {
+    fn.scrollTop = function () {
       let el = this.get(0);
       el = el.nodeType == 9 ? el.defaultView : el;
       let win = el instanceof Window ? el : null;
@@ -107,7 +107,7 @@ export default ({ $ }) => {
     };
 
     const offset = $.prototype.offset;
-    fn.offset = function(coords) {
+    fn.offset = function (coords) {
       let top, left;
 
       if (coords) {
@@ -125,7 +125,7 @@ export default ({ $ }) => {
       return offset.call(this);
     };
 
-    $.map = function(items, clb) {
+    $.map = function (items, clb) {
       const ar = [];
 
       for (var i = 0; i < items.length; i++) {
@@ -137,11 +137,11 @@ export default ({ $ }) => {
 
     const indexOf = Array.prototype.indexOf;
 
-    $.inArray = function(val, arr, i) {
+    $.inArray = function (val, arr, i) {
       return arr == null ? -1 : indexOf.call(arr, val, i);
     };
 
-    $.Event = function(src, props) {
+    $.Event = function (src, props) {
       if (!(this instanceof $.Event)) {
         return new $.Event(src, props);
       }

src/utils/fetch.js

@@ -1,5 +1,5 @@
 import Promise from 'promise-polyfill';
-import { hasWin } from 'utils/mixins';
+import { hasWin } from './mixins';
 
 if (hasWin()) {
   window.Promise = window.Promise || Promise;
@@ -21,7 +21,7 @@ export default typeof fetch == 'function'
           res({
             status: req.status,
             statusText: req.statusText,
-            text: () => Promise.resolve(req.responseText)
+            text: () => Promise.resolve(req.responseText),
           });
         req.onerror = rej;