gallery/app/assets/javascripts/theater-widget.js

536 lines
16 KiB
JavaScript
Raw Normal View History

2021-04-10 12:53:00 +00:00
var GalleryTheaterWidget = function(widget){
var parent_divs = widget,
parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index')
parent_divs.eq(parent_divs.length-1).css('z-index','2000')
var gt = this,
currentPic = {},
windowHeight = 0,
windowWidth = 0,
swipeController = null,
resizing = null;
loadingInterval = null,
mainPicLoading = 0,
nextPicLoading = 0,
prevPicLoading = 0,
currentSwipeImageDom = null,
currentSwipeImageDomLeftPos = 0,
windowScreenThresholdForTouch = 0,
loadingProcess = 0;
gt.stage = null;
gt.stripNextBtn = null;
gt.stripPrevBtn = null;
gt.thumbToggle = null;
gt.descriptionToggle = null;
gt.closeBtn = null;
gt.imageContainer = null;
gt.albumData = {};
gt.loader = null;
gt.thumbStrip = null;
gt.descriptionArea = null;
gt.isTheaterInitialized = false;
var play_flag = false;
var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
playtimeoutID;
var initialize = function(){
gt.stage = widget.find('#gallery-theater-stage');
gt.closeBtn = gt.stage.find(".gallery-close");
gt.switchBtn = gt.stage.find(".gallery-theme-switch");
gt.imageContainer = gt.stage.find(".image-container");
gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap");
gt.thumbToggle = gt.stage.find(".gallery-thumb-toggle");
gt.loader = gt.stage.find(".gallery-loader");
gt.stripNextBtn = gt.stage.find(".gallery-thumb-next");
gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev");
gt.descriptionArea = gt.stage.find(".gallery-img-desc");
gt.descriptionToggle = gt.stage.find(".gallery-toggle-desc");
windowScreenThresholdForTouch = windowWidth / 3;
startLoading();
windowHeight = $(window).height();
windowWidth = $(window).width();
var addButton = function () {
widget.find('.theaterButton').remove();
if (!play_flag){
$(button_left_string+button_play_string+button_right_string).insertAfter(widget.find('img.gal-active'));
}
else{
$(button_left_string+button_stop_string+button_right_string).insertAfter(widget.find('img.gal-active'));
}
if (!widget.find(".gal-prev").length) { widget.find('#theaterPreviousButton').remove(); }
if (!widget.find(".gal-next").length) { widget.find('#theaterNextButton').remove(); }
widget.find('#theaterPreviousButton').click(function () {
gt.previousPic();
addButton()
});
widget.find('#theaterNextButton').click(function () {
gt.nextPic();
addButton()
});
widget.find('#theaterPlayButton').click(function () {
play_flag = true;
playtimeoutID = window.setInterval(function(){
gt.playallPic();
},3000)
addButton()
});
widget.find('#theaterStopButton').click(function () {
play_flag = false;
addButton()
window.clearInterval(playtimeoutID)
});
}
bindHandler();
gt.createTheater();
addButton();
}
var bindHandler = function(){
// handler to close the theater
gt.closeBtn.on("click",gt.destroyTheater);
// handler to show theater
widget.find("div[data-list=images] a").on("click",function(){
gt.createTheater();
return false;
})
gt.switchBtn.on("click",gt.switchTheme);
gt.descriptionToggle.on("click", gt.toggleDescription)
gt.stripPrevBtn.on("click", gt.scrollStripRight);
gt.stripNextBtn.on("click", gt.scrollStripLeft);
if(Modernizr.touch){
gt.imageContainer.swipe({
swipe : function(event, direction, distance, duration, fingerCount){
if(direction == "left"){
gt.nextPic();
}else if(direction == "right"){
gt.previousPic();
}
}
})
gt.thumbToggle.swipe({
swipe : function(event, direction, distance, duration, fingerCount){
if(direction == "up"){
gt.thumbStrip.parent().addClass("show");
gt.thumbToggle.addClass("up");
gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
}else if(direction == "down"){
gt.thumbStrip.parent().removeClass("show");
gt.thumbToggle.removeClass("up");
gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
}
}
})
}
//handler for window resize
$(window).resize(function(){
clearTimeout(resizing);
resizing = setTimeout(doneResizing,1000);
})
}
var bindKeyHandlers = function(){
if(!Modernizr.touch){
widget.on("click",".gal-active", gt.nextPic);
widget.on("click",".gal-prev", gt.previousPic);
widget.on("click",".gal-next", gt.nextPic);
$(document).on("keyup",function(e){
switch(e.keyCode){
case 39:
gt.nextPic();
break;
case 37:
gt.previousPic();
break;
case 27:
gt.destroyTheater();
break;
}
})
}
}
var doneResizing = function(){
windowHeight = $(window).height();
windowWidth = $(window).width();
setThumbNavs();
}
var unBindKeyHandlers = function(){
$(document).unbind("keyup");
}
gt.destroyTheater = function(){
parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index)
gt.stage.hide();
widget.removeClass("gallery-mode-on");
gt.imageContainer.empty()
unBindKeyHandlers();
}
gt.createTheater = function(){
gt.stage.show();
widget.addClass("gallery-mode-on");
bindKeyHandlers();
gt.isTheaterInitialized = false;
gt.albumData = {}
gt.albumData.images = $.map(widget.find('img.gallery-thumb'),function(v){
var url = $(v).attr('data-link'),
theater_url = $(v).attr('data-theater-url'),
thumb_url = $(v).attr('src')
return {'url': url,
'file': {'theater': {url: theater_url},
'thumb': {url: thumb_url}
}
}
})
var cp = gt.albumData.images[0];
currentPic = {"image" : cp, "index" : 0};
createThumbStrip();
currentPic = currentPic;
}
gt.hasNextImage = function(){
return (currentPic.index + 1) <= (gt.albumData.images.length - 1);
}
gt.hasPreviousImage = function(){
return (currentPic.index > 0);
}
gt.nextPic = function(){
if(loadingProcess == 0){
if(gt.hasNextImage()){
startLoading();
currentPic.image = gt.albumData.images[currentPic.index + 1];
currentPic.index = currentPic.index + 1;
setMainPic("next");
}
}
}
gt.playallPic = function(){
if(loadingProcess == 0){
mainPicLoading = 1;
nextPicLoading = 1;
prevPicLoading = 1;
if(gt.hasNextImage()){
currentPic.image = gt.albumData.images[currentPic.index + 1];
currentPic.index = currentPic.index + 1;
setMainPic("next");
}
else{
currentPic.image = gt.albumData.images[0];
currentPic.index = 0;
setMainPic();
gt.isTheaterInitialized = false;
setTimeout(function(){
loadingProcess = 0;
nextPicLoading = 0;
widget.find('.theaterButton').remove()
widget.find("img.gallery-image.gal-prev.gal-inactive").remove();
img = widget.find("img.gallery-image.gal-active");
img.eq(0).remove();
},100)
}
}
}
gt.previousPic = function(){
if(loadingProcess == 0){
if(gt.hasPreviousImage()) {
startLoading();
currentPic.image = gt.albumData.images[currentPic.index - 1];
currentPic.index = currentPic.index - 1;
setMainPic("prev");
}
}
}
gt.scrollStripLeft = function(){
pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3);
maximum_pixels = (windowWidth / 2) - (66 * (gt.albumData.images.length - 1));
if(pixels_to_move < maximum_pixels){
pixels_to_move = maximum_pixels;
}
gt.thumbStrip.css("left",pixels_to_move + "px");
}
gt.scrollStripRight = function(){
pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
maximum_pixels = (windowWidth / 2);
if(pixels_to_move > maximum_pixels){
pixels_to_move = maximum_pixels;
}
gt.thumbStrip.css("left",pixels_to_move + "px");
}
gt.switchTheme = function(){
var themeWhiteKlass = "theme-white",
nightKlass = "fa fa-circle",
dayKlass = "fa fa-circle-o",
$body = widget;
if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
gt.switchBtn
.addClass(themeWhiteKlass)
.find("i")
.attr("class", dayKlass);
$body.addClass(themeWhiteKlass);
} else {
gt.switchBtn
.removeClass(themeWhiteKlass)
.find("i")
.attr("class", nightKlass);
$body.removeClass(themeWhiteKlass);
}
}
gt.toggleDescription = function(){
$(this).toggleClass("active");
gt.descriptionArea.toggleClass("active");
}
var startLoading = function(){
loadingProcess = 1;
mainPicLoading = 0;
nextPicLoading = 0;
prevPicLoading = 0;
gt.loader.show();
loadingInterval = setInterval(stopLoading, 300);
}
var stopLoading = function(){
if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){
clearInterval(loadingInterval);
setTimeout(function(){
loadingProcess = 0;
gt.loader.hide();
},100)
}
}
var createThumbStrip = function(){
if(!gt.isTheaterInitialized){
gt.thumbStrip.html('')
$.each(gt.albumData.images,function(index, image){
var li = $("<li class='gallery-item'></li>"),
a = $("<a style=\"cursor: pointer;\"></a>"),
img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
a.on("click",function(){
startLoading();
var old_index = currentPic.index;
currentPic.image = gt.albumData.images[index];
currentPic.index = index;
if(old_index > index){
setMainPic("prev",true);
}else if(old_index < index){
setMainPic("next",true);
}
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);
})
setThumbNavs();
}
setMainPic();
}
var setThumbNavs = function() {
var $thumbNav = gt.stage.find('.gallery-thumb-navs'),
$thumb = gt.thumbStrip.find('img'),
thumbs = $thumb.length,
thumbWidth = $thumb.eq(0).width(),
thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
widthSum = (thumbWidth + thumbGap) * thumbs,
margin = widthSum * 0.1,
totalWidth = widthSum + margin;
if (windowWidth < totalWidth) {
$thumbNav.addClass('show');
}else{
$thumbNav.removeClass('show');
}
};
function one_load(img){
if (img[0].complete){
setTimeout(loaded(img),100)
}else{
setTimeout(one_load,20)
}
}
function loaded(img){
calculateHeight(img);
mainPicLoading = 1;
img.fadeIn(100);
}
window.setMainPic = function(direction,selectedFromStrip){
var img = null;
widget.find('div.gallery-show-original a').eq(0).attr('href',currentPic.image.url)
if(direction == null){
img = $("<img class='gallery-image gal-active'>");
img.hide();
img.attr("src", currentPic.image.file.theater.url);
gt.imageContainer.append(img);
img.one("load", function(){
one_load(img)
})
gt.isTheaterInitialized = true;
}else{
img = gt.imageContainer.find(".gal-active");
if(selectedFromStrip){
gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url);
}
if(direction == "next"){
gt.imageContainer.find(".gal-prev").remove();
img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px");
}else if(direction == "prev"){
gt.imageContainer.find(".gal-next").remove();
img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px");
}
mainPicLoading = 1;
}
gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
if(currentPic.image.description == null){
gt.descriptionArea.addClass("hide");
}else{
gt.descriptionArea.removeClass("hide");
}
if (direction!=null){
calculateHeight(gt.imageContainer.find(".gal-active"));
}
gt.thumbStrip.find("li.active").removeClass("active");
gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
setStripToCenter();
setNextPic();
setPrevPic();
}
var calculateHeight = function(img){
var h = 0,
w = 0,
new_width = 0;
if(!Modernizr.touch){
if(typeof currentPic.image.height == "undefined"){
h = img.height();
currentPic.image.height = h;
w = img.width();
currentPic.image.width = w;
}else{
h = currentPic.image.height;
w = currentPic.image.width;
}
}else{
h = img.height();
w = img.width();
}
if(h > (windowHeight - 150)){
new_width = Math.round((windowHeight - 100) * w / h);
new_width = (new_width / windowWidth) * 100;
img.width(new_width + "%");
}else{
if(windowWidth < 770){
img.width("90%");
}else{
img.width("65%");
}
}
if (typeof set_gallery_height != 'undefined'){
set_gallery_height(widget)
}
}
var setStripToCenter = function(){
left = (windowWidth / 2) - (66 * currentPic.index);
gt.thumbStrip.css("left",left + "px");
}
var setNextPic = function(){
gt.imageContainer.find(".gal-next.temp").remove()
if(gt.hasNextImage()) {
var obj = gt.albumData.images[currentPic.index + 1],
nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
nextImg.attr("src",obj.file.theater.url);
nextImg.hide();
gt.imageContainer.append(nextImg);
nextImg.on("load",function(){
calculateHeight(nextImg);
nextPicLoading = 1;
nextImg.fadeIn(100);
})
}else{
nextPicLoading = 1;
}
}
var setPrevPic = function(){
gt.imageContainer.find(".gal-prev.temp").remove()
if(gt.hasPreviousImage()) {
var obj = gt.albumData.images[currentPic.index - 1],
prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
prevImg.attr("src",obj.file.theater.url);
prevImg.hide();
gt.imageContainer.prepend(prevImg);
prevImg.on("load",function(){
calculateHeight(prevImg);
prevPicLoading = 1;
prevImg.fadeIn(100);
})
}else{
prevPicLoading = 1;
}
}
var l = function(x){
console.log(x)
}
initialize();
}
if (typeof bind_gallery_widget_slide == 'undefined'){
2021-04-10 13:16:46 +00:00
function set_gallery_height(widget){
var h = widget.find('.gallery-thumb-container').height()+widget.find('.gallery-image.gal-active').height()+widget.find('.gallery-actions').height()+widget.find('.theaterButton').height()+20
widget.find('.show-gallery-2.gallery').css('height',h)
}
2021-04-10 12:53:00 +00:00
var bind_gallery_widget_slide = function(){
2021-04-10 13:16:46 +00:00
$('.widget-gallery.widget5').each(function(){
GalleryTheaterWidget($(this));
$(window).resize(function(){
set_gallery_height($(this))
});
})
2021-04-10 12:53:00 +00:00
}
$(document).ready(function(){
bind_gallery_widget_slide()
})
}
// gallery-image gal-prev gal-inactive