Part 7 JavaScript – 主題(theme)的更新

學習資源：

最新源碼下載(2021/3/3) 源碼跟內文不一致，請從頭到尾跟著最新源碼做。(內文一直沒有時間更新)
目前的程式示範連結：index-7-1.html

這個單元學習，我們要透過"Change Theme"按鈕叫出色彩選擇對話框。在此之前，我們先做一件事，我們在顯示日期的序數詞時，忽略掉一件事，上標的字體大小應該變小(一般來說)，

我們針對元素進行css格式設定：

<style media="screen">
  sup {
      font-size: 50%;
  }
</style>

設定上標文字的大小比例為50%。測試沒問題後，將此css格式設定移至先前的css/main.css。我們在第3個單元學習中，已經把對話方塊寫好了，然後用closed的設定將對話方塊進行關閉，這個對話方塊有2個子元件：fav-color與make-note：

我們可用手動的方式將closed這個設定去除掉，此時，你會發現整個畫面依照在第3單元學習會進入灰暗顯示，接著，把fav-color裏的hidden設定去除掉，此時，我們設計的色彩選擇對話方塊就會顯示在畫面的正中間：

我們先做個程式練習，將modal這個對話框架方塊打開，以及將fav-color這個對話的hidden屬性去除掉：

<script language="JavaScript">
  updateData(); //更新日期相關資料
  var modal = document.getElementById("modal");
  modal.open = true;
  var template = document.getElementById("fav-color");
  template.removeAttribute("hidden");
</script>

我們在更新月曆畫面/表格後，加上上面4行直接打開色彩選擇的對話。 2021/10/07註記：一個DOM元素物件的無值的屬性(例：在月曆這個應用中，HTML標籤裏的open、hidden)可以透過指定true或false的方式加入到tag裏或從tag裏移除，比用setAttribute與 removeAtrribute更簡單：

// 打開色彩主題的對話方塊
function openFavColor(){
  let modal = document.getElementById("modal");
  modal.open = true; //為modal元素加上一個沒有值的open屬性
  let template = document.getElementById("fav-color");
  // template.removeAttribute("hidden");
  template.hidden = false; //為template元素移除掉一個hidden屬性
}

// 關閉色彩主題的對話方塊
function closeFavColor(){
  let modal = document.getElementById("modal");
  modal.open = false;
  let template = document.getElementById("fav-color");
  // template.setAttribute("hidden", "");
  template.hidden = true;
}

