From 39d073523662cce61e40daf51806624688b1aeba Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Thu, 28 Nov 2019 12:48:59 -0500 Subject: [PATCH] Update linkPreview to allow using a generic selector - The individual textareas still need an id attribute to be set --- view/js/linkPreview.js | 195 ++++++++++++++++++++--------------------- 1 file changed, 97 insertions(+), 98 deletions(-) diff --git a/view/js/linkPreview.js b/view/js/linkPreview.js index 09493eebad..f7278ce5b2 100644 --- a/view/js/linkPreview.js +++ b/view/js/linkPreview.js @@ -14,40 +14,39 @@ $.fn.linkPreview = function (options) { var opts = jQuery.extend({}, $.fn.linkPreview.defaults, options); - var selector = $(this).selector; - selector = selector.substr(1); + var id = $(this).attr('id'); var previewTpl = '\ -
\ +
\ {1}\ - \ - \ - \ + \ + \ + \
'; var attachmentTpl = '\
\ -
\ +
\ \
\ -
\ -
\ - \
\ -
\ +
\
\ - \ - \ - \ - \ + \ + \ + \ + \
\ -
\ -

\ -
\ -
\ - \ +
\ +

\ +
\ +
\ + \
\
\
'; @@ -72,7 +71,7 @@ * @returns {void} */ var init = function() { - $('#' + selector).bind({ + $('#' + id).bind({ paste: function () { setTimeout(function () { crawlText(); @@ -88,7 +87,7 @@ // Check if we have already attachment bbcode in the textarea // and add it to the attachment preview. - var content = $('#' + selector).val(); + var content = $('#' + id).val(); addBBCodeToPreview(content); }; @@ -98,7 +97,7 @@ * @returns {void} */ var resetPreview = function() { - $('#hasAttachment_' + selector).val(0); + $('#hasAttachment_' + id).val(0); photoNumber = 0; images = ""; }; @@ -121,7 +120,7 @@ // If no text is passed to crawlText() we // take the previous word before the cursor. if (typeof text === 'undefined') { - text = getPrevWord(selector); + text = getPrevWord(id); } else { isExtern = true; } @@ -254,7 +253,7 @@ return; } - $('#photoNumber_' + selector).val(0); + $('#photoNumber_' + id).val(0); resetPreview(); processAttachmentTpl(data, 'type-' + data.type); @@ -275,7 +274,7 @@ */ var processAttachmentTpl = function(data) { // 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( 'type-' + data.type, attachmentTpl, @@ -283,7 +282,7 @@ bin2hex(data.url), data.type ); - $('#' + selector).after(tpl); + $('#' + id).after(tpl); } isActive = true; @@ -303,14 +302,14 @@ description = defaultDescription; } - $('#previewTitle_' + selector).html("\ - " + escapeHTML(data.title) + "\ - " + $('#previewTitle_' + id).html("\ + " + escapeHTML(data.title) + "\ + " ); - $('#previewDescription_' + selector).html("\ - " + escapeHTML(description) + "\n\ - " + $('#previewDescription_' + id).html("\ + " + escapeHTML(description) + "\n\ + " ); }; @@ -325,7 +324,7 @@ var regexpr = "(https?://)([^:^/]*)(:\\d*)?(.*)?"; var regResult = url.match(regexpr); var urlHost = regResult[1] + regResult[2]; - $('#previewUrl_' + selector).html("" + urlHost + ""); + $('#previewUrl_' + id).html("" + urlHost + ""); } }; @@ -340,12 +339,12 @@ var imageClass = 'attachment-preview'; if (Array.isArray(images)) { - $('#previewImages_' + selector).show(); - $('#attachmentImageSrc_' + selector).val(bin2hex(images[photoNumber].src)); - $('#attachmentImageWidth_' + selector).val(images[photoNumber].width); - $('#attachmentImageHeight_' + selector).val(images[photoNumber].height); + $('#previewImages_' + id).show(); + $('#attachmentImageSrc_' + id).val(bin2hex(images[photoNumber].src)); + $('#attachmentImageWidth_' + id).val(images[photoNumber].width); + $('#attachmentImageHeight_' + id).val(images[photoNumber].height); } else { - $('#previewImages_' + selector).hide(); + $('#previewImages_' + id).hide(); } images.length = parseInt(images.length); @@ -359,26 +358,26 @@ } if (i === 0) { - appendImage += ""; + appendImage += ""; } else { - appendImage += ""; + appendImage += ""; } } - $('#previewImage_' + selector).html(appendImage + ""); + $('#previewImage_' + id).html(appendImage + ""); // More than just one image. if (images.length > 1) { // Enable the the button to change the preview pictures. - $('#previewChangeImg_' + selector).show(); + $('#previewChangeImg_' + id).show(); if (firstPosted === false) { firstPosted = true; - $('#previewChangeImg_' + selector).unbind('click').click(function (e) { + $('#previewChangeImg_' + id).unbind('click').click(function (e) { e.stopPropagation(); if (images.length > 1) { - $('#imagePreview_' + selector + '_' + photoNumber).css({ + $('#imagePreview_' + id + '_' + photoNumber).css({ 'display': 'none' }); photoNumber += 1; @@ -388,13 +387,13 @@ photoNumber = 0; } - $('#imagePreview_' + selector + '_' + photoNumber).css({ + $('#imagePreview_' + id + '_' + photoNumber).css({ 'display': 'block' }); - $('#photoNumber_' + selector).val(photoNumber); - $('#attachmentImageSrc_' + selector).val(bin2hex(images[photoNumber].src)); - $('#attachmentImageWidth_' + selector).val(images[photoNumber].width); - $('#attachmentImageHeight_' + selector).val(images[photoNumber].height); + $('#photoNumber_' + id).val(photoNumber); + $('#attachmentImageSrc_' + id).val(bin2hex(images[photoNumber].src)); + $('#attachmentImageWidth_' + id).val(images[photoNumber].width); + $('#attachmentImageHeight_' + id).val(images[photoNumber].height); } }); } @@ -407,94 +406,94 @@ * @returns {void} */ var processEventListener = function() { - $('#previewSpanTitle_' + selector).unbind('click').click(function (e) { + $('#previewSpanTitle_' + id).unbind('click').click(function (e) { e.stopPropagation(); if (blockTitle === false) { blockTitle = true; - $('#previewSpanTitle_' + selector).hide(); - $('#previewInputTitle_' + selector).show(); - $('#previewInputTitle_' + selector).val($('#previewInputTitle_' + selector).val()); - $('#previewInputTitle_' + selector).focus().select(); + $('#previewSpanTitle_' + id).hide(); + $('#previewInputTitle_' + id).show(); + $('#previewInputTitle_' + id).val($('#previewInputTitle_' + id).val()); + $('#previewInputTitle_' + id).focus().select(); } }); - $('#previewInputTitle_' + selector).blur(function () { + $('#previewInputTitle_' + id).blur(function () { blockTitle = false; - $('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val()); - $('#previewSpanTitle_' + selector).show(); - $('#previewInputTitle_' + selector).hide(); + $('#previewSpanTitle_' + id).html($('#previewInputTitle_' + id).val()); + $('#previewSpanTitle_' + id).show(); + $('#previewInputTitle_' + id).hide(); }); - $('#previewInputTitle_' + selector).keypress(function (e) { + $('#previewInputTitle_' + id).keypress(function (e) { if (e.which === 13) { blockTitle = false; - $('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val()); - $('#previewSpanTitle_' + selector).show(); - $('#previewInputTitle_' + selector).hide(); + $('#previewSpanTitle_' + id).html($('#previewInputTitle_' + id).val()); + $('#previewSpanTitle_' + id).show(); + $('#previewInputTitle_' + id).hide(); } }); - $('#previewSpanDescription_' + selector).unbind('click').click(function (e) { + $('#previewSpanDescription_' + id).unbind('click').click(function (e) { e.stopPropagation(); if (blockDescription === false) { blockDescription = true; - $('#previewSpanDescription_' + selector).hide(); - $('#previewInputDescription_' + selector).show(); - $('#previewInputDescription_' + selector).val($('#previewInputDescription_' + selector).val()); - $('#previewInputDescription_' + selector).focus().select(); + $('#previewSpanDescription_' + id).hide(); + $('#previewInputDescription_' + id).show(); + $('#previewInputDescription_' + id).val($('#previewInputDescription_' + id).val()); + $('#previewInputDescription_' + id).focus().select(); } }); - $('#previewInputDescription_' + selector).blur(function () { + $('#previewInputDescription_' + id).blur(function () { blockDescription = false; - $('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val()); - $('#previewSpanDescription_' + selector).show(); - $('#previewInputDescription_' + selector).hide(); + $('#previewSpanDescription_' + id).html($('#previewInputDescription_' + id).val()); + $('#previewSpanDescription_' + id).show(); + $('#previewInputDescription_' + id).hide(); }); - $('#previewInputDescription_' + selector).keypress(function (e) { + $('#previewInputDescription_' + id).keypress(function (e) { if (e.which === 13) { blockDescription = false; - $('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val()); - $('#previewSpanDescription_' + selector).show(); - $('#previewInputDescription_' + selector).hide(); + $('#previewSpanDescription_' + id).html($('#previewInputDescription_' + id).val()); + $('#previewSpanDescription_' + id).show(); + $('#previewInputDescription_' + id).hide(); } }); - $('#previewSpanTitle_' + selector).mouseover(function () { - $('#previewSpanTitle_' + selector).css({ + $('#previewSpanTitle_' + id).mouseover(function () { + $('#previewSpanTitle_' + id).css({ "background-color": "#ff9" }); }); - $('#previewSpanTitle_' + selector).mouseout(function () { - $('#previewSpanTitle_' + selector).css({ + $('#previewSpanTitle_' + id).mouseout(function () { + $('#previewSpanTitle_' + id).css({ "background-color": "transparent" }); }); - $('#previewSpanDescription_' + selector).mouseover(function () { - $('#previewSpanDescription_' + selector).css({ + $('#previewSpanDescription_' + id).mouseover(function () { + $('#previewSpanDescription_' + id).css({ "background-color": "#ff9" }); }); - $('#previewSpanDescription_' + selector).mouseout(function () { - $('#previewSpanDescription_' + selector).css({ + $('#previewSpanDescription_' + id).mouseout(function () { + $('#previewSpanDescription_' + id).css({ "background-color": "transparent" }); }); - $('#closePreview_' + selector).unbind('click').click(function (e) { + $('#closePreview_' + id).unbind('click').click(function (e) { e.stopPropagation(); block = false; images = ''; isActive = false; firstPosted = false; - $('#preview_' + selector).fadeOut("fast", function () { - $('#preview_' + selector).remove(); + $('#preview_' + id).fadeOut("fast", function () { + $('#preview_' + id).remove(); $('#profile-rotator').hide(); - $('#' + selector).focus(); + $('#' + id).focus(); }); }); @@ -628,8 +627,8 @@ reAddAttachment(attachmentData); // Remove the attachment bbcode from the textarea. var content = content.replace(/\[attachment[\s\S]*\[\/attachment]/im, ''); - $('#' + selector).val(content); - $('#' + selector).focus(); + $('#' + id).val(content); + $('#' + id).focus(); } }; @@ -676,16 +675,16 @@ } if (image !== '') { - var appendImage = "" - $('#previewImage_' + selector).html(appendImage); - $('#attachmentImageSrc_' + selector).val(bin2hex(image)); + var appendImage = "" + $('#previewImage_' + id).html(appendImage); + $('#attachmentImageSrc_' + id).val(bin2hex(image)); // We need to add the image widht and height when it is // loaded. $('' ,{ load : function(){ - $('#attachmentImageWidth_' + selector).val(this.width); - $('#attachmentImageHeight_' + selector).val(this.height); + $('#attachmentImageWidth_' + id).val(this.width); + $('#attachmentImageHeight_' + id).val(this.height); }, src : image }); @@ -751,8 +750,8 @@ * @returns {void} */ var destroy = function() { - $('#' + selector).unbind(); - $('#preview_' + selector).remove(); + $('#' + id).unbind(); + $('#preview_' + id).remove(); binurl; block = false; blockTitle = false; @@ -764,7 +763,7 @@ firstPosted = false; isActive = false; isCrawling = false; - selector = ""; + id = ""; }; var trim = function(str) {