upjs-rails 0.12.1 → 0.12.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +27 -12
- data/dist/up.js +376 -201
- data/dist/up.min.js +2 -2
- data/lib/assets/javascripts/up/boot.js.coffee +2 -2
- data/lib/assets/javascripts/up/browser.js.coffee +9 -0
- data/lib/assets/javascripts/up/bus.js.coffee +26 -8
- data/lib/assets/javascripts/up/flow.js.coffee +77 -23
- data/lib/assets/javascripts/up/form.js.coffee +15 -12
- data/lib/assets/javascripts/up/history.js.coffee +2 -2
- data/lib/assets/javascripts/up/layout.js.coffee +27 -17
- data/lib/assets/javascripts/up/link.js.coffee +23 -15
- data/lib/assets/javascripts/up/magic.js.coffee +72 -32
- data/lib/assets/javascripts/up/modal.js.coffee +47 -37
- data/lib/assets/javascripts/up/motion.js.coffee +7 -7
- data/lib/assets/javascripts/up/navigation.js.coffee +6 -5
- data/lib/assets/javascripts/up/popup.js.coffee +36 -27
- data/lib/assets/javascripts/up/proxy.js.coffee +7 -7
- data/lib/assets/javascripts/up/tooltip.js.coffee +1 -1
- data/lib/assets/javascripts/up/util.js.coffee +1 -1
- data/lib/upjs/rails/version.rb +1 -1
- data/spec_app/Gemfile.lock +1 -1
- data/spec_app/spec/javascripts/up/bus_spec.js.coffee +4 -4
- data/spec_app/spec/javascripts/up/modal_spec.js.coffee +20 -0
- data/spec_app/spec/javascripts/up/navigation_spec.js.coffee +41 -3
- data/spec_app/spec/javascripts/up/popup_spec.js.coffee +20 -0
- metadata +2 -2
data/dist/up.js
CHANGED
@@ -663,7 +663,7 @@ If you use them in your own code, you will get hurt.
|
|
663
663
|
|
664
664
|
Does nothing if the given element is not currently animating.
|
665
665
|
|
666
|
-
Also see [`up.motion.finish`](/up.motion
|
666
|
+
Also see [`up.motion.finish`](/up.motion.finish).
|
667
667
|
|
668
668
|
@method up.util.finishCssAnimate
|
669
669
|
@protected
|
@@ -1312,6 +1312,16 @@ we can't currently get rid off.
|
|
1312
1312
|
initialRequestMethod = u.memoize(function() {
|
1313
1313
|
return (popCookie('_up_request_method') || 'get').toLowerCase();
|
1314
1314
|
});
|
1315
|
+
|
1316
|
+
/**
|
1317
|
+
Returns whether Up.js supports the current browser.
|
1318
|
+
|
1319
|
+
Currently Up.js supports IE9 with jQuery 1.9+.
|
1320
|
+
On older browsers Up.js will prevent itself from booting, leaving you with
|
1321
|
+
a classic server-side application.
|
1322
|
+
|
1323
|
+
@up.browser.isSupported
|
1324
|
+
*/
|
1315
1325
|
isSupported = function() {
|
1316
1326
|
return (!isIE8OrWorse()) && isRecentJQuery();
|
1317
1327
|
};
|
@@ -1339,7 +1349,7 @@ This internal event bus might eventually be rolled into regular events that we t
|
|
1339
1349
|
|
1340
1350
|
\#\#\# `fragment:inserted` event
|
1341
1351
|
|
1342
|
-
This event is triggered after Up.js has inserted an HTML fragment into the DOM through mechanisms like [`[up-target]`](/up
|
1352
|
+
This event is triggered after Up.js has inserted an HTML fragment into the DOM through mechanisms like [`[up-target]`](/a-up-target) or [`up.replace`](/up.replace):
|
1343
1353
|
|
1344
1354
|
up.on('up:fragment:inserted', function($fragment) {
|
1345
1355
|
console.log("Looks like we have a new %o!", $fragment);
|
@@ -1352,7 +1362,7 @@ Upon receiving the event, Up.js will start compilation.
|
|
1352
1362
|
\#\#\# `fragment:destroyed` event
|
1353
1363
|
|
1354
1364
|
This event is triggered when Up.js is destroying an HTML fragment, e.g. because it's being replaced
|
1355
|
-
with a new version or because someone explicitly called [`up.destroy`](/up.
|
1365
|
+
with a new version or because someone explicitly called [`up.destroy`](/up.destroy):
|
1356
1366
|
|
1357
1367
|
up.on('up:fragment:destroyed', function($fragment) {
|
1358
1368
|
console.log("Looks like we lost %o!", $fragment);
|
@@ -1382,11 +1392,27 @@ We need to work on this page:
|
|
1382
1392
|
u = up.util;
|
1383
1393
|
|
1384
1394
|
/**
|
1385
|
-
|
1395
|
+
Emits an event with the given name and properties.
|
1396
|
+
|
1397
|
+
\#\#\#\# Example
|
1398
|
+
|
1399
|
+
up.on('my:event', function(event) {
|
1400
|
+
console.log(event.foo);
|
1401
|
+
});
|
1402
|
+
|
1403
|
+
up.emit('my:event', { foo: 'bar' });
|
1404
|
+
* Prints "bar" to the console
|
1405
|
+
|
1406
|
+
@method up.emit
|
1386
1407
|
@param {String} eventName
|
1387
1408
|
The name of the event.
|
1388
|
-
@param
|
1389
|
-
|
1409
|
+
@param {Object} [eventProps={}]
|
1410
|
+
A list of properties to become part of the event object
|
1411
|
+
that will be passed to listeners. Note that the event object
|
1412
|
+
will by default include properties like `preventDefault()`
|
1413
|
+
or `stopPropagation()`.
|
1414
|
+
@param {jQuery} [eventProps.$element=$(document)]
|
1415
|
+
The element on which the event is trigered.
|
1390
1416
|
@protected
|
1391
1417
|
*/
|
1392
1418
|
emit = function(eventName, eventProps) {
|
@@ -1402,10 +1428,11 @@ We need to work on this page:
|
|
1402
1428
|
};
|
1403
1429
|
|
1404
1430
|
/**
|
1405
|
-
Emits an event
|
1406
|
-
Returns whether any event listener has prevented the default action.
|
1431
|
+
[Emits an event](/up.emit) and returns whether any listener has prevented the default action.
|
1407
1432
|
|
1408
1433
|
@method up.bus.nobodyPrevents
|
1434
|
+
@param {String} eventName
|
1435
|
+
@param {Object} eventProps
|
1409
1436
|
@protected
|
1410
1437
|
*/
|
1411
1438
|
nobodyPrevents = function() {
|
@@ -1427,7 +1454,7 @@ We need to work on this page:
|
|
1427
1454
|
@method up.reset
|
1428
1455
|
*/
|
1429
1456
|
reset = function() {
|
1430
|
-
return up.
|
1457
|
+
return up.emit('up:framework:reset');
|
1431
1458
|
};
|
1432
1459
|
return {
|
1433
1460
|
emit: emit,
|
@@ -1438,6 +1465,8 @@ We need to work on this page:
|
|
1438
1465
|
|
1439
1466
|
up.reset = up.bus.reset;
|
1440
1467
|
|
1468
|
+
up.emit = up.bus.emit;
|
1469
|
+
|
1441
1470
|
}).call(this);
|
1442
1471
|
|
1443
1472
|
/**
|
@@ -1465,16 +1494,39 @@ We need to work on this page:
|
|
1465
1494
|
u = up.util;
|
1466
1495
|
DESTROYABLE_CLASS = 'up-destroyable';
|
1467
1496
|
DESTROYER_KEY = 'up-destroyer';
|
1497
|
+
liveDescriptions = [];
|
1498
|
+
defaultLiveDescriptions = null;
|
1499
|
+
|
1500
|
+
/**
|
1501
|
+
* Convert an Up.js style listener (second argument is the event target
|
1502
|
+
* as a jQuery collection) to a vanilla jQuery listener
|
1503
|
+
*/
|
1504
|
+
upListenerToJqueryListener = function(upListener) {
|
1505
|
+
return function(event) {
|
1506
|
+
var $me;
|
1507
|
+
$me = event.$element || $(this);
|
1508
|
+
return upListener.apply($me.get(0), [event, $me, data($me)]);
|
1509
|
+
};
|
1510
|
+
};
|
1468
1511
|
|
1469
1512
|
/**
|
1470
|
-
|
1471
|
-
|
1513
|
+
Listens to an event on `document`.
|
1514
|
+
|
1515
|
+
The given event listener which will be executed whenever the
|
1516
|
+
given event is [triggered](/up.emit) on the given selector:
|
1472
1517
|
|
1473
1518
|
up.on('click', '.button', function(event, $element) {
|
1474
1519
|
console.log("Someone clicked the button %o", $element);
|
1475
1520
|
});
|
1476
1521
|
|
1477
|
-
This is roughly equivalent to binding
|
1522
|
+
This is roughly equivalent to binding an event listener to `document`:
|
1523
|
+
|
1524
|
+
$(document).on('click', '.button', function(event) {
|
1525
|
+
console.log("Someone clicked the button %o", $(this));
|
1526
|
+
});
|
1527
|
+
|
1528
|
+
Other than jQuery, Up.js will silently discard event listeners
|
1529
|
+
on [browsers that it doesn't support](/up.browser.isSupported).
|
1478
1530
|
|
1479
1531
|
|
1480
1532
|
\#\#\#\# Attaching structured data
|
@@ -1526,20 +1578,6 @@ We need to work on this page:
|
|
1526
1578
|
@return {Function}
|
1527
1579
|
A function that unbinds the event listeners when called.
|
1528
1580
|
*/
|
1529
|
-
liveDescriptions = [];
|
1530
|
-
defaultLiveDescriptions = null;
|
1531
|
-
|
1532
|
-
/**
|
1533
|
-
* Convert an Up.js style listener (second argument is the event target
|
1534
|
-
* as a jQuery collection) to a vanilla jQuery listener
|
1535
|
-
*/
|
1536
|
-
upListenerToJqueryListener = function(upListener) {
|
1537
|
-
return function(event) {
|
1538
|
-
var $me;
|
1539
|
-
$me = event.$element || $(this);
|
1540
|
-
return upListener.apply($me.get(0), [event, $me, data($me)]);
|
1541
|
-
};
|
1542
|
-
};
|
1543
1581
|
live = function() {
|
1544
1582
|
var $document, args, behavior, description, lastIndex;
|
1545
1583
|
args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
|
@@ -1560,9 +1598,22 @@ We need to work on this page:
|
|
1560
1598
|
|
1561
1599
|
/**
|
1562
1600
|
Registers a function to be called whenever an element with
|
1563
|
-
the given selector is inserted into the DOM
|
1601
|
+
the given selector is inserted into the DOM.
|
1602
|
+
|
1603
|
+
$('.action').compiler(function($element) {
|
1604
|
+
// your code here
|
1605
|
+
});
|
1606
|
+
|
1607
|
+
Compiler functions will be called on matching elements when
|
1608
|
+
the page loads, or whenever a matching fragment is [updated through Up.js](/up.replace)
|
1609
|
+
later.
|
1564
1610
|
|
1565
|
-
|
1611
|
+
If you have used Angular.js before, this resembles [Angular directives](https://docs.angularjs.org/guide/directive).
|
1612
|
+
|
1613
|
+
|
1614
|
+
\#\#\#\# Integrating jQuery plugins
|
1615
|
+
|
1616
|
+
`up.compiler` is a great way to integrate jQuery plugins.
|
1566
1617
|
Let's say your Javascript plugin wants you to call `lightboxify()`
|
1567
1618
|
on links that should open a lightbox. You decide to
|
1568
1619
|
do this for all links with an `[rel=lightbox]` attribute:
|
@@ -1576,14 +1627,10 @@ We need to work on this page:
|
|
1576
1627
|
$element.lightboxify();
|
1577
1628
|
});
|
1578
1629
|
|
1579
|
-
Note that within the compiler, Up.js will bind `this` to the
|
1580
|
-
native DOM element to help you migrate your existing jQuery code to
|
1581
|
-
this new syntax.
|
1582
|
-
|
1583
1630
|
|
1584
1631
|
\#\#\#\# Custom elements
|
1585
1632
|
|
1586
|
-
You can
|
1633
|
+
You can use `up.compiler` to implement custom elements like this:
|
1587
1634
|
|
1588
1635
|
<clock></clock>
|
1589
1636
|
|
@@ -1659,12 +1706,28 @@ We need to work on this page:
|
|
1659
1706
|
});
|
1660
1707
|
|
1661
1708
|
|
1662
|
-
\#\#\#\# Migrating jQuery event handlers to `up.
|
1709
|
+
\#\#\#\# Migrating jQuery event handlers to `up.compiler`
|
1663
1710
|
|
1664
1711
|
Within the compiler, Up.js will bind `this` to the
|
1665
1712
|
native DOM element to help you migrate your existing jQuery code to
|
1666
1713
|
this new syntax.
|
1667
1714
|
|
1715
|
+
So if you had this before:
|
1716
|
+
|
1717
|
+
$(function() {
|
1718
|
+
$('.action').on('click', function() {
|
1719
|
+
$(this).something();
|
1720
|
+
});
|
1721
|
+
});
|
1722
|
+
|
1723
|
+
... you can reuse the event handler like this:
|
1724
|
+
|
1725
|
+
$('.action').compiler(function($element) {
|
1726
|
+
$element.on('click', function() {
|
1727
|
+
$(this).something();
|
1728
|
+
});
|
1729
|
+
});
|
1730
|
+
|
1668
1731
|
|
1669
1732
|
@method up.compiler
|
1670
1733
|
@param {String} selector
|
@@ -1683,7 +1746,7 @@ We need to work on this page:
|
|
1683
1746
|
object before it is removed from the DOM. The destructor is supposed to
|
1684
1747
|
clear global state such as time-outs and event handlers bound to the document.
|
1685
1748
|
The destructor is *not* expected to remove the element from the DOM, which
|
1686
|
-
is already handled by [`up.destroy`](/up.
|
1749
|
+
is already handled by [`up.destroy`](/up.destroy).
|
1687
1750
|
*/
|
1688
1751
|
compilers = [];
|
1689
1752
|
defaultCompilers = null;
|
@@ -1761,11 +1824,11 @@ We need to work on this page:
|
|
1761
1824
|
|
1762
1825
|
If an element annotated with [`up-data`] is inserted into the DOM,
|
1763
1826
|
Up will parse the JSON and pass the resulting object to any matching
|
1764
|
-
[`up.compiler`](/up.magic
|
1827
|
+
[`up.compiler`](/up.magic.compiler) handlers.
|
1765
1828
|
|
1766
1829
|
Similarly, when an event is triggered on an element annotated with
|
1767
1830
|
[`up-data`], the parsed object will be passed to any matching
|
1768
|
-
[`up.on`](/up.
|
1831
|
+
[`up.on`](/up.on) handlers.
|
1769
1832
|
|
1770
1833
|
@ujs
|
1771
1834
|
@method [up-data]
|
@@ -1784,7 +1847,7 @@ We need to work on this page:
|
|
1784
1847
|
|
1785
1848
|
/**
|
1786
1849
|
Makes a snapshot of the currently registered event listeners,
|
1787
|
-
to later be restored through [`up.bus.reset`](/up.bus
|
1850
|
+
to later be restored through [`up.bus.reset`](/up.bus.reset).
|
1788
1851
|
|
1789
1852
|
@private
|
1790
1853
|
@method up.magic.snapshot
|
@@ -1818,9 +1881,14 @@ We need to work on this page:
|
|
1818
1881
|
into the DOM. This causes Up.js to compile the fragment (apply
|
1819
1882
|
event listeners, etc.).
|
1820
1883
|
|
1821
|
-
|
1822
|
-
|
1823
|
-
|
1884
|
+
**As long as you manipulate the DOM using Up.js, you will never
|
1885
|
+
need to call this method.** You only need to use `up.hello` if the
|
1886
|
+
DOM is manipulated without Up.js' involvement, e.g. by plugin code that
|
1887
|
+
is not aware of Up.js:
|
1888
|
+
|
1889
|
+
// Add an element with naked jQuery, without going through Upjs:
|
1890
|
+
$element = $('<div>...</div>').appendTo(document.body);
|
1891
|
+
up.hello($element);
|
1824
1892
|
|
1825
1893
|
@method up.hello
|
1826
1894
|
@param {String|Element|jQuery} selectorOrElement
|
@@ -1828,7 +1896,7 @@ We need to work on this page:
|
|
1828
1896
|
hello = function(selectorOrElement) {
|
1829
1897
|
var $element;
|
1830
1898
|
$element = $(selectorOrElement);
|
1831
|
-
up.
|
1899
|
+
up.emit('up:fragment:inserted', {
|
1832
1900
|
$element: $element
|
1833
1901
|
});
|
1834
1902
|
return $element;
|
@@ -1915,8 +1983,8 @@ We need to work on this page:
|
|
1915
1983
|
Returns the previous URL in the browser history.
|
1916
1984
|
|
1917
1985
|
Note that this will only work reliably for history changes that
|
1918
|
-
were applied by [`up.history.push`](
|
1919
|
-
[`up.history.replace`](
|
1986
|
+
were applied by [`up.history.push`](/up.history.replace) or
|
1987
|
+
[`up.history.replace`](/up.history.replace).
|
1920
1988
|
|
1921
1989
|
@method up.history.previousUrl
|
1922
1990
|
@protected
|
@@ -2087,7 +2155,7 @@ We need to work on this page:
|
|
2087
2155
|
}).call(this);
|
2088
2156
|
|
2089
2157
|
/**
|
2090
|
-
|
2158
|
+
Application layout
|
2091
2159
|
==================
|
2092
2160
|
|
2093
2161
|
This modules contains functions to scroll the viewport and reveal contained elements.
|
@@ -2127,10 +2195,10 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2127
2195
|
See [W3C documentation](http://www.w3.org/TR/css3-transitions/#transition-timing-function)
|
2128
2196
|
for a list of pre-defined timing functions.
|
2129
2197
|
@param {Number} [config.snap]
|
2130
|
-
When [revealing](
|
2198
|
+
When [revealing](/up.reveal) elements, Up.js will scroll an viewport
|
2131
2199
|
to the top when the revealed element is closer to the top than `config.snap`.
|
2132
2200
|
@param {Number} [config.substance]
|
2133
|
-
A number indicating how many top pixel rows of an element to [reveal](
|
2201
|
+
A number indicating how many top pixel rows of an element to [reveal](/up.reveal).
|
2134
2202
|
*/
|
2135
2203
|
config = u.config({
|
2136
2204
|
duration: 0,
|
@@ -2225,7 +2293,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2225
2293
|
};
|
2226
2294
|
|
2227
2295
|
/**
|
2228
|
-
@method up.
|
2296
|
+
@method up.layout.finishScrolling
|
2229
2297
|
@private
|
2230
2298
|
*/
|
2231
2299
|
finishScrolling = function(elementOrSelector) {
|
@@ -2238,7 +2306,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2238
2306
|
};
|
2239
2307
|
|
2240
2308
|
/**
|
2241
|
-
@method up.
|
2309
|
+
@method up.layout.anchoredRight
|
2242
2310
|
@private
|
2243
2311
|
*/
|
2244
2312
|
anchoredRight = function() {
|
@@ -2286,8 +2354,8 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2286
2354
|
element are visible for the user.
|
2287
2355
|
|
2288
2356
|
By default Up.js will always reveal an element before
|
2289
|
-
updating it with Javascript functions like [`up.replace`](/up.
|
2290
|
-
or UJS behavior like [`[up-target]`](/up
|
2357
|
+
updating it with Javascript functions like [`up.replace`](/up.replace)
|
2358
|
+
or UJS behavior like [`[up-target]`](/up-target).
|
2291
2359
|
|
2292
2360
|
\#\#\#\# How Up.js finds the viewport
|
2293
2361
|
|
@@ -2297,7 +2365,7 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2297
2365
|
- the currently open [modal](/up.modal)
|
2298
2366
|
- an element with the attribute `[up-viewport]`
|
2299
2367
|
- the `<body>` element
|
2300
|
-
- an element matching the selector you have configured using `up.
|
2368
|
+
- an element matching the selector you have configured using `up.layout.config.viewports.push('my-custom-selector')`
|
2301
2369
|
|
2302
2370
|
\#\#\#\# Fixed elements obstruction the viewport
|
2303
2371
|
|
@@ -2306,8 +2374,8 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2306
2374
|
|
2307
2375
|
To make `up.aware` of these fixed elements you can either:
|
2308
2376
|
|
2309
|
-
- give the element an attribute [`up-fixed="top"`](
|
2310
|
-
- [configure default options](
|
2377
|
+
- give the element an attribute [`up-fixed="top"`](/up-fixed-top) or [`up-fixed="bottom"`](up-fixed-bottom)
|
2378
|
+
- [configure default options](/up.layout.config) for `fixedTop` or `fixedBottom`
|
2311
2379
|
|
2312
2380
|
@method up.reveal
|
2313
2381
|
@param {String|Element|jQuery} element
|
@@ -2470,9 +2538,13 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2470
2538
|
|
2471
2539
|
/**
|
2472
2540
|
Saves the top scroll positions of all the
|
2473
|
-
viewports configured in [`up.layout.config.viewports`](
|
2474
|
-
|
2475
|
-
|
2541
|
+
viewports configured in [`up.layout.config.viewports`](/up.layout.config).
|
2542
|
+
|
2543
|
+
The scroll positions will be associated with the current URL.
|
2544
|
+
They can later be restored by calling [`up.layout.restoreScroll()`](/up.layout.restoreScroll)
|
2545
|
+
at the same URL.
|
2546
|
+
|
2547
|
+
Up.js automatically saves scroll positions whenever a fragment was updated on the page.
|
2476
2548
|
|
2477
2549
|
@method up.layout.saveScroll
|
2478
2550
|
@param {String} [options.url]
|
@@ -2491,8 +2563,11 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2491
2563
|
};
|
2492
2564
|
|
2493
2565
|
/**
|
2494
|
-
Restores
|
2495
|
-
viewports configured in [`up.layout.config.viewports`](
|
2566
|
+
Restores [previously saved](/up.layout.saveScroll) scroll positions of viewports
|
2567
|
+
viewports configured in [`up.layout.config.viewports`](/up.layout.config).
|
2568
|
+
|
2569
|
+
Up.js automatically restores scroll positions when the user presses the back button.
|
2570
|
+
You can disable this behavior by setting [`up.history.config.restoreScroll = false`](/up.history.config).
|
2496
2571
|
|
2497
2572
|
@method up.layout.restoreScroll
|
2498
2573
|
@param {jQuery} [options.around]
|
@@ -2547,8 +2622,11 @@ This modules contains functions to scroll the viewport and reveal contained elem
|
|
2547
2622
|
};
|
2548
2623
|
|
2549
2624
|
/**
|
2550
|
-
Marks this element as a scrolling container.
|
2551
|
-
|
2625
|
+
Marks this element as a scrolling container ("viewport").
|
2626
|
+
|
2627
|
+
Apply this attribute if your app uses a custom panel layout with fixed positioning
|
2628
|
+
instead of scrolling `<body>`. As an alternative you can also push a selector
|
2629
|
+
matching your custom viewport to the [`up.layout.config.viewports`](/up.layout.config) array.
|
2552
2630
|
|
2553
2631
|
[`up.reveal`](/up.reveal) will always try to scroll the viewport closest
|
2554
2632
|
to the element that is being revealed. By default this is the `<body>` element.
|
@@ -2683,9 +2761,9 @@ We need to work on this page:
|
|
2683
2761
|
}
|
2684
2762
|
return $element.attr("up-source", sourceUrl);
|
2685
2763
|
};
|
2686
|
-
source = function(
|
2764
|
+
source = function(selectorOrElement) {
|
2687
2765
|
var $element;
|
2688
|
-
$element = $(
|
2766
|
+
$element = $(selectorOrElement).closest('[up-source]');
|
2689
2767
|
return u.presence($element.attr("up-source")) || up.browser.url();
|
2690
2768
|
};
|
2691
2769
|
|
@@ -2695,6 +2773,31 @@ We need to work on this page:
|
|
2695
2773
|
|
2696
2774
|
The current and new elements must have the same CSS selector.
|
2697
2775
|
|
2776
|
+
\#\#\#\# Example
|
2777
|
+
|
2778
|
+
Let's say your curent HTML looks like this:
|
2779
|
+
|
2780
|
+
<div class="one">old one</div>
|
2781
|
+
<div class="two">old two</div>
|
2782
|
+
|
2783
|
+
We now replace the second `<div>`:
|
2784
|
+
|
2785
|
+
up.replace('.two', '/new');
|
2786
|
+
|
2787
|
+
The server renders a response for `/new`:
|
2788
|
+
|
2789
|
+
<div class="one">new one</div>
|
2790
|
+
<div class="two">new two</div>
|
2791
|
+
|
2792
|
+
Up.js looks for the selector `.two` in the response and [implants](/up.implant) it into
|
2793
|
+
the current page. The current page now looks like this:
|
2794
|
+
|
2795
|
+
<div class="one">old one</div>
|
2796
|
+
<div class="two">new two</div>
|
2797
|
+
|
2798
|
+
Note how only `.two` has changed. The update for `.one` was
|
2799
|
+
discarded, since it didn't match the selector.
|
2800
|
+
|
2698
2801
|
@method up.replace
|
2699
2802
|
@param {String|Element|jQuery} selectorOrElement
|
2700
2803
|
The CSS selector to update. You can also pass a DOM element or jQuery element
|
@@ -2710,9 +2813,9 @@ We need to work on this page:
|
|
2710
2813
|
If set to `false`, the history will remain unchanged.
|
2711
2814
|
@param {String|Boolean} [options.source=true]
|
2712
2815
|
@param {String} [options.reveal=false]
|
2713
|
-
Whether to [reveal](/up.
|
2816
|
+
Whether to [reveal](/up.reveal) the element being updated, by
|
2714
2817
|
scrolling its containing viewport.
|
2715
|
-
@param {Boolean} [options.restoreScroll
|
2818
|
+
@param {Boolean} [options.restoreScroll=false]
|
2716
2819
|
If set to true, Up.js will try to restore the scroll position
|
2717
2820
|
of all the viewports around or below the updated element. The position
|
2718
2821
|
will be reset to the last known top position before a previous
|
@@ -2772,20 +2875,36 @@ We need to work on this page:
|
|
2772
2875
|
Updates a selector on the current page with the
|
2773
2876
|
same selector from the given HTML string.
|
2774
2877
|
|
2775
|
-
Example
|
2878
|
+
\#\#\#\# Example
|
2879
|
+
|
2880
|
+
Let's say your curent HTML looks like this:
|
2776
2881
|
|
2777
|
-
|
2778
|
-
|
2779
|
-
'<div class="after">new-after</div>';
|
2882
|
+
<div class="one">old one</div>
|
2883
|
+
<div class="two">old two</div>
|
2780
2884
|
|
2781
|
-
|
2885
|
+
We now replace the second `<div>`, using an HTML string
|
2886
|
+
as the source:
|
2887
|
+
|
2888
|
+
html = '<div class="one">new one</div>' +
|
2889
|
+
'<div class="two">new two</div>';
|
2890
|
+
|
2891
|
+
up.flow.implant('.two', html);
|
2892
|
+
|
2893
|
+
Up.js looks for the selector `.two` in the strings and updates its
|
2894
|
+
contents in the current page. The current page now looks like this:
|
2895
|
+
|
2896
|
+
<div class="one">old one</div>
|
2897
|
+
<div class="two">new two</div>
|
2898
|
+
|
2899
|
+
Note how only `.two` has changed. The update for `.one` was
|
2900
|
+
discarded, since it didn't match the selector.
|
2782
2901
|
|
2783
2902
|
@method up.flow.implant
|
2784
2903
|
@protected
|
2785
2904
|
@param {String} selector
|
2786
2905
|
@param {String} html
|
2787
2906
|
@param {Object} [options]
|
2788
|
-
See options for [`up.replace`](
|
2907
|
+
See options for [`up.replace`](/up.replace).
|
2789
2908
|
*/
|
2790
2909
|
implant = function(selector, html, options) {
|
2791
2910
|
var $new, $old, j, len, ref, response, results, step;
|
@@ -2918,10 +3037,11 @@ We need to work on this page:
|
|
2918
3037
|
|
2919
3038
|
/**
|
2920
3039
|
Returns the first element matching the given selector.
|
3040
|
+
|
2921
3041
|
Excludes elements that also match `.up-ghost` or `.up-destroying`
|
2922
3042
|
or that are children of elements with these selectors.
|
2923
3043
|
|
2924
|
-
Returns `
|
3044
|
+
Returns `undefined` if no element matches these conditions.
|
2925
3045
|
|
2926
3046
|
@protected
|
2927
3047
|
@method up.first
|
@@ -2930,7 +3050,7 @@ We need to work on this page:
|
|
2930
3050
|
first = function(selector) {
|
2931
3051
|
var $element, $match, element, elements, j, len;
|
2932
3052
|
elements = $(selector).get();
|
2933
|
-
$match =
|
3053
|
+
$match = void 0;
|
2934
3054
|
for (j = 0, len = elements.length; j < len; j++) {
|
2935
3055
|
element = elements[j];
|
2936
3056
|
$element = $(element);
|
@@ -2944,23 +3064,27 @@ We need to work on this page:
|
|
2944
3064
|
|
2945
3065
|
/**
|
2946
3066
|
Destroys the given element or selector.
|
2947
|
-
|
3067
|
+
|
3068
|
+
Takes care that all [`up.compiler`](/up.compiler) destructors, if any, are called.
|
3069
|
+
|
2948
3070
|
The element is removed from the DOM.
|
3071
|
+
Note that if you choose to animate the element removal using `options.animate`,
|
3072
|
+
the element won't be removed until after the animation has completed.
|
2949
3073
|
|
2950
3074
|
@method up.destroy
|
2951
3075
|
@param {String|Element|jQuery} selectorOrElement
|
2952
3076
|
@param {String} [options.url]
|
2953
3077
|
@param {String} [options.title]
|
2954
|
-
@param {String} [options.animation='none']
|
3078
|
+
@param {String|Function} [options.animation='none']
|
2955
3079
|
The animation to use before the element is removed from the DOM.
|
2956
3080
|
@param {Number} [options.duration]
|
2957
|
-
The duration of the animation. See [`up.animate`](/up.
|
3081
|
+
The duration of the animation. See [`up.animate`](/up.animate).
|
2958
3082
|
@param {Number} [options.delay]
|
2959
|
-
The delay before the animation starts. See [`up.animate`](/up.
|
3083
|
+
The delay before the animation starts. See [`up.animate`](/up.animate).
|
2960
3084
|
@param {String} [options.easing]
|
2961
|
-
The timing function that controls the animation's acceleration. [`up.animate`](/up.
|
3085
|
+
The timing function that controls the animation's acceleration. [`up.animate`](/up.animate).
|
2962
3086
|
@return {Deferred}
|
2963
|
-
A promise
|
3087
|
+
A promise that will be resolved once the element has been removed from the DOM.
|
2964
3088
|
*/
|
2965
3089
|
destroy = function(selectorOrElement, options) {
|
2966
3090
|
var $element, animateOptions, animationDeferred;
|
@@ -2981,7 +3105,7 @@ We need to work on this page:
|
|
2981
3105
|
}
|
2982
3106
|
animationDeferred = u.presence(options.animation, u.isDeferred) || up.motion.animate($element, options.animation, animateOptions);
|
2983
3107
|
animationDeferred.then(function() {
|
2984
|
-
up.
|
3108
|
+
up.emit('up:fragment:destroyed', {
|
2985
3109
|
$element: $element
|
2986
3110
|
});
|
2987
3111
|
return $element.remove();
|
@@ -2993,8 +3117,13 @@ We need to work on this page:
|
|
2993
3117
|
};
|
2994
3118
|
|
2995
3119
|
/**
|
2996
|
-
Replaces the given
|
2997
|
-
|
3120
|
+
Replaces the given element with a fresh copy fetched from the server.
|
3121
|
+
|
3122
|
+
\#\#\#\# Example
|
3123
|
+
|
3124
|
+
up.on('new-mail', function() {
|
3125
|
+
up.reload('.inbox');
|
3126
|
+
});
|
2998
3127
|
|
2999
3128
|
Up.js remembers the URL from which a fragment was loaded, so you
|
3000
3129
|
don't usually need to give an URL when reloading.
|
@@ -3002,7 +3131,10 @@ We need to work on this page:
|
|
3002
3131
|
@method up.reload
|
3003
3132
|
@param {String|Element|jQuery} selectorOrElement
|
3004
3133
|
@param {Object} [options]
|
3005
|
-
See options for [`up.replace`](
|
3134
|
+
See options for [`up.replace`](/up.replace)
|
3135
|
+
@param {String} [options.url]
|
3136
|
+
The URL from which to reload the fragment.
|
3137
|
+
This defaults to the URL from which the fragment was originally loaded.
|
3006
3138
|
*/
|
3007
3139
|
reload = function(selectorOrElement, options) {
|
3008
3140
|
var sourceUrl;
|
@@ -3120,7 +3252,7 @@ We need to work on this page:
|
|
3120
3252
|
| `move-from-right` | Moves the element leftwards from beyond the right edge of the screen until it reaches its current position |
|
3121
3253
|
| `none` | An animation that has no visible effect. Sounds useless at first, but can save you a lot of `if` statements. |
|
3122
3254
|
|
3123
|
-
You can define additional named animations using [`up.animation`](
|
3255
|
+
You can define additional named animations using [`up.animation`](/up.animation).
|
3124
3256
|
|
3125
3257
|
\#\#\#\# Animating CSS properties directly
|
3126
3258
|
|
@@ -3293,9 +3425,9 @@ We need to work on this page:
|
|
3293
3425
|
| `move-right` | Moves the first element rightwards until it exists the screen at the right edge. Simultaneously moves the second element rightwards from beyond the left edge of the screen until it reaches its current position. |
|
3294
3426
|
| `none` | A transition that has no visible effect. Sounds useless at first, but can save you a lot of `if` statements. |
|
3295
3427
|
|
3296
|
-
You can define additional named transitions using [`up.transition`](
|
3428
|
+
You can define additional named transitions using [`up.transition`](/up.transition).
|
3297
3429
|
|
3298
|
-
You can also compose a transition from two [named animations](
|
3430
|
+
You can also compose a transition from two [named animations](/named-animations).
|
3299
3431
|
separated by a slash character (`/`):
|
3300
3432
|
|
3301
3433
|
- `move-to-bottom/fade-in`
|
@@ -3427,7 +3559,7 @@ We need to work on this page:
|
|
3427
3559
|
)
|
3428
3560
|
)
|
3429
3561
|
|
3430
|
-
It is recommended that your transitions use [`up.animate`](
|
3562
|
+
It is recommended that your transitions use [`up.animate`](/up.animate),
|
3431
3563
|
passing along the `options` that were passed to you.
|
3432
3564
|
|
3433
3565
|
If you choose to *not* use `up.animate` and roll your own
|
@@ -3439,7 +3571,7 @@ We need to work on this page:
|
|
3439
3571
|
4. The returned promise responds to a `resolve()` function that
|
3440
3572
|
instantly jumps to the last transition frame and resolves the promise.
|
3441
3573
|
|
3442
|
-
Calling [`up.animate`](
|
3574
|
+
Calling [`up.animate`](/up.animate) with an object argument
|
3443
3575
|
will take care of all these points.
|
3444
3576
|
|
3445
3577
|
@method up.transition
|
@@ -3461,7 +3593,7 @@ We need to work on this page:
|
|
3461
3593
|
)
|
3462
3594
|
|
3463
3595
|
It is recommended that your definitions always end by calling
|
3464
|
-
calling [`up.animate`](
|
3596
|
+
calling [`up.animate`](/up.animate) with an object argument, passing along
|
3465
3597
|
the `options` that were passed to you.
|
3466
3598
|
|
3467
3599
|
If you choose to *not* use `up.animate` and roll your own
|
@@ -3473,7 +3605,7 @@ We need to work on this page:
|
|
3473
3605
|
4. The returned promise responds to a `resolve()` function that
|
3474
3606
|
instantly jumps to the last animation frame and resolves the promise.
|
3475
3607
|
|
3476
|
-
Calling [`up.animate`](
|
3608
|
+
Calling [`up.animate`](/up.animate) with an object argument
|
3477
3609
|
will take care of all these points.
|
3478
3610
|
|
3479
3611
|
@method up.animation
|
@@ -3675,8 +3807,8 @@ Caching and preloading
|
|
3675
3807
|
======================
|
3676
3808
|
|
3677
3809
|
All HTTP requests go through the Up.js proxy.
|
3678
|
-
It caches a [limited](/up.proxy
|
3679
|
-
for a [limited](/up.proxy
|
3810
|
+
It caches a [limited](/up.proxy.config) number of server responses
|
3811
|
+
for a [limited](/up.proxy.config) amount of time,
|
3680
3812
|
making requests to these URLs return insantly.
|
3681
3813
|
|
3682
3814
|
The cache is cleared whenever the user makes a non-`GET` request
|
@@ -3736,7 +3868,7 @@ You can change (or remove) this delay like this:
|
|
3736
3868
|
@method up.proxy.config
|
3737
3869
|
@property
|
3738
3870
|
@param {Number} [config.preloadDelay=75]
|
3739
|
-
The number of milliseconds to wait before [`[up-preload]`](
|
3871
|
+
The number of milliseconds to wait before [`[up-preload]`](/up-preload)
|
3740
3872
|
starts preloading.
|
3741
3873
|
@param {Number} [config.cacheSize=70]
|
3742
3874
|
The maximum number of responses to cache.
|
@@ -3905,7 +4037,7 @@ You can change (or remove) this delay like this:
|
|
3905
4037
|
if (wasIdle) {
|
3906
4038
|
emission = function() {
|
3907
4039
|
if (busy()) {
|
3908
|
-
up.
|
4040
|
+
up.emit('up:proxy:busy');
|
3909
4041
|
return busyEventEmitted = true;
|
3910
4042
|
}
|
3911
4043
|
};
|
@@ -3919,17 +4051,17 @@ You can change (or remove) this delay like this:
|
|
3919
4051
|
loadEnded = function() {
|
3920
4052
|
pendingCount -= 1;
|
3921
4053
|
if (idle() && busyEventEmitted) {
|
3922
|
-
up.
|
4054
|
+
up.emit('up:proxy:idle');
|
3923
4055
|
return busyEventEmitted = false;
|
3924
4056
|
}
|
3925
4057
|
};
|
3926
4058
|
load = function(request) {
|
3927
4059
|
var promise;
|
3928
4060
|
u.debug('Loading URL %o', request.url);
|
3929
|
-
up.
|
4061
|
+
up.emit('up:proxy:load', request);
|
3930
4062
|
promise = u.ajax(request);
|
3931
4063
|
promise.always(function() {
|
3932
|
-
return up.
|
4064
|
+
return up.emit('up:proxy:receive', request);
|
3933
4065
|
});
|
3934
4066
|
return promise;
|
3935
4067
|
};
|
@@ -4119,7 +4251,7 @@ Read on
|
|
4119
4251
|
@param {String} [options.target='body']
|
4120
4252
|
The selector to replace.
|
4121
4253
|
@param {Object} options
|
4122
|
-
See options for [`up.replace`](/up.
|
4254
|
+
See options for [`up.replace`](/up.replace)
|
4123
4255
|
*/
|
4124
4256
|
visit = function(url, options) {
|
4125
4257
|
var selector;
|
@@ -4129,7 +4261,7 @@ Read on
|
|
4129
4261
|
};
|
4130
4262
|
|
4131
4263
|
/**
|
4132
|
-
Follows the given link via AJAX and replaces a CSS selector in the current page
|
4264
|
+
Follows the given link via AJAX and [replaces](/up.replace) a CSS selector in the current page
|
4133
4265
|
with corresponding elements from a new page fetched from the server.
|
4134
4266
|
|
4135
4267
|
Any Up.js UJS attributes on the given link will be honored. E. g. you have this link:
|
@@ -4142,7 +4274,7 @@ Read on
|
|
4142
4274
|
up.follow($link);
|
4143
4275
|
|
4144
4276
|
@method up.follow
|
4145
|
-
@param {Element|jQuery|String}
|
4277
|
+
@param {Element|jQuery|String} linkOrSelector
|
4146
4278
|
An element or selector which resolves to an `<a>` tag
|
4147
4279
|
or any element that is marked up with an `up-href` attribute.
|
4148
4280
|
@param {String} [options.target]
|
@@ -4152,24 +4284,24 @@ Read on
|
|
4152
4284
|
@param {Function|String} [options.transition]
|
4153
4285
|
A transition function or name.
|
4154
4286
|
@param {Number} [options.duration]
|
4155
|
-
The duration of the transition. See [`up.morph`](/up.
|
4287
|
+
The duration of the transition. See [`up.morph`](/up.morph).
|
4156
4288
|
@param {Number} [options.delay]
|
4157
|
-
The delay before the transition starts. See [`up.morph`](/up.
|
4289
|
+
The delay before the transition starts. See [`up.morph`](/up.morph).
|
4158
4290
|
@param {String} [options.easing]
|
4159
|
-
The timing function that controls the transition's acceleration. [`up.morph`](/up.
|
4291
|
+
The timing function that controls the transition's acceleration. [`up.morph`](/up.morph).
|
4160
4292
|
@param {Element|jQuery|String} [options.reveal]
|
4161
4293
|
Whether to reveal the target element within its viewport before updating.
|
4162
4294
|
@param {Boolean} [options.restoreScroll]
|
4163
|
-
If set to `true`, this will attempt to [`restore scroll positions`](/up.
|
4295
|
+
If set to `true`, this will attempt to [`restore scroll positions`](/up.restoreScroll)
|
4164
4296
|
previously seen on the destination URL.
|
4165
4297
|
@param {Boolean} [options.cache]
|
4166
4298
|
Whether to force the use of a cached response (`true`)
|
4167
4299
|
or never use the cache (`false`)
|
4168
4300
|
or make an educated guess (`undefined`).
|
4169
4301
|
*/
|
4170
|
-
follow = function(
|
4302
|
+
follow = function(linkOrSelector, options) {
|
4171
4303
|
var $link, selector, url;
|
4172
|
-
$link = $(
|
4304
|
+
$link = $(linkOrSelector);
|
4173
4305
|
options = u.options(options);
|
4174
4306
|
url = u.option($link.attr('up-href'), $link.attr('href'));
|
4175
4307
|
selector = u.option(options.target, $link.attr('up-target'), 'body');
|
@@ -4184,10 +4316,19 @@ Read on
|
|
4184
4316
|
};
|
4185
4317
|
|
4186
4318
|
/**
|
4319
|
+
Returns the HTTP method that should be used when following the given link.
|
4320
|
+
|
4321
|
+
Looks at the link's `up-method` or `data-method` attribute.
|
4322
|
+
Defaults to `get`.
|
4323
|
+
|
4187
4324
|
@protected
|
4188
4325
|
@method up.link.followMethod
|
4326
|
+
@param linkOrSelector
|
4327
|
+
@param options.method {String}
|
4189
4328
|
*/
|
4190
|
-
followMethod = function(
|
4329
|
+
followMethod = function(linkOrSelector, options) {
|
4330
|
+
var $link;
|
4331
|
+
$link = $(linkOrSelector);
|
4191
4332
|
options = u.options(options);
|
4192
4333
|
return u.option(options.method, $link.attr('up-method'), $link.attr('data-method'), 'get').toUpperCase();
|
4193
4334
|
};
|
@@ -4333,7 +4474,7 @@ Read on
|
|
4333
4474
|
<a href="/users" up-follow>User list</a>
|
4334
4475
|
|
4335
4476
|
To only update a fragment instead of the entire page,
|
4336
|
-
see [`up-target`](
|
4477
|
+
see [`up-target`](/up-target).
|
4337
4478
|
|
4338
4479
|
\#\#\#\# Turn any element into a link
|
4339
4480
|
|
@@ -4375,7 +4516,7 @@ Read on
|
|
4375
4516
|
</div>
|
4376
4517
|
|
4377
4518
|
In the example above, clicking anywhere within `.notification` element
|
4378
|
-
would [follow](
|
4519
|
+
would [follow](/up.follow) the *Close* link.
|
4379
4520
|
|
4380
4521
|
`up-expand` honors all the UJS behavior in expanded links
|
4381
4522
|
(`up-target`, `up-instant`, `up-preload`, etc.).
|
@@ -4407,9 +4548,9 @@ Read on
|
|
4407
4548
|
Marks up the current link to be followed *as fast as possible*.
|
4408
4549
|
This is done by:
|
4409
4550
|
|
4410
|
-
- [Following the link through AJAX](/up
|
4411
|
-
- [Preloading the link's destination URL](/up
|
4412
|
-
- [Triggering the link on `mousedown`](/up
|
4551
|
+
- [Following the link through AJAX](/up-target) instead of a full page load
|
4552
|
+
- [Preloading the link's destination URL](/up-preload)
|
4553
|
+
- [Triggering the link on `mousedown`](/up-instant) instead of on `click`
|
4413
4554
|
|
4414
4555
|
Use `up-dash` like this:
|
4415
4556
|
|
@@ -4471,9 +4612,7 @@ We need to work on this page:
|
|
4471
4612
|
- Explain that the server needs to send `X-Up-Location` and `X-Up-Method` headers
|
4472
4613
|
if an successful form submission resulted in a redirect
|
4473
4614
|
- Examples
|
4474
|
-
|
4475
4615
|
|
4476
|
-
|
4477
4616
|
@class up.form
|
4478
4617
|
*/
|
4479
4618
|
|
@@ -4523,15 +4662,15 @@ We need to work on this page:
|
|
4523
4662
|
The transition to use when a failed form submission updates the `options.failTarget` selector.
|
4524
4663
|
Defaults to the form's `up-fail-transition` attribute, or to `options.transition`, or to `'none'`.
|
4525
4664
|
@param {Number} [options.duration]
|
4526
|
-
The duration of the transition. See [`up.morph`](/up.
|
4665
|
+
The duration of the transition. See [`up.morph`](/up.morph).
|
4527
4666
|
@param {Number} [options.delay]
|
4528
|
-
The delay before the transition starts. See [`up.morph`](/up.
|
4667
|
+
The delay before the transition starts. See [`up.morph`](/up.morph).
|
4529
4668
|
@param {String} [options.easing]
|
4530
|
-
The timing function that controls the transition's acceleration. [`up.morph`](/up.
|
4669
|
+
The timing function that controls the transition's acceleration. [`up.morph`](/up.morph).
|
4531
4670
|
@param {Element|jQuery|String} [options.reveal]
|
4532
4671
|
Whether to reveal the target element within its viewport.
|
4533
4672
|
@param {Boolean} [options.restoreScroll]
|
4534
|
-
If set to `true`, this will attempt to [`restore scroll positions`](/up.
|
4673
|
+
If set to `true`, this will attempt to [`restore scroll positions`](/up.restoreScroll)
|
4535
4674
|
previously seen on the destination URL.
|
4536
4675
|
@param {Boolean} [options.cache]
|
4537
4676
|
Whether to force the use of a cached response (`true`)
|
@@ -4614,7 +4753,7 @@ We need to work on this page:
|
|
4614
4753
|
For instance, the following would submit the form whenever the
|
4615
4754
|
text field value changes:
|
4616
4755
|
|
4617
|
-
up.observe('input', { change: function(value, $input) {
|
4756
|
+
up.observe('input[name=query]', { change: function(value, $input) {
|
4618
4757
|
up.submit($input)
|
4619
4758
|
} });
|
4620
4759
|
|
@@ -4631,8 +4770,8 @@ We need to work on this page:
|
|
4631
4770
|
\#\#\#\# Throttling
|
4632
4771
|
|
4633
4772
|
If you are concerned about fast typists causing too much
|
4634
|
-
load on your server, you can use a `delay` option to wait
|
4635
|
-
executing the callback:
|
4773
|
+
load on your server, you can use a `delay` option to wait
|
4774
|
+
a few miliseconds before executing the callback:
|
4636
4775
|
|
4637
4776
|
up.observe('input', {
|
4638
4777
|
delay: 100,
|
@@ -4716,7 +4855,7 @@ We need to work on this page:
|
|
4716
4855
|
|
4717
4856
|
/**
|
4718
4857
|
Submits the form through AJAX, searches the response for the selector
|
4719
|
-
given in `up-target` and replaces the selector content in the current page:
|
4858
|
+
given in `up-target` and [replaces](/up.replace) the selector content in the current page:
|
4720
4859
|
|
4721
4860
|
<form method="post" action="/users" up-target=".main">
|
4722
4861
|
...
|
@@ -4725,11 +4864,16 @@ We need to work on this page:
|
|
4725
4864
|
@method form[up-target]
|
4726
4865
|
@ujs
|
4727
4866
|
@param {String} up-target
|
4728
|
-
The selector to replace if the form submission is successful (200 status code).
|
4867
|
+
The selector to [replace](/up.replace) if the form submission is successful (200 status code).
|
4729
4868
|
@param {String} [up-fail-target]
|
4869
|
+
The selector to [replace](/up.replace) if the form submission is not successful (non-200 status code).
|
4870
|
+
If omitted, Up.js will replace the `<form>` tag itself, assuming that the
|
4871
|
+
server has echoed the form with validation errors.
|
4730
4872
|
@param {String} [up-transition]
|
4873
|
+
The animation to use when the form is replaced after a successful submission.
|
4731
4874
|
@param {String} [up-fail-transition]
|
4732
|
-
|
4875
|
+
The animation to use when the form is replaced after a failed submission.
|
4876
|
+
@param {String} [up-history='true']
|
4733
4877
|
@param {String} [up-method]
|
4734
4878
|
The HTTP method to be used to submit the form (`get`, `post`, `put`, `delete`, `patch`).
|
4735
4879
|
Alternately you can use an attribute `data-method`
|
@@ -4820,9 +4964,31 @@ We need to work on this page:
|
|
4820
4964
|
|
4821
4965
|
(function() {
|
4822
4966
|
up.popup = (function($) {
|
4823
|
-
var attach, autoclose, close, config, contains, createHiddenPopup,
|
4967
|
+
var attach, autoclose, close, config, contains, coveredUrl, createHiddenPopup, currentUrl, discardHistory, ensureInViewport, rememberHistory, reset, setPosition, u, updated;
|
4824
4968
|
u = up.util;
|
4825
|
-
|
4969
|
+
|
4970
|
+
/**
|
4971
|
+
Returns the source URL for the fragment displayed
|
4972
|
+
in the current popup, or `undefined` if no popup is open.
|
4973
|
+
|
4974
|
+
@method up.popup.url
|
4975
|
+
@return {String}
|
4976
|
+
the source URL
|
4977
|
+
*/
|
4978
|
+
currentUrl = void 0;
|
4979
|
+
|
4980
|
+
/**
|
4981
|
+
Returns the URL of the page or modal below the popup.
|
4982
|
+
|
4983
|
+
@method up.popup.coveredUrl
|
4984
|
+
@return {String}
|
4985
|
+
@protected
|
4986
|
+
*/
|
4987
|
+
coveredUrl = function() {
|
4988
|
+
var $popup;
|
4989
|
+
$popup = $('.up-popup');
|
4990
|
+
return $popup.attr('up-covered-url');
|
4991
|
+
};
|
4826
4992
|
|
4827
4993
|
/**
|
4828
4994
|
@method up.popup.config
|
@@ -4912,14 +5078,14 @@ We need to work on this page:
|
|
4912
5078
|
rememberHistory = function() {
|
4913
5079
|
var $popup;
|
4914
5080
|
$popup = $('.up-popup');
|
4915
|
-
$popup.attr('up-
|
4916
|
-
return $popup.attr('up-
|
5081
|
+
$popup.attr('up-covered-url', up.browser.url());
|
5082
|
+
return $popup.attr('up-covered-title', document.title);
|
4917
5083
|
};
|
4918
5084
|
discardHistory = function() {
|
4919
5085
|
var $popup;
|
4920
5086
|
$popup = $('.up-popup');
|
4921
|
-
$popup.removeAttr('up-
|
4922
|
-
return $popup.removeAttr('up-
|
5087
|
+
$popup.removeAttr('up-covered-url');
|
5088
|
+
return $popup.removeAttr('up-covered-title');
|
4923
5089
|
};
|
4924
5090
|
createHiddenPopup = function($link, selector, sticky) {
|
4925
5091
|
var $placeholder, $popup;
|
@@ -4950,11 +5116,11 @@ We need to work on this page:
|
|
4950
5116
|
@param {String} [options.animation]
|
4951
5117
|
The animation to use when opening the popup.
|
4952
5118
|
@param {Number} [options.duration]
|
4953
|
-
The duration of the animation. See [`up.animate`](/up.
|
5119
|
+
The duration of the animation. See [`up.animate`](/up.animate).
|
4954
5120
|
@param {Number} [options.delay]
|
4955
|
-
The delay before the animation starts. See [`up.animate`](/up.
|
5121
|
+
The delay before the animation starts. See [`up.animate`](/up.animate).
|
4956
5122
|
@param {String} [options.easing]
|
4957
|
-
The timing function that controls the animation's acceleration. [`up.animate`](/up.
|
5123
|
+
The timing function that controls the animation's acceleration. [`up.animate`](/up.animate).
|
4958
5124
|
@param {Boolean} [options.sticky=false]
|
4959
5125
|
If set to `true`, the popup remains
|
4960
5126
|
open even if the page changes in the background.
|
@@ -4981,26 +5147,13 @@ We need to work on this page:
|
|
4981
5147
|
});
|
4982
5148
|
};
|
4983
5149
|
|
4984
|
-
/**
|
4985
|
-
Returns the source URL for the fragment displayed
|
4986
|
-
in the current popup overlay, or `undefined` if no
|
4987
|
-
popup is open.
|
4988
|
-
|
4989
|
-
@method up.popup.source
|
4990
|
-
@return {String}
|
4991
|
-
the source URL
|
4992
|
-
*/
|
4993
|
-
source = function() {
|
4994
|
-
return currentSource;
|
4995
|
-
};
|
4996
|
-
|
4997
5150
|
/**
|
4998
5151
|
Closes a currently opened popup overlay.
|
4999
5152
|
Does nothing if no popup is currently open.
|
5000
5153
|
|
5001
5154
|
@method up.popup.close
|
5002
5155
|
@param {Object} options
|
5003
|
-
See options for [`up.animate`](/up.
|
5156
|
+
See options for [`up.animate`](/up.animate).
|
5004
5157
|
*/
|
5005
5158
|
close = function(options) {
|
5006
5159
|
var $popup;
|
@@ -5008,10 +5161,10 @@ We need to work on this page:
|
|
5008
5161
|
if ($popup.length) {
|
5009
5162
|
options = u.options(options, {
|
5010
5163
|
animation: config.closeAnimation,
|
5011
|
-
url: $popup.attr('up-
|
5012
|
-
title: $popup.attr('up-
|
5164
|
+
url: $popup.attr('up-covered-url'),
|
5165
|
+
title: $popup.attr('up-covered-title')
|
5013
5166
|
});
|
5014
|
-
|
5167
|
+
currentUrl = void 0;
|
5015
5168
|
return up.destroy($popup, options);
|
5016
5169
|
} else {
|
5017
5170
|
return u.resolvedPromise();
|
@@ -5073,7 +5226,7 @@ We need to work on this page:
|
|
5073
5226
|
var newSource;
|
5074
5227
|
if (contains($fragment)) {
|
5075
5228
|
if (newSource = $fragment.attr('up-source')) {
|
5076
|
-
return
|
5229
|
+
return currentUrl = newSource;
|
5077
5230
|
}
|
5078
5231
|
} else {
|
5079
5232
|
return autoclose();
|
@@ -5100,14 +5253,20 @@ We need to work on this page:
|
|
5100
5253
|
return {
|
5101
5254
|
attach: attach,
|
5102
5255
|
close: close,
|
5103
|
-
|
5256
|
+
url: function() {
|
5257
|
+
return currentUrl;
|
5258
|
+
},
|
5259
|
+
coveredUrl: coveredUrl,
|
5104
5260
|
config: config,
|
5105
5261
|
defaults: function() {
|
5106
5262
|
return u.error('up.popup.defaults(...) no longer exists. Set values on he up.popup.config property instead.');
|
5107
5263
|
},
|
5108
5264
|
contains: contains,
|
5109
5265
|
open: function() {
|
5110
|
-
return up.
|
5266
|
+
return up.error('up.popup.open no longer exists. Please use up.popup.attach instead.');
|
5267
|
+
},
|
5268
|
+
source: function() {
|
5269
|
+
return up.error('up.popup.source no longer exists. Please use up.popup.url instead.');
|
5111
5270
|
}
|
5112
5271
|
};
|
5113
5272
|
})(jQuery);
|
@@ -5128,7 +5287,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5128
5287
|
|
5129
5288
|
(function() {
|
5130
5289
|
up.modal = (function($) {
|
5131
|
-
var autoclose, close, config, contains, createHiddenModal,
|
5290
|
+
var autoclose, close, config, contains, coveredUrl, createHiddenModal, currentUrl, discardHistory, follow, open, rememberHistory, reset, shiftElements, templateHtml, u, unshiftElements, updated, visit;
|
5132
5291
|
u = up.util;
|
5133
5292
|
|
5134
5293
|
/**
|
@@ -5180,10 +5339,32 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5180
5339
|
return "<div class=\"up-modal\">\n <div class=\"up-modal-dialog\">\n <div class=\"up-modal-close\" up-close>" + config.closeLabel + "</div>\n <div class=\"up-modal-content\"></div>\n </div>\n</div>";
|
5181
5340
|
}
|
5182
5341
|
});
|
5183
|
-
|
5342
|
+
|
5343
|
+
/**
|
5344
|
+
Returns the source URL for the fragment displayed in the current modal overlay,
|
5345
|
+
or `undefined` if no modal is currently open.
|
5346
|
+
|
5347
|
+
@method up.modal.url
|
5348
|
+
@return {String}
|
5349
|
+
the source URL
|
5350
|
+
*/
|
5351
|
+
currentUrl = void 0;
|
5352
|
+
|
5353
|
+
/**
|
5354
|
+
Returns the URL of the page below the modal overlay.
|
5355
|
+
|
5356
|
+
@method up.modal.coveredUrl
|
5357
|
+
@return {String}
|
5358
|
+
@protected
|
5359
|
+
*/
|
5360
|
+
coveredUrl = function() {
|
5361
|
+
var $modal;
|
5362
|
+
$modal = $('.up-modal');
|
5363
|
+
return $modal.attr('up-covered-url');
|
5364
|
+
};
|
5184
5365
|
reset = function() {
|
5185
5366
|
close();
|
5186
|
-
|
5367
|
+
currentUrl = void 0;
|
5187
5368
|
return config.reset();
|
5188
5369
|
};
|
5189
5370
|
templateHtml = function() {
|
@@ -5196,16 +5377,16 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5196
5377
|
}
|
5197
5378
|
};
|
5198
5379
|
rememberHistory = function() {
|
5199
|
-
var $
|
5200
|
-
$
|
5201
|
-
$
|
5202
|
-
return $
|
5380
|
+
var $modal;
|
5381
|
+
$modal = $('.up-modal');
|
5382
|
+
$modal.attr('up-covered-url', up.browser.url());
|
5383
|
+
return $modal.attr('up-covered-title', document.title);
|
5203
5384
|
};
|
5204
5385
|
discardHistory = function() {
|
5205
|
-
var $
|
5206
|
-
$
|
5207
|
-
$
|
5208
|
-
return $
|
5386
|
+
var $modal;
|
5387
|
+
$modal = $('.up-modal');
|
5388
|
+
$modal.removeAttr('up-covered-url');
|
5389
|
+
return $modal.removeAttr('up-covered-title');
|
5209
5390
|
};
|
5210
5391
|
createHiddenModal = function(options) {
|
5211
5392
|
var $content, $dialog, $modal, $placeholder;
|
@@ -5213,8 +5394,8 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5213
5394
|
if (options.sticky) {
|
5214
5395
|
$modal.attr('up-sticky', '');
|
5215
5396
|
}
|
5216
|
-
$modal.attr('up-
|
5217
|
-
$modal.attr('up-
|
5397
|
+
$modal.attr('up-covered-url', up.browser.url());
|
5398
|
+
$modal.attr('up-covered-title', document.title);
|
5218
5399
|
$dialog = $modal.find('.up-modal-dialog');
|
5219
5400
|
if (u.isPresent(options.width)) {
|
5220
5401
|
$dialog.css('width', options.width);
|
@@ -5261,7 +5442,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5261
5442
|
$modal.show();
|
5262
5443
|
deferred = up.animate($modal, animation, animateOptions);
|
5263
5444
|
return deferred.then(function() {
|
5264
|
-
return up.
|
5445
|
+
return up.emit('up:modal:opened');
|
5265
5446
|
});
|
5266
5447
|
};
|
5267
5448
|
|
@@ -5271,7 +5452,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5271
5452
|
var $link = $('...');
|
5272
5453
|
up.modal.follow($link);
|
5273
5454
|
|
5274
|
-
Any option attributes for [`a[up-modal]`](
|
5455
|
+
Any option attributes for [`a[up-modal]`](/a.up-modal) will be honored.
|
5275
5456
|
|
5276
5457
|
\#\#\#\# Events
|
5277
5458
|
|
@@ -5287,10 +5468,10 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5287
5468
|
The selector to extract from the response and open in a modal dialog.
|
5288
5469
|
@param {Number} [options.width]
|
5289
5470
|
The width of the dialog in pixels.
|
5290
|
-
By [default](
|
5471
|
+
By [default](/up.modal.config) the dialog will grow to fit its contents.
|
5291
5472
|
@param {Number} [options.height]
|
5292
5473
|
The width of the dialog in pixels.
|
5293
|
-
By [default](
|
5474
|
+
By [default](/up.modal.config) the dialog will grow to fit its contents.
|
5294
5475
|
@param {Boolean} [options.sticky=false]
|
5295
5476
|
If set to `true`, the modal remains
|
5296
5477
|
open even if the page changes in the background.
|
@@ -5299,11 +5480,11 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5299
5480
|
@param {String} [options.animation]
|
5300
5481
|
The animation to use when opening the modal.
|
5301
5482
|
@param {Number} [options.duration]
|
5302
|
-
The duration of the animation. See [`up.animate`](/up.
|
5483
|
+
The duration of the animation. See [`up.animate`](/up.animate).
|
5303
5484
|
@param {Number} [options.delay]
|
5304
|
-
The delay before the animation starts. See [`up.animate`](/up.
|
5485
|
+
The delay before the animation starts. See [`up.animate`](/up.animate).
|
5305
5486
|
@param {String} [options.easing]
|
5306
|
-
The timing function that controls the animation's acceleration. [`up.animate`](/up.
|
5487
|
+
The timing function that controls the animation's acceleration. [`up.animate`](/up.animate).
|
5307
5488
|
@return {Promise}
|
5308
5489
|
A promise that will be resolved when the modal has finished loading.
|
5309
5490
|
*/
|
@@ -5330,7 +5511,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5330
5511
|
The CSS selector to extract from the response.
|
5331
5512
|
The extracted content will be placed into the dialog window.
|
5332
5513
|
@param {Object} options
|
5333
|
-
See options for [previous `up.modal.open` variant](
|
5514
|
+
See options for [previous `up.modal.open` variant](/up.modal.open).
|
5334
5515
|
*/
|
5335
5516
|
visit = function(url, options) {
|
5336
5517
|
options = u.options(options);
|
@@ -5376,18 +5557,6 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5376
5557
|
}
|
5377
5558
|
};
|
5378
5559
|
|
5379
|
-
/**
|
5380
|
-
Returns the source URL for the fragment displayed in the current modal overlay,
|
5381
|
-
or `undefined` if no modal is currently open.
|
5382
|
-
|
5383
|
-
@method up.modal.source
|
5384
|
-
@return {String}
|
5385
|
-
the source URL
|
5386
|
-
*/
|
5387
|
-
source = function() {
|
5388
|
-
return currentSource;
|
5389
|
-
};
|
5390
|
-
|
5391
5560
|
/**
|
5392
5561
|
Closes a currently opened modal overlay.
|
5393
5562
|
Does nothing if no modal is currently open.
|
@@ -5401,7 +5570,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5401
5570
|
|
5402
5571
|
@method up.modal.close
|
5403
5572
|
@param {Object} options
|
5404
|
-
See options for [`up.animate`](/up.
|
5573
|
+
See options for [`up.animate`](/up.animate)
|
5405
5574
|
*/
|
5406
5575
|
close = function(options) {
|
5407
5576
|
var $modal, deferred;
|
@@ -5412,17 +5581,17 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5412
5581
|
})) {
|
5413
5582
|
options = u.options(options, {
|
5414
5583
|
animation: config.closeAnimation,
|
5415
|
-
url: $modal.attr('up-
|
5416
|
-
title: $modal.attr('up-
|
5584
|
+
url: $modal.attr('up-covered-url'),
|
5585
|
+
title: $modal.attr('up-covered-title')
|
5417
5586
|
});
|
5418
|
-
|
5587
|
+
currentUrl = void 0;
|
5419
5588
|
deferred = up.destroy($modal, options);
|
5420
5589
|
deferred.then(function() {
|
5421
5590
|
var unshifter;
|
5422
5591
|
while (unshifter = unshiftElements.pop()) {
|
5423
5592
|
unshifter();
|
5424
5593
|
}
|
5425
|
-
return up.
|
5594
|
+
return up.emit('up:modal:closed');
|
5426
5595
|
});
|
5427
5596
|
return deferred;
|
5428
5597
|
} else {
|
@@ -5493,7 +5662,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5493
5662
|
</div>
|
5494
5663
|
|
5495
5664
|
If you want to change the design beyond CSS, you can
|
5496
|
-
configure Up.js to [use a different HTML structure](
|
5665
|
+
configure Up.js to [use a different HTML structure](/up.modal.config).
|
5497
5666
|
|
5498
5667
|
|
5499
5668
|
\#\#\#\# Closing behavior
|
@@ -5536,7 +5705,7 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5536
5705
|
var newSource;
|
5537
5706
|
if (contains($fragment)) {
|
5538
5707
|
if (newSource = $fragment.attr('up-source')) {
|
5539
|
-
return
|
5708
|
+
return currentUrl = newSource;
|
5540
5709
|
}
|
5541
5710
|
} else if (!up.popup.contains($fragment)) {
|
5542
5711
|
return autoclose();
|
@@ -5567,12 +5736,18 @@ For small popup overlays ("dropdowns") see [up.popup](/up.popup) instead.
|
|
5567
5736
|
return up.error('up.modal.open no longer exists. Please use either up.modal.follow or up.modal.visit.');
|
5568
5737
|
},
|
5569
5738
|
close: close,
|
5570
|
-
|
5739
|
+
url: function() {
|
5740
|
+
return currentUrl;
|
5741
|
+
},
|
5742
|
+
coveredUrl: coveredUrl,
|
5571
5743
|
config: config,
|
5572
5744
|
defaults: function() {
|
5573
5745
|
return u.error('up.modal.defaults(...) no longer exists. Set values on he up.modal.config property instead.');
|
5574
5746
|
},
|
5575
|
-
contains: contains
|
5747
|
+
contains: contains,
|
5748
|
+
source: function() {
|
5749
|
+
return up.error('up.popup.source no longer exists. Please use up.popup.url instead.');
|
5750
|
+
}
|
5576
5751
|
};
|
5577
5752
|
})(jQuery);
|
5578
5753
|
|
@@ -5678,7 +5853,7 @@ We need to work on this page:
|
|
5678
5853
|
|
5679
5854
|
@method up.tooltip.close
|
5680
5855
|
@param {Object} options
|
5681
|
-
See options for [`up.animate`](/up.
|
5856
|
+
See options for [`up.animate`](/up.animate).
|
5682
5857
|
*/
|
5683
5858
|
close = function(options) {
|
5684
5859
|
var $tooltip;
|
@@ -5764,7 +5939,7 @@ by providing instant feedback for user interactions.
|
|
5764
5939
|
@method up.navigation.config
|
5765
5940
|
@property
|
5766
5941
|
@param {Number} [config.currentClasses]
|
5767
|
-
An array of classes to set on [links that point the current location](
|
5942
|
+
An array of classes to set on [links that point the current location](/up-current).
|
5768
5943
|
*/
|
5769
5944
|
config = u.config({
|
5770
5945
|
currentClasses: ['up-current']
|
@@ -5846,7 +6021,7 @@ by providing instant feedback for user interactions.
|
|
5846
6021
|
};
|
5847
6022
|
locationChanged = function() {
|
5848
6023
|
var currentUrls, klass;
|
5849
|
-
currentUrls = urlSet([normalizeUrl(up.browser.url()), normalizeUrl(up.modal.
|
6024
|
+
currentUrls = urlSet([normalizeUrl(up.browser.url()), normalizeUrl(up.modal.url()), normalizeUrl(up.modal.coveredUrl()), normalizeUrl(up.popup.url()), normalizeUrl(up.popup.coveredUrl())]);
|
5850
6025
|
klass = currentClass();
|
5851
6026
|
return u.each($(SELECTOR_SECTION), function(section) {
|
5852
6027
|
var $section, urls;
|
@@ -5938,7 +6113,7 @@ by providing instant feedback for user interactions.
|
|
5938
6113
|
A link matches the current location (and is marked as `.up-current`) if it matches either:
|
5939
6114
|
|
5940
6115
|
- the link's `href` attribute
|
5941
|
-
- the link's [`up-href`](
|
6116
|
+
- the link's [`up-href`](#turn-any-element-into-a-link) attribute
|
5942
6117
|
- a space-separated list of URLs in the link's `up-alias` attribute
|
5943
6118
|
|
5944
6119
|
\#\#\#\# Matching URL by prefix
|
@@ -5974,8 +6149,8 @@ by providing instant feedback for user interactions.
|
|
5974
6149
|
}).call(this);
|
5975
6150
|
(function() {
|
5976
6151
|
if (up.browser.isSupported()) {
|
5977
|
-
up.
|
5978
|
-
up.
|
6152
|
+
up.emit('up:framework:boot');
|
6153
|
+
up.emit('up:framework:booted');
|
5979
6154
|
}
|
5980
6155
|
|
5981
6156
|
}).call(this);
|