2 * Copyright (c) 2014 Leonardo Cardoso (http://leocardz.com)
\r
3 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
\r
4 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
\r
6 * Restructured by Rabzuarus (https://friendica.kommune4.de/profile/rabuzarus)
\r
7 * to use it in the decentralized social network Friendica (https://friendi.ca).
\r
12 $.fn.linkPreview = function (options) {
\r
13 var opts = jQuery.extend({}, $.fn.linkPreview.defaults, options);
\r
15 var selector = $(this).selector;
\r
16 selector = selector.substr(1);
\r
19 <div id="preview_' + selector + '" class="preview {0}">\
\r
21 <input type="hidden" name="has_attachment" id="hasAttachment_' + selector + '" value="{2}" />\
\r
22 <input type="hidden" name="attachment_url" id="attachmentUrl_' + selector + '" value="{3}" />\
\r
23 <input type="hidden" name="attachment_type" id="attachmentType_' + selector + '" value="{4}" />\
\r
26 var attachmentTpl = '\
\r
27 <hr class="previewseparator">\
\r
28 <div id="closePreview_' + selector + '" title="Remove" class="closePreview" >\
\r
29 <button type="button" class="previewActionBtn">×</button>\
\r
31 <div id="previewImages_' + selector + '" class="previewImages">\
\r
32 <div id="previewImgBtn_' + selector + '" class="previewImgBtn">\
\r
33 <button type="button" id="previewChangeImg_' + selector + '" class="buttonChangeDeactive previewActionBtn" style="display: none">\
\r
34 <i class="fa fa-exchange" aria-hidden="true"></i>\
\r
37 <div id="previewImage_' + selector + '" class="previewImage">\
\r
39 <input type="hidden" id="photoNumber_' + selector + '" class="photoNumber" value="0" />\
\r
40 <input type="hidden" name="attachment_img_src" id="attachmentImageSrc_' + selector + '" value="" />\
\r
41 <input type="hidden" name="attachment_img_width" id="attachmentImageWidth_' + selector + '" value="0" />\
\r
42 <input type="hidden" name="attachment_img_height" id="attachmentImageHeight_' + selector + '" value="0" />\
\r
44 <div id="previewContent_' + selector + '" class="previewContent">\
\r
45 <h4 id="previewTitle_' + selector + '" class="previewTitle"></h4>\
\r
46 <blockquote id="previewDescription_' + selector + '" class="previewDescription"></blockquote>\
\r
47 <div id="hiddenDescription_' + selector + '" class="hiddenDescription"></div>\
\r
48 <sup id="previewUrl_' + selector + '" class="previewUrl"></sup>\
\r
50 <div class="clear"></div>\
\r
51 <hr class="previewseparator">';
\r
53 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
56 var blockTitle = false;
\r
57 var blockDescription = false;
\r
60 var isExtern = false;
\r
61 var photoNumber = 0;
\r
62 var firstPosted = false;
\r
63 var isActive = false;
\r
64 var isCrawling = false;
\r
65 var defaultTitle = opts.defaultTitle;
\r
66 var defaultDescription = opts.defaultDescription;
\r
69 * Initialize the plugin
\r
73 var init = function() {
\r
74 $('#' + selector).bind({
\r
75 paste: function () {
\r
76 setTimeout(function () {
\r
80 keyup: function (e) {
\r
81 // on enter, space, ctrl
\r
82 if ((e.which === 13 || e.which === 32 || e.which === 17)) {
\r
88 // Check if we have already attachment bbcode in the textarea
\r
89 // and add it to the attachment preview.
\r
90 var content = $('#' + selector).val();
\r
91 addBBCodeToPreview(content);
\r
95 * Reset some values.
\r
99 var resetPreview = function() {
\r
100 $('#hasAttachment_' + selector).val(0);
\r
106 * Crawl a text string if it contains an url and try
\r
109 * If no text is passed to crawlText() we take
\r
110 * the previous word before the cursor of the textarea.
\r
112 * @param {string} text (optional)
\r
115 var crawlText = function (text) {
\r
120 // If no text is passed to crawlText() we
\r
121 // take the previous word before the cursor.
\r
122 if (typeof text === 'undefined') {
\r
123 text = getPrevWord(selector);
\r
128 // Don't procces the textarea input if we have already
\r
129 // an attachment preview.
\r
130 if (!isExtern && isActive) {
\r
134 if (trim(text) !== "") {
\r
135 if (block === false && urlRegex.test(text)) {
\r
136 binurl = bin2hex(text);
\r
140 $('#profile-rotator').show();
\r
142 if (binurl in cache) {
\r
143 isCrawling = false;
\r
144 processContentData(cache[binurl]);
\r
146 getContentData(binurl, processContentData);
\r
153 * Process the attachment data according to
\r
154 * its content type (image, audio, video, attachment)
\r
156 * @param {object} result
\r
159 var processContentData = function(result) {
\r
160 if (result.contentType === 'image') {
\r
161 insertImage(result.data);
\r
163 if (result.contentType === 'audio') {
\r
164 insertAudio(result.data);
\r
166 if (result.contentType === 'video') {
\r
167 insertVideo(result.data);
\r
169 if (result.contentType === 'attachment') {
\r
170 insertAttachment(result.data);
\r
172 $('#profile-rotator').hide();
\r
176 * Fetch the content of link which should be attached.
\r
178 * @param {string} binurl Link which should be attached as hexadecimal string.
\r
179 * @param {type} callback
\r
182 var getContentData = function(binurl, callback) {
\r
183 $.get('parse_url?binurl='+ binurl + '&format=json', function (answer) {
\r
184 obj = sanitizeInputData(answer);
\r
186 // Put the data into a cache
\r
187 cache[binurl] = obj;
\r
191 isCrawling = false;
\r
196 * Add a [img] bbtag with the image url to the jot editor.
\r
198 * @param {type} data
\r
201 var insertImage = function(data) {
\r
205 var bbcode = '\n[img]' + data.url + '[/img]\n';
\r
206 addeditortext(bbcode);
\r
210 * Add a [audio] bbtag with the audio url to the jot editor.
\r
212 * @param {type} data
\r
215 var insertAudio = function(data) {
\r
219 var bbcode = '\n[audio]' + data.url + '[/audio]\n';
\r
220 addeditortext(bbcode);
\r
224 * Add a [video] bbtag with the video url to the jot editor.
\r
226 * @param {type} data
\r
229 var insertVideo = function(data) {
\r
233 var bbcode = '\n[video]' + json.url + '[/video]\n';
\r
234 addeditortext(bbcode);
\r
238 * Proccess all attachment data and show up a html
\r
239 * attachment preview.
\r
241 * @param {obj} data Attachment data.
\r
244 var insertAttachment = function(data) {
\r
245 // If we have already a preview, leaver here.
\r
246 // Note: if we finish the Preview of other media content type,
\r
247 // we can move this condition to the beggining of crawlText();
\r
249 $('#profile-rotator').hide();
\r
253 if (data.type !== 'link' && data.type !== 'video' && data.type !== 'photo' || data.url === data.title) {
\r
254 $('#profile-rotator').hide();
\r
258 $('#photoNumber_' + selector).val(0);
\r
261 processAttachmentTpl(data, 'type-' + data.type);
\r
262 addTitleDescription(data);
\r
263 addHostToAttachment(data.url);
\r
264 addImagesToAttachment(data.images);
\r
266 processEventListener();
\r
267 $('#profile-rotator').hide();
\r
271 * Construct the attachment html from the attachment template and
\r
272 * add it to the DOM.
\r
274 * @param {object} data Attachment data.
\r
277 var processAttachmentTpl = function(data) {
\r
278 // Load and add the template if it isn't allready loaded.
\r
279 if ($('#preview_' + selector).length === 0) {
\r
280 var tpl = previewTpl.format(
\r
281 'type-' + data.type,
\r
287 $('#' + selector).after(tpl);
\r
294 * Add the attachment title and the description
\r
295 * to the attachment preview.
\r
297 * @param {object} data Attachment data.
\r
300 var addTitleDescription = function(data) {
\r
301 var description = data.text;
\r
303 if (description === '') {
\r
304 description = defaultDescription;
\r
307 $('#previewTitle_' + selector).html("\
\r
308 <span id='previewSpanTitle_" + selector + "' class='previewSpanTitle' >" + escapeHTML(data.title) + "</span>\
\r
309 <input type='text' name='attachment_title' value='" + escapeHTML(data.title) + "' id='previewInputTitle_" + selector + "' class='previewInputTitle inputPreview' style='display: none;'/>"
\r
312 $('#previewDescription_' + selector).html("\
\r
313 <span id='previewSpanDescription_" + selector + "' class='previewSpanDescription' >" + escapeHTML(description) + "</span>\n\
\r
314 <textarea id='previewInputDescription_" + selector + "' name='attachment_text' class='previewInputDescription' style='display: none;' class='inputPreview' >" + escapeHTML(data.text) + "</textarea>"
\r
319 * Add the host to the attachment preview.
\r
321 * @param {string} url The url of the link attachment.
\r
324 var addHostToAttachment = function(url) {
\r
326 var regexpr = "(https?://)([^:^/]*)(:\\d*)?(.*)?";
\r
327 var regResult = url.match(regexpr);
\r
328 var urlHost = regResult[1] + regResult[2];
\r
329 $('#previewUrl_' + selector).html("<a href='" + url + "'>" + urlHost + "</a>");
\r
334 * Add preview images to the attachment.
\r
336 * @param {array} images
\r
340 var addImagesToAttachment = function(images) {
\r
341 var imageClass = 'attachment-preview';
\r
343 if (Array.isArray(images)) {
\r
344 $('#previewImages_' + selector).show();
\r
345 $('#attachmentImageSrc_' + selector).val(bin2hex(images[photoNumber].src));
\r
346 $('#attachmentImageWidth_' + selector).val(images[photoNumber].width);
\r
347 $('#attachmentImageHeight_' + selector).val(images[photoNumber].height);
\r
349 $('#previewImages_' + selector).hide();
\r
352 images.length = parseInt(images.length);
\r
353 var appendImage = "";
\r
355 for (i = 0; i < images.length; i++) {
\r
356 // For small preview images we use a smaller attachment format.
\r
357 ///@todo here we need to add a check for !Config::get('system', 'always_show_preview').
\r
358 if (images[i].width >= 500 && images[i].width >= images[i].height) {
\r
359 imageClass = 'attachment-image';
\r
363 appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' ></img>";
\r
365 appendImage += "<img id='imagePreview_" + selector + "_" + i + "' src='" + images[i].src + "' class='" + imageClass + "' style='display: none;'></img>";
\r
369 $('#previewImage_' + selector).html(appendImage + "<div id='whiteImage' style='color: transparent; display:none;'>...</div>");
\r
371 // More than just one image.
\r
372 if (images.length > 1) {
\r
373 // Enable the the button to change the preview pictures.
\r
374 $('#previewChangeImg_' + selector).show();
\r
376 if (firstPosted === false) {
\r
377 firstPosted = true;
\r
379 $('#previewChangeImg_' + selector).unbind('click').click(function (e) {
\r
380 e.stopPropagation();
\r
381 if (images.length > 1) {
\r
382 $('#imagePreview_' + selector + '_' + photoNumber).css({
\r
387 // If have reached the last image, begin with the first image.
\r
388 if (photoNumber === images.length) {
\r
392 $('#imagePreview_' + selector + '_' + photoNumber).css({
\r
395 $('#photoNumber_' + selector).val(photoNumber);
\r
396 $('#attachmentImageSrc_' + selector).val(bin2hex(images[photoNumber].src));
\r
397 $('#attachmentImageWidth_' + selector).val(images[photoNumber].width);
\r
398 $('#attachmentImageHeight_' + selector).val(images[photoNumber].height);
\r
406 * Add event listener to control the attachment preview.
\r
410 var processEventListener = function() {
\r
411 $('#previewSpanTitle_' + selector).unbind('click').click(function (e) {
\r
412 e.stopPropagation();
\r
413 if (blockTitle === false) {
\r
415 $('#previewSpanTitle_' + selector).hide();
\r
416 $('#previewInputTitle_' + selector).show();
\r
417 $('#previewInputTitle_' + selector).val($('#previewInputTitle_' + selector).val());
\r
418 $('#previewInputTitle_' + selector).focus().select();
\r
422 $('#previewInputTitle_' + selector).blur(function () {
\r
423 blockTitle = false;
\r
424 $('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val());
\r
425 $('#previewSpanTitle_' + selector).show();
\r
426 $('#previewInputTitle_' + selector).hide();
\r
429 $('#previewInputTitle_' + selector).keypress(function (e) {
\r
430 if (e.which === 13) {
\r
431 blockTitle = false;
\r
432 $('#previewSpanTitle_' + selector).html($('#previewInputTitle_' + selector).val());
\r
433 $('#previewSpanTitle_' + selector).show();
\r
434 $('#previewInputTitle_' + selector).hide();
\r
438 $('#previewSpanDescription_' + selector).unbind('click').click(function (e) {
\r
439 e.stopPropagation();
\r
440 if (blockDescription === false) {
\r
441 blockDescription = true;
\r
442 $('#previewSpanDescription_' + selector).hide();
\r
443 $('#previewInputDescription_' + selector).show();
\r
444 $('#previewInputDescription_' + selector).val($('#previewInputDescription_' + selector).val());
\r
445 $('#previewInputDescription_' + selector).focus().select();
\r
449 $('#previewInputDescription_' + selector).blur(function () {
\r
450 blockDescription = false;
\r
451 $('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val());
\r
452 $('#previewSpanDescription_' + selector).show();
\r
453 $('#previewInputDescription_' + selector).hide();
\r
456 $('#previewInputDescription_' + selector).keypress(function (e) {
\r
457 if (e.which === 13) {
\r
458 blockDescription = false;
\r
459 $('#previewSpanDescription_' + selector).html($('#previewInputDescription_' + selector).val());
\r
460 $('#previewSpanDescription_' + selector).show();
\r
461 $('#previewInputDescription_' + selector).hide();
\r
465 $('#previewSpanTitle_' + selector).mouseover(function () {
\r
466 $('#previewSpanTitle_' + selector).css({
\r
467 "background-color": "#ff9"
\r
471 $('#previewSpanTitle_' + selector).mouseout(function () {
\r
472 $('#previewSpanTitle_' + selector).css({
\r
473 "background-color": "transparent"
\r
477 $('#previewSpanDescription_' + selector).mouseover(function () {
\r
478 $('#previewSpanDescription_' + selector).css({
\r
479 "background-color": "#ff9"
\r
483 $('#previewSpanDescription_' + selector).mouseout(function () {
\r
484 $('#previewSpanDescription_' + selector).css({
\r
485 "background-color": "transparent"
\r
489 $('#closePreview_' + selector).unbind('click').click(function (e) {
\r
490 e.stopPropagation();
\r
494 firstPosted = false;
\r
495 $('#preview_' + selector).fadeOut("fast", function () {
\r
496 $('#preview_' + selector).remove();
\r
497 $('#profile-rotator').hide();
\r
498 $('#' + selector).focus();
\r
505 * Convert attachmant bbcode into an array.
\r
507 * @param {string} content Text content with the attachment bbcode.
\r
508 * @returns {object || null}
\r
510 var getAttachmentData = function(content) {
\r
513 var match = content.match(/(.*)\[attachment(.*?)\](.*?)\[\/attachment\](.*)/ism);
\r
514 if (match === null || match.length < 5) {
\r
518 var attributes = match[2];
\r
519 data.text = trim(match[1]);
\r
522 var matches = attributes.match(/type='(.*?)'/ism);
\r
523 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
524 type = matches[1].toLowerCase();
\r
527 matches = attributes.match(/type="(.*?)"/ism);
\r
528 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
529 type = matches[1].toLowerCase();
\r
538 && type !== 'audio'
\r
539 && type !== 'photo'
\r
540 && type !== 'video')
\r
551 matches = attributes.match(/url='(.*?)'/ism);
\r
552 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
553 url = matches[1].toLowerCase();
\r
556 matches = attributes.match(/url="(.*?)"/ism);
\r
557 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
558 url = matches[1].toLowerCase();
\r
562 data.url = escapeHTML(url);
\r
567 matches = attributes.match(/title='(.*?)'/ism);
\r
568 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
569 title = matches[1].toLowerCase();
\r
572 matches = attributes.match(/title="(.*?)"/ism);
\r
573 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
574 title = matches[1].toLowerCase();
\r
577 if (title !== '') {
\r
578 data.title = escapeHTML(title);
\r
583 matches = attributes.match(/image='(.*?)'/ism);
\r
584 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
585 image = matches[1].toLowerCase();
\r
588 matches = attributes.match(/image="(.*?)"/ism);
\r
589 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
590 image = matches[1].toLowerCase();
\r
593 if (image !== '') {
\r
594 data.image = escapeHTML(image);
\r
599 matches = attributes.match(/preview='(.*?)'/ism);
\r
600 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
601 preview = matches[1].toLowerCase();
\r
604 matches = attributes.match(/preview="(.*?)"/ism);
\r
605 if (matches !== null && typeof matches[1] !== 'undefined') {
\r
606 preview = matches[1].toLowerCase();
\r
609 if (preview !== '') {
\r
610 data.preview = escapeHTML(preview);
\r
613 data.text = trim(match[3]);
\r
614 data.after = trim(match[4]);
\r
620 * Process txt content and if it contains attachment bbcode
\r
621 * add it to the attachment preview .
\r
623 * @param {string} content
\r
626 var addBBCodeToPreview =function(content) {
\r
627 var attachmentData = getAttachmentData(content);
\r
628 if (attachmentData) {
\r
629 reAddAttachment(attachmentData);
\r
630 // Remove the attachment bbcode from the textarea.
\r
631 var content = content.replace(/\[attachment.*\[\/attachment]/ism, '');
\r
632 $('#' + selector).val(content);
\r
633 $('#' + selector).focus();
\r
638 * Add an Attachment with data from an old bbcode
\r
639 * generated attachment.
\r
641 * @param {object} json The attachment data.
\r
644 var reAddAttachment = function(json) {
\r
646 $('#profile-rotator').hide();
\r
650 if (json.type !== 'link' && json.type !== 'video' && json.type !== 'photo' || json.url === json.title) {
\r
651 $('#profile-rotator').hide();
\r
655 var obj = {data: json};
\r
656 obj = sanitizeInputData(obj);
\r
658 var data = obj.data;
\r
662 processAttachmentTpl(data);
\r
663 addTitleDescription(data);
\r
664 addHostToAttachment(data.url);
\r
666 // Since we don't have an array of image data,
\r
667 // we need to add the preview images in a different way
\r
668 // than in function addImagesToAttachment().
\r
669 var imageClass = 'attachment-preview';
\r
672 if (data.image !== '') {
\r
673 imageClass = 'attachment-image';
\r
674 image = data.image;
\r
676 image = data.preview;
\r
679 if (image !== '') {
\r
680 var appendImage = "<img id='imagePreview_" + selector + "' src='" + image + "' class='" + imageClass + "' ></img>"
\r
681 $('#previewImage_' + selector).html(appendImage);
\r
682 $('#attachmentImageSrc_' + selector).val(bin2hex(image));
\r
684 // We need to add the image widht and height when it is
\r
688 $('#attachmentImageWidth_' + selector).val(this.width);
\r
689 $('#attachmentImageHeight_' + selector).val(this.height);
\r
695 processEventListener();
\r
696 $('#profile-rotator').hide();
\r
700 * Add missing default properties to the input data object.
\r
702 * @param {object} obj Input data.
\r
703 * @returns {object}
\r
705 var sanitizeInputData = function(obj) {
\r
706 if (typeof obj.contentType === 'undefined'
\r
707 || obj.contentType === null)
\r
709 obj.contentType = "";
\r
711 if (typeof obj.data.url === 'undefined'
\r
712 || obj.data.url === null)
\r
716 if (typeof obj.data.title === 'undefined'
\r
717 || obj.data.title === null
\r
718 || obj.data.title === "")
\r
720 obj.data.title = defaultTitle;
\r
722 if (typeof obj.data.text === 'undefined'
\r
723 || obj.data.text === null
\r
724 || obj.data.text === "")
\r
726 obj.data.text = "";
\r
728 if (typeof obj.data.images === 'undefined'
\r
729 || obj.data.images === null)
\r
731 obj.data.images = "";
\r
734 if (typeof obj.data.image === 'undefined'
\r
735 || obj.data.image === null)
\r
737 obj.data.image = "";
\r
740 if (typeof obj.data.preview === 'undefined'
\r
741 || obj.data.preview === null)
\r
743 obj.data.preview = "";
\r
750 * Destroy the plugin.
\r
754 var destroy = function() {
\r
755 $('#' + selector).unbind();
\r
756 $('#preview_' + selector).remove();
\r
759 blockTitle = false;
\r
760 blockDescription = false;
\r
765 firstPosted = false;
\r
767 isCrawling = false;
\r
771 var trim = function(str) {
\r
772 return str.replace(/^\s+|\s+$/g, "");
\r
774 var escapeHTML = function(unsafe_str) {
\r
776 .replace(/&/g, '&')
\r
777 .replace(/</g, '<')
\r
778 .replace(/>/g, '>')
\r
779 .replace(/\"/g, '"')
\r
780 .replace(/\[/g, '[')
\r
781 .replace(/\]/g, ']')
\r
782 .replace(/\'/g, '''); // ''' is not valid HTML 4
\r
785 // Initialize LinkPreview
\r
789 // make crawlText() accessable from the outside.
\r
790 crawlText: function(text) {
\r
793 addBBCodeToPreview: function(content) {
\r
794 addBBCodeToPreview(content);
\r
796 destroy: function() {
\r
802 $.fn.linkPreview.defaults = {
\r
803 defaultDescription: "Enter a description",
\r
804 defaultTitle: "Enter a title"
\r
808 * Get in a textarea the previous word before the cursor.
\r
810 * @param {object} text Textarea elemet.
\r
811 * @param {integer} caretPos Cursor position.
\r
813 * @returns {string} Previous word.
\r
815 function returnWord(text, caretPos) {
\r
816 var index = text.indexOf(caretPos);
\r
817 var preText = text.substring(0, caretPos);
\r
818 // If the last charachter is a space remove the one space
\r
819 // We need this in friendica for the url preview.
\r
820 if (preText.slice(-1) == " ") {
\r
821 preText = preText.substring(0, preText.length -1);
\r
824 if (preText.indexOf(" ") > 0) {
\r
825 var words = preText.split(" ");
\r
826 return words[words.length - 1]; //return last word
\r
834 * Get in a textarea the previous word before the cursor.
\r
836 * @param {string} id The ID of a textarea element.
\r
837 * @returns {sting|null} Previous word or null if no word is available.
\r
839 function getPrevWord(id) {
\r
840 var text = document.getElementById(id);
\r
841 var caretPos = getCaretPosition(text);
\r
842 var word = returnWord(text.value, caretPos);
\r
843 if (word != null) {
\r
850 * Get the cursor posiotion in an text element.
\r
852 * @param {object} ctrl Textarea elemet.
\r
853 * @returns {integer} Position of the cursor.
\r
855 function getCaretPosition(ctrl) {
\r
856 var CaretPos = 0; // IE Support
\r
857 if (document.selection) {
\r
859 var Sel = document.selection.createRange();
\r
860 Sel.moveStart('character', -ctrl.value.length);
\r
861 CaretPos = Sel.text.length;
\r
864 else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
\r
865 CaretPos = ctrl.selectionStart;
\r