-
Notifications
You must be signed in to change notification settings - Fork 0
/
rotator.js
139 lines (122 loc) · 4.58 KB
/
rotator.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/*
* Rotator 2.0.1
* Copyright © Zaim Ramlan
*/
class Rotator {
/**
* Initializes an instance of Rotator.
*
* @constructor
* @author: Zaim Ramlan
* @param {array} elementIds The array of `id`s of the elements to be rotated.
*/
constructor(elementIds) {
this._anticlockwiseButton = 0;
this._clockwiseButton = 1;
this._rotatorGroups = this._group(elementIds);
}
/**
* Configures the buttons to rotate the element and temporarily store the
* rotation angle, for form submission.
*/
configure() {
var self = this;
self._rotatorGroups.forEach((group) => {
self._createHiddenInputFor(group);
self._bindButton(self._anticlockwiseButton, group);
self._bindButton(self._clockwiseButton, group);
});
}
/**
* Creates the rotator group object based on the given element IDs.
*
* @param {array} elementIds The array of `id`s of the elements to be rotated.
*
* Each rotator group object contains the element ID itself, its hidden input ID,
* its clockwise and anticlockwise button IDs respectively.
*/
_group(elementIds) {
var rotatorGroups = [];
elementIds.forEach((id) => {
var group = {
element: id,
hiddenInput: `${id}-rotation`,
clockwiseButton: `${id}-clockwise-button`,
anticlockwiseButton: `${id}-anticlockwise-button`
};
rotatorGroups.push(group);
});
return rotatorGroups;
}
/**
* Creates the hidden input to store the rotation angle for the given rotator group.
*
* @param {object} rotatorGroup The object containing the rotator group's related IDs.
*/
_createHiddenInputFor(rotatorGroup) {
var element = document.getElementById(rotatorGroup.element);
if (element !== null) {
var hiddenInput = document.createElement("input");
hiddenInput.type = "hidden";
hiddenInput.value = "0";
hiddenInput.id = rotatorGroup.hiddenInput;
element.appendChild(hiddenInput);
}
}
/**
* Binds the given button type for the given rotator group to rotate the rotator group's element in
* clockwise/anticlowise direction.
*
* @param {integer} buttonType The constant integer to represent the clockwise/anticlockwise buttons.
* @param {object} rotatorGroup The object containing the rotator group's related IDs.
*/
_bindButton(buttonType, rotatorGroup) {
var self = this;
var isClockwiseButton = buttonType === self._clockwiseButton;
var buttonId = isClockwiseButton ? rotatorGroup.clockwiseButton : rotatorGroup.anticlockwiseButton;
var button = document.getElementById(buttonId);
if (button !== null) {
button.onclick = function() {
self._rotateElementBasedOn(buttonType, rotatorGroup);
};
}
}
/**
* Rotates the element based on the button type and the rotator group.
*
* @param {integer} buttonType The constant integer to represent the clockwise/anticlockwise buttons.
* @param {object} rotatorGroup The object containing the rotator group's related IDs.
*/
_rotateElementBasedOn(buttonType, rotatorGroup) {
var hiddenInput = document.getElementById(rotatorGroup.hiddenInput);
var storedRotation = hiddenInput.value;
var rotationAngle = parseInt(storedRotation);
switch (buttonType) {
case this._anticlockwiseButton:
if (rotationAngle === 0) rotationAngle = 360;
rotationAngle -= 90;
break;
case this._clockwiseButton:
rotationAngle += 90;
if (rotationAngle === 360) rotationAngle = 0;
break;
}
hiddenInput.value = rotationAngle;
var element = document.getElementById(rotatorGroup.element);
if (element !== null) element.style = this._elementStyleRotatedBy(rotationAngle);
}
/**
* Creates the rotation to the element via CSS `transform` property.
*
* @param {integer} angle The rotation angle.
*/
_elementStyleRotatedBy(angle) {
css = "-webkit-transform: rotate(" + angle + "deg);";
css += " -moz-transform: rotate(" + angle + "deg);";
css += " -ms-transform: rotate(" + angle + "deg);";
css += " -o-transform: rotate(" + angle + "deg);";
css += " transform: rotate(" + angle + "deg);";
return css;
}
}
module.exports = Rotator;