cable_ready 2.0.7 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
-
[](http://blog.codinghorror.com/the-best-code-is-no-code-at-all/)
|
2
2
|
[](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
|