release: v1.5.0

README.ja.md

@@ -35,6 +35,7 @@
   - [font_weight](#font_weight)
   - [repeat](#repeat)
   - [stripe](#stripe)
+  - [rtl](#rtl)
 - [個別に値を指定する方法](#%E5%80%8B%E5%88%A5%E3%81%AB%E5%80%A4%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)
   - [例1: 色の変更](#%E4%BE%8B1-%E8%89%B2%E3%81%AE%E5%A4%89%E6%9B%B4)
   - [例2: 複数設定](#%E4%BE%8B2-%E8%A4%87%E6%95%B0%E8%A8%AD%E5%AE%9A)
@@ -85,27 +86,31 @@ $('.marker-animation').markerAnimation({
     color: '#fe9'
 });
 ```
+
 ### thickness
 マーカーの太さを指定
 ```javascript
 $('.marker-animation').markerAnimation({
     thickness: '.6em'
 });
 ```
+
 ### duration
 マーカーを塗るのを完了するまでの時間を指定
 ```javascript
 $('.marker-animation').markerAnimation({
     duration: '2s'
 });
 ```
+
 ### delay
 マーカーを塗るのを開始するまでの時間を指定
 ```javascript
 $('.marker-animation').markerAnimation({
     duration: '.1s'
 });
 ```
+
 ### font_weight
 文字の太さを指定
 ```javascript
@@ -115,6 +120,7 @@ $('.marker-animation').markerAnimation({
 ```
 デフォルトは太字です。  
 太字にしない場合はnullを設定してください。
+
 ### repeat
 アニメーションを繰り返すかどうかを指定
 ```javascript
@@ -123,6 +129,7 @@ $('.marker-animation').markerAnimation({
 });
 ```
 trueにすると一度画面から外れて再び表示された際に再度アニメーションが実行されます。
+
 ### stripe
 ストライプデザインにするかどうかを指定
 ```javascript
@@ -133,6 +140,14 @@ $('.marker-animation').markerAnimation({
 これが `true` の場合はアニメーションなしの動作になります。  
 ![stripe](https://raw.githubusercontent.com/technote-space/jquery.marker-animation/images/stripe.png)
 
+### rtl
+右書き動作にするかどうかを指定
+```javascript
+$('.marker-animation').markerAnimation({
+    rtl: false
+});
+```
+
 ## 個別に値を指定する方法
 `data-ma_[オプション名]` の形式で個別にオプションを指定することが可能です。
 ### 例1: 色の変更

README.md

@@ -35,6 +35,7 @@ jQuery plugin to add under line animation like highlighter.
   - [font_weight](#font_weight)
   - [repeat](#repeat)
   - [stripe](#stripe)
+  - [rtl](#rtl)
 - [How to set the value for each](#how-to-set-the-value-for-each)
   - [e.g. Change color](#eg-change-color)
   - [e.g Multiple options](#eg-multiple-options)
@@ -82,27 +83,31 @@ $('.marker-animation').markerAnimation({
     color: '#fe9'
 });
 ```
+
 ### thickness
 Set the thickness of line
 ```javascript
 $('.marker-animation').markerAnimation({
     thickness: '.6em'
 });
 ```
+
 ### duration
 Set the time to complete drawing a line
 ```javascript
 $('.marker-animation').markerAnimation({
     duration: '2s'
 });
 ```
+
 ### delay
 Set the time to start drawing a line
 ```javascript
 $('.marker-animation').markerAnimation({
     duration: '.1s'
 });
 ```
+
 ### font_weight
 Set the thickness of characters
 ```javascript
@@ -112,6 +117,7 @@ $('.marker-animation').markerAnimation({
 ```
 \[default = `bold`]  
 If you do not want to make it bold, please set `null`.
+
 ### repeat
 Set whether to repeat the animation
 ```javascript
@@ -120,6 +126,7 @@ $('.marker-animation').markerAnimation({
 });
 ```
 If this set to true, the animation will be executed again when it is off screen and displayed again.
+
 ### stripe
 Set whether to make it stripe design
 ```javascript
@@ -131,6 +138,14 @@ If this set to true, the animation will not be executed.
 
 ![stripe](https://raw.githubusercontent.com/technote-space/jquery.marker-animation/images/stripe.png)
 
+### rtl
+Set whether to support rtl
+```javascript
+$('.marker-animation').markerAnimation({
+    rtl: false
+});
+```
+
 ## How to set the value for each
 You can set options in the following format.   
 ```

__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>

package.json

@@ -1,62 +1,62 @@
 {
   "name": "jquery.marker-animation",
-  "version": "1.4.30",
+  "version": "1.5.0",
   "description": "Marker animation jQuery plugin",
-  "author": {
-    "name": "Technote",
-    "email": "technote.space@gmail.com",
-    "url": "https://technote.space"
-  },
-  "license": "MIT",
   "keywords": [
     "jquery-plugin",
     "marker animation",
     "highlighter"
   ],
   "homepage": "https://github.com/technote-space/jquery.marker-animation#readme",
+  "bugs": {
+    "url": "https://github.com/technote-space/jquery.marker-animation/issues"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/technote-space/jquery.marker-animation.git"
   },
-  "bugs": {
-    "url": "https://github.com/technote-space/jquery.marker-animation/issues"
+  "license": "MIT",
+  "author": {
+    "name": "Technote",
+    "email": "technote.space@gmail.com",
+    "url": "https://technote.space"
   },
   "main": "build/index.js",
   "files": [
     "build"
   ],
+  "scripts": {
+    "build": "webpack --mode production --config webpack.config.js",
+    "cover": "jest --coverage",
+    "cover:update": "jest --coverage --updateSnapshot",
+    "develop": "webpack --mode development --config webpack.config.js",
+    "lint": "eslint 'src/**/*.js' '__tests__/**/*.js' --cache",
+    "lint:fix": "eslint --fix 'src/**/*.js' '__tests__/**/*.js'",
+    "start": "yarn build",
+    "test": "yarn lint && yarn cover",
+    "test:update": "yarn lint && yarn cover:update",
+    "update": "npx npm-check-updates -u && yarn install && yarn upgrade && yarn audit"
+  },
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
     "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
     "@babel/register": "^7.11.5",
-    "babel-jest": "^26.3.0",
+    "babel-jest": "^26.5.2",
     "babel-loader": "^8.1.0",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.5.0",
-    "eslint": "^7.9.0",
-    "jest": "^26.4.2",
+    "enzyme-to-json": "^3.6.1",
+    "eslint": "^7.11.0",
+    "jest": "^26.5.3",
     "jquery-inview": "^1.1.2",
     "speed-measure-webpack-plugin": "^1.3.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12"
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "build": "webpack --mode production --config webpack.config.js",
-    "start": "yarn build",
-    "test": "yarn lint && yarn cover",
-    "test:update": "yarn lint && yarn cover:update",
-    "lint": "eslint 'src/**/*.js' '__tests__/**/*.js' --cache",
-    "lint:fix": "eslint --fix 'src/**/*.js' '__tests__/**/*.js'",
-    "cover": "jest --coverage",
-    "cover:update": "jest --coverage --updateSnapshot",
-    "develop": "webpack --mode development --config webpack.config.js",
-    "update": "npx npm-check-updates -u && yarn install && yarn upgrade && yarn audit"
   }
 }

src/constants.js

@@ -1,13 +1,13 @@
-export const NAMESPACE = 'markerAnimation';
-export const PREFIX = 'ma_';
-export const RESET_KEYS = [
+export const NAMESPACE     = 'markerAnimation';
+export const PREFIX        = 'ma_';
+export const RESET_KEYS    = [
   'background',
   'padding-bottom',
   'font-weight',
   'transition',
 ];
-export const MARKER_DATA = 'data-marker_animation';
-export const ZERO_SEC = '0s';
+export const MARKER_DATA   = 'data-marker_animation';
+export const ZERO_SEC      = '0s';
 export const DESTROY_EVENT = `destroy.${NAMESPACE}`;
 export const REFRESH_EVENT = `refresh.${NAMESPACE}`;
-export const INVIEW_EVENT = `inview.${NAMESPACE}`;
+export const INVIEW_EVENT  = `inview.${NAMESPACE}`;

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);