Finalize ad_banner changes: front-end, back-end, mobile

app/assets/Archive/javascripts/mobile.js

@@ -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

app/assets/javascripts/kernel.js

@@ -6,12 +6,7 @@ $(document).ready(function() {
 		if($(this).attr("path")==''){
 			$(this).html("App setting Failed");
 		}else{
-			// Check if this App is AD_Banner
+			ajax_load_proc($(this),$(this).attr("path")); 	
-			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"));
-			}
 		}
 	});
 
@@ -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);
-				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);
-			}
 		};
 		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')!='')
 		{

app/assets/javascripts/lib/jquery.preload-min.js

@@ -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);

app/assets/javascripts/lib/jquery.preload.min.js

@@ -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);

app/assets/javascripts/page_layout.js

@@ -3,5 +3,5 @@
 
 //= require basic/bootstrap
 //= require kernel
-//= require lib/jquery.preload-min.js
+//= require lib/jquery.preload.min.js
 //= require cycle2

app/helpers/orbit_backend_helper.rb

@@ -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

app/uploaders/image_uploader.rb

@@ -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

app/views/admin/ad_images/index.html.erb

@@ -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',

app/views/front/show_banner.html.erb

@@ -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>

app/views/mobile/index.mobile.erb

@@ -1,5 +1,5 @@
-<div class="slideshow">
+<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.shuffle.each do |image| %>
+  <% @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>

lib/parsers/parser_common.rb

@@ -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'>"
+        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'>"
-        printable_ad_images = []
         ad_banner.ad_images.can_display.each do |ad_image|
-          ad_image.weight.times do
+          link = ad_image_link(ad_image)
-            printable_ad_images << ad_image
+          res << "<img src=#{ad_image.file} "
-          end
+          res << "alt=#{ad_image.title} "
-        end
+          res << "link_open=#{ad_image.link_open} "
-        printable_ad_images.shuffle!
+          res << "link_url=#{link} "
-        hide = printable_ad_images.size > 1
+          res << "height=#{ad_banner.height} "
-        printable_ad_images.each  do |ad_image|  #TODO Need Reflact
+          res << "width=#{ad_banner.width} "
-          res << "<img src='#{ad_image.file}' "
+          res << "style='display:none; #{'cursor:pointer;' if link}'"
-          res << "alt='#{ad_image.title || ' '}' "
+          res << "/>"
-          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 << "/>"          
         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)