Fix Ad_Banner frontend for IE8

Fix backend bug in editing banner
Translation Added

app/assets/javascripts/kernel.js

@@ -1,29 +1,57 @@
+var banners = [];
+var banner_index = 0;
+
 $(document).ready(function() {
-	
 	$.each($(".dymanic_load"),function(){
-		if($(this).attr("path")==''){$(this).html("App setting Failed");} 
+		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"));
+			}
+		}
+	});
 
-		if($(this).attr("path")!=''){
-				 ajax_load_proc($(this),$(this).attr("path"));
-				} 
-			}
-			);
 	$("#main_content").addClass("module");
 });
 
-function ajax_load_proc(wapper,url){
+function ajax_load_proc(wapper,url,isBanner){
 	$.get(encodeURI(url), {}, function(respText,textSta,XML){ 
 		if (textSta == 'success') {
+			if(isBanner=="true"){
 				wapper.html(respText);
+				var banner = banners[banner_index];
+				$(banner.banner_name+" > img").each(function(){
+					$(this).load(function(){ banner.image_loaded++; });
+				});
+				BannerCycle(banner_index);
+				banner_index++;
+			}else{
+				wapper.html(respText);
+			}
 		};
 		if(textSta == 'error')
 			wapper.html("Loading Failed<br/>  <a href='"+$(this).attr('path')+"'>Go See</a>");
 	});
 }
 
-// Ad Banner FX code [start]
+function BannerCycle(banner_index){
-function getTimeout() { 
+	var banner = banners[banner_index];
-    return $(this).attr('time_to_next'); 
+	// Wait untill all images are loaded
+	if (banner.image_loaded==$(banner.banner_name+" img").length){
+    	$(banner.banner_name).cycle({
+			delay: -1000,
+			fx: banner.banner_fx,
+			timeout: banner.time_to_next,
+			pager: banner.banner_pager,
+			pagerAnchorBuilder: function(idx, slide) { return "<li><a href='#'></a></li>"; }
+		});
+	}else{
+		setTimeout("BannerCycle("+banner_index+")",500);
+	}
 }
 
 $(document).ready(function() { 

app/controllers/admin/ad_banners_controller.rb

@@ -40,6 +40,7 @@ class Admin::AdBannersController < OrbitBackendController
   
   def edit
     @ad_banner = AdBanner.find(params[:id])
+    render layout: false
   end
   
   def update

app/views/admin/ad_banners/_edit.html.erb

@@ -1,25 +1,31 @@
-<div class="content">
+<%= form_for @ad_banner, url: admin_ad_banner_path(@ad_banner), remote: true do |f| %>
-  <%= form_for(:ad_banner, :url => admin_ad_banner_path(:ad_banner), :remote => true) do |f| %>
   <fieldset>
-        <legend>Ad Banner</legend>
+    <legend><%= t("ad_banner.banner") %></legend>
-        <label>Banner Name</label>
+    <label><%= t("ad_banner.banner_name") %></label>
     <%= f.text_field :title, :class=>"input-large", :placeholder=>"Banner Name" %>
-        <span class="help-block">Banner Name only english</span>
+    <span class="help-block"><%= t("ad_banner.banner_name_note") %></span>
-        <label for="timeout">Ste</label>
+    <label for="timeout"><%= t("ad_banner.ste") %></label>
     <%= f.text_field :transition_sec, :class => 'input-large', :placeholder => 'Time' %>
-        <span class="help-block">Please enter the number of seconds</span>
+    <span class="help-block"><%= t("ad_banner.ste_note") %></span>
-        <label>Best Size</label>
+    <label><%= t("ad_banner.best_size") %></label>
     <%= f.text_field :best_size, :class=>"input-large", :placeholder=>"Banner Size" %>
-        <span class="help-block">Best Size EX:120x30 </span>
+    <span class="help-block"><%= t("ad_banner.best_size") %> EX:120x30 </span>
-        <label>Effect</label>
+    <label><%= t("ad_banner.effect") %></label>
     <%= f.select :ad_fx ,AdBanner::FX_TYPES %>
     <div class="preview">
       <%= image_tag "slideshow_preview_A.png", :width=>220 %>
       <%= image_tag "slideshow_preview_B.png", :width=>220 %>
     </div>
-        <span class="help-block">Effect</span>
+    <span class="help-block"><%= t("ad_banner.effect") %></span>
     <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t(:cancel) %></a>
-<%= f.submit t(:create_), class: 'btn btn-primary btn-small' %>
+    <%= f.submit t(:update_), class: 'btn btn-primary btn-small' %>
   </fieldset>
 <% end %>
-</div>
+<script type="text/javascript">
+  $('select').on('change', function() {
+    $(".preview").cycle({
+      delay: -3000,
+      fx: $(this).val()
+    });
+  });
+</script>

app/views/admin/ad_banners/_index.html.erb

@@ -1,3 +1,5 @@
+<%= javascript_include_tag "lib/jquery.cycle.all.latest.js"%>
+
 <table class="table main-list">
   <thead>
     <tr>
@@ -13,7 +15,7 @@
         <div class="quick-edit">
           <ul class="nav nav-pills">
             <% if is_admin?%>
-              <li><%= link_to t(:edit), edit_admin_ad_banner_path(ad_banner)%></li>
+              <li><%= link_to t(:edit), edit_admin_ad_banner_path(ad_banner), :class => "open-slide" %></li>
               <li><%= link_to 'Destroy', admin_ad_banner_path(ad_banner), method: :delete , :confirm => t(:sure?) %></li>  
 
           <% end %>
@@ -30,12 +32,8 @@
 <!-- footer -->
 <div class="bottomnav clearfix">
   <div class="action pull-right">
-    <%= link_to content_tag(:i, nil, class: "icons-plus") + " " + t(:add_new), "#add-banner", :class => "btn btn-primary open-slide"%>
+    <%= link_to content_tag(:i, nil, class: "icons-plus") + " " + t(:add_new), new_admin_ad_banner_path, :class => "btn btn-primary open-slide"%>
   </div>
 </div>
 
-<div id="add-banner" class="nano" style="display:none">
-  <%= render 'new' %>
-</div>
-
 <% end %>

app/views/admin/ad_banners/_new.html.erb

@@ -1,25 +1,31 @@
-<div class="content">
 <%= form_for(:ad_banner, :url => admin_ad_banners_path) do |f| %>
     <fieldset>
-        <legend>Ad Banner</legend>
+      <legend><%= t("ad_banner.banner") %></legend>
-        <label>Banner Name</label>
+      <label><%= t("ad_banner.banner_name") %></label>
        <%= f.text_field :title, :class=>"input-large", :placeholder=>"Banner Name" %>
-        <span class="help-block">Banner Name only english</span>
+      <span class="help-block"><%= t("ad_banner.banner_name_note") %></span>
-        <label for="timeout">Ste</label>
+      <label for="timeout"><%= t("ad_banner.ste") %></label>
        <%= f.text_field :transition_sec, :class => 'input-large', :placeholder => 'Time' %>
-        <span class="help-block">Please enter the number of seconds</span>
+      <span class="help-block"><%= t("ad_banner.ste_note") %></span>
-        <label>Best Size</label>
+      <label><%= t("ad_banner.best_size") %></label>
        <%= f.text_field :best_size, :class=>"input-large", :placeholder=>"Banner Size" %>
-        <span class="help-block">Best Size EX:120x30 </span>
+      <span class="help-block"><%= t("ad_banner.best_size") %> EX:120x30 </span>
-        <label>Effect</label>
+      <label><%= t("ad_banner.effect") %></label>
        <%= f.select :ad_fx ,AdBanner::FX_TYPES %>
         <div class="preview">
           <%= image_tag "slideshow_preview_A.png", :width=>220 %>
           <%= image_tag "slideshow_preview_B.png", :width=>220 %>
         </div>
-        <span class="help-block">Effect</span>
+      <span class="help-block"><%= t("ad_banner.effect") %></span>
         <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t(:cancel) %></a>
         <%= f.submit t(:create_), class: 'btn btn-primary btn-small' %>
     </fieldset>
 <% end %>
-</div>
+<script type="text/javascript">
+  $('select').on('change', function() {
+    $(".preview").cycle({
+      delay: -3000,
+      fx: $(this).val()
+    });
+  });
+</script>

app/views/front/show_banner.html.erb

@@ -1,4 +1,3 @@
-<%= javascript_include_tag "lib/jquery.cycle.all.latest.js"%>
 <div style='position:relative'>
   <ul id='banner_nav' class='clear banner_nav-<%= @ad_banner.title.dehumanize %>'></ul>
   <div id='slideshow-<%= @ad_banner.title.dehumanize %>' class='slideshow'>
@@ -10,18 +9,12 @@
   </div>
 </div>
 <script type='text/javascript'>
-$(document).ready(function(){
+  var banner = {"banner_name":"#slideshow-<%= @ad_banner.title.dehumanize %>",
-  jQuery(function( $ ){     
+                "banner_fx":"<%= @ad_banner.ad_fx.nil? ? 'fade': @ad_banner.ad_fx %>",
-
+                "banner_pager":".banner_nav-<%= @ad_banner.title.dehumanize %>",
-      $('#slideshow-<%= @ad_banner.title.dehumanize %>').cycle({
+                "image_count":"<%= @ad_banner.ad_images.length %>",
-        delay: -1000,
+                "image_loaded":0,
-        fx: "<%= @ad_banner.ad_fx.nil? ? 'fade': @ad_banner.ad_fx %>",
+                "time_to_next":<%= @ad_banner.transition_msec %>,
-        timeoutFn: getTimeout,
+              };
-        pager: '.banner_nav-<%= @ad_banner.title.dehumanize %>',
+  banners.push(banner);
-        pagerAnchorBuilder: function(idx, slide) {
-          return "<li><a href='#'></a></li>";
-        }
-      });
-  });
-});
 </script>

vendor/built_in_modules/ad_banner/config/locales/en.yml

@@ -3,6 +3,12 @@ en:
   ad_banner:
     ad_banner: Ad Banner
     banner: Banner
+    banner_name: Banner Name
+    banner_name_note: Banner Name only english
+    ste: Transition Interval
+    ste_note: Please enter the number of seconds
+    best_size: Best Size
+    effect: Effect
     all: All
     categories: Categories
     add: Add

vendor/built_in_modules/ad_banner/config/locales/zh_tw.yml

@@ -3,6 +3,12 @@ zh_tw:
   ad_banner:
     ad_banner: 廣告輪播
     banner: 橫幅
+    banner_name: 橫幅名稱
+    banner_name_note: 橫幅名稱只能為英文
+    ste: 轉換間隔時間
+    ste_note: 請輸入秒數
+    best_size: 最佳尺寸
+    effect: 效果
     all: 全部
     categories: 類別
     add: 新增