Skip to content
Snippets Groups Projects
thread.js 5.64 KiB
Newer Older
  • Learn to ignore specific revisions
  • /*********************************************************************
        thread.js
    
        Thread JS untils
        Copyright (c) 2014 osTicket
        http://www.osticket.com
    
        Released under the GNU General Public License WITHOUT ANY WARRANTY.
    
        vim: expandtab sw=4 ts=4 sts=4:
    **********************************************************************/
    
    var thread = {
    
        options: {
            autoScroll: true,
            showimages: false
        },
    
        scrollTo: function (entry) {
    
           if (!entry) return;
    
           var frame = 0;
    
           $('html, body').animate({
    
                scrollTop: entry.offset().top - 50,
           }, {
    
                step: function(now, fx) {
                    // Recalc end target every few frames
                    if (++frame % 6 == 0)
                        fx.end = entry.offset().top - 50;
                }
            });
        },
    
        showExternalImage: function(div) {
            var $div = $(div),
                $img = $div.append($('<img>')
                  .attr('src', $div.data('src'))
                  .attr('alt', $div.attr('alt'))
                  .attr('title', $div.attr('title'))
                  .attr('style', $div.data('style'))
                );
            if ($div.attr('width'))
                $img.width($div.attr('width'));
            if ($div.attr('height'))
                $img.height($div.attr('height'));
        },
    
        externalImages: function()  {
    
            // Optionally show external images
            $('.thread-entry', this.options.container).each(function(i, te) {
                var extra = $(te).find('.textra'),
                    imgs = $(te).find('.non-local-image[data-src]');
    
                if (!extra || !imgs.length)
                    return;
    
                // Add Show Images buttons
                extra.append($('<a>')
    
                  .addClass("white button action-button show-images")
    
                  .css({'font-weight':'normal'})
                  .text(' ' + __('Show Images'))
                  .click(function(ev) {
                    imgs.each(function(i, img) {
    
                      thread.showExternalImage(img);
    
                      $(img).removeClass('non-local-image')
                        // Remove placeholder sizing
                        .css({'display':'inline-block'})
                        .width('auto')
                        .height('auto')
                        .removeAttr('width')
                        .removeAttr('height');
                      extra.find('.show-images').hide();
                    });
                  })
                  .prepend($('<i>')
                    .addClass('icon-picture')
                  )
                );
    
                // Show placeholders
                imgs.each(function(i, img) {
                    var $img = $(img);
                    // Save a copy of the original styling
                    $img.data('style', $img.attr('style'));
                    $img.removeAttr('style');
                    // If the image has a 'height' attribute, use it, otherwise, use
                    // 40px
                    $img.height(($img.attr('height') || '40') + 'px');
                    // Ensure the image placeholder is visible width-wise
                    if (!$img.width())
                        $img.width(($img.attr('width') || '80') + 'px');
                    // TODO: Add a hover-button to show just one image
                });
            });
        },
    
        inlineImages: function (entry_id) {
            // TODO: use entry selector or object instead of ID
            var selector = (entry_id == undefined)
                ? '.thread-body img[data-cid]'
                : '.thread-body#thread-id-'+entry_id+' img[data-cid]';
    
            // Get urls
            if (!(urls=this.options.container.data('imageUrls')))
                return;
    
            $(selector, this.options.container).each(function(i, el) {
                var e = $(el),
                    cid = e.data('cid').toLowerCase(),
                    info = urls[cid];
                if (info && !e.data('wrapped')) {
                    // Add a hover effect with the filename
                    var timeout, caption = $('<div class="image-hover">')
                        .css({'float':e.css('float')});
                    e.wrap(caption).parent()
    
                        .append($('<div class="caption">')
                            .append($('<a href="'+info.download_url+'" class="dark button pull-right no-pjax"><i class="icon-download-alt"></i></a>')
    
                              .attr('download', info.filename)
    
                              .attr('title', __('Download'))
                              .tooltip()
    
                            )
                        );
                    e.data('wrapped', true);
                }
            });
        },
    
        prepImages: function() {
    
            // TODO: Check config options
            this.externalImages();
            this.inlineImages();
        },
    
        onLoad: function (container, options) {
    
            // See if thread container is valid
            $container = $('#'+container);
            if (!$container || !$container.length)
                return;
    
            // set options
            this.options.container = $container;
            $.extend(this.options, options);
    
            // Prep images
            this.prepImages();
    
            // Auto scroll to the last entry if autoScroll is enabled.
            if (this.options.autoScroll === true) {
                // Find the last entry to scroll to.
                var e = $('.thread-entry', $container).filter(':visible').last();
                if (e.length)
                    this.scrollTo(e);
            }
    
            // Open thread body links in a new tab/window
            $('div.thread-body a', $container).each(function() {
                $(this).attr('target', '_blank');
            });
    
    
            // Open first response option tab if not already active
            if (!document.location.hash)
    
                $('.actions .tabs li:visible:first:not(.active) a', $container.parent()).trigger('click');
    
        }
    };
    
    // Set thread as JQuery object
    $.thread = thread;