mobile-navigation-controller
Advanced tools
Comparing version 1.3.9 to 1.4.0
@@ -7,2 +7,4 @@ "use strict"; | ||
| var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
@@ -24,2 +26,4 @@ | ||
| function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -47,3 +51,5 @@ | ||
| var homePage = _this.props.homePageKey ? _this.props.homePageKey : Array.isArray(_this.props.children) ? _this.props.children[0].key : _this.props.children.key; | ||
| var homePage = _this.props.homePageKey ? _this.props.homePageKey : Array.isArray(_this.props.children) ? _this.props.children.filter(function (child) { | ||
| return (typeof child === "undefined" ? "undefined" : _typeof(child)) === "object" && !child.props.kill; | ||
| })[0].key : _this.props.children.key; | ||
@@ -63,2 +69,11 @@ var changeRoute = true; //default | ||
| var fthis = _this; | ||
| _this.onError = function (e) { | ||
| console.error("navigator error"); | ||
| console.error(e); | ||
| if (fthis.props.onError) _this.props.onError(e); | ||
| }; | ||
| var historyPages = []; | ||
@@ -94,4 +109,6 @@ historyPages.push(homePage); | ||
| if (Array.isArray(_this.props.children)) { | ||
| _this.props.children.forEach(function (child) { | ||
| listLevelPages[child.key] = child.props.levelPage === undefined ? child.key === homePage ? 0 : 99 : child.props.levelPage; | ||
| _this.props.children.filter(function (child) { | ||
| return (typeof child === "undefined" ? "undefined" : _typeof(child)) === "object" && !child.props.kill; | ||
| }).forEach(function (child) { | ||
| listLevelPages[child.key] = child.props.levelPage === undefined ? child.key === homePage ? 0 : 99999 : child.props.levelPage; | ||
@@ -126,3 +143,3 @@ if (child.props.transitionIn) _this.componentTransitionIn[child.key] = child.props.transitionIn; | ||
| if (Array.isArray(_this.props.children)) _this.props.children.map(function (child) { | ||
| if (child.key === null || child.key === "") window.console.log("navigation_controller: key value it's required"); | ||
| if (child.key === null || child.key === "") window.console.error("navigation_controller: key value it's required"); | ||
| }); | ||
@@ -144,17 +161,32 @@ return _this; | ||
| if (this.props.beforChangePage !== undefined) this.props.beforChangePage(goToPage, this.compareTwoPagesLavel(goToPage, fromPage)); | ||
| try { | ||
| if (document.getElementById(goToPage) === null || document.getElementById(goToPage) === undefined) { | ||
| console.error("goToPage not found: ", goToPage); | ||
| } | ||
| if (document.getElementById(fromPage) === null || document.getElementById(fromPage) === undefined) { | ||
| console.error("fromPage not found: ", fromPage); | ||
| } | ||
| //--נכנסים דף פנימה Up--// | ||
| var callbackFun = function callbackFun() { | ||
| fthis.funAnimationIn2(goToPage, fromPage); | ||
| document.getElementById(goToPage).removeEventListener("webkitAnimationEnd", callbackFun); | ||
| }; | ||
| if (this.props.beforChangePage !== undefined) this.props.beforChangePage(goToPage, this.compareTwoPagesLavel(goToPage, fromPage)); | ||
| document.getElementById(goToPage).addEventListener("webkitAnimationEnd", callbackFun, false); | ||
| //--נכנסים דף פנימה Up--// | ||
| var callbackFun = function callbackFun() { | ||
| try { | ||
| fthis.funAnimationIn2(goToPage, fromPage); | ||
| document.getElementById(goToPage).removeEventListener("webkitAnimationEnd", callbackFun); | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
| }; | ||
| this.busy = true; | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("hiddenPage"); | ||
| (0, _jquery2.default)("#" + goToPage).addClass("scrollPage showPage"); | ||
| (0, _jquery2.default)("#" + fromPage).css("z-index", 0); | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", 89); | ||
| document.getElementById(goToPage).addEventListener("webkitAnimationEnd", callbackFun, false); | ||
| this.busy = true; | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("hiddenPage"); | ||
| (0, _jquery2.default)("#" + goToPage).addClass("scrollPage showPage"); | ||
| (0, _jquery2.default)("#" + fromPage).css("z-index", 0); | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", 89); | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
| } | ||
@@ -164,12 +196,25 @@ }, { | ||
| value: function funAnimationIn2(goToPage, fromPage) { | ||
| (0, _jquery2.default)("#" + fromPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("animation", ""); | ||
| (0, _jquery2.default)("#" + fromPage).removeClass("showPage"); | ||
| (0, _jquery2.default)("#" + fromPage).removeClass("scrollPage"); | ||
| (0, _jquery2.default)("#" + fromPage).addClass("hiddenPage"); | ||
| this.busy = false; | ||
| this.setState({ nowPage: goToPage }); | ||
| var fthis = this; | ||
| if (this.props.onChangePage !== undefined) this.props.onChangePage(this.state.historyPages[this.state.historyPages.length - 1], this.compareTwoPagesLavel(goToPage, fromPage)); | ||
| try { | ||
| if (document.getElementById(goToPage) === null || document.getElementById(goToPage) === undefined) { | ||
| console.error("goToPage not found: ", goToPage); | ||
| } | ||
| if (document.getElementById(fromPage) === null || document.getElementById(fromPage) === undefined) { | ||
| console.error("fromPage not found: ", fromPage); | ||
| } | ||
| (0, _jquery2.default)("#" + fromPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("animation", ""); | ||
| (0, _jquery2.default)("#" + fromPage).removeClass("showPage"); | ||
| (0, _jquery2.default)("#" + fromPage).removeClass("scrollPage"); | ||
| (0, _jquery2.default)("#" + fromPage).addClass("hiddenPage"); | ||
| this.busy = false; | ||
| this.setState({ nowPage: goToPage }); | ||
| if (this.props.onChangePage !== undefined) this.props.onChangePage(fthis.state.historyPages[this.state.historyPages.length - 1], fthis.compareTwoPagesLavel(goToPage, fromPage)); | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
| } | ||
@@ -179,18 +224,34 @@ }, { | ||
| value: function funAnimationOut1(goToPage, fromPage) { | ||
| var _this2 = this; | ||
| //--חזרה בדפים Down--// | ||
| if (this.props.beforChangePage !== undefined) this.props.beforChangePage(goToPage, this.compareTwoPagesLavel(goToPage, fromPage)); | ||
| var fthis = this; | ||
| var callbackFun = function callbackFun() { | ||
| _this2.funAnimationOut2(goToPage, fromPage); | ||
| document.getElementById(fromPage).removeEventListener("webkitAnimationEnd", callbackFun); | ||
| }; | ||
| document.getElementById(fromPage).addEventListener("webkitAnimationEnd", callbackFun); | ||
| this.busy = true; | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", 0); | ||
| (0, _jquery2.default)("#" + fromPage).css("z-index", 89); | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("hiddenPage"); | ||
| (0, _jquery2.default)("#" + goToPage).addClass("scrollPage showPage"); | ||
| try { | ||
| if (document.getElementById(goToPage) === null || document.getElementById(goToPage) === undefined) { | ||
| console.error("goToPage not found: ", goToPage); | ||
| } | ||
| if (document.getElementById(fromPage) === null || document.getElementById(fromPage) === undefined) { | ||
| console.error("fromPage not found: ", fromPage); | ||
| // return; | ||
| } | ||
| if (this.props.beforChangePage !== undefined) fthis.props.beforChangePage(goToPage, fthis.compareTwoPagesLavel(goToPage, fromPage)); | ||
| var callbackFun = function callbackFun() { | ||
| try { | ||
| fthis.funAnimationOut2(goToPage, fromPage); | ||
| document.getElementById(fromPage).removeEventListener("webkitAnimationEnd", callbackFun); | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
| }; | ||
| document.getElementById(fromPage).addEventListener("webkitAnimationEnd", callbackFun); | ||
| this.busy = true; | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", 0); | ||
| (0, _jquery2.default)("#" + fromPage).css("z-index", 89); | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("hiddenPage"); | ||
| (0, _jquery2.default)("#" + goToPage).addClass("scrollPage showPage"); | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
| } | ||
@@ -200,15 +261,27 @@ }, { | ||
| value: function funAnimationOut2(goToPage, fromPage) { | ||
| (0, _jquery2.default)("#" + fromPage).css("animation", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("left", ""); | ||
| (0, _jquery2.default)("#" + fromPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + fromPage).removeClass("showPage"); | ||
| (0, _jquery2.default)("#" + fromPage).removeClass("scrollPage"); | ||
| (0, _jquery2.default)("#" + fromPage).addClass("hiddenPage"); | ||
| this.busy = false; | ||
| this.setState({ nowPage: goToPage }); | ||
| if (document.getElementById(goToPage) === null || document.getElementById(goToPage) === undefined) { | ||
| console.error("goToPage not found: ", goToPage); | ||
| } | ||
| if (document.getElementById(fromPage) === null || document.getElementById(fromPage) === undefined) { | ||
| console.error("fromPage not found: ", fromPage); | ||
| } | ||
| if (this.props.onChangePage !== undefined) this.props.onChangePage(this.state.historyPages[this.state.historyPages.length - 1], this.compareTwoPagesLavel(goToPage, fromPage)); | ||
| var fthis = this; | ||
| try { | ||
| (0, _jquery2.default)("#" + fromPage).css("animation", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("left", ""); | ||
| (0, _jquery2.default)("#" + fromPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + fromPage).removeClass("showPage"); | ||
| (0, _jquery2.default)("#" + fromPage).removeClass("scrollPage"); | ||
| (0, _jquery2.default)("#" + fromPage).addClass("hiddenPage"); | ||
| this.busy = false; | ||
| this.setState({ nowPage: goToPage }); | ||
| this.callbackFunOnChangePage(); | ||
| if (this.props.onChangePage !== undefined) this.props.onChangePage(fthis.state.historyPages[this.state.historyPages.length - 1], fthis.compareTwoPagesLavel(goToPage, fromPage)); | ||
| this.callbackFunOnChangePage(); | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
| } | ||
@@ -218,5 +291,10 @@ }, { | ||
| value: function compareTwoPagesLavel(goToPage, fromPage) { | ||
| if (this.listLevelPages[goToPage] < this.listLevelPages[fromPage]) return "Out"; | ||
| if (this.listLevelPages[goToPage] > this.listLevelPages[fromPage]) return "In"; | ||
| return "SameLevel"; | ||
| var fthis = this; | ||
| try { | ||
| if (this.listLevelPages[goToPage] < this.listLevelPages[fromPage]) return "Out"; | ||
| if (this.listLevelPages[goToPage] > this.listLevelPages[fromPage]) return "In"; | ||
| return "SameLevel"; | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
| } | ||
@@ -226,125 +304,141 @@ }, { | ||
| value: function changePage(goToPage, options) { | ||
| var _this3 = this; | ||
| var _this2 = this; | ||
| var fthis = this; | ||
| try { | ||
| this.props.children.forEach(function (child) { | ||
| if (child.props.kill) { | ||
| fthis.historyPages = fthis.historyPages.filter(function (x) { | ||
| return x !== child.key; | ||
| }); | ||
| //סיום האפליקציה, סגור | ||
| if (this.state.historyPages.length === 1 && goToPage === undefined) { | ||
| console.log('"window.navigator.app.exitApp()"'); | ||
| // fthis.showSwalLater ? | ||
| // fthis.myChildrens.swal.runSwal(true) : | ||
| window.navigator.app.exitApp(); | ||
| return; | ||
| } | ||
| }); | ||
| this.setState({ historyPages: this.historyPages }); | ||
| if (goToPage === undefined) { | ||
| console.error("navigator error: changePage function need goToPage parameter."); | ||
| return; | ||
| } | ||
| var fromPage = "" + this.historyPages[this.historyPages.length - 1] + ""; | ||
| if (fthis.listLevelPages[goToPage] === undefined) { | ||
| console.error("navigator error, at changePage. goToPage parameter not found in the pages list."); | ||
| return; | ||
| } | ||
| //סיום האפליקציה, סגור | ||
| if (this.state.historyPages.length === 1 && goToPage === undefined) { | ||
| console.log('"window.navigator.app.exitApp()"'); | ||
| // fthis.showSwalLater ? | ||
| // fthis.myChildrens.swal.runSwal(true) : | ||
| window.navigator.app.exitApp(); | ||
| return; | ||
| } | ||
| this.props.children.filter(function (child) { | ||
| return (typeof child === "undefined" ? "undefined" : _typeof(child)) === "object"; | ||
| }).forEach(function (child) { | ||
| if (child.props.kill) { | ||
| fthis.historyPages = fthis.historyPages.filter(function (x) { | ||
| return x !== child.key; | ||
| }); | ||
| } | ||
| }); | ||
| var aniTime = 250; | ||
| this.setState({ historyPages: this.historyPages }); | ||
| if (this.props.children.filter(function (x) { | ||
| return x.key === goToPage; | ||
| })[0].props.animationTimeInMS) { | ||
| aniTime = this.props.children.filter(function (x) { | ||
| var fromPage = "" + this.historyPages[this.historyPages.length - 1] + ""; | ||
| var aniTime = 250; | ||
| if (this.props.children.filter(function (x) { | ||
| return x.key === goToPage; | ||
| })[0].props.animationTimeInMS; | ||
| } else { | ||
| if (this.props.animationTimeInMS) aniTime = this.props.animationTimeInMS; | ||
| } | ||
| })[0].props.animationTimeInMS) { | ||
| aniTime = this.props.children.filter(function (x) { | ||
| return x.key === goToPage; | ||
| })[0].props.animationTimeInMS; | ||
| } else { | ||
| if (this.props.animationTimeInMS) aniTime = this.props.animationTimeInMS; | ||
| } | ||
| options = options === undefined ? [] : options; | ||
| options = options === undefined ? [] : options; | ||
| var _options = options, | ||
| _options$props = _options.props, | ||
| props = _options$props === undefined ? null : _options$props, | ||
| _options$animationIn = _options.animationIn, | ||
| animationIn = _options$animationIn === undefined ? this.componentTransitionIn[goToPage] ? this.componentTransitionIn[goToPage] : null : _options$animationIn, | ||
| _options$timeAnimatio = _options.timeAnimationInMS, | ||
| timeAnimationInMS = _options$timeAnimatio === undefined ? aniTime : _options$timeAnimatio, | ||
| _options$animationOut = _options.animationOut, | ||
| animationOut = _options$animationOut === undefined ? this.swipeRight ? "slideOutRight" : this.componentTransitionOut[fromPage] ? this.componentTransitionOut[fromPage] : null : _options$animationOut, | ||
| _options$callbackFun = _options.callbackFun, | ||
| callbackFun = _options$callbackFun === undefined ? null : _options$callbackFun; | ||
| var _options = options, | ||
| _options$props = _options.props, | ||
| props = _options$props === undefined ? null : _options$props, | ||
| _options$animationIn = _options.animationIn, | ||
| animationIn = _options$animationIn === undefined ? this.componentTransitionIn[goToPage] ? this.componentTransitionIn[goToPage] : null : _options$animationIn, | ||
| _options$timeAnimatio = _options.timeAnimationInMS, | ||
| timeAnimationInMS = _options$timeAnimatio === undefined ? aniTime : _options$timeAnimatio, | ||
| _options$animationOut = _options.animationOut, | ||
| animationOut = _options$animationOut === undefined ? this.swipeRight ? "slideOutRight" : this.componentTransitionOut[fromPage] ? this.componentTransitionOut[fromPage] : null : _options$animationOut, | ||
| _options$callbackFun = _options.callbackFun, | ||
| callbackFun = _options$callbackFun === undefined ? null : _options$callbackFun; | ||
| if (props !== null) { | ||
| // let oldProps = this.state.props; | ||
| var newProps = []; | ||
| newProps[goToPage] = props; | ||
| this.setState({ props: newProps }); | ||
| } else {} | ||
| if (props !== null) { | ||
| // let oldProps = this.state.props; | ||
| var newProps = []; | ||
| newProps[goToPage] = props; | ||
| this.setState({ props: newProps }); | ||
| } else {} | ||
| if (!this.busy) { | ||
| // const fthis = this; | ||
| if (!this.busy) { | ||
| // const fthis = this; | ||
| //--animation time defult | ||
| var timeAnimation = timeAnimationInMS; //param.timeAnimationInMS !== undefined && param.timeAnimationInMS !== null ? param.timeAnimationInMS : | ||
| // 250; //ms | ||
| //--animation time defult | ||
| var timeAnimation = timeAnimationInMS; //param.timeAnimationInMS !== undefined && param.timeAnimationInMS !== null ? param.timeAnimationInMS : | ||
| // 250; //ms | ||
| if (goToPage !== fromPage) { | ||
| //---ניהול חזרות----// | ||
| this.busy = true; | ||
| if (goToPage !== fromPage) { | ||
| //---ניהול חזרות----// | ||
| this.busy = true; | ||
| ///שמור היסטוריה | ||
| var new_historyPages = this.state.historyPages.slice(); | ||
| ///שמור היסטוריה | ||
| var new_historyPages = this.state.historyPages.slice(); | ||
| if (this.listLevelPages[goToPage] <= this.listLevelPages[fromPage]) { | ||
| //חוזרים אחורה, מחק את כל הדפים שהרמה שלהם גבוהה משלי. | ||
| //new_historyPages.splice(new_historyPages.length - 1, 1); | ||
| new_historyPages = new_historyPages.filter(function (x) { | ||
| return _this3.listLevelPages[x] < _this3.listLevelPages[goToPage]; | ||
| }); | ||
| } | ||
| new_historyPages.push(goToPage); | ||
| //שמירת שינויים בהיסטוריה | ||
| this.setState({ historyPages: new_historyPages }); | ||
| if (this.listLevelPages[goToPage] <= this.listLevelPages[fromPage]) { | ||
| //חוזרים אחורה, מחק את כל הדפים שהרמה שלהם גבוהה משלי. | ||
| //new_historyPages.splice(new_historyPages.length - 1, 1); | ||
| new_historyPages = new_historyPages.filter(function (x) { | ||
| return _this2.listLevelPages[x] < _this2.listLevelPages[goToPage]; | ||
| }); | ||
| } | ||
| new_historyPages.push(goToPage); | ||
| //שמירת שינויים בהיסטוריה | ||
| this.setState({ historyPages: new_historyPages }); | ||
| if (this.state.changeRoute) { | ||
| window.location.href = window.location.href.substr(0, window.location.href.lastIndexOf("/") + 1) + "#" + (goToPage !== this.state.homePageKey ? goToPage : ""); | ||
| } | ||
| if (this.state.changeRoute) { | ||
| window.location.href = window.location.href.substr(0, window.location.href.lastIndexOf("/") + 1) + "#" + (goToPage !== this.state.homePageKey ? goToPage : ""); | ||
| } | ||
| //----navigator and animation----/// | ||
| //----navigator and animation----/// | ||
| if (this.listLevelPages[goToPage] > this.listLevelPages[fromPage]) { | ||
| //--נכנסים דף פנימה Up--// | ||
| this.funAnimationIn1(goToPage, fromPage); | ||
| if (this.listLevelPages[goToPage] > this.listLevelPages[fromPage]) { | ||
| //--נכנסים דף פנימה Up--// | ||
| this.funAnimationIn1(goToPage, fromPage); | ||
| if (this.listLevelPages[goToPage] === 1) { | ||
| //Up from level 0 to level 1 | ||
| (0, _jquery2.default)("#" + goToPage).css("animation", (animationIn !== null && animationIn !== undefined ? animationIn : "slideInRight") + " " + timeAnimation + "ms"); | ||
| if (this.listLevelPages[goToPage] === 1) { | ||
| //Up from level 0 to level 1 | ||
| (0, _jquery2.default)("#" + goToPage).css("animation", (animationIn !== null && animationIn !== undefined ? animationIn : "slideInRight") + " " + timeAnimation + "ms"); | ||
| } else { | ||
| //else if (this.listLevelPages[goToPage] === 2) { | ||
| //Up from level 1 to level 2 | ||
| (0, _jquery2.default)("#" + goToPage).css("animation", (animationIn !== null && animationIn !== undefined ? animationIn : "zoomIn") + " " + timeAnimation + "ms"); | ||
| } | ||
| } else { | ||
| //else if (this.listLevelPages[goToPage] === 2) { | ||
| //Up from level 1 to level 2 | ||
| (0, _jquery2.default)("#" + goToPage).css("animation", (animationIn !== null && animationIn !== undefined ? animationIn : "zoomIn") + " " + timeAnimation + "ms"); | ||
| //--חזרה בדפים Down--// | ||
| this.funAnimationOut1(goToPage, fromPage); | ||
| if (this.listLevelPages[fromPage] === 1) { | ||
| //Down from level 1 to level 0 | ||
| (0, _jquery2.default)("#" + fromPage).css("animation", (animationOut !== null && animationOut !== undefined ? animationOut : "slideOutRight") + " " + timeAnimation + "ms"); | ||
| } else { | ||
| //else if (this.listLevelPages[goToPage] === 1) { | ||
| //Down from level 2 to level 1 | ||
| (0, _jquery2.default)("#" + fromPage).css("animation", (animationOut !== null && animationOut !== undefined ? animationOut : "zoomOut") + " " + timeAnimation + "ms"); | ||
| } | ||
| } | ||
| } else { | ||
| //--חזרה בדפים Down--// | ||
| this.funAnimationOut1(goToPage, fromPage); | ||
| if (this.listLevelPages[fromPage] === 1) { | ||
| //Down from level 1 to level 0 | ||
| (0, _jquery2.default)("#" + fromPage).css("animation", (animationOut !== null && animationOut !== undefined ? animationOut : "slideOutRight") + " " + timeAnimation + "ms"); | ||
| } else { | ||
| //else if (this.listLevelPages[goToPage] === 1) { | ||
| //Down from level 2 to level 1 | ||
| (0, _jquery2.default)("#" + fromPage).css("animation", (animationOut !== null && animationOut !== undefined ? animationOut : "zoomOut") + " " + timeAnimation + "ms"); | ||
| } | ||
| // //עיצוב כפתור חזרה | ||
| // if (goToPage === "home") { | ||
| // $('#navigatorBack').css('display', "none"); | ||
| // } else { | ||
| // $('#navigatorBack').css('display', "flex"); | ||
| // } | ||
| if (callbackFun !== undefined && callbackFun !== null) callbackFun(); | ||
| } | ||
| // //עיצוב כפתור חזרה | ||
| // if (goToPage === "home") { | ||
| // $('#navigatorBack').css('display', "none"); | ||
| // } else { | ||
| // $('#navigatorBack').css('display', "flex"); | ||
| // } | ||
| if (callbackFun !== undefined && callbackFun !== null) callbackFun(); | ||
| } | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
@@ -356,16 +450,56 @@ } | ||
| var fthis = this; | ||
| if (!fthis.state.changeRoute) { | ||
| // //---lock portrait | ||
| // window.screen.orientation.lock('portrait'); | ||
| try { | ||
| if (!fthis.state.changeRoute) { | ||
| // //---lock portrait | ||
| // window.screen.orientation.lock('portrait'); | ||
| //--back button in android | ||
| //--back button in android | ||
| document.addEventListener("backbutton", function (e) { | ||
| fthis.back(); | ||
| }, false); | ||
| } else { | ||
| //--back on change browser url | ||
| window.addEventListener("hashchange", function (e) { | ||
| fthis.changePage(window.location.href.substr(window.location.href.lastIndexOf("/") + 2) === "" ? fthis.state.homePageKey : window.location.href.substr(window.location.href.lastIndexOf("/") + 2)); | ||
| }); | ||
| document.addEventListener("backbutton", function (e) { | ||
| fthis.back(); | ||
| }, false); | ||
| } else { | ||
| //--back on change browser url | ||
| window.addEventListener("hashchange", function () { | ||
| var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(e) { | ||
| return regeneratorRuntime.wrap(function _callee$(_context) { | ||
| while (1) { | ||
| switch (_context.prev = _context.next) { | ||
| case 0: | ||
| _context.t0 = this.props && this.props.beforBack; | ||
| if (!_context.t0) { | ||
| _context.next = 5; | ||
| break; | ||
| } | ||
| _context.next = 4; | ||
| return this.props.beforBack(); | ||
| case 4: | ||
| _context.t0 = _context.sent; | ||
| case 5: | ||
| if (!_context.t0) { | ||
| _context.next = 7; | ||
| break; | ||
| } | ||
| fthis.changePage(window.location.href.substr(window.location.href.lastIndexOf("/") + 2) === "" ? fthis.state.homePageKey : window.location.href.substr(window.location.href.lastIndexOf("/") + 2)); | ||
| case 7: | ||
| case "end": | ||
| return _context.stop(); | ||
| } | ||
| } | ||
| }, _callee, this); | ||
| })); | ||
| return function (_x) { | ||
| return _ref.apply(this, arguments); | ||
| }; | ||
| }()); | ||
| } | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
@@ -375,25 +509,70 @@ } | ||
| key: "back", | ||
| value: function back(options) { | ||
| var _this4 = this; | ||
| value: function () { | ||
| var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(options) { | ||
| var fthis; | ||
| return regeneratorRuntime.wrap(function _callee2$(_context2) { | ||
| while (1) { | ||
| switch (_context2.prev = _context2.next) { | ||
| case 0: | ||
| fthis = this; | ||
| _context2.t0 = this.props && this.props.beforBack; | ||
| this.props.children.forEach(function (child) { | ||
| if (child.props.kill) { | ||
| _this4.historyPages = _this4.historyPages.filter(function (x) { | ||
| return x !== child.key; | ||
| }); | ||
| } | ||
| }); | ||
| this.setState({ historyPages: this.historyPages }); | ||
| if (!_context2.t0) { | ||
| _context2.next = 6; | ||
| break; | ||
| } | ||
| //--- | ||
| if (options === null || options === undefined) { | ||
| this.changePage(this.state.historyPages[this.state.historyPages.length - 2]); | ||
| } else { | ||
| this.changePage(this.state.historyPages[this.state.historyPages.length - 2], options); | ||
| _context2.next = 5; | ||
| return this.props.beforBack(); | ||
| case 5: | ||
| _context2.t0 = _context2.sent; | ||
| case 6: | ||
| if (!_context2.t0) { | ||
| _context2.next = 9; | ||
| break; | ||
| } | ||
| console.log("navigator back with options: ", options); | ||
| try { | ||
| fthis.props.children.forEach(function (child) { | ||
| if (child.props.kill) { | ||
| fthis.historyPages = fthis.historyPages.filter(function (x) { | ||
| return x !== child.key; | ||
| }); | ||
| } | ||
| }); | ||
| fthis.setState({ historyPages: fthis.historyPages }); | ||
| //--- | ||
| if (options === null || options === undefined) { | ||
| console.log("bact=> changePage to: ", fthis.state.historyPages[fthis.state.historyPages.length - 2]); | ||
| fthis.changePage(fthis.state.historyPages[fthis.state.historyPages.length - 2]); | ||
| } else { | ||
| fthis.changePage(fthis.state.historyPages[fthis.state.historyPages.length - 2], options); | ||
| } | ||
| } catch (error) { | ||
| fthis.onError(error); | ||
| } | ||
| case 9: | ||
| case "end": | ||
| return _context2.stop(); | ||
| } | ||
| } | ||
| }, _callee2, this); | ||
| })); | ||
| function back(_x2) { | ||
| return _ref2.apply(this, arguments); | ||
| } | ||
| } | ||
| return back; | ||
| }() | ||
| }, { | ||
| key: "render", | ||
| value: function render() { | ||
| var _this5 = this; | ||
| var _this3 = this; | ||
@@ -417,78 +596,74 @@ var fthis = this; | ||
| return Array.isArray(this.props.children) ? this.props.children.map(function (child) { | ||
| if (child.props.kill) { | ||
| fthis.historyPages = fthis.historyPages.filter(function (x) { | ||
| return x !== child.key; | ||
| }); | ||
| return Array.isArray(this.props.children) ? this.props.children.filter(function (child) { | ||
| return (typeof child === "undefined" ? "undefined" : _typeof(child)) === "object" && !child.props.kill; | ||
| }).map(function (child) { | ||
| return _react2.default.createElement( | ||
| "div", | ||
| { | ||
| // onTouchStart={(e) => { | ||
| return _react2.default.createElement("div", null); | ||
| } else { | ||
| return _react2.default.createElement( | ||
| "div", | ||
| { | ||
| // onTouchStart={(e) => { | ||
| // }} | ||
| // }} | ||
| onTouchMove: function onTouchMove(e) { | ||
| if (child.props.backOnSwipeRight && !fthis.swipeRight) { | ||
| if (e.touches[0].clientX < 0.2 * innerWidth) { | ||
| fthis.touchBackPage = nowPage; | ||
| fthis.swipeRight = true; | ||
| fthis.setState({ | ||
| swipeRightStart_x: e.touches[0].clientX | ||
| }); | ||
| onTouchMove: function onTouchMove(e) { | ||
| if (child.props.backOnSwipeRight && !fthis.swipeRight) { | ||
| if (e.touches[0].clientX < 0.2 * innerWidth) { | ||
| fthis.touchBackPage = nowPage; | ||
| fthis.swipeRight = true; | ||
| fthis.setState({ swipeRightStart_x: e.touches[0].clientX }); | ||
| var goToPage = _this3.state.historyPages[_this3.state.historyPages.length - 2]; | ||
| var goToPage = _this5.state.historyPages[_this5.state.historyPages.length - 2]; | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", 0); | ||
| (0, _jquery2.default)("#" + nowPage).css("z-index", 89); | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("hiddenPage"); | ||
| (0, _jquery2.default)("#" + goToPage).addClass("showPage overflow_Y_hidden"); | ||
| } | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", 0); | ||
| (0, _jquery2.default)("#" + nowPage).css("z-index", 89); | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("hiddenPage"); | ||
| (0, _jquery2.default)("#" + goToPage).addClass("showPage overflow_Y_hidden"); | ||
| } | ||
| if (fthis.swipeRight) { | ||
| fthis.setState({ | ||
| swipeRight_x: e.touches[0].clientX - fthis.state.swipeRightStart_x <= 0 ? 1 : e.touches[0].clientX - fthis.state.swipeRightStart_x | ||
| }); | ||
| } | ||
| }, | ||
| onTouchEnd: function onTouchEnd(e) { | ||
| var goToPage = _this5.state.historyPages[_this5.state.historyPages.length - 2]; | ||
| } | ||
| if (fthis.swipeRight) { | ||
| fthis.setState({ | ||
| swipeRight_x: e.touches[0].clientX - fthis.state.swipeRightStart_x <= 0 ? 1 : e.touches[0].clientX - fthis.state.swipeRightStart_x | ||
| }); | ||
| } | ||
| }, | ||
| onTouchEnd: function onTouchEnd(e) { | ||
| var goToPage = _this3.state.historyPages[_this3.state.historyPages.length - 2]; | ||
| if (fthis.swipeRight && fthis.state.swipeRight_x > 0.25 * innerWidth) { | ||
| fthis.callbackFunOnChangePage = function () { | ||
| (0, _jquery2.default)("#" + fthis.touchBackPage).css("left", ""); | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("overflow_Y_hidden"); | ||
| fthis.setState({ swipeRight_x: 0 }); | ||
| fthis.swipeRight = false; | ||
| fthis.touchBackPage = ""; | ||
| fthis.callbackFunOnChangePage = function () {}; | ||
| }; | ||
| // fthis.touchBackPage = nowPage; | ||
| fthis.back(); | ||
| } else { | ||
| (0, _jquery2.default)("#" + nowPage).css("left", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + nowPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("showPage"); | ||
| (0, _jquery2.default)("#" + goToPage).addClass("hiddenPage"); | ||
| if (fthis.swipeRight && fthis.state.swipeRight_x > 0.25 * innerWidth) { | ||
| fthis.callbackFunOnChangePage = function () { | ||
| (0, _jquery2.default)("#" + fthis.touchBackPage).css("left", ""); | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("overflow_Y_hidden"); | ||
| fthis.setState({ swipeRight_x: 0 }); | ||
| fthis.swipeRight = false; | ||
| fthis.touchBackPage = ""; | ||
| } | ||
| fthis.callbackFunOnChangePage = function () {}; | ||
| }; | ||
| // } | ||
| }, | ||
| style: { | ||
| left: fthis.swipeRight ? fthis.touchBackPage === child.key ? fthis.state.swipeRight_x : "" : "", | ||
| backgroundColor: child.props.backgroundColor ? child.props.backgroundColor : "#fff", | ||
| height: child.props.height ? child.props.height : fthis.props.height ? _this5.props.height : "100%" | ||
| }, | ||
| id: child.key, | ||
| key: child.key, | ||
| className: fthis.state.startPage === child.key ? "showPage scrollPage" : "hiddenPage" | ||
| // fthis.touchBackPage = nowPage; | ||
| fthis.back(); | ||
| } else { | ||
| (0, _jquery2.default)("#" + nowPage).css("left", ""); | ||
| (0, _jquery2.default)("#" + goToPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + nowPage).css("z-index", ""); | ||
| (0, _jquery2.default)("#" + goToPage).removeClass("showPage"); | ||
| (0, _jquery2.default)("#" + goToPage).addClass("hiddenPage"); | ||
| fthis.setState({ swipeRight_x: 0 }); | ||
| fthis.swipeRight = false; | ||
| fthis.touchBackPage = ""; | ||
| } | ||
| // } | ||
| }, | ||
| nowPage === child.key || fthis.state.historyPages.includes(child.key) || child.props.alwaysLive ? _react2.default.cloneElement(child, fthis.state.props[child.key], child.props.children) : null | ||
| ); | ||
| } | ||
| style: { | ||
| left: fthis.swipeRight ? fthis.touchBackPage === child.key ? fthis.state.swipeRight_x : "" : "", | ||
| backgroundColor: child.props.backgroundColor ? child.props.backgroundColor : "#fff", | ||
| height: child.props.height ? child.props.height : fthis.props.height ? _this3.props.height : "100%" | ||
| }, | ||
| id: child.key, | ||
| key: child.key, | ||
| className: fthis.state.startPage === child.key ? "showPage scrollPage" : "hiddenPage" | ||
| }, | ||
| nowPage === child.key || fthis.state.historyPages.includes(child.key) || child.props.alwaysLive ? _react2.default.cloneElement(child, fthis.state.props[child.key], child.props.children) : null | ||
| ); | ||
| }) : _react2.default.createElement( | ||
@@ -495,0 +670,0 @@ "div", |
| { | ||
| "name": "mobile-navigation-controller", | ||
| "version": "1.3.9", | ||
| "version": "1.4.0", | ||
| "description": "Navigator for JavaScript mobile app, This will help you to manage your pages history in the app and change pages with animation.", | ||
@@ -77,5 +77,8 @@ "main": "dist/index.js", | ||
| "webpack": "^4.32.2", | ||
| "webpack-cli": "^3.3.2", | ||
| "webpack-dev-server": "^3.4.1" | ||
| "webpack-cli": "^3.3.12", | ||
| "webpack-dev-server": "^3.11.0" | ||
| }, | ||
| "dependencies": { | ||
| "deep-equal": "^2.0.3" | ||
| } | ||
| } |
@@ -107,2 +107,9 @@ # mobile-navigation-controller | ||
| </tr> | ||
| <tr> | ||
| <td>beforBack</td> | ||
| <td>function</td> | ||
| <td>optional</td> | ||
| <td>-</td> | ||
| <td>For android backbutton only. beforBack={() =>{ ( do something and return false to stop back page process or retun true. )}} </td> | ||
| </tr> | ||
| <tr> | ||
@@ -109,0 +116,0 @@ <td>beforChangePage</td> |
Sorry, the diff of this file is too big to display
No alert changes
Improved metrics
- Total package byte prevSize
- increased by4.41%
1287705
- Lines of code
- increased by4.13%
30092
- Number of lines in readme file
- increased by2.67%
269
Worsened metrics
- Dependency count
- increased by33.33%
4
Dependency changes
+ Addeddeep-equal@^2.0.3
+ Addedarray-buffer-byte-length@1.0.1(transitive)
+ Addedavailable-typed-arrays@1.0.7(transitive)
+ Addedcall-bind@1.0.7(transitive)
+ Addeddeep-equal@2.2.3(transitive)
+ Addeddefine-data-property@1.1.4(transitive)
+ Addeddefine-properties@1.2.1(transitive)
+ Addedes-define-property@1.0.0(transitive)
+ Addedes-errors@1.3.0(transitive)
+ Addedes-get-iterator@1.1.3(transitive)
+ Addedfor-each@0.3.3(transitive)
+ Addedfunction-bind@1.1.2(transitive)
+ Addedfunctions-have-names@1.2.3(transitive)
+ Addedget-intrinsic@1.2.4(transitive)
+ Addedgopd@1.0.1(transitive)
+ Addedhas-bigints@1.0.2(transitive)
+ Addedhas-property-descriptors@1.0.2(transitive)
+ Addedhas-proto@1.0.3(transitive)
+ Addedhas-symbols@1.0.3(transitive)
+ Addedhas-tostringtag@1.0.2(transitive)
+ Addedhasown@2.0.2(transitive)
+ Addedinternal-slot@1.0.7(transitive)
+ Addedis-arguments@1.1.1(transitive)
+ Addedis-array-buffer@3.0.4(transitive)
+ Addedis-bigint@1.0.4(transitive)
+ Addedis-boolean-object@1.1.2(transitive)
+ Addedis-callable@1.2.7(transitive)
+ Addedis-date-object@1.0.5(transitive)
+ Addedis-map@2.0.3(transitive)
+ Addedis-number-object@1.0.7(transitive)
+ Addedis-regex@1.1.4(transitive)
+ Addedis-set@2.0.3(transitive)
+ Addedis-shared-array-buffer@1.0.3(transitive)
+ Addedis-string@1.0.7(transitive)
+ Addedis-symbol@1.0.4(transitive)
+ Addedis-weakmap@2.0.2(transitive)
+ Addedis-weakset@2.0.3(transitive)
+ Addedisarray@2.0.5(transitive)
+ Addedobject-inspect@1.13.1(transitive)
+ Addedobject-is@1.1.6(transitive)
+ Addedobject-keys@1.1.1(transitive)
+ Addedobject.assign@4.1.5(transitive)
+ Addedpossible-typed-array-names@1.0.0(transitive)
+ Addedregexp.prototype.flags@1.5.2(transitive)
+ Addedset-function-length@1.2.2(transitive)
+ Addedset-function-name@2.0.2(transitive)
+ Addedside-channel@1.0.6(transitive)
+ Addedstop-iteration-iterator@1.0.0(transitive)
+ Addedwhich-boxed-primitive@1.0.2(transitive)
+ Addedwhich-collection@1.0.2(transitive)
+ Addedwhich-typed-array@1.1.15(transitive)