upjs-rails 0.12.2 → 0.12.3

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 6ac926c02b81da3c61c247b6657a4849b98f317e
4
- data.tar.gz: bbd3180804f3fc221d15bbea1ed1f018807f472b
3
+ metadata.gz: 3eb33da9d6d267e5f81bbf2b99705cd6040d43c2
4
+ data.tar.gz: ef207a1688fc627ed3426acdb565ce2786e2d9af
5
5
  SHA512:
6
- metadata.gz: 9569a9e5ddf7f4895cb33db0cd1f2dd458259ab685e78b78d5575e20122537c9dab2eaa67677fe540801eda4a80df501344a9db9c1289ff3e28dd3ce723957ed
7
- data.tar.gz: cec466a2165adfefbdf3f5e21a16cde88f749a6c3479376c28ef7de0d5d67eec896b571d4cdd26042612cec9ea44bf83500ed032209b7ca28093f6483998ddc7
6
+ metadata.gz: 2bbb0a472c1b7d96f332aa3de98009b6fe7589a474279ed548e5b4d9113a7ce3127fc2af1e3fe06bb74146bc2a5701ad3b44d602714f018fdfdd30f6a1004498
7
+ data.tar.gz: 085ed31b540ef88a215441d3c3b4b2016d83cf9e8d14a2b86c2ecd1c316bea1c6ce26cdb6d7d7ecd81b698b8720904715851764b5710fe757e9784aa7ae0020c
data/CHANGELOG.md CHANGED
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
5
5
  This project mostly adheres to [Semantic Versioning](http://semver.org/).
6
6
 
7
7
 
8
+ 0.12.3
9
+ ------
10
+
11
+ Refactored internals. No API changes.
12
+
13
+
8
14
  0.12.2
9
15
  ------
10
16
 
@@ -117,7 +117,7 @@ up.browser = (($) ->
117
117
  On older browsers Up.js will prevent itself from booting, leaving you with
118
118
  a classic server-side application.
119
119
 
120
- @up.browser.isSupported
120
+ @method up.browser.isSupported
121
121
  ###
122
122
  isSupported = ->
123
123
  (!isIE8OrWorse()) && isRecentJQuery()
@@ -14,7 +14,7 @@ This event is triggered after Up.js has inserted an HTML fragment into the DOM t
14
14
  console.log("Looks like we have a new %o!", $fragment);
15
15
  });
16
16
 
17
- The event is triggered *before* Up has compiled the fragment with your [custom behavior](/up.magic).
17
+ The event is triggered *before* Up has compiled the fragment with your [custom elements](/up.syntax).
18
18
  Upon receiving the event, Up.js will start compilation.
19
19
 
20
20
 
@@ -36,8 +36,6 @@ animation before removing the fragment from the DOM.
36
36
 
37
37
  We need to work on this page:
38
38
 
39
- - Decide whether to refactor this into document events
40
- - Decide whether `fragment:enter` and `fragment:leave` would be better names
41
39
  - Decide if we wouldn't rather document events in the respective module (e.g. proxy).
42
40
 
43
41
  @class up.bus
