upjs-rails 0.12.4 → 0.12.5
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 +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);
|