source: main/trunk/model-sites-dev/mozarts-laptop/collect/digital-music-stand/script/musicstand-main.js@ 30519

Last change on this file since 30519 was 30519, checked in by davidb, 8 years ago

Breakbar moved from right-hand side to left-hand side. Page turn upgraded to swipe left-to-right after breakbar marker; more carefully prescribed size of window through CGI params so page can be centred in window if opened up full-size, as can happen in Expeditee with embedded browser

  • Property svn:executable set to *
File size: 8.9 KB
Line 
1
2var cgiGotoPage;
3if (gs.cgiParams["gp"]) {
4 cgiGotoPage = Number(gs.cgiParams["gp"]);
5}
6else {
7 cgiGotoPage = 1;
8}
9
10var expeditee;
11if (gs.cgiParams["expeditee"] == "1") {
12 expeditee = true;
13}
14else {
15 expeditee = false;
16}
17
18
19var musicStand
20 = new MusicStand(httpdocument, gs.cgiParams["c"], gs.cgiParams["d"], gs.documentMetadata["assocfilepath"],
21 Number(gs.cgiParams["numPages"]), cgiGotoPage,
22 Number(gs.cgiParams["pageWidth"]), Number(gs.cgiParams["pageHeight"]),
23 Number(gs.cgiParams["scaleFactor"]));
24
25musicStand.setStyleColors(gs.variables["postitBgCol"],gs.variables["postitSelCol"]);
26
27musicStand.setPagePrefix(gs.cgiParams["pagePrefix"]);
28musicStand.setPageSuffix(gs.cgiParams["pageSuffix"]);
29
30var annotate = new Annotate(gs.variables.httpCollectionImages);
31
32if (gs.userInformation && gs.userInformation.username) {
33 musicStand.setUsername(gs.username);
34 annotate.setUsername(gs.username);
35}
36
37// de.events.addLoadHandler(function()
38
39$(window).load(function(){
40 try {
41 bodyLoaded();
42 }
43 catch(err) {
44 alert("musicstand-main.js: Failed to initialise: " + err.message);
45 }
46});
47
48
49function getElementsByClass(searchClassPrefix,node,tag) {
50
51 var classElements = new Array();
52 if ( node == null )
53 node = document;
54 if ( tag == null )
55 tag = '*';
56
57 if (node.getElementsByTagName) {
58 var els = node.getElementsByTagName(tag);
59
60 var elsLen = els.length;
61 var pattern = new RegExp('(^|\\s)'+searchClassPrefix);
62 for (var i = 0, j = 0; i < elsLen; i++) {
63 if ( pattern.test(els[i].className) ) {
64 classElements[j] = els[i];
65 j++;
66 }
67 }
68 }
69 return classElements;
70}
71
72
73
74var dotsTimer = null;
75var dotsDelta = 200;
76
77function dotsAnim(numDots)
78{
79 var dots = [ "", ".", "..", "..." ];
80
81 var dotSpan = document.getElementById('loadingdots');
82 dotSpan.innerHTML = "loading " + dots[numDots];
83
84 var nextNumDots = (numDots+1) %4;
85 dotsTimer = setTimeout("dotsAnim("+nextNumDots+")",dotsDelta);
86}
87
88
89function bodyLoaded()
90{
91 // load page 1
92 var thisPageImg = document.getElementById("thispageimg");
93
94 var thisPageUrl = musicStand.httpnextanim(gs.cgiParams["pagePrefix"],gs.cgiParams["pageSuffix"],musicStand.getPageNum());
95
96 var thisImg = document.createElement('img');
97 thisImg.onload = function (evt) {
98 var annotateCanvasElem = document.getElementById("annotateCanvas");
99 annotateCanvasElem.style.display = "none";
100
101 annotate.loadAnnotations(musicStand.getDocOID());
102
103 var thisLoading = document.getElementById("loading");
104 thisLoading.style.display = "none";
105 if (dotsTimer != null) {
106 clearTimeout(dotsTimer);
107 }
108 thisPageImg.src = thisImg.src;
109
110 annotateCanvasElem.style.display = "block";
111 }
112
113 //alert("**** thisPageUrl = " + thisPageUrl);
114
115 thisImg.src = thisPageUrl;
116 // thisPageImg.src = thisPageUrl;
117
118 // setup page 2 as next page
119 var nextPageImg = document.getElementById("nextpageimg");
120 var nextPageImg_LR = document.getElementById("nextpage-lr-img");
121 var nextPageUrl = musicStand.httpnextanim(gs.cgiParams["pagePrefix"],gs.cgiParams["pageSuffix"],musicStand.getPageNum()+1);
122
123 //var nextImg = document.createElement('img');
124 ////nextImg.onload = function (evt) {
125 ////nextPageImg.onload = function (evt) {
126 ////
127 ////}
128 nextPageImg.src = nextPageUrl;
129 nextPageImg_LR.src = nextPageUrl;
130
131 if (musicStand.getPageNum()>1) {
132 // setup previous page, as page-1
133 var prevPageImg = document.getElementById("prevpageimg");
134 var prevPageUrl = musicStand.httpprevanim(gs.cgiParams["pagePrefix"],gs.cgiParams["pageSuffix"],musicStand.getPageNum()-1);
135
136 //var prevImg = document.createElement('img');
137 prevPageImg.src = prevPageUrl;
138 }
139
140 // some browsers clear clip rectangle with new image => set it to what we need
141 var clip_str = "rect(0px, "+gs.cgiParams["pageWidth"]+"px, "+gs.cgiParams["pageHeight"]+"px, "+gs.cgiParams["pageWidth"]+"px)";
142
143 var nextpagediv = document.getElementById("nextpagediv");
144 nextpagediv.style.clip = clip_str;
145 var nextpagediv_lr = document.getElementById("nextpage-lr-div");
146 nextpagediv_lr.style.clip = clip_str;
147
148 var prevpagediv = document.getElementById("prevpagediv");
149 prevpagediv.style.clip = clip_str;
150 var prevpagediv_lr = document.getElementById("prevpage-lr-div");
151 prevpagediv_lr.style.clip = clip_str;
152
153 var animedgebleed = document.getElementById("animedgebleed");
154 animedgebleed.style.clip = clip_str;
155 var animedgebleed_lr = document.getElementById("animedgebleed-lr");
156 animedgebleed_lr.style.clip = clip_str;
157
158 // no previous page to set up
159
160 // start loading dots
161 dotsTimer = setTimeout("dotsAnim(0)",dotsDelta);
162
163
164 var thispage = document.getElementById("thispage");
165
166 //YAHOO.util.Event.addListener("thispage", 'mouseover', trackMouse);
167 // YAHOO.util.Event.addListener(document, 'mousemove', trackMouse);
168
169 //de.events.addMouseMoveHandler(trackMouse);
170 de.events.addHandler(document,"mousemove",trackMouse);
171
172 // de.events.prependMouseUpHandler(musicStand.pageMenu);
173
174 //YAHOO.util.Event.addListener(document, 'keydown', keyPress);
175
176 //de.events.prependKeyPressHandler(keyPress);
177 //de.events.addHandler(document,"keypress",keyPress);
178 de.events.addHandler(document,"keystroke",keyPress);
179
180 //de.events.addHandler(thispage,"keystroke",keyPress);
181
182 //thispage.addEventListener("keydown", keyPress);
183 //thispage.addEventListener("keypress", keyPress);
184
185
186 //var gotoNavBar = document.getElementById("gotoNavBar");
187 //gotoNavBar.addEventListener("keydown", keyPress);
188 //gotoNavBar.addEventListener("keypress", keyPress);
189
190 //$('#gotoNavBar').bind('keydown',keyPress);
191 //$('#gotoNavBar').focus();
192
193
194 //YAHOO.util.Event.addListener("thispage", 'keydown', keyPress);
195
196}
197
198
199var sliderMoving = false;
200
201var prevOnMouseMove = null;
202var prevOnMouseUp = null;
203
204function dragSlider(evt)
205{
206 evt = evt || window.event;
207
208 evt.returnValue = false;
209 if (evt.preventDefault) evt.preventDefault();
210
211 sliderMoving = true;
212 moveSlider(evt);
213
214 prevOnMouseMove = document.onmousemove;
215 prevOnMouseUp = document.onmouseup;
216
217 document.onmousemove = moveSlider;
218 document.onmouseup = releaseSlider;
219}
220
221
222
223function moveSlider(evt)
224{
225 if (!sliderMoving) return;
226
227 evt = evt || window.event;
228
229 evt.returnValue = false;
230 if (evt.preventDefault) evt.preventDefault();
231
232 var mousePos = getMouseCoords(evt);
233
234 var sliderContainer = document.getElementById('slidercontainer');
235 var sliderContainerYTop = getAbsoluteTop(sliderContainer);
236 var sliderContainerHeight = getRectHeight(sliderContainer) -1;
237
238 var slider = document.getElementById('sliderpos');
239 var sliderHeight = getRectHeight(slider);
240
241 var halfSliderHeight = sliderHeight/2;
242 var newSliderTop = (mousePos.y - sliderContainerYTop) - halfSliderHeight;
243
244 if ((newSliderTop >= 0)
245 && (newSliderTop < (sliderContainerHeight-halfSliderHeight))) {
246 slider.style.top = newSliderTop + "px";
247 var speedBreak = newSliderTop;
248 musicStand.setSpeedBreak(speedBreak);
249
250 var trackabove = document.getElementById('slidertrackabove');
251 trackabove.style.height = speedBreak + "px";
252
253 var trackbelow = document.getElementById('slidertrackbelow');
254 trackbelow.style.top = speedBreak + "px";
255 trackbelow.style.height = (Number(gs.cgiParams["pageHeight"]) - speedBreak) + "px";
256
257 }
258
259}
260
261
262function releaseSlider(evt)
263{
264 if (!sliderMoving) return;
265
266 document.onmousemove = prevOnMouseMove;
267 document.onmouseup = prevOnMouseUp;
268
269 sliderMoving = false;
270
271 var slider = document.getElementById('sliderpos');
272 var sliderposTop = parseInt(slider.style.top);
273
274 if (sliderposTop>0) {
275 sliderposTop /= musicStand.getScaleFactor();
276 }
277
278
279 var docid = musicStand.getDocRoot() + "." + musicStand.getPageNum();
280
281 var username = musicStand.getUsername();
282 var metaname = (username!=null) ? username + "-sliderposTop" : "sliderposTop";
283 //gsapi.setLiveMetadata(docid,metaname,sliderposTop);
284 //alert("Need to set slider");
285}
286
287
288function updateSlider(sliderposTop)
289{
290 if (sliderposTop>0) {
291 sliderposTop *= musicStand.getScaleFactor();
292
293 }
294 var speedBreak = sliderposTop;
295 musicStand.setSpeedBreak(speedBreak);
296
297 var sliderpos = document.getElementById('sliderpos');
298 sliderpos.style.top = speedBreak + "px";
299 sliderpos.style.left = "-8px";
300
301 var trackabove = document.getElementById('slidertrackabove');
302 trackabove.style.height = speedBreak + "px";
303
304 var trackbelow = document.getElementById('slidertrackbelow');
305 trackbelow.style.top = speedBreak + "px";
306 trackbelow.style.height = (Number(gs.cgiParams["pageHeight"]) - speedBreak) + "px";
307}
308
Note: See TracBrowser for help on using the repository browser.