chat_room.html 8.12 KB
Newer Older
藤川諒 committed
1 2
<!doctype html>
<html lang="en">
Kim Peace committed
3

藤川諒 committed
4 5 6
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
Kim Peace committed
7 8
  <meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
藤川諒 committed
9
  <title>LiveTaskyell</title>
10
  <!--<link rel="stylesheet" href="./css/notosansjp.css">-->
藤川諒 committed
11 12
  <link href="./fontawesome/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
13
  <link rel="stylesheet" href="./css/jquery-ui.min.css">
藤川諒 committed
14 15
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/chat.css">
16
  <link rel="stylesheet" href="./css/loading.css">
藤川諒 committed
17 18 19
  <link rel="stylesheet" href="./css/chat_room_footer.css">
  <link rel="stylesheet" href="./css/font-awesome.css">
</head>
Kim Peace committed
20

Lee Munkyeong committed
21
<body style="background: #F3F3F3;">
藤川諒 committed
22 23 24
  <!-- ナビメニュー -->
  <nav>
    <div class="chat_room_src_form none">
Lee Munkyeong committed
25
      <div class="d-flex flex-row h-100 align-items-center">
Kang Donghun committed
26
        <input type="search" name="search" id="searchMessage" placeholder="メッセージ検索" maxlength="600">
藤川諒 committed
27
        <span class="src_icon"></span>
28
        <a href="#" class="cancel" id="messageSearchCancle">キャンセル</a>
Lee Munkyeong committed
29
      </div>
藤川諒 committed
30 31 32 33 34 35 36 37 38 39 40
    </div>
    <div class="row nav_item_wrap h-100 align-items-center">
      <div class="col-4 pr-0">
        <div class="nav-item">
          <div class="nav_prev">
            <a href="chat.html"><span>チャット</span></a>
          </div>
        </div>
      </div>
      <div class="col-4 p-0">
        <div class="nav-item p-0">
Lee Munkyeong committed
41
          <h1 class="nav-ttl" id="roomTitle"></h1>
藤川諒 committed
42 43 44 45 46
        </div>
      </div>
      <div class="col-4 pl-0">
        <div class="nav-item text-right">
          <a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a>
Kim Peace committed
47 48
          <a href="#" data-toggle="modal" data-target="#menuModalCenter" id="roomMenu" class="none"><img
              src="icon/icon_room_menu.png" alt="メニュー"></a>
藤川諒 committed
49 50 51 52 53 54 55 56
        </div>
      </div><!-- .col -->
    </div><!-- .row -->
  </nav><!-- nav -->

  <!-- コンテンツ -->
  <main id="chat_room">
    <div id="user_list" class="user_list d-flex flex-row">
Lee Munkyeong committed
57

藤川諒 committed
58 59 60 61
    </div>


    <!-- フィルター -->
62
    <div id="filter" class="user_list filter d-flex flex-row none"></div>
63
    <div class="chat_list none" id="searchList">
藤川諒 committed
64 65 66 67 68 69 70
      <ul class="overlay_src_msg">
      </ul>
    </div>

    <!-- チャット内容 -->
    <div class="room_container">
      <div class="room_contents scroll">
Lee Munkyeong committed
71
        <div id="messages"></div>
藤川諒 committed
72 73 74 75 76 77 78 79
      </div>
    </div>
  </main>

  <!-- フッター -->
  <footer class="chat_room_footer">
    <!-- フッター上 -->
    <div class="footer-wrap d-flex flex-column">
Lee Munkyeong committed
80 81 82 83
      <div>
        <div class="msg_notification" id="messageNotification" style="text-align:center;display: none;">
        </div>
      </div>
藤川諒 committed
84 85
      <div class="footer_content_t">
        <div class="d-flex flex-row h-100">
Lee Munkyeong committed
86
          <div class="footer_item attach_file">
Lee Munkyeong committed
87 88 89 90
            <img src="icon/icon_camera.png" alt="写真アイコン" id="imageInputButton">
            <form id="image-form">
              <input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
            </form>
藤川諒 committed
91
          </div>
Lee Munkyeong committed
92
          <div class="footer_item attach_file">
Lee Munkyeong committed
93 94 95 96
            <img src="icon/icon_videocam.png" alt="動画アイコン" id="videoUploadButton">
            <form id="video-form">
              <input class="d-none" type="file" name="image" id="videoInputTag" accept="video/mp4">
            </form>
藤川諒 committed
97
          </div>
Kim Peace committed
98 99 100 101
          <input type="text" name="message" class="message_input_form" id="messageInput" placeholder="メッセージを入力してください"
            maxlength="600">
          <button type="button" name="button" class="message_input_send none" id="messageSend"
            onclick="CHAT_UI.sendMessage(this);">送信</button>
藤川諒 committed
102 103 104 105 106 107
        </div>
      </div>
      <!-- フッター下 -->
      <div class="footer_content_b">
        <div class="d-flex flex-row justify-content-around h-100">
          <div class="footer_item">
108
            <a href="javascript:CHAT_UI.startCollaboration(COLLABORATION_TYPE.AUDIO);">
藤川諒 committed
109 110 111 112 113
              <img src="icon/icon_phone.png" alt="通話アイコン">
              <p>通話</p>
            </a>
          </div>
          <div class="footer_item">
