這次的教學將有以下幾個重點，主要聚焦在既有功能的優化與新功能的添加：

1. 點擊便利貼文字時因滑鼠與左上角距離設定的關係，會造成距離差而產生的跳動
2. 加入刪除便利貼的功能
3. 加入新增或刪除便利貼時，放大縮小的transition
4. 修改顏色的控制列需和正在使用中的便利貼位置相對應（上次我們處理的方式是都先暫時放在畫面右手邊，這次把它修改得人性化一些）
5. 編輯文字和多行文字時呈現的大小
6. 串接Firebase保存資料，即時整理與更新

我們將以Code Pen做為本次實作的平台，這是一個可以在創作的同時即時看到程式碼運作狀況的線上程式碼編輯器，只要簡單註冊就可以使用囉！

如果想搭配直播影片一起實作，請往這邊走

修正點擊便利貼文字造成的距離差

首先fork一份上一次的檔案，fork就像是複製，這樣接續修改也不會動到最初的原始檔唷。

接下來我們在CSS的.postit裡面加上.text下 pointer-events: none，讓他停止觸發任何的點選事件，在製作滿版圖面但不希望阻礙滑鼠事件時，可以使用這種處理方式（比如：市面網站常見透過hamburger選單收合的滿版menu）。

加入刪除便利貼功能

刪除的概念可以想成「從包著便利貼id的陣列中，運用語法 splice() 切掉該張便利貼的id」。在colorList中新增刪除按鈕如下：

button.btn(@click="postits.splice(pid,1)") 刪除

新增 / 刪除的transition

接著加入新增和刪除的動畫，我們使用vue的transition group處理。在使用上有以下幾點特性：

1. 在HTML新增,transition-group(name="fade")，注意transition Group需要包成一個div使用，這邊用tag="ul"處理，而便利貼為li
2. Group內的每個物件都需要名字，才知道控制動畫的元件範圍，給他:key="pid"，每張便利貼都有個獨一無二的id

利用vue官方提供的效果fade稍微調整一下語法，加入scale讓便利貼有從小變大、長出來的效果。

//HTML
#app
  transition-group(name="fade", tag="ul")
    li.postit(v-for="(p,pid) in postits",
            //為每張便利貼加上一個id
            :key="pid",
            :style="postitCss(p)",
            @mousedown="selectId($event,pid)")
      .text {{p.text}}

//CSS
.fade-enter-active, .fade-leave-active 
  transition: .5s

.fade-enter, .fade-leave-to 
  opacity: 0
  transform: scale(0.1)

調整顏色控制列的位置

為了讓修改顏色的功能更人性化一些，我們把.colorList整包移到.postit裡面，用position: absolute定位在便利貼下方。這時你會發現熟悉的點擊距離差問題又回來了，但因爲修改顏色和刪除的機制也是透過滑鼠，所以無法使用之前的方法來解決。

先前拖曳功能的設定為——點擊便利貼時，將該張便利貼設定id為0，當滑鼠移動時同步更新設定。現在把控制列跟便利貼拆成不同部分，也就是說點擊控制列時不進行id的設定。

在selectId的event中判斷source element是否含有block和btn，如果沒有，則進行id的設定，如果有，則nowId=-1：

//CSS
.colorList
  position: absolute
  bottom: -80px
  display: flex
  flex-direction: row
  .block
    margin-right: 10px

//JavaScript
selectId(evt,id){
  console.log(evt)
  let isBlock = evt.srcElement.classList.contains('block')
  let isBtn = evt.srcElement.classList.contains('btn')
  if (!isBlock && !isBtn ){
    this.nowId=id //滑鼠點下去
    this.startMousePos = {
      x: evt.offsetX,
      y: evt.offsetY
    }
  }else{
    this.nowId=-1
  }
}

文字編輯和多行文字時呈現的大小

