ampersand-dom-bindings - npm Package Compare versions

Comparing version 3.3.0 to 3.3.1

ampersand-dom-bindings.js

@@ -60,2 +60,5 @@ var Store = require('key-tree-store');
     })();
+    var yes = binding.yes;
+    var no = binding.no;
+    var hasYesNo = !!(yes || no);
 
@@ -107,6 +110,6 @@ // storage variable for previous if relevant
         // if there's a `no` case this is actually a switch
-        if (binding.no) {
-            return function (el, value, keyName) {
-                var yes = makeArray(binding.name || binding.yes || keyName);
-                var no = makeArray(binding.no);
+        if (hasYesNo) {
+            yes = makeArray(yes || '');
+            no = makeArray(no || '');
+            return function (el, value) {
                 var prevClass = value ? no : yes;
@@ -144,8 +147,8 @@ var newClass = value ? yes : no;
         // this doesn't require a selector since we can pass yes/no selectors
-        if (binding.yes && binding.no) {
+        if (hasYesNo) {
             return function (el, value) {
-                getMatches(el, binding.yes).forEach(function (match) {
+                getMatches(el, yes).forEach(function (match) {
                     dom[value ? 'show' : 'hide'](match);
                 });
-                getMatches(el, binding.no).forEach(function (match) {
+                getMatches(el, no).forEach(function (match) {
                     dom[value ? 'hide' : 'show'](match);
@@ -155,3 +158,3 @@ });
         } else {
-                return function (el, value) {
+            return function (el, value) {
                 getMatches(el, selector).forEach(function (match) {
@@ -158,0 +161,0 @@ dom[value ? 'show' : 'hide'](match);

package.json

 {
   "name": "ampersand-dom-bindings",
   "description": "Takes binding declarations and returns key-tree-store of functions that can be used to apply those bindings.",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "author": "'Henrik Joreteg' <[e-mail]>",
@@ -10,3 +10,3 @@ "bugs": {
   "dependencies": {
-    "ampersand-dom": "^1.2.0",
+    "ampersand-dom": "^1.2.5",
     "is-array": "^1.0.1",
@@ -13,0 +13,0 @@ "key-tree-store": "^1.2.0",

README.md

@@ -159,2 +159,17 @@ # ampersand-dom-bindings
 
+### custom functions
+
+`type` can also be a function. It will be run for each matching `el` with the
+`value` and `previousValue` of the property.
+
+```js
+'model.key': {
+    type: function (el, value, previousValue) {
+        // Do something custom to el
+        // using value and/or previousValue
+    },
+    selector: '#something', // or hook
+}
+```
+
 ## Handling multiple bindings for a given key
@@ -275,4 +290,8 @@
 
+## changelog
+
+- 3.3.1 - Fix issues with yes/no handling in boolean class. Add lots of tests.
+
 ## license
 
 MIT

test/index.js

@@ -499,6 +499,143 @@ var test = require('tape');
 
-// TODO: tests for toggle
+test('basic toggle', function (t) {
+    var el = getEl('<span></span>');
+    var bindings = domBindings({
+        'model1': {
+            type: 'toggle',
+            selector: 'span'
+        }
+    });
 
+    var span = el.children[0];
+    t.equal(span.style.display, '', 'base case');
+
+    bindings.run('model1', null, el, true);
+    t.equal(span.style.display, '', 'base case');
+
+    bindings.run('model1', null, el, false);
+    t.equal(span.style.display, 'none', 'should now be hidden');
+
+    bindings.run('model1', null, el, true);
+    t.equal(span.style.display, '', 'should now be visible');
+
+    t.end();
+});
+
+test('toggle with yes/no', function (t) {
+    var el = getEl('<span class="one"></span><span class="two"></span>');
+    var bindings = domBindings({
+        'model1': {
+            type: 'toggle',
+            no: '.one',
+            yes: '.two'
+        }
+    });
+
+    var one = el.children[0];
+    var two = el.children[1];
+
+    t.equal(one.style.display, '', 'base case');
+    t.equal(two.style.display, '', 'base case');
+
+    bindings.run('model1', null, el, true);
+
+    t.equal(one.style.display, 'none', 'one should be hidden');
+    t.equal(two.style.display, '', 'two should be visible');
+
+    bindings.run('model1', null, el, false);
+
+    t.equal(one.style.display, '', 'one should be visible');
+    t.equal(two.style.display, 'none', 'two should be hidden');
+
+    bindings.run('model1', null, el, 'something truthy');
+
+    t.equal(one.style.display, 'none', 'one should be hidden');
+    t.equal(two.style.display, '', 'two should be visible');
+
+    // here we'll try a bunch of variations of falsy things
+    // empty string
+    bindings.run('model1', null, el, true);
+    t.equal(one.style.display, 'none', 'one should be hidden');
+    t.equal(two.style.display, '', 'two should be visible');
+    bindings.run('model1', null, el, '');
+    t.equal(one.style.display, '', 'one should be visible');
+    t.equal(two.style.display, 'none', 'two should be hidden');
+
+    // null
+    bindings.run('model1', null, el, true);
+    t.equal(one.style.display, 'none', 'one should be hidden');
+    t.equal(two.style.display, '', 'two should be visible');
+    bindings.run('model1', null, el, null);
+    t.equal(one.style.display, '', 'one should be visible');
+    t.equal(two.style.display, 'none', 'two should be hidden');
+
+    // undefined
+    bindings.run('model1', null, el, true);
+    t.equal(one.style.display, 'none', 'one should be hidden');
+    t.equal(two.style.display, '', 'two should be visible');
+    bindings.run('model1', null, el, undefined);
+    t.equal(one.style.display, '', 'one should be visible');
+    t.equal(two.style.display, 'none', 'two should be hidden');
+
+    // zero
+    bindings.run('model1', null, el, true);
+    t.equal(one.style.display, 'none', 'one should be hidden');
+    t.equal(two.style.display, '', 'two should be visible');
+    bindings.run('model1', null, el, 0);
+    t.equal(one.style.display, '', 'one should be visible');
+    t.equal(two.style.display, 'none', 'two should be hidden');
+
+    t.end();
+});
+
 // TODO: tests for switch
+test('switch', function (t) {
+    var el = getEl('<div class="foo"></div><div class="bar"></div><div class="baz"></div>');
+    var bindings = domBindings({
+        'model': {
+            type: 'switch',
+            name: 'yes',
+            cases: {
+                foo: '.foo',
+                bar: '.bar',
+                baz: '.baz'
+            }
+        }
+    });
 
+    var foo = el.children[0];
+    var bar = el.children[1];
+    var baz = el.children[2];
+
+    t.equal(foo.style.display, '', 'base case');
+    t.equal(bar.style.display, '', 'base case');
+    t.equal(baz.style.display, '', 'base case');
+
+    bindings.run('', null, el, 'foo');
+
+    t.equal(foo.style.display, '', 'show foo');
+    t.equal(bar.style.display, 'none');
+    t.equal(baz.style.display, 'none');
+
+    bindings.run('', null, el, 'bar');
+
+    t.equal(foo.style.display, 'none');
+    t.equal(bar.style.display, '', 'show bar');
+    t.equal(baz.style.display, 'none');
+
+    bindings.run('', null, el, 'baz');
+
+    t.equal(foo.style.display, 'none');
+    t.equal(bar.style.display, 'none');
+    t.equal(baz.style.display, '', 'show baz');
+
+    bindings.run('', null, el, 'something else');
+
+    t.equal(foo.style.display, 'none');
+    t.equal(bar.style.display, 'none');
+    t.equal(baz.style.display, 'none');
+
+    t.end();
+});
+
 // TODO: tests for multiple bindings in one declaration
@@ -523,1 +660,72 @@
 });
+
+
+test('handle yes/no cases for `booleanClass` when missing `yes` or `no`', function (t) {
+    var el = getEl('<span></span>');
+
+    var bindings = domBindings({
+        'model1': {
+            type: 'booleanClass',
+            no: 'no',
+            selector: 'span'
+        }
+    });
+
+    t.equal(el.firstChild.className, '');
+    bindings.run('model1', null, el, false);
+    t.equal(el.firstChild.className, 'no');
+    bindings.run('model1', null, el, true);
+    t.equal(el.firstChild.className, '');
+
+    el = getEl('<span></span>');
+
+    bindings = domBindings({
+        'model1': {
+            type: 'booleanClass',
+            yes: 'yes',
+            selector: 'span'
+        }
+    });
+
+    t.equal(el.firstChild.className, '');
+    bindings.run('model1', null, el, true);
+    t.equal(el.firstChild.className, 'yes');
+    bindings.run('model1', null, el, false);
+    t.equal(el.firstChild.className, '');
+
+    t.end();
+});
+
+test('handle yes/no cases for `toggle` when missing `yes` or `no`', function (t) {
+    var el = getEl('<span></span>');
+
+    var bindings = domBindings({
+        'model1': {
+            type: 'toggle',
+            no: 'span'
+        }
+    });
+
+    t.equal(el.firstChild.style.display, '', 'base case');
+    bindings.run('model1', null, el, false);
+    t.equal(el.firstChild.style.display, '', 'should show when false');
+    bindings.run('model1', null, el, true);
+    t.equal(el.firstChild.style.display, 'none', 'should hide when true');
+
+    el = getEl('<span></span>');
+
+    bindings = domBindings({
+        'model1': {
+            type: 'toggle',
+            yes: 'span'
+        }
+    });
+
+    t.equal(el.firstChild.style.display, '', 'base case');
+    bindings.run('model1', null, el, true, '');
+    t.equal(el.firstChild.style.display, '', 'should show when true');
+    bindings.run('model1', null, el, false);
+    t.equal(el.firstChild.style.display, 'none', 'should hide when false');
+
+    t.end();
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39994

increased by20.17%

Lines of code

753

increased by28.28%

Number of lines in readme file

296

increased by6.86%

Dependency changes

• Updatedampersand-dom@^1.2.5