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

This commit is contained in:
chris 2013-10-19 19:10:43 +08:00
parent fea86ba3a9
commit 7353b48212
11 changed files with 86 additions and 95 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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