2 * © 2008 Benoît Pin – Centre de recherche en informatique – École des mines de Paris
4 * Licence Creative Commons http://creativecommons.org/licenses/by-nc/2.0/
13 var keyLeft
= 37, keyRight
= 39;
14 var isTextMime
= /^text\/.+/i;
15 var isAddToSelection
= /.*\/add_to_selection$/;
16 var imgRequestedSize
= /size=(\d+)/;
17 var DEFAULT_IMAGE_SIZES
= [500, 600, 800];
19 FilmSlider = function(filmBar
, slider
, ctxInfos
, image
, toolbar
, breadcrumbs
) {
20 var thisSlider
= this;
21 this.filmBar
= filmBar
;
22 var film
= filmBar
.firstChild
;
23 if (film
.nodeType
== 3)
24 film
= film
.nextSibling
;
27 this.rail
= slider
.parentNode
;
28 this.sliderSpeedRatio
= undefined;
29 this.sliderRatio
= undefined;
30 this.selectedSlide
= undefined;
31 this.selectedSlideInSelection
= undefined;
32 this.cartSlide
= document
.getElementById('cart_slide');
34 this.stretchable
= image
.parentNode
;
35 this.viewMode
= 'medium';
37 this.buttons
= new Array();
38 this.toolbar
= toolbar
;
39 var bcElements
= breadcrumbs
.getElementsByTagName('a');
40 this.lastBCElement
= bcElements
[bcElements
.length
-1];
41 var imgSrcParts
= image
.src
.split('/');
42 this.lastBCElement
.innerHTML
= imgSrcParts
[imgSrcParts
.length
-2];
44 var buttons
= toolbar
.getElementsByTagName('img');
46 for (var i
=0 ; i
<buttons
.length
; i
++) {
48 name
= b
.getAttribute('name');
50 this.buttons
[name
] = b
;
53 this.pendingImage
= new Image();
54 this.pendingImage
.onload = function() {
55 thisSlider
.refreshImage();
57 this.initialized
= false;
59 with(this.slider
.style
) {
63 with(this.film
.style
) {
68 this.filmLength
= ctxInfos
.filmLength
;
69 this.center
= ctxInfos
.center
;
70 this.slideSize
= ctxInfos
.slideSize
;
71 this.ctxUrlTranslation
= ctxInfos
.ctxUrlTranslation
;
73 this.ddHandlers
= {'down' : function(evt
){thisSlider
.mouseDownHandler(evt
);},
74 'move' : function(evt
){thisSlider
.mouseMoveHandler(evt
);},
75 'up' : function(evt
){thisSlider
.mouseUpHandler(evt
);},
76 'out' : function(evt
){thisSlider
.mouseOutHandler(evt
);}
80 this.addEventListeners()
84 FilmSlider
.prototype.resizeSlider = function(evt
) {
85 var filmBarWidth
= getObjectWidth(this.filmBar
);
87 var thisSlider
= this;
88 addListener(window
, 'load', function(evt
){thisSlider
.resizeSlider(evt
);});
92 var filmWidth
= this.slideSize
* this.filmLength
;
93 var sliderRatio
= this.sliderRatio
= filmBarWidth
/ filmWidth
;
94 var sliderWidth
= filmBarWidth
* sliderRatio
;
95 this.rail
.style
.width
= filmBarWidth
+ 'px';
96 this.rail
.style
.display
= 'block';
97 this.rail
.style
.visibility
= 'visible';
98 if (sliderRatio
< 1) {
99 this.slider
.style
.width
= Math
.round(sliderWidth
) + 'px';
100 this.slider
.style
.visibility
= 'visible';
103 this.slider
.style
.visibility
= 'hidden';
106 this.winSize
= {'width' : getWindowWidth(),
107 'height' : getWindowHeight()};
108 this.maxRightPosition
= filmBarWidth
- sliderWidth
109 this.sliderSpeedRatio
= - (filmBarWidth
- sliderWidth
) / (filmWidth
- filmBarWidth
);
110 if (!this.initialized
) {
111 this.centerSlide(this.center
);
112 this.selectedSlide
= this.filmBar
.getElementsByTagName('img')[this.center
].parentNode
;
113 this.initialized
= true;
117 FilmSlider
.prototype.fitToScreen = function(evt
) {
119 var thisSlider
= this;
120 addListener(window
, 'resize', function(evt
){thisSlider
._fitToScreen();});
123 FilmSlider
.prototype._fitToScreen = function(evt
) {
124 var wh
= getWindowHeight();
125 var rb
= getObjectTop(this.rail
) + getObjectHeight(this.rail
); // rail bottom
127 var sh
= getObjectHeight(this.stretchable
);
128 var newSize
= sh
+ delta
;
129 this.stretchable
.style
.height
= newSize
+ 'px';
131 var ratio
= this.image
.height
/ this.image
.width
;
132 var bestFitSize
= this.getBestFitSize(ratio
);
133 var currentSize
= parseInt(imgRequestedSize
.exec(this.image
.src
)[1]);
134 if (currentSize
!= bestFitSize
) {
135 var src
= this.image
.src
.replace(imgRequestedSize
, 'size=' + bestFitSize
);
136 this.pendingImage
.src
= src
;
140 FilmSlider
.prototype.getBestFitSize = function(ratio
) {
141 var fw
= getObjectWidth(this.stretchable
) - 1;
142 var fh
= getObjectHeight(this.stretchable
) - 1;
146 for (i
=DEFAULT_IMAGE_SIZES
.length
-1 ; i
>0 ; i
--) {
147 irw
= DEFAULT_IMAGE_SIZES
[i
];
149 if (irw
<= fw
&& irh
<= fh
)
154 for (i
=DEFAULT_IMAGE_SIZES
.length
-1 ; i
>0 ; i
--) {
155 irh
= DEFAULT_IMAGE_SIZES
[i
];
157 if (irw
<= fw
&& irh
<= fh
)
161 return DEFAULT_IMAGE_SIZES
[i
];
164 FilmSlider
.prototype.centerSlide = function(slideIndex
) {
165 if (this.sliderRatio
> 1)
167 var filmBarWidth
= getObjectWidth(this.filmBar
);
168 var x
= slideIndex
* this.slideSize
169 x
= x
- (filmBarWidth
- this.slideSize
) / 2.0;
170 x
= x
* this.sliderSpeedRatio
;
171 var p
= new Point( -x
, 0 )
172 this.setSliderPosition(p
);
175 FilmSlider
.prototype.setSliderPosition = function(point
) {
178 if (point
.x
> this.maxRightPosition
)
179 point
.x
= this.maxRightPosition
;
180 this.slider
.style
.left
= point
.x
+ 'px';
181 this.setFilmPosition(point
);
184 FilmSlider
.prototype.setFilmPosition = function(point
) {
185 this.film
.style
.left
= point
.x
/ this.sliderSpeedRatio
+ 'px';
188 FilmSlider
.prototype.getSliderPosition = function() {
189 var x
= parseInt(this.slider
.style
.left
);
190 var y
= parseInt(this.slider
.style
.top
);
191 var p
= new Point(x
, y
);
195 FilmSlider
.prototype.getFilmPosition = function() {
196 var x
= parseInt(this.film
.style
.left
);
197 var y
= parseInt(this.film
.style
.top
);
198 var p
= new Point(x
, y
);
202 FilmSlider
.prototype.loadSibling = function(previous
) {
205 slide
= this.selectedSlide
.parentNode
.previousSibling
;
206 if (slide
&& slide
.nodeType
==3)
207 slide
= slide
.previousSibling
;
210 slide
= this.selectedSlide
.parentNode
.nextSibling
;
211 if (slide
&& slide
.nodeType
==3)
212 slide
= slide
.nextSibling
;
218 var target
= slide
.getElementsByTagName('a')[0];
219 raiseMouseEvent(target
, 'click');
220 var index
= parseInt(target
.getAttribute('portfolio:position'));
221 this.centerSlide(index
);
225 FilmSlider
.prototype.addEventListeners = function() {
226 var thisSlider
= this;
227 addListener(window
, 'resize', function(evt
){thisSlider
.resizeSlider(evt
);});
228 addListener(this.filmBar
, 'click', function(evt
){thisSlider
.thumbnailClickHandler(evt
);});
229 addListener(this.toolbar
, 'click', function(evt
){thisSlider
.toolbarClickHandler(evt
);});
230 addListener(window
, 'load', function(evt
){thisSlider
.fitToScreen(evt
);});
233 addListener(this.slider
, 'mousedown', this.ddHandlers
['down']);
234 if(browser
.isDOM2Event
){
235 if (browser
.isAppleWebKit
) {
236 this.filmBar
.addEventListener('mousewheel', function(evt
){thisSlider
.mouseWheelHandler(evt
);}, false);
239 addListener(this.filmBar
, 'DOMMouseScroll', function(evt
){thisSlider
.mouseWheelHandler(evt
);});
242 else if (browser
.isIE6up
) {
243 addListener(this.filmBar
, 'mousewheel', function(evt
){thisSlider
.mouseWheelHandler(evt
);});
246 addListener(document
, 'keydown', function(evt
){thisSlider
.keyDownHandler(evt
);});
247 addListener(document
, 'keypress', function(evt
){thisSlider
.keyPressHandler(evt
);});
251 FilmSlider
.prototype.mouseDownHandler = function(evt
) {
252 this.initialClickPoint
= new Point(evt
.clientX
, evt
.clientY
);
253 this.initialPosition
= this.getSliderPosition();
254 this.dragInProgress
= true;
255 addListener(document
, 'mousemove', this.ddHandlers
['move']);
256 addListener(document
, 'mouseup', this.ddHandlers
['up']);
257 addListener(document
.body
, 'mouseout', this.ddHandlers
['out'])
262 FilmSlider
.prototype.mouseMoveHandler = function(evt
) {
263 if(!this.dragInProgress
)
267 evt
= getEventObject(evt
);
268 var currentPoint
= new Point(evt
.clientX
, evt
.clientY
);
269 var displacement
= currentPoint
.diff(this.initialClickPoint
);
270 this.setSliderPosition(this.initialPosition
.add(displacement
));
273 FilmSlider
.prototype.mouseUpHandler = function(evt
) {
274 this.dragInProgress
= false;
275 evt
= getEventObject(evt
);
276 this.mouseMoveHandler(evt
);
280 FilmSlider
.prototype.mouseOutHandler = function(evt
) {
281 evt
= getEventObject(evt
);
285 x
> this.winSize
['width'] ||
287 y
> this.winSize
['height']
289 this.mouseUpHandler(evt
);
293 FilmSlider
.prototype.thumbnailClickHandler = function(evt
) {
294 var target
= getTargetedObject(evt
);
295 while (target
.tagName
!= 'A' && target
!= this.filmBar
)
296 target
= target
.parentNode
;
297 if (target
.tagName
!= 'A')
300 if (this.viewMode
== 'full') {
301 this.mosaique
.unload();
302 this.mosaique
= null;
303 this.viewMode
= 'medium';
306 disablePropagation(evt
);
309 var imgBaseUrl
= target
.href
;
311 if (this.ctxUrlTranslation
[0])
312 canonicalImgUrl
= imgBaseUrl
.replace(this.ctxUrlTranslation
[0],
313 this.ctxUrlTranslation
[1]);
315 canonicalImgUrl
= imgBaseUrl
;
317 var ajaxUrl
= imgBaseUrl
+ '/photo_view_ajax';
320 //this.pendingImage.src = canonicalImgUrl + '/getResizedImage?size=600';
321 var thumbnail
= target
.getElementsByTagName('IMG')[0];
322 var bestFitSize
= this.getBestFitSize(thumbnail
.height
/thumbnail
.width
);
323 this.pendingImage
.src
= canonicalImgUrl
+ '/getResizedImage?size=' + bestFitSize
;
326 var fullScreenLink
= this.buttons
['full_screen'].parentNode
;
327 fullScreenLink
.href
= canonicalImgUrl
+ '/zoom_view';
329 var toggleSelectionBtn
= this.buttons
['toggle_selection'];
330 var toggleSelectionLink
= toggleSelectionBtn
.parentNode
;
331 this.selectedSlideInSelection
= (target
.className
=='selected');
332 if (this.selectedSlideInSelection
) {
333 toggleSelectionBtn
.src
= portal_url() + '/unselect_flag_btn.gif';
334 toggleSelectionBtn
.alt
= toggleSelectionLink
.title
= 'Retirer de la sélection';
335 toggleSelectionLink
.href
= canonicalImgUrl
+ '/remove_to_selection';
338 toggleSelectionBtn
.src
= portal_url() + '/select_flag_btn.gif';
339 toggleSelectionBtn
.alt
= toggleSelectionLink
.title
= 'Ajouter à la sélection';
340 toggleSelectionLink
.href
= canonicalImgUrl
+ '/add_to_selection';
343 var showBuyableButtonLink
= this.buttons
['show_buyable'].parentNode
;
344 showBuyableButtonLink
.href
= canonicalImgUrl
+ '/get_slide_buyable_items';
345 this.cartSlide
.innerHTML
= '';
346 this.cartSlide
.style
.visibility
='hidden';
349 var metadataButton
= this.buttons
['edit_metadata']
350 if (metadataButton
) {
351 var metadataEditLink
= metadataButton
.parentNode
;
352 metadataEditLink
.href
= canonicalImgUrl
+ '/photo_edit_form'
356 var req
= new XMLHttpRequest();
357 req
.onreadystatechange = function() {
358 switch (req
.readyState
) {
364 if (! isTextMime
.exec(req
.getResponseHeader('Content-Type'))) {
365 req
.onreadystatechange
= null;
368 window
.location
.href
= thisFS
._fallBackUrl
;
375 if (req
.status
== '200')
376 thisFS
.populateViewer(req
);
378 //window.location.href = target.href;
379 console
.error(ajaxUrl
);
384 req
.open("GET", ajaxUrl
, true);
387 // update old displayed slide className
388 var className
= this.selectedSlide
.className
;
389 var classes
= className
.split(' ');
390 var newClasses
= new Array();
395 if (name
== 'displayed')
398 newClasses
.push(name
);
401 this.selectedSlide
.className
= newClasses
.join(' ')
403 // hightlight new displayed slide
404 this.selectedSlide
= target
;
405 className
= this.selectedSlide
.className
;
406 classes
= className
.split(' ');
407 classes
.push('displayed');
408 this.selectedSlide
.className
= classes
.join(' ');
412 FilmSlider
.prototype.toolbarClickHandler = function(evt
) {
413 var target
= getTargetedObject(evt
);
414 if(target
.tagName
== 'IMG' && target
.getAttribute('name')){
415 switch(target
.getAttribute('name')) {
418 disablePropagation(evt
);
420 var link
= button
.parentNode
;
422 this.loadSibling(true);
426 disablePropagation(evt
);
428 var link
= button
.parentNode
;
430 this.loadSibling(false);
434 disablePropagation(evt
);
435 target
.parentNode
.blur();
436 if (this.viewMode
== 'full') {
437 this.mosaique
.unload();
438 this.mosaique
= null;
439 this.viewMode
= 'medium';
442 var main
= document
.getElementById('photo_viewer');
443 var url
= target
.parentNode
.href
;
444 url
= url
.substring(0, url
.length
- '/zoom_view'.length
);
445 var margins
= {'top':0, 'right':-1, 'bottom':0, 'left':0};
446 this.mosaique
= new Mosaique(main
, url
, margins
);
447 this.viewMode
= 'full';
450 case 'toggle_selection':
452 disablePropagation(evt
);
454 var link
= button
.parentNode
;
457 var req
= new XMLHttpRequest();
459 req
.open("POST", url
, true);
460 req
.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
464 var parts
= url
.split('/');
465 var canonicalImgUrl
= parts
.slice(0, parts
.length
-1).join('/');
467 if (isAddToSelection
.test(url
)) {
468 button
.src
= portal_url() + '/unselect_flag_btn.gif';
469 button
.alt
= link
.title
= 'Retirer de la sélection';
470 link
.href
= canonicalImgUrl
+ '/remove_to_selection';
471 this.selectedSlide
.className
= 'selected displayed';
472 this.image
.parentNode
.className
= 'selected';
473 this.selectedSlideInSelection
= true;
476 button
.src
= portal_url() + '/select_flag_btn.gif';
477 button
.alt
= link
.title
= 'Ajouter à la sélection';
478 link
.href
= canonicalImgUrl
+ '/add_to_selection';
479 this.selectedSlide
.className
= 'displayed';
480 this.image
.parentNode
.className
= '';
481 this.selectedSlideInSelection
= false;
487 disablePropagation(evt
);
489 var link
= button
.parentNode
;
491 var slide
= this.cartSlide
;
492 slide
.innerHTML
= '';
493 slide
.style
.visibility
= 'visible';
494 var cw
= new CartWidget(slide
, link
.href
);
495 cw
.onCancel = function() {
496 CartWidget
.prototype.onCancel
.apply(this);
497 slide
.style
.visibility
= 'hidden';
499 cw
.onAfterConfirm = function() {
500 slide
.style
.visibility
= 'hidden';
508 case 'edit_metadata' :
510 disablePropagation(evt);
512 if (this.viewMode == 'full') {
513 this.mosaique.unload();
514 this.mosaique = null;
515 this.viewMode = 'medium';
518 var fi = new FragmentImporter(absolute_url());
519 fi.useMacro('metadata_edit_form_macros', 'iptc', 'image_metadata');
527 if(browser
.isDOM2Event
){
528 if (browser
.isAppleWebKit
) {
529 FilmSlider
.prototype.mouseWheelHandler = function(evt
) {
531 var pos
= this.getSliderPosition();
532 pos
.x
-= evt
.wheelDelta
/ 40;
533 this.setSliderPosition(pos
);
537 FilmSlider
.prototype.mouseWheelHandler = function(evt
) {
539 var pos
= this.getSliderPosition();
540 pos
.x
+= evt
.detail
* 3;
541 this.setSliderPosition(pos
);
545 else if (browser
.isIE6up
) {
546 FilmSlider
.prototype.mouseWheelHandler = function() {
547 var evt
= window
.event
;
548 evt
.returnValue
= false;
549 var pos
= this.getSliderPosition();
550 pos
.x
-= evt
.wheelDelta
/ 40;
551 this.setSliderPosition(pos
);
555 FilmSlider
.prototype.keyDownHandler = function(evt
) {
556 var evt
= getEventObject(evt
);
557 switch (evt
.keyCode
) {
559 this.loadSibling(true);
562 this.loadSibling(false);
570 FilmSlider
.prototype.keyPressHandler = function(evt
) {
571 var target
= getTargetedObject(evt
);
572 if (target
.tagName
== 'INPUT' || target
.tagName
== 'TEXTAREA')
574 var evt
= getEventObject(evt
);
575 var charPress
= String
.fromCharCode((evt
.keyCode
) ? evt
.keyCode
: evt
.which
);
579 raiseMouseEvent(this.buttons
['full_screen'], 'click');
584 FilmSlider
.prototype.populateViewer = function(req
) {
585 var elements
= req
.responseXML
.documentElement
.childNodes
;
586 for(var i
=0 ; i
< elements
.length
; i
++ ) {
587 element
= elements
[i
];
588 switch (element
.nodeName
) {
590 var dest
= document
.getElementById(element
.getAttribute('id'));
591 dest
.innerHTML
= element
.firstChild
.nodeValue
;
593 case 'imageattributes' :
594 var link
= this.buttons
['back_to_portfolio'].parentNode
;
595 link
.href
= element
.getAttribute('backToContextUrl');
596 link
= this.buttons
['show_buyable'].parentNode
;
597 var buyable
= element
.getAttribute('buyable');
598 if(buyable
== 'True')
599 link
.className
= null;
600 else if(buyable
== 'False')
601 link
.className
= 'hidden';
602 this.image
.alt
= element
.getAttribute('alt');
603 this.lastBCElement
.href
= element
.getAttribute('lastBcUrl');
604 this.lastBCElement
.innerHTML
= element
.getAttribute('img_id');
610 FilmSlider
.prototype.refreshImage = function() {
611 this.image
.style
.visibility
= 'hidden';
612 this.image
.src
= this.pendingImage
.src
;
613 this.image
.width
= this.pendingImage
.width
;
614 this.image
.height
= this.pendingImage
.height
;
615 this.image
.style
.visibility
= 'visible';
616 if (this.selectedSlideInSelection
)
617 this.image
.parentNode
.className
= 'selected';
619 this.image
.parentNode
.className
= '';
622 FilmSlider
.prototype.startSlideShow = function() {
623 this.slideShowSlide
= this.pendingSlideShowSlide
= this.selectedSlide
;
624 return this.slideShowSlide
.href
;
627 FilmSlider
.prototype.slideShowNext = function() {
628 var nextSlide
= this.slideShowSlide
.parentNode
.nextSibling
;
629 if (nextSlide
&& nextSlide
.nodeType
==3)
630 nextSlide
= nextSlide
.nextSibling
;
633 nextSlide
= nextSlide
.getElementsByTagName('a')[0];
634 this.pendingSlideShowSlide
= nextSlide
;
635 return this.pendingSlideShowSlide
.href
;
638 var row
= this.slideShowSlide
.parentNode
.parentNode
;
639 var first
= row
.firstChild
;
640 if (first
.nodeType
==3)
641 first
= first
.nextSibling
;
642 this.pendingSlideShowSlide
= first
.getElementsByTagName('a')[0];
643 return this.pendingSlideShowSlide
.href
;
647 FilmSlider
.prototype.slideShowPrevious = function() {
648 var previousSlide
= this.slideShowSlide
.parentNode
.previousSibling
;
649 if (previousSlide
&& previousSlide
.nodeType
==3)
650 previousSlide
= previousSlide
.previousSibling
;
653 previousSlide
= previousSlide
.getElementsByTagName('a')[0];
654 this.pendingSlideShowSlide
= previousSlide
;
655 return this.pendingSlideShowSlide
.href
;
658 var row
= this.slideShowSlide
.parentNode
.parentNode
;
659 var last
= row
.lastChild
;
660 if (last
.nodeType
==3)
661 last
= last
.previousSibling
;
662 this.pendingSlideShowSlide
= last
.getElementsByTagName('a')[0];
663 return this.pendingSlideShowSlide
.href
;
667 FilmSlider
.prototype.slideShowImageLoaded = function() {
668 this.slideShowSlide
= this.pendingSlideShowSlide
;
671 FilmSlider
.prototype.stopSlideShow = function() {
672 raiseMouseEvent(this.slideShowSlide
, 'click');
673 var index
= parseInt(this.selectedSlide
.getAttribute('portfolio:position'));
674 this.centerSlide(index
);
679 function Point(x
, y
) {
680 this.x
= Math
.round(x
);
681 this.y
= Math
.round(y
);
683 Point
.prototype.diff = function(point
) { return new Point(this.x
- point
.x
, this.y
- point
.y
); };
684 Point
.prototype.add = function(point
) { return new Point(this.x
+ point
.x
, this.y
+ point
.y
); };
685 Point
.prototype.mul = function(k
) { return new Point(this.x
* k
, this.y
*k
)};
686 Point
.prototype.toString = function() { return "(" + String(this.x
) + ", " + String(this.y
) + ")"; };