karmaworld/assets/js/jquery-scrollto.js

   1 /*global define:false require:false */
   2 (function (name, context, definition) {
   3         if (typeof module != 'undefined' && module.exports) module.exports = definition();
   4         else if (typeof define == 'function' && define.amd) define(definition);
   5         else context[name] = definition();
   6 })('jquery-scrollto', this, function(){
   7         // Prepare
   8         var jQuery, $, ScrollTo;
   9         jQuery = $ = window.jQuery || require('jquery');
  10
  11         // Fix scrolling animations on html/body on safari
  12         $.propHooks.scrollTop = $.propHooks.scrollLeft = {
  13                 get: function(elem,prop) {
  14                         var result = null;
  15                         if ( elem.tagName === 'HTML' || elem.tagName === 'BODY' ) {
  16                                 if ( prop === 'scrollLeft' ) {
  17                                         result = window.scrollX;
  18                                 } else if ( prop === 'scrollTop' ) {
  19                                         result = window.scrollY;
  20                                 }
  21                         }
  22                         if ( result == null ) {
  23                                 result = elem[prop];
  24                         }
  25                         return result;
  26                 }
  27         };
  28         $.Tween.propHooks.scrollTop = $.Tween.propHooks.scrollLeft = {
  29                 get: function(tween) {
  30                         return $.propHooks.scrollTop.get(tween.elem, tween.prop);
  31                 },
  32                 set: function(tween) {
  33                         // Our safari fix
  34                         if ( tween.elem.tagName === 'HTML' || tween.elem.tagName === 'BODY' ) {
  35                                 // Defaults
  36                                 tween.options.bodyScrollLeft = (tween.options.bodyScrollLeft || window.scrollX);
  37                                 tween.options.bodyScrollTop = (tween.options.bodyScrollTop || window.scrollY);
  38
  39                                 // Apply
  40                                 if ( tween.prop === 'scrollLeft' ) {
  41                                         tween.options.bodyScrollLeft = Math.round(tween.now);
  42                                 }
  43                                 else if ( tween.prop === 'scrollTop' ) {
  44                                         tween.options.bodyScrollTop = Math.round(tween.now);
  45                                 }
  46
  47                                 // Apply
  48                                 window.scrollTo(tween.options.bodyScrollLeft, tween.options.bodyScrollTop);
  49                         }
  50                         // jQuery's IE8 Fix
  51                         else if ( tween.elem.nodeType && tween.elem.parentNode ) {
  52                                 tween.elem[ tween.prop ] = tween.now;
  53                         }
  54                 }
  55         };
  56
  57         // jQuery ScrollTo
  58         ScrollTo = {
  59                 // Configuration
  60                 config: {
  61                         duration: 400,
  62                         easing: 'swing',
  63                         callback: undefined,
  64                         durationMode: 'each',
  65                         offsetTop: 0,
  66                         offsetLeft: 0
  67                 },
  68
  69                 // Set Configuration
  70                 configure: function(options){
  71                         // Apply Options to Config
  72                         $.extend(ScrollTo.config, options||{});
  73
  74                         // Chain
  75                         return this;
  76                 },
  77
  78                 // Perform the Scroll Animation for the Collections
  79                 // We use $inline here, so we can determine the actual offset start for each overflow:scroll item
  80                 // Each collection is for each overflow:scroll item
  81                 scroll: function(collections, config){
  82                         // Prepare
  83                         var collection, $container, container, $target, $inline, position, containerTagName,
  84                                 containerScrollTop, containerScrollLeft,
  85                                 containerScrollTopEnd, containerScrollLeftEnd,
  86                                 startOffsetTop, targetOffsetTop, targetOffsetTopAdjusted,
  87                                 startOffsetLeft, targetOffsetLeft, targetOffsetLeftAdjusted,
  88                                 scrollOptions,
  89                                 callback;
  90
  91                         // Determine the Scroll
  92                         collection = collections.pop();
  93                         $container = collection.$container;
  94                         $target = collection.$target;
  95                         containerTagName = $container.prop('tagName');
  96
  97                         // Prepare the Inline Element of the Container
  98                         $inline = $('<span/>').css({
  99                                 'position': 'absolute',
 100                                 'top': '0px',
 101                                 'left': '0px'
 102                         });
 103                         position = $container.css('position');
 104
 105                         // Insert the Inline Element of the Container
 106                         $container.css({position:'relative'});
 107                         $inline.appendTo($container);
 108
 109                         // Determine the top offset
 110                         startOffsetTop = $inline.offset().top;
 111                         targetOffsetTop = $target.offset().top;
 112                         targetOffsetTopAdjusted = targetOffsetTop - startOffsetTop - parseInt(config.offsetTop,10);
 113
 114                         // Determine the left offset
 115                         startOffsetLeft = $inline.offset().left;
 116                         targetOffsetLeft = $target.offset().left;
 117                         targetOffsetLeftAdjusted = targetOffsetLeft - startOffsetLeft - parseInt(config.offsetLeft,10);
 118
 119                         // Determine current scroll positions
 120                         containerScrollTop = $container.prop('scrollTop');
 121                         containerScrollLeft = $container.prop('scrollLeft');
 122
 123                         // Reset the Inline Element of the Container
 124                         $inline.remove();
 125                         $container.css({position:position});
 126
 127                         // Prepare the scroll options
 128                         scrollOptions = {};
 129
 130                         // Prepare the callback
 131                         callback = function(event){
 132                                 // Check
 133                                 if ( collections.length === 0 ) {
 134                                         // Callback
 135                                         if ( typeof config.callback === 'function' ) {
 136                                                 config.callback();
 137                                         }
 138                                 }
 139                                 else {
 140                                         // Recurse
 141                                         ScrollTo.scroll(collections,config);
 142                                 }
 143                                 // Return true
 144                                 return true;
 145                         };
 146
 147                         // Handle if we only want to scroll if we are outside the viewport
 148                         if ( config.onlyIfOutside ) {
 149                                 // Determine current scroll positions
 150                                 containerScrollTopEnd = containerScrollTop + $container.height();
 151                                 containerScrollLeftEnd = containerScrollLeft + $container.width();
 152
 153                                 // Check if we are in the range of the visible area of the container
 154                                 if ( containerScrollTop < targetOffsetTopAdjusted && targetOffsetTopAdjusted < containerScrollTopEnd ) {
 155                                         targetOffsetTopAdjusted = containerScrollTop;
 156                                 }
 157                                 if ( containerScrollLeft < targetOffsetLeftAdjusted && targetOffsetLeftAdjusted < containerScrollLeftEnd ) {
 158                                         targetOffsetLeftAdjusted = containerScrollLeft;
 159                                 }
 160                         }
 161
 162                         // Determine the scroll options
 163                         if ( targetOffsetTopAdjusted !== containerScrollTop ) {
 164                                 scrollOptions.scrollTop = targetOffsetTopAdjusted;
 165                         }
 166                         if ( targetOffsetLeftAdjusted !== containerScrollLeft ) {
 167                                 scrollOptions.scrollLeft = targetOffsetLeftAdjusted;
 168                         }
 169
 170                         // Check to see if the scroll is necessary
 171                         if ( $container.prop('scrollHeight') === $container.width() ) {
 172                                 delete scrollOptions.scrollTop;
 173                         }
 174                         if ( $container.prop('scrollWidth') === $container.width() ) {
 175                                 delete scrollOptions.scrollLeft;
 176                         }
 177
 178                         // Perform the scroll
 179                         if ( scrollOptions.scrollTop != null || scrollOptions.scrollLeft != null ) {
 180                                 $container.animate(scrollOptions, {
 181                                         duration: config.duration,
 182                                         easing: config.easing,
 183                                         complete: callback
 184                                 });
 185                         }
 186                         else {
 187                                 callback();
 188                         }
 189
 190                         // Return true
 191                         return true;
 192                 },
 193
 194                 // ScrollTo the Element using the Options
 195                 fn: function(options){
 196                         // Prepare
 197                         var collections, config, $container, container;
 198                         collections = [];
 199
 200                         // Prepare
 201                         var     $target = $(this);
 202                         if ( $target.length === 0 ) {
 203                                 // Chain
 204                                 return this;
 205                         }
 206
 207                         // Handle Options
 208                         config = $.extend({},ScrollTo.config,options);
 209
 210                         // Fetch
 211                         $container = $target.parent();
 212                         container = $container.get(0);
 213
 214                         // Cycle through the containers
 215                         while ( ($container.length === 1) && (container !== document.body) && (container !== document) ) {
 216                                 // Check Container for scroll differences
 217                                 var containerScrollTop, containerScrollLeft;
 218                                 containerScrollTop = $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight;
 219                                 containerScrollLeft =  $container.css('overflow-x') !== 'visible' && container.scrollWidth !== container.clientWidth;
 220                                 if ( containerScrollTop || containerScrollLeft ) {
 221                                         // Push the Collection
 222                                         collections.push({
 223                                                 '$container': $container,
 224                                                 '$target': $target
 225                                         });
 226                                         // Update the Target
 227                                         $target = $container;
 228                                 }
 229                                 // Update the Container
 230                                 $container = $container.parent();
 231                                 container = $container.get(0);
 232                         }
 233
 234                         // Add the final collection
 235                         collections.push({
 236                                 '$container': $('html'),
 237                                 // document.body doesn't work in firefox, html works for all
 238                                 // internet explorer starts at the beggining
 239                                 '$target': $target
 240                         });
 241
 242                         // Adjust the Config
 243                         if ( config.durationMode === 'all' ) {
 244                                 config.duration /= collections.length;
 245                         }
 246
 247                         // Handle
 248                         ScrollTo.scroll(collections,config);
 249
 250                         // Chain
 251                         return this;
 252                 }
 253         };
 254
 255         // Apply our extensions to jQuery
 256         $.ScrollTo = $.ScrollTo || ScrollTo;
 257         $.fn.ScrollTo = $.fn.ScrollTo || ScrollTo.fn;
 258
 259         // Export
 260         return ScrollTo;
 261 });