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.
@@ -5,7 +5,7 @@
5
5
  /***/ (() => {
6
6
 
7
7
  window.up = {
8
- version: '3.8.0-rc1'
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 = { config: {} };
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(elementOrStyleHash) {
1219
- let styleHash;
1220
- if (u.isOptions(elementOrStyleHash)) {
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.isGiven(rawValue)) {
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[keyOrKeys];
1364
+ return style.getPropertyValue(keyOrKeys);
1368
1365
  }
1369
1366
  else {
1370
- return u.pick(style, keyOrKeys);
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
- value = normalizeStyleValueForWrite(key, value);
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
- e.root.style.setProperty('--up-scrollbar-width', this._rootScrollbarWidth + 'px');
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
- element.style.setProperty('--up-original-' + styleProp, originalValue);
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
- for (let element of [document.body, ...this._anchoredElements]) {
1858
- element.classList.remove(SHIFT_CLASS);
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, lastFrameKebab, options) {
3198
+ constructor(element, lastFrame, options) {
3224
3199
  this._element = element;
3225
- this._lastFrameKebab = lastFrameKebab;
3226
- this._lastFrameKeysKebab = Object.keys(this._lastFrameKebab);
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._lastFrameKeysKebab.length === 0) {
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 completedPropertyKebab = event.propertyName;
3279
- if (!u.contains(this._lastFrameKeysKebab, completedPropertyKebab)) {
3280
- return;
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
- 'transitionProperty',
3299
- 'transitionDuration',
3300
- 'transitionDelay',
3301
- 'transitionTimingFunction'
3267
+ 'transition-property',
3268
+ 'transition-duration',
3269
+ 'transition-delay',
3270
+ 'transition-timing-function'
3302
3271
  ]);
3303
3272
  if (e.hasCSSTransition(oldTransition)) {
3304
- if (oldTransition.transitionProperty !== 'all') {
3305
- const oldTransitionProperties = oldTransition.transitionProperty.split(/\s*,\s*/);
3306
- const oldTransitionFrameKebab = e.style(this._element, oldTransitionProperties);
3307
- this._setOldTransitionTargetFrame = e.setTemporaryStyle(this._element, oldTransitionFrameKebab);
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
- transitionProperty: Object.keys(this._lastFrameKebab).join(', '),
3319
- transitionDuration: `${this._duration}ms`,
3320
- transitionTimingFunction: this._easing
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._lastFrameKebab);
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, 'marginTop'),
7261
- right: e.styleNumber(this._element, 'marginRight'),
7262
- bottom: e.styleNumber(this._element, 'marginBottom'),
7263
- left: e.styleNumber(this._element, 'marginLeft')
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: true,
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: null };
9264
+ return { transform: '' };
9295
9265
  }
9296
9266
  function untranslatedBox(element) {
9297
9267
  e.setStyle(element, noTranslateCSS());