Merge pull request #4 from conestack/array_hooks

Yafowil.array subscribers

CHANGES.rst

@@ -4,6 +4,13 @@ Changes
 2.0 (unreleased)
 ----------------
 
+- Extend JS by ``chosen_on_array_add`` and ``register_array_subscribers``
+  functions to enable usage in ``yafowil.widget.array``.
+  [lenadax]
+
+- Prevent initialize of widget if part of array template.
+  [lenadax]
+
 - Rewrite JavaScript using ES6.
   [rnix]
 

js/karma-coverage.js

@@ -1,8 +1,8 @@
 const percentage = {
-    lines: 33,
-    statements: 33,
-    functions: 28,
-    branches: 8
+    lines: 100,
+    statements: 100,
+    functions: 100,
+    branches: 100
 }
 var summary = require('./karma/coverage/coverage-summary.json');
 

js/src/bundle.js

@@ -1,6 +1,7 @@
 import $ from 'jquery';
 
 import {ChosenWidget} from './widget.js';
+import {register_array_subscribers} from './widget.js';
 
 export * from './widget.js';
 
@@ -12,4 +13,5 @@ $(function() {
     } else {
         ChosenWidget.initialize();
     }
+    register_array_subscribers();
 });

js/src/widget.js

@@ -4,6 +4,10 @@ export class ChosenWidget {
 
     static initialize(context) {
         $('select.chosen', context).each(function (event) {
+            if (window.yafowil_array !== undefined &&
+                window.yafowil_array.inside_template($(this))) {
+                return;
+            }
             new ChosenWidget($(this));
         });
     }
@@ -46,3 +50,18 @@ export class ChosenWidget {
         }
     }
 }
+
+//////////////////////////////////////////////////////////////////////////////
+// yafowil.widget.array integration
+//////////////////////////////////////////////////////////////////////////////
+
+function chosen_on_array_add(inst, context) {
+    ChosenWidget.initialize(context, true);
+}
+
+export function register_array_subscribers() {
+    if (window.yafowil_array === undefined) {
+        return;
+    }
+    window.yafowil_array.on_array_event('on_add', chosen_on_array_add);
+}

js/tests/test_chosen.js

