-
Notifications
You must be signed in to change notification settings - Fork 0
/
clearlink_togglevisibility.js
163 lines (153 loc) · 5.71 KB
/
clearlink_togglevisibility.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
/* window.onload = clearCurrentLink; */
// Collapsible menu script
/*
Creating a Website: The Missing Manual, Third Edition
By Matthew MacDonald
This code is illustrated in Chapter-15 p451
http://www.oreilly.com/pub/missingmanuals/caw3
*/
function ToggleVisibility(image, element){
// Find the image.
var image = document.getElementById(image)
// Find the element to hide/unhide.
var element = document.getElementById(element)
// Check the element's current state.
if (element.style.display == "none"){
// If hidden, unhide it.
element.style.display = "block"
image.src = "figs/open.png"
}
else {
// If not hidden, hide it.
element.style.display = "none"
image.src = "figs/closed.png"
}
}
// Clear current link
/*
CLCP v2.1 Clear Links to Current Page
Jonathan Snook
This code is offered unto the public domain
http://www.snook.ca/jonathan/
*/
function clearCurrentLink(){
var a = document.getElementsByTagName("A");
for(var i=0;i<a.length;i++){
if(a[i].href.split("#")[0] == window.location.href.split("#")[0]){
removeNode(a[i]);
}
}
}
function removeNode(n){
if(n.hasChildNodes()){
for(var i=0;i<n.childNodes.length;i++){
n.parentNode.insertBefore(n.childNodes[i].cloneNode(true),n);
}
}
n.parentNode.removeChild(n);
}
// Enlarge image
function enlargeImage(figNo){
var nodeList = document.querySelectorAll('#ContentBox .Figs');
var myNode = nodeList[figNo-1]; /* FigN => index=N-1 */
//create a new element
var myOverlay = document.createElement('div');
myOverlay.id = 'overlay';
document.body.appendChild(myOverlay);
//set up overlay styles
myOverlay.style.position = 'absolute';
myOverlay.style.top = 0;
myOverlay.style.backgroundColor = 'rgba(0,0,0,0.7)';
myOverlay.style.cursor = 'zoom-out';
//resize and position overlay
myOverlay.style.width = window.innerWidth + 'px';
myOverlay.style.height = window.innerHeight + 'px';
myOverlay.style.top = window.pageYOffset + 'px';
myOverlay.style.left = window.pageXOffset + 'px';
//set up image on-top of the overlay
var largeImage = document.createElement('img');
largeImage.id = 'largeImage';
largeImage.src = myNode.getElementsByTagName('IMG')[0].src;
largeImage.style.display = 'block';
largeImage.style.position = 'absolute';
//wait until the image has loaded
largeImage.addEventListener('load',function(){
resizeImage(this); //resize to fit window
centerImage(this); //center largeImage by calling function
myOverlay.appendChild(largeImage); //now add the image by appending
}); //image has loaded
//remove image when overlay image is clicked
largeImage.addEventListener('click',function(){
if(myOverlay){
//making sure window is no longer listening to events created
window.removeEventListener('resize', window, false);
window.removeEventListener('scroll', window, false);
//remove image overlay
myOverlay.parentNode.removeChild(myOverlay);
}
}, false);
//remove image when overlay is clicked
myOverlay.addEventListener('click',function(){
if(myOverlay){
//making sure window is no longer listening to events created
window.removeEventListener('resize', window, false);
window.removeEventListener('scroll', window, false);
//remove image overlay
myOverlay.parentNode.removeChild(myOverlay);
}
}, false);
//fit overlay with scroll
window.addEventListener('scroll',function(){
if(myOverlay){
myOverlay.style.top = window.pageYOffset + 'px';
myOverlay.style.left = window.pageXOffset + 'px';
}
}, false);
//fit window
window.addEventListener('resize',function(){
if(myOverlay){
myOverlay.style.width = window.innerWidth + 'px';
myOverlay.style.height = window.innerHeight + 'px';
myOverlay.style.top = window.pageYOffset + 'px';
myOverlay.style.left = window.pageXOffset + 'px';
resizeImage(largeImage);
centerImage(largeImage); //center image with changing window size
}
}, false);
}
//function for resizing the image
function resizeImage(theImage){
//resize if wider to 95% for some room left and right
if (theImage.height > window.innerHeight && theImage.width > window.innerWidth){
if(theImage.height < theImage.width) {
theImage.ratio = 0.95 * window.innerWidth / theImage.width;
theImage.height = theImage.height * theImage.ratio;
theImage.width = theImage.width * theImage.ratio;
}
else {
theImage.ratio = 0.95 * window.innerHeight / theImage.height;
theImage.height = theImage.height * theImage.ratio;
theImage.width = theImage.width * theImage.ratio;
}
}
//resize if wider to 95% for some room left and right
else if (theImage.width > window.innerWidth && theImage.height < window.innerHeight){
theImage.ratio = 0.95 * window.innerWidth / theImage.width;
theImage.height = theImage.height * theImage.ratio;
theImage.width = theImage.width * theImage.ratio;
}
//resize if taller to 95% for some room above and below
else if (theImage.height > window.innerHeight && theImage.width < window.innerWidth){
theImage.ratio = 0.95 * window.innerHeight / theImage.height;
theImage.height = theImage.height * theImage.ratio;
theImage.width = theImage.width * theImage.ratio;
}
}
//function for centering the above image
function centerImage(theImage){
var myDifX = (window.innerWidth - theImage.width)/2;
var myDifY = (window.innerHeight - theImage.height)/2;
theImage.style.top = myDifY + 'px';
theImage.style.left = myDifX + 'px';
return theImage;
}