universal_table/app/views/admin/universal_tables/_file_field.html.erb

289 lines
8.9 KiB
Plaintext

<% # encoding: utf-8 %>
<% content_for :page_specific_css do %>
<style type="text/css">
.sort-order-icon{
font-size: 25px;
cursor: move;
}
</style>
<% end %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/file-type" %>
<%= javascript_include_tag "lib/module-area" %>
<%= javascript_include_tag "lib/jquery-ui-sortable.min" %>
<% end %>
<style>
#fileupload {
position: relative;
clear: both;
overflow: hidden;
height: 254px;
}
#fileupload #dropzone.drop {
position: absolute;
left: 0;
right: 0;
border: 2px dashed #0088CC;
border-radius: 10px;
color: #0088CC;
background-color: #FFFFFF;
z-index: 0;
}
#fileupload #dropzone {
padding: 30px;
text-align: center;
font-size: 3em;
font-family: 'Raleway';
line-height: 1.2em;
color: #e4e4e4;
}
#fileupload #dropzone.in {
opacity: .7;
z-index: 2;
border-color: #faa732;
color: #faa732;
}
</style>
<div class="control-group">
<%= f.label :text, column.title, :class => "control-label" %>
<div class="controls">
<p class="add-btn">
<%= hidden_field_tag 'column_entry_file_field_count', file_field.column_entry_files.count %>
<a id="add_file" class="trigger btn btn-small btn-primary"><i class="icons-plus"></i> <%= t(:add) %></a>
</p>
<hr>
<!-- Add -->
<div class="add-target" id="add-target"></div>
<!-- Exist -->
<% if file_field && !file_field.column_entry_files.blank? %>
<div class="exist plugin-sortable">
<% file_field.column_entry_files.desc(:sort_number).each_with_index do |column_entry_file, i| %>
<%= f.fields_for :column_entry_files, column_entry_file do |f| %>
<%= render :partial => 'form_file', :locals => {:f => f, :i => i,:form_file => column_entry_file} %>
<% end %>
<% end %>
<hr>
</div>
<% end %>
<div id="fileupload" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragleave="(function(){$('#dropzone').removeClass('in');})()">
<div id="dropzone" class="drop">
<div data-icons=""></div>
<%=t("universal_table.drag_file_to_here")%>
</div>
</div>
</div>
</div>
<% if !file_field.new_record? %>
<%= f.hidden_field :id %>
<% else %>
<%= f.hidden_field :table_column_id, :value => column.id %>
<% end %>
</div>
<% content_for :page_specific_javascript do %>
<script>
if (!FileReader.prototype.readAsBinaryString) {
console.log('readAsBinaryString definition not found');
FileReader.prototype.readAsBinaryString = function (fileData) {
var binary = '';
var pk = this;
var reader = new FileReader();
reader.onload = function (e) {
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
var a = bytes[i];
var b = String.fromCharCode(a)
binary += b;
}
pk.content = binary;
$(pk).trigger('onload');
}
reader.readAsArrayBuffer(fileData);
}
}
function FileListItems (files) {
var b;
try{
b = new DataTransfer();
}catch(e){
if(window.dataTransfer){
b = window.dataTransfer;
}else{
if(typeof(ClipboardEvent) == "undefined"){ //IE
b = new DataTransfer();
}else{
b = new ClipboardEvent("").clipboardData;
}
}
}
if(b.items){
b.items.clear();
}else{
if(b.files.length != 0 ){
var files_length = b.files.length;
for(var i = files_length - 1;i >= 0;i = i - 1){
delete b.files[i];
}
}
if(b.files.length != 0){
return files
}
}
for (var i = 0, len = files.length; i<len; i++){
if(b.items){
b.items.add(files[i])
}else{
b.files[i] = files[i];
}
}
return b.files
}
function change_files_to_file_field(file_field,files){
var fileupload = $(file_field).parents(".fileupload");
if(fileupload.length > 0){
fileupload.find(".fileupload-preview").text(files[0].name);
}
var files_list = new FileListItems(files)
try{
$(file_field)[0].files = files_list;
}catch(e){console.log(e)}
if($(file_field)[0].files.length == 0){ //Change failed
var file_field_values = [];
var file_reader = new FileReader();
$("[name=\""+$(file_field)[0].name+"\"][type=\"hidden\"]").remove();
var hidden_input = $("<input type=\"hidden\" name=\""+$(file_field)[0].name+"\">");
var hidden_input_values = [];
$(file_field).after(hidden_input);
var files_list_length = files_list.length;
for(var i = 0; i < files_list_length; i++){
var file = files_list[i];
$(file_field)[0].files[i] = file;
file_reader.readAsBinaryString(files_list[i]);
file_reader.onload = (function(hidden_input,file,i,files_list_length) {
return function(e) {
var file_info = {};
file_info["name"] = file.name;
file_info["type"] = file.type;
if (file_reader.result)
file_reader.content = file_reader.result;
file_info["content"] = e ? e.target.result : file_reader.content;
if(Array.isArray(hidden_input_values)){
hidden_input_values.push(file_info);
}
if(i == files_list_length - 1){
if(hidden_input_values.length == 1){
hidden_input_values = hidden_input_values[0];
}
hidden_input.val(JSON.stringify(hidden_input_values));
}
};})(hidden_input,file,i,files_list_length);
file_field_values.push("C:\\fakepath\\" + files_list[i].name);
}
Object.defineProperty($(file_field)[0].files, "length", {
// only returns odd die sides
get: function () {
var length = 0;
while(this[length]){
length++;
}
return length;
}
});
Object.defineProperty($(file_field)[0], "value", {
// only returns odd die sides
get: function () {
return (this.getAttribute('value') ? this.getAttribute('value') : "");
},
set: function(value) {
this.setAttribute('value',value);
}
});
$(file_field)[0].value = file_field_values.join(", ");
}
}
function dragOverHandler(ev) {
document.activeElement.blur();
$(ev.target).addClass("in");
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}
function dropHandler(ev) {
window.ev = ev;
window.dataTransfer = ev.dataTransfer;
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
var files = [];
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
// If dropped items aren't files, reject them
if (ev.dataTransfer.items[i].kind === 'file') {
var file = ev.dataTransfer.items[i].getAsFile();
files.push(file)
}
}
} else {
// Use DataTransfer interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
var file = ev.dataTransfer.files[i];
files.push(file)
}
}
files.forEach(function(file){
var single_file = [file];
var file_field = add_file_field();
change_files_to_file_field(file_field,single_file);
})
window.files = files;
var target = ev.target ? ev.target : ev.srcElement;
$(target).removeClass("in");
}
function add_file_field(){
var self = $('#add_file');
var new_id = $(self).prev().attr('value');
var old_id = new RegExp("new_column_entry_files", "g");
var on = $('.language-nav li.active').index();
var le = $('#add-target').children('.start-line').length;
$(self).prev().attr('value', parseInt(new_id) + 1);
$('#add-target').prepend(("<%= escape_javascript(add_attribute 'form_file', f, :column_entry_files) %>").replace(old_id, new_id).replace("new_column_entry_file_sort_order_XXX", parseInt(new_id) + 1));
var file_field = $('#add-target').find("*").eq(0).find("[type=\"file\"]");
$('#add-target').children('.start-line').eq(le).children('.input-append').find('.tab-content').each(function() {
$(self).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
});
formTip();
return file_field;
}
$(document).ready(function() {
$(".plugin-sortable").sortable({
update : function(event, ui){
var existingfiles = $(".exist.plugin-sortable div.fileupload")
existingfiles.each(function(i, file){
$(file).find("input.file-sort-number-field").val(existingfiles.length - i);
})
}
});
$('.main-forms .add-on').tooltip();
$(document).on('click', '#add_file', add_file_field);
$(document).on('click', '.delete_file', function(){
$(this).parents('.input-prepend').remove();
});
$(document).on('click',"[type='file']",function(){
$("[name=\""+$(this).attr("name")+"\"][type=\"hiiden\"]").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();
}
});
});
</script>
<% end %>