evil-blocks-rails 0.6.0 → 0.6.1
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/ChangeLog.md +3 -0
- data/README.md +80 -76
- data/lib/evil-blocks.debug.js +15 -12
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 017a2149cb25489d217d292fcf03f59e3701d51e
|
4
|
+
data.tar.gz: 24603c09499b74e9107469a83ced823427508a75
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1e22630b2a1fa839f953743e2b8bc13d2914a25c0ce73932c8c9ccbbb39063330c3734a3ff38ec9cb9c1e277576c74dd8b04f54b6653a4b6fcd4bdccba6c243c
|
7
|
+
data.tar.gz: a40149bac58c8ff579e52c3d6513ed18f962c2d5432fb8c312702858c72ddfb5fa3165e3b4c9792191a35b5675ae9095fe32008a8c9bf1f649d3a30d59b3989e
|
data/ChangeLog.md
CHANGED
data/README.md
CHANGED
@@ -3,17 +3,17 @@
|
|
3
3
|
Evil Block is a tiny JS framework for web pages. It is based on 4 ideas:
|
4
4
|
|
5
5
|
* **Split code to independent blocks.** “Divide and rule” is always good idea.
|
6
|
-
* **Blocks communicate by events.** Events is easy and safe method to clean
|
6
|
+
* **Blocks communicate by events.** Events is an easy and safe method to clean
|
7
7
|
very complicated dependencies between controls.
|
8
|
-
* **Separate JS and CSS.** You use classes only for styles and bind JS
|
8
|
+
* **Separate JS and CSS.** You should use classes only for styles and bind JS
|
9
9
|
by selectors with special attributes. So you can update your styles without
|
10
10
|
fear to break your scripts.
|
11
|
-
* **Try not to render on client.** 2
|
12
|
-
but it has [big price]. Most of web pages (instead of web applications)
|
11
|
+
* **Try not to render on client.** 2-way data-binding looks very cool,
|
12
|
+
but it has a [big price]. Most of web pages (instead of web applications)
|
13
13
|
can render all HTML on server and use client rendering only in few small
|
14
14
|
places. Without rendering we can incredibly clean code and architecture.
|
15
15
|
|
16
|
-
See also [Evil Front], a pack of helpers for Ruby on Rails and Evil
|
16
|
+
See also [Evil Front], a pack of helpers for Ruby on Rails and Evil Blocks.
|
17
17
|
|
18
18
|
Sponsored by [Evil Martians]. Role aliases were taken from [Role.js].
|
19
19
|
|
@@ -70,11 +70,11 @@ evil.block '@@todo',
|
|
70
70
|
## Attributes
|
71
71
|
|
72
72
|
If you use classes selectors in CSS and JS, your scripts will be depend
|
73
|
-
on styles. If you
|
74
|
-
change all button’s selectors in scripts.
|
73
|
+
on styles. If you change `.small-button` to `.big-button`, you must
|
74
|
+
change all the button’s selectors in scripts.
|
75
75
|
|
76
|
-
Separated scripts and styles are better, so Evil
|
77
|
-
two HTML attributes to bind your
|
76
|
+
Separated scripts and styles are better, so Evil Blocks prefers to work with
|
77
|
+
two HTML attributes to bind your JS: `data-block` (to define blocks)
|
78
78
|
and `data-role` (to define elements inside block).
|
79
79
|
|
80
80
|
```html
|
@@ -84,9 +84,9 @@ and `data-role` (to define elements inside block).
|
|
84
84
|
</div>
|
85
85
|
```
|
86
86
|
|
87
|
-
Evil
|
88
|
-
attributes: `@@block` and `@role`. For
|
89
|
-
to use same shortcuts.
|
87
|
+
Evil Blocks extends Slim and jQuery, so you can use shortcuts for these
|
88
|
+
attributes: `@@block` and `@role`. For Haml you can use [Role Block Haml] gem
|
89
|
+
to use the same shortcuts.
|
90
90
|
|
91
91
|
```haml
|
92
92
|
@@todo
|
@@ -97,21 +97,21 @@ to use same shortcuts.
|
|
97
97
|
$('@tasks')
|
98
98
|
```
|
99
99
|
|
100
|
-
With
|
100
|
+
With these attributes you can easily change interface style
|
101
101
|
and be sure in scripts:
|
102
102
|
|
103
103
|
```haml
|
104
104
|
.big-button@addButton
|
105
105
|
```
|
106
106
|
|
107
|
-
Of course, Evil Block doesn’t force you to
|
108
|
-
You can any attributes, that you like.
|
107
|
+
Of course, Evil Block doesn’t force you to write only these selectors.
|
108
|
+
You can use any attributes, that you like.
|
109
109
|
|
110
110
|
[Role Block Haml]: https://github.com/vladson/role_block_haml
|
111
111
|
|
112
112
|
## Blocks
|
113
113
|
|
114
|
-
You should split your interface
|
114
|
+
You should split your interface into independent controls and mark them
|
115
115
|
with `data-block`:
|
116
116
|
|
117
117
|
```haml
|
@@ -124,7 +124,7 @@ header@@header
|
|
124
124
|
.docs-page@@docs
|
125
125
|
```
|
126
126
|
|
127
|
-
|
127
|
+
Also you can vitalize your blocks in scripts with `evil.block` function:
|
128
128
|
|
129
129
|
```coffee
|
130
130
|
evil.block '@@header',
|
@@ -133,13 +133,13 @@ evil.block '@@header',
|
|
133
133
|
console.log('Vitalize', @block)
|
134
134
|
```
|
135
135
|
|
136
|
-
When page
|
137
|
-
(this is shortcut for `[data-block=header]`) and
|
138
|
-
founded block. So, if your page contains two headers, `init`
|
139
|
-
twice with different `@block
|
136
|
+
When a page was loaded Evil Blocks finds blocks by `@@header` selector
|
137
|
+
(this is a shortcut for `[data-block=header]`) and calls `init` on every
|
138
|
+
founded block. So, if your page contains two headers, `init` will be called
|
139
|
+
twice with different `@block`’s.
|
140
140
|
|
141
|
-
|
142
|
-
inside current block
|
141
|
+
The `@block` property will contain a jQuery node of current block.
|
142
|
+
You can search elements inside of current block with `@$(selector)` method:
|
143
143
|
|
144
144
|
```coffee
|
145
145
|
evil.block '@@docs',
|
@@ -163,8 +163,8 @@ evil.block '@@gallery',
|
|
163
163
|
@showPhoto(@current)
|
164
164
|
```
|
165
165
|
|
166
|
-
Evil
|
167
|
-
for every element inside block with `data-role` attribute:
|
166
|
+
Evil Blocks will automatically create properties with jQuery nodes
|
167
|
+
for every element inside of a block with `data-role` attribute:
|
168
168
|
|
169
169
|
```haml
|
170
170
|
.todo-control@@todo
|
@@ -178,9 +178,9 @@ evil.block '@@todo',
|
|
178
178
|
@tasks.append(task)
|
179
179
|
```
|
180
180
|
|
181
|
-
If you add new HTML
|
182
|
-
`evil.block.vitalize()`. This
|
183
|
-
document.
|
181
|
+
If you add new HTML with AJAX, you can vitalize new blocks with
|
182
|
+
`evil.block.vitalize()`. This function will vitalize only new blocks in
|
183
|
+
a document.
|
184
184
|
|
185
185
|
```coffee
|
186
186
|
@sections.append(html)
|
@@ -189,7 +189,8 @@ evil.block.vitalize()
|
|
189
189
|
|
190
190
|
## Events
|
191
191
|
|
192
|
-
You can bind listeners to events inside block
|
192
|
+
You can bind listeners to events inside of a block with `events on selectors`
|
193
|
+
method:
|
193
194
|
|
194
195
|
```coffee
|
195
196
|
evil.block '@@todo',
|
@@ -198,7 +199,7 @@ evil.block '@@todo',
|
|
198
199
|
# Event listener
|
199
200
|
```
|
200
201
|
|
201
|
-
|
202
|
+
A more difficult example:
|
202
203
|
|
203
204
|
```coffee
|
204
205
|
evil.block '@@form',
|
@@ -209,12 +210,12 @@ evil.block '@@form',
|
|
209
210
|
@ajaxSearch('Changed', field.val())
|
210
211
|
```
|
211
212
|
|
212
|
-
Listener will receive jQuery Event object as first argument.
|
213
|
-
Current element (`this` in jQuery listeners) will be in `event.el`
|
214
|
-
All listeners are delegated on current block, so `click on @button`
|
215
|
-
equal to `@block.on 'click', '@button', ->`.
|
213
|
+
Listener will receive a jQuery Event object as the first argument.
|
214
|
+
Current element (`this` in jQuery listeners) will be contained in `event.el`
|
215
|
+
property. All listeners are delegated on current block, so `click on @button`
|
216
|
+
is equal to `@block.on 'click', '@button', ->`.
|
216
217
|
|
217
|
-
You should prevent default event behavior
|
218
|
+
You should prevent default event behavior with `event.preventDefault()`,
|
218
219
|
`return false` will not do anything in block’s listeners. I recommend
|
219
220
|
[evil-front/links] to prevent default behavior in any links with `href="#"`
|
220
221
|
to clean your code.
|
@@ -242,8 +243,8 @@ Listener `load on window` will execute immediately, if window is already loaded.
|
|
242
243
|
|
243
244
|
## Blocks Communications
|
244
245
|
|
245
|
-
Blocks should
|
246
|
-
to block node
|
246
|
+
Blocks should communicate via custom jQuery events. You can bind an event
|
247
|
+
listener to a block node with `on events` method:
|
247
248
|
|
248
249
|
```coffee
|
249
250
|
evil.block '@@slideshow',
|
@@ -278,18 +279,18 @@ evil.block '@@cityChanger',
|
|
278
279
|
|
279
280
|
## Rendering
|
280
281
|
|
281
|
-
If you
|
282
|
-
templates. Client rendering requires a lot of libraries and architecture.
|
283
|
-
2-way data binding looks cool, but has very [big price] in performance,
|
282
|
+
If you render on the client and on the server-side, you must repeat helpers,
|
283
|
+
i18n, templates. Client rendering requires a lot of libraries and architecture.
|
284
|
+
2-way data binding looks cool, but has a very [big price] in performance,
|
284
285
|
templates, animation and overengeniring.
|
285
286
|
|
286
|
-
If you develop web page (not web application with offline support, etc),
|
287
|
+
If you develop a web page (not a web application with offline support, etc),
|
287
288
|
server-side rendering will be more useful. Users will see your interface
|
288
289
|
imminently, search engines will index your content and your code will be much
|
289
290
|
simple and clear.
|
290
291
|
|
291
|
-
In most of cases you can avoid client rendering. If you need to add
|
292
|
-
|
292
|
+
In most of cases you can avoid client-side rendering. If you need to add a block
|
293
|
+
with JS, you can render it hidden to page HTML and show it in right time:
|
293
294
|
|
294
295
|
```coffee
|
295
296
|
evil.block '@@comment',
|
@@ -298,9 +299,10 @@ evil.block '@@comment',
|
|
298
299
|
@newCommentForm.slideDown()
|
299
300
|
```
|
300
301
|
|
301
|
-
If user
|
302
|
-
request to save new data on server. Just ask server
|
303
|
-
For example, on new comment server can return
|
302
|
+
If a user changes some data and you need to update the view, you anyway need
|
303
|
+
to send a request to save the new data on a server. Just ask the server
|
304
|
+
to render a new view. For example, on a new comment server can return
|
305
|
+
new comment HTML:
|
304
306
|
|
305
307
|
```coffee
|
306
308
|
evil.block '@@comment',
|
@@ -310,8 +312,8 @@ evil.block '@@comment',
|
|
310
312
|
@comments.append(newComment)
|
311
313
|
```
|
312
314
|
|
313
|
-
But, of course, some cases require client rendering. Evil
|
314
|
-
to do it server
|
315
|
+
But, of course, some cases require client-side rendering. Evil Blocks only
|
316
|
+
recommends to do it on the server side, but not force you:
|
315
317
|
|
316
318
|
```coffee
|
317
319
|
evil.block '@@comment',
|
@@ -325,7 +327,7 @@ evil.block '@@comment',
|
|
325
327
|
|
326
328
|
## Debug
|
327
329
|
|
328
|
-
Evil
|
330
|
+
Evil Blocks contains a debug extension, which logs all the events inside blocks.
|
329
331
|
To enable it, just load `evil-blocks.debug.js`. For example, in Rails:
|
330
332
|
|
331
333
|
```haml
|
@@ -335,37 +337,39 @@ To enable it, just load `evil-blocks.debug.js`. For example, in Rails:
|
|
335
337
|
|
336
338
|
## Extensions
|
337
339
|
|
338
|
-
Evil
|
339
|
-
property and calls `init` method. Any
|
340
|
-
or
|
340
|
+
Evil Blocks has a tiny core. It only finds blocks via selectors,
|
341
|
+
sets the `@block` property and calls the `init` method. Any other features
|
342
|
+
(like event bindings or `@$()` method) are created by filters
|
343
|
+
and can be disabled or replaced.
|
341
344
|
|
342
|
-
Before calling `init`, Evil
|
343
|
-
`evil.block.filters`.
|
344
|
-
class ID as second. It can find some properties
|
345
|
-
DOM nodes and add/remove some object properties.
|
346
|
-
Evil
|
345
|
+
Before calling `init`, Evil Blocks processes an object through the filters list
|
346
|
+
in `evil.block.filters`. A filter accepts an object as its first argument and
|
347
|
+
an unique class ID as the second. It can find some properties inside of
|
348
|
+
the object, work with block DOM nodes and add/remove some object properties.
|
349
|
+
If filter returns `false`, Evil Blocks will stop block vitalizing
|
350
|
+
and will not call the `init` method.
|
347
351
|
|
348
352
|
Default filters:
|
349
353
|
|
350
|
-
1. **Don’t vitalize same DOM node twice.** It
|
351
|
-
was already initialized with
|
352
|
-
2. **Add `@$()` method.** It
|
353
|
-
3. **Add shortcuts to `@element`.** It
|
354
|
+
1. **Don’t vitalize same DOM node twice.** It returns `false` if a block
|
355
|
+
was already initialized with a given ID.
|
356
|
+
2. **Add `@$()` method.** It adds a shortcut find method to an object.
|
357
|
+
3. **Add shortcuts to `@element`.** It adds properties for all children with
|
354
358
|
`data-role` attribute.
|
355
|
-
4. **Bind block events.** Find, bind listeners and remove all methods with
|
356
|
-
name like `on event`.
|
359
|
+
4. **Bind block events.** Find, bind listeners and remove all the methods with
|
360
|
+
a name like `on event`.
|
357
361
|
5. **Smarter window load listener.** Run `load on window` listener immediately,
|
358
362
|
if window is already loaded.
|
359
|
-
6. **Bind window and body events.** Find, bind listeners and remove all
|
360
|
-
with name like `event on window` or
|
361
|
-
7. **Bind elements events.** Find, bind listeners and remove all methods
|
362
|
-
with name like `event on child`.
|
363
|
+
6. **Bind window and body events.** Find, bind listeners and remove all
|
364
|
+
the methods with a name like `event on window` or `event on body`.
|
365
|
+
7. **Bind elements events.** Find, bind listeners and remove all the methods
|
366
|
+
with a name like `event on child`.
|
363
367
|
|
364
368
|
You can add you own filter to `evil.block.filters`. Most filters should be added
|
365
369
|
after first filter to not been called on already initialized blocks.
|
366
370
|
|
367
|
-
Let’s write filter, which will initialize blocks only when they become
|
368
|
-
visible.
|
371
|
+
Let’s write filter, which will initialize blocks only when they become
|
372
|
+
to be visible.
|
369
373
|
|
370
374
|
```coffee
|
371
375
|
filter = (obj) ->
|
@@ -383,8 +387,8 @@ filter = (obj) ->
|
|
383
387
|
evil.block.filters.splice(0, 0, filter)
|
384
388
|
```
|
385
389
|
|
386
|
-
With filters you can change Evil
|
387
|
-
features like mixins.
|
390
|
+
With the filters you can change Evil Blocks logic, add some new shortcuts
|
391
|
+
or features like mixins.
|
388
392
|
|
389
393
|
Also you can remove any default filters from `evil.block.filters`. For example,
|
390
394
|
you can create properties for `data-role` children only from some white list.
|
@@ -393,8 +397,8 @@ But Filters API is still unstable and you should be careful on major updates.
|
|
393
397
|
|
394
398
|
## Modules
|
395
399
|
|
396
|
-
If your blocks
|
397
|
-
multiple blocks on same tag:
|
400
|
+
If your blocks have same behavior, you can create a module-block
|
401
|
+
and set multiple blocks on the same tag:
|
398
402
|
|
399
403
|
```haml
|
400
404
|
@popup@@closable
|
@@ -413,8 +417,8 @@ evil.block '@@popup',
|
|
413
417
|
@clock.removeClass('is-open')
|
414
418
|
```
|
415
419
|
|
416
|
-
If you want to use same methods inside multiple block, you can create
|
417
|
-
inject-function:
|
420
|
+
If you want to use same methods inside of multiple block, you can create
|
421
|
+
an inject-function:
|
418
422
|
|
419
423
|
```coffee
|
420
424
|
fancybox = (obj) ->
|
@@ -455,7 +459,7 @@ If you use Rails 3 on Heroku, you may need
|
|
455
459
|
|
456
460
|
### Ruby
|
457
461
|
|
458
|
-
If you use Sinatra or
|
462
|
+
If you use Sinatra or other non-Rails framework you can add Evil Blocks path
|
459
463
|
to Sprockets environment:
|
460
464
|
|
461
465
|
```ruby
|
data/lib/evil-blocks.debug.js
CHANGED
@@ -21,19 +21,22 @@
|
|
21
21
|
var event = parts[0] ? parts[0] : parts[1];
|
22
22
|
|
23
23
|
var callback = obj[name];
|
24
|
-
obj[name] = function (e) {
|
25
|
-
var source = e.el ? e.el[0] : this.block[0];
|
26
|
-
var messages = ['Event "' + event + '" on', source];
|
27
|
-
|
28
|
-
var params = Array.prototype.slice.call(arguments, 1);
|
29
|
-
if ( params.length > 0 ) {
|
30
|
-
messages.push('with params');
|
31
|
-
messages = messages.concat(params);
|
32
|
-
}
|
33
24
|
|
34
|
-
|
35
|
-
|
36
|
-
|
25
|
+
(function(callback){
|
26
|
+
obj[name] = function (e) {
|
27
|
+
var source = e.el ? e.el[0] : this.block[0];
|
28
|
+
var messages = ['Event "' + event + '" on', source];
|
29
|
+
|
30
|
+
var params = Array.prototype.slice.call(arguments, 1);
|
31
|
+
if ( params.length > 0 ) {
|
32
|
+
messages.push('with params');
|
33
|
+
messages = messages.concat(params);
|
34
|
+
}
|
35
|
+
|
36
|
+
log.apply(this, messages);
|
37
|
+
callback.apply(this, arguments);
|
38
|
+
}
|
39
|
+
})(callback);
|
37
40
|
}
|
38
41
|
};
|
39
42
|
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: evil-blocks-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.6.
|
4
|
+
version: 0.6.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Andrey Sitnik
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2014-
|
11
|
+
date: 2014-05-14 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sprockets
|