chore(project): remove jquery

Related to bpmn-io/bpmn-js#189

lib/Viewer.js

@@ -1,11 +1,16 @@
 'use strict';
 
 var assign = require('lodash/object/assign'),
-    omit = require('lodash/object/omit');
+    omit = require('lodash/object/omit'),
+    isString = require('lodash/lang/isString'),
+    isNumber = require('lodash/lang/isNumber');
+
+var domify = require('min-dom/lib/domify'),
+    domQuery = require('min-dom/lib/query'),
+    domRemove = require('min-dom/lib/remove');
 
 var Diagram = require('diagram-js'),
-    BpmnModdle = require('bpmn-moddle'),
-    $ = require('jquery');
+    BpmnModdle = require('bpmn-moddle');
 
 var Importer = require('./import/Importer');
 
@@ -38,9 +43,18 @@ function checkValidationError(err) {
 var DEFAULT_OPTIONS = {
   width: '100%',
   height: '100%',
-  position: 'relative'
+  position: 'relative',
+  container: 'body'
 };
 
+
+/**
+ * Ensure the passed argument is a proper unit (defaulting to px)
+ */
+function ensureUnit(val) {
+  return val + (isNumber(val) ? 'px' : '');
+}
+
 /**
  * A viewer for BPMN 2.0 diagrams.
  *
@@ -60,20 +74,28 @@ function Viewer(options) {
 
   this.options = options = assign({}, DEFAULT_OPTIONS, options || {});
 
-  var parent = options.container || $('body');
+  var parent = options.container;
 
-  var container = $('<div class="bjs-container"></div>').appendTo(parent);
+  // support jquery element
+  // unwrap it if passed
+  if (parent.get) {
+    parent = parent.get(0);
+  }
 
-  container.css({
-    width: options.width,
-    height: options.height,
+  // support selector
+  if (isString(parent)) {
+    parent = domQuery(parent);
+  }
+
+  var container = this.container = domify('<div class="bjs-container"></div>');
+  parent.appendChild(container);
+
+  assign(container.style, {
+    width: ensureUnit(options.width),
+    height: ensureUnit(options.height),
     position: options.position
   });
 
-  // unwrap jquery
-  this.container = container.get(0);
-
-
   /**
    * The code in the <project-logo></project-logo> area
    * must not be changed, see http://bpmn.io/license for more information
@@ -88,16 +110,16 @@ function Viewer(options) {
 
   /* jshint +W101 */
 
-  var a = $('<a href="http://bpmn.io" target="_blank" class="bjs-powered-by" title="Powered by bpmn.io" />').css({
-    position: 'absolute',
-    bottom: 15,
-    right: 15,
-    zIndex: 100
-  });
+  var linkMarkup =
+        '<a href="http://bpmn.io" ' +
+           'target="_blank" ' +
+           'class="bjs-powered-by" ' +
+           'title="Powered by bpmn.io" ' +
+           'style="position: absolute; bottom: 15px; right: 15px; z-index: 100">' +
+            '<img src="data:image/png;base64,' + logoData + '">' +
+        '</a>';
 
-  $('<img/>').attr('src', 'data:image/png;base64,' + logoData).appendTo(a);
-
-  a.appendTo(container);
+  container.appendChild(domify(linkMarkup));
 
   /* </project-logo> */
 }
