From a9d84affc52a36ef28b23f17cab23177a64bf198 Mon Sep 17 00:00:00 2001 From: Jill Tankersley Date: Sat, 3 Dec 2016 19:02:53 -0500 Subject: [PATCH] Updates from private repo --- inline-images/candy.js | 98 +++++++++++++++++++++++++++--------------- 1 file changed, 63 insertions(+), 35 deletions(-) diff --git a/inline-images/candy.js b/inline-images/candy.js index 13b9306..f857e8b 100755 --- a/inline-images/candy.js +++ b/inline-images/candy.js @@ -3,21 +3,23 @@ * @version 1.0 * @author Manuel Alabor (manuel@alabor.me) * @author Jonatan Männchen + * @author Melissa Noelle * * If a user posts a URL to an image, that image gets rendered directly * inside of Candy. */ -/* global Candy, jQuery, Image */ - var CandyShop = (function(self) { return self; }(CandyShop || {})); CandyShop.InlineImages = (function(self, Candy, $) { var _options = { - fileExtensions: ['png','jpg','jpeg','gif'] - , maxImageSize: 100 - , noInlineSizing: false + imageFileExtensions: ['png','jpg','jpeg','gif'], + textFileExtensions: ['txt'], + maxImageSize: 100, + noInlineSizing: false, + showTextPreview: true, + textPreviewLength: 200, }; /** Function: init @@ -36,10 +38,10 @@ CandyShop.InlineImages = (function(self, Candy, $) { * array with all the file extensions you want to display as image. * * Parameters: - * (String array) fileExtensions - Array with extensions (jpg, png, ...) + * (String array) imageFileExtensions - Array with extensions (jpg, png, ...) */ - self.initWithFileExtensions = function(fileExtensions) { - _options.fileExtensions = fileExtensions; + self.initWithFileExtensions = function(imageFileExtensions) { + _options.imageFileExtensions = imageFileExtensions; self.init(); }; @@ -65,7 +67,7 @@ CandyShop.InlineImages = (function(self, Candy, $) { * (int) maxImageSize - Maximum edge size for images */ self.initWithFileExtensionsAndMaxImageSize = function(fileExtensions, maxImageSize) { - _options.fileExtensions = fileExtensions; + _options.imageFileExtensions = fileExtensions; _options.maxImageSize = maxImageSize; self.init(); }; @@ -104,8 +106,9 @@ CandyShop.InlineImages = (function(self, Candy, $) { dummyContainer.innerHTML = message; $(dummyContainer).find('a').each(function(index, anchor) { - if (anchorHasMatchingFileExtension(anchor)) { - anchor.innerHTML = buildImageLoaderSource(anchor.href); + var type = anchorHasMatchingFileExtension(anchor); + if (type) { + anchor.innerHTML = buildLoaderSource(anchor.href, type); } }); @@ -122,10 +125,12 @@ CandyShop.InlineImages = (function(self, Candy, $) { * (true, false) */ var anchorHasMatchingFileExtension = function(element) { - var dotPosition = element.pathname.lastIndexOf("."); - if(dotPosition > -1) { - if(_options.fileExtensions.indexOf(element.pathname.substr(dotPosition+1)) != -1) { - return true; + var dotPosition = element.pathname.lastIndexOf('.'); + if (dotPosition > -1) { + if (_options.imageFileExtensions.indexOf(element.pathname.substr(dotPosition+1)) !== -1) { + return 'image'; + } else if (_options.textFileExtensions.indexOf(element.pathname.substr(dotPosition+1)) !== -1) { + return 'text'; } } return false; @@ -133,7 +138,7 @@ CandyShop.InlineImages = (function(self, Candy, $) { /** Function: handleOnShow * Each time a message gets displayed, this method checks for possible - * image loaders (created by buildImageLoaderSource). + * image loaders (created by buildLoaderSource). * If there is one, the image "behind" the loader gets loaded in the * background. As soon as the image is loaded, the image loader gets * replaced by proper scaled image. @@ -141,29 +146,49 @@ CandyShop.InlineImages = (function(self, Candy, $) { * Parameters: * (Array) args */ - var handleOnShow = function(e, args) { + var handleOnShow = function() { $('.inlineimages-loader').each(function(index, element) { - $(element).removeClass('inlineimages-loader'); var url = $(element).attr('longdesc'); - var imageLoader = new Image(); - - $(imageLoader).load(function() { - var origWidth = this.width; - var origHeight = this.height; - if(origWidth > _options.maxImageSize || origHeight > _options.maxImageSize) { - var ratio = Math.min(_options.maxImageSize / origWidth, _options.maxImageSize / origHeight); - var width = Math.round(ratio * origWidth); - var height = Math.round(ratio * origHeight); - } - $(element).replaceWith(buildImageSource(url, width, height)) - }); + $(element).removeClass('inlineimages-loader'); - imageLoader.src = url; + if ($(element).prop('tagName') === 'IMG') { + var imageLoader = new Image(); + var width, height; + + $(imageLoader).load(function() { + var origWidth = this.width; + var origHeight = this.height; + if(origWidth > _options.maxImageSize || origHeight > _options.maxImageSize) { + var ratio = Math.min(_options.maxImageSize / origWidth, _options.maxImageSize / origHeight); + width = Math.round(ratio * origWidth); + height = Math.round(ratio * origHeight); + } + + $(element).replaceWith(buildImageSource(url, width, height)); + var messagePane = $('.room-pane:visible').find('.message-pane'); + messagePane.scrollTop(messagePane[0].scrollHeight); + }); + imageLoader.src = url; + } else if ($(element).prop('tagName') === 'DIV' && _options.showTextPreview) { + $.get(url, function(data) { + var text = data.slice(0, _options.textPreviewLength); + if (data.length > _options.textPreviewLength) { + text += '...'; + } + text = '
Pasted Text:
' + text + '
'; + $(element).addClass('inline-text-preview'); + text += 'Click here to continue reading...'; + element.innerHTML = text; + $(element).parent('a').after(element.outerHTML); + // Remove parent link. + $(element).parent('a').remove(); + }); + } }); }; - /** Function: buildImageLoaderSource + /** Function: buildLoaderSource * Returns a loader indicator. The handleOnShow method fullfills afterwards * the effective image loading. * @@ -173,8 +198,12 @@ CandyShop.InlineImages = (function(self, Candy, $) { * Returns: * (String) */ - var buildImageLoaderSource = function(url) { - return ''; + var buildLoaderSource = function(url, type) { + if (type === 'image') { + return ''; + } else if (type === 'text') { + return '
'; + } }; /** Function: buildImageSource @@ -195,5 +224,4 @@ CandyShop.InlineImages = (function(self, Candy, $) { }; return self; - }(CandyShop.InlineImages || {}, Candy, jQuery));