universal-transition - npm Package Compare versions

Comparing version 0.4.7 to 0.4.8

dist/transition.factory.js

@@ -81,2 +81,4 @@ module.exports = function(require, exports, module) {
 
+var _styleUnit = __webpack_require__(2);
+
 function transition(node, styles, options, callback) {
@@ -92,14 +94,18 @@ if (typeof options == 'function' || options == null) {
 
+  for (var prop in styles) {
+    styles[prop] = (0, _styleUnit.convertUnit)(styles[prop], prop);
+  }
+
   if (_universalEnv.isWeex) {
-    var animation = __webpack_require__(2);
+    var animation = __webpack_require__(3);
     animation.transition(node.ref, {
       styles: styles,
-      timingFunction: options.timingFunction,
-      delay: options.delay,
-      duration: options.duration
+      timingFunction: options.timingFunction || 'linear',
+      delay: options.delay || 0,
+      duration: options.duration || 0
     }, callback || function () {});
   } else if (_universalEnv.isWeb) {
-    var duration = options.duration; // ms
-    var timingFunction = options.timingFunction;
-    var delay = options.delay; // ms
+    var duration = options.duration || 0; // ms
+    var timingFunction = options.timingFunction || 'linear';
+    var delay = options.delay || 0; // ms
     var transitionValue = 'all ' + duration + 'ms ' + timingFunction + ' ' + delay + 'ms';
@@ -139,4 +145,2 @@
 
-var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 Object.defineProperty(exports, "__esModule", {
@@ -146,7 +150,3 @@ value: true
 
-var _typeof = typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol" ? function (obj) {
-  return typeof obj === "undefined" ? "undefined" : _typeof2(obj);
-} : function (obj) {
-  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof2(obj);
-};
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -161,2 +161,102 @@ // https://www.w3.org/TR/html5/webappapis.html#dom-navigator-appcodename
 /* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isRem = isRem;
+exports.calcRem = calcRem;
+exports.getRem = getRem;
+exports.setRem = setRem;
+exports.isUnitNumber = isUnitNumber;
+exports.convertUnit = convertUnit;
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+var UNITLESS_NUMBER_PROPS = {
+  animationIterationCount: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridRow: true,
+  gridColumn: true,
+  fontWeight: true,
+  lineClamp: true,
+  // We make lineHeight default is px that is diff with w3c spec
+  // lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // Weex only
+  lines: true
+};
+var SUFFIX = 'rem';
+var REM_REG = /[-+]?\d*\.?\d+rem/g;
+
+var defaultRem = void 0;
+
+/**
+ * Is string contains rem
+ * @param {String} str
+ * @returns {Boolean}
+ */
+function isRem(str) {
+  return typeof str === 'string' && str.indexOf(SUFFIX) !== -1;
+}
+
+/**
+ * Calculate rem to pixels: '1.2rem' => 1.2 * rem
+ * @param {String} str
+ * @param {Number} rem
+ * @returns {number}
+ */
+function calcRem(str) {
+  var rem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultRem;
+
+  return str.replace(REM_REG, function (remValue) {
+    return parseFloat(remValue) * rem + 'px';
+  });
+}
+
+function getRem() {
+  return defaultRem;
+}
+
+function setRem(rem) {
+  defaultRem = rem;
+}
+
+function isUnitNumber(val, prop) {
+  return typeof val === 'number' && !UNITLESS_NUMBER_PROPS[prop];
+}
+
+function convertUnit(val, prop) {
+  if (prop && isUnitNumber(val, prop)) {
+    return val * defaultRem + 'px';
+  } else if (isRem(val)) {
+    return calcRem(val);
+  }
+
+  return val;
+}
+
+/***/ }),
+/* 3 */
 /***/ (function(module, exports) {
@@ -163,0 +263,0 @@

dist/transition.js

@@ -103,2 +103,4 @@
 
+var _styleUnit = __webpack_require__(2);
+
 function transition(node, styles, options, callback) {
@@ -114,14 +116,18 @@ if (typeof options == 'function' || options == null) {
 
+  for (var prop in styles) {
+    styles[prop] = (0, _styleUnit.convertUnit)(styles[prop], prop);
+  }
+
   if (_universalEnv.isWeex) {
-    var animation = __webpack_require__(2);
+    var animation = __webpack_require__(3);
     animation.transition(node.ref, {
       styles: styles,
-      timingFunction: options.timingFunction,
-      delay: options.delay,
-      duration: options.duration
+      timingFunction: options.timingFunction || 'linear',
+      delay: options.delay || 0,
+      duration: options.duration || 0
     }, callback || function () {});
   } else if (_universalEnv.isWeb) {
-    var duration = options.duration; // ms
-    var timingFunction = options.timingFunction;
-    var delay = options.delay; // ms
+    var duration = options.duration || 0; // ms
+    var timingFunction = options.timingFunction || 'linear';
+    var delay = options.delay || 0; // ms
     var transitionValue = 'all ' + duration + 'ms ' + timingFunction + ' ' + delay + 'ms';
@@ -161,4 +167,2 @@
 
-var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 Object.defineProperty(exports, "__esModule", {
@@ -168,7 +172,3 @@ value: true
 
-var _typeof = typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol" ? function (obj) {
-  return typeof obj === "undefined" ? "undefined" : _typeof2(obj);
-} : function (obj) {
-  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof2(obj);
-};
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -183,2 +183,102 @@ // https://www.w3.org/TR/html5/webappapis.html#dom-navigator-appcodename
 /* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isRem = isRem;
+exports.calcRem = calcRem;
+exports.getRem = getRem;
+exports.setRem = setRem;
+exports.isUnitNumber = isUnitNumber;
+exports.convertUnit = convertUnit;
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+var UNITLESS_NUMBER_PROPS = {
+  animationIterationCount: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridRow: true,
+  gridColumn: true,
+  fontWeight: true,
+  lineClamp: true,
+  // We make lineHeight default is px that is diff with w3c spec
+  // lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  // Weex only
+  lines: true
+};
+var SUFFIX = 'rem';
+var REM_REG = /[-+]?\d*\.?\d+rem/g;
+
+var defaultRem = void 0;
+
+/**
+ * Is string contains rem
+ * @param {String} str
+ * @returns {Boolean}
+ */
+function isRem(str) {
+  return typeof str === 'string' && str.indexOf(SUFFIX) !== -1;
+}
+
+/**
+ * Calculate rem to pixels: '1.2rem' => 1.2 * rem
+ * @param {String} str
+ * @param {Number} rem
+ * @returns {number}
+ */
+function calcRem(str) {
+  var rem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultRem;
+
+  return str.replace(REM_REG, function (remValue) {
+    return parseFloat(remValue) * rem + 'px';
+  });
+}
+
+function getRem() {
+  return defaultRem;
+}
+
+function setRem(rem) {
+  defaultRem = rem;
+}
+
+function isUnitNumber(val, prop) {
+  return typeof val === 'number' && !UNITLESS_NUMBER_PROPS[prop];
+}
+
+function convertUnit(val, prop) {
+  if (prop && isUnitNumber(val, prop)) {
+    return val * defaultRem + 'px';
+  } else if (isRem(val)) {
+    return calcRem(val);
+  }
+
+  return val;
+}
+
+/***/ }),
+/* 3 */
 /***/ (function(module, exports) {
@@ -185,0 +285,0 @@

dist/transition.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define)define("universal-transition",function(n,t,o){o.exports=e()});else{var n;n="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:this,n.UniversalTransition=e()}}(function(){return function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var t={};return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=0)}([function(e,n,t){"use strict";function o(e,n,o,r){if("function"!=typeof o&&null!=o||(r=o,o={timingFunction:"ease",duration:0,delay:0}),i.isWeex){t(2).transition(e.ref,{styles:n,timingFunction:o.timingFunction,delay:o.delay,duration:o.duration},r||function(){})}else if(i.isWeb){var u=o.duration,f=o.timingFunction,s=o.delay,a="all "+u+"ms "+f+" "+s+"ms";if(e.style.transition=a,e.style.webkitTransition=a,r){var d=function n(t){t.stopPropagation(),e.removeEventListener("webkitTransitionEnd",n),e.removeEventListener("transitionend",n),e.style.transition="",e.style.webkitTransition="",r()};e.addEventListener("webkitTransitionEnd",d),e.addEventListener("transitionend",d)}for(var l in n){var c=n[l];e.style[l]=c}}}Object.defineProperty(n,"__esModule",{value:!0}),n.default=o;var i=t(1);e.exports=n.default},function(e,n,t){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};Object.defineProperty(n,"__esModule",{value:!0});var i="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return void 0===e?"undefined":o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":void 0===e?"undefined":o(e)};n.isWeb="object"===("undefined"==typeof navigator?"undefined":i(navigator))&&("Mozilla"===navigator.appCodeName||"Gecko"===navigator.product),n.isNode="undefined"!=typeof process&&!(!process.versions||!process.versions.node),n.isWeex="function"==typeof callNative,n.isReactNative="undefined"!=typeof __fbBatchedBridgeConfig},function(e,n){e.exports=require("@weex-module/animation")}])});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define)define("universal-transition",function(n,t,o){o.exports=e()});else{var n;n="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:this,n.UniversalTransition=e()}}(function(){return function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var t={};return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=0)}([function(e,n,t){"use strict";function o(e,n,o,u){"function"!=typeof o&&null!=o||(u=o,o={timingFunction:"ease",duration:0,delay:0});for(var a in n)n[a]=(0,r.convertUnit)(n[a],a);if(i.isWeex){t(3).transition(e.ref,{styles:n,timingFunction:o.timingFunction||"linear",delay:o.delay||0,duration:o.duration||0},u||function(){})}else if(i.isWeb){var f=o.duration||0,s=o.timingFunction||"linear",l=o.delay||0,d="all "+f+"ms "+s+" "+l+"ms";if(e.style.transition=d,e.style.webkitTransition=d,u){var c=function n(t){t.stopPropagation(),e.removeEventListener("webkitTransitionEnd",n),e.removeEventListener("transitionend",n),e.style.transition="",e.style.webkitTransition="",u()};e.addEventListener("webkitTransitionEnd",c),e.addEventListener("transitionend",c)}for(var p in n){var y=n[p];e.style[p]=y}}}Object.defineProperty(n,"__esModule",{value:!0}),n.default=o;var i=t(1),r=t(2);e.exports=n.default},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};n.isWeb="object"===("undefined"==typeof navigator?"undefined":o(navigator))&&("Mozilla"===navigator.appCodeName||"Gecko"===navigator.product),n.isNode="undefined"!=typeof process&&!(!process.versions||!process.versions.node),n.isWeex="function"==typeof callNative,n.isReactNative="undefined"!=typeof __fbBatchedBridgeConfig},function(e,n,t){"use strict";function o(e){return"string"==typeof e&&-1!==e.indexOf(l)}function i(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:c;return e.replace(d,function(e){return parseFloat(e)*n+"px"})}function r(){return c}function u(e){c=e}function a(e,n){return"number"==typeof e&&!s[n]}function f(e,n){return n&&a(e,n)?e*c+"px":o(e)?i(e):e}Object.defineProperty(n,"__esModule",{value:!0}),n.isRem=o,n.calcRem=i,n.getRem=r,n.setRem=u,n.isUnitNumber=a,n.convertUnit=f;var s={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,lines:!0},l="rem",d=/[-+]?\d*\.?\d+rem/g,c=void 0},function(e,n){e.exports=require("@weex-module/animation")}])});

lib/index.js

@@ -10,2 +10,4 @@ 'use strict';
 
+var _styleUnit = require('style-unit');
+
 function transition(node, styles, options, callback) {
@@ -21,2 +23,6 @@ if (typeof options == 'function' || options == null) {
 
+  for (var prop in styles) {
+    styles[prop] = (0, _styleUnit.convertUnit)(styles[prop], prop);
+  }
+
   if (_universalEnv.isWeex) {
@@ -26,10 +32,10 @@ var animation = require('@weex-module/animation');
       styles: styles,
-      timingFunction: options.timingFunction,
-      delay: options.delay,
-      duration: options.duration
+      timingFunction: options.timingFunction || 'linear',
+      delay: options.delay || 0,
+      duration: options.duration || 0
     }, callback || function () {});
   } else if (_universalEnv.isWeb) {
-    var duration = options.duration; // ms
-    var timingFunction = options.timingFunction;
-    var delay = options.delay; // ms
+    var duration = options.duration || 0; // ms
+    var timingFunction = options.timingFunction || 'linear';
+    var delay = options.delay || 0; // ms
     var transitionValue = 'all ' + duration + 'ms ' + timingFunction + ' ' + delay + 'ms';
@@ -36,0 +42,0 @@

package.json

 {
   "name": "universal-transition",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "A universal transition API.",
@@ -16,4 +16,5 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "universal-env": "^0.4.7"
+    "style-unit": "^0.4.8",
+    "universal-env": "^0.4.8"
   }
 }

src/index.js

 import {isWeex, isWeb} from 'universal-env';
+import {convertUnit} from 'style-unit';
 
@@ -13,2 +14,6 @@ export default function transition(node, styles, options, callback) {
 
+  for (let prop in styles) {
+    styles[prop] = convertUnit(styles[prop], prop);
+  }
+
   if (isWeex) {
@@ -18,10 +23,10 @@ const animation = require('@weex-module/animation');
       styles,
-      timingFunction: options.timingFunction,
-      delay: options.delay,
-      duration: options.duration,
+      timingFunction: options.timingFunction || 'linear',
+      delay: options.delay || 0,
+      duration: options.duration || 0,
     }, callback || function() {});
   } else if (isWeb) {
-    const duration = options.duration; // ms
-    const timingFunction = options.timingFunction;
-    const delay = options.delay;  // ms
+    const duration = options.duration || 0; // ms
+    const timingFunction = options.timingFunction || 'linear';
+    const delay = options.delay || 0;  // ms
     const transitionValue = 'all ' + duration + 'ms '
@@ -28,0 +33,0 @@ + timingFunction + ' ' + delay + 'ms';

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46616

increased by25.62%

Lines of code

642

increased by38.96%

Worsened metrics

Dependency count

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedstyle-unit@^0.4.8

• + Addedstyle-unit@0.4.20(transitive)

• Updateduniversal-env@^0.4.8