UI_Web_Chat/webChat.js at master · capeta0507/UI_Web_Chat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
const webMessage = [
  {
    "no":1,
    "name": "David",
    "photo":"img/friends/David.png",
    "type":"text",
    "message":"Hi",
    "dateTime":"09/23 10:00",
    "me": false
  },
  {
    "no":2,
    "name": "Johnny",
    "photo":"img/me/Johnny.png",
    "type":"text",
    "message":"你好",
    "dateTime":"09/23 10:15",
    "me": true
  },
  {
    "no":3,
    "name": "David",
    "photo":"img/friends/David.png",
    "type":"text",
    "message":"推薦給你一張漂亮的底圖...",
    "dateTime":"09/23 10:16",
    "me": false
  },
  {
    "no":4,
    "name": "Johnny",
    "photo":"img/me/Johnny.png",
    "type":"text",
    "message":"好ㄜ",
    "dateTime":"09/23 10:18",
    "me": true
  },
  {
    "no":5,
    "name": "David",
    "photo":"img/friends/David.png",
    "type":"photo",
    "message":"img/photo/423893.jpg",
    "dateTime":"09/23 10:19",
    "me": false
  },
  {
    "no":6,
    "name": "Johnny",
    "photo":"img/me/Johnny.png",
    "type":"text",
    "message":"謝謝，我將用在新的專案上...",
    "dateTime":"09/23 10:20",
    "me": true
  },
  {
    "no":7,
    "name": "David",
    "photo":"img/friends/David.png",
    "type":"emoji",
    "message":"img/emoji/like.png",
    "dateTime":"09/23 10:16",
    "me": false
  }
]

let message = '';
webMessage.map(data => {
  if(data.me){
    if(data.type == 'text'){
      message += `
        <div class="message_row you-message">
          <div class="message-content">
            <div class="message-text">${data.message}</div>
            <div class="message-time">${data.dateTime}</div>
          </div>
        </div>
      `
    } else {
      message += `
        <div class="message_row you-message">
          <div class="message-content">
            <img class="ejIcon" src="${data.message}" alt="">
            <div class="message-time">${data.dateTime}</div>
          </div>
        </div>
      `
    }
  } else {
    if(data.type == 'text'){
      message += `
        <div class="message_row other-message">
          <div class="message-content">
            <img class="head" src="${data.photo}" alt="">
            <div class="message-text">${data.message}</div>
            <div class="message-time">${data.dateTime}</div>
          </div>
        </div>
      `
    } else {
      message += `
        <div class="message_row other-message">
          <div class="message-content">
            <img class="head" src="${data.photo}" alt="">
            <img class="ejIcon" src="${data.message}" alt="">
            <div class="message-time">${data.dateTime}</div>
          </div>
        </div>
      `
    }
  }
})

document.getElementById('chatRoom').innerHTML = message;