@@ -46,6 +44,107 @@ up.bus = (($) ->
46
44
 
47
45
  u = up.util
48
46
 
47
+ liveDescriptions = []
48
+ defaultLiveDescriptions = null
49
+
50
+ ###*
51
+ # Convert an Up.js style listener (second argument is the event target
52
+ # as a jQuery collection) to a vanilla jQuery listener
53
+ ###
54
+ upListenerToJqueryListener = (upListener) ->
55
+ (event) ->
56
+ $me = event.$element || $(this)
57
+ upListener.apply($me.get(0), [event, $me, up.syntax.data($me)])
58
+
59
+ ###*
60
+ Listens to an event on `document`.
61
+
62
+ The given event listener which will be executed whenever the
63
+ given event is [triggered](/up.emit) on the given selector:
64
+
65
+ up.on('click', '.button', function(event, $element) {
66
+ console.log("Someone clicked the button %o", $element);
67
+ });
68
+
69
+ This is roughly equivalent to binding an event listener to `document`:
70
+
71
+ $(document).on('click', '.button', function(event) {
72
+ console.log("Someone clicked the button %o", $(this));
73
+ });
74
+
75
+ Other than jQuery, Up.js will silently discard event listeners
76
+ on [browsers that it doesn't support](/up.browser.isSupported).
77
+
78
+
79
+ \#\#\#\# Attaching structured data
80
+
81
+ In case you want to attach structured data to the event you're observing,
82
+ you can serialize the data to JSON and put it into an `[up-data]` attribute:
83
+
84
+ <span class="person" up-data="{ age: 18, name: 'Bob' }">Bob</span>
85
+ <span class="person" up-data="{ age: 22, name: 'Jim' }">Jim</span>
86
+
87
+ The JSON will parsed and handed to your event handler as a third argument:
88
+
89
+ up.on('click', '.person', function(event, $element, data) {
90
+ console.log("This is %o who is %o years old", data.name, data.age);
91
+ });
92
+
93
+
94
+ \#\#\#\# Migrating jQuery event handlers to `up.on`
95
+
96
+ Within the event handler, Up.js will bind `this` to the
97
+ native DOM element to help you migrate your existing jQuery code to
98
+ this new syntax.
99
+
100
+ So if you had this before:
101
+
102
+ $(document).on('click', '.button', function() {
103
+ $(this).something();
104
+ });
105
+
106
+ ... you can simply copy the event handler to `up.on`:
107
+
108
+ up.on('click', '.button', function() {
109
+ $(this).something();
110
+ });
111
+
112
+ @method up.on
113
+ @param {String} events
114
+ A space-separated list of event names to bind.
115
+ @param {String} [selector]
116
+ The selector of an element on which the event must be triggered.
117
+ Omit the selector to listen to all events with that name, regardless
118
+ of the event target.
119
+ @param {Function(event, $element, data)} behavior
120
+ The handler that should be called.
121
+ The function takes the affected element as the first argument (as a jQuery object).
122
+ If the element has an `up-data` attribute, its value is parsed as JSON
123
+ and passed as a second argument.
124
+ @return {Function}
125
+ A function that unbinds the event listeners when called.
126
+ ###
127
+ live = (args...) ->
128
+ # Silently discard any event handlers that are registered on unsupported
129
+ # browsers and return a no-op destructor
130
+ return (->) unless up.browser.isSupported()
131
+
132
+ description = u.copy(args)
133
+ lastIndex = description.length - 1
134
+ behavior = description[lastIndex]
135
+ description[lastIndex] = upListenerToJqueryListener(behavior)
136
+
137
+ # Remember the descriptions we registered, so we can
138
+ # clean up after ourselves during a reset
139
+ liveDescriptions.push(description)
140
+
141
+ $document = $(document)
142
+ $document.on(description...)
143
+
144
+ # Return destructor
145
+ -> $document.off(description...)
146
+
147
+
49
148
  ###*
50
149
  Emits an event with the given name and properties.
51
150
 
@@ -77,6 +176,7 @@ up.bus = (($) ->
77
176
  $target.trigger(event)
78
177
  event
79
178
 
179
+
80
180
  ###*
81
181
  [Emits an event](/up.emit) and returns whether any listener has prevented the default action.
82
182
 
@@ -89,6 +189,32 @@ up.bus = (($) ->
89
189
  event = emit(args...)
90
190
  not event.isDefaultPrevented()
91
191
 
192
+ onEscape = (handler) ->
193
+ live('keydown', 'body', (event) ->
194
+ if u.escapePressed(event)
195
+ handler(event)
196
+ )
197
+
198
+ ###*
199
+ Makes a snapshot of the currently registered event listeners,
200
+ to later be restored through [`up.bus.reset`](/up.bus.reset).
201
+
202
+ @private
203
+ ###
204
+ snapshot = ->
205
+ defaultLiveDescriptions = u.copy(liveDescriptions)
206
+
207
+ ###*
208
+ Resets the list of registered event listeners to the
209
+ moment when the framework was booted.
210
+
211
+ @private
212
+ ###
213
+ restoreSnapshot = ->
214
+ for description in liveDescriptions
215
+ unless u.contains(defaultLiveDescriptions, description)
216
+ $(document).off(description...)
217
+ liveDescriptions = u.copy(defaultLiveDescriptions)
92
218
 
93
219
  ###*
94
220
  Resets Up.js to the state when it was booted.
@@ -101,14 +227,20 @@ up.bus = (($) ->
101
227
  @protected
102
228
  @method up.reset
103
229
  ###
104
- reset = ->
230
+ emitReset = ->
105
231
  up.emit('up:framework:reset')
106
232
 
233
+ live 'up:framework:boot', snapshot
234
+ live 'up:framework:reset', restoreSnapshot
235
+
236
+ on: live # can't name symbols `on` in Coffeescript
107
237
  emit: emit
108
238
  nobodyPrevents: nobodyPrevents
109
- reset: reset
239
+ onEscape: onEscape
240
+ emitReset: emitReset
110
241
 
111
242
  )(jQuery)
112
243
 
113
- up.reset = up.bus.reset
244
+ up.on = up.bus.on
114
245
  up.emit = up.bus.emit
246
+ up.reset = up.bus.emitReset
@@ -2,16 +2,11 @@
2
2
  Changing page fragments programmatically
3
3
  ========================================
4
4
 
5
- This module contains Up's core functions to insert, change
6
- or destroy page fragments.
5
+ This module contains Up.js's core functions to [change](/up.replace) or [destroy](/up.destroy)
6
+ page fragments via Javascript.
7
7
 
8
- \#\#\# Incomplete documentation!
9
-
10
- We need to work on this page:
11
-
12
- - Explain the UJS approach vs. pragmatic approach
13
- - Examples
14
-
8
+ All the other Up.js modules (like [`up.link`](/up.link) or [`up.modal`](/up.modal))
9
+ are based on this module.
15
10
 
16
11
  @class up.flow
17
12
  ###
@@ -76,7 +76,7 @@ Read on
76
76
  - You can [open fragments in popups or modal dialogs](/up.modal).
77
77
  - You can give users [immediate feedback](/up.navigation) when a link is clicked or becomes current, without waiting for the server.
78
78
  - [Controlling Up.js pragmatically through Javascript](/up.flow)
79
- - [Defining custom tags and event handlers](/up.magic)
79
+ - [Defining custom tags](/up.syntax)
80
80
 
81
81
 
82
82
  @class up.link
@@ -411,7 +411,7 @@ up.modal = (($) ->
411
411
  )
412
412
 
413
413
  # Close the pop-up overlay when the user presses ESC.
414
- up.magic.onEscape(-> close())
414
+ up.bus.onEscape(-> close())
415
415
 
416
416
  ###*
417
417
  When this element is clicked, closes a currently open dialog.
@@ -1,26 +1,30 @@
1
1
  ###*
2
- Animation and transitions
3
- =========================
2
+ Animation
3
+ =========
4
4
 
5
- Any fragment change in Up.js can be animated.
5
+ Whenever you change a page fragment (through methods like
6
+ [`up.replace`](/up.replace) or UJS attributes like [`up-target`](/up-target))
7
+ you can animate the change.
6
8
 
7
- <a href="/users" data-target=".list" up-transition="cross-fade">Show users</a>
9
+ For instance, when you replace a selector `.list` with a new `.list`
10
+ from the server, you can add an `up-transition="cross-fade"` attribute
11
+ to smoothly fade out the old `.list` while fading in the new `.list`:
8
12
 
9
- Or a dialog open:
13
+ <a href="/users" up-target=".list" up-transition="cross-fade">Show users</a>
14
+
15
+ When we morph between an old an new element, we call it a *transition*.
16
+ In contrast, when we animate a new element without simultaneously removing an
17
+ old element, we call it an *animation*.
18
+
19
+ An example for an animation is opening a new dialog, which we can animate
20
+ using the `up-animation` attribute:
10
21
 
11
22
  <a href="/users" up-modal=".list" up-animation="move-from-top">Show users</a>
12
23
 
13
- Up.js ships with a number of predefined animations and transitions,
14
- and you can easily define your own using Javascript or CSS.
15
-
16
-
17
- \#\#\# Incomplete documentation!
18
-
19
- We need to work on this page:
20
-
21
- - Explain the difference between transitions and animations
22
- - Demo the built-in animations and transitions
23
- - Explain ghosting
24
+ Up.js ships with a number of predefined [animations](/up.animate#named-animation)
25
+ and [transitions](/up.morph#named-animation).
26
+ You can also easily [define your own animations](/up.animation)
27
+ or [transitions](/up.transition) using Javascript or CSS.
24
28
 
25
29
 
26
30
  @class up.motion
@@ -265,7 +269,25 @@ up.motion = (($) ->
265
269
 
266
270
  - `move-to-bottom/fade-in`
267
271
  - `move-to-left/move-from-top`
268
-
272
+
273
+ \#\#\#\# Implementation details
274
+
275
+ During a transition both the old and new element occupy
276
+ the same position on the screen.
277
+
278
+ Since the CSS layout flow will usually not allow two elements to
279
+ overlay the same space, Up.js:
280
+
281
+ - The old and new elements are cloned
282
+ - The old element is removed from the layout flow using `display: hidden`
283
+ - The new element is hidden, but still leaves space in the layout flow by setting `visibility: hidden`
284
+ - The clones are [absolutely positioned](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning)
285
+ over the original elements.
286
+ - The transition is applied to the cloned elements.
287
+ At no point will the hidden, original elements be animated.
288
+ - When the transition has finished, the clones are removed from the DOM and the new element is shown.
289
+ The old element remains hidden in the DOM.
290
+
269
291
  @method up.morph
270
292
  @param {Element|jQuery|String} source
271
293
  @param {Element|jQuery|String} target
@@ -316,7 +338,7 @@ up.motion = (($) ->
316
338
  skipMorph($old, $new, parsedOptions)
317
339
 
318
340
  ###*
319
- Cause the side effects of a successful transitions, but instantly.
341
+ This causes the side effects of a successful transition, but instantly.
320
342
  We use this to skip morphing for old browsers, or when the developer
321
343
  decides to only animate the new element (i.e. no real ghosting or transition) .
322
344
 
@@ -455,7 +477,8 @@ up.motion = (($) ->
455
477
  Returns a new promise that resolves once all promises in arguments resolve.
456
478
 
457
479
  Other then [`$.when` from jQuery](https://api.jquery.com/jquery.when/),
458
- the combined promise will have a `resolve` method.
480
+ the combined promise will have a `resolve` method. This `resolve` method
481
+ will resolve all the wrapped promises.
459
482
 
460
483
  @method up.motion.when
461
484
  @param promises...
@@ -253,7 +253,7 @@ up.popup = (($) ->
253
253
  )
254
254
 
255
255
  # Close the pop-up overlay when the user presses ESC.
256
- up.magic.onEscape(-> close())
256
+ up.bus.onEscape(-> close())
257
257
 
258
258
  ###*
259
259
  When an element with this attribute is clicked,
@@ -10,13 +10,13 @@ making requests to these URLs return insantly.
10
10
  The cache is cleared whenever the user makes a non-`GET` request
11
11
  (like `POST`, `PUT` or `DELETE`).
12
12
 
13
- The proxy can also used to speed up reaction times by preloading
14
- links when the user hovers over the click area (or puts the mouse/finger
15
- down before releasing). This way the
16
- response will already be cached when the user performs the click.
13
+ The proxy can also used to speed up reaction times by [preloading
14
+ links when the user hovers over the click area](/up-preload) (or puts the mouse/finger
15
+ down before releasing). This way the response will already be cached when
16
+ the user performs the click.
17
17
 
18
18
  Spinners
19
- ---------
19
+ --------
20
20
 
21
21
  You can listen to [framework events](/up.bus) to implement a spinner
22
22
  (progress indicator) that appears during a long-running request,
@@ -31,12 +31,15 @@ Here is the Javascript to make it alive:
31
31
  show = function() { $element.show() };
32
32
  hide = function() { $element.hide() };
33
33
 
34
- up.bus.on('proxy:busy', show);
35
- up.bus.on('proxy:idle', hide);
34
+ showOff = up.on('proxy:busy', show);
35
+ hideOff = up.on('proxy:idle', hide);
36
36
 
37
+ hide();
38
+
39
+ // Clean up when the element is removed from the DOM
37
40
  return function() {
38
- up.bus.off('proxy:busy', show);
39
- up.bus.off('proxy:idle', hide);
41
+ showOff();
42
+ hideOff();
40
43
  };
41
44
 
42
45
  });
@@ -1,6 +1,6 @@
1
1
  ###*
2
- Registering behavior and custom elements
3
- ========================================
2
+ Custom elements
3
+ ===============
4
4
 
5
5
  Up.js keeps a persistent Javascript environment during page transitions.
6
6
  To prevent memory leaks it is important to cleanly set up and tear down
@@ -12,116 +12,15 @@ We need to work on this page:
12
12
 
13
13
  - Better class-level introduction for this module
14
14
 
15
- @class up.magic
15
+ @class up.syntax
16
16
  ###
17
- up.magic = (($) ->
17
+ up.syntax = (($) ->
18
18
 
19
19
  u = up.util
20
20
 
21
21
  DESTROYABLE_CLASS = 'up-destroyable'
22
22
  DESTROYER_KEY = 'up-destroyer'
23
23
 
24
- liveDescriptions = []
25
- defaultLiveDescriptions = null
26
-
27
- ###*
28
- # Convert an Up.js style listener (second argument is the event target
29
- # as a jQuery collection) to a vanilla jQuery listener
30
- ###
31
- upListenerToJqueryListener = (upListener) ->
32
- (event) ->
33
- $me = event.$element || $(this)
34
- upListener.apply($me.get(0), [event, $me, data($me)])
35
-
36
- ###*
37
- Listens to an event on `document`.
38
-
39
- The given event listener which will be executed whenever the
40
- given event is [triggered](/up.emit) on the given selector:
41
-
42
- up.on('click', '.button', function(event, $element) {
43
- console.log("Someone clicked the button %o", $element);
44
- });
45
-
46
- This is roughly equivalent to binding an event listener to `document`:
47
-
48
- $(document).on('click', '.button', function(event) {
49
- console.log("Someone clicked the button %o", $(this));
50
- });
51
-
52
- Other than jQuery, Up.js will silently discard event listeners
53
- on [browsers that it doesn't support](/up.browser.isSupported).
54
-
55
-
56
- \#\#\#\# Attaching structured data
57
-
58
- In case you want to attach structured data to the event you're observing,
59
- you can serialize the data to JSON and put it into an `[up-data]` attribute:
60
-
61
- <span class="person" up-data="{ age: 18, name: 'Bob' }">Bob</span>
62
- <span class="person" up-data="{ age: 22, name: 'Jim' }">Jim</span>
63
-
64
- The JSON will parsed and handed to your event handler as a third argument:
65
-
66
- up.on('click', '.person', function(event, $element, data) {
67
- console.log("This is %o who is %o years old", data.name, data.age);
68
- });
69
-
70
-
71
- \#\#\#\# Migrating jQuery event handlers to `up.on`
72
-
73
- Within the event handler, Up.js will bind `this` to the
74
- native DOM element to help you migrate your existing jQuery code to
75
- this new syntax.
76
-
77
- So if you had this before:
78
-
79
- $(document).on('click', '.button', function() {
80
- $(this).something();
81
- });
82
-
83
- ... you can simply copy the event handler to `up.on`:
84
-
85
- up.on('click', '.button', function() {
86
- $(this).something();
87
- });
88
-
89
-
90
- @method up.on
91
- @param {String} events
92
- A space-separated list of event names to bind.
93
- @param {String} [selector]
94
- The selector of an element on which the event must be triggered.
95
- Omit the selector to listen to all events with that name, regardless
96
- of the event target.
97
- @param {Function(event, $element, data)} behavior
98
- The handler that should be called.
99
- The function takes the affected element as the first argument (as a jQuery object).
100
- If the element has an `up-data` attribute, its value is parsed as JSON
101
- and passed as a second argument.
102
- @return {Function}
103
- A function that unbinds the event listeners when called.
104
- ###
105
- live = (args...) ->
106
- # Silently discard any event handlers that are registered on unsupported
107
- # browsers and return a no-op destructor
108
- return (->) unless up.browser.isSupported()
109
-
110
- description = u.copy(args)
111
- lastIndex = description.length - 1
112
- behavior = description[lastIndex]
113
- description[lastIndex] = upListenerToJqueryListener(behavior)
114
-
115
- # Remember the descriptions we registered, so we can
116
- # clean up after ourselves during a reset
117
- liveDescriptions.push(description)
118
-
119
- $document = $(document)
120
- $document.on(description...)
121
-
122
- # Return destructor
123
- -> $document.off(description...)
124
-
125
24
 
126
25
  ###*
127
26
  Registers a function to be called whenever an element with
@@ -321,16 +220,17 @@ up.magic = (($) ->
321
220
  we can support getting or setting individual keys.
322
221
 
323
222
  @protected
324
- @method up.magic.data
223
+ @method up.syntax.data
325
224
  @param {String|Element|jQuery} elementOrSelector
326
225
  ###
327
226
 
328
227
  ###
329
- Stores a JSON-string with the element.
228
+ Looks for an `up-data` attribute on the given element, then parses
229
+ its value as JSON and returns the JSON object.
330
230
 
331
231
  If an element annotated with [`up-data`] is inserted into the DOM,
332
232
  Up will parse the JSON and pass the resulting object to any matching
333
- [`up.compiler`](/up.magic.compiler) handlers.
233
+ [`up.compiler`](/up.syntax.compiler) handlers.
334
234
 
335
235
  Similarly, when an event is triggered on an element annotated with
336
236
  [`up-data`], the parsed object will be passed to any matching
@@ -339,6 +239,10 @@ up.magic = (($) ->
339
239
  @ujs
340
240
  @method [up-data]
341
241
  @param {JSON} [up-data]
242
+ @return
243
+ The JSON-decoded value of the `up-data` attribute.
244
+
245
+ Returns an empty object (`{}`) if the element has no (or an empty) `up-data` attribute.
342
246
  ###
343
247
  data = (elementOrSelector) ->
344
248
  $element = $(elementOrSelector)
@@ -350,27 +254,20 @@ up.magic = (($) ->
350
254
 
351
255
  ###*
352
256
  Makes a snapshot of the currently registered event listeners,
353
- to later be restored through [`up.bus.reset`](/up.bus.reset).
257
+ to later be restored through `reset`.
354
258
 
355
259
  @private
356
- @method up.magic.snapshot
357
260
  ###
358
261
  snapshot = ->
359
- defaultLiveDescriptions = u.copy(liveDescriptions)
360
262
  defaultCompilers = u.copy(compilers)
361
263
 
362
264
  ###*
363
- Resets the list of registered event listeners to the
265
+ Resets the list of registered compiler directives to the
364
266
  moment when the framework was booted.
365
267
 
366
268
  @private
367
- @method up.magic.reset
368
269
  ###
369
270
  reset = ->
370
- for description in liveDescriptions
371
- unless u.contains(defaultLiveDescriptions, description)
372
- $(document).off(description...)
373
- liveDescriptions = u.copy(defaultLiveDescriptions)
374
271
  compilers = u.copy(defaultCompilers)
375
272
 
376
273
  ###*
@@ -395,29 +292,20 @@ up.magic = (($) ->
395
292
  up.emit('up:fragment:inserted', $element: $element)
396
293
  $element
397
294
 
398
- onEscape = (handler) ->
399
- live('keydown', 'body', (event) ->
400
- if u.escapePressed(event)
401
- handler(event)
402
- )
403
-
404
- live 'ready', (-> hello(document.body))
405
- live 'up:fragment:inserted', (event) -> compile(event.$element)
406
- live 'up:fragment:destroy', (event) -> destroy(event.$element)
407
- live 'up:framework:boot', snapshot
408
- live 'up:framework:reset', reset
295
+ up.on 'ready', (-> hello(document.body))
296
+ up.on 'up:fragment:inserted', (event) -> compile(event.$element)
297
+ up.on 'up:fragment:destroy', (event) -> destroy(event.$element)
298
+ up.on 'up:framework:boot', snapshot
299
+ up.on 'up:framework:reset', reset
409
300
 
410
301
  compiler: compiler
411
- on: live
412
302
  hello: hello
413
- onEscape: onEscape
414
303
  data: data
415
304
 
416
305
  )(jQuery)
417
306
 
418
- up.compiler = up.magic.compiler
419
- up.on = up.magic.on
420
- up.hello = up.magic.hello
307
+ up.compiler = up.syntax.compiler
308
+ up.hello = up.syntax.hello
421
309
 
422
310
  up.ready = -> up.util.error('up.ready no longer exists. Please use up.hello instead.')
423
311
  up.awaken = -> up.util.error('up.awaken no longer exists. Please use up.compiler instead.')
@@ -1,18 +1,31 @@
1
1
  ###*
2
2
  Tooltips
3
3
  ========
4
-
5
- Elements that have an `up-tooltip` attribute will show the attribute
6
- value in a tooltip when a user hovers over the element.
7
-
8
- \#\#\# Incomplete documentation!
9
-
10
- We need to work on this page:
11
-
12
- - Show the tooltip's HTML structure and how to style the elements
13
- - Explain how to position tooltips using `up-position`
14
- - We should have a position about tooltips that contain HTML.
15
-
4
+
5
+ Up.js comes with a basic tooltip implementation.
6
+
7
+ You can an [`up-tooltip`](/up-tooltip) attribute to any HTML tag to show a tooltip whenever
8
+ the user hovers over the element:
9
+
10
+ <a href="/decks" up-tooltip="Show all decks">Decks</a>
11
+
12
+
13
+ \#\#\#\# Styling
14
+
15
+ The [default styles](https://github.com/makandra/upjs/blob/master/lib/assets/stylesheets/up/tooltip.css.sass)
16
+ show a simple tooltip with white text on a gray background.
17
+ A gray triangle points to the element.
18
+
19
+ To change the styling, simply override CSS rules for the `.up-tooltip` selector and its `:after`
20
+ selector that is used the triangle.
21
+
22
+ The HTML of a tooltip element is simply this:
23
+
24
+ <div class="up-tooltip">
25
+ Show all decks
26
+ </div>
27
+
28
+ The tooltip element is appended to the end of `<body>`.
16
29
 
17
30
  @class up.tooltip
18
31
  ###
@@ -20,6 +33,27 @@ up.tooltip = (($) ->
20
33
 
21
34
  u = up.util
22
35
 
36
+ ###*
37
+ Sets default options for future tooltips.
38
+
39
+ @method up.tooltip.config
40
+ @property
41
+ @param {String} [config.position]
42
+ The default position of tooltips relative to the element.
43
+ Can be either `"top"` or `"bottom"`.
44
+ @param {String} [config.openAnimation='fade-in']
45
+ The animation used to open a tooltip.
46
+ @param {String} [config.closeAnimation='fade-out']
47
+ The animation used to close a tooltip.
48
+ ###
49
+ config = u.config
50
+ position: 'top'
51
+ openAnimation: 'fade-in'
52
+ closeAnimation: 'fade-out'
53
+
54
+ reset = ->
55
+ config.reset()
56
+
23
57
  setPosition = ($link, $tooltip, position) ->
24
58
  linkBox = u.measure($link)
25
59
  tooltipBox = u.measure($tooltip)
@@ -47,7 +81,7 @@ up.tooltip = (($) ->
47
81
  ###*
48
82
  Opens a tooltip over the given element.
49
83
 
50
- up.tooltip.open('.help', {
84
+ up.tooltip.attach('.help', {
51
85
  html: 'Enter multiple words or phrases'
52
86
  });
53
87
 
@@ -63,9 +97,9 @@ up.tooltip = (($) ->
63
97
  attach = (linkOrSelector, options = {}) ->
64
98
  $link = $(linkOrSelector)
65
99
  html = u.option(options.html, $link.attr('up-tooltip-html'))
66
- text = u.option(options.text, $link.attr('up-tooltip'), $link.attr('title'))
67
- position = u.option(options.position, $link.attr('up-position'), 'top')
68
- animation = u.option(options.animation, u.castedAttr($link, 'up-animation'), 'fade-in')
100
+ text = u.option(options.text, $link.attr('up-tooltip'))
101
+ position = u.option(options.position, $link.attr('up-position'), config.position)
102
+ animation = u.option(options.animation, u.castedAttr($link, 'up-animation'), config.openAnimation)
69
103
  animateOptions = up.motion.animateOptions(options, $link)
70
104
  close()
71
105
  $tooltip = createElement(text: text, html: html)
@@ -83,7 +117,7 @@ up.tooltip = (($) ->
83
117
  close = (options) ->
84
118
  $tooltip = $('.up-tooltip')
85
119
  if $tooltip.length
86
- options = u.options(options, animation: 'fade-out')
120
+ options = u.options(options, animation: config.closeAnimation)
87
121
  options = u.merge(options, up.motion.animateOptions(options))
88
122
  up.destroy($tooltip, options)
89
123
 
@@ -91,14 +125,23 @@ up.tooltip = (($) ->
91
125
  Displays a tooltip with text content when hovering the mouse over this element:
92
126
 
93
127
  <a href="/decks" up-tooltip="Show all decks">Decks</a>
94
-
95
- You can also make an existing `title` attribute appear as a tooltip:
96
-
97
- <a href="/decks" title="Show all decks" up-tooltip>Decks</a>
128
+
129
+ To make the tooltip appear below the element instead of above the element,
130
+ add an `up-position` attribute:
131
+
132
+ <a href="/decks" up-tooltip="Show all decks" up-position="bottom">Decks</a>
98
133
 
99
134
  @method [up-tooltip]
135
+ @param {String} [up-animation]
136
+ The animation used to open the tooltip.
137
+ Defaults to [`up.tooltip.config.openAnimation`](/up.tooltip.config).
138
+ @param {String} [up-position]
139
+ The default position of tooltips relative to the element.
140
+ Can be either `"top"` or `"bottom"`.
141
+ Defaults to [`up.tooltip.config.position`](/up.tooltip.config).
100
142
  @ujs
101
143
  ###
144
+
102
145
  ###*
103
146
  Displays a tooltip with HTML content when hovering the mouse over this element:
104
147
 
@@ -124,7 +167,10 @@ up.tooltip = (($) ->
124
167
  up.on 'up:framework:reset', close
125
168
 
126
169
  # Close the tooltip when the user presses ESC.
127
- up.magic.onEscape(-> close())
170
+ up.bus.onEscape(-> close())
171
+
172
+ # The framework is reset between tests
173
+ up.on 'up:framework:reset', reset
128
174
 
129
175
  attach: attach
130
176
  close: close
@@ -885,15 +885,14 @@ up.util = (($) ->
885
885
  right: ''
886
886
  bottom: ''
887
887
 
888
- argNames = (fun) ->
889
- code = fun.toString()
890
- pattern = new RegExp('\\(([^\\)]*)\\)')
891
- if match = code.match(pattern)
892
- match[1].split(/\s*,\s*/)
893
- else
894
- error('Could not parse argument names of %o', fun)
888
+ # argNames = (fun) ->
889
+ # code = fun.toString()
890
+ # pattern = new RegExp('\\(([^\\)]*)\\)')
891
+ # if match = code.match(pattern)
892
+ # match[1].split(/\s*,\s*/)
893
+ # else
894
+ # error('Could not parse argument names of %o', fun)
895
895
 
896
- argNames: argNames
897
896
  offsetParent: offsetParent
898
897
  fixedToAbsolute: fixedToAbsolute
899
898
  presentAttr: presentAttr
@@ -2,7 +2,7 @@
2
2
  #= require up/util
3
3
  #= require up/browser
4
4
  #= require up/bus
5
- #= require up/magic
5
+ #= require up/syntax
6
6
  #= require up/history
7
7
  #= require up/layout
8
8
  #= require up/flow
@@ -10,8 +10,7 @@ $background: #666
10
10
  color: white
11
11
  padding: 6px 9px
12
12
  white-space: nowrap
13
- //box-shadow: 0 0 4px rgba(0, 0, 0, 0.2)
14
-
13
+
15
14
  &[up-position=top]
16
15
  margin-top: -$distance-from-trigger
17
16
  &:after
@@ -1,5 +1,5 @@
1
1
  module Upjs
2
2
  module Rails
3
- VERSION = '0.12.2'
3
+ VERSION = '0.12.3'
4
4
  end
5
5
  end
@@ -1,7 +1,52 @@
1
1
  describe 'up.bus', ->
2
2
 
3
3
  describe 'Javascript functions', ->
4
-
4
+
5
+ describe 'up.on', ->
6
+
7
+ it 'registers a delagating event listener to the document body, which passes the $element as a second argument to the listener', ->
8
+
9
+ affix('.container .child')
10
+ observeClass = jasmine.createSpy()
11
+ up.on 'click', '.child', (event, $element) ->
12
+ observeClass($element.attr('class'))
13
+
14
+ $('.container').click()
15
+ $('.child').click()
16
+
17
+ expect(observeClass).not.toHaveBeenCalledWith('container')
18
+ expect(observeClass).toHaveBeenCalledWith('child')
19
+
20
+ it 'returns a method that unregisters the event listener when called', ->
21
+ $child = affix('.child')
22
+ clickSpy = jasmine.createSpy()
23
+ unsubscribe = up.on 'click', '.child', clickSpy
24
+ $('.child').click()
25
+ unsubscribe()
26
+ $('.child').click()
27
+ expect(clickSpy.calls.count()).toEqual(1)
28
+
29
+ it 'parses an up-data attribute as JSON and passes the parsed object as a third argument to the initializer', ->
30
+ $child = affix('.child')
31
+ observeArgs = jasmine.createSpy()
32
+ up.on 'click', '.child', (event, $element, data) ->
33
+ observeArgs($element.attr('class'), data)
34
+
35
+ data = { key1: 'value1', key2: 'value2' }
36
+ $tag = affix(".child").attr('up-data', JSON.stringify(data))
37
+
38
+ $('.child').click()
39
+ expect(observeArgs).toHaveBeenCalledWith('child', data)
40
+
41
+ it 'passes an empty object as a second argument to the listener if there is no up-data attribute', ->
42
+ $child = affix('.child')
43
+ observeArgs = jasmine.createSpy()
44
+ up.on 'click', '.child', (event, $element, data) ->
45
+ observeArgs($element.attr('class'), data)
46
+
47
+ $('.child').click()
48
+ expect(observeArgs).toHaveBeenCalledWith('child', {})
49
+
5
50
  describe 'up.emit', ->
6
51
 
7
52
  it 'triggers an event on the document', ->
@@ -1,22 +1,7 @@
1
- describe 'up.magic', ->
1
+ describe 'up.syntax', ->
2
2
 
3
3
  describe 'Javascript functions', ->
4
4
 
5
- describe 'up.on', ->
6
-
7
- it 'registers a delagating event listener to the document body', ->
8
-
9
- affix('.container .child')
10
- observeClass = jasmine.createSpy()
11
- up.on 'click', '.child', (event, $element) ->
12
- observeClass($element.attr('class'))
13
-
14
- $('.container').click()
15
- $('.child').click()
16
-
17
- expect(observeClass).not.toHaveBeenCalledWith('container')
18
- expect(observeClass).toHaveBeenCalledWith('child')
19
-
20
5
  describe 'up.compiler', ->
21
6
 
22
7
  it 'applies an event initializer whenever a matching fragment is inserted', ->
@@ -2,11 +2,11 @@ describe 'up.util', ->
2
2
 
3
3
  describe 'Javascript functions', ->
4
4
 
5
- describe 'up.util.argNames', ->
6
-
7
- it 'returns an array of argument names for the given function', ->
8
- fun = ($element, data) ->
9
- expect(up.util.argNames(fun)).toEqual(['$element', 'data'])
5
+ # describe 'up.util.argNames', ->
6
+ #
7
+ # it 'returns an array of argument names for the given function', ->
8
+ # fun = ($element, data) ->
9
+ # expect(up.util.argNames(fun)).toEqual(['$element', 'data'])
10
10
 
11
11
  describe 'up.util.castedAttr', ->
12
12
 
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: upjs-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.12.2
4
+ version: 0.12.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Henning Koch
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2015-10-30 00:00:00.000000000 Z
11
+ date: 2015-11-11 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -100,13 +100,13 @@ files:
100
100
  - lib/assets/javascripts/up/history.js.coffee
101
101
  - lib/assets/javascripts/up/layout.js.coffee
102
102
  - lib/assets/javascripts/up/link.js.coffee
103
- - lib/assets/javascripts/up/magic.js.coffee
104
103
  - lib/assets/javascripts/up/modal.js.coffee
105
104
  - lib/assets/javascripts/up/module.js.coffee
106
105
  - lib/assets/javascripts/up/motion.js.coffee
107
106
  - lib/assets/javascripts/up/navigation.js.coffee
108
107
  - lib/assets/javascripts/up/popup.js.coffee
109
108
  - lib/assets/javascripts/up/proxy.js.coffee
109
+ - lib/assets/javascripts/up/syntax.js.coffee
110
110
  - lib/assets/javascripts/up/tooltip.js.coffee
111
111
  - lib/assets/javascripts/up/util.js.coffee
112
112
  - lib/assets/stylesheets/up-bootstrap.css.sass
@@ -222,12 +222,12 @@ files:
222
222
  - spec_app/spec/javascripts/up/history_spec.js.coffee
223
223
  - spec_app/spec/javascripts/up/layout_spec.js.coffee
224
224
  - spec_app/spec/javascripts/up/link_spec.js.coffee
225
- - spec_app/spec/javascripts/up/magic_spec.js.coffee
226
225
  - spec_app/spec/javascripts/up/modal_spec.js.coffee
227
226
  - spec_app/spec/javascripts/up/motion_spec.js.coffee
228
227
  - spec_app/spec/javascripts/up/navigation_spec.js.coffee
229
228
  - spec_app/spec/javascripts/up/popup_spec.js.coffee
230
229
  - spec_app/spec/javascripts/up/proxy_spec.js.coffee
230
+ - spec_app/spec/javascripts/up/syntax_spec.js.coffee
231
231
  - spec_app/spec/javascripts/up/tooltip_spec.js.coffee
232
232
  - spec_app/spec/javascripts/up/util_spec.js.coffee
233
233
  - spec_app/test/controllers/.keep