114 115
            <a href="javascript:CHAT_UI.startCollaboration(COLLABORATION_TYPE.DOCUMENT);">
              <img src="icon/icon_paste.png" alt="文書アイコン">
藤川諒 committed
116
              <p>文書</p>
117
            </a>
藤川諒 committed
118 119
          </div>
          <div class="footer_item">
120
            <a href="javascript:CHAT_UI.startCollaboration(COLLABORATION_TYPE.CAMERA);">
藤川諒 committed
121 122 123 124 125
              <img src="icon/icon_photo.png" alt="画像アイコン">
              <p>画像</p>
            </a>
          </div>
          <div class="footer_item">
126
            <a href="javascript:CHAT_UI.startCollaboration(COLLABORATION_TYPE.VIDEO);">
藤川諒 committed
127 128 129 130
              <img src="icon/icon_movie.png" alt="動画アイコン">
              <p>動画</p>
            </a>
          </div>
131
          <!--リリース後開発予定-->
132
          <div class="footer_item">
133 134
            <a href="javascript:CHAT_UI.startCollaboration(COLLABORATION_TYPE.BOARD);">
              <img src="icon/icon_whiteboard_gray.png" alt="ホワイトボードアイコン">
藤川諒 committed
135
              <p>ボード</p>
136
            </a>
137
          </div>
藤川諒 committed
138 139 140 141
        </div>
      </div>
    </div>
  </footer>
Lee Munkyeong committed
142 143 144
  <div id="loadingArea"></div>
  <div id="userProfileModal"></div>
  <div id="chatMenuModal"></div>
Lee Daehyun committed
145
  <div id="pictureModal"></div>
Lee Munkyeong committed
146 147 148 149 150 151 152 153 154 155 156

  <script src="./js/libs/jquery-3.3.1.min.js"></script>
  <script src="./js/libs/socket.io.js"></script>
  <script src="./js/libs/moment.js"></script>
  <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
  <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
  <script src="./js/libs/mustache.min.js"></script>
  <script src="./js/libs/bootstrap.min.js"></script>
  <script src="./js/libs/jquery.mark.min.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/language.js"></script>
157
  <script src="./js/loading.js"></script>
Lee Munkyeong committed
158 159 160 161 162 163 164 165
  <script src="./js/language_ko.js" charset="UTF-8"></script>
  <script src="./js/language_ja.js" charset="UTF-8"></script>
  <script src="./js/language_en.js" charset="UTF-8"></script>
  <script src="./js/constant.js"></script>
  <script src="./js/chat.js"></script>
  <script src="./js/chat-ui.js"></script>
  <script src="./js/chat-util.js"></script>
  <script src="./js/chat-db.js"></script>
Kim Peace committed
166
  <script src="./js/chat-db-foriOS.js"></script>
Lee Munkyeong committed
167
  <script src="./js/chat-websocket.js"></script>
Kim Peace committed
168 169 170
  <script src="./js/chat-websocket-message.js"></script>
  <script src="./js/chat-websocket-refresh-group-list.js"></script>
  <script src="./js/chat-websocket-refresh-user-list-in-group.js"></script>
171
  <script src="./js/chat-room.js"></script>
Lee Munkyeong committed
172
  <script>
173
    function imageModal(image) {
Lee Daehyun committed
174
      $('#modal_image').attr('src', image.src);
Lee Daehyun committed
175 176 177
      $('#pictureModalCenter').modal('show');
    }

Kim Peace committed
178
    String.prototype.replaceAll = function (org, dest) {
Lee Munkyeong committed
179 180 181 182 183 184 185 186 187
      return this.split(org).join(dest);
    }

    let CHAT_SERVER_URL = '';
    let CMS_SERVER_URL = '';
    let ASSET_PATH = './';
    let PLATFORM = '';
    let IS_MOBILE = true;
    let IS_ONLINE = false;
188
    let androidVersion = 0;
Lee Daehyun committed
189
    $("#pictureModal").load("./modal_chat_picture.html");
Lee Munkyeong committed
190
    $("#chatMenuModal").load("./modal_chat_menu.html");
191
    $("#loadingArea").load("./loading.html");
192

Kim Peace committed
193
    if (typeof (android) != "undefined") {
Takatoshi Miura committed
194 195
      android.getLoginParameter();
      android.getGlobalParameter();
196
      android.saveSelectedUserList("");
197
      androidVersion = android.getAndroidVersion();
Takatoshi Miura committed
198 199 200
    } else {
      webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
      webkit.messageHandlers.getGlobalParameter.postMessage({});
201
      webkit.messageHandlers.saveSelectedUserList.postMessage("");
Takatoshi Miura committed
202
    }
Lee Munkyeong committed
203

Lee Munkyeong committed
204 205 206 207 208 209 210 211 212
    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
      CHAT_SERVER_URL = chatServerUrl;
      CMS_SERVER_URL = cmsServerUrl;
      PLATFORM = platform;
      IS_MOBILE = isMobile;
      IS_ONLINE = isOnline;
      CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName);
    };
  </script>
藤川諒 committed
213
</body>
Kim Peace committed
214

Kim Peace committed
215
</html>