Merge pull request #211 from technote-space/feature/#209

feat: support rtl (#209)

Author: technote-space

__tests__/functions.js

@@ -162,9 +162,10 @@ describe('getCss', () => {
       duration: ZERO_SEC,
       'padding_bottom': 'a',
       cssFilter: css => css,
+      rtl: true,
     });
     expect(css).toHaveProperty('background-position');
-    expect(css['background-position']).toBe('left -100% center');
+    expect(css['background-position']).toBe('right 0 center');
   });
 
   it('should get stripe css', () => {

bin/gh-pages/plugin.js

@@ -75,7 +75,17 @@ $(() => {
 		<p>
 			Dolly'll never go away again
 		</p>
-
+		<p style="direction: rtl">
+			<bdo lang="ar" dir="rtl">
+				<span class="marker-animation" data-ma_rtl="true" data-ma_repeat="true">
+				هذا اختبار اللغة العربية.
+				</span>
+				هل هذه المكتبة تعمل بشكل صحيح؟
+				<span class="marker-animation" data-ma_rtl="true" data-ma_color="#00ffcc">
+				إذا كان لديك أي مشاكل ، يرجى الإبلاغ عنها.
+				</span>
+			</bdo>
+		</p>
 		<p>
 			<a class="btn btn-light-blue reset-animation">Reset</a>
 		</p>

src/defaults.js

@@ -12,4 +12,5 @@ export const SETTINGS_DEFAULTS = {
   cssFilter: function(css) {
     return css;
   },
+  rtl: false,
 };

src/functions.js

@@ -61,13 +61,31 @@ export const isStatic = options => options.stripe || (ZERO_SEC === options.delay
  */
 export const getCss = options => options.cssFilter(options.stripe ? getStripeCss(options) : getMarkerCss(options));
 
+/**
+ * @param {object} options options
+ * @returns {string} direction
+ */
+const getDirection = options => options.rtl ? 'right' : 'left';
+
+/**
+ * @param {object} options options
+ * @returns {string} percentage
+ */
+const getStartPercentage = options => options.rtl ? '0' : '-100%';
+
+/**
+ * @param {object} options options
+ * @returns {string} percentage
+ */
+const getGoalPercentage  = options => options.rtl ? '100%' : '0';
+
 /**
  * @param {object} options options
  * @returns {object} css
  */
 const getCommonCss = options => Object.assign({
   'display': 'inline',
-  'background-position': 'left 0 center',
+  'background-position': `${getDirection(options)} ${getGoalPercentage(options)} center`,
   'padding-bottom': options.padding_bottom,
 }, options.font_weight ? {
   'font-weight': options.font_weight,
@@ -82,7 +100,7 @@ const getMarkerCss = options => Object.assign({}, getCommonCss(options), {
   'background-repeat': 'repeat-x',
   'background-image': `linear-gradient(to right, rgba(255,255,255,0) 50%, ${options.color} 50%)`,
 }, isStatic(options) ? {
-  'background-position': 'left -100% center',
+  'background-position': `${getDirection(options)} ${getStartPercentage(options)} center`,
 } : {});
 
 /**
@@ -133,7 +151,7 @@ export const stop = target => {
 export const onInView = (target, options) => {
   target.stop(true, true).css({
     transition: `background-position ${options.duration} ${options.function} ${options.delay}`,
-    'background-position': 'left -100% center',
+    'background-position': `${getDirection(options)} ${getStartPercentage(options)} center`,
   });
   if (!options.repeat) {
     stop(target);