Skip to content

Commit fe15176

Browse files
staakystaaky
committed
Fixed issues with fading prev-next buttons
Rewritten the way the prev-next buttons are shown, solving an underlying problem that caused them to fade incorrectly. It's now possible to spam-click an image without getting a sudden shift in opacity on buttons.
1 parent f29cb6d commit fe15176

5 files changed

Lines changed: 30 additions & 33 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "strip",
33
"title": "Strip",
4-
"version": "1.0.9",
4+
"version": "1.1.0",
55
"description": "A Less Intrusive Responsive Lightbox",
66
"author": {
77
"name": "Nick Stakenburg",

‎src/js/helpers/helpers.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,12 @@ $.extend($.easing, {
115115
return c*(t/=d)*t*t + b;
116116
},
117117

118-
stripEaseOutCubic: function (x, t, b, c, d) {
119-
return c*((t=t/d-1)*t*t + 1) + b;
118+
stripEaseInSine: function (x, t, b, c, d) {
119+
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
120+
},
121+
122+
stripEaseOutSine: function (x, t, b, c, d) {
123+
return c * Math.sin(t/d * (Math.PI/2)) + b;
120124
}
121125
});
122126

‎src/js/page.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -367,11 +367,13 @@ $.extend(Page.prototype, {
367367
if (--fx < 1) next_shown_and_resized();
368368
}, duration);
369369

370-
// we don't sync this because hovering UI can stop it and cancel the callback
371-
// if someone decides to hover the UI before it faded this'll instantly show it
372-
// instead of waiting for a possibly longer window.transition
373-
// NOTE: disabled to allow the UI to fade out at all times
374-
// Window.showUI(null, duration);
370+
if (Window._showUIOnResize) {
371+
Window.showUI(null, duration);
372+
373+
// don't show the UI the next time, it'll show up
374+
// when we set this flag again
375+
Window._showUIOnResize = false;
376+
}
375377

376378
// we also don't track this
377379
Pages.hideVisibleInactive(duration);

‎src/js/pages.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ var Pages = {
1414

1515
this.pages[this.uid] = []; // create room for these pages
1616

17+
// switched pages, so show the UI on the next resize
18+
Window._showUIOnResize = true;
19+
1720
// add pages for all these views
1821
$.each(views, $.proxy(function(i, view) {
1922
this.pages[this.uid].push(new Page(view, i + 1, this.views.length));
2023
}, this));
21-
22-
// we've switched to a new set of pages
23-
this._switched = true;
2424
},
2525

2626
show: function(position, callback) {

‎src/js/window.js‎

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -189,12 +189,6 @@ var Window = {
189189
duration = Math.round(min + (percentage * tdiff));
190190
}
191191

192-
// only show the UI when opening, when we've switched page groups
193-
// or wjem a .hide() animation was just stopped
194-
// mouse movement will toggle it when open
195-
if (fromZ == 0 || Pages._switched || this._stoppedHideQueue) {
196-
this.showUI(null, duration);
197-
}
198192

199193
if (wh == 0) {
200194
this.closing = true;
@@ -330,10 +324,14 @@ var Window = {
330324
// NOTE: side should be set here since the window was visible
331325
// so using resize should be safe
332326

327+
// hide the UI
328+
var duration = this.view ? this.view.options.effects.window.hide : 0;
329+
this.hideUI(null, duration);
330+
333331
// avoid tracking mouse movement while the window is closing
334332
this.unbindUI();
335333

336-
// resize instantly
334+
// hide
337335
this.resize(0, $.proxy(function() {
338336

339337
// some of the things we'd normally do in hide
@@ -344,6 +342,9 @@ var Window = {
344342

345343
this._setSide(side, callback);
346344
}, this));
345+
346+
// show the UI on the next resize
347+
this._showUIOnResize = true;
347348
} else {
348349
this._setSide(side, callback);
349350
}
@@ -405,11 +406,6 @@ var Window = {
405406

406407
// store the page and show it
407408
this.page = Pages.show(position, $.proxy(function() {
408-
// we reset _stoppedHideQueue after a page was fully shown
409-
// so that re-opening while closing shows the UI again
410-
// only once
411-
this._stoppedHideQueue = false;
412-
413409
var afterPosition = this.view.options.afterPosition;
414410
if ($.type(afterPosition) == 'function') {
415411
afterPosition.call(Strip, position);
@@ -422,8 +418,6 @@ var Window = {
422418
var hideQueue = this.queues.hide;
423419
hideQueue.queue([]); // clear queue
424420

425-
this._hiding = true;
426-
427421
hideQueue.queue($.proxy(function(next_stop) {
428422
Pages.stop();
429423
next_stop();
@@ -451,6 +445,9 @@ var Window = {
451445
Pages.removeActiveClasses();
452446

453447
this.resize(0, next_zero, this.view.options.effects.window.hide);
448+
449+
// after we initiate the hide resize, the next resize should bring up the UI again
450+
this._showUIOnResize = true;
454451
}, this));
455452

456453
// callbacks after resize in a separate queue
@@ -475,8 +472,6 @@ var Window = {
475472

476473
this.view = null;
477474

478-
this._hiding = false;
479-
480475
next_after_resize();
481476
}, this));
482477

@@ -493,10 +488,6 @@ var Window = {
493488
// a new page, a callback could otherwise interrupt this
494489
stopHideQueue: function() {
495490
this.queues.hide.queue([]);
496-
if (this._hiding) {
497-
this._stoppedHideQueue = true;
498-
this._hiding = false;
499-
}
500491
},
501492

502493
// these are things we can safely call when switching side as well
@@ -726,7 +717,7 @@ var Window = {
726717
var duration = this.view ? this.view.options.effects.ui.show : 0;
727718
if ($.type(alternateDuration) == 'number') duration = alternateDuration;
728719

729-
elements.stop(true).fadeTo(duration, 1, $.proxy(function() {
720+
elements.stop(true).fadeTo(duration, 1, 'stripEaseInSine', $.proxy(function() {
730721
this.startUITimer();
731722
if ($.type(callback) == 'function') callback();
732723
}, this));
@@ -738,7 +729,7 @@ var Window = {
738729
var duration = this.view ? this.view.options.effects.ui.hide : 0;
739730
if ($.type(alternateDuration) == 'number') duration = alternateDuration;
740731

741-
elements.stop(true).fadeOut(duration, 'stripEaseOutCubic', function() {
732+
elements.stop(true).fadeOut(duration, 'stripEaseOutSine', function() {
742733
if ($.type(callback) == 'function') callback();
743734
});
744735
},

0 commit comments

Comments
 (0)