realtime preview is working. but save to object when preview

This commit is contained in:
Matthew K. Fu JuYuan 2012-04-17 11:34:25 +08:00
parent 6cdebb440d
commit 06a3128be5
11 changed files with 111 additions and 43 deletions

View File

@ -0,0 +1,15 @@
//Preview need a link in form as Ex and a corresponding PUT action in controller
//Ex preview trigger:
// <%= link_to "NewPreview", realtime_preview_admin_ad_banner_path(ad_banner_tab) , :class=>'preview_trigger'%>
$(document).ready(function() {
$("a.preview_trigger").click(function(){
$(this).after("<p id='show_preview'></p>");
$.ajax({
type:"PUT",
url:$(this).attr("href"),
data:$(this).parents("form").serialize()
}).done(function(){ $("#"+start_modal_with_id).modal('show');});
return false;}
);
});

View File

@ -59,27 +59,29 @@
} }
.select-role { .select-role {
display:none; display:none;
padding: 10px 0; overflow:hidden;
} }
.file-upload { .file-upload {
position:relative; position:relative;
overflow: hidden; overflow: hidden;
} }
.file-upload .file-name { .file-upload .file-name {
border-color: #CCCCCC; white-space: nowrap;
border-radius: 0 3px 3px 0; overflow: hidden;
border-style: solid; border-style: solid;
border-width: 1px 1px 1px 0; border-width: 1px 1px 1px 0;
display: inline-block; border-color: #CCC;
float: left; display: inline-block;
height: 18px; float: left;
line-height: 18px; padding: 4px 10px;
margin: 0; height: 18px;
overflow: hidden; line-height: 18px;
padding: 4px 10px; -webkit-border-radius: 0 3px 3px 0;
text-align: left; -moz-border-radius: 0 3px 3px 0;
white-space: nowrap; border-radius: 0 3px 3px 0;
width: 182px; text-align: left;
margin: 0;
width: 182px;
} }
.file-upload .upload { .file-upload .upload {
margin:0; margin:0;
@ -109,11 +111,11 @@
width: 100%; width: 100%;
} }
.widget-box .widgetInfo { .widget-box .widgetInfo {
display: inline-block; display: inline-block;
margin: 0 0 5px; text-align: center;
padding: 5px 10px; width: 255px;
text-align: center; margin : 0px 0 5px;
width: 255px; padding: 5px 10px;
} }
.file-upload .input-medium { .file-upload .input-medium {
border-radius: 3px 3px 3px 3px !important; border-radius: 3px 3px 3px 3px !important;
@ -126,25 +128,21 @@
} }
/*Date*/ /*Date*/
.showDate { .showDate {
border-color: #CCCCCC; border-style: solid;
border-radius: 3px 0 0 3px; border-width: 1px 0 1px 1px;
border-style: solid; border-color: #CCC;
border-width: 1px 0 1px 1px; display: inline-block;
display: inline-block; float: left;
float: left; padding: 4px 10px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;
padding: 4px 10px; -webkit-border-radius: 3px 0 0 3px;
text-align: center; -moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
text-align: center;
} }
.calendarInput { .calendarInput {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
left: 11px; left: 11px;
} }
.file-upload .input-medium {
border-radius: 3px 3px 3px 3px !important;
position: relative;
width: 267px;
z-index: 5;
}

View File

@ -40,9 +40,9 @@ class Admin::AdBannersController < ApplicationController
end end
def realtime_preview def realtime_preview
@ad_banner = AdBanner.find(params[:id]) @ad_banner = AdBanner.find(params[:id]).clone
debugger
@ad_banner.update_attributes(params[:ad_banner]) @ad_banner.update_attributes(params[:ad_banner])
render
end end
def index def index

View File

