diff options
| -rw-r--r-- | app/assets/javascripts/application.js.coffee | 1 | ||||
| -rw-r--r-- | app/assets/javascripts/diff.js.coffee | 3 | ||||
| -rwxr-xr-x | vendor/assets/javascripts/jquery.sticky.js | 170 |
3 files changed, 173 insertions, 1 deletions
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 1960479321c..606f6afdba3 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -15,6 +15,7 @@ #= require jquery.atwho #= require jquery.scrollTo #= require jquery.blockUI +#= require jquery.sticky #= require turbolinks #= require jquery.turbolinks #= require bootstrap diff --git a/app/assets/javascripts/diff.js.coffee b/app/assets/javascripts/diff.js.coffee index dbe00c487dc..78bb385b5bb 100644 --- a/app/assets/javascripts/diff.js.coffee +++ b/app/assets/javascripts/diff.js.coffee @@ -34,7 +34,8 @@ class Diff $.get(link, params, (response) => target.parent().replaceWith(response) ) - ) + ).ready => + $(".diff-header").sticky {responsiveWidth:true, getWidthFrom: ".diff-file"} lineNumbers: (line) -> return ([0, 0]) unless line.children().length diff --git a/vendor/assets/javascripts/jquery.sticky.js b/vendor/assets/javascripts/jquery.sticky.js new file mode 100755 index 00000000000..f7c9cd46ae9 --- /dev/null +++ b/vendor/assets/javascripts/jquery.sticky.js @@ -0,0 +1,170 @@ +// Sticky Plugin v1.0.0 for jQuery +// ============= +// Author: Anthony Garand +// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) +// Improvements by Leonardo C. Daronco (daronco) +// Created: 2/14/2011 +// Date: 2/12/2012 +// Website: http://labs.anthonygarand.com/sticky +// Description: Makes an element on the page stick on the screen as you scroll +// It will only set the 'top' and 'position' of your element, you +// might need to adjust the width in some cases. + +(function($) { + var defaults = { + topSpacing: 0, + bottomSpacing: 0, + className: 'is-sticky', + wrapperClassName: 'sticky-wrapper', + center: false, + getWidthFrom: '', + responsiveWidth: false + }, + $window = $(window), + $document = $(document), + sticked = [], + windowHeight = $window.height(), + scroller = function() { + var scrollTop = $window.scrollTop(), + documentHeight = $document.height(), + dwh = documentHeight - windowHeight, + extra = (scrollTop > dwh) ? dwh - scrollTop : 0; + + for (var i = 0; i < sticked.length; i++) { + var s = sticked[i], + elementTop = s.stickyWrapper.offset().top, + etse = elementTop - s.topSpacing - extra; + + if (scrollTop <= etse) { + if (s.currentTop !== null) { + s.stickyElement + .css('position', '') + .css('top', ''); + s.stickyElement.trigger('sticky-end', [s]).parent().removeClass(s.className); + s.currentTop = null; + } + } + else { + var newTop = documentHeight - s.stickyElement.outerHeight() + - s.topSpacing - s.bottomSpacing - scrollTop - extra; + if (newTop < 0) { + newTop = newTop + s.topSpacing; + } else { + newTop = s.topSpacing; + } + if (s.currentTop != newTop) { + s.stickyElement + .css('position', 'fixed') + .css('top', newTop); + + if (typeof s.getWidthFrom !== 'undefined') { + s.stickyElement.css('width', $(s.getWidthFrom).width()); + } + + s.stickyElement.trigger('sticky-start', [s]).parent().addClass(s.className); + s.currentTop = newTop; + } + } + } + }, + resizer = function() { + windowHeight = $window.height(); + + for (var i = 0; i < sticked.length; i++) { + var s = sticked[i]; + if (typeof s.getWidthFrom !== 'undefined' && s.responsiveWidth === true) { + s.stickyElement.css('width', $(s.getWidthFrom).width()); + } + } + }, + methods = { + init: function(options) { + var o = $.extend({}, defaults, options); + return this.each(function() { + var stickyElement = $(this); + + var stickyId = stickyElement.attr('id'); + var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName + var wrapper = $('<div></div>') + .attr('id', stickyId + '-sticky-wrapper') + .addClass(o.wrapperClassName); + stickyElement.wrapAll(wrapper); + + if (o.center) { + stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"}); + } + + if (stickyElement.css("float") == "right") { + stickyElement.css({"float":"none"}).parent().css({"float":"right"}); + } + + var stickyWrapper = stickyElement.parent(); + stickyWrapper.css('height', stickyElement.outerHeight()); + sticked.push({ + topSpacing: o.topSpacing, + bottomSpacing: o.bottomSpacing, + stickyElement: stickyElement, + currentTop: null, + stickyWrapper: stickyWrapper, + className: o.className, + getWidthFrom: o.getWidthFrom, + responsiveWidth: o.responsiveWidth + }); + }); + }, + update: scroller, + unstick: function(options) { + return this.each(function() { + var unstickyElement = $(this); + + var removeIdx = -1; + for (var i = 0; i < sticked.length; i++) + { + if (sticked[i].stickyElement.get(0) == unstickyElement.get(0)) + { + removeIdx = i; + } + } + if(removeIdx != -1) + { + sticked.splice(removeIdx,1); + unstickyElement.unwrap(); + unstickyElement.removeAttr('style'); + } + }); + } + }; + + // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): + if (window.addEventListener) { + window.addEventListener('scroll', scroller, false); + window.addEventListener('resize', resizer, false); + } else if (window.attachEvent) { + window.attachEvent('onscroll', scroller); + window.attachEvent('onresize', resizer); + } + + $.fn.sticky = function(method) { + if (methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method ) { + return methods.init.apply( this, arguments ); + } else { + $.error('Method ' + method + ' does not exist on jQuery.sticky'); + } + }; + + $.fn.unstick = function(method) { + if (methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method ) { + return methods.unstick.apply( this, arguments ); + } else { + $.error('Method ' + method + ' does not exist on jQuery.sticky'); + } + + }; + $(function() { + setTimeout(scroller, 0); + }); +})(jQuery); |