Finalize ad_banner changes: front-end, back-end, mobile
This commit is contained in:
		
							parent
							
								
									fea86ba3a9
								
							
						
					
					
						commit
						7353b48212
					
				|  | @ -5,7 +5,7 @@ | |||
| // the compiled file.
 | ||||
| //
 | ||||
| //= require jquery
 | ||||
| //= require mobile/jquery.cycle.all
 | ||||
| //= require cycle2
 | ||||
| //= require mobile/jquery.mu.image.resize
 | ||||
| //= require mobile/orbit.mobile
 | ||||
| //= require mobile/jquery.mobile-1.2.0.min
 | ||||
|  |  | |||
|  | @ -6,12 +6,7 @@ $(document).ready(function() { | |||
| 		if($(this).attr("path")==''){ | ||||
| 			$(this).html("App setting Failed"); | ||||
| 		}else{ | ||||
| 			// Check if this App is AD_Banner
 | ||||
| 			if($(this).attr("path").indexOf("show_banner")>0){ | ||||
| 				ajax_load_proc($(this),$(this).attr("path"),"true"); 	 | ||||
| 			}else{ | ||||
| 				ajax_load_proc($(this),$(this).attr("path"),$(this).attr("path")); | ||||
| 			} | ||||
| 			ajax_load_proc($(this),$(this).attr("path")); 	 | ||||
| 		} | ||||
| 	}); | ||||
| 
 | ||||
