formjs - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

bower.json

 {
   "name": "formjs",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "homepage": "https://github.com/mkay581/formjs",
@@ -5,0 +5,0 @@ "authors": [

package.json

 {
   "name": "formjs",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Create better ui form elements. Supports IE9+, all modern browsers, and mobile.",
@@ -5,0 +5,0 @@ "repository": {

src/dropdown.js

@@ -346,3 +346,2 @@ 'use strict';
         this._setUISelectedValue(dataValue);
-
     },
@@ -353,8 +352,15 @@
      * @param {Array} optionsData - An array of objects that maps the new data values to display values desired
+     * @param {Object} [options] - Update options
+     * @param {Boolean} [options.replace] - If true, the new options will replace all current options, if false, new options will be merged with current ones
      */
-    updateOptions: function (optionsData) {
-        var el = this.getUIElement().getElementsByClassName(this.options.optionsContainerClass)[0],
+    updateOptions: function (optionsData, options) {
+        var uiOptionsContainer = this.getUIElement().getElementsByClassName(this.options.optionsContainerClass)[0],
             frag = document.createDocumentFragment(),
             optionEl;
 
+        options = options || {};
+
+        if (options.replace) {
+            this.clearOptions();
+        }
         this._updateFormOptionElements(optionsData);
@@ -369,13 +375,23 @@
         }.bind(this));
-        el.innerHTML = '';
-        this.bindUIOptionClickEvents(frag.children);
-        el.appendChild(frag);
+        this.bindUIOptionClickEvents(frag.childNodes);
+        uiOptionsContainer.appendChild(frag);
     },
 
     /**
+     * Clears all options in the dropdown.
+     */
+    clearOptions: function () {
+        var uiOptionsContainer = this.getUIElement().getElementsByClassName(this.options.optionsContainerClass)[0],
+            formEl = this.getFormElement();
+        formEl.innerHTML = '';
+        uiOptionsContainer.innerHTML = '';
+    },
+
+    /**
      * Updates markup to show new form elements.
      * @param {Array} optionsData - An array of objects that maps the new data values to display values desired
+     * @param {boolean} reset - Whether to replace current options, or merge with them
      * @private
      */
-    _updateFormOptionElements: function (optionsData) {
+    _updateFormOptionElements: function (optionsData, reset) {
         var formEl = this.getFormElement(),
@@ -390,3 +406,7 @@ frag = document.createDocumentFragment(),
         });
-        formEl.innerHTML = '';
+        if (reset) {
+            formEl.innerHTML = '';
+        } else {
+
+        }
         formEl.appendChild(frag);
@@ -393,0 +413,0 @@ },

tests/dropdown-tests.js

@@ -379,3 +379,90 @@ "use strict";
 
+    QUnit.test('updateOptions() should create new form and UI elements from objects in the array that it is passed', function() {
+        QUnit.expect(4);
+        var fixture = document.getElementById('qunit-fixture');
+        var html =
+            '<select>' +
+                '<option value="AAPL">Apple</option>' +
+                '<option value="FB">Facebook</option>' +
+                '<option value="GOOG">Google</option>' +
+            '</select>';
+        var selectEl = TestUtils.createHtmlElement(html);
+        fixture.appendChild(selectEl);
+        var uiContainerClass = 'my-ui-container';
+        var uiOptionsClass = 'my-option';
+        var dropdown = new Dropdown({
+            el: selectEl,
+            containerClass: uiContainerClass,
+            optionsClass: uiOptionsClass
+        });
+        var newOptions = [{dataValue: 'TW', displayValue: 'Twitter'}];
+        dropdown.updateOptions(newOptions);
+        var formOptionElements = fixture.getElementsByTagName('option');
+        var uiOptionElements = fixture.getElementsByClassName(uiOptionsClass);
+        QUnit.equal(formOptionElements[3].getAttribute('value'), newOptions[0].dataValue, 'after updating options, new form element was added with correct data value');
+        QUnit.equal(formOptionElements[3].textContent, newOptions[0].displayValue, 'new form element has correct display value');
+        QUnit.equal(uiOptionElements[3].getAttribute('data-value'), newOptions[0].dataValue, 'new ui element was added with correct data value');
+        QUnit.equal(uiOptionElements[3].innerHTML, newOptions[0].displayValue, 'first new ui element has correct display value');
+        dropdown.destroy();
+    });
 
+    QUnit.test('passing replace true to updateOptions() should clear out options before adding new ones', function() {
+        QUnit.expect(5);
+        var fixture = document.getElementById('qunit-fixture');
+        var html =
+            '<select>' +
+                '<option value="AAPL">Apple</option>' +
+                '<option value="FB">Facebook</option>' +
+                '<option value="GOOG">Google</option>' +
+            '</select>';
+        var selectEl = TestUtils.createHtmlElement(html);
+        fixture.appendChild(selectEl);
+        var uiContainerClass = 'my-ui-container';
+        var uiOptionsClass = 'my-option';
+        var clearOptionsSpy = Sinon.spy(Dropdown.prototype, 'clearOptions');
+        var dropdown = new Dropdown({
+            el: selectEl,
+            containerClass: uiContainerClass,
+            optionsClass: uiOptionsClass
+        });
+        var newOptions = [{dataValue: 'TW', displayValue: 'Twitter'}];
+        dropdown.updateOptions(newOptions, {replace: true});
+        var formOptionElements = fixture.getElementsByTagName('option');
+        var uiOptionElements = fixture.getElementsByClassName(uiOptionsClass);
+        QUnit.equal(clearOptionsSpy.callCount, 1, 'clearOptions was called');
+        QUnit.equal(formOptionElements[0].getAttribute('value'), newOptions[0].dataValue, 'new form element was added as first index with correct data value');
+        QUnit.equal(formOptionElements[0].textContent, newOptions[0].displayValue, 'new form element has correct display value');
+        QUnit.equal(uiOptionElements[0].getAttribute('data-value'), newOptions[0].dataValue, 'new ui element was added as first index with correct data value');
+        QUnit.equal(uiOptionElements[0].innerHTML, newOptions[0].displayValue, 'first new ui element has correct display value');
+        clearOptionsSpy.restore();
+        dropdown.destroy();
+    });
+
+    QUnit.test('clearOptions() should clear all form and ui options in the dropdown', function() {
+        QUnit.expect(2);
+        var fixture = document.getElementById('qunit-fixture');
+        var html =
+            '<select>' +
+                '<option value="AAPL">Apple</option>' +
+                '<option value="FB">Facebook</option>' +
+            '</select>';
+        var selectEl = TestUtils.createHtmlElement(html);
+        fixture.appendChild(selectEl);
+        var uiContainerClass = 'my-ui-container';
+        var uiOptionsClass = 'my-option';
+        var dropdown = new Dropdown({
+            el: selectEl,
+            containerClass: uiContainerClass,
+            optionsClass: uiOptionsClass
+        });
+        var newOptions = [{dataValue: 'TW', displayValue: 'Twitter'}];
+        dropdown.clearOptions();
+        var formOptionElements = fixture.getElementsByTagName('option');
+        var uiOptionElements = fixture.getElementsByClassName(uiOptionsClass);
+        QUnit.equal(formOptionElements.length, 0, 'all form elements have been cleared');
+        QUnit.equal(uiOptionElements.length, 0, 'all ui elements have been cleared');
+        dropdown.destroy();
+    });
+
+
 })();

No alert changes

Improved metrics

Total package byte prevSize

3145283

increased by0.24%

Lines of code

71048

increased by0.19%

No dependency changes