Skip to content

Adding support for history push state + popstate event handle #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
knee-cola wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Adding support for history push state + popstate event handle #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e6014ec
adding history push state + event handler for popstate
knee-cola Mar 6, 2018
8f1e050
adding history API options to readme
knee-cola Mar 6, 2018
9acbefb
created history push state example
knee-cola Mar 6, 2018
3fea756
re-building lib
knee-cola Mar 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions examples/history-push-state.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/smartphoto.min.css">
<title>SmartPhoto.js</title>
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<div class="wrapper">
<h1 class="title">SmartPhoto.js</h1>
<div class="masonry">
<div class="brick">
<a href="./assets/large-lion.jpg" class="js-img-viwer" data-caption="lion" data-id="lion">
<img src="./assets/lion.jpg" width="360"/>
</a>
</div>
<div class="brick">
<a href="./assets/large-rakuda.jpg" class="js-img-viwer" data-caption="camel" data-id="camel">
<img src="./assets/rakuda.jpg" width="360"/>
</a>
</div>
<div class="brick">
<a href="./assets/large-kaba.jpg" class="js-img-viwer" data-caption="hippopotamus" data-id="hippopotamus">
<img src="./assets/kaba.jpg" width="360" />
</a>
</div>
<div class="brick">
<a href="./assets/large-koara.jpg" class="js-img-viwer" data-caption="koala" data-id="koala">
<img src="./assets/koara.jpg" width="360" />
</a>
</div>
<div class="brick">
<a href="./assets/large-kuma.jpg" class="js-img-viwer" data-caption="bear" data-id="bear">
<img src="./assets/kuma.jpg" width="360"/>
</a>
</div>
<div class="brick">
<a href="./assets/large-sai.jpg" class="js-img-viwer" data-caption="rhinoceros" data-id="rhinoceros">
<img src="./assets/sai.jpg" width="360"/>
</a>
</div>
</div>
</div>
<script src="../js/smartphoto.js?v=1"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-img-viwer", {
showAnimation: false,
useHistoryApi: true,
historyApiMethod: 'push'
});
});
</script>
</body>
</html>
108 changes: 78 additions & 30 deletions js/jquery-smartphoto.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,116 +11,100 @@
* a-template:
* license: MIT (http://opensource.org/licenses/MIT)
* author: steelydylan
* maintainers: appleple <info@appleple.com>, steelydylan <ess_president@me.com>
* version: 0.5.1
*
* array.prototype.find:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Paul Miller <http://paulmillr.com>
* maintainers: ljharb <ljharb@gmail.com>, paulmillr <paul@paulmillr.com>
* contributors: Duncan Hall <himself@duncanhall.net>
* homepage: https://github.com/paulmillr/Array.prototype.find#readme
* version: 2.0.4
*
* custom-event-polyfill:
* license: MIT (http://opensource.org/licenses/MIT)
* maintainers: krambuhl <evan.krambuhl@gmail.com>
* contributors: Frank Panetta, Mikhail Reenko <reenko@yandex.ru>, Joscha Feth <joscha@feth.com>
* homepage: https://github.com/krambuhl/custom-event-polyfill#readme
* version: 0.3.0
*
* define-properties:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Jordan Harband
* maintainers: ljharb <ljharb@gmail.com>
* homepage: https://github.com/ljharb/define-properties#readme
* version: 1.1.2
*
* es-abstract:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Jordan Harband <ljharb@gmail.com>
* maintainers: ljharb <ljharb@gmail.com>
* contributors: Jordan Harband <ljharb@gmail.com>
* homepage: https://github.com/ljharb/es-abstract#readme
* version: 1.10.0
*
* es-to-primitive:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Jordan Harband
* maintainers: ljharb <ljharb@gmail.com>
* homepage: https://github.com/ljharb/es-to-primitive#readme
* version: 1.1.1
*
* es6-promise-polyfill:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Roman Dvornov <rdvornov@gmail.com>
* maintainers: lahmatiy <rdvornov@gmail.com>
* homepage: https://github.com/lahmatiy/es6-promise-polyfill#readme
* version: 1.2.0
*
* foreach:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Manuel Stofer <manuel@takimata.ch>
* maintainers: manuelstofer <manuel@takimata.ch>
* contributors: Manuel Stofer, Jordan Harband
* homepage: https://github.com/manuelstofer/foreach
* homepage: https://github.com/manuelstofer/foreach#readme
* version: 2.0.5
*
* function-bind:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Raynos <raynos2@gmail.com>
* maintainers: raynos <raynos2@gmail.com>, ljharb <ljharb@gmail.com>
* contributors: Raynos, Jordan Harband
* homepage: https://github.com/Raynos/function-bind
* version: 1.1.1
*
* has:
* licenses: MIT (http://opensource.org/licenses/MIT)
* author: Thiago de Arruda <tpadilha84@gmail.com>
* maintainers: tarruda <tpadilha84@gmail.com>
* homepage: https://github.com/tarruda/has
* version: 1.0.1
*
* is-callable:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Jordan Harband <ljharb@gmail.com>
* maintainers: ljharb <ljharb@gmail.com>
* contributors: Jordan Harband <ljharb@gmail.com>
* homepage: https://github.com/ljharb/is-callable#readme
* version: 1.1.3
*
* is-date-object:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Jordan Harband
* maintainers: ljharb <ljharb@gmail.com>
* homepage: https://github.com/ljharb/is-date-object#readme
* version: 1.0.1
*
* is-regex:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Jordan Harband
* maintainers: ljharb <ljharb@gmail.com>
* homepage: https://github.com/ljharb/is-regex
* version: 1.0.4
*
* is-symbol:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Jordan Harband
* maintainers: ljharb <ljharb@gmail.com>
* homepage: https://github.com/ljharb/is-symbol
* homepage: https://github.com/ljharb/is-symbol#readme
* version: 1.0.1
*
* morphdom:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Patrick Steele-Idem <pnidem@gmail.com>
* maintainers: mlrawlings <ml.rawlings@gmail.com>, pnidem <pnidem@gmail.com>
* homepage: https://github.com/patrick-steele-idem/morphdom#readme
* version: 2.3.3
*
* object-keys:
* license: MIT (http://opensource.org/licenses/MIT)
* author: Jordan Harband <ljharb@gmail.com>
* maintainers: ljharb <ljharb@gmail.com>
* contributors: Jordan Harband <ljharb@gmail.com>, Raynos <raynos2@gmail.com>, Nathan Rajlich <nathan@tootallnate.net>, Ivan Starkov <istarkov@gmail.com>, Gary Katsevman <git@gkatsev.com>
* homepage: https://github.com/ljharb/object-keys#readme
* version: 1.0.11
Expand Down Expand Up @@ -3414,6 +3398,7 @@ var defaults = {
verticalGravity: false,
useOrientationApi: false,
useHistoryApi: true,
historyApiMethod: 'replace',
swipeTopToClose: false,
swipeBottomToClose: true,
swipeOffset: 100,
Expand Down Expand Up @@ -3477,6 +3462,45 @@ var SmartPhoto = function (_ATemplate) {
_this._doAnim();
}, _this.data.forceInterval);

// IF history API is enabled
// > setup history event listener
if (_this.data.useHistoryApi && _this.data.historyApiMethod === 'push') {

window.onpopstate = function (event) {
Copy link
Contributor

@steelydylan steelydylan Nov 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the late review
Please not to use onpopstate function as it self, I prefer using window.addEventlistener("popstate") instead


// if state is not set - the gallery was hidden in this history state
if (!event || !event.state || event.state.group === void 0 || event.state.index === void 0) {
_this.hidePhoto();
return;
}

// geting photo info from state object
_this.data.currentGroup = event.state.group;
_this.data.currentIndex = event.state.index;
var currentItem = _this._getSelectedItem();

if (currentItem.loaded) {
_this._initPhoto();
_this.data.appear = true;
_this.clicked = true;
_this.update();
body.style.overflow = 'hidden';
_this._fireEvent('open');
} else {
_this._loadItem(currentItem).then(function () {
_this._initPhoto();
_this.data.appear = true;
_this.clicked = true;
_this.update();
body.style.overflow = 'hidden';
_this._fireEvent('open');
});
}

_this.gotoSlide(event.state.index, true); // <- don't update history
};
}

if (!_this.data.isSmartPhone) {
window.addEventListener('resize', function () {
if (!_this.groupItems()) {
Expand Down Expand Up @@ -3788,7 +3812,7 @@ var SmartPhoto = function (_ATemplate) {
var scrollY = window.scrollY;
var body = document.querySelector('body');
if (location.hash) {
this._setHash('');
this._setHash();
}
window.scroll(scrollX, scrollY);
this._doHideEffect(dir).then(function () {
Expand Down Expand Up @@ -3873,20 +3897,40 @@ var SmartPhoto = function (_ATemplate) {
var items = this.groupItems();
var id = items[this.data.currentIndex].id;
var group = this.data.currentGroup;
var hash = 'group=' + group + '&photo=' + id;
this._setHash(hash);
this._setHash(group, id, this.data.currentIndex);
window.scroll(scrollX, scrollY);
}
}, {
key: '_setHash',
value: function _setHash(hash) {
value: function _setHash(group, id, index) {

if (!(window.history && window.history.pushState) || !this.data.useHistoryApi) {
return;
}
if (hash) {
window.history.replaceState(null, null, '' + location.pathname + location.search + '#' + hash);
} else {
window.history.replaceState(null, null, '' + location.pathname + location.search);

// if the displayed image has not changed
// > don't change history
if (this.data.oldIndex === index) {
return;
}

var newUrl = '' + location.pathname + location.search,
newState = void 0;

// if `group` od `id` are not set
// > don't construct new state
if (group !== void 0 && id !== void 0) {
newUrl += '#group=' + group + '&photo=' + id;
newState = { group: group, id: id, index: index };
}

switch (this.data.historyApiMethod) {
case 'push':
window.history.pushState(newState, null, newUrl);
break;
case 'replace':
default:
window.history.replaceState(newState, null, newUrl);
}
}
}, {
Expand Down Expand Up @@ -3951,7 +3995,7 @@ var SmartPhoto = function (_ATemplate) {
}
}, {
key: '_slideList',
value: function _slideList() {
value: function _slideList(skipHistory) {
var _this10 = this;

this.data.scaleSize = 1;
Expand All @@ -3962,7 +4006,11 @@ var SmartPhoto = function (_ATemplate) {
this.data.photoPosY = 0;
this.data.onMoveClass = true;
this._setPosByCurrentIndex();
this._setHashByCurrentIndex();

if (!skipHistory) {
this._setHashByCurrentIndex();
}

this._setSizeByScreen();
setTimeout(function () {
_this10.data.onMoveClass = false;
Expand All @@ -3976,15 +4024,15 @@ var SmartPhoto = function (_ATemplate) {
}
}, {
key: 'gotoSlide',
value: function gotoSlide(index) {
value: function gotoSlide(index, skipHistory) {
if (this.e && this.e.preventDefault) {
this.e.preventDefault();
}
this.data.currentIndex = parseInt(index, 10);
if (!this.data.currentIndex) {
this.data.currentIndex = 0;
}
this._slideList();
this._slideList(skipHistory);
}
}, {
key: 'setArrow',
Expand Down
Loading