From 0b54f5946bc15c27770b0243522e7a1bf73f70cb Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sun, 24 Sep 2017 12:31:34 +0200
Subject: [PATCH] Remove jQuery and fix some methods

---
 index.html                                  |  2 +-
 package.json                                |  1 +
 src/domain_abstract/ui/InputColor.js        |  2 ++
 src/editor/model/Editor.js                  |  8 +++---
 src/grapesjs/index.js                       |  9 ++++--
 src/style_manager/view/PropertyRadioView.js | 32 +++++++++++----------
 src/utils/cashAdds.js                       |  9 ++++++
 webpack.config.js                           |  8 ------
 8 files changed, 41 insertions(+), 30 deletions(-)
 create mode 100644 src/utils/cashAdds.js

diff --git a/index.html b/index.html
index 51a4ca956..6e896a7ef 100755
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>GrapesJS</title>
     <link rel="stylesheet" href="dist/css/grapes.min.css">
-    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <!-- script src="node_modules/jquery/dist/jquery.min.js"></script -->
     <script src="dist/grapes.min.js"></script>
 
   </head>
diff --git a/package.json b/package.json
index bd8c427ce..8ef1991ed 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "backbone": "^1.3.3",
     "backbone-undo": "^0.2.5",
+    "cash-dom": "^1.3.5",
     "codemirror": "^5.21.0",
     "codemirror-formatting": "^1.0.0",
     "font-awesome": "^4.7.0",
diff --git a/src/domain_abstract/ui/InputColor.js b/src/domain_abstract/ui/InputColor.js
index 7a4012192..a63830c4f 100644
--- a/src/domain_abstract/ui/InputColor.js
+++ b/src/domain_abstract/ui/InputColor.js
@@ -1,6 +1,7 @@
 var Backbone = require('backbone');
 var Input = require('./Input');
 var Spectrum = require('spectrum-colorpicker');
+const $ = Backbone.$;
 
 module.exports = Input.extend({
 
@@ -55,6 +56,7 @@ module.exports = Input.extend({
     if (!this.colorEl) {
       const self = this;
       var model = this.model;
+
       var colorEl = $('<div>', {class: this.colorCls});
       var cpStyle = colorEl.get(0).style;
       var elToAppend = this.target && this.target.config ? this.target.config.el : '';
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index 72b2a0066..93c30ebed 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -18,10 +18,10 @@ require('block_manager'),
 require('trait_manager'),
 ];
 
-var Backbone = require('backbone');
-var UndoManager = require('backbone-undo');
-var key = require('keymaster');
-var timedInterval;
+const Backbone = require('backbone');
+const UndoManager = require('backbone-undo');
+const key = require('keymaster');
+let timedInterval;
 
 if (!Backbone.$) {
   Backbone.$ = $;
diff --git a/src/grapesjs/index.js b/src/grapesjs/index.js
index 8fb20022e..f9b0bb8e1 100644
--- a/src/grapesjs/index.js
+++ b/src/grapesjs/index.js
@@ -4,9 +4,12 @@ module.exports = (() => {
   const defaultConfig = require('./config/config');
   const Editor = require('editor');
   const PluginManager = require('plugin_manager');
+  const cash = require('cash-dom');
   const plugins = new PluginManager();
   const editors = [];
 
+  require('utils/cashAdds')(cash);
+
   return {
 
     // Will be replaced on build
@@ -36,10 +39,12 @@ module.exports = (() => {
      */
     init(config = {}) {
       const els = config.container;
+      let $ = $ || '';
 
       // Make a missing $ more verbose
-      if (isUndefined($)) {
-        throw 'jQuery not found';
+      if (!$) {
+        $ = cash;
+        window.$ = $;
       }
 
       if (!els) {
diff --git a/src/style_manager/view/PropertyRadioView.js b/src/style_manager/view/PropertyRadioView.js
index 292660d7c..3b489d2c1 100644
--- a/src/style_manager/view/PropertyRadioView.js
+++ b/src/style_manager/view/PropertyRadioView.js
@@ -18,7 +18,7 @@ module.exports = require('./PropertyView').extend({
     const prop = model.get('property');
     const options = model.get('list') || model.get('options') || [];
 
-    if (!this.$input) {
+    if (!this.input) {
       if(options && options.length) {
         let inputStr = '';
 
@@ -31,31 +31,33 @@ module.exports = require('./PropertyView').extend({
             <div class="${ppfx}radio-item">
               <input type="radio" class="${pfx}radio" id="${id}" name="${prop}" value="${el.value}"/>
               <label class="${cl || itemCls}" ${titleAttr} for="${id}">${cl ? '' : labelTxt}</label>
-            </div>`;
+            </div>
+          `;
         });
 
-        this.$inputEl = $(inputStr);
-        this.input = this.$inputEl.get(0);
-        this.$el.find(`#${pfx}input-holder`).html(this.$inputEl);
-        this.$input = this.$inputEl.find(`input[name="${prop}"]`);
+        const inputHld = this.el.querySelector(`#${pfx}input-holder`);
+        inputHld.innerHTML = `<div>${inputStr}</div>`;
+        this.input = inputHld.firstChild;
       }
     }
   },
-
+  /*
   getInputValue() {
     return this.$input ? this.$el.find('input:checked').val() : '';
   },
+*/
+  getInputValue() {
+    const input = this.getInputEl();
+    const inputIn = input ? input.querySelector('input:checked') : '';
+    return inputIn ? inputIn.value : '';
+  },
 
   setValue(value) {
     const model = this.model;
-    var v = model.get('value') || model.getDefaultValue();
-
-    if (value) {
-      v  = value;
-    }
-
-    if(this.$input)
-      this.$input.filter(`[value="${v}"]`).prop('checked', true);
+    let val = value || model.get('value') || model.getDefaultValue();
+    const input = this.getInputEl();
+    const inputIn = input ? input.querySelector(`[value="${val}"]`) : '';
+    inputIn && (inputIn.checked = true);
   },
 
 });
diff --git a/src/utils/cashAdds.js b/src/utils/cashAdds.js
new file mode 100644
index 000000000..c3bb0fd09
--- /dev/null
+++ b/src/utils/cashAdds.js
@@ -0,0 +1,9 @@
+module.exports = ($) => {
+  $.fn.hide = function() {
+    return this.css('display', 'none');
+  }
+
+  $.fn.show = function() {
+    return this.css('display', 'block');
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
index 0f33bc9ea..03ede1cf1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,14 +24,6 @@ module.exports = {
       library: 'grapesjs',
       libraryTarget: 'umd',
   },
-  externals: {
-    jquery: {
-      commonjs2: 'jquery',
-      commonjs: 'jquery',
-      amd: 'jquery',
-      root: 'jQuery'
-    }
-  },
   plugins: plugins,
   module: {
     loaders: [{