@@ -1,10 +1,128 @@
-import { ChosenWidget } from "../src/widget";
+import {ChosenWidget} from "../src/widget.js";
+import {register_array_subscribers} from "../src/widget.js";
+
+QUnit.module('chosen', hooks => {
+    let el, wid, container;
+    let _array_subscribers = {
+        on_add: []
+    };
+
+    hooks.beforeEach(() => {
+        container = $('<div class="container" />').appendTo('body');
+        el = $('<select class="chosen" />');
+    });
+
+    hooks.afterEach(() => {
+        el.remove();
+        container.empty().remove();
+        wid = null;
+    });
+
+    QUnit.test('init', assert => {
+        let wid = new ChosenWidget(el);
+        assert.ok(wid);
+        assert.deepEqual(wid.elem, el);
+    });
+
+    QUnit.module('search field', hooks => {
+        let input;
+
+        hooks.beforeEach((assert) => {
+            el.appendTo(container);
+            let search_field = $('<div class="search-field" />').appendTo(container);
+            input = $('<input type="text"></input>').appendTo(search_field);
+            el.on('chosen:updated', (e) => {
+                assert.step('chosen updated');
+            })
+
+            el.data('new_values', true);
+            el.data('multivalued', true);
+            el.data('search_contains', true);
+            el.data('vocabulary', ['foo', 'bar']);
+            wid = new ChosenWidget(el);
+        });
+
+        QUnit.test('change_handle', assert => {
+            assert.ok(wid);
+            input.val('f').trigger('change');
+            let opt = $('option', el);
+            assert.strictEqual(opt.length, 1);
+            assert.strictEqual(opt.val(), 'f');
+            assert.verifySteps(['chosen updated']);
+
+            // returns
+            input.val('').trigger('change');
+            opt = $('option', el);
+            assert.strictEqual(opt.length, 1);
+            assert.verifySteps([]);
+
+            input.val('f').trigger('change');
+            opt = $('option', el);
+            assert.strictEqual(opt.length, 1);
+            assert.strictEqual(opt.val(), 'f');
+            assert.verifySteps([]);
+
+            // ignores
+            input.val('b').trigger('change');
+            let opts = $('option', el);
+            assert.strictEqual(opts.length, 2);
+            assert.verifySteps(['chosen updated']);
+        });
+
+        QUnit.test('keyup_handle', assert => {
+            assert.ok(wid);
+            input.val('b');
+            let keyup = $.Event('keyup');
+            keyup.which = 13;
+            input.trigger(keyup);
+            assert.verifySteps(['chosen updated']);
+
+            let keyup2 = $.Event('keyup');
+            keyup2.which = 12;
+            input.trigger(keyup2);
+            assert.verifySteps([]);
+        });
+    });
+
+    QUnit.test('register_array_subscribers', assert => {
+        // return if window.yafowil === undefined
+        register_array_subscribers();
+        assert.deepEqual(_array_subscribers['on_add'], []);
+
+        // patch yafowil_array
+        window.yafowil_array = {
+            on_array_event: function(evt_name, evt_function) {
+                _array_subscribers[evt_name] = evt_function;
+            },
+            inside_template(elem) {
+                return elem.parents('.arraytemplate').length > 0;
+            }
+        };
+        register_array_subscribers();
+
+        // create table DOM
+        let table = $('<table />')
+            .append($('<tr />'))
+            .append($('<td />'))
+            .appendTo('body');
+
+        $('td', table).addClass('arraytemplate');
+        el.appendTo($('td', table));
+
+        // invoke array on_add - returns
+        _array_subscribers['on_add'].apply(null, $('tr', table));
+        wid = el.data('yafowil-chosen');
+        assert.notOk(wid);
+        $('td', table).removeClass('arraytemplate');
+
+        // invoke array on_add
+        el.attr('id', '');
+        _array_subscribers['on_add'].apply(null, $('tr', table));
+        wid = el.data('yafowil-chosen');
+        assert.ok(wid);
+
+        table.remove();
+    });
+})
 
-QUnit.test('test', assert => {
-    let el = $('<select class="chosen" />').appendTo('body');
-    let wid = new ChosenWidget(el);
-    assert.ok(wid);
 
-    el.remove();
-    wid = null;
-});

package.json

@@ -4,13 +4,13 @@
     "karma-test:coverage": "node js/karma-coverage.js"
   },
   "devDependencies": {
-    "karma": "^6.3.20",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-module-resolver-preprocessor": "^1.1.3",
     "karma-qunit": "^4.1.2",
-    "qunit": "^2.19.1",
-    "rollup": "^2.75.3",
+    "qunit": "^2.19.3",
+    "rollup": "^2.79.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-terser": "^7.0.2"
   }

src/yafowil/widget/chosen/resources/widget.js

@@ -4,6 +4,10 @@ var yafowil_chosen = (function (exports, $) {
     class ChosenWidget {
         static initialize(context) {
             $('select.chosen', context).each(function (event) {
+                if (window.yafowil_array !== undefined &&
+                    window.yafowil_array.inside_template($(this))) {
+                    return;
+                }
                 new ChosenWidget($(this));
             });
         }
@@ -43,6 +47,15 @@ var yafowil_chosen = (function (exports, $) {
             }
         }
     }
+    function chosen_on_array_add(inst, context) {
+        ChosenWidget.initialize(context, true);
+    }
+    function register_array_subscribers() {
+        if (window.yafowil_array === undefined) {
+            return;
+        }
+        window.yafowil_array.on_array_event('on_add', chosen_on_array_add);
+    }
 
     $(function() {
         if (window.ts !== undefined) {
@@ -52,9 +65,11 @@ var yafowil_chosen = (function (exports, $) {
         } else {
             ChosenWidget.initialize();
         }
+        register_array_subscribers();
     });
 
     exports.ChosenWidget = ChosenWidget;
+    exports.register_array_subscribers = register_array_subscribers;
 
     Object.defineProperty(exports, '__esModule', { value: true });