EDIT / kanjai · Commits

Commit 3b92320019445330a9eb8da3e32ea1c3fea9f339

Authored by Karpikau Andrei
1 parent 56ebd105

add choose and remove file buttons for content type

Inline Side-by-side
Showing 6 changed files with 192 additions and 18 deletions
@@ -1616,8 +1616,91 @@ var tagnames = new Bloodhound({ @@ -1616,8 +1616,91 @@ var tagnames = new Bloodhound({
1616 tagnames.initialize(); 1616 tagnames.initialize();
1617 1617
1618 1618
  1619 +
1619 jQuery(document).ready(function(){ 1620 jQuery(document).ready(function(){
1620 1621
  1622 + var chooseImageLayer = function(galleryUrl, callback){
  1623 + jQuery.ajax({
  1624 + type: 'POST',
  1625 + url: galleryUrl,
  1626 + success: function (data) {
  1627 + var $modal = $(data).modal({show:false, keyboard: false, backdrop: 'static'}).on('shown.bs.modal', function () {
  1628 + var lastInsertImageId = undefined;
  1629 +
  1630 + $modal.on('click', '.gallery-item', function(){
  1631 + var img_link = $(this).attr('href');
  1632 + var uniqueId = '_' + Math.random().toString(36).substr(2, 9);
  1633 +
  1634 + callback(img_link, $(this).data('type'));
  1635 +
  1636 + lastInsertImageId = uniqueId;
  1637 + $modal.modal('hide');
  1638 +
  1639 + return false;
  1640 + });
  1641 + initImageDragDrop();
  1642 +
  1643 + $(window).bind('rteimages:update', function(){
  1644 + var $loader = $('.rte-images-for-choose').prev(),
  1645 + $images = $('.rte-images-for-choose');
  1646 +
  1647 + $loader.removeClass('not-visible');
  1648 + $images.html('');
  1649 +
  1650 + jQuery.ajax({
  1651 + type: 'POST',
  1652 + url: galleryUrl,
  1653 + success: function (data) {
  1654 + $('.rte-images-for-choose').replaceWith($(data).find('.rte-images-for-choose'));
  1655 + $loader.addClass('not-visible');
  1656 + $('.rte-add-image-back-btn').click();
  1657 + }
  1658 + });
  1659 +
  1660 + });
  1661 +
  1662 + }).on('hidden.bs.modal', function () {
  1663 + $modal.remove();
  1664 + $(window).unbind('rteimages:update');
  1665 + });
  1666 + $modal.modal('show');
  1667 + }
  1668 + });
  1669 + }
  1670 +
  1671 + $(document).on('click', '.content-choose-image', function(){
  1672 + var $this = $(this),
  1673 + $previewWrapper = $this.closest('.btn-group').next();
  1674 + chooseImageLayer($this.attr('href'), function(img_link, file_type){
  1675 + $this.closest('.btn-group').prev().val(img_link);
  1676 + if(file_type == 'image'){
  1677 + var $preview = $('<div class="image-preview-block without-border">' +
  1678 + '<div class="image-preview">' +
  1679 + '<img src="'+img_link +'" alt="preview" />' +
  1680 + '</div>' +
  1681 + '</div>');
  1682 + }else{
  1683 + var $preview = $('<a href="'+img_link +'">file</a>');
  1684 + }
  1685 + $previewWrapper.html($preview);
  1686 + $this.closest('.btn-group').find('.content-remove-image').removeClass('not-visible');
  1687 +
  1688 + });
  1689 + return false;
  1690 + });
  1691 +
  1692 + $(document).on('click', '.content-remove-image', function(){
  1693 + var $this = $(this),
  1694 + $previewWrapper = $this.closest('.btn-group').next();
  1695 +
  1696 + $this.closest('.btn-group').prev().val('');
  1697 + $previewWrapper.html('');
  1698 +
  1699 + $(this).addClass('not-visible');
  1700 +
  1701 + return false;
  1702 + });
  1703 +
1621 1704
1622 $.FroalaEditor.DEFAULTS.key = 'kKC1KXDF1INBh1KPe2TK=='; 1705 $.FroalaEditor.DEFAULTS.key = 'kKC1KXDF1INBh1KPe2TK==';
1623 1706
@@ -1633,10 +1716,6 @@ jQuery(document).ready(function(){ @@ -1633,10 +1716,6 @@ jQuery(document).ready(function(){
1633 var galleryUrl = $this.$original_element.data('gallery-url'); 1716 var galleryUrl = $this.$original_element.data('gallery-url');
1634 1717
1635 1718
1636 - var modalInitAction = function($modal){  
1637 -  
1638 - }  
1639 -  
1640 jQuery.ajax({ 1719 jQuery.ajax({
1641 type: 'POST', 1720 type: 'POST',
1642 url: galleryUrl, 1721 url: galleryUrl,
1 module Kanjai 1 module Kanjai
2 class Admin::ImagesController < AdminController 2 class Admin::ImagesController < AdminController
3 3
4 - before_action :generate_s3_options, only: [:index, :edit, :get_gallery] 4 + before_action :generate_s3_options, only: [:index, :edit, :get_gallery, :get_files]
5 5
6 def index 6 def index
7 7
@@ -64,6 +64,12 @@ module Kanjai @@ -64,6 +64,12 @@ module Kanjai
64 render :layout => false 64 render :layout => false
65 end 65 end
66 66
  67 + def get_files
  68 + @collection = Kanjai::Image.all
  69 +
  70 + render :layout => false
  71 + end
  72 +
67 private 73 private
68 74
69 def generate_s3_options 75 def generate_s3_options
  1 +<div class="modal" id="myModal">
  2 + <div class="modal-dialog modal-lg modal-dialog-scrollable">
  3 + <div class="modal-content">
  4 +
  5 + <!-- Modal Header -->
  6 + <div class="modal-header">
  7 + <h4 class="modal-title"><%= t('choose_files') %></h4>
  8 + <button type="button" class="close" data-dismiss="modal">&times;</button>
  9 + </div>
  10 +
  11 + <!-- Modal body -->
  12 + <div class="modal-body">
  13 + <div class="text-right mb-20">
  14 + <%= link_to t('actions.add_more_files'), '#', class: 'btn btn-info rte-add-image-btn' %>
  15 + <%= link_to t('actions.back_to_choose_file'), '#', class: 'btn btn-info rte-add-image-back-btn not-visible' %>
  16 + </div>
  17 +
  18 + <div class="add-new-images not-visible ">
  19 + <div class="drop-down-upload">
  20 + <div style="padding:10px;">
  21 + <div class="drop" data-url="<%= @s3_direct_post.url %>" data-form-data="<%= @s3_direct_post.fields.to_json %>" data-host="<%= URI.parse(@s3_direct_post.url).host %>" >
  22 + <%= t('drop_your_file') %>
  23 + <div class="dropped-file-list row"></div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 +
  28 + <div id="gallery_form">
  29 + <form action="<%= update_gallery_admin_images_url(rte: 1) %>" class="ajax-file-upload-form">
  30 + <div id="new_images">
  31 +
  32 + </div>
  33 + <div class="text-center">
  34 + <%= link_to 'Add More', '#', class: 'btn btn-primary add-new-field not-visible', data: {template: render(partial: 'kanjai/admin/images/image_field')} %>
  35 + </div>
  36 + <div class="text-right">
  37 + <input type="submit" value="<%= t('actions.upload') %>" class="btn btn-primary not-visible" />
  38 + </div>
  39 + </form>
  40 + </div>
  41 + </div>
  42 + <div class="loader-demo not-visible">
  43 + <div class="ball-grid-pulse">
  44 + <div></div>
  45 + <div></div>
  46 + <div></div>
  47 + <div></div>
  48 + <div></div>
  49 + <div></div>
  50 + <div></div>
  51 + <div></div>
  52 + <div></div>
  53 + </div>
  54 + </div>
  55 + <div class="card-columns rte-images-for-choose">
  56 + <% @collection.each do |item| %>
  57 + <a href="<%= item.image_link %>" class="gallery-item" data-type="<%= Kanjai::Image::IMAGE_MIME_TYPE.include?(item.file_type) ? 'image' : 'other' %>">
  58 + <div class="card mb-4" >
  59 + <% if Kanjai::Image::IMAGE_MIME_TYPE.include?(item.file_type) %>
  60 + <%= image_tag item.preview_link, class: 'card-img-top img-fluid', alt: '' %>
  61 + <% else %>
  62 + <div class="text-center image-preview-in-list">
  63 + <% if Kanjai::Image::PDF_MIME_TYPE.include?(item.file_type) %>
  64 + <em class="fa-5x far fa-file-pdf text-primary"></em>
  65 + <% else %>
  66 + <em class="fa-5x far fa-file text-primary"></em>
  67 + <% end %>
  68 + <h4 class="card-title"><%= item.title %></h4>
  69 + </div>
  70 + <% end %>
  71 +
  72 +
  73 +
  74 + </div>
  75 + </a>
  76 + <% end %>
  77 + </div>
  78 + </div>
  79 +
  80 + </div>
  81 + </div>
  82 +</div>
@@ -9,10 +9,13 @@ @@ -9,10 +9,13 @@
9 <%= form2.text_area :text_value, :class => "form-control page_html_content" %> 9 <%= form2.text_area :text_value, :class => "form-control page_html_content" %>
10 <% end %> 10 <% end %>
11 <% if form2.object.get_marker_type(@type_content) == 'file' %> 11 <% if form2.object.get_marker_type(@type_content) == 'file' %>
12 - <% s3_direct_post = S3_BUCKET.presigned_post(key: "#{form2.object.get_file_path}${filename}", success_action_status: '201', acl: 'public-read') %>  
13 - <%= form2.file_field :text_value, :class => "fileupload-field", 'data-url' => s3_direct_post.url, 'data-form-data' => s3_direct_post.fields.to_json, 'data-host' => URI.parse(s3_direct_post.url).host , 'data-type' => 'zip' %>  
14 - <% if form2.object.text_value.present? %>  
15 - <div class="preview"> 12 + <%= form2.hidden_field :text_value %>
  13 + <div class="btn-group">
  14 + <%= link_to 'Choose Image', get_files_admin_images_url, class: 'btn btn-primary content-choose-image' %>
  15 + <%= link_to 'Remove Image', get_files_admin_images_url, class: "btn btn-danger content-remove-image #{form2.object.text_value.present? ? '' : 'not-visible'}" %>
  16 + </div>
  17 + <div class="preview">
  18 + <% if form2.object.text_value.present? %>
16 <% if Kanjai::PageContentMarker.image?(form2.object.text_value) %> 19 <% if Kanjai::PageContentMarker.image?(form2.object.text_value) %>
17 <div class="image-preview-block without-border"> 20 <div class="image-preview-block without-border">
18 <div class="image-preview"> 21 <div class="image-preview">
@@ -22,8 +25,8 @@ @@ -22,8 +25,8 @@
22 <% else %> 25 <% else %>
23 <%= link_to 'file', form2.object.text_value %> 26 <%= link_to 'file', form2.object.text_value %>
24 <% end %> 27 <% end %>
25 - </div>  
26 - <% end %> 28 + <% end %>
  29 + </div>
27 <% end %> 30 <% end %>
28 <% if form2.object.get_marker_type(@type_content) == 'form' %> 31 <% if form2.object.get_marker_type(@type_content) == 'form' %>
29 <div> 32 <div>
@@ -103,10 +106,13 @@ @@ -103,10 +106,13 @@
103 <%= form2.text_area :text_value, :class => "form-control page_html_content" %> 106 <%= form2.text_area :text_value, :class => "form-control page_html_content" %>
104 <% end %> 107 <% end %>
105 <% if form2.object.get_marker_type(@type_content) == 'file' %> 108 <% if form2.object.get_marker_type(@type_content) == 'file' %>
106 - <% s3_direct_post = S3_BUCKET.presigned_post(key: "#{form2.object.get_file_path}${filename}", success_action_status: '201', acl: 'public-read') %>  
107 - <%= form2.file_field :text_value, :class => "fileupload-field", 'data-url' => s3_direct_post.url, 'data-form-data' => s3_direct_post.fields.to_json, 'data-host' => URI.parse(s3_direct_post.url).host , 'data-type' => 'zip' %>  
108 - <% if form2.object.text_value.present? %>  
109 - <div class="preview"> 109 + <%= form2.hidden_field :text_value %>
  110 + <div class="btn-group">
  111 + <%= link_to 'Choose Image', get_files_admin_images_url, class: 'btn btn-primary content-choose-image' %>
  112 + <%= link_to 'Remove Image', get_files_admin_images_url, class: "btn btn-danger content-remove-image #{form2.object.text_value.present? ? '' : 'not-visible'}" %>
  113 + </div>
  114 + <div class="preview">
  115 + <% if form2.object.text_value.present? %>
110 <% if Kanjai::PageContentMarker.image?(form2.object.text_value) %> 116 <% if Kanjai::PageContentMarker.image?(form2.object.text_value) %>
111 <div class="image-preview-block without-border"> 117 <div class="image-preview-block without-border">
112 <div class="image-preview"> 118 <div class="image-preview">
@@ -116,8 +122,8 @@ @@ -116,8 +122,8 @@
116 <% else %> 122 <% else %>
117 <%= link_to 'file', form2.object.text_value %> 123 <%= link_to 'file', form2.object.text_value %>
118 <% end %> 124 <% end %>
119 - </div>  
120 - <% end %> 125 + <% end %>
  126 + </div>
121 <% end %> 127 <% end %>
122 128
123 </div> 129 </div>
@@ -58,6 +58,7 @@ Kanjai::Engine.routes.draw do @@ -58,6 +58,7 @@ Kanjai::Engine.routes.draw do
58 get :delete_gallery_image, on: :member 58 get :delete_gallery_image, on: :member
59 59
60 post :get_gallery, on: :collection 60 post :get_gallery, on: :collection
  61 + post :get_files, on: :collection
61 post :list, on: :collection 62 post :list, on: :collection
62 end 63 end
63 64
1 module Kanjai 1 module Kanjai
2 - VERSION = "0.0.162" 2 + VERSION = "0.0.163"
3 end 3 end