如同調整顏色的控制列，我們希望在編輯文字部分可以有更好的使用者體驗，透過點擊該張便利的「編輯」按鈕即可修改。在Vue裡增加 setText 這個方法，利用語法 prompt() 跳出修改視窗，並在input欄位顯示原始的文字（透過抓取pid知道是哪張便利貼、上面有甚麼文字）：

//HTML
//新增編輯按鈕
button.btn(@click="setText(pid)") 編輯

//JavaScript
methods:{
  ...
  setText(pid){
    //彈出視窗修改文字
    let text = prompt("請輸入新的文字", this.postits[pid].text)
    //送出之後再便利貼上更新文字
    if (text){
      this.postits[pid].text=text
    }
  }
}

連接Firebase資料庫

接下來進入今天的重頭戲——串接Firebase資料庫。Firebase是Google提供的雲端開發平台，協助 開發者在雲端快速建置後端服務，提供即時資料庫。這種noSQL（非關聯式）類型的資料後端平台可能是未來的趨勢，noSQL代表你不會用像select all member這種特殊的資料查詢語法，他就是一張樹狀圖，把所有東西塞進去，所以你可以看到便利貼在頁面上即時地移動與資料修改，在Firebase資料庫裡也可以看到頁面上的改動。

首先前往Firebase的控制台，新增一個for便利貼的專案。

接著選擇Realtime Database，在專案中新增child如下：

tips: 右邊的值必須要先輸入一個default數值，之後有資料存入時便會被取代掉了。

接著引入我們的codepen網頁，在codepen引進CDN，再初始化資料庫。

Step 1：進到Overview，點選「網頁」。

Step 2：將Firebase新增至codepen。CDN為第一個script內的src，初始化config為下方的firebaseConfig。

Step 3：引入CDN，第一個script內的src貼入codepen settings。

Step 4：初始化資料庫，將Step 2裡面第二個script中的程式碼複製貼在我們JS程式碼的最上方。

接著透過Firebase手動新增一張便利貼如下，注意資料的層級，尤其是代表便利貼位置的x, y是在pos下面。

再把codepen跟建立好的firebase資料庫串接，並監聽他的value做即時更新，可以看到我們剛剛手動在資料庫新增的便利貼。Firebase語法可參考官方文件。

//JavaScript
var postitsRef = firebase.database().ref("postits2"); //建立連結
  postitsRef.on('value', (snapshot)=>{
   vm.postits = snapshot.val() //即時更新
  })

註：firebase串接語法已更新成firebase.database().ref()，直播內容的firebase.database.ref()為舊版。

遠端新增 / 刪除便利貼

可以透過資料庫新增並呈現在頁面上後，我們這邊試試透過codepen push便利貼進去資料庫，修改methods addPostits的地方，讓他不是新增在vm這邊而是postitsRef。

