friendica
/
friendica
mirror of https://github.com/friendica/friendica
6
0
Fork 1
Code Issues Packages Projects Releases 1 Wiki Activity

Update linkPreview to allow using a generic selector 

- The individual textareas still need an id attribute to be set
This commit is contained in:
Hypolite Petovan 2019-11-28 12:48:59 -05:00
parent e8f91d7e54
commit 39d0735236
1 changed files with 97 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
view/js/linkPreview.js
View File

@ -14,40 +14,39 @@
$.fn.linkPreview = function (options) { $.fn.linkPreview = function (options) {
var opts = jQuery.extend({}, $.fn.linkPreview.defaults, options); var opts = jQuery.extend({}, $.fn.linkPreview.defaults, options);
var selector = $(this).selector; var id = $(this).attr('id');
selector = selector.substr(1);
var previewTpl = '\ var previewTpl = '\
<div id="preview_' + selector + '" class="preview {0}">\ <div id="preview_' + id + '" class="preview {0}">\
{1}\ {1}\
<input type="hidden" name="has_attachment" id="hasAttachment_' + selector + '" value="{2}" />\ <input type="hidden" name="has_attachment" id="hasAttachment_' + id + '" value="{2}" />\
<input type="hidden" name="attachment_url" id="attachmentUrl_' + selector + '" value="{3}" />\ <input type="hidden" name="attachment_url" id="attachmentUrl_' + id + '" value="{3}" />\
<input type="hidden" name="attachment_type" id="attachmentType_' + selector + '" value="{4}" />\ <input type="hidden" name="attachment_type" id="attachmentType_' + id + '" value="{4}" />\
</div>'; </div>';
var attachmentTpl = '\ var attachmentTpl = '\
<hr class="previewseparator">\ <hr class="previewseparator">\
<div id="closePreview_' + selector + '" title="Remove" class="closePreview" >\ <div id="closePreview_' + id + '" title="Remove" class="closePreview" >\
<button type="button" class="previewActionBtn">×</button>\ <button type="button" class="previewActionBtn">×</button>\
</div>\ </div>\
<div id="previewImages_' + selector + '" class="previewImages">\ <div id="previewImages_' + id + '" class="previewImages">\
<div id="previewImgBtn_' + selector + '" class="previewImgBtn">\ <div id="previewImgBtn_' + id + '" class="previewImgBtn">\
<button type="button" id="previewChangeImg_' + selector + '" class="buttonChangeDeactive previewActionBtn" style="display: none">\ <button type="button" id="previewChangeImg_' + id + '" class="buttonChangeDeactive previewActionBtn" style="display: none">\
<i class="fa fa-exchange" aria-hidden="true"></i>\ <i class="fa fa-exchange" aria-hidden="true"></i>\
</button>\ </button>\
</div>\ </div>\
<div id="previewImage_' + selector + '" class="previewImage">\ <div id="previewImage_' + id + '" class="previewImage">\
</div>\ </div>\
<input type="hidden" id="photoNumber_' + selector + '" class="photoNumber" value="0" />\ <input type="hidden" id="photoNumber_' + id + '" class="photoNumber" value="0" />\
<input type="hidden" name="attachment_img_src" id="attachmentImageSrc_' + selector + '" value="" />\ <input type="hidden" name="attachment_img_src" id="attachmentImageSrc_' + id + '" value="" />\
<input type="hidden" name="attachment_img_width" id="attachmentImageWidth_' + selector + '" value="0" />\ <input type="hidden" name="attachment_img_width" id="attachmentImageWidth_' + id + '" value="0" />\
<input type="hidden" name="attachment_img_height" id="attachmentImageHeight_' + selector + '" value="0" />\ <input type="hidden" name="attachment_img_height" id="attachmentImageHeight_' + id + '" value="0" />\
</div>\ </div>\
<div id="previewContent_' + selector + '" class="previewContent">\ <div id="previewContent_' + id + '" class="previewContent">\
<h4 id="previewTitle_' + selector + '" class="previewTitle"></h4>\ <h4 id="previewTitle_' + id + '" class="previewTitle"></h4>\
<blockquote id="previewDescription_' + selector + '" class="previewDescription"></blockquote>\ <blockquote id="previewDescription_' + id + '" class="previewDescription"></blockquote>\
<div id="hiddenDescription_' + selector + '" class="hiddenDescription"></div>\ <div id="hiddenDescription_' + id + '" class="hiddenDescription"></div>\
<sup id="previewUrl_' + selector + '" class="previewUrl"></sup>\ <sup id="previewUrl_' + id + '" class="previewUrl"></sup>\
</div>\ </div>\
<div class="clear"></div>\ <div class="clear"></div>\
<hr class="previewseparator">'; <hr class="previewseparator">';
@ -72,7 +71,7 @@
* @returns {void} * @returns {void}
*/ */
var init = function() { var init = function() {
$('#' + selector).bind({ $('#' + id).bind({
paste: function () { paste: function () {
setTimeout(function () { setTimeout(function () {
crawlText(); crawlText();
@ -88,7 +87,7 @@
// Check if we have already attachment bbcode in the textarea // Check if we have already attachment bbcode in the textarea
// and add it to the attachment preview. // and add it to the attachment preview.
var content = $('#' + selector).val(); var content = $('#' + id).val();
addBBCodeToPreview(content); addBBCodeToPreview(content);
}; };
@ -98,7 +97,7 @@
* @returns {void} * @returns {void}
*/ */
var resetPreview = function() { var resetPreview = function() {
$('#hasAttachment_' + selector).val(0); $('#hasAttachment_' + id).val(0);
photoNumber = 0; photoNumber = 0;
images = ""; images = "";
}; };
@ -121,7 +120,7 @@
// If no text is passed to crawlText() we // If no text is passed to crawlText() we
// take the previous word before the cursor. // take the previous word before the cursor.
if (typeof text === 'undefined') { if (typeof text === 'undefined') {
text = getPrevWord(selector); text = getPrevWord(id);
} else { } else {
isExtern = true; isExtern = true;
} }
@ -254,7 +253,7 @@
return; return;
} }
$('#photoNumber_' + selector).val(0); $('#photoNumber_' + id).val(0);
resetPreview(); resetPreview();
processAttachmentTpl(data, 'type-' + data.type); processAttachmentTpl(data, 'type-' + data.type);
@ -275,7 +274,7 @@
*/ */
var processAttachmentTpl = function(data) { 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_' + id).length === 0) {
var tpl = previewTpl.format( var tpl = previewTpl.format(
'type-' + data.type, 'type-' + data.type,
attachmentTpl, attachmentTpl,
@ -283,7 +282,7 @@
bin2hex(data.url), bin2hex(data.url),
data.type data.type
); );
$('#' + selector).after(tpl); $('#' + id).after(tpl);
} }
isActive = true; isActive = true;
@ -303,14 +302,14 @@
description = defaultDescription; description = defaultDescription;
} }
$('#previewTitle_' + selector).html("\ $('#previewTitle_' + id).html("\
<span id='previewSpanTitle_" + selector + "' class='previewSpanTitle' >" + escapeHTML(data.title) + "</span>\ <span id='previewSpanTitle_" + id + "' class='previewSpanTitle' >" + escapeHTML(data.title) + "</span>\
<input type='text' name='attachment_title' value='" + escapeHTML(data.title) + "' id='previewInputTitle_" + selector + "' class='previewInputTitle inputPreview' style='display: none;'/>" <input type='text' name='attachment_title' value='" + escapeHTML(data.title) + "' id='previewInputTitle_" + id + "' class='previewInputTitle inputPreview' style='display: none;'/>"
); );
$('#previewDescription_' + selector).html("\ $('#previewDescription_' + id).html("\
<span id='previewSpanDescription_" + selector + "' class='previewSpanDescription' >" + escapeHTML(description) + "</span>\n\ <span id='previewSpanDescription_" + id + "' class='previewSpanDescription' >" + escapeHTML(description) + "</span>\n\
<textarea id='previewInputDescription_" + selector + "' name='attachment_text' class='previewInputDescription' style='display: none;' class='inputPreview' >" + escapeHTML(data.text) + "</textarea>" <textarea id='previewInputDescription_" + id + "' name='attachment_text' class='previewInputDescription' style='display: none;' class='inputPreview' >" + escapeHTML(data.text) + "</textarea>"
); );
}; };
@ -325,7 +324,7 @@
var regexpr = "(https?://)([^:^/]*)(:\\d*)?(.*)?"; var regexpr = "(https?://)([^:^/]*)(:\\d*)?(.*)?";
var regResult = 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='" + url + "'>" + urlHost + "</a>"); $('#previewUrl_' + id).html("<a href='" + url + "'>" + urlHost + "</a>");
} }
}; };
@ -340,12 +339,12 @@
var imageClass = 'attachment-preview'; var imageClass = 'attachment-preview';
if (Array.isArray(images)) { if (Array.isArray(images)) {
$('#previewImages_' + selector).show(); $('#previewImages_' + id).show();
$('#attachmentImageSrc_' + selector).val(bin2hex(images[photoNumber].src)); $('#attachmentImageSrc_' + id).val(bin2hex(images[photoNumber].src));
$('#attachmentImageWidth_' + selector).val(images[photoNumber].width); $('#attachmentImageWidth_' + id).val(images[photoNumber].width);
$('#attachmentImageHeight_' + selector).val(images[photoNumber].height); $('#attachmentImageHeight_' + id).val(images[photoNumber].height);
} else { } else {
$('#previewImages_' + selector).hide(); $('#previewImages_' + id).hide();
} }
images.length = parseInt(images.length); images.length = parseInt(images.length);
@ -359,26 +358,26 @@
} }
if (i === 0) { if (i === 0) {
appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' ></img>"; appendImage += "<img id='imagePreview_" + id + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' ></img>";
} else { } else {
appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' style='display: none;'></img>"; appendImage += "<img id='imagePreview_" + id + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' style='display: none;'></img>";
} }
} }
$('#previewImage_' + selector).html(appendImage + "<div id='whiteImage' style='color: transparent; display:none;'>...</div>"); $('#previewImage_' + id).html(appendImage + "<div id='whiteImage' style='color: transparent; display:none;'>...</div>");
// More than just one image. // More than just one image.
if (images.length > 1) { if (images.length > 1) {
// Enable the the button to change the preview pictures. // Enable the the button to change the preview pictures.
$('#previewChangeImg_' + selector).show(); $('#previewChangeImg_' + id).show();
if (firstPosted === false) { if (firstPosted === false) {
firstPosted = true; firstPosted = true;
$('#previewChangeImg_' + selector).unbind('click').click(function (e) { $('#previewChangeImg_' + id).unbind('click').click(function (e) {
e.stopPropagation(); e.stopPropagation();
if (images.length > 1) { if (images.length > 1) {
$('#imagePreview_' + selector + '_' + photoNumber).css({ $('#imagePreview_' + id + '_' + photoNumber).css({
'display': 'none' 'display': 'none'
}); });
photoNumber += 1; photoNumber += 1;
@ -388,13 +387,13 @@
photoNumber = 0; photoNumber = 0;
} }
$('#imagePreview_' + selector + '_' + photoNumber).css({ $('#imagePreview_' + id + '_' + photoNumber).css({
'display': 'block' 'display': 'block'
}); });
$('#photoNumber_' + selector).val(photoNumber); $('#photoNumber_' + id).val(photoNumber);
$('#attachmentImageSrc_' + selector).val(bin2hex(images[photoNumber].src)); $('#attachmentImageSrc_' + id).val(bin2hex(images[photoNumber].src));
$('#attachmentImageWidth_' + selector).val(images[photoNumber].width); $('#attachmentImageWidth_' + id).val(images[photoNumber].width);
$('#attachmentImageHeight_' + selector).val(images[photoNumber].height); $('#attachmentImageHeight_' + id).val(images[photoNumber].height);
} }
}); });
} }
@ -407,94 +406,94 @@
* @returns {void} * @returns {void}
*/ */
var processEventListener = function() { var processEventListener = function() {
$('#previewSpanTitle_' + selector).unbind('click').click(function (e) { $('#previewSpanTitle_' + id).unbind('click').click(function (e) {
e.stopPropagation(); e.stopPropagation();
if (blockTitle === false) { if (blockTitle === false) {
blockTitle = true; blockTitle = true;
$('#previewSpanTitle_' + selector).hide(); $('#previewSpanTitle_' + id).hide();
$('#previewInputTitle_' + selector).show(); $('#previewInputTitle_' + id).show();
$('#previewInputTitle_' + selector).val($('#previewInputTitle_' + selector).val()); $('#previewInputTitle_' + id).val($('#previewInputTitle_' + id).val());
$('#previewInputTitle_' + selector).focus().select(); $('#previewInputTitle_' + id).focus().select();
} }
}); });
$('#previewInputTitle_' + selector).blur(function () { $('#previewInputTitle_' + id).blur(function () {
blockTitle = false; blockTitle = false;
$('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val()); $('#previewSpanTitle_' + id).html($('#previewInputTitle_' + id).val());
$('#previewSpanTitle_' + selector).show(); $('#previewSpanTitle_' + id).show();
$('#previewInputTitle_' + selector).hide(); $('#previewInputTitle_' + id).hide();
}); });
$('#previewInputTitle_' + selector).keypress(function (e) { $('#previewInputTitle_' + id).keypress(function (e) {
if (e.which === 13) { if (e.which === 13) {
blockTitle = false; blockTitle = false;
$('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val()); $('#previewSpanTitle_' + id).html($('#previewInputTitle_' + id).val());
$('#previewSpanTitle_' + selector).show(); $('#previewSpanTitle_' + id).show();
$('#previewInputTitle_' + selector).hide(); $('#previewInputTitle_' + id).hide();
} }
}); });
$('#previewSpanDescription_' + selector).unbind('click').click(function (e) { $('#previewSpanDescription_' + id).unbind('click').click(function (e) {
e.stopPropagation(); e.stopPropagation();
if (blockDescription === false) { if (blockDescription === false) {
blockDescription = true; blockDescription = true;
$('#previewSpanDescription_' + selector).hide(); $('#previewSpanDescription_' + id).hide();
$('#previewInputDescription_' + selector).show(); $('#previewInputDescription_' + id).show();
$('#previewInputDescription_' + selector).val($('#previewInputDescription_' + selector).val()); $('#previewInputDescription_' + id).val($('#previewInputDescription_' + id).val());
$('#previewInputDescription_' + selector).focus().select(); $('#previewInputDescription_' + id).focus().select();
} }
}); });
$('#previewInputDescription_' + selector).blur(function () { $('#previewInputDescription_' + id).blur(function () {
blockDescription = false; blockDescription = false;
$('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val()); $('#previewSpanDescription_' + id).html($('#previewInputDescription_' + id).val());
$('#previewSpanDescription_' + selector).show(); $('#previewSpanDescription_' + id).show();
$('#previewInputDescription_' + selector).hide(); $('#previewInputDescription_' + id).hide();
}); });
$('#previewInputDescription_' + selector).keypress(function (e) { $('#previewInputDescription_' + id).keypress(function (e) {
if (e.which === 13) { if (e.which === 13) {
blockDescription = false; blockDescription = false;
$('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val()); $('#previewSpanDescription_' + id).html($('#previewInputDescription_' + id).val());
$('#previewSpanDescription_' + selector).show(); $('#previewSpanDescription_' + id).show();
$('#previewInputDescription_' + selector).hide(); $('#previewInputDescription_' + id).hide();
} }
}); });
$('#previewSpanTitle_' + selector).mouseover(function () { $('#previewSpanTitle_' + id).mouseover(function () {
$('#previewSpanTitle_' + selector).css({ $('#previewSpanTitle_' + id).css({
"background-color": "#ff9" "background-color": "#ff9"
}); });
}); });
$('#previewSpanTitle_' + selector).mouseout(function () { $('#previewSpanTitle_' + id).mouseout(function () {
$('#previewSpanTitle_' + selector).css({ $('#previewSpanTitle_' + id).css({
"background-color": "transparent" "background-color": "transparent"
}); });
}); });
$('#previewSpanDescription_' + selector).mouseover(function () { $('#previewSpanDescription_' + id).mouseover(function () {
$('#previewSpanDescription_' + selector).css({ $('#previewSpanDescription_' + id).css({
"background-color": "#ff9" "background-color": "#ff9"
}); });
}); });
$('#previewSpanDescription_' + selector).mouseout(function () { $('#previewSpanDescription_' + id).mouseout(function () {
$('#previewSpanDescription_' + selector).css({ $('#previewSpanDescription_' + id).css({
"background-color": "transparent" "background-color": "transparent"
}); });
}); });
$('#closePreview_' + selector).unbind('click').click(function (e) { $('#closePreview_' + id).unbind('click').click(function (e) {
e.stopPropagation(); e.stopPropagation();
block = false; block = false;
images = ''; images = '';
isActive = false; isActive = false;
firstPosted = false; firstPosted = false;
$('#preview_' + selector).fadeOut("fast", function () { $('#preview_' + id).fadeOut("fast", function () {
$('#preview_' + selector).remove(); $('#preview_' + id).remove();
$('#profile-rotator').hide(); $('#profile-rotator').hide();
$('#' + selector).focus(); $('#' + id).focus();
}); });
}); });
@ -628,8 +627,8 @@
reAddAttachment(attachmentData); reAddAttachment(attachmentData);
// Remove the attachment bbcode from the textarea. // Remove the attachment bbcode from the textarea.
var content = content.replace(/\[attachment[\s\S]*\[\/attachment]/im, ''); var content = content.replace(/\[attachment[\s\S]*\[\/attachment]/im, '');
$('#' + selector).val(content); $('#' + id).val(content);
$('#' + selector).focus(); $('#' + id).focus();
} }
}; };
@ -676,16 +675,16 @@
} }
if (image !== '') { if (image !== '') {
var appendImage = "<img id='imagePreview_" + selector + "' src='" + image + "' class='" + imageClass + "' ></img>" var appendImage = "<img id='imagePreview_" + id + "' src='" + image + "' class='" + imageClass + "' ></img>"
$('#previewImage_' + selector).html(appendImage); $('#previewImage_' + id).html(appendImage);
$('#attachmentImageSrc_' + selector).val(bin2hex(image)); $('#attachmentImageSrc_' + id).val(bin2hex(image));
// We need to add the image widht and height when it is // We need to add the image widht and height when it is
// loaded. // loaded.
$('<img/>' ,{ $('<img/>' ,{
load : function(){ load : function(){
$('#attachmentImageWidth_' + selector).val(this.width); $('#attachmentImageWidth_' + id).val(this.width);
$('#attachmentImageHeight_' + selector).val(this.height); $('#attachmentImageHeight_' + id).val(this.height);
}, },
src : image src : image
}); });
@ -751,8 +750,8 @@
* @returns {void} * @returns {void}
*/ */
var destroy = function() { var destroy = function() {
$('#' + selector).unbind(); $('#' + id).unbind();
$('#preview_' + selector).remove(); $('#preview_' + id).remove();
binurl; binurl;
block = false; block = false;
blockTitle = false; blockTitle = false;
@ -764,7 +763,7 @@
firstPosted = false; firstPosted = false;
isActive = false; isActive = false;
isCrawling = false; isCrawling = false;
selector = ""; id = "";
}; };
var trim = function(str) { var trim = function(str) {