Remove some not compatible jquery method

src/canvas/view/CanvasView.js

@@ -326,7 +326,7 @@ module.exports = Backbone.View.extend({
    */
   getJsContainer() {
     if (!this.jsContainer) {
-      this.jsContainer = $('<div>', {class: this.ppfx + 'js-cont'}).get(0);
+      this.jsContainer = $(`<div class="${this.ppfx}js-cont">`).get(0);
     }
     return this.jsContainer;
   },

src/commands/view/ExportTemplate.js

@@ -50,7 +50,7 @@ module.exports = {
       var oCsslEd = this.buildEditor('css', 'hopscotch', 'CSS');
       this.htmlEditor = oHtmlEd.el;
       this.cssEditor = oCsslEd.el;
-      this.$editors = $('<div>', {class: this.pfx + 'export-dl'});
+      this.$editors = $(`<div class="${this.pfx}export-dl">`);
       this.$editors.append(oHtmlEd.$el).append(oCsslEd.$el);
     }
 

src/commands/view/OpenStyleManager.js

@@ -27,12 +27,9 @@ module.exports = {
 
       this.$cn2.append(em.StyleManager.render());
       var smConfig = em.StyleManager.getConfig();
+      const pfx = smConfig.stylePrefix;
       // Create header
-      this.$header  = $('<div>', {
-        class: smConfig.stylePrefix + 'header',
-        text: smConfig.textNoElement,
-      });
-      //this.$cn = this.$cn.add(this.$header);
+      this.$header  = $(`<div class="${pfx}header">${smConfig.textNoElement}</div>`);
       this.$cn.append(this.$header);
 
       // Create panel if not exists

src/commands/view/SelectComponent.js

@@ -1,7 +1,7 @@
-var ToolbarView = require('dom_components/view/ToolbarView');
-var Toolbar = require('dom_components/model/Toolbar');
-var key = require('keymaster');
-var Backbone = require('backbone');
+const ToolbarView = require('dom_components/view/ToolbarView');
+const Toolbar = require('dom_components/model/Toolbar');
+const key = require('keymaster');
+const Backbone = require('backbone');
 let showOffsets;
 const $ = Backbone.$;
 

src/commands/view/ShowOffset.js

@@ -40,8 +40,8 @@ module.exports = {
       var stateLow = state.toLowerCase();
       var marginName = stateLow + 'margin-v';
       var paddingName = stateLow + 'padding-v';
-      var marginV = $('<div>', {class: ppfx + marginName}).get(0);
-      var paddingV = $('<div>', {class: ppfx + paddingName}).get(0);
+      var marginV = $(`<div class="${ppfx}marginName">`).get(0);
+      var paddingV = $(`<div class="${ppfx}paddingName">`).get(0);
       var marginEls = ppfx + marginName + '-el';
       var paddingEls = ppfx + paddingName + '-el';
       const fullMargName = `${marginEls} ${ppfx + marginName}`;

src/domain_abstract/ui/Input.js

@@ -58,11 +58,9 @@ module.exports = Backbone.View.extend({
    */
   getInputEl() {
     if(!this.inputEl) {
-      this.inputEl = $('<input>', {
-        type: 'text',
-        class: this.inputCls,
-        placeholder: this.model.get('defaults')
-      });
+      const plh = this.model.get('defaults');
+      const cls = this.inputCls;
+      this.inputEl = $(`<input type="text" class="${cls}" placeholder="${plh}">`);
     }
     return this.inputEl.get(0);
   },

src/domain_abstract/ui/InputColor.js

@@ -57,7 +57,7 @@ module.exports = Input.extend({
       const self = this;
       var model = this.model;
 
-      var colorEl = $('<div>', {class: this.colorCls});
+      var colorEl = $(`<div class="${this.colorCls}">`);
       var cpStyle = colorEl.get(0).style;
       var elToAppend = this.target && this.target.config ? this.target.config.el : '';
 

src/domain_abstract/ui/InputNumber.js

@@ -101,11 +101,9 @@ module.exports = Backbone.View.extend({
    */
   getInputEl() {
     if(!this.inputEl) {
-      this.inputEl = $('<input>', {
-        type: 'text',
-        class: this.inputCls,
-        placeholder: this.model.get('defaults')
-      });
+      const cls = this.inputCls;
+      const plh = this.model.get('defaults');
+      this.inputEl = $(`<input type="text" class="${cls}" placeholder="${plh}">`);
     }
     return this.inputEl.get(0);
   },

src/style_manager/view/PropertyCompositeView.js

@@ -26,7 +26,7 @@ module.exports = PropertyView.extend({
 
     if (props.length) {
       if (!this.$input) {
-        this.$input = $('<input>', {value: 0, type: 'hidden' });
+        this.$input = $('<input type="hidden" value="0">');
         this.input = this.$input.get(0);
       }
 

src/style_manager/view/PropertyFileView.js

@@ -36,7 +36,8 @@ module.exports = PropertyView.extend({
 
   onRender() {
     if (!this.$input) {
-      this.$input = $('<input>', {placeholder: this.model.getDefaultValue(), type: 'text' });
+      const plh = this.model.getDefaultValue();
+      this.$input = $(`<input placeholder="${plh}">`);
     }
 
     if (!this.$preview) {

src/trait_manager/view/TraitView.js

@@ -81,21 +81,24 @@ module.exports = Backbone.View.extend({
       var md = this.model;
       var trg = this.target;
       var name = md.get('name');
-      var opts = {
-        placeholder: md.get('placeholder') || md.get('default'),
-        type: md.get('type') || 'text'
-      };
-      if(md.get('changeProp')){
-        opts.value = trg.get(name);
-      }else{
-        var attrs = trg.get('attributes');
-        opts.value = md.get('value') || attrs[name];
+      const plh = md.get('placeholder') || md.get('default');
+      const type = md.get('type') || 'text';
+      const attrs = trg.get('attributes');
+      const min = md.get('min');
+      const max = md.get('max');
+      const value = md.get('changeProp') ?
+        trg.get(name) : md.get('value') || attrs[name];
+      const input = $(`<input type="${type} placeholder="${plh}" value="${value}">`);
+
+      if (min) {
+        input.prop('min', min);
+      }
+
+      if (max) {
+        input.prop('max', max);
       }
-      if(md.get('min'))
-        opts.min = md.get('min');
-      if(md.get('max'))
-        opts.max = md.get('max');
-      this.$input = $('<input>', opts);
+
+      this.$input = input;
     }
     return this.$input.get(0);
   },

src/utils/Sorter.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+const Backbone = require('backbone');
+const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({