headroom-rails 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/README.md +2 -0
- data/lib/headroom/version.rb +1 -1
- data/vendor/assets/javascripts/angular.headroom.js +27 -17
- data/vendor/assets/javascripts/headroom.js +132 -18
- data/vendor/assets/javascripts/headroom.min.js +3 -3
- data/vendor/assets/javascripts/jQuery.headroom.js +5 -1
- metadata +7 -8
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 40f3145160a96d3a2316531d30761aea69db6625978db6e1113854e486f3bc41
|
4
|
+
data.tar.gz: aefe68b71a158e689dbae59a00653528792f60f6423f27c690eadf609699cc75
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9e06ef49f40752e67481f19f80f18adcceac5065fde1620bcbedd39020ecc145296dcbde3ece846c691843b04accd854d4b0264b7380b6e4c8c526f887a71fc2
|
7
|
+
data.tar.gz: fa10d25a9d5ac0cce6c3edce0d3d684b4c68e7014cab142d322e5b2a94e9e59bee63f02dc445aea22ecd8202d25e91766683b1d00dfba9f1f689e04906dbbb75
|
data/README.md
CHANGED
data/lib/headroom/version.rb
CHANGED
@@ -1,33 +1,43 @@
|
|
1
|
-
(function(angular) {
|
1
|
+
(function (angular, Headroom) {
|
2
2
|
|
3
3
|
if(!angular) {
|
4
4
|
return;
|
5
5
|
}
|
6
6
|
|
7
|
-
|
8
|
-
// Directive //
|
9
|
-
///////////////
|
10
|
-
|
11
|
-
angular.module('headroom', []).directive('headroom', function() {
|
7
|
+
function headroom(HeadroomService) {
|
12
8
|
return {
|
13
|
-
restrict: 'EA',
|
14
9
|
scope: {
|
15
10
|
tolerance: '=',
|
16
11
|
offset: '=',
|
17
|
-
classes: '='
|
12
|
+
classes: '=',
|
13
|
+
scroller: '@'
|
18
14
|
},
|
19
|
-
link: function(scope, element) {
|
15
|
+
link: function ($scope, $element) {
|
20
16
|
var options = {};
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
17
|
+
var opts = HeadroomService.options;
|
18
|
+
for (var prop in opts) {
|
19
|
+
options[prop] = $scope[prop] || opts[prop];
|
20
|
+
}
|
21
|
+
if ($scope.scroller) {
|
22
|
+
options.scroller = document.querySelector($scope.scroller);
|
23
|
+
}
|
24
|
+
var headroom = new HeadroomService($element[0], options).init();
|
25
|
+
$scope.$on('$destroy', function(){
|
27
26
|
headroom.destroy();
|
28
27
|
});
|
29
28
|
}
|
30
29
|
};
|
31
|
-
}
|
30
|
+
}
|
31
|
+
|
32
|
+
headroom.$inject = ['HeadroomService'];
|
33
|
+
|
34
|
+
function HeadroomService() {
|
35
|
+
return Headroom;
|
36
|
+
}
|
37
|
+
|
38
|
+
angular
|
39
|
+
.module('headroom', [])
|
40
|
+
.directive('headroom', headroom)
|
41
|
+
.factory('HeadroomService', HeadroomService);
|
32
42
|
|
33
|
-
}(window.angular)
|
43
|
+
})(window.angular, window.Headroom);
|
@@ -1,11 +1,25 @@
|
|
1
1
|
/*!
|
2
|
-
* headroom.js v0.
|
3
|
-
* Copyright (c)
|
2
|
+
* headroom.js v0.9.4 - Give your page some headroom. Hide your header until you need it
|
3
|
+
* Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/headroom.js
|
4
4
|
* License: MIT
|
5
5
|
*/
|
6
6
|
|
7
|
-
(function(
|
7
|
+
(function(root, factory) {
|
8
|
+
'use strict';
|
8
9
|
|
10
|
+
if (typeof define === 'function' && define.amd) {
|
11
|
+
// AMD. Register as an anonymous module.
|
12
|
+
define([], factory);
|
13
|
+
}
|
14
|
+
else if (typeof exports === 'object') {
|
15
|
+
// COMMONJS
|
16
|
+
module.exports = factory();
|
17
|
+
}
|
18
|
+
else {
|
19
|
+
// BROWSER
|
20
|
+
root.Headroom = factory();
|
21
|
+
}
|
22
|
+
}(this, function() {
|
9
23
|
'use strict';
|
10
24
|
|
11
25
|
/* exported features */
|
@@ -56,6 +70,15 @@
|
|
56
70
|
this.requestTick();
|
57
71
|
}
|
58
72
|
};
|
73
|
+
/**
|
74
|
+
* Check if object is part of the DOM
|
75
|
+
* @constructor
|
76
|
+
* @param {Object} obj element to check
|
77
|
+
*/
|
78
|
+
function isDOMElement(obj) {
|
79
|
+
return obj && typeof window !== 'undefined' && (obj === window || obj.nodeType);
|
80
|
+
}
|
81
|
+
|
59
82
|
/**
|
60
83
|
* Helper function for extending objects
|
61
84
|
*/
|
@@ -72,7 +95,8 @@
|
|
72
95
|
var replacement = arguments[i] || {};
|
73
96
|
|
74
97
|
for (key in replacement) {
|
75
|
-
|
98
|
+
// Recurse into object except if the object is a DOM element
|
99
|
+
if(typeof result[key] === 'object' && ! isDOMElement(result[key])) {
|
76
100
|
result[key] = extend(result[key], replacement[key]);
|
77
101
|
}
|
78
102
|
else {
|
@@ -104,15 +128,17 @@
|
|
104
128
|
|
105
129
|
this.lastKnownScrollY = 0;
|
106
130
|
this.elem = elem;
|
107
|
-
this.debouncer = new Debouncer(this.update.bind(this));
|
108
131
|
this.tolerance = normalizeTolerance(options.tolerance);
|
109
132
|
this.classes = options.classes;
|
110
133
|
this.offset = options.offset;
|
134
|
+
this.scroller = options.scroller;
|
111
135
|
this.initialised = false;
|
112
136
|
this.onPin = options.onPin;
|
113
137
|
this.onUnpin = options.onUnpin;
|
114
138
|
this.onTop = options.onTop;
|
115
139
|
this.onNotTop = options.onNotTop;
|
140
|
+
this.onBottom = options.onBottom;
|
141
|
+
this.onNotBottom = options.onNotBottom;
|
116
142
|
}
|
117
143
|
Headroom.prototype = {
|
118
144
|
constructor : Headroom,
|
@@ -125,6 +151,7 @@
|
|
125
151
|
return;
|
126
152
|
}
|
127
153
|
|
154
|
+
this.debouncer = new Debouncer(this.update.bind(this));
|
128
155
|
this.elem.classList.add(this.classes.initial);
|
129
156
|
|
130
157
|
// defer event registration to handle browser
|
@@ -141,8 +168,14 @@
|
|
141
168
|
var classes = this.classes;
|
142
169
|
|
143
170
|
this.initialised = false;
|
144
|
-
|
145
|
-
|
171
|
+
|
172
|
+
for (var key in classes) {
|
173
|
+
if(classes.hasOwnProperty(key)) {
|
174
|
+
this.elem.classList.remove(classes[key]);
|
175
|
+
}
|
176
|
+
}
|
177
|
+
|
178
|
+
this.scroller.removeEventListener('scroll', this.debouncer, false);
|
146
179
|
},
|
147
180
|
|
148
181
|
/**
|
@@ -153,7 +186,7 @@
|
|
153
186
|
if(!this.initialised){
|
154
187
|
this.lastKnownScrollY = this.getScrollY();
|
155
188
|
this.initialised = true;
|
156
|
-
|
189
|
+
this.scroller.addEventListener('scroll', this.debouncer, false);
|
157
190
|
|
158
191
|
this.debouncer.handleEvent();
|
159
192
|
}
|
@@ -215,15 +248,42 @@
|
|
215
248
|
}
|
216
249
|
},
|
217
250
|
|
251
|
+
bottom : function() {
|
252
|
+
var classList = this.elem.classList,
|
253
|
+
classes = this.classes;
|
254
|
+
|
255
|
+
if(!classList.contains(classes.bottom)) {
|
256
|
+
classList.add(classes.bottom);
|
257
|
+
classList.remove(classes.notBottom);
|
258
|
+
this.onBottom && this.onBottom.call(this);
|
259
|
+
}
|
260
|
+
},
|
261
|
+
|
262
|
+
/**
|
263
|
+
* Handles the not top state
|
264
|
+
*/
|
265
|
+
notBottom : function() {
|
266
|
+
var classList = this.elem.classList,
|
267
|
+
classes = this.classes;
|
268
|
+
|
269
|
+
if(!classList.contains(classes.notBottom)) {
|
270
|
+
classList.add(classes.notBottom);
|
271
|
+
classList.remove(classes.bottom);
|
272
|
+
this.onNotBottom && this.onNotBottom.call(this);
|
273
|
+
}
|
274
|
+
},
|
275
|
+
|
218
276
|
/**
|
219
277
|
* Gets the Y scroll position
|
220
278
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
|
221
279
|
* @return {Number} pixels the page has scrolled along the Y-axis
|
222
280
|
*/
|
223
281
|
getScrollY : function() {
|
224
|
-
return (
|
225
|
-
?
|
226
|
-
: (
|
282
|
+
return (this.scroller.pageYOffset !== undefined)
|
283
|
+
? this.scroller.pageYOffset
|
284
|
+
: (this.scroller.scrollTop !== undefined)
|
285
|
+
? this.scroller.scrollTop
|
286
|
+
: (document.documentElement || document.body.parentNode || document.body).scrollTop;
|
227
287
|
},
|
228
288
|
|
229
289
|
/**
|
@@ -237,6 +297,28 @@
|
|
237
297
|
|| document.body.clientHeight;
|
238
298
|
},
|
239
299
|
|
300
|
+
/**
|
301
|
+
* Gets the physical height of the DOM element
|
302
|
+
* @param {Object} elm the element to calculate the physical height of which
|
303
|
+
* @return {int} the physical height of the element in pixels
|
304
|
+
*/
|
305
|
+
getElementPhysicalHeight : function (elm) {
|
306
|
+
return Math.max(
|
307
|
+
elm.offsetHeight,
|
308
|
+
elm.clientHeight
|
309
|
+
);
|
310
|
+
},
|
311
|
+
|
312
|
+
/**
|
313
|
+
* Gets the physical height of the scroller element
|
314
|
+
* @return {int} the physical height of the scroller element in pixels
|
315
|
+
*/
|
316
|
+
getScrollerPhysicalHeight : function () {
|
317
|
+
return (this.scroller === window || this.scroller === document.body)
|
318
|
+
? this.getViewportHeight()
|
319
|
+
: this.getElementPhysicalHeight(this.scroller);
|
320
|
+
},
|
321
|
+
|
240
322
|
/**
|
241
323
|
* Gets the height of the document
|
242
324
|
* @see http://james.padolsey.com/javascript/get-document-height-cross-browser/
|
@@ -247,12 +329,35 @@
|
|
247
329
|
documentElement = document.documentElement;
|
248
330
|
|
249
331
|
return Math.max(
|
250
|
-
|
251
|
-
|
252
|
-
|
332
|
+
body.scrollHeight, documentElement.scrollHeight,
|
333
|
+
body.offsetHeight, documentElement.offsetHeight,
|
334
|
+
body.clientHeight, documentElement.clientHeight
|
335
|
+
);
|
336
|
+
},
|
337
|
+
|
338
|
+
/**
|
339
|
+
* Gets the height of the DOM element
|
340
|
+
* @param {Object} elm the element to calculate the height of which
|
341
|
+
* @return {int} the height of the element in pixels
|
342
|
+
*/
|
343
|
+
getElementHeight : function (elm) {
|
344
|
+
return Math.max(
|
345
|
+
elm.scrollHeight,
|
346
|
+
elm.offsetHeight,
|
347
|
+
elm.clientHeight
|
253
348
|
);
|
254
349
|
},
|
255
350
|
|
351
|
+
/**
|
352
|
+
* Gets the height of the scroller element
|
353
|
+
* @return {int} the height of the scroller element in pixels
|
354
|
+
*/
|
355
|
+
getScrollerHeight : function () {
|
356
|
+
return (this.scroller === window || this.scroller === document.body)
|
357
|
+
? this.getDocumentHeight()
|
358
|
+
: this.getElementHeight(this.scroller);
|
359
|
+
},
|
360
|
+
|
256
361
|
/**
|
257
362
|
* determines if the scroll position is outside of document boundaries
|
258
363
|
* @param {int} currentScrollY the current y scroll position
|
@@ -260,7 +365,7 @@
|
|
260
365
|
*/
|
261
366
|
isOutOfBounds : function (currentScrollY) {
|
262
367
|
var pastTop = currentScrollY < 0,
|
263
|
-
pastBottom = currentScrollY + this.
|
368
|
+
pastBottom = currentScrollY + this.getScrollerPhysicalHeight() > this.getScrollerHeight();
|
264
369
|
|
265
370
|
return pastTop || pastBottom;
|
266
371
|
},
|
@@ -318,6 +423,13 @@
|
|
318
423
|
this.notTop();
|
319
424
|
}
|
320
425
|
|
426
|
+
if(currentScrollY + this.getViewportHeight() >= this.getScrollerHeight()) {
|
427
|
+
this.bottom();
|
428
|
+
}
|
429
|
+
else {
|
430
|
+
this.notBottom();
|
431
|
+
}
|
432
|
+
|
321
433
|
if(this.shouldUnpin(currentScrollY, toleranceExceeded)) {
|
322
434
|
this.unpin();
|
323
435
|
}
|
@@ -338,16 +450,18 @@
|
|
338
450
|
down : 0
|
339
451
|
},
|
340
452
|
offset : 0,
|
453
|
+
scroller: window,
|
341
454
|
classes : {
|
342
455
|
pinned : 'headroom--pinned',
|
343
456
|
unpinned : 'headroom--unpinned',
|
344
457
|
top : 'headroom--top',
|
345
458
|
notTop : 'headroom--not-top',
|
459
|
+
bottom : 'headroom--bottom',
|
460
|
+
notBottom : 'headroom--not-bottom',
|
346
461
|
initial : 'headroom'
|
347
462
|
}
|
348
463
|
};
|
349
464
|
Headroom.cutsTheMustard = typeof features !== 'undefined' && features.rAF && features.bind && features.classList;
|
350
465
|
|
351
|
-
|
352
|
-
|
353
|
-
}(window, document));
|
466
|
+
return Headroom;
|
467
|
+
}));
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/*!
|
2
|
-
* headroom.js v0.
|
3
|
-
* Copyright (c)
|
2
|
+
* headroom.js v0.9.4 - Give your page some headroom. Hide your header until you need it
|
3
|
+
* Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/headroom.js
|
4
4
|
* License: MIT
|
5
5
|
*/
|
6
6
|
|
7
|
-
!function(a,b){"use strict";function
|
7
|
+
!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.Headroom=b()}(this,function(){"use strict";function a(a){this.callback=a,this.ticking=!1}function b(a){return a&&"undefined"!=typeof window&&(a===window||a.nodeType)}function c(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var d,e,f=a||{};for(e=1;e<arguments.length;e++){var g=arguments[e]||{};for(d in g)"object"!=typeof f[d]||b(f[d])?f[d]=f[d]||g[d]:f[d]=c(f[d],g[d])}return f}function d(a){return a===Object(a)?a:{down:a,up:a}}function e(a,b){b=c(b,e.options),this.lastKnownScrollY=0,this.elem=a,this.tolerance=d(b.tolerance),this.classes=b.classes,this.offset=b.offset,this.scroller=b.scroller,this.initialised=!1,this.onPin=b.onPin,this.onUnpin=b.onUnpin,this.onTop=b.onTop,this.onNotTop=b.onNotTop,this.onBottom=b.onBottom,this.onNotBottom=b.onNotBottom}var f={bind:!!function(){}.bind,classList:"classList"in document.documentElement,rAF:!!(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame)};return window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame,a.prototype={constructor:a,update:function(){this.callback&&this.callback(),this.ticking=!1},requestTick:function(){this.ticking||(requestAnimationFrame(this.rafCallback||(this.rafCallback=this.update.bind(this))),this.ticking=!0)},handleEvent:function(){this.requestTick()}},e.prototype={constructor:e,init:function(){if(e.cutsTheMustard)return this.debouncer=new a(this.update.bind(this)),this.elem.classList.add(this.classes.initial),setTimeout(this.attachEvent.bind(this),100),this},destroy:function(){var a=this.classes;this.initialised=!1;for(var b in a)a.hasOwnProperty(b)&&this.elem.classList.remove(a[b]);this.scroller.removeEventListener("scroll",this.debouncer,!1)},attachEvent:function(){this.initialised||(this.lastKnownScrollY=this.getScrollY(),this.initialised=!0,this.scroller.addEventListener("scroll",this.debouncer,!1),this.debouncer.handleEvent())},unpin:function(){var a=this.elem.classList,b=this.classes;!a.contains(b.pinned)&&a.contains(b.unpinned)||(a.add(b.unpinned),a.remove(b.pinned),this.onUnpin&&this.onUnpin.call(this))},pin:function(){var a=this.elem.classList,b=this.classes;a.contains(b.unpinned)&&(a.remove(b.unpinned),a.add(b.pinned),this.onPin&&this.onPin.call(this))},top:function(){var a=this.elem.classList,b=this.classes;a.contains(b.top)||(a.add(b.top),a.remove(b.notTop),this.onTop&&this.onTop.call(this))},notTop:function(){var a=this.elem.classList,b=this.classes;a.contains(b.notTop)||(a.add(b.notTop),a.remove(b.top),this.onNotTop&&this.onNotTop.call(this))},bottom:function(){var a=this.elem.classList,b=this.classes;a.contains(b.bottom)||(a.add(b.bottom),a.remove(b.notBottom),this.onBottom&&this.onBottom.call(this))},notBottom:function(){var a=this.elem.classList,b=this.classes;a.contains(b.notBottom)||(a.add(b.notBottom),a.remove(b.bottom),this.onNotBottom&&this.onNotBottom.call(this))},getScrollY:function(){return void 0!==this.scroller.pageYOffset?this.scroller.pageYOffset:void 0!==this.scroller.scrollTop?this.scroller.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop},getViewportHeight:function(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},getElementPhysicalHeight:function(a){return Math.max(a.offsetHeight,a.clientHeight)},getScrollerPhysicalHeight:function(){return this.scroller===window||this.scroller===document.body?this.getViewportHeight():this.getElementPhysicalHeight(this.scroller)},getDocumentHeight:function(){var a=document.body,b=document.documentElement;return Math.max(a.scrollHeight,b.scrollHeight,a.offsetHeight,b.offsetHeight,a.clientHeight,b.clientHeight)},getElementHeight:function(a){return Math.max(a.scrollHeight,a.offsetHeight,a.clientHeight)},getScrollerHeight:function(){return this.scroller===window||this.scroller===document.body?this.getDocumentHeight():this.getElementHeight(this.scroller)},isOutOfBounds:function(a){var b=a<0,c=a+this.getScrollerPhysicalHeight()>this.getScrollerHeight();return b||c},toleranceExceeded:function(a,b){return Math.abs(a-this.lastKnownScrollY)>=this.tolerance[b]},shouldUnpin:function(a,b){var c=a>this.lastKnownScrollY,d=a>=this.offset;return c&&d&&b},shouldPin:function(a,b){var c=a<this.lastKnownScrollY,d=a<=this.offset;return c&&b||d},update:function(){var a=this.getScrollY(),b=a>this.lastKnownScrollY?"down":"up",c=this.toleranceExceeded(a,b);this.isOutOfBounds(a)||(a<=this.offset?this.top():this.notTop(),a+this.getViewportHeight()>=this.getScrollerHeight()?this.bottom():this.notBottom(),this.shouldUnpin(a,c)?this.unpin():this.shouldPin(a,c)&&this.pin(),this.lastKnownScrollY=a)}},e.options={tolerance:{up:0,down:0},offset:0,scroller:window,classes:{pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",bottom:"headroom--bottom",notBottom:"headroom--not-bottom",initial:"headroom"}},e.cutsTheMustard="undefined"!=typeof f&&f.rAF&&f.bind&&f.classList,e});
|
@@ -23,6 +23,10 @@
|
|
23
23
|
}
|
24
24
|
if (typeof option === 'string') {
|
25
25
|
data[option]();
|
26
|
+
|
27
|
+
if(option === 'destroy'){
|
28
|
+
$this.removeData('headroom');
|
29
|
+
}
|
26
30
|
}
|
27
31
|
});
|
28
32
|
};
|
@@ -36,4 +40,4 @@
|
|
36
40
|
$this.headroom($this.data());
|
37
41
|
});
|
38
42
|
|
39
|
-
}(window.Zepto || window.jQuery));
|
43
|
+
}(window.Zepto || window.jQuery));
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: headroom-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Brandon Hicks
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2019-05-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -38,8 +38,8 @@ dependencies:
|
|
38
38
|
- - ">="
|
39
39
|
- !ruby/object:Gem::Version
|
40
40
|
version: '0'
|
41
|
-
description: A lightweight that reacts to your scrolling and hides
|
42
|
-
you need it.
|
41
|
+
description: A lightweight javascript asset that reacts to your scrolling and hides
|
42
|
+
your header until you need it.
|
43
43
|
email:
|
44
44
|
- tarellel@gmail.com
|
45
45
|
executables: []
|
@@ -59,7 +59,8 @@ files:
|
|
59
59
|
- vendor/assets/javascripts/headroom.min.js
|
60
60
|
- vendor/assets/javascripts/jQuery.headroom.js
|
61
61
|
homepage: https://github.com/tarellel/headroom-rails
|
62
|
-
licenses:
|
62
|
+
licenses:
|
63
|
+
- MIT
|
63
64
|
metadata: {}
|
64
65
|
post_install_message:
|
65
66
|
rdoc_options: []
|
@@ -76,10 +77,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
76
77
|
- !ruby/object:Gem::Version
|
77
78
|
version: '0'
|
78
79
|
requirements: []
|
79
|
-
|
80
|
-
rubygems_version: 2.2.2
|
80
|
+
rubygems_version: 3.0.3
|
81
81
|
signing_key:
|
82
82
|
specification_version: 4
|
83
83
|
summary: headroom.js packaged for the Rails assest pipeline
|
84
84
|
test_files: []
|
85
|
-
has_rdoc:
|