unpoly-rails 3.8.0.rc1 → 3.8.0.1
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/assets/unpoly/unpoly-migrate.js +49 -2
- data/assets/unpoly/unpoly-migrate.min.js +1 -1
- data/assets/unpoly/unpoly.es6.js +58 -88
- data/assets/unpoly/unpoly.es6.min.js +1 -1
- data/assets/unpoly/unpoly.js +58 -88
- data/assets/unpoly/unpoly.min.js +1 -1
- data/lib/unpoly/rails/controller.rb +4 -2
- data/lib/unpoly/rails/request_echo_headers.rb +4 -2
- data/lib/unpoly/rails/request_method_cookie.rb +4 -2
- data/lib/unpoly/rails/version.rb +1 -1
- metadata +4 -4
data/assets/unpoly/unpoly.js
CHANGED
@@ -5,7 +5,7 @@
|
|
5
5
|
/***/ (() => {
|
6
6
|
|
7
7
|
window.up = {
|
8
|
-
version: '3.8.0
|
8
|
+
version: '3.8.0'
|
9
9
|
};
|
10
10
|
|
11
11
|
|
@@ -882,7 +882,9 @@ up.fail = up.error.fail;
|
|
882
882
|
/* 5 */
|
883
883
|
/***/ (() => {
|
884
884
|
|
885
|
-
up.migrate = {
|
885
|
+
up.migrate = {
|
886
|
+
config: {},
|
887
|
+
};
|
886
888
|
|
887
889
|
|
888
890
|
/***/ }),
|
@@ -1215,16 +1217,9 @@ up.element = (function () {
|
|
1215
1217
|
paint(element);
|
1216
1218
|
return undo;
|
1217
1219
|
}
|
1218
|
-
function hasCSSTransition(
|
1219
|
-
|
1220
|
-
|
1221
|
-
styleHash = elementOrStyleHash;
|
1222
|
-
}
|
1223
|
-
else {
|
1224
|
-
styleHash = computedStyle(elementOrStyleHash);
|
1225
|
-
}
|
1226
|
-
const prop = styleHash.transitionProperty;
|
1227
|
-
const duration = styleHash.transitionDuration;
|
1220
|
+
function hasCSSTransition(styleHash) {
|
1221
|
+
const prop = styleHash['transition-property'];
|
1222
|
+
const duration = styleHash['transition-duration'];
|
1228
1223
|
const noTransition = ((prop === 'none') || ((prop === 'all') && (duration === 0)));
|
1229
1224
|
return !noTransition;
|
1230
1225
|
}
|
@@ -1233,8 +1228,8 @@ up.element = (function () {
|
|
1233
1228
|
element.style.position = 'absolute';
|
1234
1229
|
const offsetParentRect = element.offsetParent.getBoundingClientRect();
|
1235
1230
|
setInlineStyle(element, {
|
1236
|
-
left: elementRectAsFixed.left - computedStyleNumber(element, 'margin-left') - offsetParentRect.left,
|
1237
|
-
top: elementRectAsFixed.top - computedStyleNumber(element, 'margin-top') - offsetParentRect.top,
|
1231
|
+
left: (elementRectAsFixed.left - computedStyleNumber(element, 'margin-left') - offsetParentRect.left) + 'px',
|
1232
|
+
top: (elementRectAsFixed.top - computedStyleNumber(element, 'margin-top') - offsetParentRect.top) + 'px',
|
1238
1233
|
right: '',
|
1239
1234
|
bottom: ''
|
1240
1235
|
});
|
@@ -1354,7 +1349,7 @@ up.element = (function () {
|
|
1354
1349
|
}
|
1355
1350
|
function computedStyleNumber(element, prop) {
|
1356
1351
|
const rawValue = computedStyle(element, prop);
|
1357
|
-
if (u.
|
1352
|
+
if (u.isPresent(rawValue)) {
|
1358
1353
|
return parseFloat(rawValue);
|
1359
1354
|
}
|
1360
1355
|
}
|
@@ -1363,14 +1358,18 @@ up.element = (function () {
|
|
1363
1358
|
return extractFromStyleObject(style, props);
|
1364
1359
|
}
|
1365
1360
|
function extractFromStyleObject(style, keyOrKeys) {
|
1361
|
+
if (up.migrate.loaded)
|
1362
|
+
keyOrKeys = up.migrate.fixStyleProps(keyOrKeys);
|
1366
1363
|
if (u.isString(keyOrKeys)) {
|
1367
|
-
return style
|
1364
|
+
return style.getPropertyValue(keyOrKeys);
|
1368
1365
|
}
|
1369
1366
|
else {
|
1370
|
-
return u.
|
1367
|
+
return u.mapObject(keyOrKeys, (key) => [key, style.getPropertyValue(key)]);
|
1371
1368
|
}
|
1372
1369
|
}
|
1373
|
-
function setInlineStyle(element, props) {
|
1370
|
+
function setInlineStyle(element, props, unit = '') {
|
1371
|
+
if (up.migrate.loaded)
|
1372
|
+
props = up.migrate.fixStyleProps(props, unit);
|
1374
1373
|
if (u.isString(props)) {
|
1375
1374
|
element.setAttribute('style', props);
|
1376
1375
|
}
|
@@ -1378,37 +1377,10 @@ up.element = (function () {
|
|
1378
1377
|
const { style } = element;
|
1379
1378
|
for (let key in props) {
|
1380
1379
|
let value = props[key];
|
1381
|
-
|
1382
|
-
style[key] = value;
|
1380
|
+
style.setProperty(key, value + unit);
|
1383
1381
|
}
|
1384
1382
|
}
|
1385
1383
|
}
|
1386
|
-
function normalizeStyleValueForWrite(key, value) {
|
1387
|
-
if (u.isMissing(value)) {
|
1388
|
-
value = '';
|
1389
|
-
}
|
1390
|
-
else if (CSS_LENGTH_PROPS.has(key.toLowerCase().replace(/-/, ''))) {
|
1391
|
-
value = cssLength(value);
|
1392
|
-
}
|
1393
|
-
return value;
|
1394
|
-
}
|
1395
|
-
const CSS_LENGTH_PROPS = new Set([
|
1396
|
-
'top', 'right', 'bottom', 'left',
|
1397
|
-
'padding', 'paddingtop', 'paddingright', 'paddingbottom', 'paddingleft',
|
1398
|
-
'margin', 'margintop', 'marginright', 'marginbottom', 'marginleft',
|
1399
|
-
'borderwidth', 'bordertopwidth', 'borderrightwidth', 'borderbottomwidth', 'borderleftwidth',
|
1400
|
-
'width', 'height',
|
1401
|
-
'maxwidth', 'maxheight',
|
1402
|
-
'minwidth', 'minheight',
|
1403
|
-
]);
|
1404
|
-
function cssLength(obj) {
|
1405
|
-
if (u.isNumber(obj) || (u.isString(obj) && /^\d+$/.test(obj))) {
|
1406
|
-
return obj.toString() + "px";
|
1407
|
-
}
|
1408
|
-
else {
|
1409
|
-
return obj;
|
1410
|
-
}
|
1411
|
-
}
|
1412
1384
|
function isVisible(element) {
|
1413
1385
|
return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
|
1414
1386
|
}
|
@@ -1821,6 +1793,7 @@ up.BodyShifter = class BodyShifter {
|
|
1821
1793
|
constructor() {
|
1822
1794
|
this._anchoredElements = new Set();
|
1823
1795
|
this._stack = 0;
|
1796
|
+
this._cleaners = [];
|
1824
1797
|
}
|
1825
1798
|
lowerStack() {
|
1826
1799
|
if (--this._stack === 0)
|
@@ -1840,7 +1813,9 @@ up.BodyShifter = class BodyShifter {
|
|
1840
1813
|
}
|
1841
1814
|
_shiftNow() {
|
1842
1815
|
this._rootScrollbarWidth = up.viewport.rootScrollbarWidth();
|
1843
|
-
|
1816
|
+
this._cleaners.push(e.setTemporaryStyle(e.root, {
|
1817
|
+
'--up-scrollbar-width': this._rootScrollbarWidth + 'px'
|
1818
|
+
}));
|
1844
1819
|
this._shiftElement(document.body, 'padding-right');
|
1845
1820
|
for (let element of this._anchoredElements) {
|
1846
1821
|
this._shiftElement(element, 'right');
|
@@ -1850,12 +1825,12 @@ up.BodyShifter = class BodyShifter {
|
|
1850
1825
|
if (!this._isShifted())
|
1851
1826
|
return;
|
1852
1827
|
let originalValue = e.style(element, styleProp);
|
1853
|
-
|
1854
|
-
element.classList.add(SHIFT_CLASS);
|
1828
|
+
this._cleaners.push(e.setTemporaryStyle(e.root, { ['--up-original-' + styleProp]: originalValue }), e.addTemporaryClass(element, SHIFT_CLASS));
|
1855
1829
|
}
|
1856
1830
|
_unshiftNow() {
|
1857
|
-
|
1858
|
-
|
1831
|
+
let cleaner;
|
1832
|
+
while (cleaner = this._cleaners.pop()) {
|
1833
|
+
cleaner();
|
1859
1834
|
}
|
1860
1835
|
}
|
1861
1836
|
};
|
@@ -3220,20 +3195,17 @@ up.CompilerPass = class CompilerPass {
|
|
3220
3195
|
const u = up.util;
|
3221
3196
|
const e = up.element;
|
3222
3197
|
up.CSSTransition = class CSSTransition {
|
3223
|
-
constructor(element,
|
3198
|
+
constructor(element, lastFrame, options) {
|
3224
3199
|
this._element = element;
|
3225
|
-
this.
|
3226
|
-
this.
|
3227
|
-
if (u.some(this._lastFrameKeysKebab, key => key.match(/A-Z/))) {
|
3228
|
-
up.fail('Animation keys must be kebab-case');
|
3229
|
-
}
|
3200
|
+
this._lastFrame = lastFrame;
|
3201
|
+
this._lastFrameKeys = Object.keys(this._lastFrame);
|
3230
3202
|
this._finishEvent = options.finishEvent;
|
3231
3203
|
this._duration = options.duration;
|
3232
3204
|
this._easing = options.easing;
|
3233
3205
|
this._finished = false;
|
3234
3206
|
}
|
3235
3207
|
start() {
|
3236
|
-
if (this.
|
3208
|
+
if (this._lastFrameKeys.length === 0) {
|
3237
3209
|
this._finished = true;
|
3238
3210
|
return Promise.resolve();
|
3239
3211
|
}
|
@@ -3257,9 +3229,7 @@ up.CSSTransition = class CSSTransition {
|
|
3257
3229
|
}
|
3258
3230
|
_startFallbackTimer() {
|
3259
3231
|
const timingTolerance = 100;
|
3260
|
-
this._fallbackTimer = u.timer((this._duration + timingTolerance), () =>
|
3261
|
-
this._finish();
|
3262
|
-
});
|
3232
|
+
this._fallbackTimer = u.timer((this._duration + timingTolerance), () => this._finish());
|
3263
3233
|
}
|
3264
3234
|
_stopFallbackTimer() {
|
3265
3235
|
clearTimeout(this._fallbackTimer);
|
@@ -3275,11 +3245,10 @@ up.CSSTransition = class CSSTransition {
|
|
3275
3245
|
if (elapsed <= (0.25 * this._duration)) {
|
3276
3246
|
return;
|
3277
3247
|
}
|
3278
|
-
const
|
3279
|
-
if (
|
3280
|
-
|
3248
|
+
const completedProperty = event.propertyName;
|
3249
|
+
if (u.contains(this._lastFrameKeys, completedProperty)) {
|
3250
|
+
this._finish();
|
3281
3251
|
}
|
3282
|
-
this._finish();
|
3283
3252
|
}
|
3284
3253
|
_finish() {
|
3285
3254
|
if (this._finished) {
|
@@ -3295,16 +3264,16 @@ up.CSSTransition = class CSSTransition {
|
|
3295
3264
|
}
|
3296
3265
|
_pauseOldTransition() {
|
3297
3266
|
const oldTransition = e.style(this._element, [
|
3298
|
-
'
|
3299
|
-
'
|
3300
|
-
'
|
3301
|
-
'
|
3267
|
+
'transition-property',
|
3268
|
+
'transition-duration',
|
3269
|
+
'transition-delay',
|
3270
|
+
'transition-timing-function'
|
3302
3271
|
]);
|
3303
3272
|
if (e.hasCSSTransition(oldTransition)) {
|
3304
|
-
if (oldTransition
|
3305
|
-
const oldTransitionProperties = oldTransition.
|
3306
|
-
const
|
3307
|
-
this._setOldTransitionTargetFrame = e.setTemporaryStyle(this._element,
|
3273
|
+
if (oldTransition['transition-property'] !== 'all') {
|
3274
|
+
const oldTransitionProperties = oldTransition['transition-property'].split(/\s*,\s*/);
|
3275
|
+
const oldTransitionFrame = e.style(this._element, oldTransitionProperties);
|
3276
|
+
this._setOldTransitionTargetFrame = e.setTemporaryStyle(this._element, oldTransitionFrame);
|
3308
3277
|
}
|
3309
3278
|
this._setOldTransition = e.concludeCSSTransition(this._element);
|
3310
3279
|
}
|
@@ -3315,11 +3284,11 @@ up.CSSTransition = class CSSTransition {
|
|
3315
3284
|
}
|
3316
3285
|
_startMotion() {
|
3317
3286
|
e.setStyle(this._element, {
|
3318
|
-
|
3319
|
-
|
3320
|
-
|
3287
|
+
'transition-property': this._lastFrameKeys.join(),
|
3288
|
+
'transition-duration': `${this._duration}ms`,
|
3289
|
+
'transition-timing-function': this._easing
|
3321
3290
|
});
|
3322
|
-
e.setStyle(this._element, this.
|
3291
|
+
e.setStyle(this._element, this._lastFrame);
|
3323
3292
|
}
|
3324
3293
|
};
|
3325
3294
|
|
@@ -7257,10 +7226,10 @@ up.Tether = class Tether {
|
|
7257
7226
|
sync() {
|
7258
7227
|
const elementBox = this._element.getBoundingClientRect();
|
7259
7228
|
const elementMargin = {
|
7260
|
-
top: e.styleNumber(this._element, '
|
7261
|
-
right: e.styleNumber(this._element, '
|
7262
|
-
bottom: e.styleNumber(this._element, '
|
7263
|
-
left: e.styleNumber(this._element, '
|
7229
|
+
top: e.styleNumber(this._element, 'margin-top'),
|
7230
|
+
right: e.styleNumber(this._element, 'margin-right'),
|
7231
|
+
bottom: e.styleNumber(this._element, 'margin-bottom'),
|
7232
|
+
left: e.styleNumber(this._element, 'margin-left')
|
7264
7233
|
};
|
7265
7234
|
const anchorBox = this._anchor.getBoundingClientRect();
|
7266
7235
|
let left;
|
@@ -7328,7 +7297,7 @@ up.Tether = class Tether {
|
|
7328
7297
|
_setOffset(left, top) {
|
7329
7298
|
this.offsetLeft = left;
|
7330
7299
|
this.offsetTop = top;
|
7331
|
-
e.setStyle(this._element, { left, top });
|
7300
|
+
e.setStyle(this._element, { left, top }, 'px');
|
7332
7301
|
}
|
7333
7302
|
};
|
7334
7303
|
|
@@ -8121,10 +8090,8 @@ up.history = (function () {
|
|
8121
8090
|
return;
|
8122
8091
|
}
|
8123
8092
|
let location = currentLocation();
|
8124
|
-
if (up.emit('up:location:restore', { location, log: `Restoring location ${location}` }).defaultPrevented) {
|
8125
|
-
return;
|
8126
|
-
}
|
8127
8093
|
up.render({
|
8094
|
+
guardEvent: up.event.build('up:location:restore', { location, log: `Restoring location ${location}` }),
|
8128
8095
|
url: location,
|
8129
8096
|
target: config.restoreTargets,
|
8130
8097
|
fail: false,
|
@@ -8132,7 +8099,8 @@ up.history = (function () {
|
|
8132
8099
|
location,
|
8133
8100
|
peel: true,
|
8134
8101
|
layer: 'root',
|
8135
|
-
cache:
|
8102
|
+
cache: 'auto',
|
8103
|
+
revalidate: 'auto',
|
8136
8104
|
saveScroll: false,
|
8137
8105
|
scroll: ['restore', 'auto'],
|
8138
8106
|
saveFocus: false,
|
@@ -8996,7 +8964,7 @@ up.viewport = (function () {
|
|
8996
8964
|
const moveBounds = function (diffX, diffY) {
|
8997
8965
|
boundsRect.left += diffX;
|
8998
8966
|
boundsRect.top += diffY;
|
8999
|
-
return e.setStyle(bounds, boundsRect);
|
8967
|
+
return e.setStyle(bounds, boundsRect, 'px');
|
9000
8968
|
};
|
9001
8969
|
moveBounds(0, 0);
|
9002
8970
|
const newElementRect = element.getBoundingClientRect();
|
@@ -9137,6 +9105,8 @@ up.motion = (function () {
|
|
9137
9105
|
return Promise.resolve();
|
9138
9106
|
}
|
9139
9107
|
function animateNow(element, lastFrame, options) {
|
9108
|
+
if (up.migrate.loaded)
|
9109
|
+
lastFrame = up.migrate.fixStyleProps(lastFrame);
|
9140
9110
|
options = { ...options, finishEvent: motionController.finishEvent };
|
9141
9111
|
const cssTransition = new up.CSSTransition(element, lastFrame, options);
|
9142
9112
|
return cssTransition.start();
|
@@ -9291,7 +9261,7 @@ up.motion = (function () {
|
|
9291
9261
|
return { transform: `translate(${dx}px, ${dy}px)` };
|
9292
9262
|
}
|
9293
9263
|
function noTranslateCSS() {
|
9294
|
-
return { transform:
|
9264
|
+
return { transform: '' };
|
9295
9265
|
}
|
9296
9266
|
function untranslatedBox(element) {
|
9297
9267
|
e.setStyle(element, noTranslateCSS());
|