unpoly-rails 3.8.0.rc1 → 3.8.0

data/assets/unpoly/unpoly.js

@@ -5,7 +5,7 @@
 /***/ (() => {
 
 window.up = {
-    version: '3.8.0-rc1'
+    version: '3.8.0'
 };
 
 
@@ -882,7 +882,9 @@ up.fail = up.error.fail;
 /* 5 */
 /***/ (() => {
 
-up.migrate = { config: {} };
+up.migrate = {
+    config: {},
+};
 
 
 /***/ }),
@@ -1215,16 +1217,9 @@ up.element = (function () {
         paint(element);
         return undo;
     }
-    function hasCSSTransition(elementOrStyleHash) {
-        let styleHash;
-        if (u.isOptions(elementOrStyleHash)) {
-            styleHash = elementOrStyleHash;
-        }
-        else {
-            styleHash = computedStyle(elementOrStyleHash);
-        }
-        const prop = styleHash.transitionProperty;
-        const duration = styleHash.transitionDuration;
+    function hasCSSTransition(styleHash) {
+        const prop = styleHash['transition-property'];
+        const duration = styleHash['transition-duration'];
         const noTransition = ((prop === 'none') || ((prop === 'all') && (duration === 0)));
         return !noTransition;
     }
@@ -1233,8 +1228,8 @@ up.element = (function () {
         element.style.position = 'absolute';
         const offsetParentRect = element.offsetParent.getBoundingClientRect();
         setInlineStyle(element, {
-            left: elementRectAsFixed.left - computedStyleNumber(element, 'margin-left') - offsetParentRect.left,
-            top: elementRectAsFixed.top - computedStyleNumber(element, 'margin-top') - offsetParentRect.top,
+            left: (elementRectAsFixed.left - computedStyleNumber(element, 'margin-left') - offsetParentRect.left) + 'px',
+            top: (elementRectAsFixed.top - computedStyleNumber(element, 'margin-top') - offsetParentRect.top) + 'px',
             right: '',
             bottom: ''
         });
@@ -1354,7 +1349,7 @@ up.element = (function () {
     }
     function computedStyleNumber(element, prop) {
         const rawValue = computedStyle(element, prop);
-        if (u.isGiven(rawValue)) {
+        if (u.isPresent(rawValue)) {
             return parseFloat(rawValue);
         }
     }
@@ -1363,14 +1358,18 @@ up.element = (function () {
         return extractFromStyleObject(style, props);
     }
     function extractFromStyleObject(style, keyOrKeys) {
+        if (up.migrate.loaded)
+            keyOrKeys = up.migrate.fixStyleProps(keyOrKeys);
         if (u.isString(keyOrKeys)) {
-            return style[keyOrKeys];
+            return style.getPropertyValue(keyOrKeys);
         }
         else {
-            return u.pick(style, keyOrKeys);
+            return u.mapObject(keyOrKeys, (key) => [key, style.getPropertyValue(key)]);
         }
     }
-    function setInlineStyle(element, props) {
+    function setInlineStyle(element, props, unit = '') {
+        if (up.migrate.loaded)
+            props = up.migrate.fixStyleProps(props, unit);
         if (u.isString(props)) {
             element.setAttribute('style', props);
         }
@@ -1378,37 +1377,10 @@ up.element = (function () {
             const { style } = element;
             for (let key in props) {
                 let value = props[key];
-                value = normalizeStyleValueForWrite(key, value);
-                style[key] = value;
+                style.setProperty(key, value + unit);
             }
         }
     }
-    function normalizeStyleValueForWrite(key, value) {
-        if (u.isMissing(value)) {
-            value = '';
-        }
-        else if (CSS_LENGTH_PROPS.has(key.toLowerCase().replace(/-/, ''))) {
-            value = cssLength(value);
-        }
-        return value;
-    }
-    const CSS_LENGTH_PROPS = new Set([
-        'top', 'right', 'bottom', 'left',
-        'padding', 'paddingtop', 'paddingright', 'paddingbottom', 'paddingleft',
-        'margin', 'margintop', 'marginright', 'marginbottom', 'marginleft',
-        'borderwidth', 'bordertopwidth', 'borderrightwidth', 'borderbottomwidth', 'borderleftwidth',
-        'width', 'height',
-        'maxwidth', 'maxheight',
-        'minwidth', 'minheight',
-    ]);
-    function cssLength(obj) {
-        if (u.isNumber(obj) || (u.isString(obj) && /^\d+$/.test(obj))) {
-            return obj.toString() + "px";
-        }
-        else {
-            return obj;
-        }
-    }
     function isVisible(element) {
         return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
     }
@@ -1821,6 +1793,7 @@ up.BodyShifter = class BodyShifter {
     constructor() {
         this._anchoredElements = new Set();
         this._stack = 0;
+        this._cleaners = [];
     }
     lowerStack() {
         if (--this._stack === 0)
@@ -1840,7 +1813,9 @@ up.BodyShifter = class BodyShifter {
     }
     _shiftNow() {
         this._rootScrollbarWidth = up.viewport.rootScrollbarWidth();
-        e.root.style.setProperty('--up-scrollbar-width', this._rootScrollbarWidth + 'px');
+        this._cleaners.push(e.setTemporaryStyle(e.root, {
+            '--up-scrollbar-width': this._rootScrollbarWidth + 'px'
+        }));
         this._shiftElement(document.body, 'padding-right');
         for (let element of this._anchoredElements) {
             this._shiftElement(element, 'right');
@@ -1850,12 +1825,12 @@ up.BodyShifter = class BodyShifter {
         if (!this._isShifted())
             return;
         let originalValue = e.style(element, styleProp);
-        element.style.setProperty('--up-original-' + styleProp, originalValue);
-        element.classList.add(SHIFT_CLASS);
+        this._cleaners.push(e.setTemporaryStyle(e.root, { ['--up-original-' + styleProp]: originalValue }), e.addTemporaryClass(element, SHIFT_CLASS));
     }
     _unshiftNow() {
-        for (let element of [document.body, ...this._anchoredElements]) {
-            element.classList.remove(SHIFT_CLASS);
+        let cleaner;
+        while (cleaner = this._cleaners.pop()) {
+            cleaner();
         }
     }
 };
@@ -3220,20 +3195,17 @@ up.CompilerPass = class CompilerPass {
 const u = up.util;
 const e = up.element;
 up.CSSTransition = class CSSTransition {
-    constructor(element, lastFrameKebab, options) {
+    constructor(element, lastFrame, options) {
         this._element = element;
-        this._lastFrameKebab = lastFrameKebab;
-        this._lastFrameKeysKebab = Object.keys(this._lastFrameKebab);
-        if (u.some(this._lastFrameKeysKebab, key => key.match(/A-Z/))) {
-            up.fail('Animation keys must be kebab-case');
-        }
+        this._lastFrame = lastFrame;
+        this._lastFrameKeys = Object.keys(this._lastFrame);
         this._finishEvent = options.finishEvent;
         this._duration = options.duration;
         this._easing = options.easing;
         this._finished = false;
     }
     start() {
-        if (this._lastFrameKeysKebab.length === 0) {
+        if (this._lastFrameKeys.length === 0) {
             this._finished = true;
             return Promise.resolve();
         }
@@ -3257,9 +3229,7 @@ up.CSSTransition = class CSSTransition {
     }
     _startFallbackTimer() {
         const timingTolerance = 100;
-        this._fallbackTimer = u.timer((this._duration + timingTolerance), () => {
-            this._finish();
-        });
+        this._fallbackTimer = u.timer((this._duration + timingTolerance), () => this._finish());
     }
     _stopFallbackTimer() {
         clearTimeout(this._fallbackTimer);
@@ -3275,11 +3245,10 @@ up.CSSTransition = class CSSTransition {
         if (elapsed <= (0.25 * this._duration)) {
             return;
         }
-        const completedPropertyKebab = event.propertyName;
-        if (!u.contains(this._lastFrameKeysKebab, completedPropertyKebab)) {
-            return;
+        const completedProperty = event.propertyName;
+        if (u.contains(this._lastFrameKeys, completedProperty)) {
+            this._finish();
         }
-        this._finish();
     }
     _finish() {
         if (this._finished) {
@@ -3295,16 +3264,16 @@ up.CSSTransition = class CSSTransition {
     }
     _pauseOldTransition() {
         const oldTransition = e.style(this._element, [
-            'transitionProperty',
-            'transitionDuration',
-            'transitionDelay',
-            'transitionTimingFunction'
+            'transition-property',
+            'transition-duration',
+            'transition-delay',
+            'transition-timing-function'
         ]);
         if (e.hasCSSTransition(oldTransition)) {
-            if (oldTransition.transitionProperty !== 'all') {
-                const oldTransitionProperties = oldTransition.transitionProperty.split(/\s*,\s*/);
-                const oldTransitionFrameKebab = e.style(this._element, oldTransitionProperties);
-                this._setOldTransitionTargetFrame = e.setTemporaryStyle(this._element, oldTransitionFrameKebab);
+            if (oldTransition['transition-property'] !== 'all') {
+                const oldTransitionProperties = oldTransition['transition-property'].split(/\s*,\s*/);
+                const oldTransitionFrame = e.style(this._element, oldTransitionProperties);
+                this._setOldTransitionTargetFrame = e.setTemporaryStyle(this._element, oldTransitionFrame);
             }
             this._setOldTransition = e.concludeCSSTransition(this._element);
         }
@@ -3315,11 +3284,11 @@ up.CSSTransition = class CSSTransition {
     }
     _startMotion() {
         e.setStyle(this._element, {
-            transitionProperty: Object.keys(this._lastFrameKebab).join(', '),
-            transitionDuration: `${this._duration}ms`,
-            transitionTimingFunction: this._easing
+            'transition-property': this._lastFrameKeys.join(),
+            'transition-duration': `${this._duration}ms`,
+            'transition-timing-function': this._easing
         });
-        e.setStyle(this._element, this._lastFrameKebab);
+        e.setStyle(this._element, this._lastFrame);
     }
 };
 
@@ -7257,10 +7226,10 @@ up.Tether = class Tether {
     sync() {
         const elementBox = this._element.getBoundingClientRect();
         const elementMargin = {
-            top: e.styleNumber(this._element, 'marginTop'),
-            right: e.styleNumber(this._element, 'marginRight'),
-            bottom: e.styleNumber(this._element, 'marginBottom'),
-            left: e.styleNumber(this._element, 'marginLeft')
+            top: e.styleNumber(this._element, 'margin-top'),
+            right: e.styleNumber(this._element, 'margin-right'),
+            bottom: e.styleNumber(this._element, 'margin-bottom'),
+            left: e.styleNumber(this._element, 'margin-left')
         };
         const anchorBox = this._anchor.getBoundingClientRect();
         let left;
@@ -7328,7 +7297,7 @@ up.Tether = class Tether {
     _setOffset(left, top) {
         this.offsetLeft = left;
         this.offsetTop = top;
-        e.setStyle(this._element, { left, top });
+        e.setStyle(this._element, { left, top }, 'px');
     }
 };
 
@@ -8121,10 +8090,8 @@ up.history = (function () {
             return;
         }
         let location = currentLocation();
-        if (up.emit('up:location:restore', { location, log: `Restoring location ${location}` }).defaultPrevented) {
-            return;
-        }
         up.render({
+            guardEvent: up.event.build('up:location:restore', { location, log: `Restoring location ${location}` }),
             url: location,
             target: config.restoreTargets,
             fail: false,
@@ -8132,7 +8099,8 @@ up.history = (function () {
             location,
             peel: true,
             layer: 'root',
-            cache: true,
+            cache: 'auto',
+            revalidate: 'auto',
             saveScroll: false,
             scroll: ['restore', 'auto'],
             saveFocus: false,
@@ -8996,7 +8964,7 @@ up.viewport = (function () {
         const moveBounds = function (diffX, diffY) {
             boundsRect.left += diffX;
             boundsRect.top += diffY;
-            return e.setStyle(bounds, boundsRect);
+            return e.setStyle(bounds, boundsRect, 'px');
         };
         moveBounds(0, 0);
         const newElementRect = element.getBoundingClientRect();
@@ -9137,6 +9105,8 @@ up.motion = (function () {
         return Promise.resolve();
     }
     function animateNow(element, lastFrame, options) {
+        if (up.migrate.loaded)
+            lastFrame = up.migrate.fixStyleProps(lastFrame);
         options = { ...options, finishEvent: motionController.finishEvent };
         const cssTransition = new up.CSSTransition(element, lastFrame, options);
         return cssTransition.start();
@@ -9291,7 +9261,7 @@ up.motion = (function () {
         return { transform: `translate(${dx}px, ${dy}px)` };
     }
     function noTranslateCSS() {
-        return { transform: null };
+        return { transform: '' };
     }
     function untranslatedBox(element) {
         e.setStyle(element, noTranslateCSS());