-
Notifications
You must be signed in to change notification settings - Fork 3
/
personalization.js
110 lines (101 loc) · 4.54 KB
/
personalization.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
// night mode, make font larger, make font smaller
var allIframes = document.getElementsByTagName('iframe');
var largerFontButton = document.createElement('button');
largerFontButton.innerHTML = '+';
largerFontButton.setAttribute('id', 'larger-font-button');
largerFontButton.style.position = 'fixed';
largerFontButton.style.bottom = '0';
largerFontButton.style.backgroundColor = 'rebeccapurple';
largerFontButton.style.color = 'white';
largerFontButton.style.fontWeight = 'bold';
largerFontButton.style.fontSize = '15px';
largerFontButton.style.borderStyle = 'solid';
largerFontButton.style.borderColor = 'rebeccapurple';
largerFontButton.style.paddingBottom = '0px';
largerFontButton.style.paddingRight = '15px';
largerFontButton.style.left = '0px';
largerFontButton.style.borderTopRightRadius = '30px';
largerFontButton.style.borderBottomRightRadius = '0px';
largerFontButton.style.height = '30px';
largerFontButton.style.width = '30px';
//want to increase/decrease font size inside iframes
largerFontButton.addEventListener('click', function() {
console.log('clicked larger-font-button');
for (var i = 0; i < allIframes.length; i++) {
var cur = window.getComputedStyle(allIframes[i].contentWindow.document.getElementsByTagName('body')[0]).fontSize;
allIframes[i].contentWindow.document.getElementsByTagName('body')[0].style.fontSize = parseInt(cur) + 2 + "px"
}
},
false);
// add to the ToC's DOM
document.body.prepend(largerFontButton);
var smallButton = document.createElement('button');
smallButton.innerHTML = '-';
smallButton.setAttribute('id', 'smaller-font-button');
smallButton.style.position = 'fixed';
smallButton.style.bottom = '0';
smallButton.style.backgroundColor = 'rebeccapurple';
smallButton.style.color = 'white';
smallButton.style.fontWeight = 'bold';
smallButton.style.fontSize = '15px';
smallButton.style.borderStyle = 'solid';
smallButton.style.borderColor = 'rebeccapurple';
smallButton.style.paddingBottom = '0px';
smallButton.style.paddingRight = '0px';
smallButton.style.right = '0px';
smallButton.style.borderTopLeftRadius = '30px';
smallButton.style.borderBottomLeftRadius = '0px';
smallButton.style.height = '30px';
smallButton.style.width = '30px';
smallButton.addEventListener('click', function() {
console.log('clicked smaller-font-button');
var allIframes = document.getElementsByTagName('iframe');
for (var i = 0; i < allIframes.length; i++) {
var cur = window.getComputedStyle(allIframes[i].contentWindow.document.getElementsByTagName('body')[0]).fontSize;
allIframes[i].contentWindow.document.getElementsByTagName('body')[0].style.fontSize = parseInt(cur) - 2 + "px"
}
}, false);
document.body.prepend(smallButton);
var nightButton = document.createElement('button');
nightButton.innerHTML = '☀';
nightButton.value = 'Night';
nightButton.setAttribute('id', 'night-button');
nightButton.style.position = 'fixed';
nightButton.style.top = '0';
nightButton.style.backgroundColor = 'rebeccapurple';
nightButton.style.color = 'white';
nightButton.style.fontWeight = 'bold';
nightButton.style.fontSize = '24px';
nightButton.style.borderStyle = 'solid';
nightButton.style.borderColor = 'rebeccapurple';
nightButton.style.paddingBottom = '6px';
nightButton.style.paddingLeft = '9px';
nightButton.style.paddingRight = '0px';
nightButton.style.right = '0%';
nightButton.style.borderBottomLeftRadius = '45px';
nightButton.style.borderTopLeftRadius = '0px';
nightButton.style.height = '45px';
nightButton.style.width = '45px';
nightButton.addEventListener('click', function() {
// TODO: maybe we store the preference and then load on visiblity/load changes?
if (this.value === "Night") {
for (var i = 0; i < allIframes.length; i++) {
// set styles on the <html> in each frame
allIframes[i].contentWindow.document.body.parentElement.style.filter = 'invert(1) hue-rotate(180deg)';
allIframes[i].contentWindow.document.body.parentElement.style.background = 'black';
document.body.style.background = 'black';
}
// need to check for img elements before altering styles
// code TK... if there's no IMG then getElementsByTagName returns an empty array
//inside.getElementsByTagName('img').style.filter = 'invert(1) hue-rotate(180deg)';
this.value = 'Day';
} else {
for (var i = 0; i < allIframes.length; i++) {
allIframes[i].contentWindow.document.body.parentElement.style.filter = 'invert(0) hue-rotate(0deg)';
allIframes[i].contentWindow.document.body.parentElement.style.background = 'white';
document.body.style.background = 'white';
}
this.value = 'Night';
}
}, false);
document.body.prepend(nightButton);