attachment preview: handle content with attachment bbcode inside (show preview of this attachment)

This commit is contained in:
rabuzarus 2019-02-02 23:06:11 +01:00
parent 3a15c22028
commit dcf072e77d

View file

@ -3,8 +3,8 @@
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* *
* restructured from rabzuarus (https://friendica.kommune4.de/profile/rabuzarus) * Restructured from Rabzuarus (https://friendica.kommune4.de/profile/rabuzarus)
* for the decental social network Friendica. * to use it for the decental social network Friendica (https://friendi.ca).
* *
* Version: 1.4.0 * Version: 1.4.0
*/ */
@ -65,6 +65,11 @@
var defaultTitle = opts.defaultTitle; var defaultTitle = opts.defaultTitle;
var defaultDescription = opts.defaultDescription; var defaultDescription = opts.defaultDescription;
/**
* Initialize the plugin
*
* @returns {void}
*/
var init = function() { var init = function() {
$('#' + selector).bind({ $('#' + selector).bind({
paste: function () { paste: function () {
@ -79,18 +84,41 @@
} }
} }
}); });
// Check if we have already attachment bbcode in the textarea
// and add it to the attachment preview.
var content = $('#' + selector).val();
addBBCodeToPreview(content);
}; };
/**
* Reset some values.
*
* @returns {void}
*/
var resetPreview = function() { var resetPreview = function() {
$('#hasAttachment_' + selector).val(0); $('#hasAttachment_' + selector).val(0);
photoNumber = 0; photoNumber = 0;
images = ""; images = "";
} };
/**
* Crawl a text string if it contains an url and try
* to attach it.
*
* If no text is passed to crawlText() we take
* the previous word before the cursor of the textarea.
*
* @param {string} text (optional)
* @returns {void}
*/
var crawlText = function (text) { var crawlText = function (text) {
block = false; block = false;
images = ''; images = '';
isExtern = false; isExtern = false;
// If no text is passed to crawlText() we
// take the previous word before the cursor.
if (typeof text === 'undefined') { if (typeof text === 'undefined') {
text = getPrevWord(selector); text = getPrevWord(selector);
} else { } else {
@ -121,80 +149,99 @@
} }
}; };
/**
* Process the attachment data according to
* its content type (image, audio, video, attachment)
*
* @param {object} result
* @returns {void}
*/
var processContentData = function(result) { var processContentData = function(result) {
if (result.contentType === 'image') { if (result.contentType === 'image') {
insertImage(result.data); insertImage(result.data);
} }
if (result.contentType === 'audio') {
insertAudio(result.data);
}
if (result.contentType === 'video') {
insertVideo(result.data);
}
if (result.contentType === 'attachment') { if (result.contentType === 'attachment') {
insertAttachment(result.data); insertAttachment(result.data);
} }
$('#profile-rotator').hide(); $('#profile-rotator').hide();
} };
/**
* Fetch the content of link which should be attached.
*
* @param {string} binurl Link which should be attached as hexadecimal string.
* @param {type} callback
* @returns {void}
*/
var getContentData = function(binurl, callback) { var getContentData = function(binurl, callback) {
$.get('parse_url?binurl='+ binurl + '&dataType=json', function (answer) { $.get('parse_url?binurl='+ binurl + '&dataType=json', function (answer) {
if (typeof answer.contentType === 'undefined' obj = sanitizeInputData(answer);
|| answer.contentType === null)
{
answer.contentType = "";
}
if (typeof answer.data.url === 'undefined'
|| answer.data.url === null)
{
answer.data.url = "";
}
if (typeof answer.data.title === 'undefined'
|| answer.data.title === null
|| answer.data.title === "")
{
answer.data.title = defaultTitle;
}
if (typeof answer.data.text === 'undefined'
|| answer.data.text === null
|| answer.data.text === "")
{
answer.data.text = "";
}
if (typeof answer.data.images === 'undefined'
|| answer.data.images === null)
{
answer.data.images = "";
}
// Put the data into a cache // Put the data into a cache
cache[binurl] = answer; cache[binurl] = obj;
callback(answer); callback(obj);
isCrawling = false; isCrawling = false;
}); });
} };
var insertImage = function(json) { /*
* Add a [img] bbtag with the image url to the jot editor.
*
* @param {type} data
* @returns {void}
*/
var insertImage = function(data) {
if (!isExtern) { if (!isExtern) {
return return;
} }
var bbcode = '\n[img]' + json.url + '[/img]\n'; var bbcode = '\n[img]' + data.url + '[/img]\n';
addeditortext(bbcode); addeditortext(bbcode);
}; };
var insertAudio = function(json) { /*
* Add a [audio] bbtag with the audio url to the jot editor.
*
* @param {type} data
* @returns {void}
*/
var insertAudio = function(data) {
if (!isExtern) { if (!isExtern) {
return return;
} }
var bbcode = '\n[audio]' + json.url + '[/audio]\n'; var bbcode = '\n[audio]' + data.url + '[/audio]\n';
addeditortext(bbcode); addeditortext(bbcode);
}; };
var insertVideo = function(json) { /*
* Add a [video] bbtag with the video url to the jot editor.
*
* @param {type} data
* @returns {void}
*/
var insertVideo = function(data) {
if (!isExtern) { if (!isExtern) {
return return;
} }
var bbcode = '\n[video]' + json.url + '[/video]\n'; var bbcode = '\n[video]' + json.url + '[/video]\n';
addeditortext(bbcode); addeditortext(bbcode);
}; };
var insertAttachment = function(json) { /**
* Proccess all attachment data and show up a html
* attachment preview.
*
* @param {obj} data Attachment data.
* @returns {void}
*/
var insertAttachment = function(data) {
// If we have already a preview, leaver here. // If we have already a preview, leaver here.
// Note: if we finish the Preview of other media content type, // Note: if we finish the Preview of other media content type,
// we can move this condition to the beggining of crawlText(); // we can move this condition to the beggining of crawlText();
@ -203,7 +250,7 @@
return; return;
} }
if (json.type != 'link' && json.type != 'video' && json.type != 'photo' || json.url == json.title) { if (data.type !== 'link' && data.type !== 'video' && data.type !== 'photo' || data.url === data.title) {
$('#profile-rotator').hide(); $('#profile-rotator').hide();
return; return;
} }
@ -211,48 +258,88 @@
$('#photoNumber_' + selector).val(0); $('#photoNumber_' + selector).val(0);
resetPreview(); resetPreview();
var typeClass = 'type-' + json.type; processAttachmentTpl(data, 'type-' + data.type);
var imageClass = 'attachment-preview'; addTitleDescription(data);
var urlHost = ""; addHostToAttachment(data.url);
var description = json.text; addImagesToAttachment(data.images);
processEventListener();
$('#profile-rotator').hide();
};
/**
* Construct the attachment html from the attachment template and
* add it to the DOM.
*
* @param {object} data Attachment data.
* @returns {void}
*/
var processAttachmentTpl = function(data) {
// Load and add the template if it isn't allready loaded. // Load and add the template if it isn't allready loaded.
if ($('#preview_' + selector).length == 0) { if ($('#preview_' + selector).length === 0) {
var tpl = previewTpl.format( var tpl = previewTpl.format(
typeClass, 'type-' + data.type,
attachmentTpl, attachmentTpl,
1, 1,
bin2hex(json.url), bin2hex(data.url),
json.type data.type
); );
$('#' + selector).after(tpl); $('#' + selector).after(tpl);
} }
isActive = true; isActive = true;
};
/**
* Add the attachment title and the description
* to the attachment preview.
*
* @param {object} data Attachment data.
* @returns {void}
*/
var addTitleDescription = function(data) {
var description = data.text;
if (description === '') { if (description === '') {
description = defaultDescription; description = defaultDescription;
} }
$('#previewTitle_' + selector).html("\ $('#previewTitle_' + selector).html("\
<span id='previewSpanTitle_" + selector + "' class='previewSpanTitle' >" + escapeHTML(json.title) + "</span>\ <span id='previewSpanTitle_" + selector + "' class='previewSpanTitle' >" + escapeHTML(data.title) + "</span>\
<input type='text' name='attachment_title' value='" + escapeHTML(json.title) + "' id='previewInputTitle_" + selector + "' class='previewInputTitle inputPreview' style='display: none;'/>" <input type='text' name='attachment_title' value='" + escapeHTML(data.title) + "' id='previewInputTitle_" + selector + "' class='previewInputTitle inputPreview' style='display: none;'/>"
); );
$('#previewDescription_' + selector).html("\ $('#previewDescription_' + selector).html("\
<span id='previewSpanDescription_" + selector + "' class='previewSpanDescription' >" + escapeHTML(description) + "</span>\n\ <span id='previewSpanDescription_" + selector + "' class='previewSpanDescription' >" + escapeHTML(description) + "</span>\n\
<textarea id='previewInputDescription_" + selector + "' name='attachment_text' class='previewInputDescription' style='display: none;' class='inputPreview' >" + escapeHTML(json.text) + "</textarea>" <textarea id='previewInputDescription_" + selector + "' name='attachment_text' class='previewInputDescription' style='display: none;' class='inputPreview' >" + escapeHTML(data.text) + "</textarea>"
); );
};
if (json.url) { /**
* Add the host to the attachment preview.
*
* @param {string} url The url of the link attachment.
* @returns {void}
*/
var addHostToAttachment = function(url) {
if (url) {
var regexpr = "(https?://)([^:^/]*)(:\\d*)?(.*)?"; var regexpr = "(https?://)([^:^/]*)(:\\d*)?(.*)?";
var regResult = json.url.match(regexpr); var regResult = url.match(regexpr);
var urlHost = regResult[1] + regResult[2]; var urlHost = regResult[1] + regResult[2];
$('#previewUrl_' + selector).html("<a href='" + json.url + "'>" + urlHost + "</a>"); $('#previewUrl_' + selector).html("<a href='" + url + "'>" + urlHost + "</a>");
} }
};
images = json.images; /**
* Add preview images to the attachment.
*
* @param {array} images
*
* @returns {void}
*/
var addImagesToAttachment = function(images) {
var imageClass = 'attachment-preview';
if (Array.isArray(images)) { if (Array.isArray(images)) {
$('#previewImages_' + selector).show(); $('#previewImages_' + selector).show();
$('#attachmentImageSrc_' + selector).val(bin2hex(images[photoNumber].src)); $('#attachmentImageSrc_' + selector).val(bin2hex(images[photoNumber].src));
@ -267,12 +354,11 @@
for (i = 0; i < images.length; i++) { for (i = 0; i < images.length; i++) {
// For small preview images we use a smaller attachment format. // For small preview images we use a smaller attachment format.
// if (Array.isArray(images) && typeof images[i].width !== 'undefined') { ///@todo here we need to add a check for !Config::get('system', 'always_show_preview').
///@todo here we need to add a check for !Config::get('system', 'always_show_preview'). if (images[i].width >= 500 && images[i].width >= images[i].height) {
if (images[i].width >= 500 && images[i].width >= images[i].height) { imageClass = 'attachment-image';
imageClass = 'attachment-image'; }
}
// }
if (i === 0) { if (i === 0) {
appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' ></img>"; appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' ></img>";
} else { } else {
@ -314,11 +400,13 @@
}); });
} }
} }
processEventListener();
$('#profile-rotator').hide();
}; };
/**
* Add event listener to control the attachment preview.
*
* @returns {void}
*/
var processEventListener = function() { var processEventListener = function() {
$('#previewSpanTitle_' + selector).unbind('click').click(function (e) { $('#previewSpanTitle_' + selector).unbind('click').click(function (e) {
e.stopPropagation(); e.stopPropagation();
@ -407,11 +495,262 @@
$('#preview_' + selector).fadeOut("fast", function () { $('#preview_' + selector).fadeOut("fast", function () {
$('#preview_' + selector).remove(); $('#preview_' + selector).remove();
$('#profile-rotator').hide(); $('#profile-rotator').hide();
$('#' + selector).focus();
}); });
}); });
}; };
/**
* Convert attachmant bbcode into an array.
*
* @param {string} content Text content with the attachment bbcode.
* @returns {object || null}
*/
var getAttachmentData = function(content) {
var data = {};
var match = content.match(/(.*)\[attachment(.*?)\](.*?)\[\/attachment\](.*)/ism);
if (match === null || match.length < 5) {
return null;
}
var attributes = match[2];
data.text = trim(match[1]);
var type = '';
var matches = attributes.match(/type='(.*?)'/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
type = matches[1].toLowerCase();
}
matches = attributes.match(/type="(.*?)"/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
type = matches[1].toLowerCase();
}
if (type === '') {
return null;
}
if (
type !== 'link'
&& type !== 'audio'
&& type !== 'photo'
&& type !== 'video')
{
return null;
}
if (type !== '') {
data.type = type;
}
var url = '';
matches = attributes.match(/url='(.*?)'/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
url = matches[1].toLowerCase();
}
matches = attributes.match(/url="(.*?)"/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
url = matches[1].toLowerCase();
}
if(url !== '') {
data.url = escapeHTML(url);
}
var title = '';
matches = attributes.match(/title='(.*?)'/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
title = matches[1].toLowerCase();
}
matches = attributes.match(/title="(.*?)"/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
title = matches[1].toLowerCase();
}
if (title !== '') {
data.title = escapeHTML(title);
}
var image = '';
matches = attributes.match(/image='(.*?)'/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
image = matches[1].toLowerCase();
}
matches = attributes.match(/image="(.*?)"/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
image = matches[1].toLowerCase();
}
if (image !== '') {
data.image = escapeHTML(image);
}
var preview = '';
matches = attributes.match(/preview='(.*?)'/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
preview = matches[1].toLowerCase();
}
matches = attributes.match(/preview="(.*?)"/ism);
if (matches !== null && typeof matches[1] !== 'undefined') {
preview = matches[1].toLowerCase();
}
if (preview !== '') {
data.preview = escapeHTML(preview);
}
data.text = trim(match[3]);
data.after = trim(match[4]);
return data;
};
/**
* Process txt content and if it contains attachment bbcode
* add it to the attachment preview .
*
* @param {string} content
* @returns {void}
*/
var addBBCodeToPreview =function(content) {
var attachmentData = getAttachmentData(content);
if (attachmentData) {
reAddAttachment(attachmentData);
// Remove the attachment bbcode from the textarea.
var content = content.replace(/\[attachment.*\[\/attachment]/ism, '');
$('#' + selector).val(content);
$('#' + selector).focus();
}
};
/**
* Add an Attachment with data from an old bbcode
* generated attachment.
*
* @param {object} json The attachment data.
* @returns {void}
*/
var reAddAttachment = function(json) {
if (isActive) {
$('#profile-rotator').hide();
return;
}
if (json.type !== 'link' && json.type !== 'video' && json.type !== 'photo' || json.url === json.title) {
$('#profile-rotator').hide();
return;
}
var obj = {data: json};
obj = sanitizeInputData(obj);
var data = obj.data;
resetPreview();
processAttachmentTpl(data);
addTitleDescription(data);
addHostToAttachment(data.url);
// Since we don't have an array of image data,
// we need to add the preview images in a different way
// than in function addImagesToAttachment().
var imageClass = 'attachment-preview';
var image = '';
if (data.image !== '') {
imageClass = 'attachment-image';
image = data.image;
} else {
image = data.preview;
}
if (image !== '') {
var appendImage = "<img id='imagePreview_" + selector + "' src='" + image + "' class='" + imageClass + "' ></img>"
$('#previewImage_' + selector).html(appendImage);
$('#attachmentImageSrc_' + selector).val(bin2hex(image));
// We need to add the image widht and height when it is
// loaded.
$('<img/>' ,{
load : function(){
$('#attachmentImageWidth_' + selector).val(this.width);
$('#attachmentImageHeight_' + selector).val(this.height);
},
src : image
});
}
processEventListener();
$('#profile-rotator').hide();
};
/**
* Add missing default properties to the input data object.
*
* @param {object} obj Input data.
* @returns {object}
*/
var sanitizeInputData = function(obj) {
if (typeof obj.contentType === 'undefined'
|| obj.contentType === null)
{
obj.contentType = "";
}
if (typeof obj.data.url === 'undefined'
|| obj.data.url === null)
{
obj.data.url = "";
}
if (typeof obj.data.title === 'undefined'
|| obj.data.title === null
|| obj.data.title === "")
{
obj.data.title = defaultTitle;
}
if (typeof obj.data.text === 'undefined'
|| obj.data.text === null
|| obj.data.text === "")
{
obj.data.text = "";
}
if (typeof obj.data.images === 'undefined'
|| obj.data.images === null)
{
obj.data.images = "";
}
if (typeof obj.data.image === 'undefined'
|| obj.data.image === null)
{
obj.data.image = "";
}
if (typeof obj.data.preview === 'undefined'
|| obj.data.preview === null)
{
obj.data.preview = "";
}
return obj;
};
/**
* Destroy the plugin.
*
* @returns {void}
*/
var destroy = function() { var destroy = function() {
$('#' + selector).unbind(); $('#' + selector).unbind();
$('#preview_' + selector).remove(); $('#preview_' + selector).remove();
@ -441,7 +780,7 @@
.replace(/\[/g, '&#91;') .replace(/\[/g, '&#91;')
.replace(/\]/g, '&#93;') .replace(/\]/g, '&#93;')
.replace(/\'/g, '&#39;'); // '&apos;' is not valid HTML 4 .replace(/\'/g, '&#39;'); // '&apos;' is not valid HTML 4
} };
// Initialize LinkPreview // Initialize LinkPreview
init(); init();
@ -451,6 +790,9 @@
crawlText: function(text) { crawlText: function(text) {
crawlText(text); crawlText(text);
}, },
addBBCodeToPreview: function(content) {
addBBCodeToPreview(content);
},
destroy: function() { destroy: function() {
destroy(); destroy();
} }