EDIT / kanjai · Commits

Commit 4d9e33fe345e84281cfb1d697f4dfd2366b413ff

Authored by Karpikau Andrei
1 parent f3f61a5c

check error edit page

Inline Side-by-side
Showing 8 changed files with 194 additions and 98 deletions
@@ -1632,6 +1632,11 @@ jQuery(document).ready(function(){ @@ -1632,6 +1632,11 @@ jQuery(document).ready(function(){
1632 1632
1633 var galleryUrl = $this.$original_element.data('gallery-url'); 1633 var galleryUrl = $this.$original_element.data('gallery-url');
1634 1634
  1635 +
  1636 + var modalInitAction = function($modal){
  1637 +
  1638 + }
  1639 +
1635 jQuery.ajax({ 1640 jQuery.ajax({
1636 type: 'POST', 1641 type: 'POST',
1637 url: galleryUrl, 1642 url: galleryUrl,
@@ -1639,7 +1644,7 @@ jQuery(document).ready(function(){ @@ -1639,7 +1644,7 @@ jQuery(document).ready(function(){
1639 var $modal = $(data).modal({show:false, keyboard: false, backdrop: 'static'}).on('shown.bs.modal', function () { 1644 var $modal = $(data).modal({show:false, keyboard: false, backdrop: 'static'}).on('shown.bs.modal', function () {
1640 var lastInsertImageId = undefined; 1645 var lastInsertImageId = undefined;
1641 1646
1642 - $modal.find('.gallery-item').click(function(){ 1647 + $modal.on('click', '.gallery-item', function(){
1643 var img_link = $(this).attr('href'); 1648 var img_link = $(this).attr('href');
1644 var uniqueId = '_' + Math.random().toString(36).substr(2, 9); 1649 var uniqueId = '_' + Math.random().toString(36).substr(2, 9);
1645 1650
@@ -1654,8 +1659,30 @@ jQuery(document).ready(function(){ @@ -1654,8 +1659,30 @@ jQuery(document).ready(function(){
1654 1659
1655 return false; 1660 return false;
1656 }); 1661 });
  1662 + initImageDragDrop();
  1663 +
  1664 + $(window).bind('rteimages:update', function(){
  1665 + var $loader = $('.rte-images-for-choose').prev(),
  1666 + $images = $('.rte-images-for-choose');
  1667 +
  1668 + $loader.removeClass('not-visible');
  1669 + $images.html('');
  1670 +
  1671 + jQuery.ajax({
  1672 + type: 'POST',
  1673 + url: galleryUrl,
  1674 + success: function (data) {
  1675 + $('.rte-images-for-choose').replaceWith($(data).find('.rte-images-for-choose'));
  1676 + $loader.addClass('not-visible');
  1677 + $('.rte-add-image-back-btn').click();
  1678 + }
  1679 + });
  1680 +
  1681 + });
  1682 +
1657 }).on('hidden.bs.modal', function () { 1683 }).on('hidden.bs.modal', function () {
1658 $modal.remove(); 1684 $modal.remove();
  1685 + $(window).unbind('rteimages:update');
1659 }); 1686 });
1660 $modal.modal('show'); 1687 $modal.modal('show');
1661 } 1688 }
@@ -1719,6 +1746,22 @@ jQuery(document).ready(function(){ @@ -1719,6 +1746,22 @@ jQuery(document).ready(function(){
1719 return false; 1746 return false;
1720 }); 1747 });
1721 1748
  1749 + $(document).on('click', '.rte-add-image-btn', function(){
  1750 + $('.rte-add-image-back-btn').removeClass('not-visible');
  1751 + $(this).addClass('not-visible');
  1752 + $('.add-new-images').removeClass('not-visible');
  1753 + $('.rte-images-for-choose').addClass('not-visible');
  1754 + return false;
  1755 + });
  1756 + $(document).on('click', '.rte-add-image-back-btn', function(){
  1757 + $('.rte-add-image-back-btn').addClass('not-visible');
  1758 + $('.rte-add-image-btn').removeClass('not-visible');
  1759 + $('.add-new-images').addClass('not-visible');
  1760 + $('.rte-images-for-choose').removeClass('not-visible');
  1761 + return false;
  1762 + });
  1763 +
  1764 +
1722 if($('#epiceditor').length > 0){ 1765 if($('#epiceditor').length > 0){
1723 var editor = new EpicEditor().load(); 1766 var editor = new EpicEditor().load();
1724 $('.save-markdown-html').click(function(){ 1767 $('.save-markdown-html').click(function(){
@@ -1755,117 +1798,120 @@ jQuery(document).ready(function(){ @@ -1755,117 +1798,120 @@ jQuery(document).ready(function(){
1755 // DRAG and DROP file 1798 // DRAG and DROP file
1756 var available_file_type = ['image/jpeg', 'image/pjpeg', 'image/png', 'image/gif']; 1799 var available_file_type = ['image/jpeg', 'image/pjpeg', 'image/png', 'image/gif'];
1757 1800
1758 - $('.drop-down-upload').each(function(){  
1759 - var dropZone = $(this),  
1760 - $dropWrapper = dropZone.find('.drop'),  
1761 - upload_url = $dropWrapper.data('url'),  
1762 - upload_form_data = $dropWrapper.data('form-data'),  
1763 - upload_host = $dropWrapper.data('host'),  
1764 - file_index = 0;  
1765 -  
1766 -  
1767 - if (typeof(window.FileReader) == 'undefined') {  
1768 - dropZone.html("your browser don't support this function");  
1769 - }else {  
1770 - dropZone[0].ondrop = function (e) {  
1771 - e.preventDefault();  
1772 - $.each(e.dataTransfer.files, function(){  
1773 - var file = this,  
1774 - input_name = "gallery_image[" + file_index + "]",  
1775 - $fileInput = $('<div><input name="' + input_name + 'file" type="file" class="fileupload-field"></div>');  
1776 -  
1777 - file_index = file_index + 1;  
1778 -  
1779 - $fileInput.find('.fileupload-field').data('url', upload_url);  
1780 - $fileInput.find('.fileupload-field').data('form-data', upload_form_data);  
1781 - $fileInput.find('.fileupload-field').data('host', upload_host); 1801 + var initImageDragDrop = function(){
  1802 + $('.drop-down-upload').each(function(){
  1803 + var dropZone = $(this),
  1804 + $dropWrapper = dropZone.find('.drop'),
  1805 + upload_url = $dropWrapper.data('url'),
  1806 + upload_form_data = $dropWrapper.data('form-data'),
  1807 + upload_host = $dropWrapper.data('host'),
  1808 + file_index = 0;
  1809 +
  1810 +
  1811 + if (typeof(window.FileReader) == 'undefined') {
  1812 + dropZone.html("your browser don't support this function");
  1813 + }else {
  1814 + dropZone[0].ondrop = function (e) {
  1815 + e.preventDefault();
  1816 + $.each(e.dataTransfer.files, function(){
  1817 + var file = this,
  1818 + input_name = "gallery_image[" + file_index + "]",
  1819 + $fileInput = $('<div><input name="' + input_name + 'file" type="file" class="fileupload-field"></div>');
  1820 +
  1821 + file_index = file_index + 1;
  1822 +
  1823 + $fileInput.find('.fileupload-field').data('url', upload_url);
  1824 + $fileInput.find('.fileupload-field').data('form-data', upload_form_data);
  1825 + $fileInput.find('.fileupload-field').data('host', upload_host);
  1826 +
  1827 +
  1828 + $fileInput.find('.fileupload-field').data('files', [{input_name: input_name + 'file', file: file}]);
  1829 +
  1830 + var reader = new FileReader();
  1831 + reader.onload = function (evt) {
  1832 + var options = {
  1833 + showUpload:false,
  1834 + dropZoneEnabled: false,
  1835 + contentType: true,
  1836 + initialPreview: ["<img src='"+ evt.target.result +"' class='file-preview-image' alt='' title=''>"]
  1837 + };
  1838 +
  1839 + $fileInput.find('.fileupload-field').fileinput(options);
  1840 +
  1841 + $fileInput.find('.fileupload-field').on('fileclear', function(event) {
  1842 + if($(this).closest('.new-image-wrapper').length > 0){
  1843 + $(this).closest('.new-image-wrapper').remove();
  1844 + }else{
  1845 + $(this).closest('.file-input').remove();
  1846 + }
  1847 + });
1782 1848
  1849 + $fileInput.find('.fileupload-field').on('change', function(event) {
1783 1850
1784 - $fileInput.find('.fileupload-field').data('files', [{input_name: input_name + 'file', file: file}]); 1851 + });
  1852 + if($('#gallery_form form').find('.add-new-field').length > 0){
  1853 + var template = $('#gallery_form form').find('.add-new-field').data('template');
  1854 + template = template.replace(/\{name\}/g, input_name);
  1855 + var $template = $(template);
  1856 + $template.find('.fileupload-preview').html($fileInput);
  1857 + $template.find('.file-type').val(file.type);
  1858 +
  1859 + $template.find('.remove').click(function(){
  1860 + $(this).closest('.new-image-wrapper').find('.fileinput-remove').trigger('click');
  1861 + if($('#new_images .card').length == 0){
  1862 + $('#gallery_form form input:submit').addClass('not-visible');
  1863 + }
  1864 + return false;
  1865 + });
  1866 + $('#gallery_form form #new_images').append($template);
1785 1867
1786 - var reader = new FileReader();  
1787 - reader.onload = function (evt) {  
1788 - var options = {  
1789 - showUpload:false,  
1790 - dropZoneEnabled: false,  
1791 - contentType: true,  
1792 - initialPreview: ["<img src='"+ evt.target.result +"' class='file-preview-image' alt='' title=''>"]  
1793 - };  
1794 1868
1795 - $fileInput.find('.fileupload-field').fileinput(options);  
1796 1869
1797 - $fileInput.find('.fileupload-field').on('fileclear', function(event) {  
1798 - if($(this).closest('.new-image-wrapper').length > 0){  
1799 - $(this).closest('.new-image-wrapper').remove(); 1870 + $template.find("input[data-role=tagsinput]").tagsinput({
  1871 + typeaheadjs: {
  1872 + name: 'title',
  1873 + displayKey: 'title',
  1874 + valueKey: 'title',
  1875 + source: tagnames.ttAdapter()
  1876 + }
  1877 + });
1800 }else{ 1878 }else{
1801 - $(this).closest('.file-input').remove(); 1879 + $('#gallery_form form #new_images').append($fileInput);
1802 } 1880 }
1803 - });  
1804 -  
1805 - $fileInput.find('.fileupload-field').on('change', function(event) {  
1806 1881
1807 - });  
1808 - if($('#gallery_form form').find('.add-new-field').length > 0){  
1809 - var template = $('#gallery_form form').find('.add-new-field').data('template');  
1810 - template = template.replace(/\{name\}/g, input_name);  
1811 - var $template = $(template);  
1812 - $template.find('.fileupload-preview').html($fileInput);  
1813 - $template.find('.file-type').val(file.type);  
1814 -  
1815 - $template.find('.remove').click(function(){  
1816 - $(this).closest('.new-image-wrapper').find('.fileinput-remove').trigger('click');  
1817 - if($('#new_images .card').length == 0){  
1818 - $('#gallery_form form input:submit').addClass('not-visible');  
1819 - }  
1820 - return false;  
1821 - });  
1822 - $('#gallery_form form #new_images').append($template); 1882 + $('#gallery_form form input:submit').removeClass('not-visible');
1823 1883
  1884 + clearAjaxFileUpload($('#gallery_form'));
  1885 + initAjaxFileUpload($('#gallery_form'));
1824 1886
1825 -  
1826 - $template.find("input[data-role=tagsinput]").tagsinput({  
1827 - typeaheadjs: {  
1828 - name: 'title',  
1829 - displayKey: 'title',  
1830 - valueKey: 'title',  
1831 - source: tagnames.ttAdapter()  
1832 - }  
1833 - });  
1834 - }else{  
1835 - $('#gallery_form form #new_images').append($fileInput);  
1836 - }  
1837 -  
1838 - $('#gallery_form form input:submit').removeClass('not-visible');  
1839 -  
1840 - clearAjaxFileUpload($('#gallery_form'));  
1841 - initAjaxFileUpload($('#gallery_form'));  
1842 -  
1843 - };  
1844 - reader.readAsDataURL(file);  
1845 - }); 1887 + };
  1888 + reader.readAsDataURL(file);
  1889 + });
1846 1890
1847 1891
1848 1892
1849 1893
1850 - }; 1894 + };
1851 1895
1852 - dropZone[0].ondragover = function (e) {  
1853 - e.preventDefault(); 1896 + dropZone[0].ondragover = function (e) {
  1897 + e.preventDefault();
1854 1898
1855 - var dataTransfer = e.dataTransfer;  
1856 - dataTransfer.dropEffect = 'copy';  
1857 - //dropZone.addClass('over');  
1858 - }; 1899 + var dataTransfer = e.dataTransfer;
  1900 + dataTransfer.dropEffect = 'copy';
  1901 + //dropZone.addClass('over');
  1902 + };
1859 1903
1860 - dropZone[0].ondragleave = function (e) {  
1861 - e.preventDefault(); 1904 + dropZone[0].ondragleave = function (e) {
  1905 + e.preventDefault();
1862 1906
1863 - //dropZone.removeClass('over');  
1864 - }; 1907 + //dropZone.removeClass('over');
  1908 + };
1865 1909
1866 - } 1910 + }
1867 1911
1868 - }); 1912 + });
  1913 + }
  1914 + initImageDragDrop();
1869 1915
1870 $(document).on('click','.delete-file', function(){ 1916 $(document).on('click','.delete-file', function(){
1871 var $this = $(this), 1917 var $this = $(this),
@@ -25,6 +25,7 @@ jQuery(document).ready(function(){ @@ -25,6 +25,7 @@ jQuery(document).ready(function(){
25 }); 25 });
26 }; 26 };
27 27
  28 +
28 if($('.image-list').length > 0){ 29 if($('.image-list').length > 0){
29 var $wrapper = $('.image-list'); 30 var $wrapper = $('.image-list');
30 loadImage($wrapper); 31 loadImage($wrapper);
@@ -50,4 +51,5 @@ jQuery(document).ready(function(){ @@ -50,4 +51,5 @@ jQuery(document).ready(function(){
50 loadImage($('.image-list')); 51 loadImage($('.image-list'));
51 }; 52 };
52 }); 53 });
  54 +
53 }); 55 });
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] 4 + before_action :generate_s3_options, only: [:index, :edit, :get_gallery]
5 5
6 def index 6 def index
7 7
@@ -18,7 +18,7 @@ module Kanjai @@ -18,7 +18,7 @@ module Kanjai
18 has_many :page_data, dependent: :destroy 18 has_many :page_data, dependent: :destroy
19 accepts_nested_attributes_for :page_data 19 accepts_nested_attributes_for :page_data
20 20
21 - validates :title, presence: true 21 + validates :title, presence: true, :if => lambda { |o| o.new_record? }
22 22
23 #serialize :template_content, Array 23 #serialize :template_content, Array
24 24
1 <div class="modal" id="myModal"> 1 <div class="modal" id="myModal">
2 - <div class="modal-dialog modal-lg"> 2 + <div class="modal-dialog modal-lg modal-dialog-scrollable">
3 <div class="modal-content"> 3 <div class="modal-content">
4 4
5 <!-- Modal Header --> 5 <!-- Modal Header -->
@@ -10,7 +10,49 @@ @@ -10,7 +10,49 @@
10 10
11 <!-- Modal body --> 11 <!-- Modal body -->
12 <div class="modal-body"> 12 <div class="modal-body">
13 - <div class="card-columns"> 13 + <div class="text-right">
  14 + <%= link_to t('actions.add_more_images'), '#', class: 'btn btn-info rte-add-image-btn' %>
  15 + <%= link_to t('actions.back_to_choose_image'), '#', 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">
14 <% @collection.each do |item| %> 56 <% @collection.each do |item| %>
15 <a href="<%= item.image_link %>" class="gallery-item"> 57 <a href="<%= item.image_link %>" class="gallery-item">
16 <div class="card mb-4" > 58 <div class="card mb-4" >
1 -$(window).trigger('images:update'); 1 +<% if(params[:rte].to_i == 1) %>
  2 + $(window).trigger('rteimages:update');
  3 +<% else %>
  4 + $(window).trigger('images:update');
  5 +<% end %>
2 $('#gallery_form form #new_images').html(''); 6 $('#gallery_form form #new_images').html('');
3 $('#gallery_form form input:submit').addClass('not-visible'); 7 $('#gallery_form form input:submit').addClass('not-visible');
@@ -115,6 +115,8 @@ en: @@ -115,6 +115,8 @@ en:
115 edit_with_lang: "Edit %{lang}" 115 edit_with_lang: "Edit %{lang}"
116 duplicate: "Duplicate" 116 duplicate: "Duplicate"
117 copy: "Copy" 117 copy: "Copy"
  118 + add_more_images: "Add More Images"
  119 + back_to_choose_image: "Back to choose image"
118 120
119 admin: 121 admin:
120 page_structure: 122 page_structure:
1 module Kanjai 1 module Kanjai
2 - VERSION = "0.0.156" 2 + VERSION = "0.0.157"
3 end 3 end