register_modules/app/views/admin/admin_modules/uploadfiles.html.erb

282 lines
8.8 KiB
Plaintext
Raw Normal View History

<% content_for :page_specific_css do %>
<%= stylesheet_link_tag "lib/main-forms" %>
<%= stylesheet_link_tag "lib/main-list" %>
<%= stylesheet_link_tag "lib/dropzone" %>
<%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
<%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" %>
<% end %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/dropzone" %>
<%= 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 %>
<style>
.message{
float: right;
text-align: center;
width: 125px;
padding: 25px;
background-color: #7a7a7a;
color: #fff;
font-size: 18px;
border-radius: 50px 0 0 50px;
}
.message .upload-text{
margin-left: 5px;
}
.group-clear-4{
display: inline-block;
margin-bottom: 20px;
}
.group-clear-4 .group-item{
display: inline-block;
}
.group-clear-4 img{
width: 150px;
}
</style>
<%= form_for @rm, url: admin_admin_module_path(@rm.id), html: {class: "form-horizontal main-forms previewable", id: "module_edit_form"} do |f| %>
<fieldset>
<div class="message hide">
<i class="fa fa-refresh fa-spin"></i>
<span class="upload-text">Uploading...</span>
</div>
<!-- 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>
<li><a href="#tag" data-toggle="tab"><%= t(:tags) %></a></li>
<li><a href="#upload" data-toggle="tab"><%= t(:images) %></a></li>
</ul>
<!-- Module -->
<div class="tab-content module-area">
<!-- Basic Module -->
<div class="tab-pane fade in active" id="basic">
<!-- Category -->
<div class="control-group">
<label class="control-label muted"><%= t(:category) %></label>
<div class="controls">
<%= select_category(f, @module_app) %>
</div>
</div>
<!-- Git Path -->
<div class="control-group">
2018-02-05 09:47:52 +00:00
<%= f.label :git_path, t("register_module.git_path"), :class => "control-label muted" %>
<div class="controls col-5">
<%= f.text_field :git_path, :class => "input-xxlarge" %>
</div>
</div>
2018-02-05 09:47:52 +00:00
<!-- icon class -->
<div class="control-group">
<%= f.label :icon_class, t("register_module.icon_class"), :class => "control-label muted" %>
<div class="controls col-5">
<%= f.text_field :icon_class %>
</div>
</div>
<!-- display in frontend -->
<div class="control-group">
<%= f.label :display_in_frontend, t("register_module.display_in_frontend"), :class => "control-label muted" %>
<div class="controls col-5">
<%= f.check_box :display_in_frontend %>
</div>
</div>
</div>
<!-- Tag Module -->
<div class="tab-pane fade" id="tag">
<div class="control-group">
<label class="control-label muted"><%= t(:tags) %></label>
<%= select_tags(f, @module_app) %>
</div>
</div>
<div class="tab-pane fade" id="upload">
<div class="control-group">
<label class="control-label muted"><%= t(:images) %></label>
<div class="controls">
<div class="group group-clear-4 clearfix">
<% @rm.module_show_files.each do |image| %>
<div class="group-item col-md-3">
<div class="group-item-inner">
<img class="group-img" src="<%= image.image.thumb.url %>">
<div class="group-actions">
<label class="group-label" for="image_<%= image.id.to_s %>">
<input class="group-checkbox" id="image_<%= image.id.to_s %>" type="checkbox" name="images_to_destroy[]" value="<%= image.id.to_s %>" />
Delete Image
</label>
</div>
</div>
</div>
<% end %>
</div>
<div class="dropzone dropzone-pool" id="module-files">
<div class="dropzone-previews" id="module-files-container"></div>
</div>
<button class="remove_image_btn btn btn-warning">
<i class="fa fa-ban"></i>
<span>Remove all images</span>
</button>
</div>
<div id="image_ids">
</div>
</div>
</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" : '' %>">
2018-02-05 09:47:52 +00:00
<!-- title -->
<div class="control-group input-content">
<label class="control-label muted"><%= t(:title) %></label>
<div class="controls">
<div class="textarea">
<%= f.fields_for :name_translations do |f| %>
<%= f.text_field locale, rows: 5, class: "input-block-level", :value => (@rm.name_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="textarea">
<%= f.fields_for :description_translations do |f| %>
<%= f.cktext_area locale, rows: 5, class: "input-block-level", :value => (@rm.description_translations[locale] rescue nil) %>
<% end %>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
<div class="form-actions">
<%= f.submit t('submit'), class: 'btn btn-primary', :id => "module-form-btn" %>
</div>
</fieldset>
<% end %>
<script>
Dropzone.autoDiscover = false;
var image_id_panel = $("#image_ids"),
total_images = 0;
var subUnitImageDropzone = new Dropzone("div#module-files", {
url : "/admin/admin_modules/upload_module_image",
previewsContainer : "#module-files-container",
paramName : "module_show_file[image]",
clickable : true,
autoProcessQueue : false,
maxFilesize : 2,
addRemoveLinks : true,
uploadMultiple : false,
accept: function(file, done) {
var regex = new RegExp(/(\.|\/)(gif|jpe?g|png)$/i)
if(regex.test(file.name)){
total_images++;
done();
}else{
this.removeFile(file);
}
}
})
$(".remove_image_btn").on("click",function(){
subUnitImageDropzone.removeAllFiles();
return false;
})
subUnitImageDropzone.on("success",function(file,data){
image_id_panel.append("<input type='hidden' name='registered_module[module_show_files][]' value='" + data.id + "' />");
total_images--;
if(total_images == 0){
submitForm();
}
})
subUnitImageDropzone.on("sending",function(file,xhr,obj){
obj.append("authenticity_token",$("form#module_edit_form input[name=authenticity_token]").val());
})
var doImagesUpload = function(){
subUnitImageDropzone.processQueue();
subUnitImageDropzone.on("complete", function(file) {
var filesCount = subUnitImageDropzone.getQueuedFiles().length;
if(filesCount > 0){
doImagesUpload();
}
});
}
$("#module-form-btn").on("click",function(){
if(subUnitImageDropzone.getQueuedFiles().length > 0){
doImagesUpload();
}else{
submitForm();
}
// uploading all the files
$(".message")
.removeClass("hide")
.addClass("animated slideInRight");
return false;
})
var submitForm = function(){
if(subUnitImageDropzone.getQueuedFiles().length > 0){
return false;
}else{
$(".upload-status-notice span.upload-text").text("Submitting");
$("form#module_edit_form").submit();
return false;
}
}
function equalHeight(items) {
if (typeof items === 'string' && items.length > 0) {
var $items = $(items);
var $this = null;
var maxHeight = -1;
// when images are loaded
$items.find('img').load(function() {
console.log('g')
$.each($items, function(i, val) {
$this = $(this);
if ($this.outerHeight() > maxHeight) {
maxHeight = $this.outerHeight();
}
console.log($this)
}).css('min-height', maxHeight + 'px');
});
}
}
equalHeight('.group-item-inner');
</script>