@materializecss/materialize 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Gruntfile.js +722 -712
- package/LICENSE +21 -21
- package/README.md +91 -91
- package/dist/css/materialize.css +78 -137
- package/dist/css/materialize.min.css +12 -12
- package/dist/js/materialize.js +1502 -1378
- package/dist/js/materialize.min.js +6 -6
- package/extras/noUiSlider/nouislider.css +403 -403
- package/extras/noUiSlider/nouislider.js +2147 -2147
- package/js/anime.min.js +34 -34
- package/js/autocomplete.js +479 -479
- package/js/buttons.js +354 -354
- package/js/cards.js +40 -40
- package/js/carousel.js +732 -732
- package/js/cash.js +960 -960
- package/js/characterCounter.js +136 -136
- package/js/chips.js +486 -486
- package/js/collapsible.js +275 -275
- package/js/component.js +44 -44
- package/js/datepicker.js +983 -983
- package/js/dropdown.js +669 -669
- package/js/forms.js +285 -285
- package/js/global.js +428 -428
- package/js/materialbox.js +453 -453
- package/js/modal.js +382 -382
- package/js/parallax.js +138 -138
- package/js/pushpin.js +148 -148
- package/js/range.js +263 -263
- package/js/scrollspy.js +295 -295
- package/js/select.js +391 -391
- package/js/sidenav.js +583 -583
- package/js/slider.js +497 -359
- package/js/tabs.js +402 -402
- package/js/tapTarget.js +315 -315
- package/js/timepicker.js +712 -712
- package/js/toasts.js +325 -325
- package/js/tooltip.js +320 -320
- package/js/waves.js +614 -614
- package/package.json +87 -84
- package/sass/components/_badges.scss +55 -55
- package/sass/components/_buttons.scss +322 -322
- package/sass/components/_cards.scss +195 -195
- package/sass/components/_carousel.scss +90 -90
- package/sass/components/_chips.scss +96 -96
- package/sass/components/_collapsible.scss +91 -91
- package/sass/components/_collection.scss +106 -106
- package/sass/components/_color-classes.scss +32 -32
- package/sass/components/_color-variables.scss +370 -370
- package/sass/components/_datepicker.scss +191 -191
- package/sass/components/_dropdown.scss +84 -84
- package/sass/components/_global.scss +646 -646
- package/sass/components/_grid.scss +158 -158
- package/sass/components/_icons-material-design.scss +5 -5
- package/sass/components/_materialbox.scss +42 -42
- package/sass/components/_modal.scss +97 -97
- package/sass/components/_navbar.scss +208 -208
- package/sass/components/_normalize.scss +447 -447
- package/sass/components/_preloader.scss +334 -334
- package/sass/components/_pulse.scss +34 -34
- package/sass/components/_sidenav.scss +214 -214
- package/sass/components/_slider.scss +100 -91
- package/sass/components/_table_of_contents.scss +33 -33
- package/sass/components/_tabs.scss +99 -99
- package/sass/components/_tapTarget.scss +103 -103
- package/sass/components/_timepicker.scss +199 -199
- package/sass/components/_toast.scss +58 -58
- package/sass/components/_tooltip.scss +32 -32
- package/sass/components/_transitions.scss +12 -12
- package/sass/components/_typography.scss +62 -62
- package/sass/components/_variables.scss +352 -352
- package/sass/components/_waves.scss +187 -187
- package/sass/components/forms/_checkboxes.scss +200 -200
- package/sass/components/forms/_file-input.scss +44 -44
- package/sass/components/forms/_forms.scss +22 -22
- package/sass/components/forms/_input-fields.scss +388 -388
- package/sass/components/forms/_radio-buttons.scss +115 -115
- package/sass/components/forms/_range.scss +161 -161
- package/sass/components/forms/_select.scss +199 -199
- package/sass/components/forms/_switches.scss +91 -91
- package/sass/materialize.scss +42 -42
- package/sass/_style.scss +0 -929
- package/sass/ghpages-materialize.scss +0 -7
package/js/parallax.js
CHANGED
|
@@ -1,138 +1,138 @@
|
|
|
1
|
-
(function($) {
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
let _defaults = {
|
|
5
|
-
responsiveThreshold: 0 // breakpoint for swipeable
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
class Parallax extends Component {
|
|
9
|
-
constructor(el, options) {
|
|
10
|
-
super(Parallax, el, options);
|
|
11
|
-
|
|
12
|
-
this.el.M_Parallax = this;
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Options for the Parallax
|
|
16
|
-
* @member Parallax#options
|
|
17
|
-
* @prop {Number} responsiveThreshold
|
|
18
|
-
*/
|
|
19
|
-
this.options = $.extend({}, Parallax.defaults, options);
|
|
20
|
-
this._enabled = window.innerWidth > this.options.responsiveThreshold;
|
|
21
|
-
|
|
22
|
-
this.$img = this.$el.find('img').first();
|
|
23
|
-
this.$img.each(function() {
|
|
24
|
-
let el = this;
|
|
25
|
-
if (el.complete) $(el).trigger('load');
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
this._updateParallax();
|
|
29
|
-
this._setupEventHandlers();
|
|
30
|
-
this._setupStyles();
|
|
31
|
-
|
|
32
|
-
Parallax._parallaxes.push(this);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
static get defaults() {
|
|
36
|
-
return _defaults;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
static init(els, options) {
|
|
40
|
-
return super.init(this, els, options);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Get Instance
|
|
45
|
-
*/
|
|
46
|
-
static getInstance(el) {
|
|
47
|
-
let domElem = !!el.jquery ? el[0] : el;
|
|
48
|
-
return domElem.M_Parallax;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Teardown component
|
|
53
|
-
*/
|
|
54
|
-
destroy() {
|
|
55
|
-
Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
|
|
56
|
-
this.$img[0].style.transform = '';
|
|
57
|
-
this._removeEventHandlers();
|
|
58
|
-
|
|
59
|
-
this.$el[0].M_Parallax = undefined;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
static _handleScroll() {
|
|
63
|
-
for (let i = 0; i < Parallax._parallaxes.length; i++) {
|
|
64
|
-
let parallaxInstance = Parallax._parallaxes[i];
|
|
65
|
-
parallaxInstance._updateParallax.call(parallaxInstance);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
static _handleWindowResize() {
|
|
70
|
-
for (let i = 0; i < Parallax._parallaxes.length; i++) {
|
|
71
|
-
let parallaxInstance = Parallax._parallaxes[i];
|
|
72
|
-
parallaxInstance._enabled =
|
|
73
|
-
window.innerWidth > parallaxInstance.options.responsiveThreshold;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
_setupEventHandlers() {
|
|
78
|
-
this._handleImageLoadBound = this._handleImageLoad.bind(this);
|
|
79
|
-
this.$img[0].addEventListener('load', this._handleImageLoadBound);
|
|
80
|
-
|
|
81
|
-
if (Parallax._parallaxes.length === 0) {
|
|
82
|
-
Parallax._handleScrollThrottled = M.throttle(Parallax._handleScroll, 5);
|
|
83
|
-
window.addEventListener('scroll', Parallax._handleScrollThrottled);
|
|
84
|
-
|
|
85
|
-
Parallax._handleWindowResizeThrottled = M.throttle(Parallax._handleWindowResize, 5);
|
|
86
|
-
window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
_removeEventHandlers() {
|
|
91
|
-
this.$img[0].removeEventListener('load', this._handleImageLoadBound);
|
|
92
|
-
|
|
93
|
-
if (Parallax._parallaxes.length === 0) {
|
|
94
|
-
window.removeEventListener('scroll', Parallax._handleScrollThrottled);
|
|
95
|
-
window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
_setupStyles() {
|
|
100
|
-
this.$img[0].style.opacity = 1;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
_handleImageLoad() {
|
|
104
|
-
this._updateParallax();
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
_updateParallax() {
|
|
108
|
-
let containerHeight = this.$el.height() > 0 ? this.el.parentNode.offsetHeight : 500;
|
|
109
|
-
let imgHeight = this.$img[0].offsetHeight;
|
|
110
|
-
let parallaxDist = imgHeight - containerHeight;
|
|
111
|
-
let bottom = this.$el.offset().top + containerHeight;
|
|
112
|
-
let top = this.$el.offset().top;
|
|
113
|
-
let scrollTop = M.getDocumentScrollTop();
|
|
114
|
-
let windowHeight = window.innerHeight;
|
|
115
|
-
let windowBottom = scrollTop + windowHeight;
|
|
116
|
-
let percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
|
|
117
|
-
let parallax = parallaxDist * percentScrolled;
|
|
118
|
-
|
|
119
|
-
if (!this._enabled) {
|
|
120
|
-
this.$img[0].style.transform = '';
|
|
121
|
-
} else if (bottom > scrollTop && top < scrollTop + windowHeight) {
|
|
122
|
-
this.$img[0].style.transform = `translate3D(-50%, ${parallax}px, 0)`;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* @static
|
|
129
|
-
* @memberof Parallax
|
|
130
|
-
*/
|
|
131
|
-
Parallax._parallaxes = [];
|
|
132
|
-
|
|
133
|
-
M.Parallax = Parallax;
|
|
134
|
-
|
|
135
|
-
if (M.jQueryLoaded) {
|
|
136
|
-
M.initializeJqueryWrapper(Parallax, 'parallax', 'M_Parallax');
|
|
137
|
-
}
|
|
138
|
-
})(cash);
|
|
1
|
+
(function($) {
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
let _defaults = {
|
|
5
|
+
responsiveThreshold: 0 // breakpoint for swipeable
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
class Parallax extends Component {
|
|
9
|
+
constructor(el, options) {
|
|
10
|
+
super(Parallax, el, options);
|
|
11
|
+
|
|
12
|
+
this.el.M_Parallax = this;
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Options for the Parallax
|
|
16
|
+
* @member Parallax#options
|
|
17
|
+
* @prop {Number} responsiveThreshold
|
|
18
|
+
*/
|
|
19
|
+
this.options = $.extend({}, Parallax.defaults, options);
|
|
20
|
+
this._enabled = window.innerWidth > this.options.responsiveThreshold;
|
|
21
|
+
|
|
22
|
+
this.$img = this.$el.find('img').first();
|
|
23
|
+
this.$img.each(function() {
|
|
24
|
+
let el = this;
|
|
25
|
+
if (el.complete) $(el).trigger('load');
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
this._updateParallax();
|
|
29
|
+
this._setupEventHandlers();
|
|
30
|
+
this._setupStyles();
|
|
31
|
+
|
|
32
|
+
Parallax._parallaxes.push(this);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
static get defaults() {
|
|
36
|
+
return _defaults;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
static init(els, options) {
|
|
40
|
+
return super.init(this, els, options);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Get Instance
|
|
45
|
+
*/
|
|
46
|
+
static getInstance(el) {
|
|
47
|
+
let domElem = !!el.jquery ? el[0] : el;
|
|
48
|
+
return domElem.M_Parallax;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Teardown component
|
|
53
|
+
*/
|
|
54
|
+
destroy() {
|
|
55
|
+
Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
|
|
56
|
+
this.$img[0].style.transform = '';
|
|
57
|
+
this._removeEventHandlers();
|
|
58
|
+
|
|
59
|
+
this.$el[0].M_Parallax = undefined;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
static _handleScroll() {
|
|
63
|
+
for (let i = 0; i < Parallax._parallaxes.length; i++) {
|
|
64
|
+
let parallaxInstance = Parallax._parallaxes[i];
|
|
65
|
+
parallaxInstance._updateParallax.call(parallaxInstance);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
static _handleWindowResize() {
|
|
70
|
+
for (let i = 0; i < Parallax._parallaxes.length; i++) {
|
|
71
|
+
let parallaxInstance = Parallax._parallaxes[i];
|
|
72
|
+
parallaxInstance._enabled =
|
|
73
|
+
window.innerWidth > parallaxInstance.options.responsiveThreshold;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
_setupEventHandlers() {
|
|
78
|
+
this._handleImageLoadBound = this._handleImageLoad.bind(this);
|
|
79
|
+
this.$img[0].addEventListener('load', this._handleImageLoadBound);
|
|
80
|
+
|
|
81
|
+
if (Parallax._parallaxes.length === 0) {
|
|
82
|
+
Parallax._handleScrollThrottled = M.throttle(Parallax._handleScroll, 5);
|
|
83
|
+
window.addEventListener('scroll', Parallax._handleScrollThrottled);
|
|
84
|
+
|
|
85
|
+
Parallax._handleWindowResizeThrottled = M.throttle(Parallax._handleWindowResize, 5);
|
|
86
|
+
window.addEventListener('resize', Parallax._handleWindowResizeThrottled);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
_removeEventHandlers() {
|
|
91
|
+
this.$img[0].removeEventListener('load', this._handleImageLoadBound);
|
|
92
|
+
|
|
93
|
+
if (Parallax._parallaxes.length === 0) {
|
|
94
|
+
window.removeEventListener('scroll', Parallax._handleScrollThrottled);
|
|
95
|
+
window.removeEventListener('resize', Parallax._handleWindowResizeThrottled);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
_setupStyles() {
|
|
100
|
+
this.$img[0].style.opacity = 1;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
_handleImageLoad() {
|
|
104
|
+
this._updateParallax();
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
_updateParallax() {
|
|
108
|
+
let containerHeight = this.$el.height() > 0 ? this.el.parentNode.offsetHeight : 500;
|
|
109
|
+
let imgHeight = this.$img[0].offsetHeight;
|
|
110
|
+
let parallaxDist = imgHeight - containerHeight;
|
|
111
|
+
let bottom = this.$el.offset().top + containerHeight;
|
|
112
|
+
let top = this.$el.offset().top;
|
|
113
|
+
let scrollTop = M.getDocumentScrollTop();
|
|
114
|
+
let windowHeight = window.innerHeight;
|
|
115
|
+
let windowBottom = scrollTop + windowHeight;
|
|
116
|
+
let percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
|
|
117
|
+
let parallax = parallaxDist * percentScrolled;
|
|
118
|
+
|
|
119
|
+
if (!this._enabled) {
|
|
120
|
+
this.$img[0].style.transform = '';
|
|
121
|
+
} else if (bottom > scrollTop && top < scrollTop + windowHeight) {
|
|
122
|
+
this.$img[0].style.transform = `translate3D(-50%, ${parallax}px, 0)`;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* @static
|
|
129
|
+
* @memberof Parallax
|
|
130
|
+
*/
|
|
131
|
+
Parallax._parallaxes = [];
|
|
132
|
+
|
|
133
|
+
M.Parallax = Parallax;
|
|
134
|
+
|
|
135
|
+
if (M.jQueryLoaded) {
|
|
136
|
+
M.initializeJqueryWrapper(Parallax, 'parallax', 'M_Parallax');
|
|
137
|
+
}
|
|
138
|
+
})(cash);
|
package/js/pushpin.js
CHANGED
|
@@ -1,148 +1,148 @@
|
|
|
1
|
-
(function($) {
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
let _defaults = {
|
|
5
|
-
top: 0,
|
|
6
|
-
bottom: Infinity,
|
|
7
|
-
offset: 0,
|
|
8
|
-
onPositionChange: null
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* @class
|
|
13
|
-
*
|
|
14
|
-
*/
|
|
15
|
-
class Pushpin extends Component {
|
|
16
|
-
/**
|
|
17
|
-
* Construct Pushpin instance
|
|
18
|
-
* @constructor
|
|
19
|
-
* @param {Element} el
|
|
20
|
-
* @param {Object} options
|
|
21
|
-
*/
|
|
22
|
-
constructor(el, options) {
|
|
23
|
-
super(Pushpin, el, options);
|
|
24
|
-
|
|
25
|
-
this.el.M_Pushpin = this;
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Options for the modal
|
|
29
|
-
* @member Pushpin#options
|
|
30
|
-
*/
|
|
31
|
-
this.options = $.extend({}, Pushpin.defaults, options);
|
|
32
|
-
|
|
33
|
-
this.originalOffset = this.el.offsetTop;
|
|
34
|
-
Pushpin._pushpins.push(this);
|
|
35
|
-
this._setupEventHandlers();
|
|
36
|
-
this._updatePosition();
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
static get defaults() {
|
|
40
|
-
return _defaults;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
static init(els, options) {
|
|
44
|
-
return super.init(this, els, options);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* Get Instance
|
|
49
|
-
*/
|
|
50
|
-
static getInstance(el) {
|
|
51
|
-
let domElem = !!el.jquery ? el[0] : el;
|
|
52
|
-
return domElem.M_Pushpin;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Teardown component
|
|
57
|
-
*/
|
|
58
|
-
destroy() {
|
|
59
|
-
this.el.style.top = null;
|
|
60
|
-
this._removePinClasses();
|
|
61
|
-
|
|
62
|
-
// Remove pushpin Inst
|
|
63
|
-
let index = Pushpin._pushpins.indexOf(this);
|
|
64
|
-
Pushpin._pushpins.splice(index, 1);
|
|
65
|
-
if (Pushpin._pushpins.length === 0) {
|
|
66
|
-
this._removeEventHandlers();
|
|
67
|
-
}
|
|
68
|
-
this.el.M_Pushpin = undefined;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
static _updateElements() {
|
|
72
|
-
for (let elIndex in Pushpin._pushpins) {
|
|
73
|
-
let pInstance = Pushpin._pushpins[elIndex];
|
|
74
|
-
pInstance._updatePosition();
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
_setupEventHandlers() {
|
|
79
|
-
document.addEventListener('scroll', Pushpin._updateElements);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
_removeEventHandlers() {
|
|
83
|
-
document.removeEventListener('scroll', Pushpin._updateElements);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
_updatePosition() {
|
|
87
|
-
let scrolled = M.getDocumentScrollTop() + this.options.offset;
|
|
88
|
-
|
|
89
|
-
if (
|
|
90
|
-
this.options.top <= scrolled &&
|
|
91
|
-
this.options.bottom >= scrolled &&
|
|
92
|
-
!this.el.classList.contains('pinned')
|
|
93
|
-
) {
|
|
94
|
-
this._removePinClasses();
|
|
95
|
-
this.el.style.top = `${this.options.offset}px`;
|
|
96
|
-
this.el.classList.add('pinned');
|
|
97
|
-
|
|
98
|
-
// onPositionChange callback
|
|
99
|
-
if (typeof this.options.onPositionChange === 'function') {
|
|
100
|
-
this.options.onPositionChange.call(this, 'pinned');
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
// Add pin-top (when scrolled position is above top)
|
|
105
|
-
if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) {
|
|
106
|
-
this._removePinClasses();
|
|
107
|
-
this.el.style.top = 0;
|
|
108
|
-
this.el.classList.add('pin-top');
|
|
109
|
-
|
|
110
|
-
// onPositionChange callback
|
|
111
|
-
if (typeof this.options.onPositionChange === 'function') {
|
|
112
|
-
this.options.onPositionChange.call(this, 'pin-top');
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
// Add pin-bottom (when scrolled position is below bottom)
|
|
117
|
-
if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) {
|
|
118
|
-
this._removePinClasses();
|
|
119
|
-
this.el.classList.add('pin-bottom');
|
|
120
|
-
this.el.style.top = `${this.options.bottom - this.originalOffset}px`;
|
|
121
|
-
|
|
122
|
-
// onPositionChange callback
|
|
123
|
-
if (typeof this.options.onPositionChange === 'function') {
|
|
124
|
-
this.options.onPositionChange.call(this, 'pin-bottom');
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
_removePinClasses() {
|
|
130
|
-
// IE 11 bug (can't remove multiple classes in one line)
|
|
131
|
-
this.el.classList.remove('pin-top');
|
|
132
|
-
this.el.classList.remove('pinned');
|
|
133
|
-
this.el.classList.remove('pin-bottom');
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* @static
|
|
139
|
-
* @memberof Pushpin
|
|
140
|
-
*/
|
|
141
|
-
Pushpin._pushpins = [];
|
|
142
|
-
|
|
143
|
-
M.Pushpin = Pushpin;
|
|
144
|
-
|
|
145
|
-
if (M.jQueryLoaded) {
|
|
146
|
-
M.initializeJqueryWrapper(Pushpin, 'pushpin', 'M_Pushpin');
|
|
147
|
-
}
|
|
148
|
-
})(cash);
|
|
1
|
+
(function($) {
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
let _defaults = {
|
|
5
|
+
top: 0,
|
|
6
|
+
bottom: Infinity,
|
|
7
|
+
offset: 0,
|
|
8
|
+
onPositionChange: null
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @class
|
|
13
|
+
*
|
|
14
|
+
*/
|
|
15
|
+
class Pushpin extends Component {
|
|
16
|
+
/**
|
|
17
|
+
* Construct Pushpin instance
|
|
18
|
+
* @constructor
|
|
19
|
+
* @param {Element} el
|
|
20
|
+
* @param {Object} options
|
|
21
|
+
*/
|
|
22
|
+
constructor(el, options) {
|
|
23
|
+
super(Pushpin, el, options);
|
|
24
|
+
|
|
25
|
+
this.el.M_Pushpin = this;
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Options for the modal
|
|
29
|
+
* @member Pushpin#options
|
|
30
|
+
*/
|
|
31
|
+
this.options = $.extend({}, Pushpin.defaults, options);
|
|
32
|
+
|
|
33
|
+
this.originalOffset = this.el.offsetTop;
|
|
34
|
+
Pushpin._pushpins.push(this);
|
|
35
|
+
this._setupEventHandlers();
|
|
36
|
+
this._updatePosition();
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
static get defaults() {
|
|
40
|
+
return _defaults;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
static init(els, options) {
|
|
44
|
+
return super.init(this, els, options);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Get Instance
|
|
49
|
+
*/
|
|
50
|
+
static getInstance(el) {
|
|
51
|
+
let domElem = !!el.jquery ? el[0] : el;
|
|
52
|
+
return domElem.M_Pushpin;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Teardown component
|
|
57
|
+
*/
|
|
58
|
+
destroy() {
|
|
59
|
+
this.el.style.top = null;
|
|
60
|
+
this._removePinClasses();
|
|
61
|
+
|
|
62
|
+
// Remove pushpin Inst
|
|
63
|
+
let index = Pushpin._pushpins.indexOf(this);
|
|
64
|
+
Pushpin._pushpins.splice(index, 1);
|
|
65
|
+
if (Pushpin._pushpins.length === 0) {
|
|
66
|
+
this._removeEventHandlers();
|
|
67
|
+
}
|
|
68
|
+
this.el.M_Pushpin = undefined;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
static _updateElements() {
|
|
72
|
+
for (let elIndex in Pushpin._pushpins) {
|
|
73
|
+
let pInstance = Pushpin._pushpins[elIndex];
|
|
74
|
+
pInstance._updatePosition();
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
_setupEventHandlers() {
|
|
79
|
+
document.addEventListener('scroll', Pushpin._updateElements);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
_removeEventHandlers() {
|
|
83
|
+
document.removeEventListener('scroll', Pushpin._updateElements);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
_updatePosition() {
|
|
87
|
+
let scrolled = M.getDocumentScrollTop() + this.options.offset;
|
|
88
|
+
|
|
89
|
+
if (
|
|
90
|
+
this.options.top <= scrolled &&
|
|
91
|
+
this.options.bottom >= scrolled &&
|
|
92
|
+
!this.el.classList.contains('pinned')
|
|
93
|
+
) {
|
|
94
|
+
this._removePinClasses();
|
|
95
|
+
this.el.style.top = `${this.options.offset}px`;
|
|
96
|
+
this.el.classList.add('pinned');
|
|
97
|
+
|
|
98
|
+
// onPositionChange callback
|
|
99
|
+
if (typeof this.options.onPositionChange === 'function') {
|
|
100
|
+
this.options.onPositionChange.call(this, 'pinned');
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Add pin-top (when scrolled position is above top)
|
|
105
|
+
if (scrolled < this.options.top && !this.el.classList.contains('pin-top')) {
|
|
106
|
+
this._removePinClasses();
|
|
107
|
+
this.el.style.top = 0;
|
|
108
|
+
this.el.classList.add('pin-top');
|
|
109
|
+
|
|
110
|
+
// onPositionChange callback
|
|
111
|
+
if (typeof this.options.onPositionChange === 'function') {
|
|
112
|
+
this.options.onPositionChange.call(this, 'pin-top');
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// Add pin-bottom (when scrolled position is below bottom)
|
|
117
|
+
if (scrolled > this.options.bottom && !this.el.classList.contains('pin-bottom')) {
|
|
118
|
+
this._removePinClasses();
|
|
119
|
+
this.el.classList.add('pin-bottom');
|
|
120
|
+
this.el.style.top = `${this.options.bottom - this.originalOffset}px`;
|
|
121
|
+
|
|
122
|
+
// onPositionChange callback
|
|
123
|
+
if (typeof this.options.onPositionChange === 'function') {
|
|
124
|
+
this.options.onPositionChange.call(this, 'pin-bottom');
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
_removePinClasses() {
|
|
130
|
+
// IE 11 bug (can't remove multiple classes in one line)
|
|
131
|
+
this.el.classList.remove('pin-top');
|
|
132
|
+
this.el.classList.remove('pinned');
|
|
133
|
+
this.el.classList.remove('pin-bottom');
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* @static
|
|
139
|
+
* @memberof Pushpin
|
|
140
|
+
*/
|
|
141
|
+
Pushpin._pushpins = [];
|
|
142
|
+
|
|
143
|
+
M.Pushpin = Pushpin;
|
|
144
|
+
|
|
145
|
+
if (M.jQueryLoaded) {
|
|
146
|
+
M.initializeJqueryWrapper(Pushpin, 'pushpin', 'M_Pushpin');
|
|
147
|
+
}
|
|
148
|
+
})(cash);
|