Add `grapesjs.$` as a reference to cash

src/domain_abstract/ui/InputColor.js

@@ -1,5 +1,6 @@
 const Input = require('./Input');
-const Spectrum = require('spectrum-colorpicker');
+//require('spectrum-colorpicker');
+require('utils/ColorPicker');
 const $ = Backbone.$;
 
 module.exports = Input.extend({
@@ -63,7 +64,6 @@ module.exports = Input.extend({
       var colorEl = $(`<div class="${this.colorCls}"></div>`);
       var cpStyle = colorEl.get(0).style;
       var elToAppend = this.target && this.target.config ? this.target.config.el : '';
-
       const getColor = color => {
         let cl = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
         return cl.replace(/ /g, '');
@@ -71,6 +71,8 @@ module.exports = Input.extend({
 
       let changed = 0;
       let previousСolor;
+      this.$el.find(`.${this.colorHolderClass}`).append(colorEl);
+
       colorEl.spectrum({
         appendTo: elToAppend || 'body',
         maxSelectionSize: 8,
@@ -112,10 +114,4 @@ module.exports = Input.extend({
     return this.colorEl;
   },
 
-  render() {
-    Input.prototype.render.apply(this, arguments);
-    this.$el.find(`.${this.colorHolderClass}`).append(this.getColorEl());
-    return this;
-  }
-
 });

src/grapesjs/index.js

@@ -1,3 +1,4 @@
+import $ from 'cash-dom';
 import { defaults } from 'underscore';
 
 module.exports = (() => {
@@ -9,13 +10,15 @@ module.exports = (() => {
 
   return {
 
-    // Will be replaced on build
+    $,
-    version: '<# VERSION #>',
 
     editors,
 
     plugins,
 
+    // Will be replaced on build
+    version: '<# VERSION #>',
+
     /**
      * Initializes an editor based on passed options
      * @param {Object} config Configuration object

src/utils/extender.js

@@ -246,11 +246,17 @@ module.exports = ({$, Backbone}) => {
     }
 
     fn.scrollLeft = function() {
-      return this.get(0).scrollLeft;
+      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() {
-      return this.get(0).scrollTop;
+      let el = this.get(0);
+      el = el.nodeType == 9 ? el.defaultView : el;
+      let win = el instanceof Window ? el : null;
+      return win ? win.pageYOffset : el.scrollTop || 0;
     }
 
     fn.offset = function(coords) {

test/helper.js

@@ -1,7 +1,6 @@
 import _ from 'underscore';
 import expect from 'expect';
 import sinon from 'sinon';
-import grapesjs from './../src';
 import { JSDOM } from 'jsdom';
 
 const dom = new JSDOM('<!doctype html><html><body></body></html>');
@@ -34,7 +33,7 @@ global.document = window.document;
 global._ = _;
 global.expect = expect;
 global.sinon = sinon;
-global.grapesjs = grapesjs;
+global.grapesjs = require('./../src');
 global.Backbone = require('Backbone');
 global.localStorage = localStorage;
 global.SVGElement = global.Element;

test/specs/selector_manager/index.js

@@ -79,7 +79,7 @@ describe('SelectorManager', () => {
 
   Models.run();
 
-  describe.only('Views', () => {
+  describe('Views', () => {
     ClassTagView.run();
     ClassTagsView.run();
   });