]> git.mxchange.org Git - friendica.git/blobdiff - view/js/linkPreview.js
spelling: the
[friendica.git] / view / js / linkPreview.js
index dcc1677cc57d7f91fa78c79a5cdb1416290455fb..e41aed39d4e9a07f231bf3b9a7a4750a046410f1 100644 (file)
-/**\r
- * Copyright (c) 2014 Leonardo Cardoso (http://leocardz.com)\r
- * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)\r
- * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.\r
- * \r
- * restructured from rabzuarus (https://friendica.kommune4.de/profile/rabuzarus)\r
- * for the decental social network Friendica.\r
- * \r
- * Version: 1.4.0\r
- */\r
-(function ($) {\r
-       $.fn.linkPreview = function (options) {\r
-               var opts = jQuery.extend({}, $.fn.linkPreview.defaults, options);\r
-\r
-               var selector = $(this).selector;\r
-               selector = selector.substr(1);\r
-\r
-               var previewTpl = '\\r
-                       <div id="preview_' + selector + '" class="preview {0}">{1}</div>\\r
-                       <div style="clear: both"></div>';\r
-               var attachmentTpl = '\\r
-                       <hr class="previewseparator">\\r
-                       <div id="closePreview_' + selector + '" title="Remove" class="closePreview" >\\r
-                               <button type="button" class="previewActionBtn">×</button>\\r
-                       </div>\\r
-                       <div id="previewImages_' + selector + '" class="previewImages">\\r
-                               <div id="previewImgBtn_' + selector + '" class="previewImgBtn">\\r
-                                       <button type="button" id="previewChangeImg_' + selector + '" class="buttonChangeDeactive previewActionBtn" style="display: none">\\r
-                                               <i class="fa fa-exchange" aria-hidden="true"></i>\\r
-                                       </button>\\r
-                               </div>\\r
-                               <div id="previewImage_' + selector + '" class="previewImage">\\r
-                               </div>\\r
-                               <input type="hidden" id="photoNumber_' + selector + '" class="photoNumber" value="0" />\\r
-                       </div>\\r
-                       <div id="previewContent_' + selector + '" class="previewContent">\\r
-                               <h4 id="previewTitle_' + selector + '" class="previewTitle"></h4>\\r
-                               <blockquote id="previewDescription_' + selector + '" class="previewDescription"></blockquote>\\r
-                               <div id="hiddenDescription_' + selector + '" class="hiddenDescription"></div>\\r
-                               <sup id="previewUrl_' + selector + '" class="previewUrl"></sup>\\r
-                       </div>\\r
-                       <div class="clear"></div>\\r
-                       <hr class="previewseparator">';\r
-               var text;\r
-               var urlRegex = /(https?\:\/\/|\s)[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})(\/+[a-z0-9_.\:\;-]*)*(\?[\&\%\|\+a-z0-9_=,\.\:\;-]*)?([\&\%\|\+&a-z0-9_=,\:\;\.-]*)([\!\#\/\&\%\|\+a-z0-9_=,\:\;\.-]*)}*/i;\r
-               var binurl;\r
-               var block = false;\r
-               var blockTitle = false;\r
-               var blockDescription = false;\r
-               var cache = {};\r
-               var images = "";\r
-               var isExtern = false;\r
-               var photoNumber = 0;\r
-               var firstPosted = false;\r
-               var isActive = false;\r
-               var isCrawling = false;\r
-               var defaultTitle = opts.defaultTitle;\r
-               var defaultDescription = opts.defaultDescription;\r
-\r
-               var init = function() {\r
-                       $('#' + selector).bind({\r
-                               paste: function () {\r
-                                       setTimeout(function () {\r
-                                               crawlText();\r
-                                       }, 100);\r
-                               },\r
-                               keyup: function (e) {\r
-                                       // on enter, space, ctrl\r
-                                       if ((e.which === 13 || e.which === 32 || e.which === 17)) {\r
-                                               crawlText();\r
-                                       }\r
-                               }\r
-                       });\r
-               };\r
-               var resetPreview = function() {\r
-                       $('#previewChangeImg_' + selector).removeClass('buttonChangeActive');\r
-                       $('#previewChangeImg_' + selector).addClass('buttonChangeDeactive');\r
-                       photoNumber = 0;\r
-                       images = "";\r
-               }\r
-\r
-               var crawlText = function (text) {\r
-                       block = false;\r
-                       images = '';\r
-                       isExtern = false;\r
-\r
-                       if (typeof text === 'undefined') {\r
-                               text = getPrevWord(selector);\r
-                       } else {\r
-                               isExtern = true;\r
-                       }\r
-\r
-                       if (trim(text) !== "") {\r
-                               if (block === false && urlRegex.test(text)) {\r
-                                       binurl = bin2hex(text);\r
-                                       block = true;\r
-\r
-                                       isCrawling = true;\r
-                                       $('#profile-rotator').show();\r
-\r
-                                       if (binurl in cache) {\r
-                                               isCrawling = false;\r
-                                               processContentData(cache[binurl]);\r
-                                       } else {\r
-                                               getContentData(binurl, processContentData);\r
-                                       }\r
-                               }\r
-                       }\r
-               };\r
-\r
-               var processContentData = function(result) {\r
-                       if (result.contentType === 'image') {\r
-                               insertImage(result.data);\r
-                       }\r
-                       if (result.contentType === 'attachment') {\r
-                               insertAttachment(result.data);\r
-                       }\r
-                       $('#profile-rotator').hide();\r
-               }\r
-\r
-               var getContentData = function(binurl, callback) {\r
-                       $.get('parse_url?binurl='+ binurl + '&dataType=json', function (answer) {\r
-                               if (typeof answer.contentType === 'undefined'\r
-                                       || answer.contentType === null)\r
-                               {\r
-                                       answer.contentType = "";\r
-                               }\r
-                               if (typeof answer.data.url === 'undefined'\r
-                                       || answer.data.url === null)\r
-                               {\r
-                                       answer.data.url = "";\r
-                               }\r
-                               if (typeof answer.data.title === 'undefined'\r
-                                       || answer.data.title === null\r
-                                       || answer.data.title === "")\r
-                               {\r
-                                       answer.data.title = defaultTitle;\r
-                               }\r
-                               if (typeof answer.data.text === 'undefined'\r
-                                       || answer.data.text === null\r
-                                       || answer.data.text === "")\r
-                               {\r
-                                       answer.data.text = "";\r
-                               }\r
-                               if (typeof answer.data.images === 'undefined'\r
-                                       || answer.data.images === null)\r
-                               {\r
-                                       answer.data.images = "";\r
-                               }\r
-\r
-                               // Put the data into a cache\r
-                               cache[binurl] = answer;\r
-\r
-                               callback(answer);\r
-\r
-                               isCrawling = false;\r
-                       });\r
-               }\r
-\r
-               var insertImage = function(json) {\r
-                       if (!isExtern) {\r
-                               return\r
-                       }\r
-                       var bbcode = '\n[img]' + json.url + '[/img]\n';\r
-                       addeditortext(bbcode);\r
-               };\r
-\r
-               var insertAudio = function(json) {\r
-                       if (!isExtern) {\r
-                               return\r
-                       }\r
-                       var bbcode = '\n[audio]' + json.url + '[/audio]\n';\r
-                       addeditortext(bbcode);\r
-               };\r
-\r
-               var insertVideo = function(json) {\r
-                       if (!isExtern) {\r
-                               return\r
-                       }\r
-                       var bbcode = '\n[video]' + json.url + '[/video]\n';\r
-                       addeditortext(bbcode);\r
-               };\r
-\r
-               var insertAttachment = function(json) {\r
-                       // If we have already a preview, leaver here.\r
-                       // Note: if we finish the Preview of other media content type,\r
-                       // we can move this condition to the beggining of crawlText();\r
-                       if (isActive) {\r
-                               return;\r
-                       }\r
-\r
-                       if (json.type != 'link' && json.type != 'video' && json.type != 'photo' || json.url == json.title) {\r
-                               return;\r
-                       }\r
-\r
-                       $('#photoNumber_' + selector).val(0);\r
-                       resetPreview();\r
-\r
-                       var typeClass = 'type-' + json.type;\r
-                       var imageClass = 'attachment-preview';\r
-                       var urlHost = "";\r
-                       var description = json.text;\r
-\r
-                       // Load and add the template if it isn't allready loaded.\r
-                       if ($('#preview_' + selector).length == 0) {\r
-                               var tpl = previewTpl.format(typeClass, attachmentTpl);\r
-                               $('#' + selector).after(tpl);\r
-                       }\r
-\r
-                       isActive = true;\r
-\r
-                       if (description === '') {\r
-                               description = defaultDescription;\r
-                       }\r
-\r
-                       $('#previewTitle_' + selector).html("\\r
-                               <span id='previewSpanTitle_" + selector + "' class='previewSpanTitle' >" + escapeHTML(json.title) + "</span>\\r
-                               <input type='text' value='" + escapeHTML(json.title) + "' id='previewInputTitle_" + selector + "' class='previewInputTitle inputPreview' style='display: none;'/>"\r
-                       );\r
-\r
-\r
-                       $('#previewDescription_' + selector).html("\\r
-                               <span id='previewSpanDescription_" + selector + "' class='previewSpanDescription' >" + escapeHTML(description) + "</span>\n\\r
-                               <textarea id='previewInputDescription_" + selector + "' class='previewInputDescription' style='display: none;' class='inputPreview' >" + escapeHTML(json.text) + "</textarea>"\r
-                       );\r
-\r
-                       if (json.url) {\r
-                               var regexpr = "(https?://)([^:^/]*)(:\\d*)?(.*)?";\r
-                               var regResult = json.url.match(regexpr);\r
-                               var urlHost = regResult[1] + regResult[2];\r
-                               $('#previewUrl_' + selector).html("<a href='" + json.url + "'>" + urlHost + "</a>");\r
-                       }\r
-\r
-                       images = json.images;\r
-\r
-                       if (Array.isArray(images)) {\r
-                               $('#previewImages_' + selector).show();\r
-                       } else {\r
-                               $('#previewImages_' + selector).hide();\r
-                       }\r
-\r
-                       images.length = parseInt(images.length);\r
-                       var appendImage = "";\r
-\r
-                       for (i = 0; i < images.length; i++) {\r
-                               // For small preview images we use a smaller attachment format.\r
-//                             if (Array.isArray(images) && typeof images[i].width !== 'undefined') {\r
-                                       ///@todo here we need to add a check for !Config::get('system', 'always_show_preview').\r
-                                       if (images[i].width >= 500 && images[i].width >= images[i].height) {\r
-                                                       imageClass = 'attachment-image';\r
-                                       }\r
-//                             }\r
-                               if (i === 0) {\r
-                                       appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' ></img>";\r
-                               } else {\r
-                                       appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' style='display: none;'></img>";\r
-                               }\r
-                       }\r
-\r
-                       $('#previewImage_' + selector).html(appendImage + "<div id='whiteImage' style='color: transparent; display:none;'>...</div>");\r
-\r
-                       // more than just one image.\r
-                       if (images.length > 1) {\r
-                               // Enable the the button to change the preview pictures.\r
-                               $('#previewChangeImg_' + selector).show();\r
-\r
-                               if (firstPosted === false) {\r
-                                       firstPosted = true;\r
-\r
-                                       $('#previewChangeImg_' + selector).unbind('click').click(function (e) {\r
-                                               e.stopPropagation();\r
-                                               if (images.length > 1) {\r
-//                                                     photoNumber = parseInt($('#photoNumber_' + selector).val());\r
-                                                       $('#imagePreview_' + selector + '_' + photoNumber).css({\r
-                                                               'display': 'none'\r
-                                                       });\r
-                                                       photoNumber += 1;\r
-\r
-                                                       // If have reached the last image, begin with the first image.\r
-                                                       if (photoNumber === images.length) {\r
-                                                               photoNumber = 0;\r
-                                                       }\r
-\r
-                                                       $('#imagePreview_' + selector + '_' + photoNumber).css({\r
-                                                               'display': 'block'\r
-                                                       });\r
-                                                       $('#photoNumber_' + selector).val(photoNumber);\r
-                                               }\r
-                                       });\r
-                               }\r
-                       }\r
-\r
-                       processEventListener();\r
-                       $('#profile-rotator').hide();\r
-               };\r
-\r
-               var processEventListener = function() {\r
-                       $('#previewSpanTitle_' + selector).unbind('click').click(function (e) {\r
-                               e.stopPropagation();\r
-                               if (blockTitle === false) {\r
-                                       blockTitle = true;\r
-                                       $('#previewSpanTitle_' + selector).hide();\r
-                                       $('#previewInputTitle_' + selector).show();\r
-                                       $('#previewInputTitle_' + selector).val($('#previewInputTitle_' + selector).val());\r
-                                       $('#previewInputTitle_' + selector).focus().select();\r
-                               }\r
-                       });\r
-\r
-                       $('#previewInputTitle_' + selector).blur(function () {\r
-                               blockTitle = false;\r
-                               $('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val());\r
-                               $('#previewSpanTitle_' + selector).show();\r
-                               $('#previewInputTitle_' + selector).hide();\r
-                       });\r
-\r
-                       $('#previewInputTitle_' + selector).keypress(function (e) {\r
-                               if (e.which === 13) {\r
-                                       blockTitle = false;\r
-                                       $('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val());\r
-                                       $('#previewSpanTitle_' + selector).show();\r
-                                       $('#previewInputTitle_' + selector).hide();\r
-                               }\r
-                       });\r
-\r
-                       $('#previewSpanDescription_' + selector).unbind('click').click(function (e) {\r
-                               e.stopPropagation();\r
-                               if (blockDescription === false) {\r
-                                       blockDescription = true;\r
-                                       $('#previewSpanDescription_' + selector).hide();\r
-                                       $('#previewInputDescription_' + selector).show();\r
-                                       $('#previewInputDescription_' + selector).val($('#previewInputDescription_' + selector).val());\r
-                                       $('#previewInputDescription_' + selector).focus().select();\r
-                               }\r
-                       });\r
-\r
-                       $('#previewInputDescription_' + selector).blur(function () {\r
-                               blockDescription = false;\r
-                               $('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val());\r
-                               $('#previewSpanDescription_' + selector).show();\r
-                               $('#previewInputDescription_' + selector).hide();\r
-                       });\r
-\r
-                       $('#previewInputDescription_' + selector).keypress(function (e) {\r
-                               if (e.which === 13) {\r
-                                       blockDescription = false;\r
-                                       $('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val());\r
-                                       $('#previewSpanDescription_' + selector).show();\r
-                                       $('#previewInputDescription_' + selector).hide();\r
-                               }\r
-                       });\r
-\r
-                       $('#previewSpanTitle_' + selector).mouseover(function () {\r
-                               $('#previewSpanTitle_' + selector).css({\r
-                                       "background-color": "#ff9"\r
-                               });\r
-                       });\r
-\r
-                       $('#previewSpanTitle_' + selector).mouseout(function () {\r
-                               $('#previewSpanTitle_' + selector).css({\r
-                                       "background-color": "transparent"\r
-                               });\r
-                       });\r
-\r
-                       $('#previewSpanDescription_' + selector).mouseover(function () {\r
-                               $('#previewSpanDescription_' + selector).css({\r
-                                       "background-color": "#ff9"\r
-                               });\r
-                       });\r
-\r
-                       $('#previewSpanDescription_' + selector).mouseout(function () {\r
-                               $('#previewSpanDescription_' + selector).css({\r
-                                       "background-color": "transparent"\r
-                               });\r
-                       });\r
-\r
-                       $('#closePreview_' + selector).unbind('click').click(function (e) {\r
-                               e.stopPropagation();\r
-                               block = false;\r
-                               images = '';\r
-                               isActive = false;\r
-                               firstPosted = false;\r
-                               $('#preview_' + selector).fadeOut("fast", function () {\r
-                                       $('#preview_' + selector).remove();\r
-                                       $('#profile-rotator').hide();\r
-                               });\r
-\r
-                       });\r
-               };\r
-\r
-               var trim = function(str) {\r
-                       return str.replace(/^\s+|\s+$/g, "");\r
-               };\r
-               var escapeHTML = function(unsafe_str) {\r
-                       return unsafe_str\r
-                               .replace(/&/g, '&amp;')\r
-                               .replace(/</g, '&lt;')\r
-                               .replace(/>/g, '&gt;')\r
-                               .replace(/\"/g, '&quot;')\r
-                               .replace(/\[/g, '&#91;')\r
-                               .replace(/\]/g, '&#93;')\r
-                               .replace(/\'/g, '&#39;'); // '&apos;' is not valid HTML 4\r
-               }\r
-\r
-               // Initialize LinkPreview \r
-               init();\r
-\r
-               return {\r
-                       // make crawlText() accessable from the outside.\r
-                       crawlText: function (text) {\r
-                               crawlText(text);\r
-                       }\r
-               };\r
-       };\r
-\r
-       $.fn.linkPreview.defaults = {\r
-               defaultDescription: "Enter a description",\r
-               defaultTitle: "Enter a title"\r
-       };\r
-})(jQuery);\r
+// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
+// @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&dn=gpl-2.0.txt GPL
+/**
+ * Copyright (c) 2014 Leonardo Cardoso (http://leocardz.com)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * 
+ * Restructured by Rabzuarus (https://friendica.kommune4.de/profile/rabuzarus)
+ * to use it in the decentralized social network Friendica (https://friendi.ca).
+ * 
+ * Version: 1.4.0
+ */
+(function ($) {
+       $.fn.linkPreview = function (options) {
+               var opts = jQuery.extend({}, $.fn.linkPreview.defaults, options);
+
+               var id = $(this).attr('id');
+
+               var previewTpl = '\
+                       <div id="preview_' + id + '" class="preview {0}">\
+                               {1}\
+                               <input type="hidden" name="has_attachment" id="hasAttachment_' + id + '" value="{2}" />\
+                               <input type="hidden" name="attachment_url" id="attachmentUrl_' + id + '" value="{3}" />\
+                               <input type="hidden" name="attachment_type" id="attachmentType_' + id + '" value="{4}" />\
+                       </div>';
+
+               var attachmentTpl = '\
+                       <hr class="previewseparator">\
+                       <div id="closePreview_' + id + '" title="Remove" class="closePreview" >\
+                               <button type="button" class="previewActionBtn">×</button>\
+                       </div>\
+                       <div id="previewImages_' + id + '" class="previewImages">\
+                               <div id="previewImgBtn_' + id + '" class="previewImgBtn">\
+                                       <button type="button" id="previewChangeImg_' + id + '" class="buttonChangeDeactive previewActionBtn" style="display: none">\
+                                               <i class="fa fa-exchange" aria-hidden="true"></i>\
+                                       </button>\
+                               </div>\
+                               <div id="previewImage_' + id + '" class="previewImage">\
+                               </div>\
+                               <input type="hidden" id="photoNumber_' + id + '" class="photoNumber" value="0" />\
+                               <input type="hidden" name="attachment_img_src" id="attachmentImageSrc_' + id + '" value="" />\
+                               <input type="hidden" name="attachment_img_width" id="attachmentImageWidth_' + id + '" value="0" />\
+                               <input type="hidden" name="attachment_img_height" id="attachmentImageHeight_' + id + '" value="0" />\
+                       </div>\
+                       <div id="previewContent_' + id + '" class="previewContent">\
+                               <h4 id="previewTitle_' + id + '" class="previewTitle"></h4>\
+                               <blockquote id="previewDescription_' + id + '" class="previewDescription"></blockquote>\
+                               <div id="hiddenDescription_' + id + '" class="hiddenDescription"></div>\
+                               <sup id="previewUrl_' + id + '" class="previewUrl"></sup>\
+                       </div>\
+                       <div class="clear"></div>\
+                       <hr class="previewseparator">';
+               var text;
+               var binurl;
+               var block = false;
+               var blockTitle = false;
+               var blockDescription = false;
+               var cache = {};
+               var images = "";
+               var isExtern = false;
+               var photoNumber = 0;
+               var firstPosted = false;
+               var isActive = false;
+               var isCrawling = false;
+               var defaultTitle = opts.defaultTitle;
+               var defaultDescription = opts.defaultDescription;
+
+               /**
+                * Initialize the plugin
+                * 
+                * @returns {void}
+                */
+               var init = function() {
+                       $('#' + id).bind({
+                               paste: function () {
+                                       setTimeout(function () {
+                                               crawlText();
+                                       }, 100);
+                               },
+                               keyup: function (e) {
+                                       // on enter, space, ctrl
+                                       if ((e.which === 13 || e.which === 32 || e.which === 17)) {
+                                               crawlText();
+                                       }
+                               }
+                       });
+
+                       // Check if we have already attachment bbcode in the textarea
+                       // and add it to the attachment preview.
+                       var content = $('#' + id).val();
+                       addBBCodeToPreview(content);
+               };
+
+               /**
+                * Reset some values.
+                * 
+                * @returns {void}
+                */
+               var resetPreview = function() {
+                       $('#hasAttachment_' + id).val(0);
+                       photoNumber = 0;
+                       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) {
+                       block = false;
+                       images = '';
+                       isExtern = false;
+
+                       // If no text is passed to crawlText() we 
+                       // take the previous word before the cursor.
+                       if (typeof text === 'undefined') {
+                               text = getPrevWord(id);
+                       } else {
+                               isExtern = true;
+                       }
+
+                       // Don't process the textarea input if we have already
+                       // an attachment preview.
+                       if (!isExtern && isActive) {
+                               return;
+                       }
+
+                       if (trim(text) !== "" && block === false && urlRegex.test(text)) {
+                               binurl = bin2hex(text);
+                               block = true;
+
+                               isCrawling = true;
+                               $('#profile-rotator').show();
+
+                               if (binurl in cache) {
+                                       isCrawling = false;
+                                       processContentData(cache[binurl]);
+                               } else {
+                                       getContentData(binurl, processContentData);
+                               }
+                       }
+               };
+
+               /**
+                * Process the attachment data according to
+                * its content type (image, audio, video, attachment)
+                * 
+                * @param {object} result
+                * @returns {void}
+                */
+               var processContentData = function(result) {
+                       if (result.contentType === 'image') {
+                               insertImage(result.data);
+                       }
+                       if (result.contentType === 'audio') {
+                               insertAudio(result.data);
+                       }
+                       if (result.contentType === 'video') {
+                               insertVideo(result.data);
+                       }
+                       if (result.contentType === 'attachment') {
+                               insertAttachment(result.data);
+                       }
+                       $('#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) {
+                       $.get('parseurl?binurl='+ binurl + '&format=json', function (answer) {
+                               obj = sanitizeInputData(answer);
+
+                               // Put the data into a cache
+                               cache[binurl] = obj;
+
+                               callback(obj);
+
+                               isCrawling = false;
+                       });
+               };
+
+               /*
+                * Add a [img] bbtag with the image url to the jot editor.
+                * 
+                * @param {type} data
+                * @returns {void}
+                */
+               var insertImage = function(data) {
+                       if (!isExtern) {
+                               return;
+                       }
+                       var bbcode = '\n[img]' + data.url + '[/img]\n';
+                       addeditortext(bbcode);
+               };
+
+               /*
+                * Add a [audio] bbtag with the audio url to the jot editor.
+                * 
+                * @param {type} data
+                * @returns {void}
+                */
+               var insertAudio = function(data) {
+                       if (!isExtern) {
+                               return;
+                       }
+                       var bbcode = '\n[audio]' + data.url + '[/audio]\n';
+                       addeditortext(bbcode);
+               };
+
+               /*
+                * Add a [video] bbtag with the video url to the jot editor.
+                * 
+                * @param {type} data
+                * @returns {void}
+                */
+               var insertVideo = function(data) {
+                       if (!isExtern) {
+                               return;
+                       }
+                       var bbcode = '\n[video]' + data.url + '[/video]\n';
+                       addeditortext(bbcode);
+               };
+
+               /**
+                * Process 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.
+                       // Note: if we finish the Preview of other media content type,
+                       // we can move this condition to the beginning of crawlText();
+                       if (isActive) {
+                               $('#profile-rotator').hide();
+                               return;
+                       }
+
+                       if (data.type !== 'link' && data.type !== 'video' && data.type !== 'photo' || data.url === data.title) {
+                               $('#profile-rotator').hide();
+                               return;
+                       }
+
+                       $('#photoNumber_' + id).val(0);
+                       resetPreview();
+
+                       processAttachmentTpl(data, 'type-' + data.type);
+                       addTitleDescription(data);
+                       addHostToAttachment(data.url);
+                       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 already loaded.
+                       if ($('#preview_' + id).length === 0) {
+                               var tpl = previewTpl.format(
+                                       'type-' + data.type,
+                                       attachmentTpl,
+                                       1,
+                                       bin2hex(data.url),
+                                       data.type
+                               );
+                               $('#' + id).after(tpl);
+                       }
+
+                       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 === '') {
+                               description = defaultDescription;
+                       }
+
+                       $('#previewTitle_' + id).html("\
+                               <span id='previewSpanTitle_" + id + "' class='previewSpanTitle' >" + escapeHTML(data.title) + "</span>\
+                               <input type='text' name='attachment_title' value='" + escapeHTML(data.title) + "' id='previewInputTitle_" + id + "' class='previewInputTitle inputPreview' style='display: none;'/>"
+                       );
+
+                       $('#previewDescription_' + id).html("\
+                               <span id='previewSpanDescription_" + id + "' class='previewSpanDescription' >" + escapeHTML(description) + "</span>\n\
+                               <textarea id='previewInputDescription_" + id + "' name='attachment_text' class='previewInputDescription' style='display: none;' class='inputPreview' >" + escapeHTML(data.text) + "</textarea>"
+                       );
+               };
+
+               /**
+                * 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 regResult = url.match(regexpr);
+                               var urlHost = regResult[1] + regResult[2];
+                               $('#previewUrl_' + id).html("<a href='" + url + "'>" + urlHost + "</a>");
+                       }
+               };
+
+               /**
+                * Add preview images to the attachment.
+                * 
+                * @param {array} images
+                * 
+                * @returns {void}
+                */
+               var addImagesToAttachment = function(images) {
+                       var imageClass = 'attachment-preview';
+       
+                       if (Array.isArray(images)) {
+                               $('#previewImages_' + id).show();
+                               $('#attachmentImageSrc_' + id).val(bin2hex(images[photoNumber].src));
+                               $('#attachmentImageWidth_' + id).val(images[photoNumber].width);
+                               $('#attachmentImageHeight_' + id).val(images[photoNumber].height);
+                       } else {
+                               $('#previewImages_' + id).hide();
+                       }
+
+                       images.length = parseInt(images.length);
+                       var appendImage = "";
+
+                       for (i = 0; i < images.length; i++) {
+                               // For small preview images we use a smaller attachment format.
+                               ///@todo here we need to add a check for !DI::config()->get('system', 'always_show_preview').
+                               if (images[i].width >= 500 && images[i].width >= images[i].height) {
+                                               imageClass = 'attachment-image';
+                               }
+
+                               if (i === 0) {
+                                       appendImage += "<img id='imagePreview_" + id + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' ></img>";
+                               } else {
+                                       appendImage += "<img id='imagePreview_" + id + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' style='display: none;'></img>";
+                               }
+                       }
+
+                       $('#previewImage_' + id).html(appendImage + "<div id='whiteImage' style='color: transparent; display:none;'>...</div>");
+
+                       // More than just one image.
+                       if (images.length > 1) {
+                               // Enable the button to change the preview pictures.
+                               $('#previewChangeImg_' + id).show();
+
+                               if (firstPosted === false) {
+                                       firstPosted = true;
+
+                                       $('#previewChangeImg_' + id).unbind('click').click(function (e) {
+                                               e.stopPropagation();
+                                               if (images.length > 1) {
+                                                       $('#imagePreview_' + id + '_' + photoNumber).css({
+                                                               'display': 'none'
+                                                       });
+                                                       photoNumber += 1;
+
+                                                       // If have reached the last image, begin with the first image.
+                                                       if (photoNumber === images.length) {
+                                                               photoNumber = 0;
+                                                       }
+
+                                                       $('#imagePreview_' + id + '_' + photoNumber).css({
+                                                               'display': 'block'
+                                                       });
+                                                       $('#photoNumber_' + id).val(photoNumber);
+                                                       $('#attachmentImageSrc_' + id).val(bin2hex(images[photoNumber].src));
+                                                       $('#attachmentImageWidth_' + id).val(images[photoNumber].width);
+                                                       $('#attachmentImageHeight_' + id).val(images[photoNumber].height);
+                                               }
+                                       });
+                               }
+                       }
+               };
+
+               /**
+                * Add event listener to control the attachment preview.
+                * 
+                * @returns {void}
+                */
+               var processEventListener = function() {
+                       $('#previewSpanTitle_' + id).unbind('click').click(function (e) {
+                               e.stopPropagation();
+                               if (blockTitle === false) {
+                                       blockTitle = true;
+                                       $('#previewSpanTitle_' + id).hide();
+                                       $('#previewInputTitle_' + id).show();
+                                       $('#previewInputTitle_' + id).val($('#previewInputTitle_' + id).val());
+                                       $('#previewInputTitle_' + id).focus().select();
+                               }
+                       });
+
+                       $('#previewInputTitle_' + id).blur(function () {
+                               blockTitle = false;
+                               $('#previewSpanTitle_' + id).html($('#previewInputTitle_' + id).val());
+                               $('#previewSpanTitle_' + id).show();
+                               $('#previewInputTitle_' + id).hide();
+                       });
+
+                       $('#previewInputTitle_' + id).keypress(function (e) {
+                               if (e.which === 13) {
+                                       blockTitle = false;
+                                       $('#previewSpanTitle_' + id).html($('#previewInputTitle_' + id).val());
+                                       $('#previewSpanTitle_' + id).show();
+                                       $('#previewInputTitle_' + id).hide();
+                               }
+                       });
+
+                       $('#previewSpanDescription_' + id).unbind('click').click(function (e) {
+                               e.stopPropagation();
+                               if (blockDescription === false) {
+                                       blockDescription = true;
+                                       $('#previewSpanDescription_' + id).hide();
+                                       $('#previewInputDescription_' + id).show();
+                                       $('#previewInputDescription_' + id).val($('#previewInputDescription_' + id).val());
+                                       $('#previewInputDescription_' + id).focus().select();
+                               }
+                       });
+
+                       $('#previewInputDescription_' + id).blur(function () {
+                               blockDescription = false;
+                               $('#previewSpanDescription_' + id).html($('#previewInputDescription_' + id).val());
+                               $('#previewSpanDescription_' + id).show();
+                               $('#previewInputDescription_' + id).hide();
+                       });
+
+                       $('#previewInputDescription_' + id).keypress(function (e) {
+                               if (e.which === 13) {
+                                       blockDescription = false;
+                                       $('#previewSpanDescription_' + id).html($('#previewInputDescription_' + id).val());
+                                       $('#previewSpanDescription_' + id).show();
+                                       $('#previewInputDescription_' + id).hide();
+                               }
+                       });
+
+                       $('#previewSpanTitle_' + id).mouseover(function () {
+                               $('#previewSpanTitle_' + id).css({
+                                       "background-color": "#ff9"
+                               });
+                       });
+
+                       $('#previewSpanTitle_' + id).mouseout(function () {
+                               $('#previewSpanTitle_' + id).css({
+                                       "background-color": "transparent"
+                               });
+                       });
+
+                       $('#previewSpanDescription_' + id).mouseover(function () {
+                               $('#previewSpanDescription_' + id).css({
+                                       "background-color": "#ff9"
+                               });
+                       });
+
+                       $('#previewSpanDescription_' + id).mouseout(function () {
+                               $('#previewSpanDescription_' + id).css({
+                                       "background-color": "transparent"
+                               });
+                       });
+
+                       $('#closePreview_' + id).unbind('click').click(function (e) {
+                               e.stopPropagation();
+                               block = false;
+                               images = '';
+                               isActive = false;
+                               firstPosted = false;
+                               $('#preview_' + id).fadeOut("fast", function () {
+                                       $('#preview_' + id).remove();
+                                       $('#profile-rotator').hide();
+                                       $('#' + id).focus();
+                               });
+
+                       });
+               };
+
+               /**
+                * Convert attachment 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(/([\s\S]*)\[attachment([\s\S]*?)\]([\s\S]*?)\[\/attachment\]([\s\S]*)/im);
+                       if (match === null || match.length < 5) {
+                               return null;
+                       }
+
+                       var attributes = match[2];
+                       data.text = trim(match[1]);
+
+                       var type = '';
+                       var matches = attributes.match(/type='([\s\S]*?)'/im);
+                       if (matches !== null && typeof matches[1] !== 'undefined') {
+                               type = matches[1].toLowerCase();
+                       }
+
+                       matches = attributes.match(/type="([\s\S]*?)"/im);
+                       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='([\s\S]*?)'/im);
+                       if (matches !== null && typeof matches[1] !== 'undefined') {
+                               url = matches[1];
+                       }
+
+                       matches = attributes.match(/url="([\s\S]*?)"/im);
+                       if (matches !== null && typeof matches[1] !== 'undefined') {
+                               url = matches[1];
+                       }
+
+                       if(url !== '') {
+                               data.url = escapeHTML(url);
+                       }
+
+                       var title = '';
+
+                       matches = attributes.match(/title='([\s\S]*?)'/im);
+                       if (matches !== null && typeof matches[1] !== 'undefined') {
+                               title = trim(matches[1]);
+                       }
+
+                       matches = attributes.match(/title="([\s\S]*?)"/im);
+                       if (matches !== null && typeof matches[1] !== 'undefined') {
+                               title = trim(matches[1]);
+                       }
+
+                       if (title !== '') {
+                               data.title = escapeHTML(title);
+                       }
+
+                       var image = '';
+
+                       matches = attributes.match(/image='([\s\S]*?)'/im);
+                       if (matches !== null && typeof matches[1] !== 'undefined') {
+                               image = trim(matches[1]);
+                       }
+
+                       matches = attributes.match(/image="([\s\S]*?)"/im);
+                       if (matches !== null && typeof matches[1] !== 'undefined') {
+                               image = trim(matches[1]);
+                       }
+
+                       if (image !== '') {
+                               data.image = escapeHTML(image);
+                       }
+
+                       var preview = '';
+
+                       matches = attributes.match(/preview='([\s\S]*?)'/im);
+                       if (matches !== null && typeof matches[1] !== 'undefined') {
+                               preview = trim(matches[1]);
+                       }
+
+                       matches = attributes.match(/preview="([\s\S]*?)"/im);
+                       if (matches !== null && typeof matches[1] !== 'undefined') {
+                               preview = trim(matches[1]);
+                       }
+
+                       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[\s\S]*\[\/attachment]/im, '');
+                               $('#' + id).val(content);
+                               $('#' + id).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_" + id + "' src='" + image + "' class='" + imageClass + "' ></img>"
+                               $('#previewImage_' + id).html(appendImage);
+                               $('#attachmentImageSrc_' + id).val(bin2hex(image));
+
+                               // We need to add the image widht and height when it is 
+                               // loaded.
+                               $('<img/>' ,{
+                                       load : function(){
+                                               $('#attachmentImageWidth_' + id).val(this.width);
+                                               $('#attachmentImageHeight_' + id).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() {
+                       $('#' + id).unbind();
+                       $('#preview_' + id).remove();
+                       binurl;
+                       block = false;
+                       blockTitle = false;
+                       blockDescription = false;
+                       cache = {};
+                       images = "";
+                       isExtern = false;
+                       photoNumber = 0;
+                       firstPosted = false;
+                       isActive = false;
+                       isCrawling = false;
+                       id = "";
+               };
+
+               var trim = function(str) {
+                       return str.replace(/^\s+|\s+$/g, "");
+               };
+               var escapeHTML = function(unsafe_str) {
+                       return unsafe_str
+                               .replace(/&/g, '&amp;')
+                               .replace(/</g, '&lt;')
+                               .replace(/>/g, '&gt;')
+                               .replace(/\"/g, '&quot;')
+                               .replace(/\[/g, '&#91;')
+                               .replace(/\]/g, '&#93;')
+                               .replace(/\'/g, '&#39;'); // '&apos;' is not valid HTML 4
+               };
+
+               // Initialize LinkPreview 
+               init();
+
+               return {
+                       // make crawlText() accessable from the outside.
+                       crawlText: function(text) {
+                               crawlText(text);
+                       },
+                       addBBCodeToPreview: function(content) {
+                               addBBCodeToPreview(content);
+                       },
+                       destroy: function() {
+                               destroy();
+                       }
+               };
+       };
+
+       $.fn.linkPreview.defaults = {
+               defaultDescription: "Enter a description",
+               defaultTitle: "Enter a title"
+       };
+
+       /**
+       * Get in a textarea the previous word before the cursor.
+       * 
+       * @param {object} text Textarea element.
+       * @param {integer} caretPos Cursor position.
+       * 
+       * @returns {string} Previous word.
+       */
+       function returnWord(text, caretPos) {
+               var index = text.indexOf(caretPos);
+               var preText = text.substring(0, caretPos);
+               // If the last character is a space or enter remove it
+               // We need this in friendica for the url  preview.
+               var lastChar = preText.slice(-1)
+               if ( lastChar === " "
+                       || lastChar === "\n"
+                       || lastChar === "\r"
+                       )
+               {
+                       preText = preText.substring(0, preText.length -1);
+               }
+
+               // Replace new line with space.
+               preText = preText.replace(/\n/g, " ");
+
+               if (preText.indexOf(" ") > 0) {
+                       var words = preText.split(" ");
+                       return words[words.length - 1]; //return last word
+               }
+               else {
+                       return preText;
+               }
+       }
+
+       /**
+        * Get in a textarea the previous word before the cursor.
+        * 
+        * @param {string} id The ID of a textarea element.
+        * @returns {sting|null} Previous word or null if no word is available.
+        */
+       function getPrevWord(id) {
+               var text = document.getElementById(id);
+               var caretPos = getCaretPosition(text);
+               var word = returnWord(text.value, caretPos);
+               if (word != null) {
+                       return word
+               }
+
+       }
+
+       /**
+        * Get the cursor position in an text element.
+        * 
+        * @param {object} ctrl Textarea element.
+        * @returns {integer} Position of the cursor.
+        */
+       function getCaretPosition(ctrl) {
+               var CaretPos = 0;   // IE Support
+               if (document.selection) {
+                       ctrl.focus();
+                       var Sel = document.selection.createRange();
+                       Sel.moveStart('character', -ctrl.value.length);
+                       CaretPos = Sel.text.length;
+               }
+               // Firefox support
+               else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
+                       CaretPos = ctrl.selectionStart;
+               }
+               return (CaretPos);
+       }
+})(jQuery);
+
+// @license-end