diff --git a/web/src/app/css/base.css b/web/src/app/css/base.css index 7597192..7fa9379 100644 --- a/web/src/app/css/base.css +++ b/web/src/app/css/base.css @@ -33,3 +33,20 @@ body { @media (max-width: 400px) { .media-max400 { display: none } } @media (max-width: 500px) { .media-max500 { display: none } } + +.slide-from-right { + position: relative; + animation: animateright 0.1s; +} +.slide-from-left { + position: relative; + animation: animateleft 0.1s; +} +@keyframes animateright { + from { right: -200px; opacity: .5 } + to { right: 0; opacity:1 } +} +@keyframes animateleft { + from { left: -200px; opacity: .5 } + to { left: 0; opacity:1 } +} diff --git a/web/src/app/js/base.js b/web/src/app/js/base.js index 85be25c..5c4417c 100644 --- a/web/src/app/js/base.js +++ b/web/src/app/js/base.js @@ -10,6 +10,7 @@ function dragElement(elmnt, options, onStopDrag) { function dragMouseDown(e) { e = e || window.event; e.preventDefault(); + e.stopPropagation(); const isMobile = e.touches !== undefined; const cx = !isMobile ? e.clientX : e.touches[0].clientX * 1.3; const cy = !isMobile ? e.clientY : e.touches[0].clientY * 1.3; @@ -30,6 +31,7 @@ function dragElement(elmnt, options, onStopDrag) { function elementDrag(e) { e = e || window.event; e.preventDefault(); + e.stopPropagation(); const isMobile = e.touches !== undefined; const cx = !isMobile ? e.clientX : e.touches[0].clientX * 1.3; const cy = !isMobile ? e.clientY : e.touches[0].clientY * 1.3; diff --git a/web/src/app/js/carousel.js b/web/src/app/js/carousel.js index b2d8eab..916351a 100644 --- a/web/src/app/js/carousel.js +++ b/web/src/app/js/carousel.js @@ -21,15 +21,17 @@ app.carousel = { const elements = mod._elements(); const current = elements[mod._current]; const next = elements[i]; - if (mod._animation !== undefined) { - // TODO: animation run here - } + var direction = 'none'; + if (i > mod._current) + direction = 'right'; + else if (i < mod._current) + direction = 'left'; for (var j = 0; j < elements.length; j++) elements[j].style = 'display: none'; next.removeAttribute('style'); mod._current = i; if (mod._onSetEvent !== undefined) - mod._onSetEvent(); + mod._onSetEvent(direction); return true; }, }; diff --git a/web/src/app/js/pages/meet.js b/web/src/app/js/pages/meet.js index dc14015..167ecb5 100644 --- a/web/src/app/js/pages/meet.js +++ b/web/src/app/js/pages/meet.js @@ -46,15 +46,16 @@ app.pages.meet = { _parent: function() { return document.querySelector('#page-meet #content') }, _elements: function() { return app.pages.meet.carousel._parent().querySelectorAll('.meet.item') }, _size: function() { return app.pages.meet.carousel._elements().length }, - _onSetEvent: function() { + _onSetEvent: function(direction) { app.storage.set('status_meet_index', app.pages.meet.carousel._current); - app.pages.meet.carousel.setDragEvent(); + app.pages.meet.carousel.setDragEvent(direction); }, set: function(i) { return app.carousel.set(app.pages.meet.carousel, i) }, next: function() { return app.carousel.next(app.pages.meet.carousel) }, prev: function() { return app.carousel.prev(app.pages.meet.carousel) }, - setDragEvent: function() { + setDragEvent: function(direction) { + direction = direction || 'none'; const current = app.pages.meet.carousel._elements()[ app.pages.meet.carousel._current]; var options = { y: false, return2start: true, fadeOut: true }; @@ -62,6 +63,15 @@ app.pages.meet = { options.right = false; if (!app.carousel.hasNext(app.pages.meet.carousel)) options.left = false; + if (direction === 'left') { + current.classList.add('slide-from-left'); + setTimeout(function() { + current.classList.remove('slide-from-left')}, 100); + } else if (direction === 'right') { + current.classList.add('slide-from-right'); + setTimeout(function() { + current.classList.remove('slide-from-right')}, 100); + } dragElement(current, options, function(a1, a2) { const ix = a1[0]; const fx = a2[0];