From 2851fb4b4545e4fa8262d510f7ffe5e9f3b3997c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F=20=D0=9A=D0=BE=D0=BB=D0=B4=D1=83?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Fri, 24 Nov 2017 21:35:14 +0200 Subject: [PATCH] Fully removed stack from program (issue #3) --- CSS/RISE.CSS | 8 ------ EXAMPLE.HTML | 3 +- JS/RISE.JS | 79 ++++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 66 insertions(+), 24 deletions(-) diff --git a/CSS/RISE.CSS b/CSS/RISE.CSS index f7301c2..bbbba78 100644 --- a/CSS/RISE.CSS +++ b/CSS/RISE.CSS @@ -8,17 +8,9 @@ TRANSITION:NONE !IMPORTANT; } -.RISE__SHIELD -{ - POSITION:ABSOLUTE; - WIDTH:100%; - HEIGHT:100%; -} - .RISE__CONTAINER { POSITION:RELATIVE; - DISPLAY:FLEX; WIDTH:100%; } diff --git a/EXAMPLE.HTML b/EXAMPLE.HTML index 08878a8..52ebdbc 100644 --- a/EXAMPLE.HTML +++ b/EXAMPLE.HTML @@ -63,6 +63,7 @@ { tabId++; var tab = interface.createTab(tabId); + tab.dataset.previous = tabId - 1; renderTab(tab); interface.showTab(tabId); } @@ -74,7 +75,7 @@ function hideTab(event) { - interface.hideTab(event.target.parentNode.parentNode.dataset.id); + interface.showTab(event.target.parentNode.parentNode.dataset.previous); } function renderTab(tab) diff --git a/JS/RISE.JS b/JS/RISE.JS index 4a39c36..293b4eb 100644 --- a/JS/RISE.JS +++ b/JS/RISE.JS @@ -31,7 +31,6 @@ function Interface(parent, params) var timer = undefined, current = undefined, - stack = [], order = [], properties = { @@ -85,8 +84,8 @@ function Interface(parent, params) /** * Returns a tab name * - * @param {Element} - DOM-Element in tab - * @return {Element} - name of the found tab + * @param {Element} element - DOM-Element in tab + * @return {Element} - name of the found tab */ this.getTabName = function(element) { @@ -106,6 +105,36 @@ function Interface(parent, params) return undefined; } + /** + * Return a direction of swiping + * + * @param {String} start - name of the tab where swipe starts + * @param {String} end - name of the tab where swipe ends + * @return {Number} - 1 if swipe is to right, 0 if start equals end, else -1 + */ + function getSwipeDirection(start, end) + { + if (DOM.tabs[start] && DOM.tabs[end]) + { + if (order.indexOf(start) < order.indexOf(end)) + { + return 1; + } + else if (start == end) + { + return 0; + } + else + { + return -1; + } + } + else + { + console.warn("ERROR: no tab called " + start + " or " + end); + } + } + /** * Shows tab on DOM * @@ -115,18 +144,45 @@ function Interface(parent, params) { if (DOM.tabs[name]) { + let previous = current, + to = {x: undefined, y: undefined}, + from = {x: undefined, y: undefined}, + direction = getSwipeDirection(current, name); - stack.push(name); + console.log(direction); + current = name; DOM.tabs[name].removeCSS(CSS.hidden); + if (direction == 1) + { + to.x = - DOM.tabs[current].offsetLeft + "PX"; + to.y = - DOM.tabs[current].offsetTop + "PX"; + from.x = "0PX"; + from.y = "0PX"; + } + else if (direction == -1) + { + from.x = - DOM.tabs[previous].offsetLeft + "PX"; + from.y = - DOM.tabs[previous].offsetTop + "PX"; + to.x = "0PX"; + to.y = "0PX"; + } + + DOM.container.style.left = from.x; + DOM.container.style.top = from.y; + var layoutTrigger = DOM.container.offsetHeight; DOM.container.removeCSS(CSS.noAnimation); - DOM.container.style.left = - DOM.tabs[name].offsetLeft + "PX"; - DOM.container.style.top = - DOM.tabs[name].offsetTop + "PX"; + DOM.container.style.left = to.x; + DOM.container.style.top = to.y; - if (DOM.tabs[stack[stack.length - 2]]) + if (DOM.tabs[current]) { setTimeout((function() { - DOM.tabs[stack[stack.length - 2]].setCSS(CSS.hidden); + if (DOM.tabs[previous]) + { + DOM.tabs[previous].setCSS(CSS.hidden); + } + DOM.container.setCSS(CSS.noAnimation); DOM.container.style.left = "0PX"; DOM.container.style.top = "0PX"; @@ -176,14 +232,7 @@ function Interface(parent, params) }).bind(this), properties.duration * 1000);*/ } - let indexInStack = stack.indexOf(name); - order.splice(order.indexOf(name), 1); - while (indexInStack != -1) - { - stack.splice(indexInStack, 1); - indexInStack = stack.indexOf(name); - } } else