Upgraded package to use latest versions of its dependencies and nuked unnecessary ones. This also marks the time at which IE versions 10 and lower will no longer be supported (this is not to say they won't still work, since we are using babel and browserify, but just a warning). More specifically, this major version included the following changes:

- Changed to latest ES6 syntax - Removed module-js dependency - Removed deprecated element-kit package - Removed old `Form.mapElementsByName()` - Fixed a bug where events on Radios and Checkboxes were not being removed on destroy

Author: Mark

package.json

@@ -40,7 +40,7 @@
  },
  "main": "src/index.js",
  "devDependencies": {
- "build-tools": "^3.0.4",
+ "build-tools": "^3.1.0",
  "sinon": "^1.17.3"
  },
  "scripts": {
@@ -50,8 +50,6 @@
  },
  "dependencies": {
  "device-manager": "^1.1.1",
- "element-kit": "^0.5.0",
- "module-js": "^3.0.1",
  "observe-js": "^0.4.2",
  "promise": "^6.1.0",
  "underscore": "^1.8.2"

src/checkbox.js

@@ -1,7 +1,6 @@
 'use strict';
-var _ = require('underscore');
-var FormElement = require('./form-element');
-require('element-kit');
+import _ from 'underscore';
+import FormElement from './form-element';
 
 /**
  * A callback function that fires when the checkbox is checked
@@ -24,7 +23,7 @@ require('element-kit');
  * @class Checkbox
  * @extends FormElement
  */
-var Checkbox = FormElement.extend({
+class Checkbox extends FormElement {
 
  /**
  * Initialization.
@@ -38,9 +37,9 @@ var Checkbox = FormElement.extend({
  * @param {string} [options.disabledClass] - The css class that will be applied to the checkbox (UI-version) when it is disabled
  * @param {boolean} [options.value] - The initial checked value to set
  */
- initialize: function (options) {
+ constructor (options) {
 
- this.options = _.extend({
+ options = _.extend({
  el: null,
  onChecked: null,
  onUnchecked: null,
@@ -51,25 +50,27 @@ var Checkbox = FormElement.extend({
  value: null
  }, options);
 
- this.el = this.options.el;
+ super(options);
 
- if (this.el.tagName.toLowerCase() !== 'input') {
+
+ if (options.el.tagName.toLowerCase() !== 'input') {
  console.warn('checkbox error: element passed in instantiation was not an input element');
  }
 
- FormElement.prototype.initialize.call(this, this.options);
+ this.el = options.el;
+ this.options = options;
 
  this.setup();
 
- },
+ }
 
  /**
  * Sets up html.
  */
- setup: function () {
+ setup () {
  var input = this.getFormElement();
 
- input.kit.classList.add(this.options.inputClass);
+ input.classList.add(this.options.inputClass);
 
  this._container = this._buildUIElement(this.el);
 
@@ -82,143 +83,147 @@ var Checkbox = FormElement.extend({
 
  this.isInitDisabled = input.disabled;
  if (this.isInitDisabled) {
- this._container.kit.classList.add(this.options.disabledClass);
+ this._container.classList.add(this.options.disabledClass);
  }
 
  // setup events
- this.getUIElement().kit.addEventListener('click', '_onClick', this);
- },
+ this.addEventListener(this.getUIElement(), 'click', '_onClick', this);
+ }
 
  /**
  * When the checkbox element is clicked.
  * @private
  */
- _onClick: function () {
+ _onClick () {
  var input = this.getFormElement();
  if (!input.disabled) {
- if (!this.getUIElement().kit.classList.contains(this.options.checkedClass)) {
+ if (!this.getUIElement().classList.contains(this.options.checkedClass)) {
  this.check();
  } else {
  this.uncheck();
  }
  }
- },
+ }
 
  /**
- * Builds the checkbox UI-friendly version.
+ * Wraps the checkbox in a UI-friendly container div.
  * @param {HTMLInputElement} inputEl - The input element
  * @returns {HTMLElement} Returns the input element wrapped in a new container
  * @private
  */
- _buildUIElement: function (inputEl) {
- return inputEl.kit.appendOuterHtml('<div class="' + this.options.containerClass + '"></div>');
- },
+ _buildUIElement (inputEl) {
+ let parent = inputEl.parentNode;
+ var outerEl = document.createElement('div');
+ outerEl.classList.add(this.options.containerClass);
+ parent.replaceChild(outerEl, inputEl);
+ outerEl.appendChild(inputEl);
+ return outerEl;
+ }
 
 
  /**
  * Checks the checkbox.
  */
- check: function () {
+ check () {
  var input = this.getFormElement(),
  container = this.getUIElement();
  if (!input.checked) {
  input.checked = true;
  }
- container.kit.classList.add(this.options.checkedClass);
+ container.classList.add(this.options.checkedClass);
  if (this.options.onChecked) {
  this.options.onChecked(input.value, input, container);
  }
- },
+ }
 
  /**
  * Un-checks the checkbox.
  */
- uncheck: function () {
+ uncheck () {
  var input = this.getFormElement(),
  container = this.getUIElement();
  if (input.checked) {
  input.checked = false;
  }
- container.kit.classList.remove(this.options.checkedClass);
+ container.classList.remove(this.options.checkedClass);
  if (this.options.onUnchecked) {
  this.options.onUnchecked(input.value, input, container);
  }
- },
+ }
 
  /**
  * Enables the checkbox.
  */
- enable: function () {
+ enable () {
  this.getFormElement().disabled = false;
- this.getUIElement().kit.classList.remove(this.options.disabledClass);
- },
+ this.getUIElement().classList.remove(this.options.disabledClass);
+ }
 
  /**
  * Disables the checkbox.
  */
- disable: function () {
+ disable () {
  this.getFormElement().disabled = true;
- this.getUIElement().kit.classList.add(this.options.disabledClass);
- },
+ this.getUIElement().classList.add(this.options.disabledClass);
+ }
 
  /**
  * Gets the checkbox input element.
  * @returns {HTMLInputElement} Returns the checkbox input element
  */
- getFormElement: function () {
+ getFormElement () {
  return this.el;
- },
+ }
 
  /**
  * Gets the checkbox div element.
  * @returns {HTMLElement} Returns the checkbox div element.
  */
- getUIElement: function () {
+ getUIElement () {
  return this._container;
- },
+ }
 
  /**
  * Gets the unique identifier for checkboxes.
  * @returns {string}
  */
- getElementKey: function () {
+ getElementKey () {
  return 'checkbox';
- },
+ }
 
  /**
  * Unselects the checkbox if its selected.
  */
- clear: function () {
+ clear () {
  this.uncheck();
- },
+ }
 
  /**
  * Returns whether the checkbox is checked or not
  * @returns {boolean} Returns a truthy value if checkbox is checked, falsy if not
  */
- getValue: function () {
+ getValue () {
  return this.getFormElement().checked;
- },
+ }
 
  /**
  * Checks the checkbox if a truthy value is passed.
  * @param {string|boolean} value
  */
- setValue: function (value) {
+ setValue (value) {
  // check it if the value is truthy
  value = value ? true : false;
  this.getFormElement().checked = value;
- },
+ }
 
  /**
  * Destruction of this class.
  */
- destroy: function () {
+ destroy () {
  var container = this.getUIElement(),
  input = this.getFormElement();
 
- // remove event listener
- container.kit.removeEventListener('click', '_onClick', this);
+ this.removeEventListener(container, 'click', '_onClick', this);
 
  // remove stray html
  container.parentNode.replaceChild(input, container);
@@ -229,9 +234,9 @@ var Checkbox = FormElement.extend({
  if (this.isInitDisabled) {
  input.disabled = true;
  }
- FormElement.prototype.destroy.call(this);
+ super.destroy();
  }
 
-});
+}
 
-module.exports = Checkbox;
+module.exports = Checkbox;

src/checkboxes.js

@@ -1,7 +1,6 @@
 'use strict';
-var _ = require('underscore');
-var FormElementGroup = require('./form-element-group');
-require('element-kit');
+import _ from 'underscore';
+import FormElementGroup from './form-element-group';
 /**
  * A callback function that fires when one of the checkbox elements are selected
  * @callback Checkboxes~onChange
@@ -31,7 +30,7 @@ require('element-kit');
  * @class Checkboxes
  * @extends FormElement
  */
-var Checkboxes = FormElementGroup.extend({
+class Checkboxes extends FormElementGroup {
 
  /**
  * Initialization.
@@ -46,9 +45,9 @@ var Checkboxes = FormElementGroup.extend({
  * @param {string} [options.disabledClass] - The css class that will be applied to a checkbox item (UI-version) when it is disabled
  * @param {string|Array} [options.value] - The string matching the name attribute of the checkbox button to have selected initially (or an array of such strings)
  */
- initialize: function (options) {
+ constructor (options) {
 
- this.options = _.extend({
+ options = _.extend({
  inputs: [],
  onChange: null,
  containerClass: 'ui-checkbox',
@@ -58,48 +57,49 @@ var Checkboxes = FormElementGroup.extend({
  value: null
  }, options);
 
- FormElementGroup.prototype.initialize.call(this, this.options);
- },
+ super(options);
+ this.options = options;
+ }
 
  /**
  * When a checkbox is clicked that is a checkbox input element.
  * @param {HTMLInputElement} formElement - The checkbox element
  * @param {HTMLElement} UIElement - The ui element
  * @private
  */
- _processClick: function (formElement, UIElement) {
- if (!UIElement.kit.classList.contains(this.options.selectedClass)) {
+ _processClick (formElement, UIElement) {
+ if (!UIElement.classList.contains(this.options.selectedClass)) {
  formElement.checked = true;
- UIElement.kit.classList.add(this.options.selectedClass);
+ UIElement.classList.add(this.options.selectedClass);
  } else {
  formElement.checked = false;
- UIElement.kit.classList.remove(this.options.selectedClass);
+ UIElement.classList.remove(this.options.selectedClass);
  }
  this.triggerChange(formElement, UIElement);
- },
+ }
 
  /**
  * Selects the checkbox item.
  * @param {Number} index - The index of the checkbox item
  */
- select: function (index) {
+ select (index) {
  var input = this.getFormElement(index),
  checkbox = this.getUIElement(index);
  if (!input.checked) {
  input.checked = true;
- checkbox.kit.classList.add(this.options.selectedClass);
+ checkbox.classList.add(this.options.selectedClass);
  this.triggerChange(input, checkbox);
  }
- },
+ }
 
  /**
  * Gets the unique identifier for checkboxes.
  * @returns {string}
  */
- getElementKey: function () {
+ getElementKey () {
  return 'checkboxes';
  }
 
-});
+}
 
-module.exports = Checkboxes;
+module.exports = Checkboxes;