-
Notifications
You must be signed in to change notification settings - Fork 0
/
direction.js
96 lines (75 loc) · 1.78 KB
/
direction.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
'use strict';
/**
* Sets the reading direction of the document based on URL Query Parameter
* or toggle click. Stores the user's preference in local storage.
*/
class Direction {
/**
* @constructor
*
* @return {Class} Instance of Direction
*/
constructor() {
/**
* Settings
*/
this.storage = Direction.storage;
this.selectors = Direction.selectors;
/**
* Set the initial desired direction
*/
let params = new URLSearchParams(window.location.search);
let dir = (params.get('dir')) ?
params.get('dir') : localStorage.getItem(this.storage.DIR);
if (dir) this.set(dir);
/**
* Add event listeners for toggling
*/
document.querySelector('body').addEventListener('click', event => {
if (!event.target.matches(this.selectors.TOGGLE))
return;
this.click();
});
return this;
}
/**
* The click event handler for the toggle
*
* @return {Class} Instance of Direction
*/
click() {
let current = document.documentElement.getAttribute('dir');
let direction = (current === 'rtl') ? 'ltr' : 'rtl';
this.set(direction);
return this;
}
/**
* Sets the attribute on the root element and in local storage.
*
* @param {String} direction The desired direction; 'ltr' or 'rtl'
*
* @return {Class} Instance of Direction
*/
set(direction) {
document.documentElement.setAttribute('dir', direction);
localStorage.setItem(this.storage.DIR, direction);
return this;
}
}
/**
* Local storage keys
*
* @var {Object}
*/
Direction.storage = {
DIR: '--nyco-direction'
};
/**
* Selector strings for the class
*
* @var {Object}
*/
Direction.selectors = {
TOGGLE: '[data-js="direction"]'
};
export default Direction;