nccu-news/app/views/admin/news/_form.html.erb

499 lines
20 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<style type="text/css" media="screen">
.fileupload-alert{
display: none;
width: 597px;
margin-top: -10px;
padding: 5px 0;
}
.thumbnail{
width: 310px;
height: 130px;
}
.thumbnail img{
width: 100%;
height: auto;
}
</style>
<% content_for :page_specific_css do %>
<%= stylesheet_link_tag "lib/main-forms" %>
<%= stylesheet_link_tag "lib/fileupload" %>
<%= stylesheet_link_tag "lib/main-list" %>
<% end %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/bootstrap-fileupload" %>
<%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
<%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
<%= javascript_include_tag "lib/file-type" %>
<%= javascript_include_tag "lib/module-area" %>
<% end %>
<!-- Input Area -->
<div class="input-area">
<!-- Module Tabs -->
<div class="nav-name"><strong><%= t(:module) %></strong></div>
<ul class="nav nav-pills module-nav">
<li class="active"><a href="#basic" data-toggle="tab"><%= t(:basic) %></a></li>
<% if is_user_sub_manager? %>
<li></li>
<% else %>
<li><a href="#status" data-toggle="tab"><%= t(:status) %></a></li>
<% end %>
<li><a href="#imageupload" data-toggle="tab"><%= t("news.image") %></a></li>
</ul>
<!-- Module -->
<div class="tab-content module-area">
<!-- Basic Module -->
<div class="tab-pane fade in active" id="basic">
<!-- Unit Name -->
<div class="control-group">
<label class="control-label muted"><%= t("news.unit") %></label>
<div class="controls">
<% if request.params["action"] == "edit" %>
<%= f.select :unit_id, @unit.collect{|t| [ t.name, t.id ]} %>
<%= f.select :department_id, @department.collect{|t| [ t.name, t.id ]} %>
<% elsif request.params["action"]== "new" %>
<%=
select_tag "news_bulletin[unit_id]",
options_from_collection_for_select(@unit, "id", "name"),
:'data-remote' => 'true',
:'url' => "/admin/news/getdata",
:'prompt' => t("news_bulletin.ut_prompt"),
:'data-type' => 'json'
%>
<%=
select_tag "news_bulletin[department_id]"
%>
<% end %>
</div>
</div>
<!-- Category -->
<div class="control-group">
<label class="control-label muted"><%= t(:category) %></label>
<div class="controls">
<%= select_category(f, @module_app) %>
</div>
</div>
<!-- Date Time Picker -->
<div class="control-group">
<label class="control-label muted"><%= t(:start_date) %></label>
<div class="controls">
<%= f.datetime_picker :postdate, :no_label => true %>
</div>
</div>
<div class="control-group">
<label class="control-label muted"><%= t(:end_date) %></label>
<div class="controls">
<%= f.datetime_picker :deadline, :no_label => true %>
</div>
</div>
</div>
<!-- Status Module -->
<div class="tab-pane fade" id="status">
<!-- Status -->
<div class="control-group">
<label class="control-label muted"><%= t(:status) %></label>
<div class="controls" data-toggle="buttons-checkbox">
<label class="checkbox inline btn <%= 'active' if @news_bulletin.is_top? %>">
<%= f.check_box :is_top %> <%= t(:top) %>
</label>
<label class="checkbox inline btn <%= 'active' if @news_bulletin.is_hot? %>">
<%= f.check_box :is_hot %> <%= t(:hot) %>
</label>
<label class="checkbox inline btn <%= 'active' if @news_bulletin.is_hidden? %>">
<%= f.check_box :is_hidden %> <%= t(:hide) %>
</label>
</div>
</div>
</div>
<%# end %>
<!-- Images Module -->
<div class="tab-pane fade" id="imageupload">
<!-- Images Upload -->
<div class="control-group">
<label class="control-label muted"><%= t("news.image") %></label>
<div class="controls">
<div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @news_bulletin.image.file %>" data-provides="fileupload">
<div class="fileupload-new thumbnail pull-left">
<% if @news_bulletin.image.file %>
<%= image_tag @news_bulletin.image %>
<% else %>
<img src="http://www.placehold.it/400x200/EFEFEF/AAAAAA" />
<% end %>
</div>
<div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
<span class="btn btn-file">
<span class="fileupload-new"><%= t(:select_image) %></span>
<span class="fileupload-exists"><%= t(:change) %></span>
<%= f.file_field :image %>
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
<div class="controls" data-toggle="buttons-checkbox">
<label class="checkbox inline btn btn-danger fileupload-remove">
<%= f.check_box :remove_image %><%= t(:remove) %>
</label>
</div>
</div>
<br>
<div class="fileupload-alert alert alert-danger text-center" role="alert"></div>
<div class="image_note" style="color:red; font-size:14px;">
<br />
※<%= t("ad.widget_info_for_ad_image_size", :best_size=> "( 400px x 200px )") %>
<br />
※<%= t("news.image_size_limit")%>
<br />
※<%= t("news.image_note")%>
<br />
<a href="https://www.safesync.nccu.edu.tw/HWwc/%E5%A6%82%E4%BD%95%E8%A3%81%E5%89%AA%E6%96%B0%E8%81%9E%E5%88%8A%E9%A0%AD%E5%9C%96%E7%89%87.pdf?a=wKRF1__Vjhk" target="_blank" style="color:red;">※如何裁剪新聞刊頭圖片</a>
</div>
</div>
<div class="controls pull-left">
<input type="checkbox" id="user_default_image" />
<label class="checkbox inline muted"> <%= t('news_bulletin.user_default_image')%></label>
</div>
</div>
<% @site_in_use_locales.each do |locale| %>
<%= f.fields_for :image_description_translations do |f| %>
<div class="control-group">
<label class="control-label muted" for="image_description_<%= locale.to_s %>"><%= t(:description) + " (#{t(locale.to_s)})" %></label>
<div class="controls">
<%= f.text_field locale, value: (@news_bulletin.image_description_translations[locale.to_s] rescue nil) %>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
<!-- Language Tabs -->
<div class="nav-name"><strong><%= t(:language) %></strong></div>
<ul class="nav nav-pills language-nav">
<% @site_in_use_locales.each_with_index do |locale, i| %>
<li class="<%= 'active' if i == 0 %>">
<a data-toggle="tab" href=".<%= locale %>"><%= t(locale) %></a>
</li>
<% end %>
</ul>
<!-- Language -->
<div class="tab-content language-area">
<% @site_in_use_locales.each_with_index do |locale, i| %>
<div class="<%= locale %> tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">
<!-- Title-->
<div class="control-group input-title">
<label class="control-label muted"><%= t(:title) %></label>
<div class="controls">
<%= f.fields_for :title_translations do |f| %>
<%= f.text_field locale, class: "input-block-level", placeholder: t(:title), value: (@news_bulletin.title_translations[locale] rescue nil) %>
<% end %>
</div>
</div>
<!-- Sub Title -->
<div class="control-group input-subtitle">
<label class="control-label muted"><%= t(:subtitle) %></label>
<div class="controls">
<div class="textarea">
<%= f.fields_for :subtitle_translations do |f| %>
<%= f.text_area locale, rows: 2, class: "input-block-level", value: (@news_bulletin.subtitle_translations[locale] rescue nil) %>
<% end %>
</div>
</div>
</div>
<!-- Content -->
<div class="control-group input-content">
<label class="control-label muted"><%= t(:content) %></label>
<div class="controls">
<div class="image_note" style="color:red; font-size:14px;">
<span style="font-weight: bolder;">※建議使用IE10、IE11、Chrome(最佳)、Firefox等瀏覽器。</span>
<br />
※內文裡單一圖片大小為1MB以下。
<br />
※內文裡單一圖片尺寸的最大寬度600px(滿版),如圖片要縮小,請依比例調整。
<br />
<a href="https://www.safesync.nccu.edu.tw/HWwc/%E5%A6%82%E4%BD%95%E8%A3%81%E5%89%AA%E6%96%B0%E8%81%9E%E5%9C%96%E7%89%87.pdf?a=tAdpdijUy1U" target="_blank" style="color:red;">※如何剪裁新聞圖片。</a>
</div>
<div class="textarea">
<%= f.fields_for :text_translations do |f| %>
<%= f.cktext_area locale, rows: 5, class: "input-block-level", :value => (@news_bulletin.text_translations[locale] rescue nil) %>
<% end %>
</div>
</div>
</div>
</div>
<% end %>
<!-- Link -->
<div class="control-group">
<label class="control-label muted"><%= t(:link) %></label>
<div class="controls add-input">
<!-- Exist -->
<% if @news_bulletin && !@news_bulletin.news_bulletin_links.blank? %>
<div class="exist">
<% @news_bulletin.news_bulletin_links.each_with_index do |news_bulletin_link, i| %>
<%= f.fields_for :news_bulletin_links, news_bulletin_link do |f| %>
<%= render :partial => 'form_link', :object => news_bulletin_link, :locals => {:f => f, :i => i} %>
<% end %>
<% end %>
<hr>
</div>
<% end %>
<!-- Add -->
<div class="add-target">
</div>
<p class="add-btn">
<%= hidden_field_tag 'news_bulletin_link_field_count', @news_bulletin.news_bulletin_links.count %>
<a id="add_link" class="trigger btn btn-small btn-primary"><i class="icons-plus"></i> <%= t(:add) %></a>
</p>
</div>
</div>
<!-- File -->
<div class="control-group">
<label class="control-label muted"><%= t(:file_) %></label>
<div class="controls">
<!-- Exist -->
<% if @news_bulletin && !@news_bulletin.news_bulletin_files.blank? %>
<div class="exist">
<% @news_bulletin.news_bulletin_files.each_with_index do |news_bulletin_file, i| %>
<%= f.fields_for :news_bulletin_files, news_bulletin_file do |f| %>
<%= render :partial => 'form_file', :object => news_bulletin_file, :locals => {:f => f, :i => i} %>
<% end %>
<% end %>
<hr>
</div>
<% end %>
<!-- Add -->
<div class="add-target">
</div>
<p class="add-btn">
<%= hidden_field_tag 'news_bulletin_file_field_count', @news_bulletin.news_bulletin_files.count %>
<a id="add_file" class="trigger btn btn-small btn-primary"><i class="icons-plus"></i> <%= t(:add) %></a>
</p>
</div>
</div>
</div>
</div>
<!-- Form Actions -->
<div class="form-actions">
<%= get_referer_url[:action] rescue "" %>
<%= f.submit t('submit'), class: 'btn btn-primary' %>
<input type="hidden" name="referer_url" value="<%= get_referer_url %>">
<%= button_tag t("preview"), id: "button_for_preview", name: "commit", class: 'btn', type: :button %>
<%= link_to t('cancel'), admin_news_index_path, :class=>"btn" %>
</div>
<span id='show_preview'>
<div class="modal hide fade in banner-preview" id="">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3><%= t(:preview) %></h3>
</div>
<div class="modal-body">
<iframe id="preview-iframe" src=""></iframe>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal"><%= t(:close) %></a>
</div>
</div>
</span>
<% content_for :page_specific_javascript do %>
<script>
var validate_files = false;
var validate_image = false;
var fileupload_size_limit_mb = 1;
var fileupload_size_limit = fileupload_size_limit_mb*1000*1000; // 1MB
$(function() {
$("#main-wrap").after("");
$(document).on('click', '#add_link', function(){
var new_id = $(this).prev().attr('value');
var old_id = new RegExp("new_news_bulletin_links", "g");
var on = $('.language-nav li.active').index();
var le = $(this).parent('.add-btn').prev('.add-target').children('.start-line').length;
$(this).prev().attr('value', parseInt(new_id) + 1);
$(this).parent().siblings('.add-target').append(("<%= escape_javascript(add_attribute 'form_link', f, :news_bulletin_links) %>").replace(old_id, new_id));
$(this).parent('.add-btn').prev('.add-target').children('.start-line').eq(le).children('.tab-content').children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
formTip();
});
$(document).on('click', '#add_file', function(){
var new_id = $(this).prev().attr('value');
var old_id = new RegExp("new_news_bulletin_files", "g");
var on = $('.language-nav li.active').index();
var le = $(this).parent('.add-btn').prev('.add-target').children('.start-line').length;
$(this).prev().attr('value', parseInt(new_id) + 1);
$(this).parent().siblings('.add-target').append(("<%= escape_javascript(add_attribute 'form_file', f, :news_bulletin_files) %>").replace(old_id, new_id));
$(this).parent('.add-btn').prev('.add-target').children('.start-line').eq(le).children('.input-append').find('.tab-content').each(function() {
$(this).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
});
formTip();
});
$(document).on('click', '.delete_link', function(){
$(this).parents('.input-prepend').remove();
});
$(document).on('click', '.delete_file', function(){
$(this).parents('.input-prepend').remove();
});
$(document).on('click', '.remove_existing_record', function(){
if(confirm("<%= I18n.t(:sure?)%>")){
$(this).children('.should_destroy').attr('value', 1);
$(this).parents('.start-line').hide();
}
});
$('#remind-check').prop('checked') ? '':$('.content-box').addClass('hide')
$('#remind-check').on('change', function() {
$(this).prop('checked') ? $('.content-box').removeClass('hide'):$('.content-box').addClass('hide')
})
$('#button_for_preview').click(function(){
var method = $('.main-forms input[name="_method"]').val();
$('.main-forms input[name="_method"]').val("post");
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
var formData = new FormData( $('.main-forms')[0] );
formData.append("preview_type", ( (method==undefined) ? "new" : "edit" ));
formData.append("news_bulletin_id", '<%= @news_bulletin.id.to_s %>');
$.ajax({
type: "post",
url: '<%= admin_news_preview_path %>',
data : formData,
processData: false,
contentType: false
}).done(function(data){
$('.modal-body iframe').attr('src',data);
$('#show_preview .modal').modal();
$('#show_preview .modal').height(function() {
return $(window).height() * 0.7;
});
var slug = data.split('/')[(data.split('/').length-1)];
$('#preview-iframe').on('load', function(){
$.get('/admin/news/destroy_preview/'+slug,function(data){
});
});
});
$('.main-forms input[name="_method"]').val(method);
return false;
});
$("select#news_bulletin_unit_id").on("change",function(){
var html = "";
if($(this).val() != ""){
$.ajax({
"url" : "/admin/news_admins/get_departments",
"data" : {"unit" : $(this).val()},
"dataType" : "json",
"type" : "get"
}).done(function(data){
$.each(data.departments,function(i,department){
html+= "<option value=" + department.id + ">" + department.name + "</option>";
})
$("select#news_bulletin_department_id").html(html).removeAttr("disabled");
})
}else{
$("select#news_bulletin_department_id").html("").prop("disabled",true);
}
})
$('.form-actions input[type="submit"]').click(function(){
var validate = true;
if(location.pathname=='/admin/news/new'){
if(validate_files) validate = validate_fileupload();
if(validate_image) validate = validate_image();
if(!validate) return false;
}
});
if(validate_files) $(".start-line input[type='file']").on("change", validate_fileupload);
if(validate_image) $("#news_bulletin_image").on("change", validate_image);
});
var validate_fileupload = function(){
var validate = true;
$.each($(".start-line input[type='file']"),function(){
var fileupload_alert = $(this).parent().parent().parent().parent().find(".fileupload-alert");
if(fileupload_size_limit < $(this).get(0).files[0].size){
validate = false;
file_size = $(this).get(0).files[0].size / (1000*1000);
fileupload_alert.text("<%= t("news.file_size")%>: "+file_size.toFixed(1)+"MB <%= t("news.file_size_exceed_limitation") %>, <%= t("news.file_size_limit") %>: "+fileupload_size_limit_mb+"MB");
fileupload_alert.show();
}else{
fileupload_alert.hide();
}
});
return validate;
}
var validate_image = function(){
var validate = true,
file_size = 0;
if($("#user_default_image").prop("checked")){
return validate;
}else{
fileupload_alert = $("#news_bulletin_image").parent().parent().parent().find('.fileupload-alert');
if($("#news_bulletin_image").get(0).files.length){
if(fileupload_size_limit < $("#news_bulletin_image").get(0).files[0].size){
file_size = $("#news_bulletin_image").get(0).files[0].size / (1000*1000);
validate = false;
}
}else{
validate = false;
}
}
if(!validate){
alert("請於封面圖片中的頁籤,設定您圖片上傳方式");
fileupload_alert.text("<%= t("news.file_size")%>: "+file_size.toFixed(1)+"MB <%= t("news.file_size_exceed_limitation") %>, <%= t("news.file_size_limit") %>: "+fileupload_size_limit_mb+"MB");
fileupload_alert.show();
$("#basic").removeClass("active");
$("#status").removeClass("active");
$("#tag").removeClass("active");
$(".tab-pane").addClass("fade");
$(".module-nav li").removeClass("active");
$("#news_bulletin_image").parent().parent().parent().parent().parent().removeClass("fade");
$("#news_bulletin_image").parent().parent().parent().parent().parent().addClass("active");
$("a[href='#imageupload']").parent().addClass("active");
$('html, body').animate({
scrollTop: ($("#news_bulletin_image").offset().top-20) + 'px'
}, 'fast');
}else{
fileupload_alert.hide();
}
return validate;
}
</script>
<% end %>