上面只是個測試，上面的動作必須透過按鈕"Change Theme"點擊來觸發，加入onClick事件指定(我們的月曆App有2個Change Theme按鈕，一個是landscape，一個是portrait：

<button id="theme-landscape" class="font button" onclick="openFavColor();">Change theme</button>

<button id="theme-portrait" class="font button color" onclick="openFavColor();">Change theme</button>

把開啟modal與fav-color的4行程式包裝在openFavColor()，搭配上面的函式呼叫，於是，我們完成了點擊"Change Theme"按鈕後，打開色彩選擇對話。

<script language="JavaScript">
  updateData(); //更新日期相關資料
  function openFavColor(){
    var modal = document.getElementById("modal");
    modal.open = true;
    var template = document.getElementById("fav-color");
    template.removeAttribute("hidden");
  }

</script>

接著，我們要透過"Update"這個按鈕來關閉色彩選擇對話方塊： 1．changeColor方法

<script language="JavaScript">
  updateData(); //更新日期相關資料
  function openFavColor(){
    var modal = document.getElementById("modal");
    modal.open = true;
    var template = document.getElementById("fav-color");
    template.removeAttribute("hidden");
  }
  function changeColor(){
    var modal = document.getElementById("modal");
    modal.open = false;
    var template = document.getElementById("fav-color");
    template.setAttribute("hidden", "hidden");
  }
</script>

2．Update按鈕事件

<button id="update-theme-button" class="button font" onclick="changeColor();">Update</button>

Fade in and out

JavaScript: fadeIn() and fadeOut() without jQuery (待增加對話方塊淡入與淡出特性) 目前的程式連結：index-7-2.html

勾選功能

勾選表示在一開始進行設計的時候，我們是第1個顏色-藍色加上一個元素

<div class="color-option">
    <div class="color-preview" id="blue" style="background-color: #1B19CD;"><i class="fas fa-check checkmark"></i></div>
    <h5>Blue</h5>
</div>

撰寫addCheckMark方法

function addCheckMark(color_name){
  var colorPreviews = document.getElementsByClassName("color-preview");

  for (let i = 0; i < colorPreviews.length; i++){
    if (colorPreviews[i].id == color_name) {
      console.log(colorPreviews[i].id + "," + color_name)
      colorPreviews[i].innerHTML = "<i class='fas fa-check checkmark'></i>";
    }
  }
}

上面這個方法先透過document.getElementsByClassName("color-preview")取得所有div類別名稱有"color-preview"的元素，由於文檔裏有多個元素都有同樣的類別名稱，所以此敘述會回傳一個元素的物件集合，此物件名稱我們命名為colorPreviews。接著，我們用一個for迴圈走訪colorPreviews這個集合物件，比對裏面的每一個物件是否其id名稱(也就是個別的顏色名稱)是否跟這個方法所接收到的color_name值相同，相同的話，我們就將 元素加入。 2022/07/26新增改寫(較簡單)

function addCheckMark(color_name){              
  let color_block = document.getElementById(color_name);
  if (color_block) color_block.innerHTML = '<i class="fas fa-check checkmark"></i>';
}

測試畫面如下：

邏輯上，我們要加上勾選符號時，應先將原本的勾選符號除掉，再加上新的勾選。 addCheckMark方法修改如下：

function addCheckMark(color_name){
  // alert("你按了" + color_name + " DIV");
  //清除/移除類別有"checkmark"的元素，也就是清除掉勾選的顯示
  var checkmarks = document.getElementsByClassName("checkmark");
  //找到有勾選符號的元素，以單選來說，整個有勾選符號的元素只會有一個
  checkmarks[0].parentNode.innerHTML = ""; 
        
  //加上勾選的顯示
  var colorPreviews = document.getElementsByClassName("color-preview");
  for (let i = 0; i < colorPreviews.length; i++){  //走訪12個有class=color-preview的元素
    if (colorPreviews[i].id == color_name) { //Bingo          
      colorPreviews[i].innerHTML = "<i class='fas fa-check checkmark'></i>";
      break; //中斷/跳開for迴圈，Bingo之後，後面的元素就不用再比對了！
    }
  }      
}

2022/07/26新增改寫(較簡單)

function addCheckMark(color_name){
  let color_blocks = document.getElementsByClassName("color-preview");
  for (i = 0; i < color_blocks.length ; i++ ) color_blocks[i].innerHTML = "";
          
  let color_block = document.getElementById(color_name);
  if (color_block) color_block.innerHTML = '<i class="fas fa-check checkmark"></i>';
}

目前的程式連結：index-7-3.html

接下來，我們要根據所選的顏色，按下Update按鈕後，進行顏色的變換。步驟大概為： 1．取得勾選的色彩名稱我們在程式裏設置一個全域物件變數currentColor，然後使用者勾選色彩時，會呼叫addCheckMark(color_name)，其中color_name就是我們選取的色彩名稱，我們只要在這個函式裏面把color_name指定給currentColor.name就行了。

var currentColor = { name : "blue", color : "#1B19CD", off_color : "#7c7EFB" };
//用來紀錄目前主題的色彩名稱、色彩編碼
function addCheckMark(color_name){
  currentColor.name = color_name; //將勾選的色彩名稱color_name指定給全域變數currentColorName，以便在changeColor方法裏使用，來設定整個主題的色彩。
  var checkmarks = document.getElementsByClassName("checkmark");
  for(var i = 0; i < checkmarks.length; i++){
    checkmarks[i].parentNode.removeChild(checkmarks[i]);
  }
  var colorPreviews = document.getElementsByClassName("color-preview");
  for (var i = 0; i < colorPreviews.length; i++){
    if (colorPreviews[i].id == color_name) {
      console.log(colorPreviews[i].id + "," + color_name + "," + currentColor.name)
      colorPreviews[i].innerHTML = "<i class='fas fa-check checkmark'></i>";
    }
  }
}

2．用currentColor.name一個一個比對color_data陣列裏的色彩名稱，並從中取出色彩碼(color與off color)。 3．將整個月曆color、border-color與off-color用上面步驟取出的色碼進行色彩設定。

<script src="js/updateData.js"></script>
<script language="JavaScript">
  var currentColor = { name : "blue", color : "#1B19CD", off_color : "#7c7EFB" };
  var color_data = [
    {
        name: 'blue',
        color_code: '#1B19CD',
        off_color_code: '#7C7EFB'
    }, {
        name: 'red',
        color_code: '#D01212',
        off_color_code: '#EEA19B'
    }, {
        name: 'purple',
        color_code: '#721D89',
        off_color_code: '#EBADFB'
    }, {
        name: 'green',
        color_code: '#158348',
        off_color_code: '#57C664'
    }, {
        name: 'orange',
        color_code: '#EE742D',
        off_color_code: '#F7A77A'
    }, {
        name: 'deep-orange',
        color_code: '#F13C26',
        off_color_code: '#F77D59'
    }, {
        name: 'baby-blue',
        color_code: '#31B2FC',
        off_color_code: '#3D8DD9'
    }, {
        name: 'cerise',
        color_code: '#EA3D69',
        off_color_code: '#FCBECC'
    }, {
        name: 'lime',
        color_code: '#2ACC32',
        off_color_code: '#4FFA4F'
    }, {
        name: 'teal',
        color_code: '#2FCCB9',
        off_color_code: '#7FE7E3'
    }, {
        name: 'pink',
        color_code: '#F50D7A',
        off_color_code: '#FFB9EA'
    }, {
        name: 'black',
        color_code: '#212524',
        off_color_code: '#687E7B'
    }
  ];


  updateData(); //更新日期相關資料


  //用來紀錄目前主題的色彩名稱、色彩編碼
  function addCheckMark(color_name){
    currentColor.name = color_name; //將勾選的色彩名稱color_name指定給全域變數currentColorName，以便在changeColor方法裏使用，來設定整個主題的色彩。
    var checkmarks = document.getElementsByClassName("checkmark");
    for(var i = 0; i < checkmarks.length; i++){
      checkmarks[i].parentNode.removeChild(checkmarks[i]);
    }
    var colorPreviews = document.getElementsByClassName("color-preview");
    for (var i = 0; i < colorPreviews.length; i++){
      if (colorPreviews[i].id == color_name) {
        console.log(colorPreviews[i].id + "," + color_name + "," + currentColor.name)
        colorPreviews[i].innerHTML = "<i class='fas fa-check checkmark'></i>";
      }
    }
  }

  function openFavColor(){
    var modal = document.getElementById("modal");
    modal.open = true;
    modal.classList.add("fade-in"); //淡入效果
    var template = document.getElementById("fav-color");
    template.removeAttribute("hidden");
  }

  function changeColor(){
    //第1步：先找出勾選色彩所設定的色碼
    console.log(currentColor.name)
    color_data.forEach(function(arr_data){ //陣列的走訪，每走訪一個陣列元素，帶出的元素以arr_data變數呈現(arr_data我們自取的名稱)
        if(currentColor.name == arr_data.name){ //找到color_data陣列中符合的色彩，
            currentColor.color = arr_data.color_code;
            currentColor.off_color = arr_data.off_color_code;
        }
    });

    var elements;

    //先清除掉所有的style設置(td)
    elements = document.getElementsByTagName("td");
    for(let i=0; i < elements.length; i++) {
          elements[i].style = null;
    }

    //改變目前的色彩設置
    elements = document.getElementsByClassName("color");
    for(let i=0; i < elements.length; i++) {
      elements[i].style.backgroundColor = currentColor.color;
    }


    elements = document.getElementsByClassName("border-color");
        for(let i=0; i < elements.length; i++) {
          elements[i].style.borderColor = currentColor.color;
    }

    elements = document.getElementsByClassName("off-color");
        for(let i=0; i < elements.length; i++) {
          elements[i].style.color = currentColor.off_color;
    }

    //關閉對話方塊
    var modal = document.getElementById("modal");
    modal.open = false;
    modal.classList.remove("fade-out"); //淡出效果
    var template = document.getElementById("fav-color");
    template.setAttribute("hidden", "hidden");
  }
</script>

另外，在fillInMonth()方法最後一行，加上：

changeColor();

填完表格，應該要再重新上一次色(changeColor();)。最後，就是把這部份的功能放到新的的js/changeTheme.js，另外把轉場的css格式移入css/main.css。最後的程式連結：Part-7

Part 7 JavaScript – 主題(theme)的更新

學習資源：

Fade in and out

勾選功能

Leave A Reply 取消回覆

Login with your site account

Modal title