diff --git a/app/assets/javascripts/sitewide/marvinjs_editor.js b/app/assets/javascripts/sitewide/marvinjs_editor.js index d498c21ee..5e747c9ec 100644 --- a/app/assets/javascripts/sitewide/marvinjs_editor.js +++ b/app/assets/javascripts/sitewide/marvinjs_editor.js @@ -25,6 +25,13 @@ var MarvinJsEditor = (function() { sketcherInstance.importStructure("mrv",config.data) sketchName.val(config.name) }) + }else if (config.mode === 'edit-tinymce'){ + loadEditor().then(function(sketcherInstance) { + $.get(config.marvinUrl,function(result){ + sketcherInstance.importStructure("mrv",result.description) + sketchName.val(result.name) + }) + }) } } @@ -70,6 +77,8 @@ var MarvinJsEditor = (function() { } else if (config.mode === 'new-tinymce'){ config.objectType = 'TinyMceAsset' MarvinJsEditor().save_with_image(config) + } else if (config.mode === 'edit-tinymce'){ + MarvinJsEditor().update_tinymce(config) } }) @@ -166,6 +175,37 @@ var MarvinJsEditor = (function() { }) }, + update_tinymce: function(config){ + loadEditor().then(function(sketcherInstance) { + sketcherInstance.exportStructure("mrv").then(function(mrv_description) { + loadPackages().then(function (sketcherPackage) { + sketcherPackage.onReady(function() { + exporter = createExporter(sketcherPackage,'image/jpeg') + exporter.render(mrv_description).then(function(image){ + $.ajax({ + url: config.marvinUrl, + data: { + description: mrv_description, + name: sketchName.val(), + object_type: 'TinyMceAsset', + image: image + }, + dataType: 'json', + type: 'PUT', + success: function(json) { + config.image[0].src = json.url + config.saveButton.removeClass('hidden') + console.log(config.saveButton) + $(marvinJsModal).modal('hide'); + } + }); + }); + }); + }); + }); + }) + }, + create_preview: function(source,target){ loadPackages().then(function (sketcherInstance) { sketcherInstance.onReady(function() { diff --git a/app/assets/javascripts/sitewide/tiny_mce.js b/app/assets/javascripts/sitewide/tiny_mce.js index cf2372011..ae4330382 100644 --- a/app/assets/javascripts/sitewide/tiny_mce.js +++ b/app/assets/javascripts/sitewide/tiny_mce.js @@ -129,9 +129,11 @@ var TinyMCE = (function() { ], init_instance_callback: function(editor) { var editorForm = $(editor.getContainer()).closest('form'); + var editorContainer = $(editor.getContainer()) var menuBar = editorForm.find('.mce-menubar.mce-toolbar.mce-first .mce-flow-layout'); var editorToolbar = editorForm.find('.mce-top-part'); var editorToolbaroffset = mceConfig.toolbar_offset || 120; + var editorIframe = $('#' + editor.id).prev().find('.mce-edit-area iframe') $('.tinymce-placeholder').css('height', $(editor.editorContainer).height() + 'px'); setTimeout(() => { @@ -163,6 +165,44 @@ var TinyMCE = (function() { editorForm.submit(); }); + // Init image helpers + $('').appendTo(editorToolbar.find('.mce-stack-layout')) + editorIframe.contents().click(function(){ + setTimeout(() => { + var image = editorIframe.contents().find('img[data-mce-selected="1"]') + var editLink; + if (image.length > 0){ + editorContainer.find('.tinymce-active-object-handler').css('display', 'block') + editorContainer.find('.tinymce-active-object-handler .file-download-link') + .attr('href', image[0].src) + .attr('download', 'tinymce-image'); + + editLink = editorContainer.find('.tinymce-active-object-handler .file-edit-link') + if (image[0].dataset.sourceId) { + editLink.css('display','inline-block') + editLink.on('click', function(){ + if (image[0].dataset.sourceType === 'MarvinJsAsset'){ + MarvinJsEditor().open({ + mode: 'edit-tinymce', + marvinUrl: '/marvin_js_assets/'+image[0].dataset.sourceId, + image: image, + saveButton: editorContainer.find('.tinymce-save-button') + }) + } + }) + } else { + editLink.css('display','none') + editLink.off('click') + } + }else{ + editorContainer.find('.tinymce-active-object-handler').css('display', 'none') + } + },100) + }) + // After save action editorForm .on('ajax:success', function(ev, data) { diff --git a/app/assets/stylesheets/tiny_mce.scss b/app/assets/stylesheets/tiny_mce.scss index b6357efae..964483036 100644 --- a/app/assets/stylesheets/tiny_mce.scss +++ b/app/assets/stylesheets/tiny_mce.scss @@ -59,4 +59,42 @@ .mce-toolbar { background: $color-white !important; } + +.mce-stack-layout { + .tinymce-active-object-handler { + border-top: 1px solid rgb(226, 228, 231); + height: 33px; + width: 100%; + + .tool-button { + border: 1px solid transparent; + cursor: pointer; + display: inline-block; + margin: 2px; + line-height: 27px; + text-align: center; + width: 30px; + + &:hover { + border: 1px solid rgb(226, 228, 231); + } + } + + i.mce-i-donwload:before { + content: "\F019"; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + position: absolute; + line-height: 16px + } + + i.mce-i-pencil:before { + content: "\F303"; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + position: absolute; + line-height: 16px + } + } +} // scss-lint:enable ImportantRule \ No newline at end of file diff --git a/app/controllers/marvin_js_assets_controller.rb b/app/controllers/marvin_js_assets_controller.rb index 844b8ebf2..a30ade691 100644 --- a/app/controllers/marvin_js_assets_controller.rb +++ b/app/controllers/marvin_js_assets_controller.rb @@ -23,6 +23,10 @@ class MarvinJsAssetsController < ApplicationController end end + def show + render json: (MarvinJsAsset.find_by_id(params[:id]) || {}) + end + def destroy sketch=MarvinJsAsset.find(params[:id]) sketch.destroy @@ -30,15 +34,13 @@ class MarvinJsAssetsController < ApplicationController end def update - sketch=MarvinJsAsset.find(params[:id]) - sketch.update(marvin_params) - render json: sketch + render json: MarvinJsAsset.update_sketch(marvin_params) end private def marvin_params - params.permit(:description, :object_id, :object_type, :name, :image) + params.permit(:id,:description, :object_id, :object_type, :name, :image) end end diff --git a/app/models/marvin_js_asset.rb b/app/models/marvin_js_asset.rb index 63f9d5122..991791ccf 100644 --- a/app/models/marvin_js_asset.rb +++ b/app/models/marvin_js_asset.rb @@ -15,12 +15,6 @@ class MarvinJsAsset < ApplicationRecord image: values[:image], image_file_name: "#{name}.jpg" ) - # Decode the file bytes - #image = values[:image].split(';') - #tiny_mce_img.image = StringIO.new( - # Base64.decode64(image[1]) - #) - #tiny_mce_img.image_content_type = image[0].split(':')[1] tiny_mce_img.save! values[:object_id] = tiny_mce_img.id @@ -28,4 +22,15 @@ class MarvinJsAsset < ApplicationRecord create(values.merge({team_id: team.id}).except(:image)) end + def self.update_sketch(values) + sketch=MarvinJsAsset.find(values[:id]) + sketch.update(values.except(:image,:object_type,:id)) + if values[:object_type] == 'TinyMceAsset' + image = TinyMceAsset.find(sketch.object_id) + image.update(image: values[:image]) + return {url: image.url(:large)} + end + return sketch + end + end diff --git a/app/models/tiny_mce_asset.rb b/app/models/tiny_mce_asset.rb index 5eb937be5..91cdd9a89 100644 --- a/app/models/tiny_mce_asset.rb +++ b/app/models/tiny_mce_asset.rb @@ -14,7 +14,7 @@ class TinyMceAsset < ApplicationRecord touch: true, optional: true - has_one :source, + has_one :marvin_js_asset, as: :object, class_name: :MarvinJsAsset, dependent: :destroy @@ -38,6 +38,10 @@ class TinyMceAsset < ApplicationRecord } validates :estimated_size, presence: true + def source + return marvin_js_asset if marvin_js_asset + end + def self.update_images(object, images) images = JSON.parse(images) current_images = object.tiny_mce_assets.pluck(:id) @@ -60,6 +64,11 @@ class TinyMceAsset < ApplicationRecord asset_id = tm_asset.attr('data-mce-token') new_asset_url = find_by_id(Base62.decode(asset_id)) if new_asset_url + assets_source = new_asset_url.source + if assets_source + tm_asset.set_attribute('data-source-id', assets_source.id) + tm_asset.set_attribute('data-source-type', assets_source.class.name) + end tm_asset.attributes['src'].value = new_asset_url.url tm_asset['class'] = 'img-responsive' end diff --git a/app/views/results/_result_text.html.erb b/app/views/results/_result_text.html.erb index 3c97f447e..9fbbcd17e 100644 --- a/app/views/results/_result_text.html.erb +++ b/app/views/results/_result_text.html.erb @@ -1,5 +1,5 @@
- <%= custom_auto_link(result.result_text.text, + <%= custom_auto_link(result.result_text.tinymce_render(:text), simple_format: false, tags: %w(img), team: current_team) %> diff --git a/config/routes.rb b/config/routes.rb index d0e209d2c..2a9b447f3 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -676,7 +676,7 @@ Rails.application.routes.draw do end end - resources :marvin_js_assets, only: [:create, :update, :destroy] + resources :marvin_js_assets, only: [:create, :update, :destroy, :show] post 'global_activities', to: 'global_activities#index'