upjs-rails 0.12.2 → 0.12.3
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 +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
|