From c8ed4a83c38e1108d1c11cec0fdcc89765683253 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Mon, 9 May 2016 16:55:31 +0200 Subject: [PATCH] Allow inline images via c&p. --- .../_application_controller_form.coffee | 4 +- .../app/controllers/_profile/avatar.coffee | 2 +- .../app/controllers/getting_started.coffee | 2 +- .../app/lib/app_post/image_service.coffee | 38 +++++++++++++++---- .../javascripts/app/lib/app_post/utils.coffee | 7 ++++ .../app/lib/base/jquery.contenteditable.js | 37 ++++++++++++++++++ db/migrate/20120101000001_create_base.rb | 2 +- db/migrate/20120101000010_create_ticket.rb | 4 +- .../20160509000001_contenteditable_iamges.rb | 11 ++++++ 9 files changed, 93 insertions(+), 14 deletions(-) create mode 100644 db/migrate/20160509000001_contenteditable_iamges.rb diff --git a/app/assets/javascripts/app/controllers/_application_controller_form.coffee b/app/assets/javascripts/app/controllers/_application_controller_form.coffee index 0b170b2cc..b083280c8 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_form.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_form.coffee @@ -191,10 +191,10 @@ class App.ControllerForm extends App.Controller ### formGenItem: (attribute_config, classname, form, attribute_count) -> - attribute = clone( attribute_config, true ) + attribute = clone(attribute_config, true) # create item id - attribute.id = classname + '_' + attribute.name + attribute.id = "#{classname}_#{attribute.name}" # set label class name attribute.label_class = @model.labelClass diff --git a/app/assets/javascripts/app/controllers/_profile/avatar.coffee b/app/assets/javascripts/app/controllers/_profile/avatar.coffee index e03340354..a19914509 100644 --- a/app/assets/javascripts/app/controllers/_profile/avatar.coffee +++ b/app/assets/javascripts/app/controllers/_profile/avatar.coffee @@ -128,7 +128,7 @@ class Index extends App.Controller ) # add resized image - App.ImageService.resizeForAvatar( src, 'auto', 160, store ) + App.ImageService.resizeForAvatar(src, 'auto', 160, store) onUpload: (event) => callback = @storeImage diff --git a/app/assets/javascripts/app/controllers/getting_started.coffee b/app/assets/javascripts/app/controllers/getting_started.coffee index 6809e910a..bebd89d83 100644 --- a/app/assets/javascripts/app/controllers/getting_started.coffee +++ b/app/assets/javascripts/app/controllers/getting_started.coffee @@ -365,7 +365,7 @@ class Base extends App.WizardFullScreen ) # add resized image - App.ImageService.resizeForApp( @params.logo, @logoPreview.width(), @logoPreview.height(), store ) + App.ImageService.resizeForApp(@params.logo, @logoPreview.width(), @logoPreview.height(), store) hideAlerts: => @$('.form-group').removeClass('has-error') diff --git a/app/assets/javascripts/app/lib/app_post/image_service.coffee b/app/assets/javascripts/app/lib/app_post/image_service.coffee index 4c638e94a..481bce703 100644 --- a/app/assets/javascripts/app/lib/app_post/image_service.coffee +++ b/app/assets/javascripts/app/lib/app_post/image_service.coffee @@ -4,15 +4,15 @@ class App.ImageService if @checkUrl(dataURL) callback(dataURL) else - @resize( dataURL, x, y, 2, 'image/jpeg', 0.7, callback ) + @resize(dataURL, x, y, 2, 'image/jpeg', 0.7, callback) @resizeForApp: (dataURL, x, y, callback) => if @checkUrl(dataURL) callback(dataURL) else - @resize( dataURL, x, y, 2, 'image/png', 0.7, callback ) + @resize(dataURL, x, y, 2, 'image/png', 0.7, callback) - @resize: ( dataURL, x = 'auto', y = 'auto', sizeFactor = 1, type, quallity, callback) -> + @resize: (dataURL, x = 'auto', y = 'auto', sizeFactor = 1, type, quallity, callback, force = true) -> # load image from data url imageObject = new Image() @@ -32,9 +32,15 @@ class App.ImageService factor = imageWidth / y x = imageHeight / factor + # check if resize is needed + resize = false if x < imageWidth || y < imageHeight + resize = true x = x * sizeFactor y = y * sizeFactor + else + x = imageWidth + y = imageHeight # create canvas and set dimensions canvas = document.createElement('canvas') @@ -43,15 +49,33 @@ class App.ImageService # draw image on canvas and set image dimensions context = canvas.getContext('2d') - context.drawImage( imageObject, 0, 0, x, y ) + context.drawImage(imageObject, 0, 0, x, y) + + # set quallity based on image size + if quallity == 'auto' + if x < 200 && y < 200 + quallity = 1 + else if x < 400 && y < 400 + quallity = 0.9 + else if x < 600 && y < 600 + quallity = 0.8 + else if x < 900 && y < 900 + quallity = 0.7 + else + quallity = 0.6 # execute callback with resized image - newDataUrl = canvas.toDataURL( type, quallity ) - callback(newDataUrl) + newDataUrl = canvas.toDataURL(type, quallity) + if resize + console.log('ImageService', 'resize', x/sizeFactor, y/sizeFactor, quallity, (newDataUrl.length * 0.75)/1024/1024, 'in mb') + callback(newDataUrl, x/sizeFactor, y/sizeFactor) + return + console.log('ImageService', 'no resize', x, y, quallity, (newDataUrl.length * 0.75)/1024/1024, 'in mb') + callback(newDataUrl, x, y) # load image from data url imageObject.src = dataURL @checkUrl: (dataURL) -> ignore = /\.svg$/i - ignore.test( dataURL ) + ignore.test(dataURL) diff --git a/app/assets/javascripts/app/lib/app_post/utils.coffee b/app/assets/javascripts/app/lib/app_post/utils.coffee index bf65c3ae8..bc57cf1b1 100644 --- a/app/assets/javascripts/app/lib/app_post/utils.coffee +++ b/app/assets/javascripts/app/lib/app_post/utils.coffee @@ -206,6 +206,13 @@ class App.Utils .removeAttr('lang') .removeAttr('type') html + .removeAttr('style') + .removeAttr('class') + .removeAttr('title') + .removeAttr('lang') + .removeAttr('type') + + html @_removeComments: (html) -> html.contents().each( -> diff --git a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js index 0f3758a1e..772ba4785 100644 --- a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js +++ b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js @@ -187,6 +187,43 @@ e.preventDefault() _this.log('paste') + // insert and in case, resize images + var clipboardData = e.originalEvent.clipboardData + if (clipboardData && clipboardData.items) { + var imageInserted = false + jQuery.each(clipboardData.items, function(index, item){ + console.log(index, item) + if (item.kind == 'file' && item.type == 'image/png') { + _this.log('paste image', item) + + var imageFile = item.getAsFile() + var reader = new FileReader() + + reader.onload = function (e) { + var result = e.target.result + var img = document.createElement('img') + img.src = result + + insert = function(dataUrl, width, height) { + //console.log('dataUrl', dataUrl) + _this.log('image inserted') + result = dataUrl + img = "" + document.execCommand('insertHTML', false, img) + } + + // resize if to big + App.ImageService.resize(img.src, 460, 'auto', 2, 'image/jpeg', 'auto', insert) + } + reader.readAsDataURL(imageFile) + imageInserted = true + } + }) + } + if (imageInserted) { + return + } + // check existing + paste text for limit var text = e.originalEvent.clipboardData.getData('text/html') var docType = 'html' diff --git a/db/migrate/20120101000001_create_base.rb b/db/migrate/20120101000001_create_base.rb index 7322ec71c..a4af1b1ff 100644 --- a/db/migrate/20120101000001_create_base.rb +++ b/db/migrate/20120101000001_create_base.rb @@ -56,7 +56,7 @@ class CreateBase < ActiveRecord::Migration create_table :signatures do |t| t.string :name, limit: 100, null: false - t.string :body, limit: 5000, null: true + t.text :body, limit: 10.megabytes + 1, null: true t.boolean :active, null: false, default: true t.string :note, limit: 250, null: true t.integer :updated_by_id, null: false diff --git a/db/migrate/20120101000010_create_ticket.rb b/db/migrate/20120101000010_create_ticket.rb index 100e4f049..9cc49ca35 100644 --- a/db/migrate/20120101000010_create_ticket.rb +++ b/db/migrate/20120101000010_create_ticket.rb @@ -153,7 +153,7 @@ class CreateTicket < ActiveRecord::Migration t.column :in_reply_to, :string, limit: 3000, null: true t.column :content_type, :string, limit: 20, null: false, default: 'text/plain' t.column :references, :string, limit: 3200, null: true - t.column :body, :text, limit: 4.megabytes + 1 + t.column :body, :text, limit: 20.megabytes + 1, null: false t.column :internal, :boolean, null: false, default: false t.column :preferences, :text, limit: 500.kilobytes + 1, null: true t.column :updated_by_id, :integer, null: false @@ -303,7 +303,7 @@ class CreateTicket < ActiveRecord::Migration t.references :user, null: true t.column :name, :string, limit: 250, null: false t.column :keywords, :string, limit: 500, null: true - t.column :content, :string, limit: 5000, null: false + t.column :content, :text, limit: 10.megabytes + 1, null: false t.column :note, :string, limit: 250, null: true t.column :active, :boolean, null: false, default: true t.column :updated_by_id, :integer, null: false diff --git a/db/migrate/20160509000001_contenteditable_iamges.rb b/db/migrate/20160509000001_contenteditable_iamges.rb new file mode 100644 index 000000000..1464069c2 --- /dev/null +++ b/db/migrate/20160509000001_contenteditable_iamges.rb @@ -0,0 +1,11 @@ + +class ContenteditableIamges < ActiveRecord::Migration + def up + # return if it's a new setup + return if !Setting.find_by(name: 'system_init_done') + + change_column :text_modules, :content, :text, limit: 10.megabytes + 1, null: false + change_column :signatures, :body, :text, limit: 10.megabytes + 1, null: true + change_column :ticket_articles, :body, :text, limit: 20.megabytes + 1, null: false + end +end