//JavaScript
addPostits(){
  postitsRef.push(
    {
      text: "文字",
      color: "yellow",
      pos: {x: 200+Math.random()*100, y: 200+Math.random()*100 }
    }

我們希望能刪除特定便利貼的節點，也就是postitsRef下的子結點，記得也需修改HTML刪除按鈕的語法為@click="deletePostit(pid)"，並在JS新增以下methods：

deletePostit(pid){
  postitsRef.child(pid).remove();
}

同步顏色 / 文字 / 拖移位置

除了更新頁面上便利貼的位置，也同步更新遠端資料庫的位置，所以在mousePos抓這張便利貼this.nowId，設定set更新遠端資料庫的值。

//JavaScript
postitsRef.child(this.nowId).set(this.postits[this.nowId])

同步文字的邏輯也是類似的，在setText做完本地更新後，也一起更改資料庫的文字。

//JavaScript
postitsRef.child(pid).set(this.postits[pid])

最後一個則是顏色，我們原先是讓便利貼的顏色等於顏色的名字p.color=color.name，現在為了更新遠端資料 ，我們把它包成一個function叫setColor。在methods定義setColor的作用，概念和setText類似。

//HTML
.colorList
  .block(v-for="color in colorList",
　　　　　:style="{backgroundColor: color.color}",
         //修改成成為setColor function
　　　　　@click="setColor(pid, color.name)")

//JavaScript
setColor(pid,colorname){
  this.postits[pid].color=colorname
  postitsRef.child(pid).set(this.postits[pid])
},

以上就是這次的直播內容，主要聚焦於功能的優化與資料庫的串接，後面firebase的部分對於初次接觸的人可能會需要一段時間的摸索，但只要成功串接起來、再多研究一下文件，就會比較好入手。

步驟總結

這次的直播內容比較複雜，所以在最後來個總重點整理一下。在上篇我們先建立便利貼的基礎，從樣式雛形到基本資料處理，可以分為以下幾個重點：

1. 便利貼樣式與資料處理 – 建立便利貼架構，色票、文字樣式和文字位置
2. 加上滑鼠互動事件 – 紀錄滑鼠移動的位置並儲存在evt，運用nowId判斷滑鼠在哪一張便利貼的範圍裡面
3. 新增便利貼與修改顏色 – 做一個button點擊觸發function addPostits，在addPostits推入新的陣列

下篇的部分我們著重在既有功能的微調、更精緻化，還有資料庫的串接：

1. 修正點擊便利貼文字造成的距離差 – pointer-events: none停止觸發任何的點選事件
2. 刪除便利貼功能 – 運用語法splice()切掉該張便利貼的id
3. 新增 / 刪除的transition – 使用vue的原生transition group處理，transition-group(name=”fade”)
4. 調整顏色控制列的位置 – 把colorList整包移postit裡面，用position: absolute定位在便利貼下方
5. 文字編輯和多行文字時呈現的大小 – 利用語法prompt()跳出修改視窗，優化文字編輯的使用者體驗
6. 連接Firebase資料庫 – 在Firebase建立專案與Realtime Database，與Codepen資料連接
7. 同步顏色 / 文字 / 拖移位置 – 在mousePos抓特定便利貼this.nowId，設定set更新遠端資料庫的值

課程推薦

動畫互動網頁程式入門(HTML/CSS/JS)以簡單例子帶你入門網站的基礎架構及開發，用素材刻出簡單有趣又美觀的網頁和動畫，享受做出獨一無二的網頁所帶來的成就感，在職場上與設計師和工程師合作無間。

打好基本的互動網頁基礎之後，可以進階動畫互動網頁特效入門(JS/CANVAS)，紮實掌握JavaScript 程式與動畫基礎以及進階互動，整合應用掌控資料與顯示的Vue.js前端框架，完成具有設計感的互動網站。

那我們下次再見啦👋👋👋

此篇直播筆記由幫手 Jeudi Kuo 協助整理

這篇文章 用Vue.js做快速換色與整理的便利貼牆吧！（下）（直播筆記） 最早出現於 Creative Coding TW - 互動程式創作台灣站。

我們將以Code Pen做為本次實作的平台，這是一個可以在創作的同時即時看到程式碼運作狀況的線上程式碼編輯器，只要簡單註冊就可以使用囉！

如果想搭配直播影片一起實作，請👉🏻往這邊走

了解架構

在開始之前我們先來概念性的發想，便利貼的結構設計可分為以下這些方向：

1. 儲存的資料種類—文字(顏色名稱)和色票
2. 文字呈現方式—文字在便利貼上應該滿版呈現，隨著文字多寡而動態調整大小
3. 拖曳功能—滑鼠點擊在便利貼上時紀錄初始座標，到結束時動態計算中間的滑動呈現
4. 小功能—切換文字、刪除等功能

首先在Code Pen上開一個新的pen，將HTML的預處理器設定成Pug、CSS的預處理器設定成Sass、JS的CDN掛入Vue。

便利貼樣式與資料處理

接著我們開始從第一張便利貼刻起，便利貼的結構簡單來說就是一個裝有文字的框框，文字資料我們先暫時寫死，稍後再用Vue.js動態更新。

在HTML給他一個容器名為postit裡面裝一些文字text，接著在CSS設定他的樣式如下，如次便能得到一個文字在中間的基礎白色便利貼：

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap')
*, *:before, *:after
  border: solid 1px //之後再把邊線取消掉
  font-family: 'Noto Sans', sans-serif
@mixin size($w, $h:$w)
  width: $w
  height: $h

$colorBlack:#3E3A39

html, body
  // background-color: $colorBlack //背景色，設定樣式時先拿掉方便識別
  
.postit
  +size(240px)
  font-size: calc( 240px / 4 - 5px ) //便利貼寬÷字數-預留空隙
  display: flex
  justify-content: center
  align-items: center

接下來替便利貼上一些活潑的顏色，讓他變得好玩一些，同時調整字的顏色跟上一些陰影來增加設計的細緻度，我們的第一張便利貼就完成了。使用的色票和陰影處理如下，大家也可以自由選擇喜歡的顏色唷：

//修改字體顏色不要太死黑
color: #44403F

//便利貼顏色
$colorYellow: #FFEB67
$colorBlue: #A5D8D6
$colorRed: #EF898C
$colorGreen: #CBE196

.postit
	background-color: $colorYellow
  letter-spacing: 5px
  font-weight: 500
  box-shadow: 15px 10px 40px rgba(black,0.4)

接下來進行資料的處理，在JavaScript裡給予一組陣列名為postits，裡面裝便利貼會用到的參數text、color跟position。接著新增一個new Vue並指定作用範圍為#app，抓出物件便利貼跟他是第幾張(p,pid) in postits，將文字套進{{p.text}}。用左下角的Console檢查資料是否連接好，先輸入vm之後，再輸入vm.$data.postits[0].text="temp"資料，如果出現”temp”替換掉原先的文字「都市更新」就代表成功。

//Vue.js
var vm = new Vue({
  el: '#app',
  data: {
    postits: [
      {
        text: "都市更新",
        color: "yellow",
        pos: {x:20, y:0}
      }
    ]
  }
})

加上滑鼠互動事件

為了增加自由度，我們來替便利貼加上拖曳的功能。拖曳代表著我們必須在螢幕上做絕對定位，當在拖動物件時，左上角的距離不斷地重複更新，要做到這項事情，首先我們必須將資料與定位綁定起來。

在CSS的.postit裡加上position: absolute，有時在Vue我們會動態地加上style，但這容易造成HTML程式碼裡拖了一長串反而不好閱讀，所以像這種共用性高的style可以考慮直接在CSS做設定。

接著在JS設定style的[methods](<https://cythilya.github.io/2017/04/17/vue-methods-and-event-handling/>)如下，然後帶入HTML的postit後，可在Console透過剛剛上面的方法改變文字來測試字型大小的調整是否成功。

methods:{
  postitCss(p){
    return {
      left: p.pos.x+"px", //動態地更新便利貼的位置
      top: p.pos.y+"px",
      'font-size': ((240-30) / p.text.length) +'px' //根據文字長度動態設定大小
    }
  }
}

顏色的設定跟文字的方法差不多，在JS的data裡面新增一個名為colorList的陣列，裡面塞入我們剛剛的色票與相對應的名字：

colorList: [
  {
    name:"yellow",
    color: "#FFEB67"
  },{
    name:"blue",
    color: "#A5D8D6"
  },{
    name:"red",
    color: "#EF898C"
  },{
    name:"green",
    color: "#CBE196"
  },{
    name:"black",
    color: "#3E3A39"
  }
],

接著在下方的methods裡return他的值。在Vue裡面你要抓他的值可以直接用this指向，定義條件用find過濾符合的資料。

//JavaScript
'background-color': this.colorList.find(o=>o.name==p.color).color

這時我們可以製作一個control pannel來快速調整便利貼內的文字跟顏色，省去一直打開Console輸入指令測試的重複步驟。在HTML新增一個ul放入li和輸入欄位input，input分別對應到p.text抓取輸入文字內容和p.color選擇便利貼顏色，再設定他的css。

//HTML
ul.datalist
  li(v-for="(p,pid) in postits")
    input(v-model="p.text")
    input(v-model="p.color")

//css
.datalist
  position: fixed
  right: 20px
  top: 20px
  width: 30%

前面做了資料和定位的綁定後滑鼠靜止的部分搞定，接下來要做滑鼠移動時的行為，這部分比較複雜可能需要多一點時間理解唷。我們在整個畫面上紀錄滑鼠移動的位置並儲存在evt內，右鍵檢查裡面有一個參數offset代表滑鼠距離左上角的相對位置。

小筆記：evt代表event，每次滑鼠移動時會觸發的一連串事件，包括滑鼠位置、點擊放開等，都會儲存在這裏面。

//JavaScript
window.onmousemove = (evt)=>{
  //滑鼠移動時，將最新位置記錄到vue中
  // console.log(evt)
  vm.postits[0].pos.x=evt.pageX //設定第一張便利貼的x距等於滑鼠在頁面上的x距
  vm.postits[0].pos.y=evt.pageY //設定第一張便利貼的y距等於滑鼠在頁面上的y距
}

現在便利貼會跟著滑鼠移動，但我們希望移動是滑鼠點擊觸發之後才發生的。所以需要在data的地方多儲存一個nowId: -1。nowId代表滑鼠點擊但還沒放開時，滑鼠在哪一張便利貼的範圍裡面。

我們在HTML裡加上@mousedown="selectId(pid)"並綁定點擊事件放在methods裡面，新增滑鼠移開的事件。為了方便識別可以把nowId印在畫面上。

//JavaScript
var vm = new Vue({
  ...	
  data: {
    ...
    nowId: -1
  },
  methods: {
    ...
    selectId(id){
      console.log(id)
      this.nowId=id //滑鼠點擊時選擇該張便利貼
    }
  }
})

//滑鼠移動時，將最新位置記錄到vue中
window.onmousemove = (evt)=>{
  // console.log(evt)
  if (vm.nowId!= -1){
    vm.postits[vm.nowId].pos.x=evt.pageX //抓取第nowId張便利貼的x距等於滑鼠在頁面上的x距
    vm.postits[vm.nowId].pos.y=evt.pageY //抓取第nowId張便利貼的y距等於滑鼠在頁面上的y距
  }
}

window.onmouseup = (evt)=>{
  vm.nowId = -1 //滑鼠未點擊時沒有選擇任何便利貼
}

//HTML
#app
  .postit(v-for="(p,pid) in postits",
          :style="postitCss(p)",
          @mousedown="selectId(pid)")
    .text {{p.text}}


ul.datalist
//把nowId印在畫面上
  li
    h1(style="color: white") {{nowId}}
  ...

單用window.onmousemove = (evt)監測時可能會有些狀況，我們希望當滑鼠有變動時，就在Vue裡偵測資料的變動並針對位置做更新，所以我們新增watch偵測是否有選擇便利貼，如果有就把這張便利貼抓出來。這張便利貼會等於所有便利貼的第nowId個，知道第幾張後就去設定他的位置。

var vm = new Vue({
  data: {
    ...
    mousePos: {
      x:0, y:0
    }
  },	
  watch: {
    mousePos(){
      if (this.nowId!= -1){
        let nowPostit = this.postits[this.nowId]
        nowPostit.pos.x = this.mousePos.x
        nowPostit.pos.y = this.mousePos.y
      }
      console.log(this.mousePos)
    },
  ...
})

window.onmousemove = (evt)=>{
  // console.log(evt)
  vm.mousePos = {x: evt.pageX, y: evt.pageY}
  //if (vm.nowId!= -1){
    //vm.postits[vm.nowId].pos.x=evt.pageX
    //vm.postits[vm.nowId].pos.y=evt.pageY
  //}
  
}

記得把作用範圍撐開跟window一樣大，不然會無法運作。

//css
html, body, #app
  background-color: $colorBlack
  padding: 0
  margin: 0
  overflow: hidden
  +size(100%)

拖曳的功能就完成了，但這時點擊便利貼的右下角時會有一些偏移、跳一下，我們可以記錄這個偏移量並加上點擊的位置，這樣一減一加之後我們就可以讓他乖乖待在位置上。在HTML的selectId新增$event，也記錄第一個點下去的位置startMousePos。

@mousedown="selectId($event,pid)"

var vm =new Vue({
  ...
  data: {
    ...
    startMousePos: {
      x: 0,
      y: 0
    }
  }
  ...
  methods: {
    ...
    selectId(evt,id){
      console.log(id)
      this.nowId=id //滑鼠點下去
      this.startMousePos = {
        x: evt.offsetX,
        y: evt.offsetY
      }
    }
  }
})

在watch減掉偏移量，有滑鼠移動而且我們判斷當下那張便利貼存在的時候。這樣拖曳功能就大功告成啦。

watch: {
  mousePos(){
    if (this.nowId!= -1){
      let nowPostit = this.postits[this.nowId]
      nowPostit.pos.x = this.mousePos.x-this.startMousePos.x
      nowPostit.pos.y = this.mousePos.y-this.startMousePos.y
    }
    console.log(this.mousePos)
  }

如果想要將滑鼠拖曳的效果變得更滑順，可以在CSS的.postit裡面加上cursor: pointer試試效果。

新增與修改顏色

接下來我們來做「新增」的功能，做一個button點擊觸發functionaddPostits。在addPostits推入新的陣列，位置給予亂數Math.random才不會覆蓋在原有的便利貼上。

//HTML
  ul.datalist
    ...
    button(@click="addPostits") +新增便利貼

最後做個改顏色的功能，透過點擊動態渲染的小方塊來改變便利貼的顏色，參考如下。

ul.datalist
  li
    ...
    .colorList
      .block(v-for="color in colorList",:style="{backgroundColor: color.color}", @click="p.color=color.name")

//css
.block
  +size(30px)
  background-color: #fff
  display: inline-block

//JavaScript
methods: {
  //直接從現有顏色清單裡選取一顏色
  getColor(name){
    return this.colorList.find( o=>o.name==name)  
  }
  ...
}

總結

以上就是前半段的便利貼教學，我們先建立便利貼的基礎，從樣式雛形到基本資料處理，可以分為以下幾個重點：

1. 便利貼樣式與資料處理 – 建立便利貼架構，色票、文字樣式和文字位置

2. 加上滑鼠互動事件 – 紀錄滑鼠移動的位置並儲存在evt，運用nowId判斷滑鼠在哪一張便利貼的範圍裡面

3. 新增便利貼與修改顏色 – 做一個button點擊觸發function addPostits，在addPostits推入新的陣列

下一次我們會接續進行刪除、背景調整、縮放動畫等的功能，我們下次見啦👋👋👋

老闆的互動網頁課程

動畫互動網頁程式入門(HTML/CSS/JS)以簡單例子帶你入門網站的基礎架構及開發，用素材刻出簡單有趣又美觀的網頁和動畫，享受做出獨一無二的網頁所帶來的成就感，在職場上與設計師和工程師合作無間。

打好基本的互動網頁基礎之後，可以進階動畫互動網頁特效入門(JS/CANVAS)，紮實掌握JavaScript 程式與動畫基礎以及進階互動，整合應用掌控資料與顯示的Vue.js前端框架，完成具有設計感的互動網站。期待在課程裡見到你！

此篇直播筆記由幫手 Jeudi Kuo 協助整理

這篇文章 用Vue.js做快速換色與整理的便利貼牆吧！（上）（直播筆記） 最早出現於 Creative Coding TW - 互動程式創作台灣站。