|
1
|
|
|
/** |
|
2
|
|
|
* Image Viewer Plugin |
|
3
|
|
|
* @author grommunio GmbH <[email protected]> |
|
4
|
|
|
*/ |
|
5
|
|
|
function ImageViewerPlugin() { |
|
6
|
|
|
"use strict"; |
|
7
|
|
|
|
|
8
|
|
|
var imgElement = undefined, |
|
|
|
|
|
|
9
|
|
|
self = this, |
|
10
|
|
|
rotation = 0, |
|
11
|
|
|
currentPage = 1; |
|
12
|
|
|
|
|
13
|
|
|
function initCSS() { |
|
14
|
|
|
/*var pluginCSS; |
|
15
|
|
|
|
|
16
|
|
|
pluginCSS = (document.createElementNS(document.head.namespaceURI, 'style')); |
|
17
|
|
|
pluginCSS.setAttribute('media', 'screen, print, handheld, projection'); |
|
18
|
|
|
pluginCSS.setAttribute('type', 'text/css'); |
|
19
|
|
|
pluginCSS.appendChild(document.createTextNode(ImageViewerPlugin_css)); |
|
20
|
|
|
document.head.appendChild(pluginCSS); |
|
21
|
|
|
*/ |
|
22
|
|
|
} |
|
23
|
|
|
|
|
24
|
|
|
function initButtons() { |
|
25
|
|
|
var leftToolbar = document.getElementById('toolbarLeft'); |
|
26
|
|
|
// hide unused elements |
|
27
|
|
|
document.getElementById("navButtons").style.display = 'none'; |
|
28
|
|
|
document.getElementById("pageNumberLabel").style.display = 'none'; |
|
29
|
|
|
document.getElementById("pageNumber").style.display = 'none'; |
|
30
|
|
|
document.getElementById("numPages").style.display = 'none'; |
|
31
|
|
|
leftToolbar.style.visibility = "visible"; |
|
32
|
|
|
|
|
33
|
|
|
var buttonSeperator = document.createElement("div"); |
|
34
|
|
|
buttonSeperator.setAttribute('class', 'splitToolbarButtonSeparator'); |
|
35
|
|
|
|
|
36
|
|
|
var rotateLeft = document.createElement("button"); |
|
37
|
|
|
rotateLeft.setAttribute('class', 'toolbarButton pageDown flipHorizontal'); |
|
38
|
|
|
rotateLeft.setAttribute('title', 'Rotate left'); |
|
39
|
|
|
|
|
40
|
|
|
var rotateRight = document.createElement("button"); |
|
41
|
|
|
rotateRight.setAttribute('class', 'toolbarButton pageDown'); |
|
42
|
|
|
rotateRight.setAttribute('title', 'Rotate right'); |
|
43
|
|
|
|
|
44
|
|
|
leftToolbar.appendChild(rotateLeft); |
|
45
|
|
|
leftToolbar.appendChild(buttonSeperator); |
|
46
|
|
|
leftToolbar.appendChild(rotateRight); |
|
47
|
|
|
|
|
48
|
|
|
// Attach events to the above buttons |
|
49
|
|
|
rotateLeft.addEventListener('click', function () { |
|
50
|
|
|
imageRotateLeft(); |
|
51
|
|
|
}); |
|
52
|
|
|
rotateRight.addEventListener('click', function () { |
|
53
|
|
|
imageRotateRight(); |
|
54
|
|
|
}); |
|
55
|
|
|
} |
|
56
|
|
|
|
|
57
|
|
|
function imageRotateLeft() { |
|
58
|
|
|
if ( rotation <= 0 ) { |
|
59
|
|
|
rotation = 360; |
|
60
|
|
|
} |
|
61
|
|
|
rotation -= 90; |
|
62
|
|
|
|
|
63
|
|
|
document.getElementById("image").className = 'rotate' + rotation; |
|
64
|
|
|
} |
|
65
|
|
|
|
|
66
|
|
|
function imageRotateRight() { |
|
67
|
|
|
if ( rotation >= 360 ) { |
|
68
|
|
|
rotation = 0; |
|
69
|
|
|
} |
|
70
|
|
|
rotation += 90; |
|
71
|
|
|
|
|
72
|
|
|
document.getElementById("image").className = 'rotate' + rotation; |
|
73
|
|
|
} |
|
74
|
|
|
|
|
75
|
|
|
this.initialize = function ( viewerElement, documentUrl ) { |
|
76
|
|
|
// If the URL has a fragment (#...), try to load the file it represents |
|
77
|
|
|
imgElement = document.createElement("img"); |
|
78
|
|
|
imgElement.setAttribute('src', documentUrl); |
|
79
|
|
|
imgElement.setAttribute('alt', 'na'); |
|
80
|
|
|
imgElement.setAttribute('id', 'image'); |
|
81
|
|
|
|
|
82
|
|
|
viewerElement.appendChild(imgElement); |
|
83
|
|
|
viewerElement.style.overflow = "auto"; |
|
84
|
|
|
|
|
85
|
|
|
self.onLoad(); |
|
86
|
|
|
|
|
87
|
|
|
initCSS(); |
|
88
|
|
|
initButtons(); |
|
89
|
|
|
}; |
|
90
|
|
|
|
|
91
|
|
|
this.isSlideshow = function () { |
|
92
|
|
|
return false; |
|
93
|
|
|
}; |
|
94
|
|
|
|
|
95
|
|
|
this.onLoad = function () { |
|
96
|
|
|
}; |
|
97
|
|
|
|
|
98
|
|
|
this.fitToWidth = function ( width ) { |
|
99
|
|
|
imgElement.width = width; |
|
100
|
|
|
}; |
|
101
|
|
|
|
|
102
|
|
|
this.fitToHeight = function ( height ) { |
|
103
|
|
|
imgElement.height = height; |
|
104
|
|
|
}; |
|
105
|
|
|
|
|
106
|
|
|
this.fitToPage = function ( width, height ) { |
|
107
|
|
|
imgElement.width = width; |
|
108
|
|
|
}; |
|
109
|
|
|
|
|
110
|
|
|
this.fitSmart = function ( width ) { |
|
111
|
|
|
imgElement.width = width; |
|
112
|
|
|
}; |
|
113
|
|
|
|
|
114
|
|
|
this.getZoomLevel = function () { |
|
115
|
|
|
return imgElement.width / imgElement.naturalWidth; |
|
116
|
|
|
}; |
|
117
|
|
|
|
|
118
|
|
|
this.setZoomLevel = function ( value ) { |
|
119
|
|
|
imgElement.width = value * imgElement.naturalWidth; |
|
120
|
|
|
}; |
|
121
|
|
|
|
|
122
|
|
|
// return a list of tuples (pagename, pagenode) |
|
123
|
|
|
this.getPages = function () { |
|
124
|
|
|
return [1, 2]; |
|
125
|
|
|
}; |
|
126
|
|
|
|
|
127
|
|
|
this.showPage = function ( n ) { |
|
128
|
|
|
if ( n === currentPage ) { |
|
129
|
|
|
imgElement.parentNode.scrollTop -= 100; |
|
130
|
|
|
} else { |
|
131
|
|
|
imgElement.parentNode.scrollTop += 100; |
|
132
|
|
|
} |
|
133
|
|
|
}; |
|
134
|
|
|
|
|
135
|
|
|
this.getPluginName = function () { |
|
136
|
|
|
return "ImageViewerPlugin"; |
|
137
|
|
|
}; |
|
138
|
|
|
|
|
139
|
|
|
this.getPluginVersion = function () { |
|
140
|
|
|
return "From Source"; |
|
141
|
|
|
}; |
|
142
|
|
|
|
|
143
|
|
|
this.getPluginURL = function () { |
|
144
|
|
|
return "https://grommunio.com"; |
|
145
|
|
|
}; |
|
146
|
|
|
} |
|
147
|
|
|
|
grommunio /
grommunio-web
Loading history...