|  | @ -21,48 +16,15 @@ $(document).ready(function() { | |||
| function ajax_load_proc(wapper,url,isBanner){ | ||||
| 	$.get(encodeURI(url), {}, function(respText,textSta,XML){  | ||||
| 		if (textSta == 'success') { | ||||
| 			if(isBanner=="true"){ | ||||
| 				wapper.html(respText); | ||||
| 				$( '.cycle-slideshow' ).cycle(); | ||||
| 				// var banner = banners[banner_index];
 | ||||
| 				// $(banner.banner_name+" > img").each(function(){
 | ||||
| 				// 	$(this).load(function(){banner.image_loaded++; });
 | ||||
| 				// });
 | ||||
| 				// BannerCycle(banner_index);
 | ||||
| 				// banner_index++;
 | ||||
| 				// $( '.cycle-slideshow' ).cycle();
 | ||||
| 			}else{ | ||||
| 				wapper.html(respText); | ||||
| 			} | ||||
| 			wapper.html(respText); | ||||
| 		}; | ||||
| 		if(textSta == 'error') | ||||
| 			wapper.html("Loading Failed<br/>  <a href='"+$(this).attr('path')+"'>Go See</a>"); | ||||
| 	}); | ||||
| } | ||||
| 
 | ||||
| function BannerCycle(banner_index){ | ||||
| 	var banner = banners[banner_index]; | ||||
| 	// Wait untill all images are loaded
 | ||||
| 	// console.log(banner.image_loaded, $(banner.banner_name+" img").length, banners[banner_index])
 | ||||
| 	if (banner.image_loaded==$(banner.banner_name+" img").length){ | ||||
|     $(banner.banner_name).cycle({ | ||||
| 			fx: banner.banner_fx, | ||||
| 			timeout: banner.timeout, | ||||
| 			pager: banner.banner_pager, | ||||
| 			speed: banner.banner_speed, | ||||
| 			fit: 1, | ||||
| 			containerResize: 0, | ||||
| 			width: banner.banner_width, | ||||
| 			height: banner.banner_height, | ||||
| 			pagerAnchorBuilder: function(idx, slide) { return "<li><a href='#'></a></li>"; } | ||||
| 		}); | ||||
| 	}else{ | ||||
| 		setTimeout("BannerCycle("+banner_index+")",100); | ||||
| 	} | ||||
| } | ||||
| 
 | ||||
| $(document).ready(function() {  | ||||
| 	$(document).on('click', '.cycle-slideshow img', function() | ||||
| 	$(document).on('click', '.orbit-cycle-slideshow img', function() | ||||
| 	{ | ||||
| 		if($(this).attr('link_url')!='') | ||||
| 		{ | ||||
|  |  | |||
|  | @ -1,9 +0,0 @@ | |||
| /** | ||||
|  * jQuery.Preload - Multifunctional preloader | ||||
|  * Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com | ||||
|  * Dual licensed under MIT and GPL. | ||||
|  * Date: 3/25/2009 | ||||
|  * @author Ariel Flesler | ||||
|  * @version 1.0.8 | ||||
|  */ | ||||
| ;(function($){var h=$.preload=function(c,d){if(c.split)c=$(c);d=$.extend({},h.defaults,d);var f=$.map(c,function(a){if(!a)return;if(a.split)return d.base+a+d.ext;var b=a.src||a.href;if(typeof d.placeholder=='string'&&a.src)a.src=d.placeholder;if(b&&d.find)b=b.replace(d.find,d.replace);return b||null}),data={loaded:0,failed:0,next:0,done:0,total:f.length};if(!data.total)return finish();var g=$(Array(d.threshold+1).join('<img/>')).load(handler).error(handler).bind('abort',handler).each(fetch);function handler(e){data.element=this;data.found=e.type=='load';data.image=this.src;data.index=this.index;var a=data.original=c[this.index];data[data.found?'loaded':'failed']++;data.done++;if(d.enforceCache)h.cache.push($('<img/>').attr('src',data.image)[0]);if(d.placeholder&&a.src)a.src=data.found?data.image:d.notFound||a.src;if(d.onComplete)d.onComplete(data);if(data.done<data.total)fetch(0,this);else{if(g&&g.unbind)g.unbind('load').unbind('error').unbind('abort');g=null;finish()}};function fetch(i,a,b){if(a.attachEvent&&data.next&&data.next%h.gap==0&&!b){setTimeout(function(){fetch(i,a,1)},0);return!1}if(data.next==data.total)return!1;a.index=data.next;a.src=f[data.next++];if(d.onRequest){data.index=a.index;data.element=a;data.image=a.src;data.original=c[data.next-1];d.onRequest(data)}};function finish(){if(d.onFinish)d.onFinish(data)}};h.gap=14;h.cache=[];h.defaults={threshold:2,base:'',ext:'',replace:''};$.fn.preload=function(a){h(this,a);return this}})(jQuery); | ||||
|  | @ -0,0 +1,13 @@ | |||
| /** | ||||
|  * jQuery.Preload | ||||
|  * https://github.com/htmlhero/jQuery.preload
 | ||||
|  * | ||||
|  * Created by Andrew Motoshin | ||||
|  * http://htmlhero.ru
 | ||||
|  * | ||||
|  * Version: 1.5.0 | ||||
|  * Requires: jQuery 1.6+ | ||||
|  * | ||||
|  */ | ||||
| 
 | ||||
| !function(a){a.preload=function(){var b=[],c=function(a){for(var c=0;c<b.length;c++)if(b[c].src===a.src)return b[c];return b.push(a),a},d=function(a,b,c){"function"==typeof b&&b.call(a,c)};return function(b,e,f){if("undefined"!=typeof b){"string"==typeof b&&(b=[b]),2===arguments.length&&"function"==typeof e&&(f=e,e=0);var g,h=b.length;if(e>0&&h>e&&(g=b.slice(e,h),b=b.slice(0,e),h=b.length),!h)return d(b,f,!0),void 0;for(var i,j=arguments.callee,k=0,l=function(){k++,k===h&&(d(b,f,!g),j(g,e,f))},m=0;m<b.length;m++)i=new Image,i.src=b[m],i=c(i),i.complete?l():a(i).on("load error",l)}}}();var b=function(b,c){var d,e,f,g,h,i=[],j=new RegExp("url\\(['\"]?([^\"')]*)['\"]?\\)","i");return c.recursive&&(b=b.find("*").add(b)),b.each(function(){for(d=a(this),e=d.css("background-image")+","+d.css("border-image-source"),e=e.split(","),h=0;h<e.length;h++)f=e[h],-1===f.indexOf("about:blank")&&-1===f.indexOf("data:image")&&(g=j.exec(f),g&&i.push(g[1]));"IMG"===this.nodeName&&i.push(this.src)}),i};a.fn.preload=function(){var c,d;1===arguments.length?"object"==typeof arguments[0]?c=arguments[0]:d=arguments[0]:arguments.length>1&&(c=arguments[0],d=arguments[1]),c=a.extend({recursive:!0,part:0},c);var e=this,f=b(e,c);return a.preload(f,c.part,function(a){a&&"function"==typeof d&&d.call(e.get())}),this}}(jQuery); | ||||
|  | @ -3,5 +3,5 @@ | |||
| 
 | ||||
| //= require basic/bootstrap
 | ||||
| //= require kernel
 | ||||
| //= require lib/jquery.preload-min.js
 | ||||
| //= require lib/jquery.preload.min.js
 | ||||
| //= require cycle2
 | ||||
|  | @ -113,6 +113,9 @@ module OrbitBackendHelper | |||
|       sorted_objects = get_sorted_objects(object.tags, 'name') rescue '' | ||||
|     when 'standalone' | ||||
|       res << (field[:need_value] ? eval(field[:display_option]) : field[:display_option]) | ||||
|     when 'image' | ||||
|       image = (field[:version] ? object.send(field[:db_field]).send(field[:version]) : object.send(field[:db_field])) | ||||
|       res << image_tag(image) | ||||
|     else | ||||
|       sorted_values = object.send(field[:db_field]) | ||||
|       sorted_values = sorted_values.sort if sorted_values.is_a?(Array) | ||||
|  | @ -181,8 +184,6 @@ module OrbitBackendHelper | |||
|       display_date(value) | ||||
|     when 'Time' | ||||
|       display_time(value) | ||||
|     when /Uploader/ | ||||
|       image_tag(value.url) | ||||
|     else | ||||
|       value | ||||
|     end | ||||
|  |  | |||
|  | @ -68,7 +68,7 @@ def cache_dir | |||
|   end | ||||
| 
 | ||||
|    | ||||
|   def manipulate! | ||||
|   # def manipulate! | ||||
|     # cache_stored_file! if !cached? | ||||
| #raise File.extname(current_path.to_s).to_s | ||||
|     # image = ::MiniMagick::Image.open(current_path) | ||||
|  | @ -77,6 +77,6 @@ def cache_dir | |||
| #    ::MiniMagick::Image.open(current_path) | ||||
| #  rescue  | ||||
| #    nil | ||||
|   end | ||||
|   # end | ||||
|    | ||||
| end | ||||
|  |  | |||
|  | @ -8,6 +8,7 @@ | |||
|                   # can have: title, warning, cancel and submit values | ||||
|   field type: 'image', | ||||
|         db_field: 'file', | ||||
|         version: 'thumb', | ||||
|         translation: 'preview', | ||||
|         hide: 'phone' | ||||
|   # field type: 'status', | ||||
|  |  | |||
|  | @ -1,9 +1,26 @@ | |||
| <div style='position:relative'> | ||||
|   <div id='slideshow-<%= @ad_banner.title.dehumanize %>' class="cycle-slideshow"  data-cycle-timeout="<%= @ad_banner.timeout_millisecond %>" data-cycle-pager=".banner_nav_<%= @ad_banner.title.dehumanize %>" data-cycle-pager-template="<li><a href='#'></a></li>" data-cycle-pager-active-class="activeSlide" style="z-index: 0"> | ||||
|   <div id='slideshow-<%= @ad_banner.title.dehumanize %>' class="orbit-cycle-slideshow"  data-cycle-timeout="<%= @ad_banner.timeout_millisecond %>" data-cycle-pager=".banner_nav_<%= @ad_banner.title.dehumanize %>" data-cycle-pager-template="<li><a href='#'></a></li>" data-cycle-pager-active-class="activeSlide" data-cycle-random='true' style="z-index: 0"> | ||||
|     <% @ad_banner.ad_images.can_display.each do |ad_image| %> | ||||
|       <% link = ad_image_link(ad_image) %> | ||||
|       <%= image_tag ad_image.file, width: @ad_banner.width, height: @ad_banner.height, 'link_open' => ad_image.link_open, 'link_url' => link, style: ('cursor:pointer;' if link.present?) %> | ||||
|       <%= image_tag ad_image.file, width: @ad_banner.width, height: @ad_banner.height, link_open: ad_image.link_open, link_url: link, style: "display:none; #{'cursor:pointer;' if link.present?}" %> | ||||
|     <% end %> | ||||
|   </div> | ||||
|   <ul class='clear banner_nav banner_nav_<%= @ad_banner.title.dehumanize %>'></ul> | ||||
| </div> | ||||
| 
 | ||||
| <script> | ||||
|   $(function(){ | ||||
|     if($("#slideshow-<%= @ad_banner.title.dehumanize %> img").length > 1){     | ||||
|       var a = []; | ||||
|       <% @ad_banner.ad_images.can_display.each do |image| %> | ||||
|         a.push("<%= image.file.url %>"); | ||||
|       <% end %> | ||||
|       $.preload(a, 2, function(){ | ||||
|         $('.orbit-cycle-slideshow').cycle(); | ||||
|       }); | ||||
|     } | ||||
|     else{ | ||||
|       $("#slideshow-<%= @ad_banner.title.dehumanize %> img").show() | ||||
|     } | ||||
|   }); | ||||
| </script> | ||||
|  | @ -1,5 +1,5 @@ | |||
| <div class="slideshow"> | ||||
|   <% @ad_banner.ad_images.can_display.shuffle.each do |image| %> | ||||
| <div id='slideshow-<%= @ad_banner.title.dehumanize %>' class="cycle-slideshow"  data-cycle-timeout="<%= @ad_banner.timeout_millisecond %>" data-cycle-random='true' style="z-index: 0"> | ||||
|   <% @ad_banner.ad_images.can_display.each do |image| %> | ||||
|     <div class="slidebanner"><%= image_tag image.file.url, :class => 'slideImg' %></div> | ||||
|   <% end %> | ||||
| </div> | ||||
|  | @ -22,4 +22,18 @@ | |||
|   var $effect = "<%= @ad_banner.ad_fx.nil? ? 'fade': @ad_banner.ad_fx %>" | ||||
|   var $timeout = "<%= @ad_banner.transition_msec %>" | ||||
|   var $info = "<%= t('mobile.location_description').html_safe %>" | ||||
|   $(function(){ | ||||
|     if($("#slideshow-<%= @ad_banner.title.dehumanize %> img").length > 1){     | ||||
|       var a = []; | ||||
|       <% @ad_banner.ad_images.can_display.each do |image| %> | ||||
|         a.push("<%= image.file.url %>"); | ||||
|       <% end %> | ||||
|       $.preload(a, 2, function(){ | ||||
|         $('.orbit-cycle-slideshow').cycle(); | ||||
|       }); | ||||
|     } | ||||
|     else{ | ||||
|       $("#slideshow-<%= @ad_banner.title.dehumanize %> img").show() | ||||
|     } | ||||
|   }); | ||||
| </script> | ||||
|  |  | |||
|  | @ -1,5 +1,6 @@ | |||
| module ParserCommon | ||||
|   include ActionView::Helpers::TagHelper | ||||
|   include ActionView::Helpers::FrontHelper | ||||
|   # include ActionView::Helpers::UrlHelper | ||||
| 
 | ||||
|   def menu_level(page, current_page, current, menu, edit = false) | ||||
|  | @ -44,47 +45,38 @@ module ParserCommon | |||
|       res = '' | ||||
|       ad_banner = AdBanner.find(banner["id"]) rescue nil | ||||
|       if ad_banner | ||||
|         res << "<script type='text/javascript'> | ||||
|                   jQuery(function( $ ){      | ||||
|                     $.preload( '#slideshow-#{ad_banner.title.dehumanize} img', { | ||||
|                       onFinish:finish, | ||||
|                       threshold: 2 //'2' is the default, how many at a time, to load. | ||||
|                     }); | ||||
|                     function finish(){ | ||||
|                       $('#slideshow-#{ad_banner.title.dehumanize}').cycle({ | ||||
|                         delay: -1000, | ||||
|                         fx: '#{ad_banner.ad_fx.nil? ? 'fade': ad_banner.ad_fx}', | ||||
|                         timeoutFn: getTimeout, | ||||
|                         pager: '.banner_nav-#{ad_banner.title.dehumanize}', | ||||
|                         pagerAnchorBuilder: function(idx, slide) { | ||||
|                           return \"<li><a href='#'></a></li>\"; | ||||
|                         } | ||||
|                       }); | ||||
|                     }; | ||||
|                   }); | ||||
|                 </script>" | ||||
|         res << "<div style='position:relative'>" | ||||
|         res << "<ul id='banner_nav' class='clear banner_nav-#{ad_banner.title.dehumanize}'></ul>" | ||||
|         res << "<div id='slideshow-#{ad_banner.title.dehumanize}' class='slideshow'>" | ||||
|         printable_ad_images = [] | ||||
|         res << "<div id='slideshow-#{ad_banner.title.dehumanize}' class='orbit-cycle-slideshow' data-cycle-timeout=#{ad_banner.timeout_millisecond} data-cycle-pager='.banner_nav_#{ad_banner.title.dehumanize}' data-cycle-pager-template='<li><a href=\"#\"></a></li>' data-cycle-pager-active-class='activeSlide' data-cycle-random='true' style='z-index: 0'>" | ||||
|         ad_banner.ad_images.can_display.each do |ad_image| | ||||
|           ad_image.weight.times do | ||||
|             printable_ad_images << ad_image | ||||
|           end | ||||
|         end | ||||
|         printable_ad_images.shuffle! | ||||
|         hide = printable_ad_images.size > 1 | ||||
|         printable_ad_images.each  do |ad_image|  #TODO Need Reflact | ||||
|           res << "<img src='#{ad_image.file}' " | ||||
|           res << "alt='#{ad_image.title || ' '}' " | ||||
|           res << "time_to_next='#{ad_banner.transition_msec}' " | ||||
|           res << "link_open='#{ad_image.link_open}' " | ||||
|           res << "link_url='#{(ad_image.out_link)}' " | ||||
|           res << "style='#{'display:none;' if hide} #{'cursor:pointer;' if !ad_image.out_link.blank?}'" | ||||
|           res << "/>"           | ||||
|           link = ad_image_link(ad_image) | ||||
|           res << "<img src=#{ad_image.file} " | ||||
|           res << "alt=#{ad_image.title} " | ||||
|           res << "link_open=#{ad_image.link_open} " | ||||
|           res << "link_url=#{link} " | ||||
|           res << "height=#{ad_banner.height} " | ||||
|           res << "width=#{ad_banner.width} " | ||||
|           res << "style='display:none; #{'cursor:pointer;' if link}'" | ||||
|           res << "/>" | ||||
|         end | ||||
|         res << "</div>"         | ||||
|         res << "</div>" | ||||
|         res << "<script>" | ||||
|         res << "$(function(){" | ||||
|         res << "if($('#slideshow-#{ad_banner.title.dehumanize} img').length > 1){" | ||||
|         res << "var a = [];" | ||||
|         ad_banner.ad_images.can_display.each do |image| | ||||
|           res << "a.push('#{image.file.url}');" | ||||
|         end | ||||
|         res << "$.preload(a, 2, function(){" | ||||
|         res << "$('.orbit-cycle-slideshow').cycle();" | ||||
|         res << "});" | ||||
|         res << "}" | ||||
|         res << "else{" | ||||
|         res << "$('#slideshow-#{ad_banner.title.dehumanize} img').show()" | ||||
|         res << "}" | ||||
|         res << "});" | ||||
|         res << "</script>" | ||||
|       end | ||||
|       fragment = Nokogiri::HTML::DocumentFragment.new(body, res) | ||||
|       banner.swap(fragment) | ||||
|  |  | |||
		Reference in New Issue