Page slide does not reload from server for ad_banner

app/assets/javascripts/admin/ad_banners.js

@@ -1 +1,21 @@
-//= require lib/arrow-on-list-edit
+//= require lib/arrow-on-list-edit
+
+$(function() {
+  $.pageslide.closeCallback(function(pageslide, item) {
+    $("tr").removeClass("active");
+    pageslide.find('.preview').cycle('destroy')
+  });
+  $.pageslide.loadComplete(function(pageslide, item) {
+    $("tr").removeClass("active");
+    item.closest('tr').addClass('active');
+    setSlideshow(pageslide.find('.preview'), item.data());
+    if(item.data('id') == 'new') {
+    	pageslide.find('form').attr('action', '/admin/ad_banners/');
+    	pageslide.find('form').attr('method', 'post');
+    }
+    else {
+     pageslide.find('form').attr('action', '/admin/ad_banners/' + item.data('id'));
+    	pageslide.find('form').attr('method', 'put');
+    }
+  });
+})

app/assets/javascripts/basic/orbit_js_1.0.1.js

@@ -473,6 +473,14 @@ if($.support.touch) {
         //     }
         // }
     };
+    $.fn.delayKeyup = function(callback, ms){
+        var timer = 0;
+        $(this).keyup(function(){
+            clearTimeout (timer);
+            timer = setTimeout(callback, ms);
+        });
+        return $(this);
+    };
 }(window.jQuery);
 
 

app/assets/javascripts/cycle2.js

@@ -0,0 +1,4 @@
+//= require lib/cycle2/jquery.cycle2.min.js
+//= require lib/cycle2/transition/jquery.cycle2.flip.min.js
+//= require lib/cycle2/transition/jquery.cycle2.scrollVert.min.js
+//= require lib/cycle2/transition/jquery.cycle2.tile.min.js

app/assets/javascripts/lib/ad_banner/banner_preview.js

