webpreview UI Component

Ben Tiedt — Fri, 08 Mar 2024 17:52:24 GMT

Current Revision posted to API Documentation by Ben Tiedt on 03/08/2024 17:52:24

jQuery.telligent.evolution.ui.components.webpreview

[[ui JavaScript API Module|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. [[ui JavaScript API Module|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));