[Summary view] [Print] [Text view]

   1  
   2  /**
   3   * @file
   4   * A simple jQuery ThumbnailHover Div Slideshow Rotator.
   5   */
   6  
   7  /**
   8   * This will set our initial behavior, by starting up each individual slideshow.
   9   */
  10  Drupal.behaviors.viewsSlideshowThumbnailHover = function (context) {
  11    $('.views_slideshow_thumbnailhover_main:not(.viewsSlideshowThumbnailHover-processed)', context).addClass('viewsSlideshowThumbnailHover-processed').each(function() {
  12      var fullId = '#' + $(this).attr('id');
  13      if (!Drupal.settings.viewsSlideshowThumbnailHover || !Drupal.settings.viewsSlideshowThumbnailHover[fullId]) {
  14        return;
  15      }
  16  
  17      var settings = Drupal.settings.viewsSlideshowThumbnailHover[fullId];
  18      settings.targetId = '#' + $(fullId + " :first").attr('id');
  19          settings.paused = false;
  20          
  21      settings.opts = {
  22        speed:settings.speed,
  23        timeout:parseInt(settings.timeout),
  24        delay:parseInt(settings.delay),
  25        sync:settings.sync==1,
  26        random:settings.random==1,
  27        pause:false,
  28        allowPagerClickBubble:(settings.pager_event=='click')? false : true,
  29        pager:(settings.pager_event == 'hoverIntent') ? null : '#views_slideshow_breakout_teasers_' + settings.vss_id,
  30        nowrap:parseInt(settings.nowrap),
  31        pagerAnchorBuilder:(settings.pager_event == 'hoverIntent') ? null : function(idx, slide) { 
  32          return '#views_slideshow_thumbnailhover_div_breakout_teaser_' + settings.vss_id + '_' + idx; 
  33        },
  34        after:function(curr, next, opts) {
  35          // Used for Image Counter.
  36          if (settings.image_count) {
  37            $('#views_slideshow_thumbnailhover_image_count_' + settings.vss_id + ' span.num').html(opts.currSlide + 1);
  38            $('#views_slideshow_thumbnailhover_image_count_' + settings.vss_id + ' span.total').html(opts.slideCount);
  39          }
  40        },
  41        before:function(current, next, opts) {
  42          // Remember last slide.
  43          if (settings.remember_slide) {
  44            createCookie(settings.view_id, opts.currSlide + 1, settings.remember_slide_days);
  45          }
  46  
  47          // Make variable height.
  48          if (settings.fixed_height == 0) {
  49            //get the height of the current slide
  50            var $ht = $(this).height();
  51            //set the container's height to that of the current slide
  52            $(this).parent().animate({height: $ht});
  53          }
  54          
  55          var currId = (currId=$(current).attr('id')).substring(currId.lastIndexOf('_')+1)
  56          var nextId = (nextId=$(next).attr('id')).substring(nextId.lastIndexOf('_')+1)
  57          $('#views_slideshow_thumbnailhover_div_breakout_teaser_' + settings.vss_id + '_' + currId).removeClass('activeSlide');
  58          $('#views_slideshow_thumbnailhover_div_breakout_teaser_' + settings.vss_id + '_' + nextId).addClass('activeSlide');
  59        },
  60        pagerEvent: (settings.pager_event == 'hoverIntent') ? null : settings.pager_event,
  61        prev:(settings.controls > 0)?'#views_slideshow_thumbnailhover_prev_' + settings.vss_id:null,
  62        next:(settings.controls > 0)?'#views_slideshow_thumbnailhover_next_' + settings.vss_id:null,
  63        cleartype:(settings.ie.cleartype == 'true')? true : false,
  64        cleartypeNoBg:(settings.ie.cleartypenobg == 'true')? true : false
  65      };
  66  
  67      // Set the starting slide if we are supposed to remember the slide
  68      if (settings.remember_slide) {
  69        var startSlide = readCookie(settings.view_id);
  70        if (startSlide == null) {
  71          startSlide = 0;
  72        }
  73        settings.opts.startingSlide =  startSlide;
  74      }
  75  
  76      if (settings.effect == 'none') {
  77        settings.opts.speed = 1;
  78      }
  79      else {
  80        settings.opts.fx = settings.effect;
  81      }
  82  
  83      // Pause on hover.
  84      if (settings.pause == 1) {
  85        $('#views_slideshow_thumbnailhover_teaser_section_' + settings.vss_id).hover(function() {
  86          $(settings.targetId).cycle('pause');
  87        }, function() {
  88          if (settings.paused == false) {
  89            $(settings.targetId).cycle('resume');
  90          }
  91        });
  92      }
  93  
  94      // Pause on clicking of the slide.
  95      if (settings.pause_on_click == 1) {
  96        $('#views_slideshow_thumbnailhover_teaser_section_' + settings.vss_id).click(function() { 
  97          viewsSlideshowThumbnailHoverPause(settings);
  98        });
  99      }
 100      
 101      // Add additional settings.
 102          if (settings.advanced  && settings.advanced != "\n") {
 103            settings.advanced = settings.advanced.toString();
 104        var advanced = settings.advanced.split("\n");
 105        for (i=0; i<advanced.length; i++) {
 106          var prop = '';
 107          var value = '';
 108          var property = advanced[i].split(":");
 109          for (j=0; j<property.length; j++) {
 110            if (j == 0) {
 111              prop = property[j];
 112            }
 113            else if (j == 1) {
 114              value = property[j];
 115            }
 116            else {
 117              value += ":" + property[j];
 118            }
 119          }
 120  
 121          // Need to evaluate so true, false and numerics aren't a string.
 122          if (value == 'true' || value == 'false' || IsNumeric(value)) {
 123            value = eval(value);
 124          }
 125          else {
 126            // Parse strings into functions.
 127            var func = value.match(/function\s*\((.*?)\)\s*\{(.*)\}/i);
 128            if (func) {
 129              value = new Function(func[1].match(/(\w+)/g), func[2]);
 130            }
 131          }
 132      
 133          // Call both functions if prop was set previously.
 134          if (typeof(value) == "function" && prop in settings.opts) {
 135            var callboth = function(before_func, new_func) {
 136              return function() {
 137                before_func.apply(null, arguments);
 138                new_func.apply(null, arguments);
 139              };
 140            };
 141            settings.opts[prop] = callboth(settings.opts[prop], value);
 142          }
 143          else {
 144            settings.opts[prop] = value;
 145          }
 146        }
 147      }
 148  
 149      $(settings.targetId).cycle(settings.opts);
 150  
 151      // Start Paused
 152      if (settings.start_paused) {
 153        viewsSlideshowThumbnailHoverPause(settings);
 154      }
 155      
 156      // Pause if hidden.
 157      if (settings.pause_when_hidden) {
 158        var checkPause = function(settings) {
 159          // If the slideshow is visible and it is paused then resume.
 160          // otherwise if the slideshow is not visible and it is not paused then
 161          // pause it.
 162          var visible = viewsSlideshowThumbnailHoverIsVisible(settings.targetId, settings.pause_when_hidden_type, settings.amount_allowed_visible);
 163          if (visible && settings.paused) {
 164            viewsSlideshowThumbnailHoverResume(settings);
 165          }
 166          else if (!visible && !settings.paused) {
 167            viewsSlideshowThumbnailHoverPause(settings);
 168          }
 169        }
 170       
 171        // Check when scrolled.
 172        $(window).scroll(function() {
 173         checkPause(settings);
 174        });
 175        
 176        // Check when window is resized.
 177        $(window).resize(function() {
 178          checkPause(settings);
 179        });
 180      }
 181  
 182      // Show image count for people who have js enabled.
 183      $('#views_slideshow_thumbnailhover_image_count_' + settings.vss_id).show();
 184      
 185      if (settings.pager_event == 'hoverIntent') {
 186        $('#views_slideshow_thumbnailhover_breakout_teasers_' + settings.vss_id + ' .views_slideshow_thumbnailhover_div_breakout_teaser').each(function(i,obj) {
 187          $(obj).hoverIntent(
 188            function() {
 189              $('.views_slideshow_thumbnailhover_div_breakout_teaser').removeClass('activeSlide');
 190              var id = $(this).attr('id');
 191              id = parseInt(id.substring(id.lastIndexOf('_')+1));
 192              $(settings.targetId).cycle(id);
 193              $('#views_slideshow_thumbnailhover_div_breakout_teaser_' + settings.vss_id + '_' + id).addClass('activeSlide');
 194              $(settings.targetId).cycle('stop');
 195            },
 196            function() {
 197              var id = $(this).attr('id');
 198              settings.opts.startingSlide = parseInt(id.substring(id.lastIndexOf('_')+1));
 199              $(settings.targetId).cycle(settings.opts);
 200            }
 201          );
 202        });
 203      }
 204  
 205      if (settings.controls > 0) {
 206        // Show controls for people who have js enabled browsers.
 207        $('#views_slideshow_thumbnailhover_controls_' + settings.vss_id).show();
 208        
 209        $('#views_slideshow_thumbnailhover_playpause_' + settings.vss_id).click(function(e) {
 210          if (settings.paused) {
 211            viewsSlideshowThumbnailHoverResume(settings);
 212          }
 213          else {
 214            viewsSlideshowThumbnailHoverPause(settings);
 215          }
 216          e.preventDefault();
 217        });
 218      }
 219    });
 220  }
 221  
 222  // Pause the slideshow 
 223  viewsSlideshowThumbnailHoverPause = function (settings) {
 224    //make Resume translatable
 225    var resume = Drupal.t('Resume');
 226  
 227    $(settings.targetId).cycle('pause');
 228    if (settings.controls > 0) {
 229      $('#views_slideshow_thumbnailhover_playpause_' + settings.vss_id)
 230        .addClass('views_slideshow_thumbnailhover_play')
 231        .addClass('views_slideshow_play')
 232        .removeClass('views_slideshow_thumbnailhover_pause')
 233        .removeClass('views_slideshow_pause')
 234        .text(resume);
 235    }
 236    settings.paused = true;
 237  }
 238  
 239  // Resume the slideshow
 240  viewsSlideshowThumbnailHoverResume = function (settings) {
 241    // Make Pause translatable
 242    var pause = Drupal.t('Pause');
 243    
 244    $(settings.targetId).cycle('resume');
 245    if (settings.controls > 0) {
 246      $('#views_slideshow_thumbnailhover_playpause_' + settings.vss_id)
 247        .addClass('views_slideshow_thumbnailhover_pause')
 248        .addClass('views_slideshow_pause')
 249        .removeClass('views_slideshow_thumbnailhover_play')
 250        .removeClass('views_slideshow_play')
 251        .text(pause);
 252    }
 253    settings.paused = false;
 254  }
 255  
 256  // Verify that the value is a number.
 257  function IsNumeric(sText) {
 258    var ValidChars = "0123456789";
 259    var IsNumber=true;
 260    var Char;
 261  
 262    for (var i=0; i < sText.length && IsNumber == true; i++) { 
 263      Char = sText.charAt(i); 
 264      if (ValidChars.indexOf(Char) == -1) {
 265        IsNumber = false;
 266      }
 267    }
 268    return IsNumber;
 269  }
 270  
 271  /**
 272   * Cookie Handling Functions
 273   */
 274  function createCookie(name,value,days) {
 275    if (days) {
 276      var date = new Date();
 277      date.setTime(date.getTime()+(days*24*60*60*1000));
 278      var expires = "; expires="+date.toGMTString();
 279    }
 280    else {
 281      var expires = "";
 282    }
 283    document.cookie = name+"="+value+expires+"; path=/";
 284  }
 285  
 286  function readCookie(name) {
 287    var nameEQ = name + "=";
 288    var ca = document.cookie.split(';');
 289    for(var i=0;i < ca.length;i++) {
 290      var c = ca[i];
 291      while (c.charAt(0)==' ') c = c.substring(1,c.length);
 292      if (c.indexOf(nameEQ) == 0) {
 293        return c.substring(nameEQ.length,c.length);
 294      }
 295    }
 296    return null;
 297  }
 298  
 299  function eraseCookie(name) {
 300    createCookie(name,"",-1);
 301  }
 302  
 303  /**
 304   * Checks to see if the slide is visible enough.
 305   * elem = element to check.
 306   * amountVisible = amount that should be visible. Either in percent or px. If
 307   *                it's not defined then all of the slide must be visible.
 308   *
 309   * Returns true or false
 310   */
 311  function viewsSlideshowThumbnailHoverIsVisible(elem, type, amountVisible) {
 312    // Get the top and bottom of the window;
 313    var docViewTop = $(window).scrollTop();
 314    var docViewBottom = docViewTop + $(window).height();
 315    var docViewLeft = $(window).scrollLeft();
 316    var docViewRight = docViewLeft + $(window).width();
 317  
 318    // Get the top, bottom, and height of the slide;
 319    var elemTop = $(elem).offset().top;
 320    var elemHeight = $(elem).height();
 321    var elemBottom = elemTop + elemHeight;
 322    var elemLeft = $(elem).offset().left;
 323    var elemWidth = $(elem).width();
 324    var elemRight = elemLeft + elemWidth;
 325    var elemArea = elemHeight * elemWidth;
 326    
 327    // Calculate what's hiding in the slide.
 328    var missingLeft = 0;
 329    var missingRight = 0;
 330    var missingTop = 0;
 331    var missingBottom = 0;
 332    
 333    // Find out how much of the slide is missing from the left.
 334    if (elemLeft < docViewLeft) {
 335      missingLeft = docViewLeft - elemLeft;
 336    }
 337  
 338    // Find out how much of the slide is missing from the right.
 339    if (elemRight > docViewRight) {
 340      missingRight = elemRight - docViewRight;
 341    }
 342    
 343    // Find out how much of the slide is missing from the top.
 344    if (elemTop < docViewTop) {
 345      missingTop = docViewTop - elemTop;
 346    }
 347  
 348    // Find out how much of the slide is missing from the bottom.
 349    if (elemBottom > docViewBottom) {
 350      missingBottom = elemBottom - docViewBottom;
 351    }
 352    
 353    // If there is no amountVisible defined then check to see if the whole slide
 354    // is visible.
 355    if (type == 'full') {
 356      return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
 357      && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop)
 358      && (elemLeft >= docViewLeft) && (elemRight <= docViewRight)
 359      && (elemLeft <= docViewRight) && (elemRight >= docViewLeft));
 360    }
 361    else if(type == 'vertical') {
 362      var verticalShowing = elemHeight - missingTop - missingBottom;
 363      
 364      // If user specified a percentage then find out if the current shown percent
 365      // is larger than the allowed percent.
 366      // Otherwise check to see if the amount of px shown is larger than the
 367      // allotted amount.
 368      if (amountVisible.indexOf('%')) {
 369        return (((verticalShowing/elemHeight)*100) >= parseInt(amountVisible));
 370      }
 371      else {
 372        return (verticalShowing >= parseInt(amountVisible));
 373      }
 374    }
 375    else if(type == 'horizontal') {
 376      var horizontalShowing = elemWidth - missingLeft - missingRight;
 377      
 378      // If user specified a percentage then find out if the current shown percent
 379      // is larger than the allowed percent.
 380      // Otherwise check to see if the amount of px shown is larger than the
 381      // allotted amount.
 382      if (amountVisible.indexOf('%')) {
 383        return (((horizontalShowing/elemWidth)*100) >= parseInt(amountVisible));
 384      }
 385      else {
 386        return (horizontalShowing >= parseInt(amountVisible));
 387      }
 388    }
 389    else if(type == 'area') {
 390      var areaShowing = (elemWidth - missingLeft - missingRight) * (elemHeight - missingTop - missingBottom);
 391      
 392      // If user specified a percentage then find out if the current shown percent
 393      // is larger than the allowed percent.
 394      // Otherwise check to see if the amount of px shown is larger than the
 395      // allotted amount.
 396      if (amountVisible.indexOf('%')) {
 397        return (((areaShowing/elemArea)*100) >= parseInt(amountVisible));
 398      }
 399      else {
 400        return (areaShowing >= parseInt(amountVisible));
 401      }
 402    }
 403  }