Fix build scripts

.babelrc

@@ -4,7 +4,7 @@
       "@babel/preset-env",
       {
         "targets": {
-          "browsers": "> 1%, not dead, not IE < 11, not OperaMini all",
+          "browsers": "> 1%, not dead, not IE < 11, IE 11, not OperaMini all",
           "node": "current"
         }
       }

docs/_includes/changelog.html

@@ -1,6 +1,7 @@
 <h2>Changelog<a href="#changelog"></a></h2>
 <p>For a more detailed changelog, visit <a href="https://github.com/Vestride/Shuffle/releases">the latest releases</a> on GitHub.</p>
 <ul>
+  <li><code>v5.3.0</code> 2021-03-23 - Add <code>isRTL</code> option.</li>
   <li><code>v5.2.3</code> 2019-08-29 - Add missing inherited methods from <code>TinyEmitter</code> to TypeScript definitions.</li>
   <li><code>v5.2.2</code> 2019-06-03 - Update TypeScript definitions.</li>
   <li><code>v5.2.1</code> 2018-12-01 - Change `index.d.ts` to use `export default Shuffle` (<a href="https://github.com/Vestride/Shuffle/issues/214#issuecomment-441409237">#214</a>). Upgrade dev dependencies.</li>

docs/css/shuffle-styles.css

@@ -1 +1 @@
-.picture-item{height:220px;margin-top:24px;margin-left:0}.picture-item img{display:block;width:100%}@supports ((-o-object-fit:cover) or (object-fit:cover)){.picture-item img{max-width:none;height:100%;-o-object-fit:cover;object-fit:cover}}.picture-item--h2{height:464px}.picture-item__inner{position:relative;height:100%;overflow:hidden;background:#ecf0f1}img.picture-item__blur{display:none}.picture-item__details{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:1em}.picture-item__description{width:100%;padding:0 2em 1em 1em;margin:0}.picture-item__title{flex-shrink:0;margin-right:4px}.picture-item__tags{flex-shrink:1;text-align:right;margin:0}@media screen and (min-width:768px){.picture-item--overlay .picture-item__details{position:absolute;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,.6);color:#fff;overflow:hidden}.picture-item--overlay .picture-item__description{display:none}@supports ((-webkit-filter:blur(1px)) or (filter:blur(1px))) and ((-webkit-clip-path:inset(0 0 0 0)) or (clip-path:inset(0 0 0 0))){.picture-item--overlay .picture-item__blur{position:absolute;z-index:1;top:0;left:0;display:block;-webkit-filter:blur(7px);filter:blur(7px);-webkit-clip-path:inset(170px 0 0 0);clip-path:inset(170px 0 0 0)}.picture-item--overlay .picture-item__details{background:none}.picture-item--overlay .picture-item__tags,.picture-item--overlay .picture-item__title{position:relative;z-index:2}}}.my-shuffle-container{position:relative;overflow:hidden}.my-sizer-element{position:absolute;opacity:0;visibility:hidden}.shuffle--animatein{overflow:visible}.shuffle--animatein .picture-item__inner{opacity:0;transform:translateY(220px)}.shuffle--animatein .picture-item__inner--transition{transition:all .6s ease}.shuffle--animatein .picture-item.in .picture-item__inner{opacity:1;transform:translate(0)}@media screen and (max-width:767px){.picture-item{height:auto;margin-top:20px}.picture-item__description,.picture-item__details{font-size:.875em;padding:.625em}.picture-item__description{padding-right:.875em;padding-bottom:1.25em}.picture-item--h2{height:auto}}
+.picture-item{height:220px;margin-top:24px;margin-left:0}.picture-item img{display:block;width:100%}@supports ((-o-object-fit: cover) or (object-fit: cover)){.picture-item img{max-width:none;height:100%;-o-object-fit:cover;object-fit:cover}}.picture-item--h2{height:464px}.picture-item__inner{position:relative;height:100%;overflow:hidden;background:#ecf0f1}img.picture-item__blur{display:none}.picture-item__details{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:1em}.picture-item__description{width:100%;padding:0 2em 1em 1em;margin:0}.picture-item__title{flex-shrink:0;margin-right:4px}.picture-item__tags{flex-shrink:1;text-align:right;margin:0}@media screen and (min-width:768px){.picture-item--overlay .picture-item__details{position:absolute;bottom:0;left:0;width:100%;background-color:rgba(0,0,0,.6);color:#fff;overflow:hidden}.picture-item--overlay .picture-item__description{display:none}@supports (filter:blur(1px)) and ((-webkit-clip-path: inset(0 0 0 0)) or (clip-path: inset(0 0 0 0))){.picture-item--overlay .picture-item__blur{position:absolute;z-index:1;top:0;left:0;display:block;filter:blur(7px);-webkit-clip-path:inset(170px 0 0 0);clip-path:inset(170px 0 0 0)}.picture-item--overlay .picture-item__details{background:none}.picture-item--overlay .picture-item__tags,.picture-item--overlay .picture-item__title{position:relative;z-index:2}}}.my-shuffle-container{position:relative;overflow:hidden}.my-sizer-element{position:absolute;opacity:0;visibility:hidden}.shuffle--animatein{overflow:visible}.shuffle--animatein .picture-item__inner{opacity:0;transform:translateY(220px)}.shuffle--animatein .picture-item__inner--transition{transition:all .6s ease}.shuffle--animatein .picture-item.in .picture-item__inner{opacity:1;transform:translate(0)}@media screen and (max-width:767px){.picture-item{height:auto;margin-top:20px}.picture-item__description,.picture-item__details{font-size:.875em;padding:.625em}.picture-item__description{padding-right:.875em;padding-bottom:1.25em}.picture-item--h2{height:auto}}

docs/dist/shuffle.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.Shuffle = factory());
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Shuffle = factory());
 }(this, (function () { 'use strict';
 
   function _classCallCheck(instance, Constructor) {
@@ -63,7 +63,7 @@
     if (typeof Proxy === "function") return true;
 
     try {
-      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
       return true;
     } catch (e) {
       return false;
@@ -87,11 +87,13 @@
   }
 
   function _createSuper(Derived) {
-    return function () {
+    var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+    return function _createSuperInternal() {
       var Super = _getPrototypeOf(Derived),
           result;
 
-      if (_isNativeReflectConstruct()) {
+      if (hasNativeReflectConstruct) {
         var NewTarget = _getPrototypeOf(this).constructor;
 
         result = Reflect.construct(Super, arguments, NewTarget);
@@ -366,15 +368,20 @@
     HIDDEN: 'shuffle-item--hidden'
   };
 
-  var id = 0;
+  var id$1 = 0;
 
   var ShuffleItem = /*#__PURE__*/function () {
-    function ShuffleItem(element) {
+    function ShuffleItem(element, isRTL) {
       _classCallCheck(this, ShuffleItem);
 
-      id += 1;
+      id$1 += 1;
-      this.id = id;
+      this.id = id$1;
       this.element = element;
+      /**
+       * Set correct direction of item
+       */
+
+      this.isRTL = isRTL;
       /**
        * Used to separate items for layout and shrink.
        */
@@ -411,6 +418,7 @@
       value: function init() {
         this.addClasses([Classes.SHUFFLE_ITEM, Classes.VISIBLE]);
         this.applyCss(ShuffleItem.Css.INITIAL);
+        this.applyCss(this.isRTL ? ShuffleItem.Css.DIRECTION.rtl : ShuffleItem.Css.DIRECTION.ltr);
         this.scale = ShuffleItem.Scale.VISIBLE;
         this.point = new Point();
       }
@@ -457,10 +465,17 @@
     INITIAL: {
       position: 'absolute',
       top: 0,
-      left: 0,
       visibility: 'visible',
       willChange: 'transform'
     },
+    DIRECTION: {
+      ltr: {
+        left: 0
+      },
+      rtl: {
+        right: 0
+      }
+    },
     VISIBLE: {
       before: {
         opacity: 1,
@@ -898,7 +913,7 @@
   } // Used for unique instance variables
 
 
-  var id$1 = 0;
+  var id = 0;
 
   var Shuffle = /*#__PURE__*/function (_TinyEmitter) {
     _inherits(Shuffle, _TinyEmitter);
@@ -945,8 +960,8 @@
       }
 
       _this.element = el;
-      _this.id = 'shuffle_' + id$1;
+      _this.id = 'shuffle_' + id;
-      id$1 += 1;
+      id += 1;
 
       _this._init();
 
@@ -1246,7 +1261,7 @@
         return Array.from(this.element.children).filter(function (el) {
           return matchesSelector(el, _this3.options.itemSelector);
         }).map(function (el) {
-          return new ShuffleItem(el);
+          return new ShuffleItem(el, _this3.options.isRTL);
         });
       }
       /**
@@ -1611,11 +1626,17 @@
         var styles = Object.assign({}, styleObject);
 
         if (this.options.useTransforms) {
+          var sign = this.options.isRTL ? '-' : '';
           var x = this.options.roundTransforms ? Math.round(item.point.x) : item.point.x;
           var y = this.options.roundTransforms ? Math.round(item.point.y) : item.point.y;
-          styles.transform = "translate(".concat(x, "px, ").concat(y, "px) scale(").concat(item.scale, ")");
+          styles.transform = "translate(".concat(sign).concat(x, "px, ").concat(y, "px) scale(").concat(item.scale, ")");
         } else {
-          styles.left = item.point.x + 'px';
+          if (this.options.isRTL) {
+            styles.right = item.point.x + 'px';
+          } else {
+            styles.left = item.point.x + 'px';
+          }
+
           styles.top = item.point.y + 'px';
         }
 
@@ -1849,7 +1870,7 @@
         var _this9 = this;
 
         var items = arrayUnique(newItems).map(function (el) {
-          return new ShuffleItem(el);
+          return new ShuffleItem(el, _this9.options.isRTL);
         }); // Add classes and set initial positions.
 
         this._initItems(items); // Determine which items will go with the current filter.
@@ -2198,6 +2219,8 @@
     filterMode: Shuffle.FilterMode.ANY,
     // Attempt to center grid items in each row.
     isCentered: false,
+    // Attempt to align grid items to right.
+    isRTL: false,
     // Whether to round pixel values used in translate(x, y). This usually avoids
     // blurriness.
     roundTransforms: true

gulp/config.js

@@ -1,6 +1,6 @@
-const babel = require('rollup-plugin-babel');
+const { babel } = require('@rollup/plugin-babel');
-const resolve = require('rollup-plugin-node-resolve');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
-const commonjs = require('rollup-plugin-commonjs');
+const commonjs = require('@rollup/plugin-commonjs');
 const { terser } = require('rollup-plugin-terser');
 
 const commonjsOptions = {
@@ -33,11 +33,7 @@ module.exports.configs = [
       format,
     },
     cache: undefined,
-    plugins: [
+    plugins: [nodeResolve(), commonjs(commonjsOptions), babel(babelOptions)],
-      resolve(),
-      commonjs(commonjsOptions),
-      babel(babelOptions),
-    ],
   },
 
   {
@@ -49,11 +45,7 @@ module.exports.configs = [
       format: 'es',
     },
     cache: undefined,
-    plugins: [
+    plugins: [nodeResolve(), commonjs(commonjsOptions), babel(babelOptions)],
-      resolve(),
-      commonjs(commonjsOptions),
-      babel(babelOptions),
-    ],
   },
 
   {
@@ -65,12 +57,7 @@ module.exports.configs = [
       format,
     },
     cache: undefined,
-    plugins: [
+    plugins: [nodeResolve(), commonjs(commonjsOptions), babel(babelOptions), terser(minifyOptions)],
-      resolve(),
-      commonjs(commonjsOptions),
-      babel(babelOptions),
-      terser(minifyOptions),
-    ],
   },
 ];
 

package.json

@@ -51,6 +51,9 @@
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
     "autoprefixer": "^10.2.4",
     "cssnano": "^4.1.10",
     "eslint": "^7.5.0",
@@ -61,10 +64,8 @@
     "gulp-sass": "^4.0.0",
     "gulp-shell": "^0.8.0",
     "jest": "^26.1.0",
+    "postcss": "^8.2.8",
     "rollup": "^2.2.0",
-    "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-node-resolve": "^5.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "sinon": "^9.0.0",
     "typescript": "^4.0.5"