Dan Brown

Cleaned page form JS & spaced tag box

As per #174
1 "use strict"; 1 "use strict";
2 2
3 +/**
4 + * Handle pasting images from clipboard.
5 + * @param e - event
6 + * @param editor - editor instance
7 + */
3 function editorPaste(e, editor) { 8 function editorPaste(e, editor) {
4 if (!e.clipboardData) return 9 if (!e.clipboardData) return
5 - var items = e.clipboardData.items; 10 + let items = e.clipboardData.items;
6 if (!items) return; 11 if (!items) return;
7 - for (var i = 0; i < items.length; i++) { 12 + for (let i = 0; i < items.length; i++) {
8 - if (items[i].type.indexOf("image") !== -1) { 13 + if (items[i].type.indexOf("image") === -1) return
9 - 14 +
10 - var file = items[i].getAsFile(); 15 + let file = items[i].getAsFile();
11 - var formData = new FormData(); 16 + let formData = new FormData();
12 - var ext = 'png'; 17 + let ext = 'png';
13 - var xhr = new XMLHttpRequest(); 18 + let xhr = new XMLHttpRequest();
14 - 19 +
15 - if (file.name) { 20 + if (file.name) {
16 - var fileNameMatches = file.name.match(/\.(.+)$/); 21 + let fileNameMatches = file.name.match(/\.(.+)$/);
17 - if (fileNameMatches) { 22 + if (fileNameMatches) {
18 - ext = fileNameMatches[1]; 23 + ext = fileNameMatches[1];
19 - }
20 } 24 }
21 -
22 - var id = "image-" + Math.random().toString(16).slice(2);
23 - var loadingImage = window.baseUrl('/loading.gif');
24 - editor.execCommand('mceInsertContent', false, '<img src="'+ loadingImage +'" id="' + id + '">');
25 -
26 - var remoteFilename = "image-" + Date.now() + "." + ext;
27 - formData.append('file', file, remoteFilename);
28 - formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
29 -
30 - xhr.open('POST', window.baseUrl('/images/gallery/upload'));
31 - xhr.onload = function () {
32 - if (xhr.status === 200 || xhr.status === 201) {
33 - var result = JSON.parse(xhr.responseText);
34 - editor.dom.setAttrib(id, 'src', result.thumbs.display);
35 - } else {
36 - console.log('An error occurred uploading the image');
37 - console.log(xhr.responseText);
38 - editor.dom.remove(id);
39 - }
40 - };
41 - xhr.send(formData);
42 } 25 }
26 +
27 + let id = "image-" + Math.random().toString(16).slice(2);
28 + let loadingImage = window.baseUrl('/loading.gif');
29 + editor.execCommand('mceInsertContent', false, `<img src="${loadingImage}" id="${id}">`);
30 +
31 + let remoteFilename = "image-" + Date.now() + "." + ext;
32 + formData.append('file', file, remoteFilename);
33 + formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
34 +
35 + xhr.open('POST', window.baseUrl('/images/gallery/upload'));
36 + xhr.onload = function () {
37 + if (xhr.status === 200 || xhr.status === 201) {
38 + let result = JSON.parse(xhr.responseText);
39 + editor.dom.setAttrib(id, 'src', result.thumbs.display);
40 + } else {
41 + console.log('An error occurred uploading the image', xhr.responseText);
42 + editor.dom.remove(id);
43 + }
44 + };
45 + xhr.send(formData);
46 +
43 } 47 }
44 } 48 }
45 49
...@@ -101,7 +105,7 @@ var mceOptions = module.exports = { ...@@ -101,7 +105,7 @@ var mceOptions = module.exports = {
101 105
102 if (type === 'file') { 106 if (type === 'file') {
103 window.showEntityLinkSelector(function(entity) { 107 window.showEntityLinkSelector(function(entity) {
104 - var originalField = win.document.getElementById(field_name); 108 + let originalField = win.document.getElementById(field_name);
105 originalField.value = entity.link; 109 originalField.value = entity.link;
106 $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name); 110 $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name);
107 }); 111 });
...@@ -115,7 +119,7 @@ var mceOptions = module.exports = { ...@@ -115,7 +119,7 @@ var mceOptions = module.exports = {
115 // to ensure the new value sticks 119 // to ensure the new value sticks
116 win.document.getElementById(field_name).value = image.url; 120 win.document.getElementById(field_name).value = image.url;
117 if ("createEvent" in document) { 121 if ("createEvent" in document) {
118 - var evt = document.createEvent("HTMLEvents"); 122 + let evt = document.createEvent("HTMLEvents");
119 evt.initEvent("change", false, true); 123 evt.initEvent("change", false, true);
120 win.document.getElementById(field_name).dispatchEvent(evt); 124 win.document.getElementById(field_name).dispatchEvent(evt);
121 } else { 125 } else {
...@@ -123,8 +127,8 @@ var mceOptions = module.exports = { ...@@ -123,8 +127,8 @@ var mceOptions = module.exports = {
123 } 127 }
124 128
125 // Replace the actively selected content with the linked image 129 // Replace the actively selected content with the linked image
126 - var html = '<a href="' + image.url + '" target="_blank">'; 130 + let html = `<a href="${image.url}" target="_blank">`;
127 - html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">'; 131 + html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
128 html += '</a>'; 132 html += '</a>';
129 win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html); 133 win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
130 }); 134 });
...@@ -132,7 +136,7 @@ var mceOptions = module.exports = { ...@@ -132,7 +136,7 @@ var mceOptions = module.exports = {
132 136
133 }, 137 },
134 paste_preprocess: function (plugin, args) { 138 paste_preprocess: function (plugin, args) {
135 - var content = args.content; 139 + let content = args.content;
136 if (content.indexOf('<img src="file://') !== -1) { 140 if (content.indexOf('<img src="file://') !== -1) {
137 args.content = ''; 141 args.content = '';
138 } 142 }
...@@ -142,7 +146,7 @@ var mceOptions = module.exports = { ...@@ -142,7 +146,7 @@ var mceOptions = module.exports = {
142 146
143 // Run additional setup actions 147 // Run additional setup actions
144 // Used by the angular side of things 148 // Used by the angular side of things
145 - for (var i = 0; i < mceOptions.extraSetups.length; i++) { 149 + for (let i = 0; i < mceOptions.extraSetups.length; i++) {
146 mceOptions.extraSetups[i](editor); 150 mceOptions.extraSetups[i](editor);
147 } 151 }
148 152
...@@ -158,12 +162,11 @@ var mceOptions = module.exports = { ...@@ -158,12 +162,11 @@ var mceOptions = module.exports = {
158 editor.on('dragstart', function () { 162 editor.on('dragstart', function () {
159 var node = editor.selection.getNode(); 163 var node = editor.selection.getNode();
160 164
161 - if (node.nodeName === 'IMG') { 165 + if (node.nodeName !== 'IMG') return;
162 - wrap = editor.dom.getParent(node, '.mceTemp'); 166 + wrap = editor.dom.getParent(node, '.mceTemp');
163 167
164 - if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) { 168 + if (!wrap && node.parentNode.nodeName === 'A' && !hasTextContent(node.parentNode)) {
165 - wrap = node.parentNode; 169 + wrap = node.parentNode;
166 - }
167 } 170 }
168 }); 171 });
169 172
...@@ -188,15 +191,15 @@ var mceOptions = module.exports = { ...@@ -188,15 +191,15 @@ var mceOptions = module.exports = {
188 }); 191 });
189 })(); 192 })();
190 193
191 - // Image picker button 194 + // Custom Image picker button
192 editor.addButton('image-insert', { 195 editor.addButton('image-insert', {
193 title: 'My title', 196 title: 'My title',
194 icon: 'image', 197 icon: 'image',
195 tooltip: 'Insert an image', 198 tooltip: 'Insert an image',
196 onclick: function () { 199 onclick: function () {
197 window.ImageManager.showExternal(function (image) { 200 window.ImageManager.showExternal(function (image) {
198 - var html = '<a href="' + image.url + '" target="_blank">'; 201 + let html = `<a href="${image.url}" target="_blank">`;
199 - html += '<img src="' + image.thumbs.display + '" alt="' + image.name + '">'; 202 + html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
200 html += '</a>'; 203 html += '</a>';
201 editor.execCommand('mceInsertContent', false, html); 204 editor.execCommand('mceInsertContent', false, html);
202 }); 205 });
......
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
248 } 248 }
249 249
250 .tag-display { 250 .tag-display {
251 - margin: $-xl $-xs; 251 + margin: $-xl $-m;
252 border: 1px solid #DDD; 252 border: 1px solid #DDD;
253 min-width: 180px; 253 min-width: 180px;
254 max-width: 320px; 254 max-width: 320px;
......