chat-room.js 6.85 KB
Newer Older
1 2 3
var beforeHeight = window.innerHeight;
var beforeWidth = window.innerWidth;
var beforeScroll;
Kim Peace committed
4
var roomName = "";
5
var initialLoading = true;
6 7
var ChatRoom = {};

8 9 10 11 12 13 14
window.onscroll = function () {
  if (beforeScroll == window.scrollY) {
    return;
  }
  beforeScroll = window.scrollY;
  const beforeHeight = $(".room_container").height();
  messageCount = $(".chat_message").length;
15
  // TODO: peacekim :: check this condition
16
  if ($(this).scrollTop() === 0 && messageCount >= PagingSize.MESSAGE) {
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
    setTimeout(function () {
      if (!$("#chatLoader").is(":visible")) {
        // display loading indicator in chat message
        let loader = $(
          '<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
        );
        $("#messages").append(loader);
        // get lastest message id and update message from server via native
        const messageID = $($(".chat_message").last()).data("messageid");
        NativeBridgeDelegate.updatePreMessage(messageID);
        let messages = NativeBridgeDataSource.getMessagesByMessageID(messageID);
        // prepend message
        ChatRoom.prependMessage(messages);
        // hide loading indicator
        loader.remove();
        var afterHeight = $(".room_container").height();
        window.scroll(0, afterHeight - beforeHeight);
      }
    }, 0);
36 37 38 39
  }
};

document.addEventListener("DOMContentLoaded", function () {
Kim Peace committed
40 41 42 43 44 45 46 47
  // 検索イベントバインディング
  ChatRoom.bindSearchUI();

  // 画面サイズ変更イベントバインディング
  ChatRoom.bindResize();

  // メッセージ入力イベントバインディング
  ChatRoom.bindMessageInput();
48 49 50

  // 下スクロールでユーザーリストを非表示
  ChatRoom.bindUserListDisplayToggle();
Kim Peace committed
51
});
52

Kim Peace committed
53 54
ChatRoom.bindResize = function () {
  const footerHeight = $(".footer-wrap").height();
55 56 57 58
  window.addEventListener("resize", function () {
    var afterHeight = window.innerHeight;
    var afterWidth = window.innerWidth;
    var moreScroll = beforeHeight - afterHeight;
Kim Peace committed
59
    const footerBHeight = $(".footer_content_b").height();
60 61 62 63 64 65
    if (beforeHeight > afterHeight && beforeHeight - afterHeight > 50) {
      if (deviceInfo.isiOS()) {
        window.scrollTo(0, beforeScroll + moreScroll);
      } else if (beforeWidth == afterWidth) {
        //キーボード表示時
        $(".room_container").css("margin-bottom", 0);
Kim Peace committed
66
        window.scrollTo(0, beforeScroll + moreScroll - footerBHeight);
67 68
      } else {
        //画面回転時
Kim Peace committed
69
        window.scrollTo(0, beforeScroll + moreScroll * 2 - footerBHeight);
70 71 72
      }
    } else if (beforeHeight < afterHeight) {
      $(".room_container").css("margin-bottom", footerHeight);
onuma committed
73
      if (deviceInfo.isiOS()) {
74 75 76
        window.scrollTo(0, beforeScroll + moreScroll);
      } else if (beforeWidth == afterWidth) {
        //キーボード非表示
Kim Peace committed
77
        window.scrollTo(0, beforeScroll + moreScroll + footerBHeight);
78 79
      } else {
        //画面回転時
Kim Peace committed
80
        window.scrollTo(0, beforeScroll + moreScroll * 2 + footerBHeight);
81 82 83 84 85
      }
    }
    beforeHeight = window.innerHeight;
    beforeWidth = window.innerWidth;
  });
Kim Peace committed
86
};
87

