Page slide does not reload from server for ad_banner

This commit is contained in:
chris 2013-10-18 18:31:18 +08:00
parent 92d2af13f2
commit fea86ba3a9
26 changed files with 254 additions and 3007 deletions

View File

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

View File

@ -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); }(window.jQuery);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1,10 +1,15 @@
!function ($) { !function ($) {
// Convenience vars for accessing elements // 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'), $body = $('#main-wrap'),
$bottomNav = $('.bottomnav'), $bottomNav = $('.bottomnav'),
$pageslide = $(_html).css('display', 'none').appendTo( $body ),
$element; $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 var _sliding = false, // Mutex to assist closing only once
_lastCaller; // Used to keep track of last element to trigger pageslide _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)); // $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) { function _load(settings) {
// Are we loading an element from the page or a URL? // 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();
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 }); $pageslide.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
}, 1);
if(settings.loadComplete)settings.loadComplete.call(this, $pageslide, $element);
})
.fail(function() {});
} else { } else {
// Load a URL. Into an iframe? // Load a URL. Into an iframe?
if(settings.iframe) { if(settings.iframe) {
@ -50,14 +79,7 @@
} }
$pageslide.data( 'localEl', false ); $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) { if(settings.loadComplete) {
$.fn.pageslide.defaults.loadComplete = convertToFunction(settings.loadComplete); $.fn.pageslide.defaults.loadComplete = convertToFunction(settings.loadComplete);
}; };
// Are we trying to open in different direction? // 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)) { if(($pageslide.is(':visible') && $pageslide.data('W') != settings.W) || ($pageslide.is(':visible') && $pageslide.data('direction') != settings.direction)) {
$.pageslide.close(function(){ $.pageslide.close(function(){
$pageslide.css(pageCss); $pageslide.css(pageCss);
_checkTitle(settings)
_load(settings); _load(settings);
_start(settings); _start(settings);
}); });
} else { } else {
_checkTitle(settings)
_load(settings); _load(settings);
if($pageslide.is(':hidden')) { if($pageslide.is(':hidden')) {
$pageslide.css(pageCss); $pageslide.css(pageCss);
@ -199,8 +222,7 @@
speed = $pageslide.data('speed'), speed = $pageslide.data('speed'),
bodyAnimateIn = {}, bodyAnimateIn = {},
bottomnavAnimateIn = {}, bottomnavAnimateIn = {},
slideAnimateIn = {} slideAnimateIn = {};
// If the slide isn't open, just ignore the call // If the slide isn't open, just ignore the call
if( $pageslide.is(':hidden') || _sliding ) return; if( $pageslide.is(':hidden') || _sliding ) return;
_sliding = true; _sliding = true;
@ -220,6 +242,22 @@
$pageslide.animate(slideAnimateIn, speed); $pageslide.animate(slideAnimateIn, speed);
$bottomNav.animate(bottomnavAnimateIn, speed); $bottomNav.animate(bottomnavAnimateIn, speed);
$body.animate(bodyAnimateIn, speed, function() { $body.animate(bodyAnimateIn, speed, function() {
if($pageslide.data('href') == '#') {
$pageslide.attr('style', '')
.hide()
.find('.content')
.attr('style', '')
.end()
.find('.view-page')
.attr('style', '')
.end()
.find('.pane')
.remove()
.end()
.find('.page-title')
.attr('style', '')
.children('span');
} else {
$pageslide.attr('style', '') $pageslide.attr('style', '')
.hide() .hide()
.find('.content') .find('.content')
@ -236,6 +274,7 @@
.attr('style', '') .attr('style', '')
.children('span') .children('span')
.empty(); .empty();
}
_sliding = false; _sliding = false;
if($pageslide.find('.error').length) $pageslide.find('.error').remove(); if($pageslide.find('.error').length) $pageslide.find('.error').remove();
if(typeof callback != 'undefined') callback(); if(typeof callback != 'undefined') callback();

View File

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

View File

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

View File

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

View File

@ -274,7 +274,7 @@ module OrbitBackendHelper
link = (is_manager? || is_sub_manager? rescue nil) && args.has_key?(:link) ? true : false link = (is_manager? || is_sub_manager? rescue nil) && args.has_key?(:link) ? true : false
if paginate || link if paginate || link
@index_footer = content_tag :div, class: "bottomnav clearfix" do @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 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
end end
@ -292,7 +292,7 @@ module OrbitBackendHelper
end end
when 'edit' when 'edit'
if authorization && approvable 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 end
when 'delete' when 'delete'
if show_delete_link(object) if show_delete_link(object)

View File

@ -18,13 +18,13 @@ class AdBanner
validates :title, :length => { :minimum => 2 } validates :title, :length => { :minimum => 2 }
validates :height, :speed, :timeout, :width, :presence => true 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 def size
"#{self.width} x #{self.height}" "#{self.width} x #{self.height}"
end end
def timeout_in_min def timeout_millisecond
self.timeout*1000 rescue 0 self.timeout*1000 rescue 0
end end

View File

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

View File

@ -2,44 +2,27 @@
<%= f.error_messages %> <%= f.error_messages %>
<%= f.label :title, t('ad_banner.banner_name') %> <%= 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> <span class="help-block"><%= t('ad_banner.name_only_english') %></span>
<%= f.label :timeout, t('ad_banner.transition_interval') %> <%= 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> <span class="help-block"><%= t('ad_banner.number_seconds') %></span>
<%= f.label :speed, t('ad_banner.transition_speed') %> <%= 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> <span class="help-block"><%= t('ad_banner.number_milliseconds') %></span>
<%= f.label :size, t('ad_banner.size') %> <%= f.label :size, t('ad_banner.size') %>
<span class="banner_set">W</span> <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> <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.label :ad_fx, t('ad_banner.effect') %>
<%= f.select :ad_fx, AdBanner::FX_TYPES, {}, {class: 'ad_banner_ad_fx'} %> <%= 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"> <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> </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>

View File

@ -1,9 +1,17 @@
<% set_default_index do <% set_default_index do
objects @ad_banners objects @ad_banners
quick_edit_link type: 'edit', quick_edit_link type: 'edit',
link: 'edit_admin_ad_banner_path',
class: 'open-slide', 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: 'detail'
quick_edit_link type: 'delete', quick_edit_link type: 'delete',
link: 'admin_ad_banner_path' link: 'admin_ad_banner_path'
@ -32,18 +40,18 @@
sort: 'size' sort: 'size'
field type: 'standalone', field type: 'standalone',
translation: 'preview', 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, need_value: true,
hide: 'phone' hide: 'phone'
footer link: 'new_admin_ad_banner_path', footer link: '',
link_class: 'btn btn-primary open-slide', 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 %> end %>
<%= render 'admin/default_index/index' %> <%= render 'admin/default_index/index' %>
<% content_for :page_specific_javascript do %> <% 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" %> <%= javascript_include_tag "lib/ad_banner/banner_preview" %>
<% end %> <% end %>
@ -54,8 +62,8 @@ end %>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="preview"> <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> </div>
<div class="modal-footer"> <div class="modal-footer">

View File

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

View File

@ -1,3 +1,27 @@
<div id="banner_index"> <div id="banner_index">
<%= render 'index' %> <%= render 'index' %>
</div> </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>

View File

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

View File

@ -1,5 +1,5 @@
<div style='position:relative'> <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| %> <% @ad_banner.ad_images.can_display.each do |ad_image| %>
<% link = ad_image_link(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: ('cursor:pointer;' if link.present?) %>

View File

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

View File

@ -12,6 +12,7 @@ en:
name_only_english: Banner Name can only in English name_only_english: Banner Name can only in English
new_banner: New Banner new_banner: New Banner
new_window: New window 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_milliseconds: Please enter the number of milliseconds
number_seconds: Please enter the number of seconds number_seconds: Please enter the number of seconds
size: Size size: Size