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 1632
1633 1633 var galleryUrl = $this.$original_element.data('gallery-url');
1634 1634
  1635 +
  1636 + var modalInitAction = function($modal){
  1637 +
  1638 + }
  1639 +
1635 1640 jQuery.ajax({
1636 1641 type: 'POST',
1637 1642 url: galleryUrl,
... ... @@ -1639,7 +1644,7 @@ jQuery(document).ready(function(){
1639 1644 var $modal = $(data).modal({show:false, keyboard: false, backdrop: 'static'}).on('shown.bs.modal', function () {
1640 1645 var lastInsertImageId = undefined;
1641 1646
1642   - $modal.find('.gallery-item').click(function(){
  1647 + $modal.on('click', '.gallery-item', function(){
1643 1648 var img_link = $(this).attr('href');
1644 1649 var uniqueId = '_' + Math.random().toString(36).substr(2, 9);
1645 1650
... ... @@ -1654,8 +1659,30 @@ jQuery(document).ready(function(){
1654 1659
1655 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 1683 }).on('hidden.bs.modal', function () {
1658 1684 $modal.remove();
  1685 + $(window).unbind('rteimages:update');
1659 1686 });
1660 1687 $modal.modal('show');
1661 1688 }
... ... @@ -1719,6 +1746,22 @@ jQuery(document).ready(function(){
1719 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 1765 if($('#epiceditor').length > 0){
1723 1766 var editor = new EpicEditor().load();
1724 1767 $('.save-markdown-html').click(function(){
... ... @@ -1755,117 +1798,120 @@ jQuery(document).ready(function(){
1755 1798 // DRAG and DROP file
1756 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 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 1916 $(document).on('click','.delete-file', function(){
1871 1917 var $this = $(this),
... ...
... ... @@ -25,6 +25,7 @@ jQuery(document).ready(function(){
25 25 });
26 26 };
27 27
  28 +
28 29 if($('.image-list').length > 0){
29 30 var $wrapper = $('.image-list');
30 31 loadImage($wrapper);
... ... @@ -50,4 +51,5 @@ jQuery(document).ready(function(){
50 51 loadImage($('.image-list'));
51 52 };
52 53 });
  54 +
53 55 });
\ No newline at end of file
... ...
1 1 module Kanjai
2 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 6 def index
7 7
... ...
... ... @@ -18,7 +18,7 @@ module Kanjai
18 18 has_many :page_data, dependent: :destroy
19 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 23 #serialize :template_content, Array
24 24
... ...
1 1 <div class="modal" id="myModal">
2   - <div class="modal-dialog modal-lg">
  2 + <div class="modal-dialog modal-lg modal-dialog-scrollable">
3 3 <div class="modal-content">
4 4
5 5 <!-- Modal Header -->
... ... @@ -10,7 +10,49 @@
10 10
11 11 <!-- Modal body -->
12 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 56 <% @collection.each do |item| %>
15 57 <a href="<%= item.image_link %>" class="gallery-item">
16 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 6 $('#gallery_form form #new_images').html('');
3 7 $('#gallery_form form input:submit').addClass('not-visible');
... ...
... ... @@ -115,6 +115,8 @@ en:
115 115 edit_with_lang: "Edit %{lang}"
116 116 duplicate: "Duplicate"
117 117 copy: "Copy"
  118 + add_more_images: "Add More Images"
  119 + back_to_choose_image: "Back to choose image"
118 120
119 121 admin:
120 122 page_structure:
... ...
1 1 module Kanjai
2   - VERSION = "0.0.156"
  2 + VERSION = "0.0.157"
3 3 end
... ...