From 1d02ba5ebfd32ea9edce035a91aa49b7b9a14bbb Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Tue, 18 Feb 2020 11:09:19 +0100 Subject: [PATCH 1/3] Open unsaved TinyMce editor --- app/assets/javascripts/sitewide/tiny_mce.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/app/assets/javascripts/sitewide/tiny_mce.js b/app/assets/javascripts/sitewide/tiny_mce.js index ccf096e55..2f3375360 100644 --- a/app/assets/javascripts/sitewide/tiny_mce.js +++ b/app/assets/javascripts/sitewide/tiny_mce.js @@ -377,3 +377,24 @@ $(document).on('turbolinks:before-visit', function(e) { return false; }); }); + +$(document).on('turbolinks:load', function(e) { + var records = Object.entries(localStorage).filter(record => { return record[0].includes('tinymce-autosave'); }); + var dLocation = document.location; + var prefix = `tinymce-autosave-${dLocation.pathname}${dLocation.search}${dLocation.hash}-`; + for (let i = 0; i < records.length; i += 1) { + if (records[i][0].includes(prefix + 'my_module_description_textarea-draft')) { + setTimeout(() => { + window.scrollTo(0, $('#my_module_description_view').offset().top); + $('#my_module_description_view').click(); + }, 500); + break; + } else if (records[i][0].includes(prefix + 'protocol_description_textarea-draft')) { + setTimeout(() => { + window.scrollTo(0, $('#protocol_description_view').offset().top); + $('#protocol_description_view').click(); + }, 500); + break; + } + } +}); From b188b0511ba3f1a3f3bfcf84e41ce80e46c75ab3 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 19 Mar 2020 15:45:14 +0100 Subject: [PATCH 2/3] Refactor TinyMCE autosave check --- .../javascripts/my_modules/protocols.js | 8 ++- app/assets/javascripts/protocols/header.js | 4 +- app/assets/javascripts/sitewide/tiny_mce.js | 66 ++++++++++++------- .../my_modules/_description_form.html.erb | 26 ++++---- .../_protocol_description_form.html.erb | 18 +++-- 5 files changed, 73 insertions(+), 49 deletions(-) diff --git a/app/assets/javascripts/my_modules/protocols.js b/app/assets/javascripts/my_modules/protocols.js index 5825894f9..b573200ca 100644 --- a/app/assets/javascripts/my_modules/protocols.js +++ b/app/assets/javascripts/my_modules/protocols.js @@ -10,15 +10,19 @@ var selectedRow = null; function initEditMyModuleDescription() { - $('#my_module_description_view').on('click', function() { + var viewObject = $('#my_module_description_view'); + viewObject.on('click', function() { TinyMCE.init('#my_module_description_textarea'); }); + TinyMCE.initIfHasDraft(viewObject); } function initEditProtocolDescription() { - $('#protocol_description_view').on('click', function() { + var viewObject = $('#protocol_description_view'); + viewObject.on('click', function() { TinyMCE.init('#protocol_description_textarea', refreshProtocolStatusBar); }); + TinyMCE.initIfHasDraft(viewObject); } // Initialize edit description modal window diff --git a/app/assets/javascripts/protocols/header.js b/app/assets/javascripts/protocols/header.js index 94ba6381d..b1a1683d8 100644 --- a/app/assets/javascripts/protocols/header.js +++ b/app/assets/javascripts/protocols/header.js @@ -21,9 +21,11 @@ var ProtocolRepositoryHeader = (function() { } function initEditDescription() { - $('#protocol_description_view').on('click', function() { + var viewObject = $('#protocol_description_view'); + viewObject.on('click', function() { TinyMCE.init('#protocol_description_textarea'); }); + TinyMCE.initIfHasDraft(viewObject); } return { diff --git a/app/assets/javascripts/sitewide/tiny_mce.js b/app/assets/javascripts/sitewide/tiny_mce.js index 2f3375360..38127a7e4 100644 --- a/app/assets/javascripts/sitewide/tiny_mce.js +++ b/app/assets/javascripts/sitewide/tiny_mce.js @@ -84,6 +84,26 @@ var TinyMCE = (function() { $(editor.getContainer()).find('.tinymce-save-button').removeClass('hidden'); } + function draftLocation() { + return 'tinymce-drafts-' + document.location.pathname + } + + function removeDraft(editor, textAreaObject) { + console.log(1) + var location = draftLocation(); + var storedDrafts = JSON.parse(sessionStorage.getItem(location) || '[]'); + var draftId = storedDrafts.indexOf(textAreaObject.data('tinymce-object')) + if (draftId > -1) { + storedDrafts.splice(draftId, 1); + } + + if (storedDrafts.length) { + sessionStorage.setItem(location, JSON.stringify(storedDrafts)); + } else { + sessionStorage.removeItem(location); + } + } + // returns a public API for TinyMCE editor return Object.freeze({ init: function(selector, onSaveCallback) { @@ -252,6 +272,7 @@ var TinyMCE = (function() { editor.remove(); editorForm.find('.tinymce-view').html(data.html).removeClass('hidden'); editor.plugins.autosave.removeDraft(); + removeDraft(editor, textAreaObject); if (onSaveCallback) { onSaveCallback(); } }).on('ajax:error', function(ev, data) { var model = editor.getElement().dataset.objectType; @@ -308,6 +329,15 @@ var TinyMCE = (function() { makeItDirty(editor); }); + editor.on('StoreDraft', function() { + var location = draftLocation(); + var storedDrafts = JSON.parse(sessionStorage.getItem(location) || '[]'); + var draftName = textAreaObject.data('tinymce-object') + if (storedDrafts.includes(draftName) || !draftName) return; + storedDrafts.push(draftName); + sessionStorage.setItem(location, JSON.stringify(storedDrafts)); + }); + editor.on('remove', function() { var menuBar = $(editor.getContainer()).find('.mce-menubar.mce-toolbar.mce-first .mce-flow-layout'); menuBar.find('.tinymce-save-button').remove(); @@ -361,7 +391,20 @@ var TinyMCE = (function() { makeItDirty: function(editor) { makeItDirty(editor); }, - highlight: initHighlightjs + highlight: initHighlightjs, + initIfHasDraft: function(viewObject) { + var storedDrafts = sessionStorage.getItem(draftLocation()); + var draftName = viewObject.data('tinymce-init'); + if (storedDrafts && JSON.parse(storedDrafts)[0] === draftName) { + let top = viewObject.offset().top; + setTimeout(() => { + viewObject.click(); + }, 0) + setTimeout(() => { + window.scrollTo(0, top - 150); + }, 2000) + } + } }); }()); @@ -377,24 +420,3 @@ $(document).on('turbolinks:before-visit', function(e) { return false; }); }); - -$(document).on('turbolinks:load', function(e) { - var records = Object.entries(localStorage).filter(record => { return record[0].includes('tinymce-autosave'); }); - var dLocation = document.location; - var prefix = `tinymce-autosave-${dLocation.pathname}${dLocation.search}${dLocation.hash}-`; - for (let i = 0; i < records.length; i += 1) { - if (records[i][0].includes(prefix + 'my_module_description_textarea-draft')) { - setTimeout(() => { - window.scrollTo(0, $('#my_module_description_view').offset().top); - $('#my_module_description_view').click(); - }, 500); - break; - } else if (records[i][0].includes(prefix + 'protocol_description_textarea-draft')) { - setTimeout(() => { - window.scrollTo(0, $('#protocol_description_view').offset().top); - $('#protocol_description_view').click(); - }, 500); - break; - } - } -}); diff --git a/app/views/my_modules/_description_form.html.erb b/app/views/my_modules/_description_form.html.erb index 66a9d5c06..225cf1a79 100644 --- a/app/views/my_modules/_description_form.html.erb +++ b/app/views/my_modules/_description_form.html.erb @@ -1,19 +1,16 @@ <%= bootstrap_form_for @my_module, url: update_description_my_module_path(@my_module, format: :json), remote: :true, html: {class: 'tiny-mce-editor'} do |f| %> <%= render partial: 'shared/tiny_mce_extra_buttons.html.erb' %> - <% if @my_module.description.present? %> -
- <%= custom_auto_link(@my_module.tinymce_render(:description), - simple_format: false, - tags: %w(img), - team: current_team) %> -
- <% else %> -
- <% end %> +
+ <% if @my_module.description.present? %> + <%= custom_auto_link(@my_module.tinymce_render(:description), + simple_format: false, + tags: %w(img), + team: current_team) %> + <% end %> +
<%= f.tiny_mce_editor(:description, id: :my_module_description_textarea, class: 'hidden', @@ -22,6 +19,7 @@ value: sanitize_input(@my_module.tinymce_render(:description)), autocomplete: 'off', data: { + tinymce_object: "tinymce-my-module-description-#{@my_module.id}", object_type: 'my_module', object_id: @my_module.id, highlightjs_path: asset_path('highlightjs-github-theme.css'), diff --git a/app/views/my_modules/protocols/_protocol_description_form.html.erb b/app/views/my_modules/protocols/_protocol_description_form.html.erb index fc374f172..9fb6d8b64 100644 --- a/app/views/my_modules/protocols/_protocol_description_form.html.erb +++ b/app/views/my_modules/protocols/_protocol_description_form.html.erb @@ -1,19 +1,16 @@ <%= bootstrap_form_for protocol, url: update_url, remote: :true, html: {class: 'tiny-mce-editor'} do |f| %> <%= render partial: 'shared/tiny_mce_extra_buttons.html.erb' %> - <% if protocol.description.present? %> -
+
+ <% if protocol.description.present? %> <%= custom_auto_link(protocol.tinymce_render(:description), simple_format: false, tags: %w(img), team: current_team) %> -
- <% else %> -
- <% end %> + <% end %> +
<%= f.tiny_mce_editor(:description, id: :protocol_description_textarea, class: 'hidden', @@ -22,6 +19,7 @@ value: sanitize_input(protocol.tinymce_render(:description)), autocomplete: 'off', data: { + tinymce_object: "tinymce-protocol-description-#{protocol.id}", object_type: 'protocol', object_id: protocol.id, highlightjs_path: asset_path('highlightjs-github-theme.css'), From 37304df87861af665f63b93c058ed550d2a64461 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 19 Mar 2020 15:48:45 +0100 Subject: [PATCH 3/3] Fix markup --- app/assets/javascripts/sitewide/tiny_mce.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/sitewide/tiny_mce.js b/app/assets/javascripts/sitewide/tiny_mce.js index 38127a7e4..eb95e2355 100644 --- a/app/assets/javascripts/sitewide/tiny_mce.js +++ b/app/assets/javascripts/sitewide/tiny_mce.js @@ -85,14 +85,13 @@ var TinyMCE = (function() { } function draftLocation() { - return 'tinymce-drafts-' + document.location.pathname + return 'tinymce-drafts-' + document.location.pathname; } function removeDraft(editor, textAreaObject) { - console.log(1) var location = draftLocation(); var storedDrafts = JSON.parse(sessionStorage.getItem(location) || '[]'); - var draftId = storedDrafts.indexOf(textAreaObject.data('tinymce-object')) + var draftId = storedDrafts.indexOf(textAreaObject.data('tinymce-object')); if (draftId > -1) { storedDrafts.splice(draftId, 1); } @@ -332,7 +331,7 @@ var TinyMCE = (function() { editor.on('StoreDraft', function() { var location = draftLocation(); var storedDrafts = JSON.parse(sessionStorage.getItem(location) || '[]'); - var draftName = textAreaObject.data('tinymce-object') + var draftName = textAreaObject.data('tinymce-object'); if (storedDrafts.includes(draftName) || !draftName) return; storedDrafts.push(draftName); sessionStorage.setItem(location, JSON.stringify(storedDrafts)); @@ -399,10 +398,10 @@ var TinyMCE = (function() { let top = viewObject.offset().top; setTimeout(() => { viewObject.click(); - }, 0) + }, 0); setTimeout(() => { window.scrollTo(0, top - 150); - }, 2000) + }, 2000); } } });