Kim Peace committed
88
ChatRoom.bindMessageInput = function () {
89 90 91 92 93 94
  $("#messageInput").focusin(function (e) {
    beforeHeight = window.innerHeight;
    beforeWidth = window.innerWidth;
    beforeScroll = window.scrollY;
  });

95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
  $(".message_input_form").on("focus", function (e) {
    setTimeout(function () {
      $(".message_input_send").removeClass("none");
      $(".attach_file").addClass("none");
      $(".footer_content_b").addClass("none");
    }, 10);
  });

  $(".message_input_form").on("focusout", function (e) {
    setTimeout(function () {
      if ($(e.relatedTarget).hasClass("message_input_send")) {
        ChatRoom.sendMessage();
      } else {
        $(".message_input_send").addClass("none");
        $(".attach_file").removeClass("none");
        $(".footer_content_b").removeClass("none");
      }
    }, 10);
  });
114 115 116
};

// 下スクロールでユーザーリストを非表示
Kim Peace committed
117 118 119 120 121 122 123 124 125 126 127
ChatRoom.bindUserListDisplayToggle = function () {
  let startPos = 0;
  let winScrollTop = 0;
  $(window).on("scroll", function () {
    winScrollTop = $(this).scrollTop();
    if (winScrollTop >= startPos) {
      if (winScrollTop >= 200) {
        $("#chat_room .user_list").addClass("hide");
      }
    } else {
      $("#chat_room .user_list").removeClass("hide");
128
    }
Kim Peace committed
129 130 131
    startPos = winScrollTop;
  });
};
132 133 134

// 画像の読み込みが全て終わったタイミングでコールバック実行
// FIXME 追加読み込みの場合は差分の画像のみ監視すべきだが、現状新規入室時にしか対応出来ていない。
135
ChatRoom.waitForLoadingVideo = function (div, callback) {
136
  Common.showLoadingIndicator();
137
  // var imgs = document.getElementsByTagName("video");
Kim Peace committed
138 139
  let video = div.find("video");
  let count = video.length;
140
  if (count == 0) callback();
Kim Peace committed
141
  let loaded = 0;
142 143 144 145 146 147 148 149 150 151 152
  video.each(function () {
    this.addEventListener("loadeddata", function (e) {
      loaded++;
      if (loaded === count) {
        callback();
        Common.dismissLoadingIndicator();
      }
    });
  });
};

153
ChatRoom.waitForLoadingImage = function (div, callback) {
Kim Peace committed
154 155
  let imgs = div.find("img");
  let count = imgs.length;
156
  if (count == 0) callback();
Kim Peace committed
157
  let loaded = 0;
158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
  imgs
    .one("load", function (e) {
      // イメージが読み込まれた
      loaded++;
      if (loaded === count) {
        callback();
      }
    })
    .each(function () {
      if (this.complete || this.readyState === readyState.COMPLETED) {
        $(this).trigger("load");
      }
    });
};

Kim Peace committed
173
ChatRoom.scrollToBottom = function (animated = true) {
174 175
  const messages = $(".room_contents");
  const scrollHeight = messages.prop("scrollHeight");
Kim Peace committed
176

177 178 179 180
  $("html, body").animate(
    {
      scrollTop: scrollHeight,
    },
181 182 183 184 185
    animated ? 100 : 0,
    function () {
      initialLoading = false;
      Common.dismissLoadingIndicator();
    }
186 187 188
  );
};

189
ChatRoom.refreshForOnline = function () {
190 191 192 193 194 195 196 197 198 199 200 201 202 203
  $("#videoUploadButton").removeClass("ui-state-disabled");
  $("#imageInputButton").removeClass("ui-state-disabled");
  $("#messageSend").prop("disabled", false);
  $("#messageInput").prop("disabled", false);
  $("#messageInput").prop("placeholder", "メッセージを入力してください");
  $("#room_name_change_button").removeClass("ui-state-disabled");
  $("#add_user_button").removeClass("ui-state-disabled");
  $(".fa-download").show();

  if (typeof $("#roomTitle").val() != "undefined") {
    CHAT_SOCKET.initialJoin();
  }
};

204
ChatRoom.refreshForOffline = function () {
205 206 207 208 209 210 211 212
  $("#videoUploadButton").addClass("ui-state-disabled");
  $("#imageInputButton").addClass("ui-state-disabled");
  $("#messageSend").prop("disabled", true);
  $("#messageInput").prop("disabled", true);
  $("#messageInput").prop("placeholder", "");
  $("#room_name_change_button").addClass("ui-state-disabled");
  $("#add_user_button").addClass("ui-state-disabled");
  $(".fa-download").hide();
213
};