1 WCF
.ImageViewer
=Class
.extend({init:function(){$('<span class="icon icon16 icon-chevron-left jsTooltip" title="'+WCF
.Language
.get("wcf.imageViewer.previous")+'" />').appendTo($("#lbPrevLink"));$('<span class="icon icon16 icon-chevron-right jsTooltip" title="'+WCF
.Language
.get("wcf.imageViewer.next")+'" />').appendTo($("#lbNextLink"));$('<span class="icon icon32 icon-remove jsTooltip" title="'+WCF
.Language
.get("wcf.imageViewer.close")+'" />').appendTo($("#lbCloseLink"));var a
=$('<span class="icon icon32 icon-resize-full jsTooltip" title="'+WCF
.Language
.get("wcf.imageViewer.enlarge")+'" id="lbEnlarge" />').insertAfter($("#lbCloseLink"));a
.click($.proxy(this._enlarge
,this));this._initImageViewer();WCF
.DOMNodeInsertedHandler
.addCallback("WCF.ImageViewer",$.proxy(this._domNodeInserted
,this));WCF
.DOMNodeInsertedHandler
.execute()},_domNodeInserted:function(){this._initImageSizeCheck();this._initImageViewer()},_initImageViewer:function(){if($.browser
.touch
&&/[Mm]obile/.test(navigator
.userAgent
)){if(!/iPad/.test(navigator
.userAgent
)){return}}var a
=$("a.jsImageViewer");if(a
.length
){a
.removeClass("jsImageViewer").slimbox({counterText
:WCF
.Language
.get("wcf.imageViewer.counter"),loop
:true})}},_enlarge:function(){var a
=$("#lbImage").css("backgroundImage");if(a
){a
=a
.replace(/^url\((["']?)(.*)\1\)$/,"$2");window
.location
=a
}},_initImageSizeCheck:function(){$(".jsResizeImage").each($.proxy(function(a
,b
){if(b
.complete
){this._checkImageSize({currentTarget
:b
})}},this));$(".jsResizeImage").on("load",$.proxy(this._checkImageSize
,this))},_checkImageSize:function(d
){var c
=$(d
.currentTarget
);if(!c
.is(":visible")){c
.off("load");return}c
.removeClass("jsResizeImage");var b
=c
.getDimensions();var a
=c
.parents("div").innerWidth();if(b
.width
>a
){c
.css({height
:Math
.round(b
.height
*(a
/b.width))+"px",width:a+"px"});if(!c.parents("a").length){c.wrap('<a href="'+c.attr("src")+'" />');c.parent().slimbox()}}}});$.widget("ui.wcfImageViewer",{_active:-1,_activeImage:null,_container:null,_didInit:false,_disableSlideshow:false,_eventNamespace:"",_images:[],_isOpen:false,_items:-1,_maxDimensions:{height:0,width:0},_proxy:null,_slideshowEnabled:false,_thumbnailContainerWidth:0,_thumbnailMarginRight:0,_thumbnailOffset:0,_thumbnailWidth:0,_timer:null,_ui:{buttonNext:null,buttonPrevious:null,header:null,image:null,imageContainer:null,imageList:null,slideshow:{container:null,enlarge:null,next:null,previous:null,toggle:null}},options:{shiftBy:5,enableSlideshow:1,speed:5,className:""},_create:function(){this._active=-1;this._activeImage=null;this._container=null;this._didInit=false;this._disableSlideshow=(this.element.data("disableSlideshow"));this._eventNamespace=this.element.wcfIdentify();this._images=[];this._isOpen=false;this._items=-1;this._maxDimensions={height:document.documentElement.clientHeight,width:document.documentElement.clientWidth};this._proxy=new WCF.Action.Proxy({success:$.proxy(this._success,this)});this._slideshowEnabled=false;this._thumbnailContainerWidth=0;this._thumbnailMarginRight=0;this._thumbnailOffset=0;this._thumbnaiLWidth=0;this._timer=null;this._ui={};this.element.click($.proxy(this.open,this))},open:function(a){if(a){a.preventDefault()}if(this._isOpen){return false}if(this._images.length===0){this._loadNextImages(true)}else{this._render(false,this.element.data("targetImageID"));if(this._items>1&&this._slideshowEnabled){this.startSlideshow()}}this._bindListener();this._isOpen=true;WCF.System.DisableScrolling.disable();return true},close:function(a){if(a){a.preventDefault()}if(!this._isOpen){return false}this._container.removeClass("open");if(this._timer!==null){this._timer.stop()}this._unbindListener();this._isOpen=false;WCF.System.DisableScrolling.enable();return true},startSlideshow:function(){if(this._disableSlideshow||this._slideshowEnabled){return false}if(this._timer===null){this._timer=new WCF.PeriodicalExecuter($.proxy(function(){var a=this._active+1;if(a==this._items){a=0}this.showImage(a)},this),this.options.speed*1000)}else{this._timer.resume()}this._slideshowEnabled=true;this._ui.slideshow.toggle.children("span").removeClass("icon-play").addClass("icon-pause");return true},stopSlideshow:function(a){if(!this._slideshowEnabled){return false}this._timer.stop();if(a){this._ui.slideshow.toggle.children("span").removeClass("icon-pause").addClass("icon-play")}this._slideshowEnabled=false;return true},_bindListener:function(){$(document).on("keydown."+this._eventNamespace,$.proxy(this._keyDown,this));$(window).on("resize."+this._eventNamespace,$.proxy(this._renderImage,this))},_unbindListener:function(){$(document).off("keydown."+this._eventNamespace);$(window).off("resize."+this._eventNamespace)},_keyDown:function(b){switch(b.which){case $.ui.keyCode.ESCAPE:this.close();break;case $.ui.keyCode.LEFT:this._previousImage();break;case $.ui.keyCode.RIGHT:this._nextImage();break;case $.ui.keyCode.UP:if(!this._container.hasClass("maximized")){this._toggleView()}break;case $.ui.keyCode.DOWN:if(this._container.hasClass("maximized")){this._toggleView()}break;case $.ui.keyCode.ENTER:var a=this._ui.header.find("> div > h1 > a");if(a.length==1){window.location=a.prop("href")}else{this._ui.slideshow.full.trigger("click")}break;case 80:this._ui.slideshow.toggle.trigger("click");break;default:return true;break}return false},_render:function(c,a){this._container.addClass("open");var b=null;if(c){b=this._ui.imageList.children("li:eq(0)");this._thumbnailMarginRight=parseInt(b.css("marginRight").replace(/px$/,""))||0;this._thumbnailWidth=b.outerWidth(true);this._thumbnailContainerWidth=this._ui.imageList.parent().innerWidth();if(this._items>1&&this.options.enableSlideshow&&!a){this.startSlideshow()}}if(a){this._ui.imageList.children("li").each($.proxy(function(e,f){var d=$(f);if(d.data("objectID")==a){d.trigger("click");this.moveToImage(d.data("index"));return false}},this))}else{if(b!==null){b.trigger("click")}}this._toggleButtons();this._preload()},_preload:function(){if(this._images.length<this._items){var a=this._images.length*this._thumbnailWidth;if(a-this._thumbnailOffset<this._thumbnailContainerWidth){this._loadNextImages(false)}}},_showImage:function(a){this.showImage($(a.currentTarget).data("index"),true)},showImage:function(e,c){if(this._active==e){return false}this.stopSlideshow(c||false);if(this._active!=-1){this._images[this._active].listItem.removeClass("active")}this._active=e;var b=this._images[e];this._ui.imageList.children("li").removeClass("active");b.listItem.addClass("active");var g=this._ui.imageContainer.getDimensions("inner");var i=(this._activeImage?0:1);if(this._activeImage!==null){this._ui.images[this._activeImage].removeClass("active")}this._activeImage=i;var a=this._active;this._ui.imageContainer.addClass("loading");this._ui.images[i].off("load").prop("src",false).on("load",$.proxy(function(){this._imageOnLoad(a,i)},this));this._renderImage(i,b,g);var f=this._ui.header.find("> div > a").prop("href",b.user.link).prop("title",b.user.username);f.children("img").prop("src",b.user.avatarURL);var h=WCF.String.escapeHTML(b.image.title);if(b.image.link){h='<a href
="'+b.image.link+'">'+b.image.title+"</a>"}this._ui.header.find("> div > h1").html(h);var d=(b.series&&b.series.title?WCF.String.escapeHTML(b.series.title):"");if(b.series.link){d='<a href
="'+b.series.link+'">'+d+"</a>"}this._ui.header.find("> div > h2").html(d);this._ui.header.find("> div > h3").text(WCF.Language.get("wcf.imageViewer.seriesIndex").replace(/{x}/,b.listItem.data("index")+1).replace(/{y}/,this._items));this._ui.slideshow.full.data("link",(b.image.fullURL?b.image.fullURL:b.image.url));this.moveToImage(b.listItem.data("index"));this._toggleButtons();return true},_imageOnLoad:function(b,a){if(b!=this._active){return}this._ui.imageContainer.removeClass("loading");this._ui.images[a].addClass("active");this.startSlideshow()},_renderImage:function(c,g,e){if(!g){c=this._activeImage;g=this._images[this._active];e={height:$(window).height()-(this._container.hasClass("maximized")?0:200),width:this._ui.imageContainer.innerWidth()}}e.height-=22;e.width-=20;this._ui.images[c].prop("src",g.image.url);var d=g.image.height;var b=g.image.width;var a=0;if(d>e.height){a=e.height/d;d=e.height;b=Math.floor(b*a)}if(b>e.width){a=e.width/b;b=e.width;d=Math.floor(d*a)}var f=Math.floor((e.width-b)/2);this._ui.images[c].css({height:d+"px",left:(f+10)+"px",marginTop:(Math.round(d/2)*-1)+"px",width:b+"px"})},_initUI:function(){if(this._didInit){return false}this._didInit=true;this._container=$('<div
class="wcfImageViewer" />').appendTo(document.body);var c=$('<div><img class="active" /><img
/></div>').appendTo(this._container);var g=$('<footer
><span
class="wcfImageViewerButtonPrevious icon icon-double-angle-left" /><div><ul /></div><span class="wcfImageViewerButtonNext icon icon-double-angle-right" /></footer>').appendTo(this._container);var e=$("<ul />").appendTo(c);var d=$('<li class="wcfImageViewerSlideshowButtonPrevious
"><span class="icon icon48 icon
-angle
-left
" /></li>').appendTo(e);var f=$('<li class="wcfImageViewerSlideshowButtonToggle pointer
"><span class="icon icon48 icon
-play
" /></li>').appendTo(e);var b=$('<li class="wcfImageViewerSlideshowButtonNext
"><span class="icon icon48 icon
-angle
-right
" /></li>').appendTo(e);var h=$('<li class="wcfImageViewerSlideshowButtonEnlarge pointer jsTooltip
" title="'+WCF.Language.get("wcf.imageViewer.button.enlarge")+'"><span class="icon icon48 icon
-resize
-full
" /></li>').appendTo(e);var a=$('<li class="wcfImageViewerSlideshowButtonFull pointer jsTooltip
" title="'+WCF.Language.get("wcf.imageViewer.button.full")+'"><span class="icon icon48 icon
-external
-link
" /></li>').appendTo(e);this._ui={buttonNext:g.children("span
.wcfImageViewerButtonNext
"),buttonPrevious:g.children("span
.wcfImageViewerButtonPrevious
"),header:$('<header><div class="box64
"><a class="framed jsTooltip
"><img /></a><h1 /><h2 /><h3 /></div></header>').appendTo(this._container),imageContainer:c,images:[c.children("img
:eq(0)").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd
",function(){$(this).removeClass("animateTransformation
")}),c.children("img
:eq(1)").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd
",function(){$(this).removeClass("animateTransformation
")})],imageList:g.find("> div
> ul
"),slideshow:{container:e,enlarge:h,full:a,next:b,previous:d,toggle:f}};this._ui.buttonNext.click($.proxy(this._next,this));this._ui.buttonPrevious.click($.proxy(this._previous,this));b.click($.proxy(this._nextImage,this));d.click($.proxy(this._previousImage,this));h.click($.proxy(this._toggleView,this));f.click($.proxy(function(){if(this._slideshowEnabled){this.stopSlideshow(true)}else{this._disableSlideshow=false;this.startSlideshow()}},this));a.click(function(i){window.location=$(i.currentTarget).data("link
")});$('<span class="wcfImageViewerButtonClose icon icon48 icon
-remove pointer jsTooltip
" title="'+WCF.Language.get("wcf.global.button.close")+'" />').appendTo(this._ui.header).click($.proxy(this.close,this));return true},_toggleView:function(){this._ui.images[this._activeImage].addClass("animateTransformation
");this._container.toggleClass("maximized
");this._ui.slideshow.enlarge.toggleClass("active
").children("span
").toggleClass("icon
-resize
-full
").toggleClass("icon
-resize
-small
");this._renderImage(null,undefined,null)},_next:function(c,b){if(this._ui.buttonNext.hasClass("pointer
")){if(b==undefined){this.stopSlideshow(true)}var a=Math.max((this._items*this._thumbnailWidth)-this._thumbnailContainerWidth-this._thumbnailMarginRight,0);this._thumbnailOffset=Math.min(this._thumbnailOffset+(this._thumbnailWidth*(b?b:this.options.shiftBy)),a);this._ui.imageList.css("marginLeft
",(this._thumbnailOffset*-1))}this._preload();this._toggleButtons()},_previous:function(b,a){if(this._ui.buttonPrevious.hasClass("pointer
")){if(a==undefined){this.stopSlideshow(true)}this._thumbnailOffset=Math.max(this._thumbnailOffset-(this._thumbnailWidth*(a?a:this.options.shiftBy)),0);this._ui.imageList.css("marginLeft
",(this._thumbnailOffset*-1))}this._toggleButtons()},_nextImage:function(a){if(this._ui.slideshow.next.hasClass("pointer
")){this._disableSlideshow=true;this.stopSlideshow(true);this.showImage(this._active+1)}},_previousImage:function(a){if(this._ui.slideshow.previous.hasClass("pointer
")){this._disableSlideshow=true;this.stopSlideshow(true);this.showImage(this._active-1)}},moveToImage:function(b){var f=(b-3)*this._thumbnailWidth;var d=f+(this._thumbnailWidth*5);var e=this._thumbnailOffset;var a=this._thumbnailOffset+this._thumbnailContainerWidth;var g=false;if(f<e||d>a){g=true}if(g){var c=0;if(f<e){while(f<e){c++;e-=this._thumbnailWidth}this._previous(null,c)}else{while(d>a){c++;a+=this._thumbnailWidth}this._next(null,c)}}},_toggleButtons:function(){if(this._thumbnailOffset>0){this._ui.buttonPrevious.addClass("pointer
")}else{this._ui.buttonPrevious.removeClass("pointer
")}var a=(this._images.length*this._thumbnailWidth)-this._thumbnailContainerWidth-this._thumbnailMarginRight;if(this._thumbnailOffset>=a){this._ui.buttonNext.removeClass("pointer
")}else{this._ui.buttonNext.addClass("pointer
")}if(this._active>0){this._ui.slideshow.previous.addClass("pointer
")}else{this._ui.slideshow.previous.removeClass("pointer
")}if(this._active+1<this._images.length){this._ui.slideshow.next.addClass("pointer
")}else{this._ui.slideshow.next.removeClass("pointer
")}},_createThumbnails:function(a){for(var f=0,e=a.length;f<e;f++){var d=a[f];var c=$('<li class="loading pointer
"><img src="'+d.thumbnail.url+'" /></li>').appendTo(this._ui.imageList);c.data("index
",this._images.length).data("objectID
",d.objectID).click($.proxy(this._showImage,this));var b=c.children("img
");if(b.get(0).complete){c.removeClass("loading
")}else{b.on("load
",function(){$(this).parent().removeClass("loading
")})}d.listItem=c;this._images.push(d)}},_loadNextImages:function(a){this._proxy.setOption("data
",{actionName:"loadNextImages
",className:this.options.className,interfaceName:"wcf
\\data
\\IImageViewerAction
",objectIDs:[this.element.data("objectID
")],parameters:{maximumHeight:this._maxDimensions.height,maximumWidth:this._maxDimensions.width,offset:this._images.length,targetImageID:(a&&this.element.data("targetImageID
")?this.element.data("targetImageID
"):0)}});this._proxy.setOption("showLoadingOverlay
",false);this._proxy.sendRequest()},_success:function(c,e,b){if(c.returnValues.items){this._items=c.returnValues.items}var a=this._initUI();this._createThumbnails(c.returnValues.images);var d=(c.returnValues.targetImageID?c.returnValues.targetImageID:0);this._render(a,d)}});
projects / GitHub / WoltLab / WCF.git / blob