[Summary view] [Print] [Text view]

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