Skip to content

brainfood / rivets

Go to a project
Toggle navigation
Toggle navigation pinning
0c9223d6 by Michael Richards
Options

Abstract common binding routine functions into reusable routine builders for att… 

…ribute/state bindings.
1 parent e6440360
Inline Side-by-side
Showing 2 changed files with 59 additions and 73 deletions
1 // Generated by CoffeeScript 1.3.1 1 // Generated by CoffeeScript 1.3.1
2 (function() { 2 (function() {
3 var attributeBinding, bidirectionalBindings, bindings, getInputValue, registerBinding, rivets, setAttribute, 3 var attributeBinding, bidirectionals, bindings, getInputValue, registerBinding, rivets, stateBinding,
4 __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; 4 __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
5 5
6 registerBinding = function(el, adapter, type, context, keypath) { 6 registerBinding = function(el, adapter, type, context, keypath) {
...@@ -10,24 +10,13 @@ ...@@ -10,24 +10,13 @@
10 adapter.subscribe(context, keypath, function(value) { 10 adapter.subscribe(context, keypath, function(value) {
11 return bind(el, value); 11 return bind(el, value);
12 }); 12 });
13 if (__indexOf.call(bidirectionalBindings, type) >= 0) { 13 if (__indexOf.call(bidirectionals, type) >= 0) {
14 return el.addEventListener('change', function() { 14 return el.addEventListener('change', function() {
15 return adapter.publish(context, keypath, getInputValue(this)); 15 return adapter.publish(context, keypath, getInputValue(this));
16 }); 16 });
17 } 17 }
18 }; 18 };
19 19
20 setAttribute = function(el, attr, value, mirrored) {
21 if (mirrored == null) {
22 mirrored = false;
23 }
24 if (value) {
25 return el.setAttribute(attr, mirrored ? attr : value);
26 } else {
27 return el.removeAttribute(attr);
28 }
29 };
30
31 getInputValue = function(el) { 20 getInputValue = function(el) {
32 switch (el.type) { 21 switch (el.type) {
33 case 'text': 22 case 'text':
...@@ -40,31 +29,32 @@ ...@@ -40,31 +29,32 @@
40 } 29 }
41 }; 30 };
42 31
32 attributeBinding = function(attr) {
33 return function(el, value) {
34 if (value) {
35 return el.setAttribute(attr, value);
36 } else {
37 return el.removeAttribute(attr);
38 }
39 };
40 };
41
42 stateBinding = function(attr, inverse) {
43 if (inverse == null) {
44 inverse = false;
45 }
46 return function(el, value) {
47 return attributeBinding(attr)(el, inverse === !value ? attr : false);
48 };
49 };
50
43 bindings = { 51 bindings = {
44 show: function(el, value) { 52 checked: stateBinding('checked'),
45 return el.style.display = value ? '' : 'none'; 53 selected: stateBinding('selected'),
46 }, 54 disabled: stateBinding('disabled'),
47 hide: function(el, value) { 55 unchecked: stateBinding('checked', true),
48 return el.style.display = value ? 'none' : ''; 56 unselected: stateBinding('selected', true),
49 }, 57 enabled: stateBinding('disabled', true),
50 enabled: function(el, value) {
51 return setAttribute(el, 'disabled', !value, true);
52 },
53 disabled: function(el, value) {
54 return setAttribute(el, 'disabled', value, true);
55 },
56 checked: function(el, value) {
57 return setAttribute(el, 'checked', value, true);
58 },
59 unchecked: function(el, value) {
60 return setAttribute(el, 'checked', !value, true);
61 },
62 selected: function(el, value) {
63 return setAttribute(el, 'selected', value, true);
64 },
65 unselected: function(el, value) {
66 return setAttribute(el, 'selected', !value, true);
67 },
68 text: function(el, value) { 58 text: function(el, value) {
69 return el.innerText = value || ''; 59 return el.innerText = value || '';
70 }, 60 },
...@@ -73,16 +63,16 @@ ...@@ -73,16 +63,16 @@
73 }, 63 },
74 value: function(el, value) { 64 value: function(el, value) {
75 return el.value = value; 65 return el.value = value;
66 },
67 show: function(el, value) {
68 return el.style.display = value ? '' : 'none';
69 },
70 hide: function(el, value) {
71 return el.style.display = value ? 'none' : '';
76 } 72 }
77 }; 73 };
78 74
79 attributeBinding = function(attr) { 75 bidirectionals = ['value', 'checked', 'unchecked', 'selected', 'unselected'];
80 return function(el, value) {
81 return setAttribute(el, attr, value);
82 };
83 };
84
85 bidirectionalBindings = ['value', 'checked', 'unchecked', 'selected', 'unselected'];
86 76
87 rivets = { 77 rivets = {
88 bind: function(el, adapter, contexts) { 78 bind: function(el, adapter, contexts) {
......
...@@ -10,53 +10,49 @@ registerBinding = (el, adapter, type, context, keypath) -> ...@@ -10,53 +10,49 @@ registerBinding = (el, adapter, type, context, keypath) ->
10 adapter.subscribe context, keypath, (value) -> 10 adapter.subscribe context, keypath, (value) ->
11 bind el, value 11 bind el, value
12 12
13 if type in bidirectionalBindings 13 if type in bidirectionals
14 el.addEventListener 'change', -> 14 el.addEventListener 'change', ->
15 adapter.publish context, keypath, getInputValue this 15 adapter.publish context, keypath, getInputValue this
16 16
17 setAttribute = (el, attr, value, mirrored=false) ->
18 if value
19 el.setAttribute attr, if mirrored then attr else value
20 else
21 el.removeAttribute attr
22
23 getInputValue = (el) -> 17 getInputValue = (el) ->
24 switch el.type 18 switch el.type
25 when 'text', 'textarea', 'password', 'select-one' then el.value 19 when 'text', 'textarea', 'password', 'select-one' then el.value
26 when 'checkbox' then el.checked 20 when 'checkbox' then el.checked
27 21
22 attributeBinding = (attr) -> (el, value) ->
23 if value then el.setAttribute attr, value else el.removeAttribute attr
24
25 stateBinding = (attr, inverse = false) -> (el, value) ->
26 attributeBinding(attr) el, if inverse is !value then attr else false
27
28 bindings = 28 bindings =
29 show: (el, value) -> 29 checked:
30 el.style.display = if value then '' else 'none' 30 stateBinding 'checked'
31 hide: (el, value) -> 31 selected:
32 el.style.display = if value then 'none' else '' 32 stateBinding 'selected'
33 enabled: (el, value) -> 33 disabled:
34 setAttribute el, 'disabled', !value, true 34 stateBinding 'disabled'
35 disabled: (el, value) -> 35 unchecked:
36 setAttribute el, 'disabled', value, true 36 stateBinding 'checked', true
37 checked: (el, value) -> 37 unselected:
38 setAttribute el, 'checked', value, true 38 stateBinding 'selected', true
39 unchecked: (el, value) -> 39 enabled:
40 setAttribute el, 'checked', !value, true 40 stateBinding 'disabled', true
41 selected: (el, value) ->
42 setAttribute el, 'selected', value, true
43 unselected: (el, value) ->
44 setAttribute el, 'selected', !value, true
45 text: (el, value) -> 41 text: (el, value) ->
46 el.innerText = value or '' 42 el.innerText = value or ''
47 html: (el, value) -> 43 html: (el, value) ->
48 el.innerHTML = value or '' 44 el.innerHTML = value or ''
49 value: (el, value) -> 45 value: (el, value) ->
50 el.value = value 46 el.value = value
47 show: (el, value) ->
48 el.style.display = if value then '' else 'none'
49 hide: (el, value) ->
50 el.style.display = if value then 'none' else ''
51 51
52 attributeBinding = (attr) -> 52 bidirectionals = ['value', 'checked', 'unchecked', 'selected', 'unselected']
53 (el, value) ->
54 setAttribute el, attr, value
55
56 bidirectionalBindings = ['value', 'checked', 'unchecked', 'selected', 'unselected']
57 53
58 rivets = 54 rivets =
59 bind: (el, adapter, contexts={}) -> 55 bind: (el, adapter, contexts = {}) ->
60 nodes = el.getElementsByTagName '*' 56 nodes = el.getElementsByTagName '*'
61 57
62 [0..(nodes.length - 1)].forEach (n) -> 58 [0..(nodes.length - 1)].forEach (n) ->
......