webpreview UI Component

jQuery.telligent.evolution.ui.components.webpreview

UI Component which handles automatic asynchronous loading and presentation of web previews within other content. Decorates <span class="ui-webpreview"></span> elements to present Ajax-loaded web previews. Overrides can be provided at the theme level to present web previews differently. This enables content to be loaded quickly without waiting for remote web content to be scraped and processed.

Options

Data made available to instances of the component:

configuration: Object of all query string encoded keys and values embedded in the data-configuration attribute
- url: URL to preview
- maximagewidth: optional max image width requested
- maximageheight: optional max image height requested

Example:

Given the markup...

<span class="ui-webpreview" data-configuration="url=http%3A%2F%2Ftelligent.com">
    <a target="_new" rel="nofollow" href="http://telligent.com">Telligent</a>
</span>

After being rendered within the DOM, it will be automatically replaced with an asynchronously-loaded web preview of the target URL (in this http://telligent.com).

Default Implementation

For reference purposes or as the basis for an override:

(function($){

var getWebPreviewData = function(options) {
        $.telligent.evolution.preview.load(options.url, {
            maxImageWidth: options.maxImageWidth,
            maxImageHeight: options.maxImageHeight,
            success: options.success
        });
    },
    renderWebPreview = function(elm, preview) {
        return $.telligent.evolution.preview.render(preview, {
            template: $.telligent.evolution.preview.defaults.template
        });
    };

$.telligent.evolution.ui.components.webpreview = {
    setup: function() { },
    add: function(elm, options) {
        var isPreview = elm.hasClass('preview');

        var previewOptions = {
            url: options.configuration.url,
            success: function (preview) {
                if (isPreview) {
                    elm.html(preview.previewImageHtml || '');
                } else if (preview && (preview.excerpt || preview.imageUrl)) {
                    var templatedPreview = renderWebPreview(elm, preview);
                    if (typeof templatedPreview !== 'undefined' && templatedPreview !== null && templatedPreview.length > 0) {
                        elm.html(templatedPreview);
                    }
                }
            }
        };
        if (typeof options.configuration.maximagewidth !== 'undefined') {
            previewOptions.maxImageWidth = options.configuration.maximagewidth;
        }
        if (typeof options.configuration.maximageheight !== 'undefined') {
            previewOptions.maxImageHeight = options.configuration.maximageheight;
        }
        if (!isPreview) {
            elm.parents('.ui-theater').data('disabletheater', true);
            if (options.configuration.url.indexOf($.telligent.evolution.site.getBaseUrl(true)) < 0) {
                elm.parents('.ui-theater').attr('target', '_blank');
            }
        }
        getWebPreviewData(previewOptions);
    }
};

}(jQuery));

Recommended