scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-03-06 12:43:06 +08:00
Code Issues Projects Releases Packages Wiki Activity

Refactor TinyMCE autosave check

Browse source
This commit is contained in:
aignatov-bio 2020-03-19 15:45:14 +01:00
parent 1d02ba5ebf
commit b188b0511b
5 changed files with 73 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/my_modules/protocols.js
View file

@ -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

4
app/assets/javascripts/protocols/header.js
View file

@ -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 {

66
app/assets/javascripts/sitewide/tiny_mce.js vendored
View file

@ -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;
}
}
});

26
app/views/my_modules/_description_form.html.erb
View file

@ -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? %>
<div id="my_module_description_view"
class="ql-editor tinymce-view"
data-placeholder="<%= t('my_modules.module_header.empty_description_edit_label') %>">
<%= custom_auto_link(@my_module.tinymce_render(:description),
simple_format: false,
tags: %w(img),
team: current_team) %>
</div>
<% else %>
<div id="my_module_description_view"
class="ql-editor tinymce-view"
data-placeholder="<%= t('my_modules.module_header.empty_description_edit_label') %>"></div>
<% end %>
<div id="my_module_description_view"
class="ql-editor tinymce-view"
data-placeholder="<%= t('my_modules.module_header.empty_description_edit_label') %>"
data-tinymce-init="tinymce-my-module-description-<%= @my_module.id %>">
<% if @my_module.description.present? %>
<%= custom_auto_link(@my_module.tinymce_render(:description),
simple_format: false,
tags: %w(img),
team: current_team) %>
<% end %>
</div>
<%= 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'),

18
app/views/my_modules/protocols/_protocol_description_form.html.erb
View file

@ -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? %>
<div id="protocol_description_view"
class="ql-editor tinymce-view"
data-placeholder="<%= t('my_modules.protocols.protocol_status_bar.empty_description_edit_label') %>">
<div id="protocol_description_view"
class="ql-editor tinymce-view"
data-placeholder="<%= t('my_modules.protocols.protocol_status_bar.empty_description_edit_label') %>"
data-tinymce-init="tinymce-protocol-description-<%= protocol.id %>" >
<% if protocol.description.present? %>
<%= custom_auto_link(protocol.tinymce_render(:description),
simple_format: false,
tags: %w(img),
team: current_team) %>
</div>
<% else %>
<div id="protocol_description_view"
class="ql-editor tinymce-view"
data-placeholder="<%= t('my_modules.protocols.protocol_status_bar.empty_description_edit_label') %>"></div>
<% end %>
<% end %>
</div>
<%= 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'),