Improve image editor behaviour [SCI-2855]

app/assets/javascripts/sitewide/file_preview.js.erb

@@ -1,3 +1,6 @@
+
+//= require assets
+
 (function(global) {
   'use strict';
 
@@ -15,6 +18,7 @@
     });
   }
 
+
    function initImageEditor(data) {
     // var ImageEditor = require('tui-image-editor');
     var blackTheme = {
@@ -103,12 +107,13 @@
     var imageEditor = new tui.ImageEditor('#tui-image-editor', {
       includeUI: {
         loadImage: {
-          path: data['large-preview-url'],
-          name: 'SampleImage'
+          // path: data['large-preview-url'],
+          path: data['download-url'],
+          name: data.filename
         },
         theme: blackTheme, // or whiteTheme
-        // menu: ['shape', 'filter'],
-        initMenu: 'filter',
+        menu: ['draw', 'text', 'shape', 'crop', 'flip', 'icon', 'filter'],
+        initMenu: 'draw',
         menuBarPosition: 'bottom'
       },
       cssMaxWidth: 700,
@@ -120,17 +125,30 @@
       usageStatistics: false
     });
 
-    $('.file-save-link').click(function(ev) {
+    $('#fileEditModal').find('.file-name').text('Editing: ' + data.filename);
+    $('#fileEditModal').modal('show');
+
+    $('.tui-image-editor-header').hide();
+
+    $('.file-save-link').off().click(function(ev) {
       ev.preventDefault();
       ev.stopPropagation();
+      animateSpinner(null, true);
       $.ajax({
         type: 'POST',
         url: '/files/' + data.id + '/update_image',
         data: {
           image: imageEditor.toDataURL()
+        },
+        success: function(res) {
+          $('#modal_link' + data.id).parent().html(res.html);
+          setupAssetsLoading();
         }
       }).done(function() {
-        console.log('saved');
+        animateSpinner(null, false);
+        imageEditor.clearObjects();
+        $('#tui-image-editor').html('');
+        $('#fileEditModal').modal('hide');
       });
     });
 
@@ -161,13 +179,18 @@
           } else {
             animateSpinner('.file-preview-container', false);
             modal.find('.file-preview-container')
-                 .append($('<img>')
-                   .attr('src', data['large-preview-url'])
-                   .attr('alt', name)
-                   .click(function(ev) {
-                     ev.stopPropagation();
-                   })
-                 );
+              .append($('<img>')
+                .attr('src', data['large-preview-url'])
+                .attr('alt', name)
+                .click(function(ev) {
+                  ev.stopPropagation();
+                }));
+            modal.find('.file-edit-link').off().click(function(ev) {
+              ev.preventDefault();
+              ev.stopPropagation();
+              modal.modal('hide');
+              initImageEditor(data);
+            });
           }
         } else {
           modal.find('.file-preview-container').html(data['preview-icon']);

app/assets/stylesheets/themes/scinote.scss

@@ -1519,6 +1519,61 @@ table.dataTable {
     margin-right: 20px;
   }
 
+  .file-edit-link {
+    color: $color-white;
+    display: inline-block;
+    float: right;
+    margin-right: 20px;
+  }
+}
+
+// Image edit modal
+.modal-file-edit {
+  background: transparent;
+  font-size: $font-size-large;
+  padding: 0 !important;
+
+  .preview-close {
+    background: transparent;
+    border: 0;
+    color: $color-white;
+    display: inline-block;
+    float: right;
+  }
+
+  .modal-dialog {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: auto;
+  }
+
+  .modal-content {
+    background: transparent;
+    border: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: $color-white;
+    height: 100%;
+    width: auto;
+  }
+
+  .modal-header {
+    background: $color-black;
+    border: 0;
+    height: 60px;
+    text-align: center;
+
+    .file-name {
+      float: left;
+    }
+  }
+
+  .modal-body {
+    height: calc(100% - 60px);
+    padding: 0;
+  }
+
   .file-save-link {
     color: $color-white;
     display: inline-block;

app/controllers/assets_controller.rb

@@ -153,6 +153,18 @@ class AssetsController < ApplicationController
     @asset.save!
     # Post process file here
     @asset.post_process_file(@asset.team)
+
+    respond_to do |format|
+      format.json do
+        render json: {
+          html: render_to_string(
+            partial: 'shared/asset_link',
+            locals: { asset: @asset, display_image_tag: true },
+            formats: :html
+          )
+        }
+      end
+    end
   end
 
   private

app/views/layouts/application.html.erb

@@ -22,9 +22,10 @@
     <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.3.0/tui-code-snippet.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
     <script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.color-picker/v2.2.0/dist/tui-color-picker.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.0/tui-color-picker.css">
 
-    <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/v3.2.0/tui-image-editor.css">
-    <script src="https://uicdn.toast.com/tui-image-editor/v3.2.0/tui-image-editor.js"></script>
+    <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/v3.2.2/tui-image-editor.css">
+    <script src="https://uicdn.toast.com/tui-image-editor/v3.2.2/tui-image-editor.js"></script>
   </head>
   <body
     class="<%= yield :body_class %>"
@@ -47,6 +48,7 @@
     <!-- About us modal -->
     <%= render "shared/about_modal" %>
     <%= render "shared/file_preview_modal.html.erb" %>
+    <%= render "shared/file_edit_modal.html.erb" %>
     <%= render "shared/navigation" %>
     
     <% if user_signed_in? && flash[:system_notification_modal] && current_user.show_login_system_notification? %>

app/views/shared/_file_edit_modal.html.erb

@@ -0,0 +1,24 @@
+<div id="fileEditModal"
+     class="modal modal-file-edit"
+     role="dialog"
+     tabindex="-1"
+     aria-labelledby="fileEditModal"
+     aria-hidden="true"
+     data-backdrop="static"
+     data-keyboard="false">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="preview-close" data-dismiss="modal"><span class="fas fa-times"></span></button>
+        <span class="file-name"></span>
+        <a class="file-save-link" href='#'>
+          <p><span class="fas fa-save"></span> <%= t('SaveClose')%></p>
+        </a>
+      </div>
+      <div class="modal-body">
+        <div id="tui-image-editor">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/shared/_file_preview_modal.html.erb

@@ -15,12 +15,12 @@
         <a class="file-download-link" href="#" data-turbolinks="false">
           <p><span class="fas fa-download"></span> <%= t('Download')%></p>
         </a>
-        <a class="file-save-link" href='#'>
-          <p><span class="fas fa-save"></span> <%= t('Save')%></p>
+        <a class="file-edit-link" href='#'>
+          <p><span class="fas fa-pencil-alt"></span> <%= t('Edit')%></p>
         </a>
       </div>
       <div class="modal-body">
-        <div id="tui-image-editor" class="file-preview-container">
+        <div class="file-preview-container">
         </div>
       </div>
       <div class="modal-footer">

config/locales/en.yml

@@ -2061,7 +2061,9 @@ en:
   Asset: "File"
   Assets: "Files"
   Download: "Download"
+  Edit: "Edit"
   Save: "Save"
+  SaveClose: "Save & Close"
   Module: "Task"
   Modules: "Tasks"
   Project: "Project"