Skip to content
This repository was archived by the owner on Jul 14, 2022. It is now read-only.

Cleanup formatting #96

Merged
merged 3 commits into from
Nov 16, 2018
Merged

Cleanup formatting #96

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
756e860
Prettier cleanup
abraham Nov 15, 2018
3be8df5
Convert snake_case to camelCase
abraham Nov 15, 2018
8d7941a
Use strict comparison
abraham Nov 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 111 additions & 95 deletions app/assets/javascripts/tinymce/plugins/uploadimage/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,104 +4,109 @@
tinymce.create('tinymce.plugins.UploadImage', {
UploadImage: function(ed, url) {
var form,
iframe,
win,
throbber,
selected_class = '',
editor = ed;
iframe,
win,
throbber,
selectedClass = '',
editor = ed;

function showDialog() {
var classList = getClassList();
var body = [
{type: 'iframe', url: 'javascript:void(0)'},
{type: 'textbox', name: 'file', label: ed.translate('Choose an image'), subtype: 'file'},
{type: 'textbox', name: 'alt', label: ed.translate('Image description')}
{ type: 'iframe', url: 'javascript:void(0)' },
{ type: 'textbox', name: 'file', label: ed.translate('Choose an image'), subtype: 'file' },
{ type: 'textbox', name: 'alt', label: ed.translate('Image description') }
];

if (classList.length > 0) {
selected_class = classList[0].value;
selectedClass = classList[0].value;
body = body.concat([
{
type: 'listbox',
name: 'class',
label: ed.translate('Class'),
values: classList,
onSelect: function(e) {
selected_class = this.value();
selectedClass = this.value();
}
}
]);
}

body = body.concat([
{type: 'container', classes: 'error', html: "<p style='color: #b94a48;'>&nbsp;</p>"},
{ type: 'container', classes: 'error', html: "<p style='color: #b94a48;'>&nbsp;</p>" },

// Trick TinyMCE to add a empty div that "preloads" the throbber image
{type: 'container', classes: 'throbber'}
{ type: 'container', classes: 'throbber' }
]);

win = editor.windowManager.open({
title: ed.translate('Insert an image from your computer'),
width: 520 + parseInt(editor.getLang('uploadimage.delta_width', 0), 10),
height: 180 + parseInt(editor.getLang('uploadimage.delta_height', 0), 10),
body: body,
buttons: [
{
text: ed.translate('Insert'),
onclick: insertImage,
subtype: 'primary'
},
{
text: ed.translate('Cancel'),
onclick: ed.windowManager.close
}
],
}, {
plugin_url: url
});
win = editor.windowManager.open(
{
title: ed.translate('Insert an image from your computer'),
width: 520 + parseInt(editor.getLang('uploadimage.delta_width', 0), 10),
height: 180 + parseInt(editor.getLang('uploadimage.delta_height', 0), 10),
body: body,
buttons: [
{
text: ed.translate('Insert'),
onclick: insertImage,
subtype: 'primary'
},
{
text: ed.translate('Cancel'),
onclick: ed.windowManager.close
}
]
},
{
plugin_url: url
}
);

/* WHY DO YOU HATE <form>, TINYMCE!? */
iframe = win.find("iframe")[0];
iframe = win.find('iframe')[0];
form = createElement('form', {
action: ed.getParam("uploadimage_form_url", "/tinymce_assets"),
action: ed.getParam('uploadimage_form_url', '/tinymce_assets'),
target: iframe._id,
method: "POST",
method: 'POST',
enctype: 'multipart/form-data',
accept_charset: "UTF-8",
accept_charset: 'UTF-8'
});

// Might have several instances on the same page,
// so we TinyMCE create unique IDs and use those.
iframe.getEl().name = iframe._id;

// Create some needed hidden inputs
form.appendChild(createElement('input', {type: "hidden", name: "utf8", value: "✓"}));
form.appendChild(createElement('input', {type: 'hidden', name: 'authenticity_token', value: getMetaContents('csrf-token')}));
form.appendChild(createElement('input', {type: 'hidden', name: hintName(), value: hintValue()}));
form.appendChild(createElement('input', { type: 'hidden', name: 'utf8', value: '✓' }));
form.appendChild(
createElement('input', { type: 'hidden', name: 'authenticity_token', value: getMetaContents('csrf-token') })
);
form.appendChild(createElement('input', { type: 'hidden', name: hintName(), value: hintValue() }));

var el = win.getEl();
var body = document.getElementById(el.id + "-body");
var body = document.getElementById(el.id + '-body');

// Copy everything TinyMCE made into our form
var containers = body.getElementsByClassName('mce-container');
for(var i = 0; i < containers.length; i++) {
for (var i = 0; i < containers.length; i++) {
form.appendChild(containers[i]);
}

// Fix inputs, since TinyMCE hates HTML and forms
var inputs = form.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
for (var i = 0; i < inputs.length; i++) {
var ctrl = inputs[i];

if(ctrl.tagName.toLowerCase() == 'input' && ctrl.type != "hidden") {
if(ctrl.type == "file") {
if (ctrl.tagName.toLowerCase() === 'input' && ctrl.type !== 'hidden') {
if (ctrl.type === 'file') {
ctrl.name = inputName('file');

// Hack styles
tinymce.DOM.setStyles(ctrl, {
'border': 0,
'boxShadow': 'none',
'webkitBoxShadow': 'none',
border: 0,
boxShadow: 'none',
webkitBoxShadow: 'none'
});
} else {
ctrl.name = inputName('alt');
Expand Down Expand Up @@ -129,7 +134,7 @@
}

function insertImage() {
if(getInputValue(inputName('file')) == "") {
if (getInputValue(inputName('file')) === '') {
return handleError('You must choose a file');
}

Expand All @@ -143,7 +148,7 @@
* of errors and re-submitting afterwards.
*/
var target = iframe.getEl();
if(target.attachEvent) {
if (target.attachEvent) {
target.detachEvent('onload', uploadDone);
target.attachEvent('onload', uploadDone);
} else {
Expand All @@ -155,20 +160,20 @@
}

function uploadDone() {
if(throbber) {
if (throbber) {
throbber.hide();
}
try {
var target = iframe.getEl();
if(target.document || target.contentDocument) {
if (target.document || target.contentDocument) {
var doc = target.contentDocument || target.contentWindow.document;
if(String(doc.contentType).indexOf("html") > -1) {
handleResponse(doc.getElementsByTagName("body")[0].innerHTML);
if (String(doc.contentType).indexOf('html') > -1) {
handleResponse(doc.getElementsByTagName('body')[0].innerHTML);
} else {
handleResponse(doc.getElementsByTagName("pre")[0].innerHTML);
handleResponse(doc.getElementsByTagName('pre')[0].innerHTML);
}
}
} catch(e) {
} catch (e) {
handleError("Didn't get a response from the server");
}
}
Expand All @@ -177,34 +182,36 @@
try {
var json = tinymce.util.JSON.parse(ret);

if(json["error"]) {
handleError(json["error"]["message"]);
if (json['error']) {
handleError(json['error']['message']);
} else {
ed.execCommand('mceInsertContent', false, buildHTML(json));
ed.windowManager.close();
}
} catch(e) {
} catch (e) {
handleError('Got a bad response from the server');
}
}

function clearErrors() {
var message = win.find(".error")[0].getEl();
var message = win.find('.error')[0].getEl();

if(message)
message.getElementsByTagName("p")[0].innerHTML = "&nbsp;";
if (message) {
message.getElementsByTagName('p')[0].innerHTML = '&nbsp;';
}
}

function handleError(error) {
var message = win.find(".error")[0].getEl();
var message = win.find('.error')[0].getEl();

if(message)
message.getElementsByTagName("p")[0].innerHTML = ed.translate(error);
if (message) {
message.getElementsByTagName('p')[0].innerHTML = ed.translate(error);
}
}

function createElement(element, attributes) {
var el = document.createElement(element);
for(var property in attributes) {
for (var property in attributes) {
if (!(attributes[property] instanceof Function)) {
el[property] = attributes[property];
}
Expand All @@ -215,36 +222,41 @@

function buildHTML(json) {
var image = json[ed.getParam('uploadimage_model', 'image')];
var default_class = ed.getParam("uploadimage_default_img_class", "");
var figure = ed.getParam("uploadimage_figure", false);
var alt_text = getInputValue(inputName('alt'));
var defaultClass = ed.getParam('uploadimage_default_img_class', '');
var figure = ed.getParam('uploadimage_figure', false);
var altText = getInputValue(inputName('alt'));

var imgstr = "<img src='" + image["url"] + "'";
var imgstr = "<img src='" + image['url'] + "'";

if(default_class != "")
imgstr += " class='" + default_class + ' ' + selected_class + "'";
if (defaultClass !== '') {
imgstr += " class='" + defaultClass + ' ' + selectedClass + "'";
}

if(image["height"])
imgstr += " height='" + image["height"] + "'";
if(image["width"])
imgstr += " width='" + image["width"] + "'";
if (image['height']) {
imgstr += " height='" + image['height'] + "'";
}
if (image['width']) {
imgstr += " width='" + image['width'] + "'";
}

imgstr += " alt='" + alt_text + "'/>";
imgstr += " alt='" + altText + "'/>";

if(figure) {
var figureClass = ed.getParam("uploadimage_figure_class", "figure");
var figcaptionClass = ed.getParam("uploadimage_figcaption_class", "figcaption");
if (figure) {
var figureClass = ed.getParam('uploadimage_figure_class', 'figure');
var figcaptionClass = ed.getParam('uploadimage_figcaption_class', 'figcaption');

var figstr = "<figure";
var figstr = '<figure';

if (figureClass !== "")
if (figureClass !== '') {
figstr += " class='" + figureClass + "'";
figstr += ">" + imgstr;
figstr += "<figcaption";
if (figcaptionClass != "")
}
figstr += '>' + imgstr;
figstr += '<figcaption';
if (figcaptionClass !== '') {
figstr += " class='" + figcaptionClass + "'";
figstr += ">" + alt_text + "</figcaption>";
figstr += "</figure>";
}
figstr += '>' + altText + '</figcaption>';
figstr += '</figure>';

return figstr;
} else {
Expand All @@ -253,27 +265,31 @@
}

function getInputValue(name) {
var inputs = form.getElementsByTagName("input");
var inputs = form.getElementsByTagName('input');

for(var i in inputs)
if(inputs[i].name == name)
for (var i in inputs) {
if (inputs[i].name === name) {
return inputs[i].value;
}
}

return "";
return '';
}

function getMetaContents(mn) {
var m = document.getElementsByTagName('meta');

for(var i in m)
if(m[i].name == mn)
for (var i in m) {
if (m[i].name === mn) {
return m[i].content;
}
}

return null;
}

function getClassList() {
var config = ed.getParam('image_class_list', []);
var config = ed.getParam('image_class_list', []);
var values = [];
for (var i = 0; i < config.length; i++) {
values[i] = {
Expand All @@ -282,20 +298,20 @@
};
}
return values;
};
}

if (editor.getParam('uploadimage', true)) {
// Add a button that opens a window
editor.addButton('uploadimage', {
tooltip: ed.translate('Insert an image from your computer'),
icon : 'image',
icon: 'image',
onclick: showDialog
});

// Adds a menu item to the tools menu
editor.addMenuItem('uploadimage', {
text: ed.translate('Insert an image from your computer'),
icon : 'image',
icon: 'image',
context: 'insert',
onclick: showDialog
});
Expand Down