@ -13,7 +13,9 @@
<%= render :partial => "ad_image_update", :collection => ad_banner_tab.ad_images,:as => :ad_image,:locals=>{:ad_banner => ad_banner_tab} %> <%= render :partial => "ad_image_update", :collection => ad_banner_tab.ad_images,:as => :ad_image,:locals=>{:ad_banner => ad_banner_tab} %>
<%#= render :partial => 'new_add_banner_file', :object => ad_banner_tab.ad_images.build, :locals => { :field_name => "new_ad_images[]", :f => f, :classes => "r_destroy" } %> <%#= render :partial => 'new_add_banner_file', :object => ad_banner_tab.ad_images.build, :locals => { :field_name => "new_ad_images[]", :f => f, :classes => "r_destroy" } %>
<%= link_to 'Add AdImage',new_admin_ad_banner_ad_image_path(ad_banner_tab) %> <%= link_to 'Add AdImage',new_admin_ad_banner_ad_image_path(ad_banner_tab) %>
<%= link_to "NewPreview", realtime_preview_admin_ad_banner_path(ad_banner_tab) , :class=>'preview_trigger'%>
</div> </div>
<% end -%> <% end -%>
<%= render :partial => 'preview_block',:locals=> {:ad_banner =>ad_banner_tab} %> <%#= render :partial => 'preview_block',:locals=> {:ad_banner =>ad_banner_tab} %>
</div> </div>

View File

@ -0,0 +1,35 @@
<% if ad_banner -%>
<div class="modal hide fade in banner-preview" id='slideshow-<%=ad_banner.title.dehumanize%>'>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3><%= t("modal.preview") %></h3>
</div>
<div class="modal-body">
<p class="ad_banner_slideshow">
<% preview_block_ad_images_helper(ad_banner).each do |ad_image| -%>
<%= image_tag ad_image.file,:alt => (ad_image.title[locale] || ' '),:time_to_next => ad_banner.transition_sec,:link_open=> ad_image.link_open, :link_url =>((ad_image.out_link || ad_banner.context || ' ')) %>
<% end -%>
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal"><%= t("modal.close") %></a>
</div>
</div>
<% end -%>
<script type='text/javascript' src='/static/kernel.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#slideshow-<%=ad_banner.title.dehumanize%>').on('show', function () {
$('#slideshow-banner_1').find(".ad_banner_slideshow").cycle({delay: -1000, fx: '<%= ad_banner.ad_fx.nil?? 'fade': ad_banner.ad_fx %>', timeoutFn: getTimeout });
});
$(".modal").on('hidden', function () {
$("#show_preview").remove();
});
//$('#slideshow-<%=ad_banner.title.dehumanize%>').show();
});
</script>

View File

@ -1,4 +1,10 @@
<%= stylesheet_link_tag "admin/ad_banner_preview" %> <% content_for :page_specific_css do -%>
<%#= stylesheet_link_tag "admin/ad_banner_preview" %>
<% end -%>
<% content_for :page_specific_css do -%>
<%= javascript_include_tag "inc/modal-preview" %>
<% end -%>
<div id="post-body-content" class="clear"> <div id="post-body-content" class="clear">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">

View File

@ -0,0 +1,2 @@
$('#show_preview').html("<%= escape_javascript(render(:partial => 'modal_preview',:locals => {:ad_banner => @ad_banner})) %>");
var start_modal_with_id = "slideshow-<%=@ad_banner.title.dehumanize%>"

View File

@ -176,3 +176,8 @@ en:
role: User role role: User role
panel: panel:
modal:
close: Close
preview: Preview

View File

@ -388,3 +388,6 @@ zh_tw:
create: "新增%{model}" create: "新增%{model}"
update: "更新%{model}" update: "更新%{model}"
submit: "儲存%{model}" submit: "儲存%{model}"
modal:
close: "關閉"
preview: "預覽"

View File

@ -26,7 +26,9 @@ Orbit::Application.routes.draw do
resources :ad_banners do resources :ad_banners do
match 'preview/:id' => 'ad_banners#realtime_preview',:as => :realtime_preview,:via => :put member do
match 'preivew' => 'ad_banners#realtime_preview',:as => :realtime_preview,:via => :put
end
collection do collection do
match 'new_ad_image' => 'ad_images#new',:as => :new_ad_image,:via => :get match 'new_ad_image' => 'ad_images#new',:as => :new_ad_image,:via => :get
match 'new_ad_image' => 'ad_images#create',:as => :create_ad_image,:via => :post match 'new_ad_image' => 'ad_images#create',:as => :create_ad_image,:via => :post