//【如何做一個簡單的手機端頁面的翻頁】
//第一步：建立移動端頁面內  HTML + CSS  【注】可用彈性佈局   但需要注意的是  外層盒子的定位
//第二步： 思考問題  要實現怎樣的效果？
//1. 手指滑動時觸發事件【左右】兩個方向  
//2.點選footer部分的下標實現切換效果 
//3.點選footer部分的下標實現下標顏色變化

//第三步；編寫JS程式碼

 //新增監聽事件

document.addEventListener('DOMContentLoaded',function(){

    //   建立一個數組用於呼叫陣列屬性值     或者  方便【數值】的更改    【注】可以用陣列 /物件  但物件更方便我們的使用
var postion = {
startX:0,
startY:0,
endX:0,
endY:0,
baseMoveX: window.innerHeight / 3,
index:1
}
 
//     獲取頁面元素  比不可少的一個步驟
var tab2  = document.getElementsByClassName('tab2')[0];//獲取到ul 思路： 用ul定位來實現頁面的切換 （ul的寬度設定成  innerWind * 4）
var li2   = document.getElementsByClassName('li2');//索引值不確定  且不寫先
var tab3 = document.querySelector('#tab3');

var li3  = document.querySelectorAll('.li3');

    // 設定預設的第一個下標的顏色
    li3[0].style.color = '#58bc58';
    //  封裝一個函式用於清空下標 的顏色
    function delite(){
    for(var i = 0;i < li3.length; i++){
li3[i].style.color = '';
} 
    }


// 新增手指事件【注】 這裡的原理和拖拽一模一樣  （手指按下和 手指移動是 時  必須給給記錄游標位置）
//  手指按下時觸發   記錄滑鼠移動座標
tab2.addEventListener('touchstart',function(e){
postion.startX = e.touches[0].clientX;
postion.startY = e.touches[0].clientY;
})

//  手指拖動時觸發   記錄滑鼠移動座標
tab2.addEventListener('touchmove',function(en){
postion.endX = en.touches[0].clientX;
postion.endY = en.touches[0].clientY;
move();   //當手指滑動時觸發函式   改變ul的定位

})

//  手指移開時 設定UL的定位 【注】有兩種情況   超過絕對值/不超過絕對值
tab2.addEventListener('touchend',function(vent){
  
   move(true);  //手指鬆開時呼叫呼叫函（函式用於判斷 ：滑動的距離是否超過絕對值       1.超過  (滑動到下一頁) 2.不超過 (位置定位在當前頁)）
})

function move(_end){
 var x = postion.startX - postion.endX;//  定義X軸滑動時的絕對值
 var y = postion.startY - postion.endY;
 
 //滑動效果
    if(postion.index < li2.length){//  第一種情況==========left    [用if 判斷：索引值是 1-3的時候可以 向左滑動  改變 ul的定位 【注】因為超出會造成使用者滑動出現空白頁面   ]
   
           
   if(x > 0){// 計算公式：  起點位置 - 終點位置   = x;  如果 x > 0  說明滑動的方向是左邊
   //to left  
               tab2.style.left = `${((postion.index - 1) * innerWidth + x) * -1}px` ;//  滑動是改變ul定位  【注】此時的 X為正值 
               
   if(_end){//   手指鬆開時判讀函式 是否為true  是就執行   否不執行
   
      delite();// 清空上一頁下標顏色
           
   
   if(Math.abs(x) >= postion.baseMoveX){// .判斷：if 滑動的距離或者等於  移動的基礎值  那麼翻頁到下一頁   （否則 保留位置是當前頁）  【注】Math.abs(x)裡面的   X 是【正數】
               
           tab2.style.left = `${postion.index * innerWidth *-1}px`;//1*375*-1.......
           li3[postion.index].style.color= '#58BC58';//寫在前面  ul到第幾頁  就給當天 li對應的 下標加顏色
           postion.index ++;//【注】【重點】【重點】變數跟新  index  【解】變數跟新的作用：第一個滑動超過 絕對值 索引值變為2  第二次超過索引值變為3  。。。。。。（用於計算ul的定位）
      
       }
    
   else{
   tab2.style.left = `${(postion.index -1)*innerWidth *-1}px`;//0*375*-1.......
   li3[postion.index-1].style.color = '#58BC58';//給當前頁的下標 新增下標顏色   【注】定位的下標 與 改變顏色的下標是一樣的
   }
          
   }
   
   }
   
    }      
    if(postion.index  >  1 && postion.index < li2.length + 1){//第二種情況===========right  【注】此時的index = 1  為了確保在第二張和第四次 才能往右滑動            
   if(x < 0){//計算公式：  起點位置 - 終點位置   = x;  如果 x < 0  說明滑動的方向是右邊
   
               tab2.style.left = `${((postion.index - 1) * innerWidth + x) * -1}px`;//滑動是改變ul的定位
    if(_end){//手指鬆開時判讀函式 是否為true  是就執行   否不執行
       delite();//清空上一頁下標顏色                                    
   if(Math.abs(x) >= postion.baseMoveX){// 判斷：if 滑動的距離或者等於  移動的基礎值  那麼翻頁到下一頁   （否則 保留位置是當前頁）  【注】Math.abs(x)裡面的   X 是【負數】
   
           tab2.style.left = `${(postion.index -2)* innerWidth *-1}px`;//【注】如：在第二張圖片滑動時  ul的定位 0,0點   計算公式：（2-2）*375 *-1 = 0；
           li3[postion.index -2].style.color = '#58BC58';//給相同索引值的下標新增顏色
           postion.index --; //變數跟新
       }
   else{
   tab2.style.left = `${(postion.index - 1)*innerWidth *-1}px`;//沒有超過絕對值是  定位在當前位置
   li3[postion.index - 1].style.color= '#58BC58';//改變 顏色
   }
 
}
   }      
}
if(y < 0){
   //to top
   }
if(y >0 ){
   //to dottom
 }
   }
 


//點選事件
click()
function click(){
  
   //新增自定義類名  【用來做下標】
for(var i =0;i<tab3.children.length; i++){
    li3[i].dataset.idx = i;// 0 1 2 3 
   
}

tab3.addEventListener('touchstart',function(e){
        e = e || window.event;//事件 event屬性
         var target = e.target || e.srcElement;//相容寫法
  
    if(target.className === 'li3'||target.parentNode.className ==='li3' ){//【注】為了確保 不管點選大子元素還是 li  都執行這段程式碼
var idx = target.parentNode.dataset.idx;//只寫了一種情況
tab2.style.left = `${idx* innerWidth *-1}px`;//index = 0 / 1/ 2/ 3 

delite();//清空座標顏色

       li3[idx].style.color= '#58BC58';//給當天下標新增顏色          
}
})
}


})