@@ -260,7 +282,7 @@ Viewer.prototype.destroy = function() {
   this.clear();
 
   // remove container
-  $(this.container).remove();
+  domRemove(this.container);
 };
 
 /**

package.json

@@ -60,8 +60,8 @@
     "diagram-js-direct-editing": "^0.7.0",
     "didi": "^0.0.4",
     "ids": "^0.1.0",
-    "jquery": "^2.1.0",
     "lodash": "^3.0.1",
+    "min-dom": "^0.1.1",
     "object-refs": "^0.1.0"
   },
   "peerDependencies": {

test/spec/ViewerSpec.js

@@ -381,12 +381,10 @@ describe('Viewer', function() {
         position: 'fixed'
       });
 
-      var container = viewer.container;
-
       // then
-      expect(container.style.position).toBe('fixed');
-      expect(container.style.width).toBe('200px');
-      expect(container.style.height).toBe('100px');
+      expect(viewer.container.style.position).toBe('fixed');
+      expect(viewer.container.style.width).toBe('200px');
+      expect(viewer.container.style.height).toBe('100px');
     });
 
   });
@@ -401,13 +399,11 @@ describe('Viewer', function() {
         container: container
       });
 
-      var container = viewer.container;
-
       // when
       viewer.destroy();
 
       // then
-      expect(container.parentNode).toBeFalsy();
+      expect(viewer.container.parentNode).toBeFalsy();
     });
 
   });

test/spec/features/label-editing/LabelEditingProviderSpec.js

@@ -1,15 +1,12 @@
 'use strict';
 
-var Matchers = require('../../../Matchers'),
-    TestHelper = require('../../../TestHelper');
+require('../../../TestHelper');
 
 /* global bootstrapViewer, inject */
 
 
 var fs = require('fs');
 
-var $ = require('jquery');
-
 
 var labelEditingModule = require('../../../../lib/features/label-editing'),
     coreModule = require('../../../../lib/core');
@@ -17,11 +14,22 @@ var labelEditingModule = require('../../../../lib/features/label-editing'),
 var LabelUtil = require('../../../../lib/features/label-editing/LabelUtil');
 
 
+function triggerKeyEvent(element, event, code) {
+  var e = document.createEvent('Events');
+
+  if (e.initEvent) {
+    e.initEvent(event, true, true);
+  }
+
+  e.keyCode = code;
+  e.which = code;
+
+  return element.dispatchEvent(e);
+}
+
+
 describe('features - label-editing', function() {
 
-  beforeEach(Matchers.addDeepEquals);
-
-
   var diagramXML = fs.readFileSync('test/fixtures/bpmn/features/label-editing/labels.bpmn', 'utf8');
 
   var testModules = [ labelEditingModule, coreModule ];
@@ -55,13 +63,13 @@ describe('features - label-editing', function() {
       // activate
       eventBus.fire('element.dblclick', { element: shape });
 
-      // a jQuery <textarea /> element
+      // a <textarea /> element
       var textarea = directEditing._textbox.textarea;
 
       // when
       // change + ESC is pressed
-      textarea.val('new value');
-      textarea.trigger($.Event('keydown', { which: 27 }));
+      textarea.value = 'new value';
+      triggerKeyEvent(textarea, 'keydown', 27);
 
       // then
       expect(directEditing.isActive()).toBe(false);
@@ -80,12 +88,13 @@ describe('features - label-editing', function() {
 
       var newName = 'new value';
 
-      // a jQuery <textarea /> element
+      // a <textarea /> element
       var textarea = directEditing._textbox.textarea;
 
       // when
       // change + <element.mousedown>
-      textarea.val(newName);
+      textarea.value = newName;
+
       eventBus.fire('element.mousedown', { element: canvas.getRootElement() });
 
       // then
@@ -117,7 +126,7 @@ describe('features - label-editing', function() {
   }
 
   function directEditUpdate(value) {
-    directEditing._textbox.textarea.val(value);
+    directEditing._textbox.textarea.value = value;
   }
 
   function directEditComplete(value) {

test/spec/features/palette/PaletteProviderSpec.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var TestHelper = require('../../../TestHelper');
+require('../../../TestHelper');
+
 
 var Modeler = require('../../../../lib/Modeler');
 
-var $ = require('jquery');
+var domQuery = require('min-dom/lib/query');
 
 
 describe('palette', function() {
@@ -28,10 +29,10 @@ describe('palette', function() {
       expect(provider).toBeTruthy();
 
       // when
-      var paletteElement = $(container).find('.djs-palette');
+      var paletteElement = domQuery('.djs-palette', container);
 
       // then
-      expect(paletteElement.find('.entry').length).toBe(7);
+      expect(domQuery.all('.entry', paletteElement).length).toBe(7);
 
       done(err);
     });