gallery/app/assets/javascripts/theater_bak.js

261 lines
7.2 KiB
JavaScript

var GalleryTheater = function(){
var gt = this,
currentPic = {},
windowHeight = 0,
windowWidth = 0;
gt.stage = null;
gt.closeBtn = null;
gt.mainStageImage = null;
gt.prevStageImage = null;
gt.nextStageImage = null;
gt.albumData = {};
gt.thumbStrip = null;
gt.isTheaterInitialized = false;
var initialize = function(){
gt.stage = $("#gallery-theater-stage");
gt.closeBtn = gt.stage.find(".gallery-close");
gt.switchBtn = gt.stage.find(".gallery-theme-switch");
gt.mainStageImage = gt.stage.find(".gal-active");
gt.prevStageImage = gt.stage.find(".gal-prev");
gt.nextStageImage = gt.stage.find(".gal-next");
gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap");
windowHeight = $(window).height();
windowWidth = $(window).width();
bindHandler();
if(window.location.hash != "" && window.location.hash != "#"){
var id = window.location.hash.split("#")[1];
gt.createTheater("/xhr/galleries/theater/" + id);
}
}
var bindHandler = function(){
// handler to close the theater
gt.closeBtn.on("click",function(){
gt.destroyTheater();
})
// handler to show theater
$("div[data-list=images] a").on("click",function(){
gt.createTheater($(this).attr("href"));
return false;
})
// handler to show next image
gt.nextStageImage.on("click",function(){
if($(this).attr("src") != "#"){
gt.nextPic();
}
})
// handler to show prev image
gt.prevStageImage.on("click",function(){
if($(this).attr("src") != "#"){
gt.previousPic();
}
})
// handler to go to next image on center image click
gt.mainStageImage.on("click",gt.nextPic);
gt.switchBtn.on("click", function() {
var themeWhiteKlass = "theme-white",
nightKlass = "fa fa-circle",
dayKlass = "fa fa-circle-o",
$body = $("body");
if (!$(this).hasClass(themeWhiteKlass)) {
$(this)
.addClass(themeWhiteKlass)
.find("i")
.attr("class", dayKlass);
$body.addClass(themeWhiteKlass);
} else {
$(this)
.removeClass(themeWhiteKlass)
.find("i")
.attr("class", nightKlass);
$body.removeClass(themeWhiteKlass);
}
});
//handler for window resize
$(window).resize(function(){
windowHeight = $(window).height();
windowWidth = $(window).width();
})
}
var bindKeyHandlers = function(){
$(document).on("keyup",function(e){
switch(e.keyCode){
case 39:
gt.nextPic();
break;
case 37:
gt.previousPic();
break;
case 27:
gt.destroyTheater();
break;
}
})
}
var unBindKeyHandlers = function(){
$(document).unbind("keypress");
}
gt.destroyTheater = function(){
gt.stage.hide();
$("body").removeClass("gallery-mode-on");
unBindKeyHandlers();
window.location.hash = "";
}
gt.createTheater = function(link){
gt.stage.show();
$("body").addClass("gallery-mode-on");
bindKeyHandlers();
if(!gt.isTheaterInitialized){
$.ajax({
url : link,
dataType : "json",
type : "get"
}).done(function(data){
gt.albumData = data.data;
var cp = gt.albumData.images.filter(function(x){return x._id == gt.albumData.image})[0];
currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
createThumbStrip();
})
}else{
var id = link.split("/")[4],
cp = gt.albumData.images.filter(function(x){return x._id == id})[0];
currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
createThumbStrip();
}
}
gt.nextPic = function(){
if((currentPic.index + 1) <= (gt.albumData.images.length - 1)){
currentPic.image = gt.albumData.images[currentPic.index + 1];
currentPic.index = currentPic.index + 1;
setMainPic();
}
}
gt.previousPic = function(){
if(currentPic.index > 0) {
currentPic.image = gt.albumData.images[currentPic.index - 1];
currentPic.index = currentPic.index - 1;
setMainPic();
}
}
var createThumbStrip = function(){
if(!gt.isTheaterInitialized){
$.each(gt.albumData.images,function(index, image){
var li = $("<li class='gallery-item'></li>"),
a = $("<a href=''></a>"),
img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
a.on("click",function(){
currentPic.image = gt.albumData.images[index];
currentPic.index = index;
setMainPic();
return false;
})
img.attr("src",image.file.thumb.url);
img.attr("alt",image.alt_title);
li.attr("data-index",index);
a.append(img);
li.append(a);
gt.thumbStrip.append(li);
})
gt.isTheaterInitialized = true;
}
setMainPic();
}
var setMainPic = function(){
var obj = currentPic.image;
gt.mainStageImage.fadeOut(100,function(){
gt.mainStageImage.attr("src",obj.file.theater.url);
gt.mainStageImage.attr("alt",obj.alt_title);
gt.mainStageImage.one("load",function(){
var h = 0,
w = 0,
new_width = 0;
if(typeof currentPic.image.height == "undefined"){
h = gt.mainStageImage.height();
currentPic.image.height = h;
w = gt.mainStageImage.width();
currentPic.image.width = w;
}else{
h = currentPic.image.height;
w = currentPic.image.width;
}
if(h > (windowHeight - 100)){
new_width = Math.round((windowHeight - 100) * w / h);
new_width = (new_width / windowWidth) * 100;
gt.mainStageImage.width(new_width + "%");
}else{
if(windowWidth < 770){
gt.mainStageImage.width("90%");
}else{
gt.mainStageImage.width("65%");
}
}
gt.mainStageImage.fadeIn(100);
})
});
gt.thumbStrip.find("li.active").removeClass("active");
gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
changeUrl();
setNextPic();
setPrevPic();
}
var changeUrl = function(){
window.location.hash = currentPic.image._id
}
var setNextPic = function(){
gt.nextStageImage.attr("src","#");
if((currentPic.index + 1) <= (gt.albumData.images.length - 1)) {
gt.nextStageImage.hide();
var obj = gt.albumData.images[currentPic.index + 1];
gt.nextStageImage.attr("src",obj.file.theater.url);
gt.nextStageImage.on("load",function(){
gt.nextStageImage.show();
});
}else{
gt.nextStageImage.hide();
}
}
var setPrevPic = function(){
gt.prevStageImage.attr("src","#");
if(currentPic.index > 0) {
gt.prevStageImage.hide();
var obj = gt.albumData.images[currentPic.index - 1];
gt.prevStageImage.attr("src",obj.file.theater.url);
gt.prevStageImage.on("load",function(){
gt.prevStageImage.show();
});
}else{
gt.prevStageImage.hide();
}
}
var l = function(x){
console.log(x)
}
$(document).ready(function(){
initialize();
})
}