Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Verint Community 12.x
  • Verint Community
Verint Community 12.x
API Documentation webpreview UI Component
  • User Documentation
  • Ask the Community
  • API Documentation
  • Manager Training
  • Developer Training
  • Tags
  • More
  • Cancel
  • New
  • API Documentation
  • +In-Process API Documentation
  • +Plugin API Documentation
  • +REST API Documentation
  • -Widget, Theme, and Automation APIs
    • +Automation Events
    • -Client-side APIs
      • +Client Messages
      • +Composer Plugins
      • +JavaScript API Modules
      • +jQuery Events
      • +jQuery Plugins
      • -UI Components
        • bookmark UI Component
        • code UI Component
        • collapseexpand UI Component
        • feature UI Component
        • html UI Component
        • Idea Voting UI Component
        • like UI Component
        • links UI Component
        • loading UI Component
        • masonry UI Component
        • moderate UI Component
        • page UI Component
        • poll UI Component
        • previewhtml UI Component
        • rate UI Component
        • resizedimage UI Component
        • scheduledfile UI Component
        • searchresult UI Component
        • select UI Component
        • squeezetext UI Component
        • tag UI Component
        • theater UI Component
        • tip UI Component
        • tourtip UI Component
        • viewhtml UI Component
        • webpreview UI Component
    • +Dynamic Configuration
    • +LESS Functions
    • +Script API Types
    • +Script APIs

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));

  • Share
  • History
  • More
  • Cancel
Related
Recommended
  • Telligent
  • Professional Services
  • Submit a Support Ticket
  • Become a Partner
  • Request a Demo
  • Contact Us

About
Privacy Policy
Terms of use
Copyright 2024 Verint, Inc.
Powered by Verint Community