upjs-rails 0.12.4 → 0.12.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +12 -3
- data/dist/up.js +495 -300
- data/dist/up.min.js +2 -2
- data/lib/assets/javascripts/up.js.coffee +3 -1
- data/lib/assets/javascripts/up/browser.js.coffee +8 -8
- data/lib/assets/javascripts/up/bus.js.coffee +77 -37
- data/lib/assets/javascripts/up/flow.js.coffee +40 -6
- data/lib/assets/javascripts/up/form.js.coffee +5 -7
- data/lib/assets/javascripts/up/history.js.coffee +8 -10
- data/lib/assets/javascripts/up/layout.js.coffee +22 -20
- data/lib/assets/javascripts/up/link.js.coffee +10 -15
- data/lib/assets/javascripts/up/modal.js.coffee +92 -72
- data/lib/assets/javascripts/up/motion.js.coffee +16 -17
- data/lib/assets/javascripts/up/navigation.js.coffee +3 -6
- data/lib/assets/javascripts/up/popup.js.coffee +55 -27
- data/lib/assets/javascripts/up/proxy.js.coffee +71 -20
- data/lib/assets/javascripts/up/syntax.js.coffee +30 -15
- data/lib/assets/javascripts/up/tooltip.js.coffee +5 -8
- data/lib/assets/javascripts/up/util.js.coffee +39 -22
- data/lib/upjs/rails/version.rb +1 -1
- data/spec_app/spec/javascripts/up/flow_spec.js.coffee +30 -0
- data/spec_app/spec/javascripts/up/link_spec.js.coffee +6 -0
- data/spec_app/spec/javascripts/up/proxy_spec.js.coffee +8 -8
- metadata +2 -3
- data/lib/assets/javascripts/up/boot.js.coffee +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0f13c82c612066844882580ed4073b0f025cda22
|
4
|
+
data.tar.gz: a0cef27d64bfdd0ea2ae249d668b679b23321841
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 008081bdca8fe235b86454baf676c3e5e19e7f89f3d76a6b58ee47502852f448411b26f5a0d0b0234b1a344a1c23276948efae1eefb1f04cbbd238b53981fa04
|
7
|
+
data.tar.gz: 1775166c4643ffdcd0d2801669ea94557b6fa75adf38b5176b9b159f319aeae1dce2e8ffd8e4b17f43597bb9d1bf765d2f9b17aaf75df83b49925f185913eb1c
|
data/CHANGELOG.md
CHANGED
@@ -5,6 +5,15 @@ 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.5
|
9
|
+
------
|
10
|
+
|
11
|
+
### Compatible changes
|
12
|
+
|
13
|
+
- `a[up-target]` and `up.follow` now scroll to a #hash in the link's destination URL
|
14
|
+
- When up.replace cannot make a change in old browsers, return an unresolved promise instead of a resolved promise.
|
15
|
+
|
16
|
+
|
8
17
|
0.12.4
|
9
18
|
------
|
10
19
|
|
@@ -30,7 +39,7 @@ Refactored internals. No API changes.
|
|
30
39
|
be the "current" URL.
|
31
40
|
|
32
41
|
|
33
|
-
###
|
42
|
+
### Breaking changes
|
34
43
|
|
35
44
|
- `up.bus.emit` is now [`up.emit`](http://upjs.io/up.emit/)
|
36
45
|
- When `up.first` finds no match, return `undefined` instead of `null`.
|
@@ -55,7 +64,7 @@ Refactored internals. No API changes.
|
|
55
64
|
- Up.js can now be used with [`jQuery.noConflict()`](https://api.jquery.com/jquery.noconflict/).
|
56
65
|
|
57
66
|
|
58
|
-
###
|
67
|
+
### Breaking changes
|
59
68
|
|
60
69
|
- Remove `up.slot`, which was poorly implemented, untested, and not much better than the `:empty` pseudo-selector
|
61
70
|
which has great browser support
|
@@ -128,7 +137,7 @@ Refactored internals. No API changes.
|
|
128
137
|
of Ruby and Rails.
|
129
138
|
|
130
139
|
|
131
|
-
###
|
140
|
+
### Breaking changes
|
132
141
|
|
133
142
|
- Interactions that would result in an URL change ("pushState") now fall back to a full page load
|
134
143
|
if Up.js was booted from a non-GET request. [More information about the reasons for this](https://github.com/makandra/upjs/commit/d81d9007aa3bfae0fca8c55a71d180d1044acae5).
|
data/dist/up.js
CHANGED
@@ -25,7 +25,7 @@ If you use them in your own code, you will get hurt.
|
|
25
25
|
var slice = [].slice;
|
26
26
|
|
27
27
|
up.util = (function($) {
|
28
|
-
var $createElementFromSelector, ANIMATION_PROMISE_KEY, CONSOLE_PLACEHOLDERS, ajax, any, cache, castedAttr, clientSize, compact, config, contains, copy, copyAttributes, createElement, createElementFromHtml, createSelectorFromElement, cssAnimate, debug, detect, each, emptyJQuery, endsWith, error, escapePressed, evalConsoleTemplate, extend, findWithSelf, finishCssAnimate, fixedToAbsolute, forceCompositing, identity, ifGiven, isArray, isBlank, isDeferred, isDefined, isElement, isFunction, isGiven, isHash, isJQuery, isMissing, isNull, isNumber, isObject, isPresent, isPromise, isStandardPort, isString, isUndefined, isUnmodifiedKeyEvent, isUnmodifiedMouseEvent, last, locationFromXhr, map, measure, memoize, merge, methodFromXhr, multiSelector, nextFrame, normalizeMethod, normalizeUrl, nullJquery, offsetParent, once, only, option, options, presence, presentAttr, remove, resolvableWhen, resolvedDeferred, resolvedPromise, scrollbarWidth, select, setMissingAttrs, startsWith, temporaryCss, times, toArray, trim, unJquery, uniq, unwrapElement, warn;
|
28
|
+
var $createElementFromSelector, ANIMATION_PROMISE_KEY, CONSOLE_PLACEHOLDERS, ajax, any, cache, castedAttr, clientSize, compact, config, contains, copy, copyAttributes, createElement, createElementFromHtml, createSelectorFromElement, cssAnimate, debug, detect, each, emptyJQuery, endsWith, error, escapePressed, evalConsoleTemplate, extend, findWithSelf, finishCssAnimate, fixedToAbsolute, forceCompositing, identity, ifGiven, isArray, isBlank, isDeferred, isDefined, isElement, isFunction, isGiven, isHash, isJQuery, isMissing, isNull, isNumber, isObject, isPresent, isPromise, isStandardPort, isString, isUndefined, isUnmodifiedKeyEvent, isUnmodifiedMouseEvent, last, locationFromXhr, map, measure, memoize, merge, methodFromXhr, multiSelector, nextFrame, normalizeMethod, normalizeUrl, nullJquery, offsetParent, once, only, option, options, parseUrl, presence, presentAttr, remove, resolvableWhen, resolvedDeferred, resolvedPromise, scrollbarWidth, select, setMissingAttrs, startsWith, temporaryCss, times, toArray, trim, unJquery, uniq, unresolvablePromise, unwrapElement, warn;
|
29
29
|
memoize = function(func) {
|
30
30
|
var cache, cached;
|
31
31
|
cache = void 0;
|
@@ -52,7 +52,7 @@ If you use them in your own code, you will get hurt.
|
|
52
52
|
};
|
53
53
|
|
54
54
|
/**
|
55
|
-
@
|
55
|
+
@function up.util.isStandardPort
|
56
56
|
@private
|
57
57
|
*/
|
58
58
|
isStandardPort = function(protocol, port) {
|
@@ -65,24 +65,18 @@ If you use them in your own code, you will get hurt.
|
|
65
65
|
|
66
66
|
By default hashes are ignored, search queries are included.
|
67
67
|
|
68
|
-
@
|
68
|
+
@function up.util.normalizeUrl
|
69
69
|
@param {Boolean} [options.hash=false]
|
70
|
+
Whether to include an `#hash` anchor in the normalized URL
|
70
71
|
@param {Boolean} [options.search=true]
|
72
|
+
Whether to include a `?query` string in the normalized URL
|
73
|
+
@param {Boolean} [options.stripTrailingSlash=false]
|
74
|
+
Whether to strip a trailing slash from the pathname
|
71
75
|
@protected
|
72
76
|
*/
|
73
77
|
normalizeUrl = function(urlOrAnchor, options) {
|
74
78
|
var anchor, normalized, pathname;
|
75
|
-
anchor =
|
76
|
-
if (isString(urlOrAnchor)) {
|
77
|
-
anchor = $('<a>').attr({
|
78
|
-
href: urlOrAnchor
|
79
|
-
}).get(0);
|
80
|
-
if (isBlank(anchor.hostname)) {
|
81
|
-
anchor.href = anchor.href;
|
82
|
-
}
|
83
|
-
} else {
|
84
|
-
anchor = unJquery(urlOrAnchor);
|
85
|
-
}
|
79
|
+
anchor = parseUrl(urlOrAnchor);
|
86
80
|
normalized = anchor.protocol + "//" + anchor.hostname;
|
87
81
|
if (!isStandardPort(anchor.protocol, anchor.port)) {
|
88
82
|
normalized += ":" + anchor.port;
|
@@ -105,7 +99,27 @@ If you use them in your own code, you will get hurt.
|
|
105
99
|
};
|
106
100
|
|
107
101
|
/**
|
108
|
-
@
|
102
|
+
@function up.util.parseUrl
|
103
|
+
@private
|
104
|
+
*/
|
105
|
+
parseUrl = function(urlOrAnchor) {
|
106
|
+
var anchor;
|
107
|
+
anchor = null;
|
108
|
+
if (isString(urlOrAnchor)) {
|
109
|
+
anchor = $('<a>').attr({
|
110
|
+
href: urlOrAnchor
|
111
|
+
}).get(0);
|
112
|
+
if (isBlank(anchor.hostname)) {
|
113
|
+
anchor.href = anchor.href;
|
114
|
+
}
|
115
|
+
} else {
|
116
|
+
anchor = unJquery(urlOrAnchor);
|
117
|
+
}
|
118
|
+
return anchor;
|
119
|
+
};
|
120
|
+
|
121
|
+
/**
|
122
|
+
@function up.util.normalizeMethod
|
109
123
|
@protected
|
110
124
|
*/
|
111
125
|
normalizeMethod = function(method) {
|
@@ -167,7 +181,7 @@ If you use them in your own code, you will get hurt.
|
|
167
181
|
};
|
168
182
|
|
169
183
|
/**
|
170
|
-
@
|
184
|
+
@function up.debug
|
171
185
|
@protected
|
172
186
|
*/
|
173
187
|
debug = function() {
|
@@ -178,7 +192,7 @@ If you use them in your own code, you will get hurt.
|
|
178
192
|
};
|
179
193
|
|
180
194
|
/**
|
181
|
-
@
|
195
|
+
@function up.warn
|
182
196
|
@protected
|
183
197
|
*/
|
184
198
|
warn = function() {
|
@@ -200,7 +214,7 @@ If you use them in your own code, you will get hurt.
|
|
200
214
|
up.error('Division by zero')
|
201
215
|
up.error('Unexpected result %o', result)
|
202
216
|
|
203
|
-
@
|
217
|
+
@function up.error
|
204
218
|
*/
|
205
219
|
error = function() {
|
206
220
|
var $error, args, asString, ref;
|
@@ -425,7 +439,7 @@ If you use them in your own code, you will get hurt.
|
|
425
439
|
In that case you cannot change the sources with a `||` operator
|
426
440
|
(since that doesn't short-circuit at `false`).
|
427
441
|
|
428
|
-
@
|
442
|
+
@function up.util.option
|
429
443
|
@param {Array} args...
|
430
444
|
*/
|
431
445
|
option = function() {
|
@@ -535,7 +549,7 @@ If you use them in your own code, you will get hurt.
|
|
535
549
|
Modifies the given function so it only runs once.
|
536
550
|
Subsequent calls will return the previous return value.
|
537
551
|
|
538
|
-
@
|
552
|
+
@function up.util.once
|
539
553
|
@private
|
540
554
|
*/
|
541
555
|
once = function(fun) {
|
@@ -553,7 +567,7 @@ If you use them in your own code, you will get hurt.
|
|
553
567
|
/**
|
554
568
|
* Temporarily sets the CSS for the given element.
|
555
569
|
#
|
556
|
-
* @
|
570
|
+
* @function up.util.temporaryCss
|
557
571
|
* @param {jQuery} $element
|
558
572
|
* @param {Object} css
|
559
573
|
* @param {Function} [block]
|
@@ -601,7 +615,7 @@ If you use them in your own code, you will get hurt.
|
|
601
615
|
To improve performance, the element will be forced into compositing for
|
602
616
|
the duration of the animation.
|
603
617
|
|
604
|
-
@
|
618
|
+
@function up.util.cssAnimate
|
605
619
|
@param {Element|jQuery|String} elementOrSelector
|
606
620
|
The element to animate.
|
607
621
|
@param {Object} lastFrame
|
@@ -665,7 +679,7 @@ If you use them in your own code, you will get hurt.
|
|
665
679
|
|
666
680
|
Also see [`up.motion.finish`](/up.motion.finish).
|
667
681
|
|
668
|
-
@
|
682
|
+
@function up.util.finishCssAnimate
|
669
683
|
@protected
|
670
684
|
@param {Element|jQuery|String} elementOrSelector
|
671
685
|
*/
|
@@ -799,6 +813,9 @@ If you use them in your own code, you will get hurt.
|
|
799
813
|
resolvedPromise = function() {
|
800
814
|
return resolvedDeferred().promise();
|
801
815
|
};
|
816
|
+
unresolvablePromise = function() {
|
817
|
+
return $.Deferred().promise();
|
818
|
+
};
|
802
819
|
nullJquery = function() {
|
803
820
|
return {
|
804
821
|
is: function() {
|
@@ -910,7 +927,7 @@ If you use them in your own code, you will get hurt.
|
|
910
927
|
};
|
911
928
|
|
912
929
|
/**
|
913
|
-
@
|
930
|
+
@function up.util.cache
|
914
931
|
@param {Number|Function} [config.size]
|
915
932
|
Maximum number of cache entries.
|
916
933
|
Set to `undefined` to not limit the cache size.
|
@@ -1107,6 +1124,7 @@ If you use them in your own code, you will get hurt.
|
|
1107
1124
|
fixedToAbsolute: fixedToAbsolute,
|
1108
1125
|
presentAttr: presentAttr,
|
1109
1126
|
createElement: createElement,
|
1127
|
+
parseUrl: parseUrl,
|
1110
1128
|
normalizeUrl: normalizeUrl,
|
1111
1129
|
normalizeMethod: normalizeMethod,
|
1112
1130
|
createElementFromHtml: createElementFromHtml,
|
@@ -1172,6 +1190,7 @@ If you use them in your own code, you will get hurt.
|
|
1172
1190
|
clientSize: clientSize,
|
1173
1191
|
only: only,
|
1174
1192
|
trim: trim,
|
1193
|
+
unresolvablePromise: unresolvablePromise,
|
1175
1194
|
resolvedPromise: resolvedPromise,
|
1176
1195
|
resolvedDeferred: resolvedDeferred,
|
1177
1196
|
resolvableWhen: resolvableWhen,
|
@@ -1241,13 +1260,13 @@ we can't currently get rid off.
|
|
1241
1260
|
};
|
1242
1261
|
|
1243
1262
|
/**
|
1244
|
-
|
1263
|
+
A cross-browser way to interact with `console.log`, `console.error`, etc.
|
1245
1264
|
|
1246
|
-
|
1247
|
-
|
1248
|
-
|
1265
|
+
This function falls back to `console.log` if the output stream is not implemented.
|
1266
|
+
It also prints substitution strings (e.g. `console.log("From %o to %o", "a", "b")`)
|
1267
|
+
as a single string if the browser console does not support substitution strings.
|
1249
1268
|
|
1250
|
-
@
|
1269
|
+
@function up.browser.puts
|
1251
1270
|
@protected
|
1252
1271
|
*/
|
1253
1272
|
puts = function() {
|
@@ -1306,10 +1325,10 @@ we can't currently get rid off.
|
|
1306
1325
|
Returns whether Up.js supports the current browser.
|
1307
1326
|
|
1308
1327
|
Currently Up.js supports IE9 with jQuery 1.9+.
|
1309
|
-
On older browsers Up.js will prevent itself from booting,
|
1310
|
-
a classic server-side application.
|
1328
|
+
On older browsers Up.js will prevent itself from [booting](/up.boot),
|
1329
|
+
leaving you with a classic server-side application.
|
1311
1330
|
|
1312
|
-
@
|
1331
|
+
@function up.browser.isSupported
|
1313
1332
|
*/
|
1314
1333
|
isSupported = function() {
|
1315
1334
|
return (!isIE8OrWorse()) && isRecentJQuery();
|
@@ -1329,44 +1348,42 @@ we can't currently get rid off.
|
|
1329
1348
|
}).call(this);
|
1330
1349
|
|
1331
1350
|
/**
|
1332
|
-
|
1333
|
-
|
1334
|
-
|
1335
|
-
Up.js uses an internal event bus that you can use to hook into lifecycle events like "an HTML fragment into the DOM".
|
1336
|
-
|
1337
|
-
This internal event bus might eventually be rolled into regular events that we trigger on `document`.
|
1338
|
-
|
1339
|
-
\#\#\# `fragment:inserted` event
|
1351
|
+
Events
|
1352
|
+
======
|
1340
1353
|
|
1341
|
-
|
1354
|
+
Up.js has a convenient way to [listen to DOM events](/up.on):
|
1342
1355
|
|
1343
|
-
up.on('
|
1344
|
-
|
1356
|
+
up.on('click', 'button', function(event, $button) {
|
1357
|
+
// $button is a jQuery collection containing
|
1358
|
+
// the clicked <button> element
|
1345
1359
|
});
|
1346
1360
|
|
1347
|
-
|
1348
|
-
|
1361
|
+
This is roughly equivalent to binding an event listener to `document`
|
1362
|
+
using jQuery's [`on`](http://api.jquery.com/on/).
|
1349
1363
|
|
1364
|
+
- Event listeners on [unsupported browsers](/up.browser.isSupported) are silently discarded,
|
1365
|
+
leaving you with an application without Javascript. This is typically preferable to
|
1366
|
+
a soup of randomly broken Javascript in ancient browsers.
|
1367
|
+
- A jQuery object with the target element is automatically passed to the event handler.
|
1368
|
+
- You can [attach structured data](/up.on#attaching-structured-data) to observed elements.
|
1369
|
+
- The call is shorter.
|
1350
1370
|
|
1351
|
-
|
1371
|
+
Many Up.js interactions also emit DOM events that are prefixed with `up:`.
|
1352
1372
|
|
1353
|
-
|
1354
|
-
|
1355
|
-
|
1356
|
-
up.on('up:fragment:destroyed', function($fragment) {
|
1357
|
-
console.log("Looks like we lost %o!", $fragment);
|
1373
|
+
up.on('up:modal:opened', function(event) {
|
1374
|
+
console.log('A new modal has just opened!');
|
1358
1375
|
});
|
1359
1376
|
|
1360
|
-
|
1361
|
-
|
1362
|
-
|
1363
|
-
|
1364
|
-
|
1365
|
-
\#\#\# Incomplete documentation!
|
1366
|
-
|
1367
|
-
We need to work on this page:
|
1377
|
+
Events often have both present (`up:modal:open`) and past forms (`up:modal:opened`).
|
1378
|
+
You can usually prevent an action by listening to the present form
|
1379
|
+
and call `preventDefault()` on the `event` object:
|
1368
1380
|
|
1369
|
-
|
1381
|
+
up.on('up:modal:open', function(event) {
|
1382
|
+
if (event.url == '/evil') {
|
1383
|
+
// Prevent the modal from opening
|
1384
|
+
event.preventDefault();
|
1385
|
+
}
|
1386
|
+
});
|
1370
1387
|
|
1371
1388
|
@class up.bus
|
1372
1389
|
*/
|
@@ -1375,7 +1392,7 @@ We need to work on this page:
|
|
1375
1392
|
var slice = [].slice;
|
1376
1393
|
|
1377
1394
|
up.bus = (function($) {
|
1378
|
-
var defaultLiveDescriptions, emit, emitReset, live, liveDescriptions, nobodyPrevents, onEscape, restoreSnapshot, snapshot, u, upListenerToJqueryListener;
|
1395
|
+
var boot, defaultLiveDescriptions, emit, emitReset, live, liveDescriptions, nobodyPrevents, onEscape, restoreSnapshot, snapshot, u, upListenerToJqueryListener;
|
1379
1396
|
u = up.util;
|
1380
1397
|
liveDescriptions = [];
|
1381
1398
|
defaultLiveDescriptions = null;
|
@@ -1409,7 +1426,7 @@ We need to work on this page:
|
|
1409
1426
|
});
|
1410
1427
|
|
1411
1428
|
Other than jQuery, Up.js will silently discard event listeners
|
1412
|
-
on [browsers
|
1429
|
+
on [unsupported browsers](/up.browser.isSupported).
|
1413
1430
|
|
1414
1431
|
|
1415
1432
|
\#\#\#\# Attaching structured data
|
@@ -1445,7 +1462,7 @@ We need to work on this page:
|
|
1445
1462
|
$(this).something();
|
1446
1463
|
});
|
1447
1464
|
|
1448
|
-
@
|
1465
|
+
@function up.on
|
1449
1466
|
@param {String} events
|
1450
1467
|
A space-separated list of event names to bind.
|
1451
1468
|
@param {String} [selector]
|
@@ -1490,7 +1507,7 @@ We need to work on this page:
|
|
1490
1507
|
up.emit('my:event', { foo: 'bar' });
|
1491
1508
|
* Prints "bar" to the console
|
1492
1509
|
|
1493
|
-
@
|
1510
|
+
@function up.emit
|
1494
1511
|
@param {String} eventName
|
1495
1512
|
The name of the event.
|
1496
1513
|
@param {Object} [eventProps={}]
|
@@ -1515,9 +1532,10 @@ We need to work on this page:
|
|
1515
1532
|
};
|
1516
1533
|
|
1517
1534
|
/**
|
1518
|
-
[Emits an event](/up.emit) and returns whether any listener
|
1535
|
+
[Emits an event](/up.emit) and returns whether any listener
|
1536
|
+
has prevented the default action.
|
1519
1537
|
|
1520
|
-
@
|
1538
|
+
@function up.bus.nobodyPrevents
|
1521
1539
|
@param {String} eventName
|
1522
1540
|
@param {Object} eventProps
|
1523
1541
|
@protected
|
@@ -1528,10 +1546,22 @@ We need to work on this page:
|
|
1528
1546
|
event = emit.apply(null, args);
|
1529
1547
|
return !event.isDefaultPrevented();
|
1530
1548
|
};
|
1531
|
-
|
1549
|
+
|
1550
|
+
/**
|
1551
|
+
Registers an event listener to be called when the user
|
1552
|
+
presses the `Escape` key.
|
1553
|
+
|
1554
|
+
@function up.bus.onEscape
|
1555
|
+
@param {Function} listener
|
1556
|
+
The listener function to register.
|
1557
|
+
@return {Function}
|
1558
|
+
A function that unbinds the event listeners when called.
|
1559
|
+
@protected
|
1560
|
+
*/
|
1561
|
+
onEscape = function(listener) {
|
1532
1562
|
return live('keydown', 'body', function(event) {
|
1533
1563
|
if (u.escapePressed(event)) {
|
1534
|
-
return
|
1564
|
+
return listener(event);
|
1535
1565
|
}
|
1536
1566
|
});
|
1537
1567
|
};
|
@@ -1572,11 +1602,42 @@ We need to work on this page:
|
|
1572
1602
|
Don't use this in production.
|
1573
1603
|
|
1574
1604
|
@protected
|
1575
|
-
@
|
1605
|
+
@function up.reset
|
1576
1606
|
*/
|
1577
1607
|
emitReset = function() {
|
1578
1608
|
return up.emit('up:framework:reset');
|
1579
1609
|
};
|
1610
|
+
|
1611
|
+
/**
|
1612
|
+
This event is [emitted](/up.emit) when Up.js is [reset](/up.reset) during unit tests.
|
1613
|
+
|
1614
|
+
@protected
|
1615
|
+
@event up:framework:reset
|
1616
|
+
*/
|
1617
|
+
|
1618
|
+
/**
|
1619
|
+
Boots the Up.js framework.
|
1620
|
+
This is done automatically by including the Up.js Javascript.
|
1621
|
+
|
1622
|
+
Does nothing if the current browser is [not supported](/up.browser.isSupported).
|
1623
|
+
|
1624
|
+
Emits the [`up:framework:boot`](/up:framework:boot) event.
|
1625
|
+
|
1626
|
+
@protected
|
1627
|
+
@function up.boot
|
1628
|
+
*/
|
1629
|
+
boot = function() {
|
1630
|
+
if (up.browser.isSupported()) {
|
1631
|
+
return up.emit('up:framework:boot');
|
1632
|
+
}
|
1633
|
+
};
|
1634
|
+
|
1635
|
+
/**
|
1636
|
+
This event is [emitted](/up.emit) when Up.js [boots](/up.boot).
|
1637
|
+
|
1638
|
+
@event up:framework:boot
|
1639
|
+
@protected
|
1640
|
+
*/
|
1580
1641
|
live('up:framework:boot', snapshot);
|
1581
1642
|
live('up:framework:reset', restoreSnapshot);
|
1582
1643
|
return {
|
@@ -1584,7 +1645,8 @@ We need to work on this page:
|
|
1584
1645
|
emit: emit,
|
1585
1646
|
nobodyPrevents: nobodyPrevents,
|
1586
1647
|
onEscape: onEscape,
|
1587
|
-
emitReset: emitReset
|
1648
|
+
emitReset: emitReset,
|
1649
|
+
boot: boot
|
1588
1650
|
};
|
1589
1651
|
})(jQuery);
|
1590
1652
|
|
@@ -1594,6 +1656,8 @@ We need to work on this page:
|
|
1594
1656
|
|
1595
1657
|
up.reset = up.bus.emitReset;
|
1596
1658
|
|
1659
|
+
up.boot = up.bus.boot;
|
1660
|
+
|
1597
1661
|
}).call(this);
|
1598
1662
|
|
1599
1663
|
/**
|
@@ -1617,7 +1681,7 @@ We need to work on this page:
|
|
1617
1681
|
var slice = [].slice;
|
1618
1682
|
|
1619
1683
|
up.syntax = (function($) {
|
1620
|
-
var DESTROYABLE_CLASS, DESTROYER_KEY, applyCompiler, compile, compiler, compilers, data, defaultCompilers,
|
1684
|
+
var DESTROYABLE_CLASS, DESTROYER_KEY, applyCompiler, compile, compiler, compilers, data, defaultCompilers, hello, reset, runDestroyers, snapshot, u;
|
1621
1685
|
u = up.util;
|
1622
1686
|
DESTROYABLE_CLASS = 'up-destroyable';
|
1623
1687
|
DESTROYER_KEY = 'up-destroyer';
|
@@ -1755,7 +1819,7 @@ We need to work on this page:
|
|
1755
1819
|
});
|
1756
1820
|
|
1757
1821
|
|
1758
|
-
@
|
1822
|
+
@function up.compiler
|
1759
1823
|
@param {String} selector
|
1760
1824
|
The selector to match.
|
1761
1825
|
@param {Boolean} [options.batch=false]
|
@@ -1822,7 +1886,7 @@ We need to work on this page:
|
|
1822
1886
|
}
|
1823
1887
|
return results;
|
1824
1888
|
};
|
1825
|
-
|
1889
|
+
runDestroyers = function($fragment) {
|
1826
1890
|
return u.findWithSelf($fragment, "." + DESTROYABLE_CLASS).each(function() {
|
1827
1891
|
var $element, destroyer;
|
1828
1892
|
$element = $(this);
|
@@ -1841,14 +1905,15 @@ We need to work on this page:
|
|
1841
1905
|
we can support getting or setting individual keys.
|
1842
1906
|
|
1843
1907
|
@protected
|
1844
|
-
@
|
1908
|
+
@function up.syntax.data
|
1845
1909
|
@param {String|Element|jQuery} elementOrSelector
|
1910
|
+
@return
|
1911
|
+
The JSON-decoded value of the `up-data` attribute.
|
1912
|
+
|
1913
|
+
Returns an empty object (`{}`) if the element has no (or an empty) `up-data` attribute.
|
1846
1914
|
*/
|
1847
1915
|
|
1848
1916
|
/*
|
1849
|
-
Looks for an `up-data` attribute on the given element, then parses
|
1850
|
-
its value as JSON and returns the JSON object.
|
1851
|
-
|
1852
1917
|
If an element annotated with [`up-data`] is inserted into the DOM,
|
1853
1918
|
Up will parse the JSON and pass the resulting object to any matching
|
1854
1919
|
[`up.compiler`](/up.syntax.compiler) handlers.
|
@@ -1857,13 +1922,9 @@ We need to work on this page:
|
|
1857
1922
|
[`up-data`], the parsed object will be passed to any matching
|
1858
1923
|
[`up.on`](/up.on) handlers.
|
1859
1924
|
|
1860
|
-
@
|
1861
|
-
@
|
1862
|
-
|
1863
|
-
@return
|
1864
|
-
The JSON-decoded value of the `up-data` attribute.
|
1865
|
-
|
1866
|
-
Returns an empty object (`{}`) if the element has no (or an empty) `up-data` attribute.
|
1925
|
+
@selector [up-data]
|
1926
|
+
@param {JSON} up-data
|
1927
|
+
A serialized JSON string
|
1867
1928
|
*/
|
1868
1929
|
data = function(elementOrSelector) {
|
1869
1930
|
var $element, json;
|
@@ -1910,7 +1971,10 @@ We need to work on this page:
|
|
1910
1971
|
$element = $('<div>...</div>').appendTo(document.body);
|
1911
1972
|
up.hello($element);
|
1912
1973
|
|
1913
|
-
|
1974
|
+
This function emits the [`up:fragment:inserted`](/up:fragment:inserted)
|
1975
|
+
event.
|
1976
|
+
|
1977
|
+
@function up.hello
|
1914
1978
|
@param {String|Element|jQuery} selectorOrElement
|
1915
1979
|
*/
|
1916
1980
|
hello = function(selectorOrElement) {
|
@@ -1921,6 +1985,21 @@ We need to work on this page:
|
|
1921
1985
|
});
|
1922
1986
|
return $element;
|
1923
1987
|
};
|
1988
|
+
|
1989
|
+
/**
|
1990
|
+
When a page fragment has been [inserted or updated](/up.replace),
|
1991
|
+
this event is [emitted](/up.emit) on the fragment.
|
1992
|
+
|
1993
|
+
\#\#\#\# Example
|
1994
|
+
|
1995
|
+
up.on('up:fragment:inserted', function(event, $fragment) {
|
1996
|
+
console.log("Looks like we have a new %o!", $fragment);
|
1997
|
+
});
|
1998
|
+
|
1999
|
+
@event up:fragment:inserted
|
2000
|
+
@param {jQuery} event.$element
|
2001
|
+
The fragment that has been inserted or updated.
|
2002
|
+
*/
|
1924
2003
|
up.on('ready', (function() {
|
1925
2004
|
return hello(document.body);
|
1926
2005
|
}));
|
@@ -1928,7 +2007,7 @@ We need to work on this page:
|
|
1928
2007
|
return compile(event.$element);
|
1929
2008
|
});
|
1930
2009
|
up.on('up:fragment:destroy', function(event) {
|
1931
|
-
return
|
2010
|
+
return runDestroyers(event.$element);
|
1932
2011
|
});
|
1933
2012
|
up.on('up:framework:boot', snapshot);
|
1934
2013
|
up.on('up:framework:reset', reset);
|
@@ -1954,8 +2033,8 @@ We need to work on this page:
|
|
1954
2033
|
}).call(this);
|
1955
2034
|
|
1956
2035
|
/**
|
1957
|
-
|
1958
|
-
|
2036
|
+
Browser history
|
2037
|
+
===============
|
1959
2038
|
|
1960
2039
|
\#\#\# Incomplete documentation!
|
1961
2040
|
|
@@ -1974,8 +2053,7 @@ We need to work on this page:
|
|
1974
2053
|
u = up.util;
|
1975
2054
|
|
1976
2055
|
/**
|
1977
|
-
@
|
1978
|
-
@property
|
2056
|
+
@property up.history.config
|
1979
2057
|
@param {Array<String>} [config.popTargets=['body']]
|
1980
2058
|
An array of CSS selectors to replace when the user goes
|
1981
2059
|
back in history.
|
@@ -1995,7 +2073,7 @@ We need to work on this page:
|
|
1995
2073
|
were applied by [`up.history.push`](/up.history.replace) or
|
1996
2074
|
[`up.history.replace`](/up.history.replace).
|
1997
2075
|
|
1998
|
-
@
|
2076
|
+
@function up.history.previousUrl
|
1999
2077
|
@protected
|
2000
2078
|
*/
|
2001
2079
|
previousUrl = void 0;
|
@@ -2014,7 +2092,7 @@ We need to work on this page:
|
|
2014
2092
|
/**
|
2015
2093
|
Returns a normalized URL for the current history entry.
|
2016
2094
|
|
2017
|
-
@
|
2095
|
+
@function up.history.url
|
2018
2096
|
@protected
|
2019
2097
|
*/
|
2020
2098
|
currentUrl = function() {
|
@@ -2032,7 +2110,7 @@ We need to work on this page:
|
|
2032
2110
|
};
|
2033
2111
|
|
2034
2112
|
/**
|
2035
|
-
@
|
2113
|
+
@function up.history.replace
|
2036
2114
|
@param {String} url
|
2037
2115
|
@param {Boolean} [options.force=false]
|
2038
2116
|
@protected
|
@@ -2042,7 +2120,7 @@ We need to work on this page:
|
|
2042
2120
|
};
|
2043
2121
|
|
2044
2122
|
/**
|
2045
|
-
@
|
2123
|
+
@function up.history.push
|
2046
2124
|
@param {String} url
|
2047
2125
|
@protected
|
2048
2126
|
*/
|
@@ -2132,8 +2210,7 @@ We need to work on this page:
|
|
2132
2210
|
Goback
|
2133
2211
|
</a>
|
2134
2212
|
|
2135
|
-
@
|
2136
|
-
@method [up-back]
|
2213
|
+
@selector [up-back]
|
2137
2214
|
*/
|
2138
2215
|
up.compiler('[up-back]', function($link) {
|
2139
2216
|
if (u.isPresent(previousUrl)) {
|
@@ -2182,8 +2259,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2182
2259
|
/**
|
2183
2260
|
Configures the application layout.
|
2184
2261
|
|
2185
|
-
@
|
2186
|
-
@property
|
2262
|
+
@property up.layout.config
|
2187
2263
|
@param {Array<String>} [config.viewports]
|
2188
2264
|
An array of CSS selectors that find viewports
|
2189
2265
|
(containers that scroll their contents).
|
@@ -2255,7 +2331,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2255
2331
|
last frame before the next animation is started.
|
2256
2332
|
|
2257
2333
|
@protected
|
2258
|
-
@
|
2334
|
+
@function up.scroll
|
2259
2335
|
@param {String|Element|jQuery} viewport
|
2260
2336
|
The container element to scroll.
|
2261
2337
|
@param {Number} scrollPos
|
@@ -2302,7 +2378,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2302
2378
|
};
|
2303
2379
|
|
2304
2380
|
/**
|
2305
|
-
@
|
2381
|
+
@function up.layout.finishScrolling
|
2306
2382
|
@private
|
2307
2383
|
*/
|
2308
2384
|
finishScrolling = function(elementOrSelector) {
|
@@ -2315,7 +2391,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2315
2391
|
};
|
2316
2392
|
|
2317
2393
|
/**
|
2318
|
-
@
|
2394
|
+
@function up.layout.anchoredRight
|
2319
2395
|
@private
|
2320
2396
|
*/
|
2321
2397
|
anchoredRight = function() {
|
@@ -2386,7 +2462,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2386
2462
|
- give the element an attribute [`up-fixed="top"`](/up-fixed-top) or [`up-fixed="bottom"`](up-fixed-bottom)
|
2387
2463
|
- [configure default options](/up.layout.config) for `fixedTop` or `fixedBottom`
|
2388
2464
|
|
2389
|
-
@
|
2465
|
+
@function up.reveal
|
2390
2466
|
@param {String|Element|jQuery} element
|
2391
2467
|
@param {Number} [options.duration]
|
2392
2468
|
@param {String} [options.easing]
|
@@ -2457,7 +2533,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2457
2533
|
Throws an error if no viewport could be found.
|
2458
2534
|
|
2459
2535
|
@protected
|
2460
|
-
@
|
2536
|
+
@function up.layout.viewportOf
|
2461
2537
|
@param {String|Element|jQuery} selectorOrElement
|
2462
2538
|
*/
|
2463
2539
|
viewportOf = function(selectorOrElement) {
|
@@ -2473,7 +2549,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2473
2549
|
given selector or element.
|
2474
2550
|
|
2475
2551
|
@protected
|
2476
|
-
@
|
2552
|
+
@function up.layout.viewportsWithin
|
2477
2553
|
@param {String|Element|jQuery} selectorOrElement
|
2478
2554
|
@return jQuery
|
2479
2555
|
*/
|
@@ -2487,7 +2563,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2487
2563
|
Returns a jQuery collection of all the viewports on the screen.
|
2488
2564
|
|
2489
2565
|
@protected
|
2490
|
-
@
|
2566
|
+
@function up.layout.viewports
|
2491
2567
|
*/
|
2492
2568
|
viewports = function() {
|
2493
2569
|
return viewportSelector().select();
|
@@ -2502,7 +2578,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2502
2578
|
up.layout.scrollTops()
|
2503
2579
|
=> { '.main': 0, '.sidebar': 73 }
|
2504
2580
|
|
2505
|
-
@
|
2581
|
+
@function up.layout.scrollTops
|
2506
2582
|
@return Object<String, Number>
|
2507
2583
|
@protected
|
2508
2584
|
*/
|
@@ -2525,7 +2601,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2525
2601
|
};
|
2526
2602
|
|
2527
2603
|
/**
|
2528
|
-
@
|
2604
|
+
@function up.layout.fixedChildren
|
2529
2605
|
@protected
|
2530
2606
|
*/
|
2531
2607
|
fixedChildren = function(root) {
|
@@ -2555,7 +2631,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2555
2631
|
|
2556
2632
|
Up.js automatically saves scroll positions whenever a fragment was updated on the page.
|
2557
2633
|
|
2558
|
-
@
|
2634
|
+
@function up.layout.saveScroll
|
2559
2635
|
@param {String} [options.url]
|
2560
2636
|
@param {Object<String, Number>} [options.tops]
|
2561
2637
|
@protected
|
@@ -2578,7 +2654,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2578
2654
|
Up.js automatically restores scroll positions when the user presses the back button.
|
2579
2655
|
You can disable this behavior by setting [`up.history.config.restoreScroll = false`](/up.history.config).
|
2580
2656
|
|
2581
|
-
@
|
2657
|
+
@function up.layout.restoreScroll
|
2582
2658
|
@param {jQuery} [options.around]
|
2583
2659
|
If set, only restores viewports that are either an ancestor
|
2584
2660
|
or descendant of the given element.
|
@@ -2613,17 +2689,27 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2613
2689
|
|
2614
2690
|
/**
|
2615
2691
|
@protected
|
2616
|
-
@
|
2692
|
+
@function up.layout.revealOrRestoreScroll
|
2617
2693
|
@return {Deferred} A promise for when the revealing or scroll restauration ends
|
2618
2694
|
*/
|
2619
2695
|
revealOrRestoreScroll = function(selectorOrElement, options) {
|
2620
|
-
var $element;
|
2696
|
+
var $element, $target, id, parsed;
|
2621
2697
|
$element = $(selectorOrElement);
|
2622
2698
|
if (options.restoreScroll) {
|
2623
2699
|
return restoreScroll({
|
2624
2700
|
around: $element
|
2625
2701
|
});
|
2626
2702
|
} else if (options.reveal) {
|
2703
|
+
if (options.source) {
|
2704
|
+
parsed = u.parseUrl(options.source);
|
2705
|
+
if (parsed.hash && parsed.hash !== '#') {
|
2706
|
+
id = parsed.hash.substr(1);
|
2707
|
+
$target = u.findWithSelf($element, "#" + id + ", a[name='" + id + "']");
|
2708
|
+
if ($target.length) {
|
2709
|
+
$element = $target;
|
2710
|
+
}
|
2711
|
+
}
|
2712
|
+
}
|
2627
2713
|
return reveal($element);
|
2628
2714
|
} else {
|
2629
2715
|
return u.resolvedDeferred();
|
@@ -2679,8 +2765,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2679
2765
|
</p>
|
2680
2766
|
</div>
|
2681
2767
|
|
2682
|
-
@
|
2683
|
-
@ujs
|
2768
|
+
@selector [up-viewport]
|
2684
2769
|
*/
|
2685
2770
|
|
2686
2771
|
/**
|
@@ -2694,8 +2779,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2694
2779
|
|
2695
2780
|
<div class="top-nav" up-fixed="top">...</div>
|
2696
2781
|
|
2697
|
-
@
|
2698
|
-
@ujs
|
2782
|
+
@selector [up-fixed=top]
|
2699
2783
|
*/
|
2700
2784
|
|
2701
2785
|
/**
|
@@ -2709,8 +2793,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2709
2793
|
|
2710
2794
|
<div class="bottom-nav" up-fixed="bottom">...</div>
|
2711
2795
|
|
2712
|
-
@
|
2713
|
-
@ujs
|
2796
|
+
@selector [up-fixed=bottom]
|
2714
2797
|
*/
|
2715
2798
|
up.on('up:framework:reset', reset);
|
2716
2799
|
return {
|
@@ -2802,7 +2885,13 @@ are based on this module.
|
|
2802
2885
|
Note how only `.two` has changed. The update for `.one` was
|
2803
2886
|
discarded, since it didn't match the selector.
|
2804
2887
|
|
2805
|
-
|
2888
|
+
\#\#\#\# Events
|
2889
|
+
|
2890
|
+
Up.js will emit [`up:fragment:destroyed`](/up:fragment:destroyed) on the element
|
2891
|
+
that was replaced and [`up:fragment:inserted`](/up:fragment:inserted) on the new
|
2892
|
+
element that replaces it.
|
2893
|
+
|
2894
|
+
@function up.replace
|
2806
2895
|
@param {String|Element|jQuery} selectorOrElement
|
2807
2896
|
The CSS selector to update. You can also pass a DOM element or jQuery element
|
2808
2897
|
here, in which case a selector will be inferred from the element's class and ID.
|
@@ -2839,7 +2928,7 @@ are based on this module.
|
|
2839
2928
|
if (!options.preload) {
|
2840
2929
|
up.browser.loadPage(url, u.only(options, 'method'));
|
2841
2930
|
}
|
2842
|
-
return u.
|
2931
|
+
return u.unresolvablePromise();
|
2843
2932
|
}
|
2844
2933
|
request = {
|
2845
2934
|
url: url,
|
@@ -2903,7 +2992,7 @@ are based on this module.
|
|
2903
2992
|
Note how only `.two` has changed. The update for `.one` was
|
2904
2993
|
discarded, since it didn't match the selector.
|
2905
2994
|
|
2906
|
-
@
|
2995
|
+
@function up.flow.implant
|
2907
2996
|
@protected
|
2908
2997
|
@param {String} selector
|
2909
2998
|
@param {String} html
|
@@ -3048,7 +3137,7 @@ are based on this module.
|
|
3048
3137
|
Returns `undefined` if no element matches these conditions.
|
3049
3138
|
|
3050
3139
|
@protected
|
3051
|
-
@
|
3140
|
+
@function up.first
|
3052
3141
|
@param {String} selector
|
3053
3142
|
*/
|
3054
3143
|
first = function(selector) {
|
@@ -3075,7 +3164,9 @@ are based on this module.
|
|
3075
3164
|
Note that if you choose to animate the element removal using `options.animate`,
|
3076
3165
|
the element won't be removed until after the animation has completed.
|
3077
3166
|
|
3078
|
-
|
3167
|
+
Emits events [`up:fragment:destroy`](/up:fragment:destroy) and [`up:fragment:destroyed`](/up:fragment:destroyed).
|
3168
|
+
|
3169
|
+
@function up.destroy
|
3079
3170
|
@param {String|Element|jQuery} selectorOrElement
|
3080
3171
|
@param {String} [options.url]
|
3081
3172
|
@param {String} [options.title]
|
@@ -3120,6 +3211,32 @@ are based on this module.
|
|
3120
3211
|
}
|
3121
3212
|
};
|
3122
3213
|
|
3214
|
+
/**
|
3215
|
+
Before a page fragment is being [destroyed](/up.destroy), this
|
3216
|
+
event is [emitted](/up.emit) on the fragment.
|
3217
|
+
|
3218
|
+
If the destruction is animated, this event is emitted before the
|
3219
|
+
animation begins.
|
3220
|
+
|
3221
|
+
@event up:fragment:destroy
|
3222
|
+
@param {jQuery} event.$element
|
3223
|
+
The page fragment that is about to be destroyed.
|
3224
|
+
@param event.preventDefault()
|
3225
|
+
Event listeners may call this method to prevent the fragment from being destroyed.
|
3226
|
+
*/
|
3227
|
+
|
3228
|
+
/**
|
3229
|
+
This event is [emitted](/up.emit) right before a [destroyed](/up.destroy)
|
3230
|
+
page fragment is removed from the DOM.
|
3231
|
+
|
3232
|
+
If the destruction is animated, this event is emitted after
|
3233
|
+
the animation has ended.
|
3234
|
+
|
3235
|
+
@event up:fragment:destroyed
|
3236
|
+
@param {jQuery} event.$element
|
3237
|
+
The page fragment that is about to be removed from the DOM.
|
3238
|
+
*/
|
3239
|
+
|
3123
3240
|
/**
|
3124
3241
|
Replaces the given element with a fresh copy fetched from the server.
|
3125
3242
|
|
@@ -3132,7 +3249,7 @@ are based on this module.
|
|
3132
3249
|
Up.js remembers the URL from which a fragment was loaded, so you
|
3133
3250
|
don't usually need to give an URL when reloading.
|
3134
3251
|
|
3135
|
-
@
|
3252
|
+
@function up.reload
|
3136
3253
|
@param {String|Element|jQuery} selectorOrElement
|
3137
3254
|
@param {Object} [options]
|
3138
3255
|
See options for [`up.replace`](/up.replace)
|
@@ -3214,8 +3331,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3214
3331
|
/**
|
3215
3332
|
Sets default options for animations and transitions.
|
3216
3333
|
|
3217
|
-
@
|
3218
|
-
@property
|
3334
|
+
@property up.motion.config
|
3219
3335
|
@param {Number} [config.duration=300]
|
3220
3336
|
@param {Number} [config.delay=0]
|
3221
3337
|
@param {String} [config.easing='ease']
|
@@ -3279,7 +3395,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3279
3395
|
the previous animation will instantly jump to its last frame before
|
3280
3396
|
the new animation begins.
|
3281
3397
|
|
3282
|
-
@
|
3398
|
+
@function up.animate
|
3283
3399
|
@param {Element|jQuery|String} elementOrSelector
|
3284
3400
|
The element to animate.
|
3285
3401
|
@param {String|Function|Object} animation
|
@@ -3323,7 +3439,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3323
3439
|
attributes like `up-easing` or `up-duration`.
|
3324
3440
|
|
3325
3441
|
@protected
|
3326
|
-
@
|
3442
|
+
@function up.motion.animateOptions
|
3327
3443
|
*/
|
3328
3444
|
animateOptions = function(allOptions, $element) {
|
3329
3445
|
var options;
|
@@ -3388,7 +3504,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3388
3504
|
|
3389
3505
|
Does nothing if the given element is not currently animating.
|
3390
3506
|
|
3391
|
-
@
|
3507
|
+
@function up.motion.finish
|
3392
3508
|
@param {Element|jQuery|String} elementOrSelector
|
3393
3509
|
*/
|
3394
3510
|
finish = function(elementOrSelector) {
|
@@ -3459,7 +3575,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3459
3575
|
- When the transition has finished, the clones are removed from the DOM and the new element is shown.
|
3460
3576
|
The old element remains hidden in the DOM.
|
3461
3577
|
|
3462
|
-
@
|
3578
|
+
@function up.morph
|
3463
3579
|
@param {Element|jQuery|String} source
|
3464
3580
|
@param {Element|jQuery|String} target
|
3465
3581
|
@param {Function|String} transitionOrName
|
@@ -3481,7 +3597,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3481
3597
|
u.debug('Morphing %o to %o (using %o)', source, target, transitionOrName);
|
3482
3598
|
$old = $(source);
|
3483
3599
|
$new = $(target);
|
3484
|
-
parsedOptions = u.only(options, 'reveal', 'restoreScroll');
|
3600
|
+
parsedOptions = u.only(options, 'reveal', 'restoreScroll', 'source');
|
3485
3601
|
parsedOptions = u.extend(parsedOptions, animateOptions(options));
|
3486
3602
|
if (up.browser.canCssAnimation()) {
|
3487
3603
|
finish($old);
|
@@ -3581,8 +3697,8 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3581
3697
|
|
3582
3698
|
up.transition('cross-fade', ($old, $new, options) ->
|
3583
3699
|
up.motion.when(
|
3584
|
-
animate($old, 'fade-out', options),
|
3585
|
-
animate($new, 'fade-in', options)
|
3700
|
+
up.animate($old, 'fade-out', options),
|
3701
|
+
up.animate($new, 'fade-in', options)
|
3586
3702
|
)
|
3587
3703
|
)
|
3588
3704
|
|
@@ -3601,7 +3717,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3601
3717
|
Calling [`up.animate`](/up.animate) with an object argument
|
3602
3718
|
will take care of all these points.
|
3603
3719
|
|
3604
|
-
@
|
3720
|
+
@function up.transition
|
3605
3721
|
@param {String} name
|
3606
3722
|
@param {Function} transition
|
3607
3723
|
*/
|
@@ -3614,10 +3730,10 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3614
3730
|
|
3615
3731
|
Here is the definition of the pre-defined `fade-in` animation:
|
3616
3732
|
|
3617
|
-
up.animation('fade-in', ($ghost, options)
|
3618
|
-
$ghost.css(opacity: 0)
|
3619
|
-
animate($ghost, { opacity: 1 }, options)
|
3620
|
-
)
|
3733
|
+
up.animation('fade-in', function($ghost, options) {
|
3734
|
+
$ghost.css(opacity: 0);
|
3735
|
+
up.animate($ghost, { opacity: 1 }, options);
|
3736
|
+
})
|
3621
3737
|
|
3622
3738
|
It is recommended that your definitions always end by calling
|
3623
3739
|
calling [`up.animate`](/up.animate) with an object argument, passing along
|
@@ -3635,7 +3751,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3635
3751
|
Calling [`up.animate`](/up.animate) with an object argument
|
3636
3752
|
will take care of all these points.
|
3637
3753
|
|
3638
|
-
@
|
3754
|
+
@function up.animation
|
3639
3755
|
@param {String} name
|
3640
3756
|
@param {Function} animation
|
3641
3757
|
*/
|
@@ -3654,7 +3770,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3654
3770
|
the combined promise will have a `resolve` method. This `resolve` method
|
3655
3771
|
will resolve all the wrapped promises.
|
3656
3772
|
|
3657
|
-
@
|
3773
|
+
@function up.motion.when
|
3658
3774
|
@param promises...
|
3659
3775
|
@return A new promise.
|
3660
3776
|
*/
|
@@ -3664,7 +3780,7 @@ or [transitions](/up.transition) using Javascript or CSS.
|
|
3664
3780
|
Returns a no-op animation or transition which has no visual effects
|
3665
3781
|
and completes instantly.
|
3666
3782
|
|
3667
|
-
@
|
3783
|
+
@function up.motion.none
|
3668
3784
|
@return {Promise}
|
3669
3785
|
A resolved promise
|
3670
3786
|
*/
|
@@ -3850,8 +3966,9 @@ the user performs the click.
|
|
3850
3966
|
Spinners
|
3851
3967
|
--------
|
3852
3968
|
|
3853
|
-
You can listen
|
3854
|
-
(
|
3969
|
+
You can [listen](/up.on) to the [`up:proxy:busy`](/up:proxy:busy)
|
3970
|
+
and [`up:proxy:idle`](/up:proxy:idle) events to implement a spinner
|
3971
|
+
that appears during a long-running request,
|
3855
3972
|
and disappears once the response has been received:
|
3856
3973
|
|
3857
3974
|
<div class="spinner">Please wait!</div>
|
@@ -3863,8 +3980,8 @@ Here is the Javascript to make it alive:
|
|
3863
3980
|
show = function() { $element.show() };
|
3864
3981
|
hide = function() { $element.hide() };
|
3865
3982
|
|
3866
|
-
showOff = up.on('proxy:busy', show);
|
3867
|
-
hideOff = up.on('proxy:idle', hide);
|
3983
|
+
showOff = up.on('up:proxy:busy', show);
|
3984
|
+
hideOff = up.on('up:proxy:idle', hide);
|
3868
3985
|
|
3869
3986
|
hide();
|
3870
3987
|
|
@@ -3876,9 +3993,9 @@ Here is the Javascript to make it alive:
|
|
3876
3993
|
|
3877
3994
|
});
|
3878
3995
|
|
3879
|
-
The `proxy:busy` event will be emitted after a delay of 300 ms
|
3996
|
+
The `up:proxy:busy` event will be emitted after a delay of 300 ms
|
3880
3997
|
to prevent the spinner from flickering on and off.
|
3881
|
-
You can change (or remove) this delay like this:
|
3998
|
+
You can change (or remove) this delay by [configuring `up.proxy`](/up.proxy.config) like this:
|
3882
3999
|
|
3883
4000
|
up.proxy.config.busyDelay = 150;
|
3884
4001
|
|
@@ -3896,8 +4013,7 @@ You can change (or remove) this delay like this:
|
|
3896
4013
|
busyEventEmitted = void 0;
|
3897
4014
|
|
3898
4015
|
/**
|
3899
|
-
@
|
3900
|
-
@property
|
4016
|
+
@property up.proxy.config
|
3901
4017
|
@param {Number} [config.preloadDelay=75]
|
3902
4018
|
The number of milliseconds to wait before [`[up-preload]`](/up-preload)
|
3903
4019
|
starts preloading.
|
@@ -3934,25 +4050,26 @@ You can change (or remove) this delay like this:
|
|
3934
4050
|
|
3935
4051
|
/**
|
3936
4052
|
@protected
|
3937
|
-
@
|
4053
|
+
@function up.proxy.get
|
3938
4054
|
*/
|
3939
4055
|
get = cache.get;
|
3940
4056
|
|
3941
4057
|
/**
|
3942
4058
|
@protected
|
3943
|
-
@
|
4059
|
+
@function up.proxy.set
|
3944
4060
|
*/
|
3945
4061
|
set = cache.set;
|
3946
4062
|
|
3947
4063
|
/**
|
3948
4064
|
@protected
|
3949
|
-
@
|
4065
|
+
@function up.proxy.remove
|
3950
4066
|
*/
|
3951
4067
|
remove = cache.remove;
|
3952
4068
|
|
3953
4069
|
/**
|
3954
|
-
|
3955
|
-
|
4070
|
+
Removes all cache entries.
|
4071
|
+
|
4072
|
+
@function up.proxy.clear
|
3956
4073
|
*/
|
3957
4074
|
clear = cache.clear;
|
3958
4075
|
cancelPreloadDelay = function() {
|
@@ -4000,7 +4117,7 @@ You can change (or remove) this delay like this:
|
|
4000
4117
|
Once the response is received, a `proxy:receive` event will
|
4001
4118
|
be emitted.
|
4002
4119
|
|
4003
|
-
@
|
4120
|
+
@function up.proxy.ajax
|
4004
4121
|
@param {String} request.url
|
4005
4122
|
@param {String} [request.method='GET']
|
4006
4123
|
@param {String} [request.selector]
|
@@ -4041,7 +4158,7 @@ You can change (or remove) this delay like this:
|
|
4041
4158
|
The proxy will also emit an `proxy:idle` [event](/up.bus) if it
|
4042
4159
|
used to busy, but is now idle.
|
4043
4160
|
|
4044
|
-
@
|
4161
|
+
@function up.proxy.idle
|
4045
4162
|
@return {Boolean} Whether the proxy is idle
|
4046
4163
|
*/
|
4047
4164
|
idle = function() {
|
@@ -4055,7 +4172,7 @@ You can change (or remove) this delay like this:
|
|
4055
4172
|
The proxy will also emit an `proxy:busy` [event](/up.bus) if it
|
4056
4173
|
used to idle, but is now busy.
|
4057
4174
|
|
4058
|
-
@
|
4175
|
+
@function up.proxy.busy
|
4059
4176
|
@return {Boolean} Whether the proxy is busy
|
4060
4177
|
*/
|
4061
4178
|
busy = function() {
|
@@ -4079,6 +4196,24 @@ You can change (or remove) this delay like this:
|
|
4079
4196
|
}
|
4080
4197
|
}
|
4081
4198
|
};
|
4199
|
+
|
4200
|
+
/**
|
4201
|
+
This event is [emitted]/(up.emit) when [AJAX requests](/up.proxy.ajax)
|
4202
|
+
are taking long to finish.
|
4203
|
+
|
4204
|
+
By default Up.js will wait 300 ms for an AJAX request to finish
|
4205
|
+
before emitting `up:proxy:busy`. You can configure this time like this:
|
4206
|
+
|
4207
|
+
up.proxy.config.busyDelay = 150;
|
4208
|
+
|
4209
|
+
Once all responses have been received, an [`up:proxy:idle`](/up:proxy:idle)
|
4210
|
+
will be emitted.
|
4211
|
+
|
4212
|
+
Note that if additional requests are made while Up.js is already busy
|
4213
|
+
waiting, **no** additional `up:proxy:busy` events will be triggered.
|
4214
|
+
|
4215
|
+
@event up:proxy:busy
|
4216
|
+
*/
|
4082
4217
|
loadEnded = function() {
|
4083
4218
|
pendingCount -= 1;
|
4084
4219
|
if (idle() && busyEventEmitted) {
|
@@ -4086,16 +4221,45 @@ You can change (or remove) this delay like this:
|
|
4086
4221
|
return busyEventEmitted = false;
|
4087
4222
|
}
|
4088
4223
|
};
|
4224
|
+
|
4225
|
+
/**
|
4226
|
+
This event is [emitted]/(up.emit) when [AJAX requests](/up.proxy.ajax)
|
4227
|
+
have [taken long to finish](/up:proxy:busy), but have finished now.
|
4228
|
+
|
4229
|
+
@event up:proxy:busy
|
4230
|
+
*/
|
4089
4231
|
load = function(request) {
|
4090
4232
|
var promise;
|
4091
4233
|
u.debug('Loading URL %o', request.url);
|
4092
4234
|
up.emit('up:proxy:load', request);
|
4093
4235
|
promise = u.ajax(request);
|
4094
4236
|
promise.always(function() {
|
4095
|
-
return up.emit('up:proxy:
|
4237
|
+
return up.emit('up:proxy:received', request);
|
4096
4238
|
});
|
4097
4239
|
return promise;
|
4098
4240
|
};
|
4241
|
+
|
4242
|
+
/**
|
4243
|
+
This event is [emitted]/(up.emit) before an [AJAX request](/up.proxy.ajax)
|
4244
|
+
is starting to load.
|
4245
|
+
|
4246
|
+
@event up:proxy:load
|
4247
|
+
@protected
|
4248
|
+
@param event.url
|
4249
|
+
@param event.method
|
4250
|
+
@param event.selector
|
4251
|
+
*/
|
4252
|
+
|
4253
|
+
/**
|
4254
|
+
This event is [emitted]/(up.emit) when the response to an [AJAX request](/up.proxy.ajax)
|
4255
|
+
has been received.
|
4256
|
+
|
4257
|
+
@event up:proxy:received
|
4258
|
+
@protected
|
4259
|
+
@param event.url
|
4260
|
+
@param event.method
|
4261
|
+
@param event.selector
|
4262
|
+
*/
|
4099
4263
|
isIdempotent = function(request) {
|
4100
4264
|
normalizeRequest(request);
|
4101
4265
|
return u.contains(SAFE_HTTP_METHODS, request.method);
|
@@ -4119,7 +4283,9 @@ You can change (or remove) this delay like this:
|
|
4119
4283
|
|
4120
4284
|
/**
|
4121
4285
|
@protected
|
4122
|
-
@
|
4286
|
+
@function up.proxy.preload
|
4287
|
+
@param {String|Element|jQuery}
|
4288
|
+
The element whose destination should be preloaded.
|
4123
4289
|
@return
|
4124
4290
|
A promise that will be resolved when the request was loaded and cached
|
4125
4291
|
*/
|
@@ -4147,12 +4313,11 @@ You can change (or remove) this delay like this:
|
|
4147
4313
|
response will already be cached when the user performs the click,
|
4148
4314
|
making the interaction feel instant.
|
4149
4315
|
|
4150
|
-
@
|
4316
|
+
@selector [up-preload]
|
4151
4317
|
@param [up-delay=75]
|
4152
4318
|
The number of milliseconds to wait between hovering
|
4153
4319
|
and preloading. Increasing this will lower the load in your server,
|
4154
4320
|
but will also make the interaction feel less instant.
|
4155
|
-
@ujs
|
4156
4321
|
*/
|
4157
4322
|
up.on('mouseover mousedown touchstart', '[up-preload]', function(event, $element) {
|
4158
4323
|
if (!up.link.childClicked(event, $element)) {
|
@@ -4276,7 +4441,7 @@ Read on
|
|
4276
4441
|
|
4277
4442
|
up.visit('/users')
|
4278
4443
|
|
4279
|
-
@
|
4444
|
+
@function up.visit
|
4280
4445
|
@param {String} url
|
4281
4446
|
The URL to visit.
|
4282
4447
|
@param {String} [options.target='body']
|
@@ -4304,7 +4469,7 @@ Read on
|
|
4304
4469
|
var $link = $('a:first'); // select link with jQuery
|
4305
4470
|
up.follow($link);
|
4306
4471
|
|
4307
|
-
@
|
4472
|
+
@function up.follow
|
4308
4473
|
@param {Element|jQuery|String} linkOrSelector
|
4309
4474
|
An element or selector which resolves to an `<a>` tag
|
4310
4475
|
or any element that is marked up with an `up-href` attribute.
|
@@ -4353,7 +4518,7 @@ Read on
|
|
4353
4518
|
Defaults to `get`.
|
4354
4519
|
|
4355
4520
|
@protected
|
4356
|
-
@
|
4521
|
+
@function up.link.followMethod
|
4357
4522
|
@param linkOrSelector
|
4358
4523
|
@param options.method {String}
|
4359
4524
|
*/
|
@@ -4411,8 +4576,7 @@ Read on
|
|
4411
4576
|
Note that using any element other than `<a>` will prevent users from
|
4412
4577
|
opening the destination in a new tab.
|
4413
4578
|
|
4414
|
-
@
|
4415
|
-
@ujs
|
4579
|
+
@selector a[up-target]
|
4416
4580
|
@param {String} up-target
|
4417
4581
|
The CSS selector to replace
|
4418
4582
|
@param {String} [up-href]
|
@@ -4455,8 +4619,7 @@ Read on
|
|
4455
4619
|
navigation actions this isn't needed. E.g. popular operation
|
4456
4620
|
systems switch tabs on `mousedown` instead of `click`.
|
4457
4621
|
|
4458
|
-
@
|
4459
|
-
@ujs
|
4622
|
+
@selector a[up-instant]
|
4460
4623
|
*/
|
4461
4624
|
up.on('mousedown', 'a[up-instant], [up-href][up-instant]', function(event, $link) {
|
4462
4625
|
if (shouldProcessLinkEvent(event, $link)) {
|
@@ -4466,7 +4629,7 @@ Read on
|
|
4466
4629
|
});
|
4467
4630
|
|
4468
4631
|
/**
|
4469
|
-
@
|
4632
|
+
@function up.link.childClicked
|
4470
4633
|
@private
|
4471
4634
|
*/
|
4472
4635
|
childClicked = function(event, $link) {
|
@@ -4485,7 +4648,7 @@ Read on
|
|
4485
4648
|
This is done by giving the link an `up-follow` attribute
|
4486
4649
|
if it doesn't already have it an `up-target` or `up-follow` attribute.
|
4487
4650
|
|
4488
|
-
@
|
4651
|
+
@function up.link.makeFollowable
|
4489
4652
|
@protected
|
4490
4653
|
*/
|
4491
4654
|
makeFollowable = function(link) {
|
@@ -4517,8 +4680,7 @@ Read on
|
|
4517
4680
|
Note that using any element other than `<a>` will prevent users from
|
4518
4681
|
opening the destination in a new tab.
|
4519
4682
|
|
4520
|
-
@
|
4521
|
-
@ujs
|
4683
|
+
@selector a[up-follow]
|
4522
4684
|
@param [up-href]
|
4523
4685
|
The destination URL to follow.
|
4524
4686
|
If omitted, the the link's `href` attribute will be used.
|
@@ -4552,8 +4714,7 @@ Read on
|
|
4552
4714
|
`up-expand` honors all the UJS behavior in expanded links
|
4553
4715
|
(`up-target`, `up-instant`, `up-preload`, etc.).
|
4554
4716
|
|
4555
|
-
@
|
4556
|
-
@method [up-expand]
|
4717
|
+
@selector [up-expand]
|
4557
4718
|
*/
|
4558
4719
|
up.compiler('[up-expand]', function($area) {
|
4559
4720
|
var attribute, i, len, link, name, newAttrs, ref, upAttributePattern;
|
@@ -4591,8 +4752,7 @@ Read on
|
|
4591
4752
|
|
4592
4753
|
<a href="/users" up-target=".main" up-instant up-preload>User list</a>
|
4593
4754
|
|
4594
|
-
@
|
4595
|
-
@ujs
|
4755
|
+
@selector [up-dash]
|
4596
4756
|
*/
|
4597
4757
|
up.compiler('[up-dash]', function($element) {
|
4598
4758
|
var newAttrs, target;
|
@@ -4661,7 +4821,7 @@ We need to work on this page:
|
|
4661
4821
|
The response is parsed for a CSS selector and the matching elements will
|
4662
4822
|
replace corresponding elements on the current page.
|
4663
4823
|
|
4664
|
-
@
|
4824
|
+
@function up.submit
|
4665
4825
|
@param {Element|jQuery|String} formOrSelector
|
4666
4826
|
A reference or selector for the form to submit.
|
4667
4827
|
If the argument points to an element that is not a form,
|
@@ -4810,7 +4970,7 @@ We need to work on this page:
|
|
4810
4970
|
});
|
4811
4971
|
|
4812
4972
|
|
4813
|
-
@
|
4973
|
+
@function up.observe
|
4814
4974
|
@param {Element|jQuery|String} fieldOrSelector
|
4815
4975
|
@param {Function(value, $field)|String} options.change
|
4816
4976
|
The callback to execute when the field's value changes.
|
@@ -4892,8 +5052,7 @@ We need to work on this page:
|
|
4892
5052
|
...
|
4893
5053
|
</form>
|
4894
5054
|
|
4895
|
-
@
|
4896
|
-
@ujs
|
5055
|
+
@selector form[up-target]
|
4897
5056
|
@param {String} up-target
|
4898
5057
|
The selector to [replace](/up.replace) if the form submission is successful (200 status code).
|
4899
5058
|
@param {String} [up-fail-target]
|
@@ -4949,9 +5108,8 @@ We need to work on this page:
|
|
4949
5108
|
|
4950
5109
|
See up.observe.
|
4951
5110
|
|
4952
|
-
@
|
5111
|
+
@selector input[up-observe]
|
4953
5112
|
The code to run when the field's value changes.
|
4954
|
-
@ujs
|
4955
5113
|
@param {String} up-observe
|
4956
5114
|
*/
|
4957
5115
|
up.compiler('[up-observe]', function($field) {
|
@@ -4973,22 +5131,46 @@ We need to work on this page:
|
|
4973
5131
|
Pop-up overlays
|
4974
5132
|
===============
|
4975
5133
|
|
4976
|
-
Instead of linking to
|
4977
|
-
to
|
4978
|
-
|
4979
|
-
popup
|
4980
|
-
|
5134
|
+
Instead of [linking to a page fragment](/up.link), you can choose
|
5135
|
+
to show a fragment in a popup overlay.
|
5136
|
+
|
5137
|
+
To open a popup, add an [`up-popup` attribute](/a-up-popup) to a link,
|
5138
|
+
or call the Javascript function [`up.popup.attach`](/up.popup.attach).
|
5139
|
+
|
4981
5140
|
For modal dialogs see [up.modal](/up.modal) instead.
|
4982
|
-
|
4983
|
-
\#\#\# Incomplete documentation!
|
4984
|
-
|
4985
|
-
We need to work on this page:
|
4986
5141
|
|
4987
|
-
|
4988
|
-
|
4989
|
-
|
4990
|
-
|
4991
|
-
|
5142
|
+
|
5143
|
+
\#\#\#\# Customizing the popup design
|
5144
|
+
|
5145
|
+
Loading the Up.js stylesheet will give you a minimal popup design:
|
5146
|
+
|
5147
|
+
- Popup contents are displayed in a white box
|
5148
|
+
- There is a a subtle box shadow around the popup
|
5149
|
+
- The box will grow to fit the popup contents
|
5150
|
+
|
5151
|
+
The easiest way to change how the popup looks is by overriding the [default CSS styles](https://github.com/makandra/upjs/blob/master/lib/assets/stylesheets/up/popup.css.sass).
|
5152
|
+
|
5153
|
+
By default the popup uses the following DOM structure:
|
5154
|
+
|
5155
|
+
<div class="up-popup">
|
5156
|
+
...
|
5157
|
+
</div>
|
5158
|
+
|
5159
|
+
|
5160
|
+
\#\#\#\# Closing behavior
|
5161
|
+
|
5162
|
+
The popup closes when the user clicks anywhere outside the popup area.
|
5163
|
+
|
5164
|
+
By default the popup also closes
|
5165
|
+
*whenever a page fragment below the popup is updated*.
|
5166
|
+
This is useful to have the popup interact with the page that
|
5167
|
+
opened it, e.g. by updating parts of a larger form or by signing in a user
|
5168
|
+
and revealing additional information.
|
5169
|
+
|
5170
|
+
To disable this behavior, give the opening link an `up-sticky` attribute:
|
5171
|
+
|
5172
|
+
<a href="/settings" up-popup=".options" up-sticky>Settings</a>
|
5173
|
+
|
4992
5174
|
|
4993
5175
|
@class up.popup
|
4994
5176
|
*/
|
@@ -5002,7 +5184,7 @@ We need to work on this page:
|
|
5002
5184
|
Returns the source URL for the fragment displayed
|
5003
5185
|
in the current popup, or `undefined` if no popup is open.
|
5004
5186
|
|
5005
|
-
@
|
5187
|
+
@function up.popup.url
|
5006
5188
|
@return {String}
|
5007
5189
|
the source URL
|
5008
5190
|
*/
|
@@ -5011,7 +5193,7 @@ We need to work on this page:
|
|
5011
5193
|
/**
|
5012
5194
|
Returns the URL of the page or modal below the popup.
|
5013
5195
|
|
5014
|
-
@
|
5196
|
+
@function up.popup.coveredUrl
|
5015
5197
|
@return {String}
|
5016
5198
|
@protected
|
5017
5199
|
*/
|
@@ -5022,11 +5204,17 @@ We need to work on this page:
|
|
5022
5204
|
};
|
5023
5205
|
|
5024
5206
|
/**
|
5025
|
-
|
5026
|
-
|
5027
|
-
@
|
5028
|
-
@param {String} [config.
|
5029
|
-
|
5207
|
+
Sets default options for future popups.
|
5208
|
+
|
5209
|
+
@property up.popup.config
|
5210
|
+
@param {String} [config.openAnimation='fade-in']
|
5211
|
+
The animation used to open a popup.
|
5212
|
+
@param {String} [config.closeAnimation='fade-out']
|
5213
|
+
The animation used to close a popup.
|
5214
|
+
@param {String} [config.position='bottom-right']
|
5215
|
+
Defines where the popup is attached to the opening element.
|
5216
|
+
|
5217
|
+
Valid values are `bottom-right`, `bottom-left`, `top-right` and `top-left`.
|
5030
5218
|
*/
|
5031
5219
|
config = u.config({
|
5032
5220
|
openAnimation: 'fade-in',
|
@@ -5140,7 +5328,7 @@ We need to work on this page:
|
|
5140
5328
|
/**
|
5141
5329
|
Attaches a popup overlay to the given element or selector.
|
5142
5330
|
|
5143
|
-
@
|
5331
|
+
@function up.popup.attach
|
5144
5332
|
@param {Element|jQuery|String} elementOrSelector
|
5145
5333
|
@param {String} [options.url]
|
5146
5334
|
@param {String} [options.position='bottom-right']
|
@@ -5182,7 +5370,7 @@ We need to work on this page:
|
|
5182
5370
|
Closes a currently opened popup overlay.
|
5183
5371
|
Does nothing if no popup is currently open.
|
5184
5372
|
|
5185
|
-
@
|
5373
|
+
@function up.popup.close
|
5186
5374
|
@param {Object} options
|
5187
5375
|
See options for [`up.animate`](/up.animate).
|
5188
5376
|
*/
|
@@ -5233,8 +5421,7 @@ We need to work on this page:
|
|
5233
5421
|
<a href="/decks" up-popup=".deck_list">Switch deck</a>
|
5234
5422
|
<a href="/settings" up-popup=".options" up-sticky>Settings</a>
|
5235
5423
|
|
5236
|
-
@
|
5237
|
-
@ujs
|
5424
|
+
@selector a[up-popup]
|
5238
5425
|
@param [up-sticky]
|
5239
5426
|
@param [up-position]
|
5240
5427
|
*/
|
@@ -5271,8 +5458,7 @@ We need to work on this page:
|
|
5271
5458
|
When an element with this attribute is clicked,
|
5272
5459
|
a currently open popup is closed.
|
5273
5460
|
|
5274
|
-
@
|
5275
|
-
@ujs
|
5461
|
+
@selector [up-close]
|
5276
5462
|
*/
|
5277
5463
|
up.on('click', '[up-close]', function(event, $element) {
|
5278
5464
|
if ($element.closest('.up-popup').length) {
|
@@ -5308,10 +5494,55 @@ We need to work on this page:
|
|
5308
5494
|
Modal dialogs
|
5309
5495
|
=============
|
5310
5496
|
|
5311
|
-
Instead of linking to
|
5312
|
-
to
|
5497
|
+
Instead of [linking to a page fragment](/up.link), you can choose
|
5498
|
+
to show a fragment in a modal dialog.
|
5499
|
+
|
5500
|
+
To open a modal, add an [`up-modal` attribute](/a-up-modal) to a link,
|
5501
|
+
or call the Javascript functions [`up.modal.follow`](/up.modal.follow)
|
5502
|
+
and [`up.modal.visit`](/up.modal.visit).
|
5313
5503
|
|
5314
|
-
For
|
5504
|
+
For smaller popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
5505
|
+
|
5506
|
+
|
5507
|
+
\#\#\#\# Customizing the dialog design
|
5508
|
+
|
5509
|
+
Loading the Up.js stylesheet will give you a minimal dialog design:
|
5510
|
+
|
5511
|
+
- Dialog contents are displayed in a white box that is centered vertically and horizontally.
|
5512
|
+
- There is a a subtle box shadow around the dialog
|
5513
|
+
- The box will grow to fit the dialog contents, but never grow larger than the screen
|
5514
|
+
- The box is placed over a semi-transparent background to dim the rest of the page
|
5515
|
+
- There is a button to close the dialog in the top-right corner
|
5516
|
+
|
5517
|
+
The easiest way to change how the dialog looks is by overriding the [default CSS styles](https://github.com/makandra/upjs/blob/master/lib/assets/stylesheets/up/modal.css.sass).
|
5518
|
+
|
5519
|
+
By default the dialog uses the following DOM structure:
|
5520
|
+
|
5521
|
+
<div class="up-modal">
|
5522
|
+
<div class="up-modal-dialog">
|
5523
|
+
<div class="up-modal-close" up-close>X</div>
|
5524
|
+
<div class="up-modal-content">
|
5525
|
+
...
|
5526
|
+
</div>
|
5527
|
+
</div>
|
5528
|
+
</div>
|
5529
|
+
|
5530
|
+
If you want to change the design beyond CSS, you can
|
5531
|
+
configure Up.js to [use a different HTML structure](/up.modal.config).
|
5532
|
+
|
5533
|
+
|
5534
|
+
\#\#\#\# Closing behavior
|
5535
|
+
|
5536
|
+
By default the dialog automatically closes
|
5537
|
+
*whenever a page fragment below the dialog is updated*.
|
5538
|
+
This is useful to have the dialog interact with the page that
|
5539
|
+
opened it, e.g. by updating parts of a larger form or by signing in a user
|
5540
|
+
and revealing additional information.
|
5541
|
+
|
5542
|
+
To disable this behavior, give the opening link an `up-sticky` attribute:
|
5543
|
+
|
5544
|
+
<a href="/settings" up-modal=".options" up-sticky>Settings</a>
|
5545
|
+
|
5315
5546
|
|
5316
5547
|
@class up.modal
|
5317
5548
|
*/
|
@@ -5324,8 +5555,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5324
5555
|
/**
|
5325
5556
|
Sets default options for future modals.
|
5326
5557
|
|
5327
|
-
@
|
5328
|
-
@property
|
5558
|
+
@property up.modal.config
|
5329
5559
|
@param {Number} [config.width]
|
5330
5560
|
The width of the dialog as a CSS value like `'400px'` or `50%`.
|
5331
5561
|
|
@@ -5375,7 +5605,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5375
5605
|
Returns the source URL for the fragment displayed in the current modal overlay,
|
5376
5606
|
or `undefined` if no modal is currently open.
|
5377
5607
|
|
5378
|
-
@
|
5608
|
+
@function up.modal.url
|
5379
5609
|
@return {String}
|
5380
5610
|
the source URL
|
5381
5611
|
*/
|
@@ -5384,7 +5614,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5384
5614
|
/**
|
5385
5615
|
Returns the URL of the page below the modal overlay.
|
5386
5616
|
|
5387
|
-
@
|
5617
|
+
@function up.modal.coveredUrl
|
5388
5618
|
@return {String}
|
5389
5619
|
@protected
|
5390
5620
|
*/
|
@@ -5485,14 +5715,9 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5485
5715
|
|
5486
5716
|
Any option attributes for [`a[up-modal]`](/a.up-modal) will be honored.
|
5487
5717
|
|
5488
|
-
|
5718
|
+
Emits events [`up:modal:open`](/up:modal:open) and [`up:modal:opened`](/up:modal:opened).
|
5489
5719
|
|
5490
|
-
|
5491
|
-
is starting to open.
|
5492
|
-
- Emits an [event](/up.bus) `up:modal:opened` when the opening
|
5493
|
-
animation has finished and the modal contents are fully visible.
|
5494
|
-
|
5495
|
-
@method up.modal.follow
|
5720
|
+
@function up.modal.follow
|
5496
5721
|
@param {Element|jQuery|String} linkOrSelector
|
5497
5722
|
The link to follow.
|
5498
5723
|
@param {String} [options.target]
|
@@ -5535,7 +5760,9 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5535
5760
|
This will request `/foo`, extract the `.list` selector from the response
|
5536
5761
|
and open the selected container in a modal dialog.
|
5537
5762
|
|
5538
|
-
|
5763
|
+
Emits events [`up:modal:open`](/up:modal:open) and [`up:modal:opened`](/up:modal:opened).
|
5764
|
+
|
5765
|
+
@function up.modal.visit
|
5539
5766
|
@param {String} url
|
5540
5767
|
The URL to load.
|
5541
5768
|
@param {String} options.target
|
@@ -5551,6 +5778,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5551
5778
|
};
|
5552
5779
|
|
5553
5780
|
/**
|
5781
|
+
@function up.modal.open
|
5554
5782
|
@private
|
5555
5783
|
*/
|
5556
5784
|
open = function(options) {
|
@@ -5588,18 +5816,27 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5588
5816
|
}
|
5589
5817
|
};
|
5590
5818
|
|
5819
|
+
/**
|
5820
|
+
This event is [emitted](/up.emit) when a modal dialog is starting to open.
|
5821
|
+
|
5822
|
+
@event up:modal:open
|
5823
|
+
@param event.preventDefault()
|
5824
|
+
Event listeners may call this method to prevent the modal from opening.
|
5825
|
+
*/
|
5826
|
+
|
5827
|
+
/**
|
5828
|
+
This event is [emitted](/up.emit) when a modal dialog has finished opening.
|
5829
|
+
|
5830
|
+
@event up:modal:opened
|
5831
|
+
*/
|
5832
|
+
|
5591
5833
|
/**
|
5592
5834
|
Closes a currently opened modal overlay.
|
5593
5835
|
Does nothing if no modal is currently open.
|
5594
5836
|
|
5595
|
-
|
5596
|
-
|
5597
|
-
- Emits an [event](/up.bus) `modal:close` when the modal
|
5598
|
-
is starting to close.
|
5599
|
-
- Emits an [event](/up.bus) `modal:closed` when the closing
|
5600
|
-
animation has finished and the modal has been removed from the DOM.
|
5837
|
+
Emits events [`up:modal:close`](/up:modal:close) and [`up:modal:closed`](/up:modal:closed).
|
5601
5838
|
|
5602
|
-
@
|
5839
|
+
@function up.modal.close
|
5603
5840
|
@param {Object} options
|
5604
5841
|
See options for [`up.animate`](/up.animate)
|
5605
5842
|
*/
|
@@ -5632,6 +5869,22 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5632
5869
|
return u.resolvedDeferred();
|
5633
5870
|
}
|
5634
5871
|
};
|
5872
|
+
|
5873
|
+
/**
|
5874
|
+
This event is [emitted](/up.emit) when a modal dialog
|
5875
|
+
is starting to [close](/up.modal.close).
|
5876
|
+
|
5877
|
+
@event up:modal:close
|
5878
|
+
@param event.preventDefault()
|
5879
|
+
Event listeners may call this method to prevent the modal from closing.
|
5880
|
+
*/
|
5881
|
+
|
5882
|
+
/**
|
5883
|
+
This event is [emitted](/up.emit) when a modal dialog
|
5884
|
+
is done [closing](/up.modal.close).
|
5885
|
+
|
5886
|
+
@event up:modal:closed
|
5887
|
+
*/
|
5635
5888
|
autoclose = function() {
|
5636
5889
|
if (!$('.up-modal').is('[up-sticky]')) {
|
5637
5890
|
discardHistory();
|
@@ -5643,7 +5896,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5643
5896
|
Returns whether the given element or selector is contained
|
5644
5897
|
within the current modal.
|
5645
5898
|
|
5646
|
-
@
|
5899
|
+
@function up.modal.contains
|
5647
5900
|
@param {String} elementOrSelector
|
5648
5901
|
@protected
|
5649
5902
|
*/
|
@@ -5666,51 +5919,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5666
5919
|
and place the matching `.blog-list` tag will be placed in
|
5667
5920
|
a modal dialog.
|
5668
5921
|
|
5669
|
-
|
5670
|
-
\#\#\#\# Customizing the dialog design
|
5671
|
-
|
5672
|
-
Loading the Up.js stylesheet will give you a minimal dialog design:
|
5673
|
-
|
5674
|
-
- Dialog contents are displayed in a white box that is centered vertically and horizontally.
|
5675
|
-
- There is a a subtle box shadow around the dialog
|
5676
|
-
- The box will grow to fit the dialog contents, but never grow larger than the screen
|
5677
|
-
- The box is placed over a semi-transparent background to dim the rest of the page
|
5678
|
-
- There is a button to close the dialog in the top-right corner
|
5679
|
-
|
5680
|
-
The easiest way to change how the dialog looks is by overriding the [default CSS styles](https://github.com/makandra/upjs/blob/master/lib/assets/stylesheets/up/modal.css.sass).
|
5681
|
-
|
5682
|
-
By default the dialog uses the following DOM structure (continuing the blog-switcher example from above):
|
5683
|
-
|
5684
|
-
<div class="up-modal">
|
5685
|
-
<div class="up-modal-dialog">
|
5686
|
-
<div class="up-modal-close" up-close>X</div>
|
5687
|
-
<div class="up-modal-content">
|
5688
|
-
<ul class="blog-list">
|
5689
|
-
...
|
5690
|
-
</ul>
|
5691
|
-
</div>
|
5692
|
-
</div>
|
5693
|
-
</div>
|
5694
|
-
|
5695
|
-
If you want to change the design beyond CSS, you can
|
5696
|
-
configure Up.js to [use a different HTML structure](/up.modal.config).
|
5697
|
-
|
5698
|
-
|
5699
|
-
\#\#\#\# Closing behavior
|
5700
|
-
|
5701
|
-
By default the dialog automatically closes
|
5702
|
-
*whenever a page fragment below the dialog is updated*.
|
5703
|
-
This is useful to have the dialog interact with the page that
|
5704
|
-
opened it, e.g. by updating parts of a larger form or by signing in a user
|
5705
|
-
and revealing additional information.
|
5706
|
-
|
5707
|
-
To disable this behavior, give the opening link an `up-sticky` attribute:
|
5708
|
-
|
5709
|
-
<a href="/settings" up-modal=".options" up-sticky>Settings</a>
|
5710
|
-
|
5711
|
-
|
5712
|
-
@method a[up-modal]
|
5713
|
-
@ujs
|
5922
|
+
@selector a[up-modal]
|
5714
5923
|
@param [up-sticky]
|
5715
5924
|
@param [up-animation]
|
5716
5925
|
@param [up-height]
|
@@ -5750,8 +5959,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5750
5959
|
When this element is clicked, closes a currently open dialog.
|
5751
5960
|
Does nothing if no modal is currently open.
|
5752
5961
|
|
5753
|
-
@
|
5754
|
-
@ujs
|
5962
|
+
@selector [up-close]
|
5755
5963
|
*/
|
5756
5964
|
up.on('click', '[up-close]', function(event, $element) {
|
5757
5965
|
if ($element.closest('.up-modal').length) {
|
@@ -5824,8 +6032,7 @@ The tooltip element is appended to the end of `<body>`.
|
|
5824
6032
|
/**
|
5825
6033
|
Sets default options for future tooltips.
|
5826
6034
|
|
5827
|
-
@
|
5828
|
-
@property
|
6035
|
+
@property up.tooltip.config
|
5829
6036
|
@param {String} [config.position]
|
5830
6037
|
The default position of tooltips relative to the element.
|
5831
6038
|
Can be either `"top"` or `"bottom"`.
|
@@ -5884,7 +6091,7 @@ The tooltip element is appended to the end of `<body>`.
|
|
5884
6091
|
html: 'Enter multiple words or phrases'
|
5885
6092
|
});
|
5886
6093
|
|
5887
|
-
@
|
6094
|
+
@function up.tooltip.attach
|
5888
6095
|
@param {Element|jQuery|String} elementOrSelector
|
5889
6096
|
@param {String} [options.html]
|
5890
6097
|
The HTML to display in the tooltip.
|
@@ -5917,7 +6124,7 @@ The tooltip element is appended to the end of `<body>`.
|
|
5917
6124
|
Closes a currently shown tooltip.
|
5918
6125
|
Does nothing if no tooltip is currently shown.
|
5919
6126
|
|
5920
|
-
@
|
6127
|
+
@function up.tooltip.close
|
5921
6128
|
@param {Object} options
|
5922
6129
|
See options for [`up.animate`](/up.animate).
|
5923
6130
|
*/
|
@@ -5943,7 +6150,7 @@ The tooltip element is appended to the end of `<body>`.
|
|
5943
6150
|
|
5944
6151
|
<a href="/decks" up-tooltip="Show all decks" up-position="bottom">Decks</a>
|
5945
6152
|
|
5946
|
-
@
|
6153
|
+
@selector [up-tooltip]
|
5947
6154
|
@param {String} [up-animation]
|
5948
6155
|
The animation used to open the tooltip.
|
5949
6156
|
Defaults to [`up.tooltip.config.openAnimation`](/up.tooltip.config).
|
@@ -5951,7 +6158,6 @@ The tooltip element is appended to the end of `<body>`.
|
|
5951
6158
|
The default position of tooltips relative to the element.
|
5952
6159
|
Can be either `"top"` or `"bottom"`.
|
5953
6160
|
Defaults to [`up.tooltip.config.position`](/up.tooltip.config).
|
5954
|
-
@ujs
|
5955
6161
|
*/
|
5956
6162
|
|
5957
6163
|
/**
|
@@ -5959,8 +6165,7 @@ The tooltip element is appended to the end of `<body>`.
|
|
5959
6165
|
|
5960
6166
|
<a href="/decks" up-tooltip="Show <b>all</b> decks">Decks</a>
|
5961
6167
|
|
5962
|
-
@
|
5963
|
-
@ujs
|
6168
|
+
@selector [up-tooltip-html]
|
5964
6169
|
*/
|
5965
6170
|
up.compiler('[up-tooltip], [up-tooltip-html]', function($link) {
|
5966
6171
|
$link.on('mouseover', function() {
|
@@ -6011,8 +6216,7 @@ by providing instant feedback for user interactions.
|
|
6011
6216
|
/**
|
6012
6217
|
Sets default options for this module.
|
6013
6218
|
|
6014
|
-
@
|
6015
|
-
@property
|
6219
|
+
@property up.navigation.config
|
6016
6220
|
@param {Number} [config.currentClasses]
|
6017
6221
|
An array of classes to set on [links that point the current location](/up-current).
|
6018
6222
|
*/
|
@@ -6134,8 +6338,7 @@ by providing instant feedback for user interactions.
|
|
6134
6338
|
|
6135
6339
|
<a href="/foo" up-follow up-current>Foo</a>
|
6136
6340
|
|
6137
|
-
@
|
6138
|
-
@method [up-active]
|
6341
|
+
@selector [up-active]
|
6139
6342
|
*/
|
6140
6343
|
sectionClicked = function($section) {
|
6141
6344
|
unmarkActive();
|
@@ -6200,8 +6403,7 @@ by providing instant feedback for user interactions.
|
|
6200
6403
|
|
6201
6404
|
<a href="/reports" up-alias="/reports/*">Reports</a>
|
6202
6405
|
|
6203
|
-
@
|
6204
|
-
@ujs
|
6406
|
+
@selector [up-current]
|
6205
6407
|
*/
|
6206
6408
|
up.on('up:fragment:inserted', function() {
|
6207
6409
|
unmarkActive();
|
@@ -6223,13 +6425,6 @@ by providing instant feedback for user interactions.
|
|
6223
6425
|
|
6224
6426
|
}).call(this);
|
6225
6427
|
(function() {
|
6226
|
-
|
6227
|
-
up.emit('up:framework:boot');
|
6228
|
-
up.emit('up:framework:booted');
|
6229
|
-
}
|
6230
|
-
|
6231
|
-
}).call(this);
|
6232
|
-
(function() {
|
6233
|
-
|
6428
|
+
up.boot();
|
6234
6429
|
|
6235
6430
|
}).call(this);
|