pinball_wizard 0.4.0 → 0.4.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +30 -4
- data/dist/css_tagger.js +9 -1
- data/dist/css_tagger.min.js +3 -0
- data/lib/pinball_wizard/version.rb +1 -1
- data/package.json +1 -1
- data/src/css_tagger.coffee +8 -0
- data/test/spec/css_tagger_spec.coffee +17 -0
- metadata +2 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d40319ad8219b04f717b324a1475790556afe0c7
|
4
|
+
data.tar.gz: 8a8b8baf89c69bcafb54dffe584bcf1e695136b5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: eb1a6a3c593da12102125bcd7a85634aa23aa512e3be2a1637c11919de5ea5248b62622c327b4bcb2fe7cb98866193fa10213d3e24c14707cf31c41c42b10a97
|
7
|
+
data.tar.gz: 4ef3c955adc6942fbd9869795caaa8303f82b820d12bac9df5a7e41e64047398625abf5845c0f1e23f9ccb83bdc6c9f434ef8f76fe4de064085a99573aa441f6
|
data/README.md
CHANGED
@@ -176,12 +176,38 @@ pinball.permanent()
|
|
176
176
|
pinball.resetPermanent()
|
177
177
|
```
|
178
178
|
|
179
|
-
## JsConfig
|
180
|
-
The application keeps a list of features and passes them in the JsConfig object (e.g. `window.
|
179
|
+
## JsConfig Registry
|
180
|
+
The application keeps a list of features and passes them in the JsConfig object (e.g. `window.pinball`). These define what's available and activated on page load.
|
181
181
|
|
182
|
-
|
182
|
+
#### Plain JavaScript
|
183
|
+
```javascript
|
184
|
+
<head>
|
185
|
+
<script type="text/javascript">
|
186
|
+
window.pinball = window.pinball || []
|
187
|
+
window.pinball.push(['add', { "feature_a": "active", "feature_b": "inactive", "feature_c": "disabled" }]);
|
188
|
+
</script>
|
189
|
+
<head>
|
190
|
+
```
|
191
|
+
|
192
|
+
#### Ruby (example is in slim)
|
193
|
+
```slim
|
194
|
+
head
|
195
|
+
javascript:
|
196
|
+
window.pinball = window.pinball || [];
|
197
|
+
window.pinball.push(['add', #{{PinballWizard::Registry.to_h.to_json}}]);
|
198
|
+
```
|
199
|
+
|
200
|
+
## Removing the Flicker
|
183
201
|
|
184
|
-
|
202
|
+
When using `.use-{feature-name}`, you may notice a shift or flicker in the UI. This occurs when pinball's JavaScript executes after the `DOMContentReady` event. To prevent this, add `dist/css_tagger.min.js` into your `<head>` tag. For example:
|
203
|
+
|
204
|
+
```html
|
205
|
+
<head>
|
206
|
+
<script type="text/javascript">
|
207
|
+
// paste snippet from dist/css_tagger.min.js
|
208
|
+
</script>
|
209
|
+
</head>
|
210
|
+
```
|
185
211
|
|
186
212
|
## Debugging
|
187
213
|
|
data/dist/css_tagger.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
(function() {
|
2
2
|
define(function() {
|
3
3
|
return function(ele, pinballQueue, searchQuery) {
|
4
|
-
var add, classNames, entry, feature, featureNames, i, j, len, len1, matches, ref, state;
|
4
|
+
var add, classNames, entry, feature, featureNames, i, j, k, len, len1, len2, matches, ref, ref1, state, storage;
|
5
5
|
classNames = [];
|
6
6
|
add = function(name) {
|
7
7
|
return classNames.push('use-' + name.split('_').join('-'));
|
@@ -33,6 +33,14 @@
|
|
33
33
|
add(feature);
|
34
34
|
}
|
35
35
|
}
|
36
|
+
storage = window.localStorage || {
|
37
|
+
setItem: function() {}
|
38
|
+
};
|
39
|
+
ref1 = JSON.parse(storage.getItem('pinball_wizard')) || [];
|
40
|
+
for (k = 0, len2 = ref1.length; k < len2; k++) {
|
41
|
+
feature = ref1[k];
|
42
|
+
add(feature);
|
43
|
+
}
|
36
44
|
if (ele) {
|
37
45
|
ele.className += ' ' + classNames.join(' ');
|
38
46
|
}
|
@@ -0,0 +1,3 @@
|
|
1
|
+
// Minified on http://closure-compiler.appspot.com/ using Advanced settings
|
2
|
+
|
3
|
+
(function(h,c,f){var g,k,e,b,d,l,m;k=[];g=function(b){k.push("use-"+b.split("_").join("-"))};d=0;for(l=c.length;d<l;d++)if(e=c[d],e.length)switch(e[0]){case "activate":g(e[1]);break;case "add":for(b in e=e[1],e)m=e[b],"active"===m&&g(b)}if((b=f.match(/pinball=([a-z-_,]+)/i))&&1<b.length)for(c=(b[1]+"").split(","),f=0,d=c.length;f<d;f++)b=c[f],g(b);d=JSON.parse((window.localStorage||{setItem:function(){}}).getItem("pinball_wizard"))||[];c=0;for(f=d.length;c<f;c++)b=d[c],g(b);h&&(h.className+=" "+k.join(" "))})(document.documentElement,window.pinball,window.location.search);
|
data/package.json
CHANGED
data/src/css_tagger.coffee
CHANGED
@@ -21,6 +21,7 @@ define ->
|
|
21
21
|
add = (name) ->
|
22
22
|
classNames.push 'use-' + name.split('_').join('-')
|
23
23
|
|
24
|
+
# Activated by the queue
|
24
25
|
for entry in pinballQueue
|
25
26
|
continue unless entry.length
|
26
27
|
|
@@ -32,6 +33,7 @@ define ->
|
|
32
33
|
for feature, state of entry[1]
|
33
34
|
add feature if state == 'active'
|
34
35
|
|
36
|
+
# Activated by the URL
|
35
37
|
matches = searchQuery.match(/pinball=([a-z-_,]+)/i)
|
36
38
|
if matches && matches.length > 1
|
37
39
|
featureNames = (matches[1] + '').split(',')
|
@@ -39,6 +41,12 @@ define ->
|
|
39
41
|
for feature in featureNames
|
40
42
|
add feature
|
41
43
|
|
44
|
+
|
45
|
+
# Activated permanently
|
46
|
+
storage = window.localStorage or { setItem: -> }
|
47
|
+
for feature in (JSON.parse(storage.getItem('pinball_wizard')) or [])
|
48
|
+
add feature
|
49
|
+
|
42
50
|
ele.className += ' ' + classNames.join(' ') if ele
|
43
51
|
|
44
52
|
return
|
@@ -48,3 +48,20 @@ define ['css_tagger'], (tagger) ->
|
|
48
48
|
|
49
49
|
tagger ele, pinballQueue, '?pinball=feature_c'
|
50
50
|
expect(ele.className).toEqual ' use-feature-a use-feature-b use-feature-c'
|
51
|
+
|
52
|
+
it 'should add classes from the permanent storage', ->
|
53
|
+
ele = document.createElement 'div'
|
54
|
+
window.localStorage.setItem 'pinball_wizard', JSON.stringify(['feature_a','feature_b'])
|
55
|
+
|
56
|
+
tagger ele, [], ''
|
57
|
+
expect(ele.className).toEqual ' use-feature-a use-feature-b'
|
58
|
+
|
59
|
+
# Cleanup
|
60
|
+
window.localStorage.setItem 'pinball_wizard', null
|
61
|
+
|
62
|
+
it 'should not add any when permanent storage is null', ->
|
63
|
+
ele = document.createElement 'div'
|
64
|
+
window.localStorage.setItem 'pinball_wizard', null
|
65
|
+
|
66
|
+
tagger ele, [], ''
|
67
|
+
expect(ele.className).toEqual ''
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: pinball_wizard
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.4.
|
4
|
+
version: 0.4.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Caleb Wright
|
@@ -29,6 +29,7 @@ files:
|
|
29
29
|
- Rakefile
|
30
30
|
- bower.json
|
31
31
|
- dist/css_tagger.js
|
32
|
+
- dist/css_tagger.min.js
|
32
33
|
- dist/pinball_wizard.js
|
33
34
|
- gulpfile.js
|
34
35
|
- karma.conf.js
|