diff --git a/app/assets/javascripts/theater-widget.js b/app/assets/javascripts/theater-widget.js new file mode 100644 index 0000000..72207da --- /dev/null +++ b/app/assets/javascripts/theater-widget.js @@ -0,0 +1,527 @@ +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_right_string = '', + button_play_string = '', + button_stop_string = '', + 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 = $("
  • "), + 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'); + } + }; + 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.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("

    " + currentPic.image.description + "

    "); + 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 = $(""); + 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) + } + + initialize(); +} +if (typeof bind_gallery_widget_slide == 'undefined'){ + var bind_gallery_widget_slide = function(){ + $('.widget-gallery.widget5').trigger('onload') + } + $(document).ready(function(){ + bind_gallery_widget_slide() + }) +} + +// gallery-image gal-prev gal-inactive \ No newline at end of file diff --git a/app/controllers/galleries_controller.rb b/app/controllers/galleries_controller.rb index 4c37807..5050455 100644 --- a/app/controllers/galleries_controller.rb +++ b/app/controllers/galleries_controller.rb @@ -126,7 +126,7 @@ class GalleriesController < ApplicationController params = OrbitHelper.params counts = OrbitHelper.widget_data_count images = AlbumImage.where({album_id:{"$in"=>album_ids}}).desc(:id).limit(counts *5).sample(counts) - images = images.collect do |a| + images = images.each_with_index.collect do |a,i| colors = album_color_map[a.album_id] alt_text = (a.description.nil? || a.description == "" ? "gallery image" : Nokogiri::HTML(a.description).text()) { @@ -141,7 +141,8 @@ class GalleriesController < ApplicationController "theater-src" => a.file.theater.url, "album-name" => a.album.name_translations[I18n.locale], "album_color" => iterate_data(colors[1],colors[0],@album_setting.album_card_background_color,'transparent'), - "album_card_text_color" => iterate_data(colors[2],@album_setting.album_card_text_color) + "album_card_text_color" => iterate_data(colors[2],@album_setting.album_card_text_color), + "i" => i } end { diff --git a/app/views/galleries/show.html.erb b/app/views/galleries/show.html.erb index 6104c56..8bb3c39 100644 --- a/app/views/galleries/show.html.erb +++ b/app/views/galleries/show.html.erb @@ -80,108 +80,6 @@ set_gallery_height() }) -<% elsif @layout_type==nil %> -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    - - -
    - - - -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -

    - -

    -
    <% end %> <% OrbitHelper.render_css_in_head(["theater.css"]) %> <%= javascript_include_tag "jquery.touchSwipe.min" %> diff --git a/modules/gallery/_gallery_widget5.html.erb b/modules/gallery/_gallery_widget5.html.erb new file mode 100644 index 0000000..6b46308 --- /dev/null +++ b/modules/gallery/_gallery_widget5.html.erb @@ -0,0 +1,75 @@ + +<% OrbitHelper.render_css_in_head(["theater.css"]) %> +<%= javascript_include_tag "jquery.touchSwipe.min" %> +<%= javascript_include_tag "theater-widget" %> +<% 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/modules/gallery/info.json b/modules/gallery/info.json index 9540977..fbf4ac8 100644 --- a/modules/gallery/info.json +++ b/modules/gallery/info.json @@ -73,6 +73,14 @@ "en" : "4. Card" }, "thumbnail" : "thumb.png" + }, + { + "filename" : "gallery_widget5", + "name" : { + "zh_tw" : "5. 投影片式輪播", + "en" : "5. Slide" + }, + "thumbnail" : "thumb.png" } ] } \ No newline at end of file