Orbit/app/views/admin/ad_images/_form.html.erb

186 lines
8.5 KiB
Plaintext
Raw Normal View History

2012-04-01 15:39:49 +00:00
<% content_for :page_specific_css do %>
<%= stylesheet_link_tag "lib/datepicker" %>
<% end %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/datepicker" %>
<%= javascript_include_tag "lib/date.format" %>
<% end %>
<div id="poststuff">
<form class="clear">
<!--Widget start-->
<div id="sub-wiget">
<div id="widget-date" class="widget-box">
<div class="widget-action clear">
<a href="#" class="action"><i title="Set the announcement to start and end dates" class="icon-exclamation-sign icon-white tip"></i></a>
</div>
<h3 class="widget-title"><i class="icons-calendar icons-white"></i> Date</h3>
<div class="widget-content clear">
<div id="calendarRange">
<div class="input-append">
<span class="showDate"></span><span class="add-on btn">▼</span>
<%= f.hidden_field :parse_post_date %>
<%= f.hidden_field :parse_unpost_date%>
</div>
<div id="widgetCalendar">
</div>
</div>
<script type="text/javascript">
var today = new Date();
today = today.format('isoDate');
var state = false;
var arr = state ? "▼" : "▲"
//calendarRange
$('#calendarRange .showDate').html(today+" - "+today)
$('#calendarRange .calendarInput').val(today+" - "+today);
$('#calendarRange #widgetCalendar').DatePicker({
flat: true,
format: 'Y / m / d',
date: today,
calendars: 1,
mode: 'range',
starts: 1,
onChange: function(formated) {
$('#calendarRange .showDate').get(0).innerHTML = formated.join(' - ');
$('#calendarRange .calendarInput').val(formated.join(' - '));
start_date = formated[0].replace(/\s/g, "");
end_date = formated[1].replace(/\s/g, "");
$('#ad_image_parse_post_date').val(start_date);
$('#ad_image_parse_unpost_date').val(end_date);
}
});
$('#calendarRange .input-append').bind('click', function(){
var arr = state ? "▼" : "▲"
$('#calendarRange .add-on').html(arr);
$('#calendarRange #widgetCalendar').stop().animate({height: state ? 0 : $('#calendarRange #widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
state = !state;
return false;
});
$('#calendarRange #widgetCalendar div.datepicker').css('position', 'absolute');
</script>
</div>
</div>
<div id="widget-picture" class="widget-box">
<div class="widget-action clear">
<a class="action"><i title="Upload pictures" class="icon-exclamation-sign icon-white tip"></i></a>
</div>
<h3 class="widget-title"><i class="icons-picture icons-white"></i>Picture</h3>
<div class="widget-content clear">
<div class="control-group">
<div class="upload-picture">
<!--請程式務必將圖片尺寸加入到行內裡-->
<%= image_tag @ad_image.file,:width=> "456",:height=>'700' rescue ''%>
<script type="text/javascript">
var picH = $('.upload-picture').width()/$('.upload-picture').find('img').attr("width")*$('.upload-picture').find('img').attr("height")
var imgMarginTop = ($('.upload-picture').height()-picH)/2;
var d = $('.upload-picture').height();
if(imgMarginTop>0){
imgMarginTop = 0;
d = picH;
$('.upload-picture').css({height:d})
}
$('.upload-picture').find('img').css({marginTop:imgMarginTop})
$('.upload-picture').each(function (i){
$(this).mouseenter(function(){
var h= picH;
$(this).stop().animate({height:h}, 500);
$(this).find('img').stop().animate({marginTop:0}, 500);
});
$(this).mouseleave(function(){
$(this).stop().animate({height:d}, 500);
$(this).find('img').stop().animate({marginTop:imgMarginTop}, 500);
});
});
</script>
</div>
<span class="alert widgetInfo">此區塊圖片尺寸請使用580px × 225px</span>
<div class="controls file-upload input-prepend">
<label class="control-label add-on btn" for="input-upload">
Choose file
<%= f.file_field :file,:id=>"input-upload",:class => "upload", :onchange=> "document.getElementById('fu1').innerHTML = this.form.fu1.value = this.value;" %>
</label>
<span id="fu1" class="file-name"></span>
<br>
<input name="fu1" class="input-medium" type="text">
</div>
</div>
</div>
</div>
<div id="widget-type" class="widget-box">
<div class="widget-action clear">
<a class="action"><i class="icon-exclamation-sign icon-white tip" data-original-title="Upload pictures"></i></a>
</div>
<h3 class="widget-title"><i class="icons-star-thin icons-white"></i>Type</h3>
<div class="widget-content clear">
<%= f.select :link_open ,AdImage::LINK_OPEN_TYPES%>
</div>
</div>
<div id="widget-time" class="widget-box widget-size-300">
<div class="widget-action clear">
<a class="action"><i class="icon-exclamation-sign icon-white tip" data-original-title="Set the range time"></i></a>
</div>
<h3 class="widget-title"><i class="icons-time icons-white"></i>FEQ</h3>
<div class="widget-content clear">
<%= f.text_field :weight ,:class=> 'span3',:placeholder=>"在套圖中出現次數 1次請輸入1" %>
</div>
</div>
<div id="widget-link" class="widget-box widget-size-300">
<div class="widget-action clear">
<a class="action"><i class="icon-exclamation-sign icon-white tip" data-original-title="Add a reference link"></i></a>
</div>
<h3 class="widget-title"><i class="icons-link icons-white"></i>Link</h3>
<div class="widget-content clear">
<%= f.text_field :out_link ,:class=> 'span3',:placeholder => "輸入連結"%>
</div>
</div>
</div>
<!--Wiget End-->
<!--Post Start-->
<div id="post-body">
<div id="post-body-content" class="clear">
<ul class="nav nav-tabs">
<% site_valid_locales_default_head.each do |locale|%>
<%= content_tag :li,link_to(I18nVariable.from_locale(locale),"##{locale}",:data=>{:toggle => "tab"}),:class=> (active_when_default_locale_eq locale) %>
<% end %>
</ul>
<div class="tab-content">
<%= select_tag 'ad_banner[id]',options_from_collection_for_select(AdBanner.all, "id", "title",params[:ad_banner_id]) , :class=>"input-medium", %>
<% site_valid_locales_default_head.each do |locale|%>
<%= content_tag :div,:class => "tab-pane #{active_when_default_locale_eq locale}",:id=>"#{locale}" do%>
<div class="title">
<%= f.fields_for :title,@ad_image.title do |f| %>
<%= f.text_field locale,:class=>"ad_image-title",:placeholder => "輸入標題"%>
<% end %>
</div>
<div class="context editor">
<%= f.fields_for :context, @ad_image.context do |f| %>
<%= f.text_area locale,:style => "width:100%", :class => "asd_tinymce_textarea" %>
<% end %>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
</div>
<!--Post End-->
<div class="form-actions">
<button class="btn btn-success" type="submit">Preview/預覽</button>
<button class="btn btn-primary" type="submit">Submit/送出</button>
<button class="btn" type="reset">Cancel/取消</button>
</div>
</form>
</div>