Skip to content

Commit e5db64a

Browse files
blocknotesblocknotes
committed
JS refactoring
1 parent c0d37ad commit e5db64a

File tree

3 files changed

+81
-79
lines changed

3 files changed

+81
-79
lines changed

‎app/assets/javascripts/activeadmin/quill_editor_input.js‎

Lines changed: 78 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,93 @@
1-
// --- functions ---------------------------------------------------------------
2-
function initQuillEditors() {
3-
var default_theme = 'snow';
4-
var default_toolbar = [
5-
['bold', 'italic', 'underline'],
6-
['link', 'blockquote', 'code-block'],
7-
[{ 'script': 'sub'}, { 'script': 'super' }],
8-
[{ 'align': [] }, { list: 'ordered' }, { list: 'bullet' }],
9-
[{ 'color': [] }, { 'background': [] }],
10-
['image'],
11-
['clean'],
12-
];
13-
var editors = document.querySelectorAll('.quill-editor');
14-
var registered_plugins = {};
1+
(function () {
2+
// --- functions ---------------------------------------------------------------
3+
function initQuillEditors() {
4+
let default_theme = 'snow'
5+
let default_toolbar = [
6+
['bold', 'italic', 'underline'],
7+
['link', 'blockquote', 'code-block'],
8+
[{ 'script': 'sub' }, { 'script': 'super' }],
9+
[{ 'align': [] }, { list: 'ordered' }, { list: 'bullet' }],
10+
[{ 'color': [] }, { 'background': [] }],
11+
['image'],
12+
['clean'],
13+
]
14+
let editors = document.querySelectorAll('[data-aa-quill-editor]')
15+
let registered_plugins = {}
1516

16-
for(var i = 0; i < editors.length; i++) {
17-
var content = editors[i].querySelector('.quill-editor-content');
18-
var isActive = editors[i].classList.contains('quill-editor--active');
19-
if(content && !isActive) {
20-
// Setup editor options
21-
var options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : {};
22-
if(!options.theme) options.theme = default_theme;
23-
if(!options.modules) options.modules = {};
24-
if(!options.modules.toolbar) options.modules.toolbar = default_toolbar;
17+
for (let i = 0; i < editors.length; i++) {
18+
let content = editors[i].querySelector('[data-aa-quill-content]')
19+
let isActive = editors[i].classList.contains('quill-editor--active')
20+
if (content && !isActive) {
21+
// Setup editor options
22+
let options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : {}
23+
if (!options.theme) options.theme = default_theme
24+
if (!options.modules) options.modules = {}
25+
if (!options.modules.toolbar) options.modules.toolbar = default_toolbar
2526

26-
// Setup plugin options
27-
var plugin_options = editors[i].getAttribute('data-plugins') ? JSON.parse(editors[i].getAttribute('data-plugins')) : {};
28-
if(plugin_options.image_uploader && plugin_options.image_uploader.server_url) {
29-
if(!registered_plugins.image_uploader) {
30-
Quill.register('modules/imageUploader', ImageUploader);
31-
registered_plugins.image_uploader = true;
27+
// Setup plugin options
28+
let plugin_options = editors[i].getAttribute('data-plugins') ? JSON.parse(editors[i].getAttribute('data-plugins')) : {}
29+
if (plugin_options.image_uploader && plugin_options.image_uploader.server_url) {
30+
if (!registered_plugins.image_uploader) {
31+
Quill.register('modules/imageUploader', ImageUploader)
32+
registered_plugins.image_uploader = true
33+
}
34+
let opts = plugin_options.image_uploader
35+
options.modules.imageUploader = setupImageUploader(opts.server_url, opts.field_name)
3236
}
33-
var opts = plugin_options.image_uploader;
34-
options.modules.imageUploader = setupImageUploader(opts.server_url, opts.field_name);
35-
}
3637

37-
// Init editor
38-
editors[i]['_quill-editor'] = new Quill(content, options);
39-
editors[i].classList += ' quill-editor--active';
38+
// Init editor
39+
editors[i]['_quill-editor'] = new Quill(content, options)
40+
editors[i].classList += ' quill-editor--active'
41+
}
4042
}
41-
}
4243

43-
var formtastic = document.querySelector('form.formtastic');
44-
if(formtastic) {
45-
formtastic.onsubmit = function() {
46-
for(var i = 0; i < editors.length; i++) {
47-
var input = editors[i].querySelector('input[type="hidden"]');
48-
if (editors[i]['_quill-editor'].editor.isBlank()) {
49-
input.value = '';
50-
} else {
51-
input.value = editors[i]['_quill-editor'].root.innerHTML;
44+
let formtastic = document.querySelector('form.formtastic')
45+
if (formtastic) {
46+
formtastic.onsubmit = () => {
47+
for (let i = 0; i < editors.length; i++) {
48+
let input = editors[i].querySelector('input[type="hidden"]')
49+
if (editors[i]['_quill-editor'].editor.isBlank()) {
50+
input.value = ''
51+
} else {
52+
input.value = editors[i]['_quill-editor'].root.innerHTML
53+
}
5254
}
53-
}
54-
};
55+
};
56+
}
5557
}
56-
}
5758

58-
function setupImageUploader(server_url, field_name) {
59-
return {
60-
upload: file => {
61-
return new Promise((resolve, reject) => {
62-
const formData = new FormData();
63-
formData.append(field_name || 'file_upload', file);
59+
function setupImageUploader(server_url, field_name) {
60+
return {
61+
upload: file => {
62+
return new Promise((resolve, reject) => {
63+
const formData = new FormData()
64+
formData.append(field_name || 'file_upload', file)
6465

65-
fetch(server_url, {
66-
body: formData,
67-
headers: {
68-
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
69-
},
70-
method: 'POST'
71-
}).then(response => response.json())
72-
.then(result => {
73-
resolve(result.url);
66+
fetch(server_url, {
67+
body: formData,
68+
headers: {
69+
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
70+
},
71+
method: 'POST'
72+
}).then(response => response.json())
73+
.then(result => {
74+
resolve(result.url);
75+
})
76+
.catch(error => {
77+
reject('Upload failed')
78+
console.error('Error: ', error)
79+
})
7480
})
75-
.catch(error => {
76-
reject('Upload failed');
77-
console.error('Error: ', error);
78-
});
79-
});
81+
}
8082
}
8183
}
82-
}
8384

84-
// --- events ------------------------------------------------------------------
85-
$(document).ready( function() {
86-
initQuillEditors();
87-
});
85+
// --- events ------------------------------------------------------------------
86+
$(document).ready(() => {
87+
initQuillEditors()
88+
})
8889

89-
$(document).on('has_many_add:after', function() {
90-
initQuillEditors();
91-
});
90+
$(document).on('has_many_add:after', '.has_many_container', () => {
91+
initQuillEditors()
92+
})
93+
})()

‎app/assets/stylesheets/activeadmin/_quill_editor_input.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
text-align: initial;
66
}
77

8-
body.active_admin .quill-editor {
8+
body.active_admin [data-aa-quill-editor] {
99
display: inline-block;
1010
width: calc(80% - 2px);
1111

‎lib/formtastic/inputs/quill_editor_input.rb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ class QuillEditorInput < Formtastic::Inputs::TextInput
66
def to_html
77
input_wrapping do
88
label_html <<
9-
template.content_tag(:div, input_html_options.merge(class: 'quill-editor')) do
9+
template.content_tag(:div, input_html_options.merge('data-aa-quill-editor': '1')) do
1010
builder.hidden_field(input_name) <<
11-
template.content_tag(:div, class: 'quill-editor-content') do
11+
template.content_tag(:div, 'data-aa-quill-content': '1') do
1212
object.send(method).try :html_safe
1313
end
1414
end

0 commit comments

Comments
 (0)