AngularJS-Ionic : create a swipeable horizonatlview which will update vertical view

Question

I want to create a UI for Android and iOS using angularjs and ionic. View is as below:

Explanation: In this view I want to have a horizontal strip (1 to 8 date displayed currently but it will be swipeable from day 1 of the month to last day of month) containing dates. This strip will be swipeable left and right. Each day will have some data which will be displayed in vertical list view. When user will swipe left or right on horizontal strip at the same time vertical data will update. Vertical list view will show data only of dates displayed in horizontal strip.

I am not sure how I can do it. Any pointer e.g. library/sample code etc will be really appreciated.

Thanks

Answer 1

i would recommend swiper , i used it before and i find it simple and easy to work with : http://idangero.us/swiper/ , http://idangero.us/swiper/get-started/

documentation : http://idangero.us/swiper/api/

Swiper is also a default slider component in Ionic Framework

quick overview :

you can configure it to display x slides at a time, and the one in the middle will always have the swiper-slide-active class, you have an event slideChange that's fired when the swiper-slide-active is changed, you can put in that whatever function you want ( maybe an ajax one to fetch the day's data ) it's just fired a bit too early so you need to wrap it in setTimeout of 1ms

i made a basic example according to you layout and here's a fiddle that you can play with and change it to your needs :

https://jsfiddle.net/o9u0qenk/15/ ( updated for the weeks ) https://jsfiddle.net/o9u0qenk/22/ ( updated for real time )

EDIT

to display the data in a range of 7 days, centeredSlides: true is removed so swiper-slide-active becomes the first slide on the left, so that's your startDate, add 6 to get the endDate

Edit 2

for tracking the days in real time, you can use the event sliderMove to detect whether the slider is moving and do some stuff while it does, and you can store the offsetLeft of each slide in an Array and loop through it when the user is swiping and comparing the values with the current offset of the swiper, then break when match not to continue through the loop

edited snippet :

var content = document.getElementById('content');
	
var currenOffset; // swiper's offset
var childOffset; // slide's offset
	
var startIndex; 
var endIndex;
	
var slides = document.getElementsByClassName('swiper-slide');
var slidesOffsets = [];
  
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 7,
  spaceBetween: 10,      
  on: {
    init: function () {
      setTimeout(function(){
        var startDay = document.getElementsByClassName('swiper-slide-active')[0].innerHTML;
        var endDay = parseInt(startDay) + 6 ;            
        content.innerHTML = '<div> Showing data for days ' + startDay + ' to ' + endDay + '</div>';
      }, 1);
    }
  }
});
	
swiper.on('slideChange', function () {
  setTimeout(function(){
    var startDay = document.getElementsByClassName('swiper-slide-active')[0].innerHTML;
    var endDay = parseInt(startDay) + 6 ;
    content.innerHTML = '<div> Showing data for days ' + startDay + ' to ' + endDay + '</div>';
  }, 1);
});


for(var i =0; i < slides.length; i++){
  slidesOffsets.push((slides[i].offsetLeft * -1) + 10);
}
	
swiper.on('sliderMove', function(e){
  currentOffset = this.translate;
		
  for(var i=0; i<slides.length; i++){
    if( slidesOffsets[i] <= currentOffset){				
      startIndex = i ;
      break;
    }
  }
		
  endIndex = startIndex + 6;
  content.innerHTML = '<div> Showing data for days ' + startIndex + ' to ' + endIndex +  '</div>';		
});

html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 80px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

#content{
  width: 100%;
	height: calc(100% - 80px);		
}
#content div{			
  margin: auto;
	text-align: center;
	padding-top: 50px;
	font-size: 30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.min.js"></script>
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">1</div>
      <div class="swiper-slide">2</div>
      <div class="swiper-slide">3</div>
      <div class="swiper-slide">4</div>
      <div class="swiper-slide">5</div>
      <div class="swiper-slide">6</div>
      <div class="swiper-slide">7</div>
      <div class="swiper-slide">8</div>
      <div class="swiper-slide">9</div>
      <div class="swiper-slide">10</div>
      <div class="swiper-slide">11</div>
      <div class="swiper-slide">12</div>
      <div class="swiper-slide">13</div>
      <div class="swiper-slide">14</div>
      <div class="swiper-slide">15</div>
      <div class="swiper-slide">16</div>
      <div class="swiper-slide">17</div>
      <div class="swiper-slide">18</div>
      <div class="swiper-slide">19</div>
      <div class="swiper-slide">20</div>
      <div class="swiper-slide">21</div>
      <div class="swiper-slide">22</div>
      <div class="swiper-slide">23</div>
      <div class="swiper-slide">24</div>
      <div class="swiper-slide">25</div>
      <div class="swiper-slide">26</div>
      <div class="swiper-slide">27</div>
      <div class="swiper-slide">28</div>
      <div class="swiper-slide">29</div>
      <div class="swiper-slide">30</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
	
	<div id="content">

	</div>

i hope this helps and good luck.

Final Expected outcome : https://jsfiddle.net/o9u0qenk/40/