From f211afc5232d7b8a0e4508c885baefcc7d78eeb7 Mon Sep 17 00:00:00 2001 From: Harry Bomrah Date: Thu, 16 Jul 2015 19:27:14 +0800 Subject: [PATCH] new theater for gallery.. --- .../javascripts/jquery.touchSwipe.min.js | 1 + app/assets/javascripts/theater.js | 428 ++++++++++++++++++ app/assets/javascripts/theater_bak.js | 261 +++++++++++ app/assets/stylesheets/theater.css | 405 +++++++++++++++++ app/controllers/galleries_controller.rb | 22 +- app/views/galleries/show.html.erb | 45 ++ config/routes.rb | 3 +- 7 files changed, 1153 insertions(+), 12 deletions(-) create mode 100755 app/assets/javascripts/jquery.touchSwipe.min.js create mode 100644 app/assets/javascripts/theater.js create mode 100644 app/assets/javascripts/theater_bak.js create mode 100644 app/assets/stylesheets/theater.css diff --git a/app/assets/javascripts/jquery.touchSwipe.min.js b/app/assets/javascripts/jquery.touchSwipe.min.js new file mode 100755 index 0000000..b7fd340 --- /dev/null +++ b/app/assets/javascripts/jquery.touchSwipe.min.js @@ -0,0 +1 @@ +(function(a){if(typeof define==="function"&&define.amd&&define.amd.jQuery){define(["jquery"],a)}else{a(jQuery)}}(function(f){var y="1.6.9",p="left",o="right",e="up",x="down",c="in",A="out",m="none",s="auto",l="swipe",t="pinch",B="tap",j="doubletap",b="longtap",z="hold",E="horizontal",u="vertical",i="all",r=10,g="start",k="move",h="end",q="cancel",a="ontouchstart" in window,v=window.navigator.msPointerEnabled&&!window.navigator.pointerEnabled,d=window.navigator.pointerEnabled||window.navigator.msPointerEnabled,C="TouchSwipe";var n={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,hold:null,triggerOnTouchEnd:true,triggerOnTouchLeave:false,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"label, button, input, select, textarea, a, .noSwipe",preventDefaultEvents:true};f.fn.swipe=function(H){var G=f(this),F=G.data(C);if(F&&typeof H==="string"){if(F[H]){return F[H].apply(this,Array.prototype.slice.call(arguments,1))}else{f.error("Method "+H+" does not exist on jQuery.swipe")}}else{if(!F&&(typeof H==="object"||!H)){return w.apply(this,arguments)}}return G};f.fn.swipe.version=y;f.fn.swipe.defaults=n;f.fn.swipe.phases={PHASE_START:g,PHASE_MOVE:k,PHASE_END:h,PHASE_CANCEL:q};f.fn.swipe.directions={LEFT:p,RIGHT:o,UP:e,DOWN:x,IN:c,OUT:A};f.fn.swipe.pageScroll={NONE:m,HORIZONTAL:E,VERTICAL:u,AUTO:s};f.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,ALL:i};function w(F){if(F&&(F.allowPageScroll===undefined&&(F.swipe!==undefined||F.swipeStatus!==undefined))){F.allowPageScroll=m}if(F.click!==undefined&&F.tap===undefined){F.tap=F.click}if(!F){F={}}F=f.extend({},f.fn.swipe.defaults,F);return this.each(function(){var H=f(this);var G=H.data(C);if(!G){G=new D(this,F);H.data(C,G)}})}function D(a5,aw){var aA=(a||d||!aw.fallbackToMouseEvents),K=aA?(d?(v?"MSPointerDown":"pointerdown"):"touchstart"):"mousedown",az=aA?(d?(v?"MSPointerMove":"pointermove"):"touchmove"):"mousemove",V=aA?(d?(v?"MSPointerUp":"pointerup"):"touchend"):"mouseup",T=aA?null:"mouseleave",aE=(d?(v?"MSPointerCancel":"pointercancel"):"touchcancel");var ah=0,aQ=null,ac=0,a2=0,a0=0,H=1,ar=0,aK=0,N=null;var aS=f(a5);var aa="start";var X=0;var aR=null;var U=0,a3=0,a6=0,ae=0,O=0;var aX=null,ag=null;try{aS.bind(K,aO);aS.bind(aE,ba)}catch(al){f.error("events not supported "+K+","+aE+" on jQuery.swipe")}this.enable=function(){aS.bind(K,aO);aS.bind(aE,ba);return aS};this.disable=function(){aL();return aS};this.destroy=function(){aL();aS.data(C,null);aS=null};this.option=function(bd,bc){if(aw[bd]!==undefined){if(bc===undefined){return aw[bd]}else{aw[bd]=bc}}else{f.error("Option "+bd+" does not exist on jQuery.swipe.options")}return null};function aO(be){if(aC()){return}if(f(be.target).closest(aw.excludedElements,aS).length>0){return}var bf=be.originalEvent?be.originalEvent:be;var bd,bg=bf.touches,bc=bg?bg[0]:bf;aa=g;if(bg){X=bg.length}else{be.preventDefault()}ah=0;aQ=null;aK=null;ac=0;a2=0;a0=0;H=1;ar=0;aR=ak();N=ab();S();if(!bg||(X===aw.fingers||aw.fingers===i)||aY()){aj(0,bc);U=au();if(X==2){aj(1,bg[1]);a2=a0=av(aR[0].start,aR[1].start)}if(aw.swipeStatus||aw.pinchStatus){bd=P(bf,aa)}}else{bd=false}if(bd===false){aa=q;P(bf,aa);return bd}else{if(aw.hold){ag=setTimeout(f.proxy(function(){aS.trigger("hold",[bf.target]);if(aw.hold){bd=aw.hold.call(aS,bf,bf.target)}},this),aw.longTapThreshold)}ap(true)}return null}function a4(bf){var bi=bf.originalEvent?bf.originalEvent:bf;if(aa===h||aa===q||an()){return}var be,bj=bi.touches,bd=bj?bj[0]:bi;var bg=aI(bd);a3=au();if(bj){X=bj.length}if(aw.hold){clearTimeout(ag)}aa=k;if(X==2){if(a2==0){aj(1,bj[1]);a2=a0=av(aR[0].start,aR[1].start)}else{aI(bj[1]);a0=av(aR[0].end,aR[1].end);aK=at(aR[0].end,aR[1].end)}H=a8(a2,a0);ar=Math.abs(a2-a0)}if((X===aw.fingers||aw.fingers===i)||!bj||aY()){aQ=aM(bg.start,bg.end);am(bf,aQ);ah=aT(bg.start,bg.end);ac=aN();aJ(aQ,ah);if(aw.swipeStatus||aw.pinchStatus){be=P(bi,aa)}if(!aw.triggerOnTouchEnd||aw.triggerOnTouchLeave){var bc=true;if(aw.triggerOnTouchLeave){var bh=aZ(this);bc=F(bg.end,bh)}if(!aw.triggerOnTouchEnd&&bc){aa=aD(k)}else{if(aw.triggerOnTouchLeave&&!bc){aa=aD(h)}}if(aa==q||aa==h){P(bi,aa)}}}else{aa=q;P(bi,aa)}if(be===false){aa=q;P(bi,aa)}}function M(bc){var bd=bc.originalEvent?bc.originalEvent:bc,be=bd.touches;if(be){if(be.length){G();return true}}if(an()){X=ae}a3=au();ac=aN();if(bb()||!ao()){aa=q;P(bd,aa)}else{if(aw.triggerOnTouchEnd||(aw.triggerOnTouchEnd==false&&aa===k)){bc.preventDefault();aa=h;P(bd,aa)}else{if(!aw.triggerOnTouchEnd&&a7()){aa=h;aG(bd,aa,B)}else{if(aa===k){aa=q;P(bd,aa)}}}}ap(false);return null}function ba(){X=0;a3=0;U=0;a2=0;a0=0;H=1;S();ap(false)}function L(bc){var bd=bc.originalEvent?bc.originalEvent:bc;if(aw.triggerOnTouchLeave){aa=aD(h);P(bd,aa)}}function aL(){aS.unbind(K,aO);aS.unbind(aE,ba);aS.unbind(az,a4);aS.unbind(V,M);if(T){aS.unbind(T,L)}ap(false)}function aD(bg){var bf=bg;var be=aB();var bd=ao();var bc=bb();if(!be||bc){bf=q}else{if(bd&&bg==k&&(!aw.triggerOnTouchEnd||aw.triggerOnTouchLeave)){bf=h}else{if(!bd&&bg==h&&aw.triggerOnTouchLeave){bf=q}}}return bf}function P(be,bc){var bd,bf=be.touches;if((J()||W())||(Q()||aY())){if(J()||W()){bd=aG(be,bc,l)}if((Q()||aY())&&bd!==false){bd=aG(be,bc,t)}}else{if(aH()&&bd!==false){bd=aG(be,bc,j)}else{if(aq()&&bd!==false){bd=aG(be,bc,b)}else{if(ai()&&bd!==false){bd=aG(be,bc,B)}}}}if(bc===q){ba(be)}if(bc===h){if(bf){if(!bf.length){ba(be)}}else{ba(be)}}return bd}function aG(bf,bc,be){var bd;if(be==l){aS.trigger("swipeStatus",[bc,aQ||null,ah||0,ac||0,X,aR]);if(aw.swipeStatus){bd=aw.swipeStatus.call(aS,bf,bc,aQ||null,ah||0,ac||0,X,aR);if(bd===false){return false}}if(bc==h&&aW()){aS.trigger("swipe",[aQ,ah,ac,X,aR]);if(aw.swipe){bd=aw.swipe.call(aS,bf,aQ,ah,ac,X,aR);if(bd===false){return false}}switch(aQ){case p:aS.trigger("swipeLeft",[aQ,ah,ac,X,aR]);if(aw.swipeLeft){bd=aw.swipeLeft.call(aS,bf,aQ,ah,ac,X,aR)}break;case o:aS.trigger("swipeRight",[aQ,ah,ac,X,aR]);if(aw.swipeRight){bd=aw.swipeRight.call(aS,bf,aQ,ah,ac,X,aR)}break;case e:aS.trigger("swipeUp",[aQ,ah,ac,X,aR]);if(aw.swipeUp){bd=aw.swipeUp.call(aS,bf,aQ,ah,ac,X,aR)}break;case x:aS.trigger("swipeDown",[aQ,ah,ac,X,aR]);if(aw.swipeDown){bd=aw.swipeDown.call(aS,bf,aQ,ah,ac,X,aR)}break}}}if(be==t){aS.trigger("pinchStatus",[bc,aK||null,ar||0,ac||0,X,H,aR]);if(aw.pinchStatus){bd=aw.pinchStatus.call(aS,bf,bc,aK||null,ar||0,ac||0,X,H,aR);if(bd===false){return false}}if(bc==h&&a9()){switch(aK){case c:aS.trigger("pinchIn",[aK||null,ar||0,ac||0,X,H,aR]);if(aw.pinchIn){bd=aw.pinchIn.call(aS,bf,aK||null,ar||0,ac||0,X,H,aR)}break;case A:aS.trigger("pinchOut",[aK||null,ar||0,ac||0,X,H,aR]);if(aw.pinchOut){bd=aw.pinchOut.call(aS,bf,aK||null,ar||0,ac||0,X,H,aR)}break}}}if(be==B){if(bc===q||bc===h){clearTimeout(aX);clearTimeout(ag);if(Z()&&!I()){O=au();aX=setTimeout(f.proxy(function(){O=null;aS.trigger("tap",[bf.target]);if(aw.tap){bd=aw.tap.call(aS,bf,bf.target)}},this),aw.doubleTapThreshold)}else{O=null;aS.trigger("tap",[bf.target]);if(aw.tap){bd=aw.tap.call(aS,bf,bf.target)}}}}else{if(be==j){if(bc===q||bc===h){clearTimeout(aX);O=null;aS.trigger("doubletap",[bf.target]);if(aw.doubleTap){bd=aw.doubleTap.call(aS,bf,bf.target)}}}else{if(be==b){if(bc===q||bc===h){clearTimeout(aX);O=null;aS.trigger("longtap",[bf.target]);if(aw.longTap){bd=aw.longTap.call(aS,bf,bf.target)}}}}}return bd}function ao(){var bc=true;if(aw.threshold!==null){bc=ah>=aw.threshold}return bc}function bb(){var bc=false;if(aw.cancelThreshold!==null&&aQ!==null){bc=(aU(aQ)-ah)>=aw.cancelThreshold}return bc}function af(){if(aw.pinchThreshold!==null){return ar>=aw.pinchThreshold}return true}function aB(){var bc;if(aw.maxTimeThreshold){if(ac>=aw.maxTimeThreshold){bc=false}else{bc=true}}else{bc=true}return bc}function am(bc,bd){if(aw.preventDefaultEvents===false){return}if(aw.allowPageScroll===m){bc.preventDefault()}else{var be=aw.allowPageScroll===s;switch(bd){case p:if((aw.swipeLeft&&be)||(!be&&aw.allowPageScroll!=E)){bc.preventDefault()}break;case o:if((aw.swipeRight&&be)||(!be&&aw.allowPageScroll!=E)){bc.preventDefault()}break;case e:if((aw.swipeUp&&be)||(!be&&aw.allowPageScroll!=u)){bc.preventDefault()}break;case x:if((aw.swipeDown&&be)||(!be&&aw.allowPageScroll!=u)){bc.preventDefault()}break}}}function a9(){var bd=aP();var bc=Y();var be=af();return bd&&bc&&be}function aY(){return !!(aw.pinchStatus||aw.pinchIn||aw.pinchOut)}function Q(){return !!(a9()&&aY())}function aW(){var bf=aB();var bh=ao();var be=aP();var bc=Y();var bd=bb();var bg=!bd&&bc&&be&&bh&&bf;return bg}function W(){return !!(aw.swipe||aw.swipeStatus||aw.swipeLeft||aw.swipeRight||aw.swipeUp||aw.swipeDown)}function J(){return !!(aW()&&W())}function aP(){return((X===aw.fingers||aw.fingers===i)||!a)}function Y(){return aR[0].end.x!==0}function a7(){return !!(aw.tap)}function Z(){return !!(aw.doubleTap)}function aV(){return !!(aw.longTap)}function R(){if(O==null){return false}var bc=au();return(Z()&&((bc-O)<=aw.doubleTapThreshold))}function I(){return R()}function ay(){return((X===1||!a)&&(isNaN(ah)||ahaw.longTapThreshold)&&(ah=0)){return p}else{if((be<=360)&&(be>=315)){return p}else{if((be>=135)&&(be<=225)){return o}else{if((be>45)&&(be<135)){return x}else{return e}}}}}function au(){var bc=new Date();return bc.getTime()}function aZ(bc){bc=f(bc);var be=bc.offset();var bd={left:be.left,right:be.left+bc.outerWidth(),top:be.top,bottom:be.top+bc.outerHeight()};return bd}function F(bc,bd){return(bc.x>bd.left&&bc.xbd.top&&bc.y 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.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 = $("body"); + + 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); + + } + } + + 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){ + $.each(gt.albumData.images,function(index, image){ + var li = $("
  • "), + a = $(""), + img = $("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'); + } + }; + + var setMainPic = function(direction,selectedFromStrip){ + var img = null; + if(direction == null){ + img = $(""); + img.hide(); + img.attr("src", currentPic.image.file.theater.url); + gt.imageContainer.append(img); + img.one("load", function(){ + calculateHeight(img); + mainPicLoading = 1; + img.fadeIn(100); + }) + 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; + } + 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(); + changeUrl(); + } + + 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%"); + } + } + } + + var changeUrl = function(){ + window.location.hash = currentPic.image._id + } + + 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 = $(""); + 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 = $(""); + 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) + } + + $(document).ready(function(){ + initialize(); + }) +} + +// gallery-image gal-prev gal-inactive \ No newline at end of file diff --git a/app/assets/javascripts/theater_bak.js b/app/assets/javascripts/theater_bak.js new file mode 100644 index 0000000..5bde884 --- /dev/null +++ b/app/assets/javascripts/theater_bak.js @@ -0,0 +1,261 @@ +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 = $("
  • "), + a = $(""), + img = $("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(); + }) +} \ No newline at end of file diff --git a/app/assets/stylesheets/theater.css b/app/assets/stylesheets/theater.css new file mode 100644 index 0000000..430ecd0 --- /dev/null +++ b/app/assets/stylesheets/theater.css @@ -0,0 +1,405 @@ +/* Reset and basic styles */ + +body { + font-size: 100%; + margin: 0; + padding: 0; + overflow-x: hidden; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +.gallery-mode-on { + /*overflow-y: hidden;*/ +} +/* Gallery */ + +#gallery-theater-stage { + display: none; +} + +#gallery-theater-stage > .gallery { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #000; + z-index: 2000; +} + +.gallery-loader { + padding: 10px; + position: absolute; + display: none; + left: 50%; + top: 10px; + -webkit-transform: translate(-50%, 50%); + transform: translate(-50%, 50%); + border-radius: 2px; + z-index: 2000; + background-color: rgba(0, 0, 0, .6); + transition: .3s all; +} + +.spinner { + margin: 0 auto; + width: 50px; + height: 20px; + text-align: center; + font-size: 10px; +} + +.spinner > div { + background-color: #e8e8e8; + height: 100%; + width: 4px; + display: inline-block; + -webkit-animation: stretchdelay 1.2s infinite ease-in-out; + animation: stretchdelay 1.2s infinite ease-in-out; +} + +.spinner .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.spinner .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.spinner .rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.spinner .rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +@-webkit-keyframes stretchdelay { + 0%, 40%, 100% { + -webkit-transform: scaleY(0.4) + } + 20% { + -webkit-transform: scaleY(1.0) + } +} + +@keyframes stretchdelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } + 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } +} + +.gallery-actions { + position: absolute; + right: 1rem; + top: 1rem; + cursor: pointer; + background: rgba(255, 255, 255, .7); + border-radius: 2px; + z-index: 2000; +} + +.gallery-actions-btn { + padding: 8px 12px 8px 10px; + display: inline-block; +} + +.touch .gallery-actions-btn { + padding: 12px 15px 12px 15px; +} + +.gallery-theme-switch { + border-right: 1px solid rgba(255, 255, 255, .2); +} + +.gallery-close { + color: #000; +} + +.gallery-theme-switch:hover, +.gallery-close:hover { + color: #fff; +} + +.touch .image-container { + height: 100%; + padding-bottom: 150px; + z-index: 800; +} + +.gallery-image { + position: fixed; + left: 50%; + top: 50%; + width: 60%; + height: auto; + cursor: pointer; +} + +.no-touch .gallery-image { + -webkit-transition: .3s all; + transition: .3s all; +} + +.gal-prev { + display: none; + left: 0; + -webkit-transform: translate(-95%, -50%); + transform: translate(-95%, -50%); +} + +.gal-prev:hover { + -webkit-transform: translate(-94%, -50%); + transform: translate(-94%, -50%); +} + +.gal-next { + display: none; + left: auto; + right: 0; + -webkit-transform: translate(95%, -50%); + transform: translate(95%, -50%); +} + +.gal-next:hover { + -webkit-transform: translate(94%, -50%); + transform: translate(94%, -50%); +} + +.gal-inactive { + -webkit-transition: .3s all; + transition: .3s all; + opacity: .3; +} + +.gal-inactive:hover { + opacity: 1; +} + +.gal-active { + display: none; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +/* Thumbnails */ +.gallery-thumb-toggle { + position: absolute; + bottom: -1000px; +} +.gallery-thumb-wrap { + overflow-y: hidden; + overflow-x: hidden; + list-style: none; + margin: 0 auto; + padding: 10px 0; + text-align: center; + white-space: nowrap; + position: absolute; + left: 50%; + bottom: 0; + -webkit-transition: .3s all; + transition: .3s all; +} + +.gallery-item { + margin-right: 1em; + display: inline-block; +} + +.gallery-item.active { + border-radius: 2px; + border-radius: 0.125rem; + border: 5px solid #fff; +} + +.gallery-thumb { + width: 50px; + height: 50px; + opacity: .5; + -webkit-transition: .3s opacity; + transition: .3s opacity; +} + +.gallery-thumb:hover { + opacity: 1; +} + +.gallery-thumb-container { + height: 80px; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background: #1b1b1b; +} + +.gallery-thumb-navs { + display: none; +} + +.gallery-thumb-navs.show { + display: block; +} + +.gallery-thumb-nav { + position: absolute; + cursor: pointer; + font-size: 1.4rem; + color: rgba(255, 255, 255, .7); + background: #222; + height: 80px; + line-height: 80px; + width: 50px; + text-align: center; + z-index: 900; +} + +.gallery-thumb-nav:hover { + color: #fff; +} + +.gallery-thumb-prev { + left: 0; +} + +.gallery-thumb-next { + right: 0; +} + +.active .gallery-thumb { + opacity: 1; +} +/* White theme */ + +.theme-white #gallery-theater-stage > .gallery { + background-color: #fffdf7; +} + +.theme-white .gallery-actions { + background-color: #eee; + border: 1px solid #ddd; +} + +.theme-white .gallery-theme-switch { + border-right: 1px solid #ddd; +} + +.theme-white .gallery-thumb-toggle, +.theme-white .gallery-thumb-toggle:before, +.theme-white .gallery-thumb-toggle:after { + color: #777; + border-color: #aaa; +} + +.theme-white .gallery-thumb-container { + background-color: #e2e2e2; + border-top: 1px solid #c7c7c7; +} + +.theme-white .gallery-actions-btn { + color: #777; +} + +.theme-white .gallery-actions-btn:hover { + color: #ff4444; +} + +.theme-white .gallery-item.active { + border-color: #ff4444; +} + +.theme-white .gallery-thumb-nav { + color: #777; + background-color: #eee; +} + +.theme-white .gallery-thumb-prev { + border-right: 1px solid #c7c7c7; +} +.theme-white .gallery-thumb-next { + border-left: 1px solid #c7c7c7; +} + +.theme-white .gallery-thumb-nav:hover { + color: #ff4444; +} + +.theme-white .gallery-loader { + background-color: #777; +} + +.theme-white .spinner > div { + color: #ff4444; +} + +@media screen and (max-width: 768px) { + + .gal-prev { + -webkit-transform: translate(-101%, -50%); + transform: translate(-101%, -50%); + } + + .gal-next { + -webkit-transform: translate(101%, -50%); + transform: translate(101%, -50%); + } + + .gallery-thumb-toggle { + bottom: 50px; + left: 0; + color: #fff; + width: 100%; + text-align: center; + -webkit-transition: .1s all; + transition: .1s all; + } + + .gallery-thumb-toggle.up { + bottom: 96px; + } + + .gallery-thumb-toggle:before { + content: ""; + position: absolute; + top: 50%; + left: 10%; + margin: auto; + width: 38%; + border-top: 1px solid rgba(255, 255, 255, .2); + height: 1px; + } + + .gallery-thumb-toggle:after { + content: ""; + position: absolute; + top: 50%; + right: 10%; + margin: auto; + width: 38%; + border-top: 1px solid rgba(255, 255, 255, .2); + height: 1px; + } + + .gallery-thumb-container { + bottom: -1000px; + -webkit-transition: .1s all; + transition: .1s all; + } + .gallery-thumb-container.show { + bottom: 0; + } +} diff --git a/app/controllers/galleries_controller.rb b/app/controllers/galleries_controller.rb index 10b8d58..6980af8 100644 --- a/app/controllers/galleries_controller.rb +++ b/app/controllers/galleries_controller.rb @@ -27,7 +27,7 @@ class GalleriesController < ApplicationController { "image-description" => a.description, "alt_title" => alt_text, - "link_to_show" => "/" + I18n.locale.to_s + params[:url] + "/-" + a.id.to_s + "?method=theater", + "link_to_show" => "/xhr/galleries/theater/" + a.id.to_s, "thumb-src" => a.file.thumb.url } end @@ -64,7 +64,7 @@ class GalleriesController < ApplicationController alt_text = (a.description.nil? || a.description == "" ? "gallery image" : a.description) { - "link_to_show" => OrbitHelper.widget_more_url + "/-" + a.id.to_s + "?method=theater", + "link_to_show" => OrbitHelper.widget_more_url + "/" + a.album.to_param + "#" + a.id.to_s, "alt_title" => alt_text, "thumb-src" => a.file.thumb.url } @@ -94,17 +94,17 @@ class GalleriesController < ApplicationController end def theater - params = OrbitHelper.params - image = AlbumImage.find(params[:uid]) + image = AlbumImage.find(params[:id]) albumid = image.album_id album = Album.find(albumid) images = album.album_images.asc(:order) - { - "album" => album, - "images" => images, - "image" => image, - "wall_images" => imgs(albumid), - "back_to_albums" => OrbitHelper.url_to_show(album.to_param) - } + data = { + "album" => album, + # "images" => images, + "image" => image.id.to_s, + "images" => imgs(albumid) + } + + render :json => {"data" => data}.to_json end end \ No newline at end of file diff --git a/app/views/galleries/show.html.erb b/app/views/galleries/show.html.erb index 9f04326..c1663cb 100644 --- a/app/views/galleries/show.html.erb +++ b/app/views/galleries/show.html.erb @@ -1 +1,46 @@ <%= render_view %> +<% OrbitHelper.render_css_in_head(["theater.css"]) %> +<%= javascript_include_tag "jquery.touchSwipe.min" %> +<%= javascript_include_tag "theater" %> +<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %> + + + \ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 5160fb0..6436413 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -3,9 +3,10 @@ Rails.application.routes.draw do locales = Site.first.in_use_locales rescue I18n.available_locales scope "(:locale)", locale: Regexp.new(locales.join("|")) do + get "/xhr/galleries/theater/:id" => "galleries#theater" namespace :admin do get "galleries/get_photoData_json" => "galleries#get_photoData_json" - + resources :galleries do get "imgs" => "galleries#imgs" end