realtime preview is working. but save to object when preview

app/assets/javascripts/inc/modal-preview.js

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

app/assets/stylesheets/widget.css

@@ -59,27 +59,29 @@
 }
 .select-role {
 	display:none;
-	padding: 10px 0;
+	overflow:hidden;
 }
 .file-upload {
 	position:relative;
 	overflow: hidden;
 }
 .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 {
 	margin:0;
@@ -109,11 +111,11 @@
     width: 100%;
 }
 .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 {
     border-radius: 3px 3px 3px 3px !important;
@@ -126,25 +128,21 @@
 }
 /*Date*/
 .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 {
 	position: absolute;
 	visibility: hidden;
 	left: 11px;
 }
-.file-upload .input-medium {
-   border-radius: 3px 3px 3px 3px !important;
-   position: relative;
-   width: 267px;
-   z-index: 5;
-}

app/controllers/admin/ad_banners_controller.rb

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

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

@@ -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 => '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 "NewPreview", realtime_preview_admin_ad_banner_path(ad_banner_tab) , :class=>'preview_trigger'%>
+			
 	</div>
 	<% end -%>
-	<%= render :partial => 'preview_block',:locals=> {:ad_banner =>ad_banner_tab} %> 
+	<%#= render :partial => 'preview_block',:locals=> {:ad_banner =>ad_banner_tab} %> 
 </div>

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

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

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

@@ -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">
 	<ul class="nav nav-tabs">

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

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

config/locales/en.yml

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

config/locales/zh_tw.yml

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

config/routes.rb

@@ -26,7 +26,9 @@ Orbit::Application.routes.draw 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
           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