cable_ready 2.0.7 → 2.0.8
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +2 -2
- data/README.md +93 -2
- data/app/assets/javascripts/cable_ready.js +1 -1
- data/lib/cable_ready/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5879babcb8bff931f4bc405e747ee3b0826c3c41fb8fddb20886d78acbb6c5b0
|
4
|
+
data.tar.gz: e4eb1f5e7f73fe52030ba31dc20ead20f27977c69af75853fce3396bae8ee234
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2a7542d699fb4d616d0ba3ea237c9cf9262a2ee51e6b6b3794805314c17894b6ca92524fb9252d862ae9e49511ab389c99bfa1d35c8aaaac6d4c7b2e6ec8f24a
|
7
|
+
data.tar.gz: f3734598ed4d353fed052b46ac2cbe974b66ab8d396dd4b16064ac1979038a94bc979da44bccce959177297b777825f20085cda2b43a31d45b1b6c538a5b17d7
|
data/Gemfile.lock
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
cable_ready (2.0.
|
4
|
+
cable_ready (2.0.8)
|
5
5
|
activesupport (>= 5.0.0)
|
6
6
|
|
7
7
|
GEM
|
@@ -12,7 +12,7 @@ GEM
|
|
12
12
|
i18n (>= 0.7, < 2)
|
13
13
|
minitest (~> 5.1)
|
14
14
|
tzinfo (~> 1.1)
|
15
|
-
concurrent-ruby (1.
|
15
|
+
concurrent-ruby (1.1.3)
|
16
16
|
i18n (1.1.1)
|
17
17
|
concurrent-ruby (~> 1.0)
|
18
18
|
minitest (5.11.3)
|
data/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
[![Lines of Code](http://img.shields.io/badge/lines_of_code-
|
1
|
+
[![Lines of Code](http://img.shields.io/badge/lines_of_code-239-brightgreen.svg?style=flat)](http://blog.codinghorror.com/the-best-code-is-no-code-at-all/)
|
2
2
|
[![Code Status](https://img.shields.io/codeclimate/maintainability/hopsoft/cable_ready.svg?style=flat)](https://codeclimate.com/github/hopsoft/cable_ready)
|
3
3
|
|
4
4
|
# CableReady
|
@@ -69,6 +69,9 @@ for a more complete reference implementation.
|
|
69
69
|
|
70
70
|
> It's possible to invoke multiple DOM operations with a single ActionCable broadcast.
|
71
71
|
|
72
|
+
> All DOM mutations have corresponding `before/after` events triggered on `document`.
|
73
|
+
> These events expose `detail.config` set to the arguments from the server.
|
74
|
+
|
72
75
|
### DOM Events
|
73
76
|
|
74
77
|
#### [dispatchEvent](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent)
|
@@ -98,6 +101,33 @@ cable_ready["MyChannel"].morph(
|
|
98
101
|
)
|
99
102
|
```
|
100
103
|
|
104
|
+
##### JavaScript Events
|
105
|
+
|
106
|
+
- `cable-ready:before-morph`
|
107
|
+
- `cable-ready:after-morph`
|
108
|
+
|
109
|
+
##### Stimulus Gotchas
|
110
|
+
|
111
|
+
For some reason [Stimulus](https://github.com/stimulusjs/stimulus) controllers don't reconnect after DOM mutations triggered by [Morphdom](https://github.com/patrick-steele-idem/morphdom).
|
112
|
+
You can force your controllers to reconnect with the following code.
|
113
|
+
|
114
|
+
```javascript
|
115
|
+
import { Controller } from "stimulus"
|
116
|
+
|
117
|
+
export default class extends Controller {
|
118
|
+
connect() {
|
119
|
+
this.name = this.element.dataset.controller;
|
120
|
+
document.addEventListener(
|
121
|
+
'cable-ready:after-morph',
|
122
|
+
(() => {
|
123
|
+
setTimeout(() => this.element.setAttribute('data-controller', this.name), 1);
|
124
|
+
this.element.setAttribute('data-controller', '');
|
125
|
+
}).bind(this)
|
126
|
+
);
|
127
|
+
}
|
128
|
+
}
|
129
|
+
```
|
130
|
+
|
101
131
|
#### [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
|
102
132
|
|
103
133
|
Sets the innerHTML of a DOM element.
|
@@ -110,6 +140,11 @@ cable_ready["MyChannel"].inner_html(
|
|
110
140
|
)
|
111
141
|
```
|
112
142
|
|
143
|
+
##### JavaScript Events
|
144
|
+
|
145
|
+
- `cable-ready:before-inner-html`
|
146
|
+
- `cable-ready:after-inner-html`
|
147
|
+
|
113
148
|
#### [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
|
114
149
|
|
115
150
|
Sets the text content of a DOM element.
|
@@ -121,6 +156,11 @@ cable_ready["MyChannel"].text_content(
|
|
121
156
|
)
|
122
157
|
```
|
123
158
|
|
159
|
+
##### JavaScript Events
|
160
|
+
|
161
|
+
- `cable-ready:before-text-content`
|
162
|
+
- `cable-ready:after-text-content`
|
163
|
+
|
124
164
|
#### [insertAdjacentHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)
|
125
165
|
|
126
166
|
Inserts HTML into the DOM relative to an element.
|
@@ -135,6 +175,11 @@ cable_ready["MyChannel"].insert_adjacent_html(
|
|
135
175
|
)
|
136
176
|
```
|
137
177
|
|
178
|
+
##### JavaScript Events
|
179
|
+
|
180
|
+
- `cable-ready:before-insert-adjacent-html`
|
181
|
+
- `cable-ready:after-insert-adjacent-html`
|
182
|
+
|
138
183
|
#### [insertAdjacentText](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText)
|
139
184
|
|
140
185
|
Inserts text into the DOM relative to an element.
|
@@ -148,6 +193,11 @@ cable_ready["MyChannel"].insert_adjacent_text(
|
|
148
193
|
)
|
149
194
|
```
|
150
195
|
|
196
|
+
##### JavaScript Events
|
197
|
+
|
198
|
+
- `cable-ready:before-insert-adjacent-text`
|
199
|
+
- `cable-ready:after-insert-adjacent-text`
|
200
|
+
|
151
201
|
#### [remove](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove)
|
152
202
|
|
153
203
|
Removes an element from the DOM.
|
@@ -159,6 +209,11 @@ cable_ready["MyChannel"].remove(
|
|
159
209
|
)
|
160
210
|
```
|
161
211
|
|
212
|
+
##### JavaScript Events
|
213
|
+
|
214
|
+
- `cable-ready:before-remove`
|
215
|
+
- `cable-ready:after-remove`
|
216
|
+
|
162
217
|
#### [replace](https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild)
|
163
218
|
|
164
219
|
Replaces a DOM element with new HTML.
|
@@ -171,6 +226,11 @@ cable_ready["MyChannel"].replace(
|
|
171
226
|
)
|
172
227
|
```
|
173
228
|
|
229
|
+
##### JavaScript Events
|
230
|
+
|
231
|
+
- `cable-ready:before-replace`
|
232
|
+
- `cable-ready:after-replace`
|
233
|
+
|
174
234
|
#### [setValue](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)
|
175
235
|
|
176
236
|
Sets the value of an element.
|
@@ -182,6 +242,11 @@ cable_ready["MyChannel"].set_value(
|
|
182
242
|
)
|
183
243
|
```
|
184
244
|
|
245
|
+
##### JavaScript Events
|
246
|
+
|
247
|
+
- `cable-ready:before-set-value`
|
248
|
+
- `cable-ready:after-set-value`
|
249
|
+
|
185
250
|
### Attribute Mutations
|
186
251
|
|
187
252
|
#### [setAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
|
@@ -196,6 +261,11 @@ cable_ready["MyChannel"].set_attribute(
|
|
196
261
|
)
|
197
262
|
```
|
198
263
|
|
264
|
+
##### JavaScript Events
|
265
|
+
|
266
|
+
- `cable-ready:before-set-attribute`
|
267
|
+
- `cable-ready:after-set-attribute`
|
268
|
+
|
199
269
|
#### [removeAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute)
|
200
270
|
|
201
271
|
Removes an attribute from an element.
|
@@ -207,6 +277,11 @@ cable_ready["MyChannel"].remove_attribute(
|
|
207
277
|
)
|
208
278
|
```
|
209
279
|
|
280
|
+
##### JavaScript Events
|
281
|
+
|
282
|
+
- `cable-ready:before-remove-attribute`
|
283
|
+
- `cable-ready:after-remove-attribute`
|
284
|
+
|
210
285
|
### CSS Class Mutations
|
211
286
|
|
212
287
|
#### [addCssClass](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
|
@@ -221,6 +296,12 @@ cable_ready["MyChannel"].add_css_class(
|
|
221
296
|
)
|
222
297
|
|
223
298
|
```
|
299
|
+
|
300
|
+
##### JavaScript Events
|
301
|
+
|
302
|
+
- `cable-ready:before-add-css-class`
|
303
|
+
- `cable-ready:after-add-css-class`
|
304
|
+
|
224
305
|
#### [removeCssClass](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
|
225
306
|
|
226
307
|
Removes a css class from an element.
|
@@ -232,6 +313,11 @@ cable_ready["MyChannel"].add_css_class(
|
|
232
313
|
)
|
233
314
|
```
|
234
315
|
|
316
|
+
##### JavaScript Events
|
317
|
+
|
318
|
+
- `cable-ready:before-remove-css-class`
|
319
|
+
- `cable-ready:after-remove-css-class`
|
320
|
+
|
235
321
|
### Dataset Mutations
|
236
322
|
|
237
323
|
#### [setDatasetProperty](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)
|
@@ -246,10 +332,15 @@ cable_ready["MyChannel"].set_dataset_property(
|
|
246
332
|
)
|
247
333
|
```
|
248
334
|
|
335
|
+
##### JavaScript Events
|
336
|
+
|
337
|
+
- `cable-ready:before-set-dataset-property`
|
338
|
+
- `cable-ready:after-set-dataset-property`
|
339
|
+
|
249
340
|
## JavaScript Development
|
250
341
|
|
251
342
|
The JavaScript source is located in `app/assets/javascripts/cable_ready/src`
|
252
|
-
& transpiles to `app/assets/javascripts/cable_ready
|
343
|
+
& transpiles to `app/assets/javascripts/cable_ready.js` via Webpack.
|
253
344
|
|
254
345
|
```sh
|
255
346
|
# build javascript
|
@@ -1 +1 @@
|
|
1
|
-
window.CableReady=function(e){var t={};function n
|
1
|
+
window.CableReady=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t,r){"use strict";var n,o="http://www.w3.org/1999/xhtml",a="undefined"==typeof document?void 0:document,c=a?a.body||a.createElement("div"):{},l=c.hasAttributeNS?function(e,t,r){return e.hasAttributeNS(t,r)}:c.hasAttribute?function(e,t,r){return e.hasAttribute(r)}:function(e,t,r){return null!=e.getAttributeNode(t,r)};function i(e,t){var r=e.nodeName,n=t.nodeName;return r===n||!!(t.actualize&&r.charCodeAt(0)<91&&n.charCodeAt(0)>90)&&r===n.toUpperCase()}function u(e,t,r){e[r]!==t[r]&&(e[r]=t[r],e[r]?e.setAttribute(r,""):e.removeAttribute(r,""))}var d={OPTION:function(e,t){u(e,t,"selected")},INPUT:function(e,t){u(e,t,"checked"),u(e,t,"disabled"),e.value!==t.value&&(e.value=t.value),l(t,null,"value")||e.removeAttribute("value")},TEXTAREA:function(e,t){var r=t.value;e.value!==r&&(e.value=r);var n=e.firstChild;if(n){var o=n.nodeValue;if(o==r||!r&&o==e.placeholder)return;n.nodeValue=r}},SELECT:function(e,t){if(!l(t,null,"multiple")){for(var r=0,n=t.firstChild;n;){var o=n.nodeName;if(o&&"OPTION"===o.toUpperCase()){if(l(n,null,"selected")){r;break}r++}n=n.nextSibling}e.selectedIndex=r}}},f=1,s=3,m=8;function b(){}function v(e){return e.id}var y=function(e){return function(t,r,c){if(c||(c={}),"string"==typeof r)if("#document"===t.nodeName||"HTML"===t.nodeName){var l=r;(r=a.createElement("html")).innerHTML=l}else r=function(e){var t;return!n&&a.createRange&&(n=a.createRange()).selectNode(a.body),n&&n.createContextualFragment?t=n.createContextualFragment(e):(t=a.createElement("body")).innerHTML=e,t.childNodes[0]}(r);var u,y=c.getNodeKey||v,p=c.onBeforeNodeAdded||b,S=c.onNodeAdded||b,h=c.onBeforeElUpdated||b,g=c.onElUpdated||b,N=c.onBeforeNodeDiscarded||b,C=c.onNodeDiscarded||b,x=c.onBeforeElChildrenUpdated||b,A=!0===c.childrenOnly,T={};function q(e){u?u.push(e):u=[e]}function E(e,t,r){!1!==N(e)&&(t&&t.removeChild(e),C(e),function e(t,r){if(t.nodeType===f)for(var n=t.firstChild;n;){var o=void 0;r&&(o=y(n))?q(o):(C(n),n.firstChild&&e(n,r)),n=n.nextSibling}}(e,r))}function j(e){S(e);for(var t=e.firstChild;t;){var r=t.nextSibling,n=y(t);if(n){var o=T[n];o&&i(t,o)&&(t.parentNode.replaceChild(o,t),O(o,t))}j(t),t=r}}function O(n,o,c){var l,u=y(o);if(u&&delete T[u],!r.isSameNode||!r.isSameNode(t)){if(!c){if(!1===h(n,o))return;if(e(n,o),g(n),!1===x(n,o))return}if("TEXTAREA"!==n.nodeName){var b,v,S,N,C=o.firstChild,A=n.firstChild;e:for(;C;){for(S=C.nextSibling,b=y(C);A;){if(v=A.nextSibling,C.isSameNode&&C.isSameNode(A)){C=S,A=v;continue e}l=y(A);var w=A.nodeType,M=void 0;if(w===C.nodeType&&(w===f?(b?b!==l&&((N=T[b])?A.nextSibling===N?M=!1:(n.insertBefore(N,A),v=A.nextSibling,l?q(l):E(A,n,!0),A=N):M=!1):l&&(M=!1),(M=!1!==M&&i(A,C))&&O(A,C)):w!==s&&w!=m||(M=!0,A.nodeValue!==C.nodeValue&&(A.nodeValue=C.nodeValue))),M){C=S,A=v;continue e}l?q(l):E(A,n,!0),A=v}if(b&&(N=T[b])&&i(N,C))n.appendChild(N),O(N,C);else{var V=p(C);!1!==V&&(V&&(C=V),C.actualize&&(C=C.actualize(n.ownerDocument||a)),n.appendChild(C),j(C))}C=S,A=v}for(;A;)v=A.nextSibling,(l=y(A))?q(l):E(A,n,!0),A=v}var L=d[n.nodeName];L&&L(n,o)}}!function e(t){if(t.nodeType===f)for(var r=t.firstChild;r;){var n=y(r);n&&(T[n]=r),e(r),r=r.nextSibling}}(t);var w=t,M=w.nodeType,V=r.nodeType;if(!A)if(M===f)V===f?i(t,r)||(C(t),w=function(e,t){for(var r=e.firstChild;r;){var n=r.nextSibling;t.appendChild(r),r=n}return t}(t,function(e,t){return t&&t!==o?a.createElementNS(t,e):a.createElement(e)}(r.nodeName,r.namespaceURI))):w=r;else if(M===s||M===m){if(V===M)return w.nodeValue!==r.nodeValue&&(w.nodeValue=r.nodeValue),w;w=r}if(w===r)C(t);else if(O(w,r,A),u)for(var L=0,P=u.length;L<P;L++){var H=T[u[L]];H&&E(H,H.parentNode,!1)}return!A&&w!==t&&t.parentNode&&(w.actualize&&(w=w.actualize(t.ownerDocument||a)),t.parentNode.replaceChild(w,t)),w}}(function(e,t){var r,n,o,a,c,i=t.attributes;for(r=i.length-1;r>=0;--r)o=(n=i[r]).name,a=n.namespaceURI,c=n.value,a?(o=n.localName||o,e.getAttributeNS(a,o)!==c&&e.setAttributeNS(a,o,c)):e.getAttribute(o)!==c&&e.setAttribute(o,c);for(r=(i=e.attributes).length-1;r>=0;--r)!1!==(n=i[r]).specified&&(o=n.name,(a=n.namespaceURI)?(o=n.localName||o,l(t,a,o)||e.removeAttributeNS(a,o)):l(t,null,o)||e.removeAttribute(o))});e.exports=y},function(e,t,r){"use strict";r.r(t),r.d(t,"perform",function(){return l});var n=r(0),o=r.n(n),a=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};c.dispatchEvent({name:e,detail:t})},c={dispatchEvent:function(e){var t=document;e.selector&&(t=document.querySelector(e.selector)||document);var r=new Event(e.name);r.detail=e.detail,t.dispatchEvent(r)},morph:function(e){var t=document.createElement("template");t.innerHTML=String(e.html).trim(),a("cable-ready:before-morph",{config:e,content:t.content}),o()(document.querySelector(e.selector),t.content,{childrenOnly:!!e.childrenOnly}),e.focusSelector&&document.querySelector(e.focusSelector).focus(),a("cable-ready:after-morph",{config:e,content:t.content})},innerHtml:function(e){a("cable-ready:before-inner-html",e),document.querySelector(e.selector).innerHTML=e.html,e.focusSelector&&document.querySelector(e.focusSelector).focus(),a("cable-ready:after-inner-html",e)},textContent:function(e){a("cable-ready:before-text-content",e),document.querySelector(e.selector).textContent=e.text,a("cable-ready:after-text-content",e)},insertAdjacentHtml:function(e){a("cable-ready:before-insert-adjacent-html",e),document.querySelector(e.selector).insertAdjacentHTML(e.position||"beforeend",e.html),e.focusSelector&&document.querySelector(e.focusSelector).focus(),a("cable-ready:after-insert-adjacent-html",e)},insertAdjacentText:function(e){a("cable-ready:before-insert-adjacent-text",e),document.querySelector(e.querySelector).insertAdjacentText(e.position||"beforeend",e.text),a("cable-ready:after-insert-adjacent-text",e)},remove:function(e){a("cable-ready:before-remove",e),document.querySelector(e.selector).remove(),e.focusSelector&&document.querySelector(e.focusSelector).focus(),a("cable-ready:after-remove",e)},replace:function(e){a("cable-ready:before-replace",e);document.querySelector(e.selector);document.createElement("div").innerHTML=e.html,e.focusSelector&&document.querySelector(e.focusSelector).focus(),a("cable-ready:after-replace",e)},setValue:function(e){a("cable-ready:before-set-value",e),document.querySelector(e.selector).value=e.value,a("cable-ready:after-set-value",e)},setAttribute:function(e){a("cable-ready:before-set-attribute",e),document.querySelector(e.selector).setAttribute(e.name,e.value),a("cable-ready:after-set-attribute",e)},removeAttribute:function(e){a("cable-ready:before-remove-attribute",e),document.querySelector(e.selector).removeAttribute(e.name),a("cable-ready:after-remove-attribute",e)},addCssClass:function(e){a("cable-ready:before-add-css-class",e),document.querySelector(e.selector).classList.add(e.name),a("cable-ready:after-add-css-class",e)},removeCssClass:function(e){a("cable-ready:before-remove-css-class",e),document.querySelector(e.selector).classList.remove(e.name),a("cable-ready:after-remove-css-class",e)},setDatasetProperty:function(e){a("cable-ready:before-set-dataset-property",e),document.querySelector(e.selector).dataset[e.name]=e.value,a("cable-ready:after-set-dataset-property",e)}},l=function(e){for(var t in e)if(e.hasOwnProperty(t))for(var r=e[t],n=0;n<r.length;n++)try{var o=r[n];c[t](o)}catch(e){console.log("CableReady detected an error in ".concat(t,"! ").concat(e.message))}}}]);
|
data/lib/cable_ready/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: cable_ready
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.0.
|
4
|
+
version: 2.0.8
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Nathan Hopkins
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2018-
|
11
|
+
date: 2018-11-25 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: activesupport
|