Skip to content

Commit 8afda3b

Browse files
markdalgleishmarkdalgleish
committed
Introduced 'destroy' functionality
1 parent 6da1876 commit 8afda3b

File tree

2 files changed

+68
-30
lines changed

2 files changed

+68
-30
lines changed

‎stellar.js

Lines changed: 66 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* Stellar.js v0.1
1+
/* Stellar.js v0.2
22
* Copyright 2012, Mark Dalgleish
33
*
44
* This content is released under the MIT License
@@ -171,7 +171,9 @@
171171
};
172172
},
173173
refresh: function() {
174-
var self = this;
174+
var self = this,
175+
oldLeft = self._getScrollLeft(),
176+
oldTop = self._getScrollTop();
175177

176178
this._setScrollLeft(0);
177179
this._setScrollTop(0);
@@ -180,19 +182,22 @@
180182
this._findParticles();
181183
this._findBackgrounds();
182184

183-
// Fix for Webkit background rendering bug
184-
if (navigator.userAgent.indexOf('Webkit') > 0) {
185+
// Fix for WebKit background rendering bug
186+
if (navigator.userAgent.indexOf('WebKit') > 0) {
185187
$(window).load(function(){
186188
var oldLeft = self._getScrollLeft(),
187189
oldTop = self._getScrollTop();
188-
190+
189191
self._setScrollLeft(oldLeft + 1);
190192
self._setScrollTop(oldTop + 1);
191-
193+
192194
self._setScrollLeft(oldLeft);
193195
self._setScrollTop(oldTop);
194196
});
195197
}
198+
199+
self._setScrollLeft(oldLeft);
200+
self._setScrollTop(oldTop);
196201
},
197202
_findParticles: function(){
198203
var self = this,
@@ -224,16 +229,16 @@
224229
tempParentOffsetTop = 0;
225230

226231
// Ensure this element isn't already part of another scrolling element
227-
if ($this.data('stellar-elementIsActive') === undefined) {
228-
$this.data('stellar-elementIsActive', true);
229-
} else {
232+
if (!$this.data('stellar-elementIsActive')) {
233+
$this.data('stellar-elementIsActive', this);
234+
} else if ($this.data('stellar-elementIsActive') !== this) {
230235
return;
231236
}
232237

233238
self.options.showElement($this);
234239

235-
// Save/restore the original top and left CSS values in case we refresh the particles
236-
if ($this.data('stellar-startingLeft') === undefined) {
240+
// Save/restore the original top and left CSS values in case we refresh the particles or destroy the instance
241+
if (!$this.data('stellar-startingLeft')) {
237242
$this.data('stellar-startingLeft', $this.css('left'));
238243
$this.data('stellar-startingTop', $this.css('top'));
239244
} else {
@@ -293,12 +298,6 @@
293298
scrollTop = this._getScrollTop(),
294299
$backgroundElements;
295300

296-
if (this.background !== undefined) {
297-
for (var i = this.backgrounds.length - 1; i >= 0; i--) {
298-
this.backgrounds[i].$element.data('stellar-backgroundIsActive', undefined);
299-
}
300-
}
301-
302301
this.backgrounds = [];
303302

304303
if (!this.options.parallaxBackgrounds) return;
@@ -320,12 +319,20 @@
320319
offsetTop;
321320

322321
// Ensure this element isn't already part of another scrolling element
323-
if ($this.data('stellar-backgroundIsActive') === undefined) {
324-
$this.data('stellar-backgroundIsActive', true);
325-
} else {
322+
if (!$this.data('stellar-backgroundIsActive')) {
323+
$this.data('stellar-backgroundIsActive', this);
324+
} else if ($this.data('stellar-backgroundIsActive') !== this) {
326325
return;
327326
}
328327

328+
// Save/restore the original top and left CSS values in case we destroy the instance
329+
if (!$this.data('stellar-backgroundStartingLeft')) {
330+
$this.data('stellar-backgroundStartingLeft', backgroundPosition[0]);
331+
$this.data('stellar-backgroundStartingTop', backgroundPosition[1]);
332+
} else {
333+
$this.css('background-position', $this.data('stellar-backgroundStartingLeft') + ' ' + $this.data('stellar-backgroundStartingTop'));
334+
}
335+
329336
offsetLeft = $this.offset().left - parseInt($this.css('margin-left'), 10) - scrollLeft;
330337
offsetTop = $this.offset().top - parseInt($this.css('margin-top'), 10) - scrollTop;
331338

@@ -350,6 +357,33 @@
350357
});
351358
});
352359
},
360+
destroy: function() {
361+
var particle,
362+
startingPositionLeft,
363+
startingPositionTop,
364+
background;
365+
366+
for (var i = this.particles.length - 1; i >= 0; i--) {
367+
particle = this.particles[i];
368+
startingPositionLeft = particle.$element.data('stellar-startingLeft');
369+
startingPositionTop = particle.$element.data('stellar-startingTop');
370+
371+
this._setLeft(particle.$element, startingPositionLeft, startingPositionLeft);
372+
this._setTop(particle.$element, startingPositionTop, startingPositionTop);
373+
374+
this.options.showElement(particle.$element);
375+
376+
particle.$element.data('stellar-startingLeft', null).data('stellar-elementIsActive', null).data('stellar-backgroundIsActive', null);
377+
}
378+
379+
for (var i = this.backgrounds.length - 1; i >= 0; i--) {
380+
background = this.backgrounds[i];
381+
background.$element.css('background-position', background.startingValueLeft + ' ' + background.startingValueTop);
382+
}
383+
384+
this._animationLoop = $.noop;
385+
clearInterval(this._viewportDetectionInterval);
386+
},
353387
_setOffsets: function() {
354388
var self = this;
355389

@@ -467,25 +501,26 @@
467501
};
468502

469503
detect();
470-
setInterval(detect, this.options.viewportDetectionInterval);
504+
this._viewportDetectionInterval = setInterval(detect, this.options.viewportDetectionInterval);
471505
},
472506
_startAnimationLoop: function() {
473507
var self = this,
474508
requestAnimFrame = (function(){
475-
return window.requestAnimationFrame ||
509+
return window.requestAnimationFrame ||
476510
window.webkitRequestAnimationFrame ||
477511
window.mozRequestAnimationFrame ||
478512
window.oRequestAnimationFrame ||
479513
window.msRequestAnimationFrame ||
480514
function(callback, element){
481515
window.setTimeout(callback, 1000 / 60);
482516
};
483-
})();
484-
485-
(function animloop(){
486-
requestAnimFrame(animloop);
487-
self._repositionElements();
488-
})();
517+
})();
518+
519+
this._animationLoop = function(){
520+
requestAnimFrame(self._animationLoop);
521+
self._repositionElements();
522+
};
523+
this._animationLoop();
489524
}
490525
};
491526

@@ -503,6 +538,9 @@
503538
if (instance instanceof Plugin && typeof instance[options] === 'function') {
504539
instance[options].apply(instance, Array.prototype.slice.call(args, 1));
505540
}
541+
if (options === 'destroy') {
542+
$.data(this, 'plugin_' + pluginName, null);
543+
}
506544
});
507545
}
508546
};

0 commit comments

Comments
 (0)