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 +4 -4
- data/CHANGELOG.md +6 -0
- data/lib/assets/javascripts/up/browser.js.coffee +1 -1
- data/lib/assets/javascripts/up/bus.js.coffee +138 -6
- data/lib/assets/javascripts/up/flow.js.coffee +4 -9
- data/lib/assets/javascripts/up/link.js.coffee +1 -1
- data/lib/assets/javascripts/up/modal.js.coffee +1 -1
- data/lib/assets/javascripts/up/motion.js.coffee +42 -19
- data/lib/assets/javascripts/up/popup.js.coffee +1 -1
- data/lib/assets/javascripts/up/proxy.js.coffee +12 -9
- data/lib/assets/javascripts/up/{magic.js.coffee → syntax.js.coffee} +21 -133
- data/lib/assets/javascripts/up/tooltip.js.coffee +68 -22
- data/lib/assets/javascripts/up/util.js.coffee +7 -8
- data/lib/assets/javascripts/up.js.coffee +1 -1
- data/lib/assets/stylesheets/up/tooltip.css.sass +1 -2
- data/lib/upjs/rails/version.rb +1 -1
- data/spec_app/spec/javascripts/up/bus_spec.js.coffee +46 -1
- data/spec_app/spec/javascripts/up/{magic_spec.js.coffee → syntax_spec.js.coffee} +1 -16
- data/spec_app/spec/javascripts/up/util_spec.js.coffee +5 -5
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3eb33da9d6d267e5f81bbf2b99705cd6040d43c2
|
4
|
+
data.tar.gz: ef207a1688fc627ed3426acdb565ce2786e2d9af
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2bbb0a472c1b7d96f332aa3de98009b6fe7589a474279ed548e5b4d9113a7ce3127fc2af1e3fe06bb74146bc2a5701ad3b44d602714f018fdfdd30f6a1004498
|
7
|
+
data.tar.gz: 085ed31b540ef88a215441d3c3b4b2016d83cf9e8d14a2b86c2ecd1c316bea1c6ce26cdb6d7d7ecd81b698b8720904715851764b5710fe757e9784aa7ae0020c
|
data/CHANGELOG.md
CHANGED
@@ -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
|
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
|
-
|
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
|
-
|
239
|
+
onEscape: onEscape
|
240
|
+
emitReset: emitReset
|
110
241
|
|
111
242
|
)(jQuery)
|
112
243
|
|
113
|
-
up.
|
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
|
6
|
-
|
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
|
-
|
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
|
79
|
+
- [Defining custom tags](/up.syntax)
|
80
80
|
|
81
81
|
|
82
82
|
@class up.link
|
@@ -1,26 +1,30 @@
|
|
1
1
|
###*
|
2
|
-
Animation
|
3
|
-
|
2
|
+
Animation
|
3
|
+
=========
|
4
4
|
|
5
|
-
|
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
|
-
|
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
|
-
|
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
|
14
|
-
and
|
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
|
-
|
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...
|
@@ -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
|
-
|
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.
|
35
|
-
up.
|
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
|
-
|
39
|
-
|
41
|
+
showOff();
|
42
|
+
hideOff();
|
40
43
|
};
|
41
44
|
|
42
45
|
});
|
@@ -1,6 +1,6 @@
|
|
1
1
|
###*
|
2
|
-
|
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.
|
15
|
+
@class up.syntax
|
16
16
|
###
|
17
|
-
up.
|
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.
|
223
|
+
@method up.syntax.data
|
325
224
|
@param {String|Element|jQuery} elementOrSelector
|
326
225
|
###
|
327
226
|
|
328
227
|
###
|
329
|
-
|
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.
|
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
|
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
|
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
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
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.
|
419
|
-
up.
|
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
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
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.
|
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')
|
67
|
-
position = u.option(options.position, $link.attr('up-position'),
|
68
|
-
animation = u.option(options.animation, u.castedAttr($link, 'up-animation'),
|
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:
|
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
|
-
|
96
|
-
|
97
|
-
|
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.
|
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
|
data/lib/upjs/rails/version.rb
CHANGED
@@ -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.
|
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.
|
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-
|
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
|