Outsource rtl handling

tinydesk · Jul 6, 2016 · 1642783 · 1642783
1 parent b9c3f4c
commit 1642783
Showing 5 changed files with 18 additions and 127 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
+bower_components
 gh-pages
diff --git a/bower.json b/bower.json
@@ -1,7 +1,10 @@
 {
   "name": "angular-tileview",
   "description": "A tileview for angular",
-  "main": ["dist/tileview.js", "dist/tileview.css"],
+  "main": [
+    "dist/tileview.js",
+    "dist/tileview.css"
+  ],
   "authors": [
     "Hannes Widmoser <[email protected]>"
   ],
@@ -13,5 +16,8 @@
     "bower_components",
     "test",
     "tests"
-  ]
+  ],
+  "dependencies": {
+    "angular-scroll-rtl": "^0.1.1"
+  }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -69,6 +69,7 @@
 
     <!-- Le javascript -->
     <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
+    <script type="application/javascript" src="bower_components/angular-scroll-rtl/dist/angular-scroll-rtl.js"></script>
     <script type="application/javascript" src="dist/tileview.js"></script>
     <script type="application/javascript">
       angular.module('demoApp', ['td.tileview'])

diff --git a/dist/tileview.js b/dist/tileview.js
@@ -1,59 +1,6 @@
 (function () {
     'use strict';
-    var mod = angular.module('td.tileview', []);
-    mod.factory('TileViewUtil', ['$document', function ($document) {
-            function getRTLHorizontalScrollType() {
-                var body = $document.find('body');
-                var tmpElem = angular.element('<div dir="rtl" style="font-size: 14px; width: 1px; height: 1px; position: absolute; top: -1000px; overflow: scroll">A</div>');
-                body.append(tmpElem);
-                var type = 'reverse';
-                if (tmpElem[0].scrollLeft > 0) {
-                    type = 'default';
-                }
-                else {
-                    tmpElem[0].scrollLeft = 1;
-                    if (tmpElem[0].scrollLeft === 0) {
-                        type = 'negative';
-                    }
-                }
-                tmpElem.remove();
-                return type;
-            }
-            //Copyright 2010 Nicholas C. Zakas. All rights reserved.
-            //MIT Licensed
-            function getDirection(element) {
-                var result = null;
-                if (element) {
-                    if (window.getComputedStyle) {
-                        result = window.getComputedStyle(element, null).direction;
-                    }
-                    else if (element.currentStyle) {
-                        result = element.currentStyle.direction;
-                    }
-                }
-                return result;
-            }
-            var rtlHorizontalScrollType = getRTLHorizontalScrollType();
-            var getHorizontalScrollPosition = function (element, isRtl) {
-                if (isRtl) {
-                    switch (rtlHorizontalScrollType) {
-                        case 'default':
-                            return element.scrollWidth - element.clientWidth - element.scrollLeft;
-                        case 'reverse':
-                            return element.scrollLeft;
-                        case 'negative':
-                            return -element.scrollLeft;
-                    }
-                }
-                else {
-                    return element.scrollLeft;
-                }
-            };
-            return {
-                getHorizontalScrollPosition: getHorizontalScrollPosition,
-                getDirection: getDirection
-            };
-        }]);
+    var mod = angular.module('td.tileview', ['td.scroll']);
     /**
        * @ngdoc directive
        * @name td.tileview.directive:tdTileview
@@ -90,7 +37,7 @@
      * - **debounce** - {number} - Debounce for the scroll event. A value of `0` is interpreted as no debounce. **Default**: 0.
      * - **afterScrollDelay** - {number} - Time to wait in order to decide whether a scroll movement has finished. **Default**: 100.
      */
-    mod.directive('tdTileview', ['$compile', '$templateCache', '$timeout', '$window', 'TileViewUtil', function ($compile, $templateCache, $timeout, $window, TileViewUtil) {
+    mod.directive('tdTileview', ['$compile', '$templateCache', '$timeout', '$window', function ($compile, $templateCache, $timeout, $window) {
             return {
                 restrict: 'E',
                 scope: {
@@ -115,7 +62,6 @@
                     var rowCount;
                     var cachedRowCount;
                     var virtualRows = [];
-                    var isRtl = false;
                     function handleTileSizeChange() {
                         forEachElement(function (el) {
                             el.css('width', scope.options.tileSize.width + 'px');
@@ -221,9 +167,8 @@
                         var rect = container[0].getBoundingClientRect();
                         var itemSize = scope.options.tileSize[sizeDimension];
                         var maxScrollPosition = rowCount * itemSize - rect[sizeDimension];
-                        isRtl = TileViewUtil.getDirection(itemContainer[0]) === 'rtl';
                         var scrollPosition = scope.options.alignHorizontal ?
-                            TileViewUtil.getHorizontalScrollPosition(container[0], isRtl) :
+                            container.scrollLeft() :
                             container[0].scrollTop;
                         var scrollEndThreshold = maxScrollPosition - scope.options.scrollEndOffset * itemSize;
                         if (scrollPosition >= scrollEndThreshold && !(lastScrollPosition >= scrollEndThreshold) && scope.options.onScrollEnd !== undefined) {
@@ -258,7 +203,7 @@
                         var translate = Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0);
                         //el.css('transform', `${translate}(${Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0)}px), translateZ(${rowIndex})`);
                         if (scope.options.alignHorizontal) {
-                            if (isRtl) {
+                            if (itemContainer.direction() === 'rtl') {
                                 translate = -translate;
                             }
                             el.css('transform', "translate3d(" + translate + "px, 0px, 0)");

diff --git a/src/tileview.ts b/src/tileview.ts
@@ -4,65 +4,7 @@ declare const angular: any;
 (() => {
   'use strict';
 
-  const mod = angular.module('td.tileview', []);
-
-  mod.factory('TileViewUtil', ['$document', ($document) => {
-
-    function getRTLHorizontalScrollType() {
-      const body = $document.find('body');
-      const tmpElem = angular.element('<div dir="rtl" style="font-size: 14px; width: 1px; height: 1px; position: absolute; top: -1000px; overflow: scroll">A</div>');
-      body.append(tmpElem);
-      let type = 'reverse';
-      if (tmpElem[0].scrollLeft > 0) {
-        type = 'default';
-      } else {
-        tmpElem[0].scrollLeft = 1;
-          if (tmpElem[0].scrollLeft === 0) {
-              type = 'negative';
-          }
-      }
-      tmpElem.remove();
-      return type;
-    }
-
-    //Copyright 2010 Nicholas C. Zakas. All rights reserved.
-    //MIT Licensed
-    function getDirection(element) {
-        var result = null;
-        if (element){
-            if (window.getComputedStyle){
-                result = window.getComputedStyle(element,null).direction;
-            } else if (element.currentStyle){
-                result = element.currentStyle.direction;
-            }
-        }
-
-        return result;
-    }
-
-    const rtlHorizontalScrollType = getRTLHorizontalScrollType();
-
-    const getHorizontalScrollPosition = (element, isRtl) => {
-      if (isRtl) {
-        switch (rtlHorizontalScrollType) {
-          case 'default':
-            return element.scrollWidth - element.clientWidth - element.scrollLeft;
-          case 'reverse':
-            return element.scrollLeft;
-          case 'negative':
-            return -element.scrollLeft;
-        }
-      } else {
-        return element.scrollLeft;
-      }
-    };
-
-    return {
-      getHorizontalScrollPosition: getHorizontalScrollPosition,
-      getDirection: getDirection
-    };
-
-  }]);
+  const mod = angular.module('td.tileview', ['td.scroll']);
 
   /**
 	 * @ngdoc directive
@@ -100,7 +42,7 @@ declare const angular: any;
    * - **debounce** - {number} - Debounce for the scroll event. A value of `0` is interpreted as no debounce. **Default**: 0.
    * - **afterScrollDelay** - {number} - Time to wait in order to decide whether a scroll movement has finished. **Default**: 100.
    */
-  mod.directive('tdTileview', ['$compile', '$templateCache', '$timeout', '$window', 'TileViewUtil', ($compile, $templateCache, $timeout, $window, TileViewUtil) => {
+  mod.directive('tdTileview', ['$compile', '$templateCache', '$timeout', '$window', ($compile, $templateCache, $timeout, $window) => {
     return {
       restrict: 'E',
       scope: {
@@ -131,8 +73,6 @@ declare const angular: any;
         let cachedRowCount;
 
         let virtualRows = [];
-
-        let isRtl = false;
 
         function handleTileSizeChange() {
           forEachElement(el => {
@@ -255,10 +195,8 @@ declare const angular: any;
 
           const maxScrollPosition = rowCount * itemSize - rect[sizeDimension];
 
-          isRtl = TileViewUtil.getDirection(itemContainer[0]) === 'rtl';
-
           let scrollPosition = scope.options.alignHorizontal ? 
-            TileViewUtil.getHorizontalScrollPosition(container[0], isRtl) :
+            container.scrollLeft() :
             container[0].scrollTop;
 
           const scrollEndThreshold = maxScrollPosition - scope.options.scrollEndOffset * itemSize;
@@ -296,7 +234,7 @@ declare const angular: any;
           let translate = Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0);
           //el.css('transform', `${translate}(${Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0)}px), translateZ(${rowIndex})`);
           if (scope.options.alignHorizontal) {
-            if (isRtl) {
+            if (itemContainer.direction() === 'rtl') {
               translate = -translate;
             }
             el.css('transform', `translate3d(${translate}px, 0px, 0)`);