@@ -1,80 +1,97 @@
-$(function() {
+function slideshow (element, bannerEffect, bannerTime, bannerSpeed) {
-    var bannerEffect,
+    element.cycle('destroy');
-        bannerTime,
+    element.children('img').removeAttr('style');
-        bannerSpeed,
+    element.cycle({
-        bannerW,
+        fx: bannerEffect,
-        bannerH;
+        timeout: bannerTime,
-
+        speed: bannerSpeed,
-    $(".ad_banner_ad_fx").change(function () {
-        bannerTime = $("#pageslide #timeout").val()*1000;
-        bannerSpeed = $("#pageslide #speed").val()*1000;
-
-        bannerTime = parseInt(bannerTime) || 300;
-        bannerSpeed = parseInt(bannerSpeed) || 300;
-        slideshow($(this).val(), bannerTime, bannerSpeed);
     });
-	slideshow = function (bannerEffect, bannerTime, bannerSpeed) {
+};
-        var $preview = $('#pageslide .preview'),
+function setSlideshow(element, data) {
-            $previewImg = $('#pageslide .preview img');
+    bannerName = data.name;
-        $preview.cycle('destroy');
+    bannerEffect = data.fx;
-        $previewImg.removeAttr('style');
+    bannerTime = data.time;
-		$preview.cycle({
+    bannerSpeed = data.speed;
-            fx: bannerEffect,
+    bannerW = data.w;
-            timeout: bannerTime,
+    bannerH = data.h;
-            speed: bannerSpeed,
+
-        });
+    $("#pageslide #bannerName").attr("value", bannerName);
-	}
+    $("#pageslide #timeout").attr("value", bannerTime);
-    $('.open-slide').on('click', function() {
+    $("#pageslide #speed").attr("value", bannerSpeed);
-        var $preview = $('#pageslide .preview'),
+    $("#pageslide #banner_width").attr("value", bannerW);
-            $data = $(this).data(),
+    $("#pageslide #banner_height").attr("value", bannerH);
-            effect = $data.fx,
+    $("#pageslide .ad_banner_ad_fx option").each(function(i) {
-            time = $data.time,
+        if($(this).attr("value") == bannerEffect) {
-            speed = $data.speed,
+            this.selected = true;
-            W = $data.w,
+            $(this).hasClass('notIE') ? $('.suckIE').show() : $('.suckIE').hide();
-            H = $data.h;
+        }
-        $("#pageslide #timeout").attr("value", time/1000);
+    });
-        $("#pageslide #speed").attr("value", speed/1000);
+    element.cycle('destroy');
-        $("#pageslide #banner_width").attr("value", W);
+    slideshow(element, bannerEffect, 2000, 1000);
-        $("#pageslide #banner_height").attr("value", H);
+}
-        $("#pageslide #ad_banner_ad_fx option").each(function(i) {
+
-            if($(this).attr("value") == effect) {
+function preview() {
-                this.selected = true;
-            }
-        });
-        slideshow(effect, time, speed)
-    })
     $('.open-modal').on('click', function() {
-        var $data = $(this).data()
+        var _data = $(this).data();
-        bannerEffect = $data.fx;
+        bannerName = _data.name;
-        bannerTime = $data.time;
+        bannerEffect = _data.fx;
-        bannerSpeed = $data.speed;
+        bannerTime = _data.time;
-        bannerW = $data.w;
+        bannerSpeed = _data.speed;
-        bannerH = $data.h;
+        bannerW = _data.w;
+        bannerH = _data.h;
         $('#preview').modal('show');
     });
+
     $('#preview').on('shown', function() {
+        $(this).attr('aria-labelledby', bannerName.toString()).find('h3').text(bannerName.toString())
         if(bannerW > 500) {
             var resize = 500/bannerW
             bannerW = Math.floor(bannerW*resize);
             bannerH = Math.floor(bannerH*resize);
+            console.log(bannerW)
         };
         if(bannerH > 300) {
             var resize = 300/bannerH
             bannerW = Math.floor(bannerW*resize);
             bannerH = Math.floor(bannerH*resize);
         }
-        $(this).find('.preview').cycle({
+        slideshow($(this).find('.preview'), bannerEffect, bannerTime, bannerSpeed);
-            fx: bannerEffect,
+        $(this).find('.preview').css({
-            timeout: bannerTime,
-            speed: bannerSpeed,
-        });
-        $(this).find('img').css({
             'width': bannerW,
             'height': bannerH
         });
+        $(this).find('.preview img').css({
+            'width': '100%',
+            'height': '100%'
+        });
     });
     $('#preview').on('hidden', function() {
+        $(this).attr('aria-labelledby', '').find('h3').text('')
         $(this).find('.preview').cycle('destroy');
         $(this).find('.preview img').removeAttr('style');
     });
+};
+
+$(function() {
+    var bannerName = null,
+        bannerEffect = null,
+        bannerTime = null,
+        bannerSpeed = null,
+        bannerW = null,
+        bannerH = null,
+        $preview = $('#pageslide .preview');
+
+    $(".ad_banner_ad_fx").change(function () {
+        var suckIE = false;
+        // bannerTime = $("#pageslide #timeout").val()*1000;
+        // bannerSpeed = $("#pageslide #speed").val()*1000;
+
+        bannerTime = parseInt(bannerTime) || 300;
+        bannerSpeed = parseInt(bannerSpeed) || 300;
+        $(this).children('option:selected').each(function(index, el) {
+            $(this).val() == 'flipHorz' || $(this).val() == 'flipVert' ? $('.suckIE').show() : $('.suckIE').hide();
+        });
+        slideshow($preview, $(this).val(), 2000, 1000);
+    });
+    preview();
 });

app/assets/javascripts/lib/cycle2/transition/jquery.cycle2.flip.min.js

@@ -0,0 +1,2 @@
+/* Plugin for Cycle2; Copyright (c) 2012 M. Alsup; v20130909 */
+(function(e){"use strict";function t(t){return{preInit:function(e){e.slides.css(n)},transition:function(i,n,s,o,r){var l=i,c=e(n),a=e(s),d=l.speed/2;t.call(a,-90),a.css({display:"block","background-position":"-90px",opacity:1}),c.css("background-position","0px"),c.animate({backgroundPosition:90},{step:t,duration:d,easing:l.easeOut||l.easing,complete:function(){i.API.updateView(!1,!0),a.animate({backgroundPosition:0},{step:t,duration:d,easing:l.easeIn||l.easing,complete:r})}})}}}function i(t){return function(i){var n=e(this);n.css({"-webkit-transform":"rotate"+t+"("+i+"deg)","-moz-transform":"rotate"+t+"("+i+"deg)","-ms-transform":"rotate"+t+"("+i+"deg)","-o-transform":"rotate"+t+"("+i+"deg)",transform:"rotate"+t+"("+i+"deg)"})}}var n,s=document.createElement("div").style,o=e.fn.cycle.transitions,r=void 0!==s.transform||void 0!==s.MozTransform||void 0!==s.webkitTransform||void 0!==s.oTransform||void 0!==s.msTransform;r&&void 0!==s.msTransform&&(s.msTransform="rotateY(0deg)",s.msTransform||(r=!1)),r?(o.flipHorz=t(i("Y")),o.flipVert=t(i("X")),n={"-webkit-backface-visibility":"hidden","-moz-backface-visibility":"hidden","-o-backface-visibility":"hidden","backface-visibility":"hidden"}):(o.flipHorz=o.scrollHorz,o.flipVert=o.scrollVert||o.scrollHorz)})(jQuery);

app/assets/javascripts/lib/cycle2/transition/jquery.cycle2.ie-fade.min.js

@@ -0,0 +1,2 @@
+/*! Plugin for Cycle2; Copyright (c) 2012 M. Alsup; ver: 20121120 */
+(function(a){function b(a,b,c){if(a&&c.style.filter){b._filter=c.style.filter;try{c.style.removeAttribute("filter")}catch(d){}}else!a&&b._filter&&(c.style.filter=b._filter)}"use strict",a.extend(a.fn.cycle.transitions,{fade:{before:function(c,d,e,f){var g=c.API.getSlideOpts(c.nextSlide).slideCss||{};c.API.stackSlides(d,e,f),c.cssBefore=a.extend(g,{opacity:0,display:"block"}),c.animIn={opacity:1},c.animOut={opacity:0},b(!0,c,e)},after:function(a,c,d){b(!1,a,d)}},fadeout:{before:function(c,d,e,f){var g=c.API.getSlideOpts(c.nextSlide).slideCss||{};c.API.stackSlides(d,e,f),c.cssBefore=a.extend(g,{opacity:1,display:"block"}),c.animOut={opacity:0},b(!0,c,e)},after:function(a,c,d){b(!1,a,d)}}})})(jQuery);

app/assets/javascripts/lib/cycle2/transition/jquery.cycle2.scrollVert.min.js

@@ -0,0 +1,2 @@
+/*! Plugin for Cycle2; Copyright (c) 2012 M. Alsup; ver: 20121120 */
+(function(a){"use strict",a.fn.cycle.transitions.scrollVert={before:function(a,b,c,d){a.API.stackSlides(a,b,c,d);var e=a.container.css("overflow","hidden").height();a.cssBefore={top:d?-e:e,left:0,opacity:1,display:"block"},a.animIn={top:0},a.animOut={top:d?e:-e}}}})(jQuery);

app/assets/javascripts/lib/cycle2/transition/jquery.cycle2.tile.min.js

@@ -0,0 +1,2 @@
+/* Plugin for Cycle2; Copyright (c) 2012 M. Alsup; v20130721 */
+(function(e){"use strict";e.fn.cycle.transitions.tileSlide=e.fn.cycle.transitions.tileBlind={before:function(t,i,n,s){t.API.stackSlides(i,n,s),e(i).show(),t.container.css("overflow","hidden"),t.tileDelay=t.tileDelay||"tileSlide"==t.fx?100:125,t.tileCount=t.tileCount||7,t.tileVertical=t.tileVertical!==!1,t.container.data("cycleTileInitialized")||(t.container.on("cycle-destroyed",e.proxy(this.onDestroy,t.API)),t.container.data("cycleTileInitialized",!0))},transition:function(t,i,n,s,o){function r(e){p.eq(e).animate(I,{duration:t.speed,easing:t.easing,complete:function(){(s?v-1===e:0===e)&&t._tileAniCallback()}}),setTimeout(function(){(s?v-1!==e:0!==e)&&r(s?e+1:e-1)},t.tileDelay)}t.slides.not(i).not(n).hide();var c,l,a,d,u,p=e(),f=e(i),y=e(n),v=t.tileCount,h=t.tileVertical,g=t.container.height(),m=t.container.width();h?(l=Math.floor(m/v),d=m-l*(v-1),a=u=g):(l=d=m,a=Math.floor(g/v),u=g-a*(v-1)),t.container.find(".cycle-tiles-container").remove();var I,A={left:0,top:0,overflow:"hidden",position:"absolute",margin:0,padding:0};I=h?"tileSlide"==t.fx?{top:g}:{width:0}:"tileSlide"==t.fx?{left:m}:{height:0};var S=e('<div class="cycle-tiles-container"></div>');S.css({zIndex:f.css("z-index"),overflow:"visible",position:"absolute",top:0,left:0,direction:"ltr"}),S.insertBefore(n);for(var x=0;v>x;x++)c=e("<div></div>").css(A).css({width:v-1===x?d:l,height:v-1===x?u:a,marginLeft:h?x*l:0,marginTop:h?0:x*a}).append(f.clone().css({position:"relative",maxWidth:"none",width:f.width(),margin:0,padding:0,marginLeft:h?-(x*l):0,marginTop:h?0:-(x*a)})),p=p.add(c);S.append(p),f.hide(),y.show().css("opacity",1),r(s?0:v-1),t._tileAniCallback=function(){y.show(),f.hide(),S.remove(),o()}},stopTransition:function(e){e.container.find("*").stop(!0,!0),e._tileAniCallback&&e._tileAniCallback()},onDestroy:function(){var e=this.opts();e.container.find(".cycle-tiles-container").remove()}}})(jQuery);

app/assets/javascripts/lib/pageslide.js

@@ -1,10 +1,15 @@
 !function ($) {
   // Convenience vars for accessing elements
-  var _html = '<div id="pageslide"><div class="page-title clearfix"><a class="pull-right" href="javascript:$.pageslide.close()"><i class="icons-arrow-left-2"/></a><span/></div><div class="view-page"><div class="nano"><div class="content"/></div></div></div>',
+  var $pageslide = $('#pageslide'),
       $body = $('#main-wrap'),
       $bottomNav = $('.bottomnav'),
-      $pageslide = $(_html).css('display', 'none').appendTo( $body ),
       $element;
+  if($pageslide.length == 0) {
+    var _html = '<div id="pageslide"><div class="page-title clearfix"><a class="pull-right" href="javascript:$.pageslide.close()"><i class="icons-arrow-left-2"/></a><span/></div><div class="view-page"><div class="nano"><div class="content"/></div></div></div>';
+    $pageslide = $(_html).css('display', 'none').appendTo( $body );
+  } else {
+    $pageslide.css('display', 'none')
+  }
 
   var _sliding = false,   // Mutex to assist closing only once
       _lastCaller;        // Used to keep track of last element to trigger pageslide
@@ -14,14 +19,38 @@
   //     $pageslide.find('.nano').height($('body').height() - $('#orbit-bar').height() - $pageslide.find('.page-title').outerHeight(true));
   //   }
   // });
-
+  function _checkTitle(settings) {
+    if(settings.pageTitle) {
+      $pageslide.find('.page-title').show().children('span').text(settings.pageTitle);
+      $pageslide.find('.view-page').css('top', 48);
+    } else {
+      $pageslide.find('.page-title').hide();
+      $pageslide.find('.view-page').css('top', 0);
+    }
+  }
   function _load(settings) {
     // Are we loading an element from the page or a URL?
-    if ( settings.href.indexOf("#") === 0 ) {                
+    if ( settings.href.indexOf("#") === 0 ) {
-      // Load a page element                
+      // Load a page element
-      $(settings.href).clone(true).appendTo($pageslide.find('.content')).show();
+      var _contentHtml = $(settings.href).html();
-      if(settings.loadComplete)settings.loadComplete.call(this, $pageslide, $element);
+      var dtd = $.Deferred();
-      $pageslide.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+      function appendHtml(dtd) {
+        $pageslide.find('.content').html(_contentHtml);
+        if($pageslide.find('.content').find('*').length !== 0) {
+          dtd.resolve();
+        } else {
+          dtd.reject();
+        }
+        return dtd;
+      }
+      $.when(appendHtml(dtd))
+      .done(function() {
+        setTimeout(function() {
+          $pageslide.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+        }, 1);
+        if(settings.loadComplete)settings.loadComplete.call(this, $pageslide, $element);
+      })
+      .fail(function() {});
     } else {
       // Load a URL. Into an iframe?
       if(settings.iframe) {
@@ -50,14 +79,7 @@
       }
       $pageslide.data( 'localEl', false );
     }
-
+    _checkTitle(settings);
-    if(settings.pageTitle) {
-      $pageslide.find('.page-title').show().children('span').text(settings.pageTitle);
-      $pageslide.find('.view-page').css('top', 48);
-    } else {
-      $pageslide.find('.page-title').hide();
-      $pageslide.find('.view-page').css('top', 0);
-    }
   }
 
 
@@ -172,15 +194,16 @@
     if(settings.loadComplete) {
       $.fn.pageslide.defaults.loadComplete = convertToFunction(settings.loadComplete);
     };
-    
     // Are we trying to open in different direction?
     if(($pageslide.is(':visible') && $pageslide.data('W') != settings.W) || ($pageslide.is(':visible') && $pageslide.data('direction') != settings.direction)) {
       $.pageslide.close(function(){
         $pageslide.css(pageCss);
+        _checkTitle(settings)
         _load(settings);
         _start(settings);
       });
-    } else {                
+    } else {
+      _checkTitle(settings)
       _load(settings);
       if($pageslide.is(':hidden')) {
         $pageslide.css(pageCss);
@@ -199,8 +222,7 @@
         speed = $pageslide.data('speed'),
         bodyAnimateIn = {},
         bottomnavAnimateIn = {},
-        slideAnimateIn = {}
+        slideAnimateIn = {};
-            
     // If the slide isn't open, just ignore the call
     if( $pageslide.is(':hidden') || _sliding ) return;          
     _sliding = true;
@@ -220,22 +242,39 @@
     $pageslide.animate(slideAnimateIn, speed);
     $bottomNav.animate(bottomnavAnimateIn, speed);
     $body.animate(bodyAnimateIn, speed, function() {
-      $pageslide.attr('style', '')
+      if($pageslide.data('href') == '#') {
-                .hide()
+        $pageslide.attr('style', '')
-                .find('.content')
+                  .hide()
-                .attr('style', '')
+                  .find('.content')
-                .empty()
+                  .attr('style', '')
-                .end()
+                  .end()
-                .find('.view-page')
+                  .find('.view-page')
-                .attr('style', '')
+                  .attr('style', '')
-                .end()
+                  .end()
-                .find('.pane')
+                  .find('.pane')
-                .remove()
+                  .remove()
-                .end()
+                  .end()
-                .find('.page-title')
+                  .find('.page-title')
-                .attr('style', '')
+                  .attr('style', '')
-                .children('span')
+                  .children('span');
-                .empty();
+      } else {
+        $pageslide.attr('style', '')
+                  .hide()
+                  .find('.content')
+                  .attr('style', '')
+                  .empty()
+                  .end()
+                  .find('.view-page')
+                  .attr('style', '')
+                  .end()
+                  .find('.pane')
+                  .remove()
+                  .end()
+                  .find('.page-title')
+                  .attr('style', '')
+                  .children('span')
+                  .empty();
+      }
       _sliding = false;
       if($pageslide.find('.error').length) $pageslide.find('.error').remove();
       if(typeof callback != 'undefined') callback();

app/assets/javascripts/page_layout.js

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

app/assets/stylesheets/lib/pageslide.css

@@ -113,3 +113,6 @@
 #pageslide .error p {
   font-size: 1.3em;
 }
+#pageslide .suckIE {
+  color: #EE4545;
+}

app/controllers/admin/ad_banners_controller.rb

@@ -36,7 +36,7 @@ class Admin::AdBannersController < OrbitBackendController
   def update
     @ad_banner = AdBanner.find(params[:id])    
     if @ad_banner.update_attributes(params[:ad_banner])
-      redirect_to admin_ad_banners_url
+      redirect_to admin_ad_banners_url, :status => 303
     else
       render :edit
     end

app/helpers/orbit_backend_helper.rb

@@ -274,7 +274,7 @@ module OrbitBackendHelper
     link = (is_manager? || is_sub_manager? rescue nil) && args.has_key?(:link) ? true : false
     if paginate || link
       @index_footer = content_tag :div, class: "bottomnav clearfix" do
-        concat content_tag :div, link_to(content_tag(:i, nil, :class => 'icon-plus') + ' ' + t(:add), send(args[:link]), :class => (args[:link_class] || 'btn btn-primary'), data: args[:link_data]), class: "action pull-right" if link
+        concat content_tag :div, link_to(content_tag(:i, nil, :class => 'icon-plus') + ' ' + t(:add), args[:link].blank? ? '#' : send(args[:link]), :class => (args[:link_class] || 'btn btn-primary'), data: args[:link_data]), class: "action pull-right" if link
         concat content_tag :div, paginate(@objects, :params => {:direction => params[:direction], :sort => params[:sort], :filter => @filter, :new_filter => nil, :sort_options => params[:sort_options]}), class: "pagination pagination-centered" if paginate
       end
     end
@@ -292,7 +292,7 @@ module OrbitBackendHelper
       end
     when 'edit'
       if authorization && approvable
-        content_tag :li, link_to(t(quick[:translation] || :edit), eval("#{quick[:link]}('#{object.id}')"), class: quick[:class], data: quick[:data])
+        content_tag :li, link_to(t(quick[:translation] || :edit), quick[:link].nil? ? '#' : eval("#{quick[:link]}('#{object.id}')"), class: quick[:class], data: eval("#{quick[:data]}"))
       end
     when 'delete'
       if show_delete_link(object)

app/models/ad_banner.rb

@@ -18,13 +18,13 @@ class AdBanner
   validates :title, :length => { :minimum => 2 }
   validates :height, :speed, :timeout, :width, :presence => true
   
-  FX_TYPES = ["blindX","blindY","blindZ","cover","curtainX","curtainY","fade","fadeZoom","growX","growY","scrollUp","scrollDown","scrollLeft","scrollRight","scrollHorz","scrollVert","shuffle","slideX","slideY","toss","turnUp","turnDown","turnLeft","turnRight","uncover","wipe","zoom"]
+  FX_TYPES = %w(fade fadeout flipHorz flipVert scrollHorz scrollVert tileSlide tileBlind)
 
   def size
     "#{self.width} x #{self.height}"
   end
 
-  def timeout_in_min
+  def timeout_millisecond
     self.timeout*1000 rescue 0
   end
   

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

@@ -3,7 +3,7 @@
     <%= render :partial => "form", :locals => { :f => f } %>
     <div class="form-actions">
       <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t(:cancel) %></a>
-      <%= f.submit t(:update_), class: 'btn btn-primary btn-small' %>
+      <%= f.submit t(:submit), class: 'btn btn-primary btn-small' %>
     </div>
   </fieldset>
 <% end %>

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

@@ -2,44 +2,27 @@
 <%= f.error_messages %>
 
 <%= f.label :title, t('ad_banner.banner_name') %>
-<%= f.text_field :title, class: 'input-large', placeholder: t('ad_banner.banner_name') %>
+<%= f.text_field :title, class: 'input-large', placeholder: t('ad_banner.banner_name'), id: 'bannerName' %>
 <span class="help-block"><%= t('ad_banner.name_only_english') %></span>
 
 <%= f.label :timeout, t('ad_banner.transition_interval') %>
-<%= f.number_field :timeout, in: 0..60, step: 1, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" %>
+<%= f.number_field :timeout, in: 0..60, step: 1, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;", id: 'timeout' %>
 <span class="help-block"><%= t('ad_banner.number_seconds') %></span>
 
 <%= f.label :speed, t('ad_banner.transition_speed') %>
-<%= f.number_field :speed, in: 0..1000, step: 100, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" %>
+<%= f.number_field :speed, in: 0..1000, step: 100, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;", id: 'speed' %>
 <span class="help-block"><%= t('ad_banner.number_milliseconds') %></span>
 
 <%= f.label :size, t('ad_banner.size') %>
 <span class="banner_set">W：</span>
-<%= f.number_field :width, in: 10..1000, step: 10, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" %>
+<%= f.number_field :width, in: 10..1000, step: 10, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;", id: 'banner_width' %>
 <span class="banner_set">H：</span>
-<%= f.number_field :height, in: 10..1000, step: 10, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" %>
+<%= f.number_field :height, in: 10..1000, step: 10, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;", id: 'banner_height' %>
-<span class="help-block"><%= t('ad_banner.number_milliseconds') %></span>
 
 <%= f.label :ad_fx, t('ad_banner.effect') %>
 <%= f.select :ad_fx, AdBanner::FX_TYPES, {}, {class: 'ad_banner_ad_fx'} %>
+<p class="suckIE hide"><i class="icons-warning"></i> <%= t('ad_banner.no_ie_10_effect_support') %></p>
 <div class="preview">
-  <%= image_tag "slideshow_preview_A.png" %>
+  <%= image_tag "slideshow_preview_A.png", width: 200, height: 80 %>
-  <%= image_tag "slideshow_preview_B.png" %>
+  <%= image_tag "slideshow_preview_B.png", width: 200, height: 80 %>
 </div>
-<span class="help-block"><%= t('ad_banner.effect') %></span>
-
-
-
-
-<script type="text/javascript">
-  $(".ad_banner_ad_fx").change(function () {
-    // bannerTime = $("#pageslide #timeout").val()*1000;
-    // bannerSpeed = $("#pageslide #speed").val()*1000;
-    bannerTime = "<%= @ad_banner.timeout_in_min %>"
-		bannerSpeed = "<%= @ad_banner.speed %>"
-
-    bannerTime = parseInt(bannerTime) || 300;
-    bannerSpeed = parseInt(bannerSpeed) || 300;
-    slideshow($(this).val(), bannerTime, bannerSpeed);
-  });
-</script>

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

@@ -1,9 +1,17 @@
 <% set_default_index do 
   objects @ad_banners
   quick_edit_link type: 'edit',
-                  link: 'edit_admin_ad_banner_path',
                   class: 'open-slide',
-                  data: {title: t('ad_banner.edit_banner')}
+                  data: "{"
+                        .concat("title: t('ad_banner.edit_banner')")
+                        .concat(", w: object.width")
+                        .concat(", h: object.height")
+                        .concat(", fx: object.ad_fx")
+                        .concat(", id: object.id.to_s")
+                        .concat(", name: object.title")
+                        .concat(", time: object.timeout")
+                        .concat(", speed: object.speed")
+                        .concat("}")
   quick_edit_link type: 'detail'
   quick_edit_link type: 'delete',
                   link: 'admin_ad_banner_path'
@@ -32,18 +40,18 @@
         sort: 'size'
   field type: 'standalone',
         translation: 'preview',
-        display_option: "link_to(t(:preview), '#', data: {w: object.width, h: object.height, fx: object.ad_fx, time: object.timeout_in_min, speed: object.speed}, class: 'btn btn-success open-modal')",
+        display_option: "link_to(t(:preview), '#', data: {w: object.width, h: object.height, fx: object.ad_fx, time: object.timeout_millisecond, speed: object.speed, name: object.title}, class: 'btn btn-success open-modal')",
         need_value: true,
         hide: 'phone'
-  footer 	link: 'new_admin_ad_banner_path',
+  footer 	link: '',
   				link_class: 'btn btn-primary open-slide',
-  				link_data: {title: t('ad_banner.new_banner')}	
+  				link_data: {title: t('ad_banner.new_banner'), id: 'new', fx: 'fade'}	
 end %>
 
 <%= render 'admin/default_index/index' %>
 
 <% content_for :page_specific_javascript do %>
-  <%= javascript_include_tag "lib/jquery.cycle.all.js" %>
+  <%= javascript_include_tag "cycle2" %>
   <%= javascript_include_tag "lib/ad_banner/banner_preview" %>
 <% end %>
 
@@ -54,10 +62,10 @@ end %>
     </div>
     <div class="modal-body">
       <div class="preview">
-          <%= image_tag "slideshow_preview_A.png" %>
+          <%= image_tag "slideshow_preview_A.png", class: 'hide' %>
-          <%= image_tag "slideshow_preview_B.png" %>
+          <%= image_tag "slideshow_preview_B.png", class: 'hide' %>
       </div>
     </div>
     <div class="modal-footer">
     </div>
-</div>
+</div>

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

@@ -3,7 +3,7 @@
     <%= render :partial => "form", :locals => { :f => f } %>
     <div class="form-actions">
       <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(:submit), class: 'btn btn-primary btn-small' %>
     </div>
   </fieldset>
 <% end %>

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

@@ -1,3 +1,27 @@
 <div id="banner_index">
   <%= render 'index' %>
+</div>
+
+<div id="pageslide">
+  <div class="page-title clearfix">
+    <a class="pull-right" href="javascript:$.pageslide.close()">
+      <i class="icons-arrow-left-2"></i>
+    </a>
+    <span></span>
+  </div>
+  <div class="view-page">
+    <div class="nano">
+      <div class="content">
+        <%= form_for :ad_banner, url: nil, remote: true do |f| %>
+          <fieldset>
+            <%= render :partial => "form", :locals => { :f => f } %>
+            <div class="form-actions">
+              <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t(:cancel) %></a>
+              <%= f.submit t(:submit), class: 'btn btn-primary btn-small' %>
+            </div>
+          </fieldset>
+        <% end %>
+      </div>
+    </div>
+  </div>
 </div>

app/views/admin/ad_banners/index.js.erb

@@ -1,3 +1,4 @@
 $("#banner_index").html("<%= j render 'index' %>")
 $.pageslide.close();
-openSlide();
+openSlide();
+preview();

app/views/front/show_banner.html.erb

@@ -1,5 +1,5 @@
 <div style='position:relative'>
-  <div id='slideshow-<%= @ad_banner.title.dehumanize %>' class="cycle-slideshow"  data-cycle-timeout="<%= @ad_banner.timeout_in_min %>" 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="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">
     <% @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?) %>

app/views/layouts/back_end.html.erb

@@ -32,8 +32,8 @@
         <%= yield :right_nav %>
       </div>
     	<%= yield %>
-			<%= javascript_include_tag "lib/pageslide.js" %>
     </div>
   </section>
+  <%= javascript_include_tag "lib/pageslide.js" %>
 </body>
 </html>

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

@@ -12,6 +12,7 @@ en:
     name_only_english: Banner Name can only in English
     new_banner: New Banner
     new_window: New window
+    no_ie_10_effect_support: IE10 earlier do not support this effect
     number_milliseconds: Please enter the number of milliseconds
     number_seconds: Please enter the number of seconds
     size: Size