Skip to content

C
chat_webview
Commit 9ca6a036 by Takatoshi Miura
Options

Merge branch 'origin/develop_collaborationUI' into 'release_sp3' 

Origin/develop collaboration ui

See merge request !6
parents 77fb1c5d c8260271
Showing with 1381 additions and 8 deletions
public/css/chat.css
...@@ -205,7 +205,6 @@ img { ...@@ -205,7 +205,6 @@ img {
.received_withd_msg { width: 57%;} .received_withd_msg { width: 57%;}
.mesgs { .mesgs {
margin-top: 40px; margin-top: 40px;
padding: 0px 15px 48px 15px;
} }
.search-bar-fixed { .search-bar-fixed {
...@@ -258,10 +257,14 @@ img { ...@@ -258,10 +257,14 @@ img {
.msg_history { .msg_history {
/* チャット画面スクロール範囲 /* チャット画面スクロール範囲
* 画面の高さ - (画面上部タイトルの高さ(58px) + ルーム名検索欄の高さ(38px) + メッセージ入力欄の高さ(48px)) */ * 画面の高さ - (画面上部タイトルの高さ(58px) + ルーム名検索欄の高さ(38px) + メッセージ入力欄の高さ(48px) + 協業タブの高さ(67px)) */
height: calc(100vh - 144px); height: calc(100vh - 211px);
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding: 0px 15px;
}
.landscape_msg_history {
padding: 0px 10%;
} }
/****************************chatlist end *************************/ /****************************chatlist end *************************/
...@@ -760,6 +763,518 @@ a.article:hover { ...@@ -760,6 +763,518 @@ a.article:hover {
text-align: center; text-align: center;
} }
/* --------------------------------------------------- */
/* COLLABORATION STYLE */
/* --------------------------------------------------- */
#coviewShareMainBtn {
padding-top: 9px;
}
.coview_share_area {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1050;
}
.coview_share_title {
background: #1D1D1D!important;
border-color: #1D1D1D!important;
width: 100%;
height: 58px;
}
.coview_share_body {
width: 100%;
height: calc(100vh - 58px);
}
.coview_share_title_left_area {
display: inline-block;
height: 58px;
line-height: 58px;
padding: 0;
margin: 0;
}
p#coview_time {
font-weight: normal;
font-size: 16px;
line-height: 14px;
padding-left: 10px;
}
.coview_share_title_right_area {
display: inline-block!important;
height: 58px;
line-height: 58px;
margin: 0;
float: right;
}
.coview_share_title_btn {
display: inline-block;
}
.coview_share_title_btn img {
width: 45px;
height: 45px;
}
.coview_share_title_name {
display: inline-block;
height: 58px;
line-height: 58px;
padding-left: 23px;
margin: 0;
color: #fff;
}
.coview_share_photo_select_bubble {
display: none;
position: absolute;
padding: 2px;
background: #3e3e3e;
border-radius: 5px;
margin-top: 156px;
margin-left: 117px;
font-size: 12px;
}
.coview_share_photo_select_bubble:after {
border-top: 0 solid transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #3e3e3e;
content: "";
position: absolute;
top: -10px;
left: 22px;
}
.coview_share_photo_select_bubble_in_button {
width: 106px;
height: 39px;
border: none;
text-align: left;
}
.coview_share_photo_select_bubble_in_button.cam {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.coview_share_photo_select_bubble_in_button.gal {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: solid 0.7px #000;
}
.coview_share_photo_select_bubble_in_button_img{
width: 27%;
}
.coview_share_photo_select_bubble_in_button_text{
margin-left: 5px;
}
.coview_share_request {
width: 100%;
height: 4em;
background-image: linear-gradient(to top, #82b127, #30c8d2);
color: #fff;
border: none;
border-radius: 5px;
}
.collaboration_tab {
height: 67px;
display: flex;
border-top: 1px solid #c4c4c4;
background-color: #F9F9F9;
}
.collaboration_tab ul {
list-style-type: none;
display: flex;
padding: 0px;
margin-bottom: 0px;
width: 100%;
}
.collaboration_tab li {
display: flex;
align-self: auto;
flex: 1;
min-width: 0;
}
.collaboration_tab_btn {
align-items: center;
justify-content: center;
flex: 1;
padding-top: 8px;
text-decoration: none;
text-align: center;
word-break: break-all;
box-sizing: border-box;
}
.collaboration_tab_btn img {
height: 32px;
width: 32px;
}
.collaboration_tab_btn p {
font-size: 12px;
align-items: center;
color: #707070;
}
.tool_area_switcher {
position: absolute;
left: 0;
bottom: 198px;
width: 76px;
height: 43px;
z-index: 4;
}
.tool_hide_btn, .tool_show_btn {
width: 76px;
height: 43px;
-webkit-appearance: none;
border: none;
padding: 0;
}
.tool_hide_btn img, .tool_show_btn img {
width: 76px;
height: 43px;
}
.coview_tool_area {
width: 100%;
height: 78px;
bottom: 120px;
position: absolute;
background: #1D1D1D;
z-index: 4;
}
.coview_tool_area_left {
padding: 15px 16px;
display: inline-block;
float: left;
}
.coview_tool_area_right {
padding: 15px 16px;
display: inline-block;
float: right;
}
.coview_tool_btn {
width: 48px;
height: 48px;
-webkit-appearance: none;
border: none;
padding: 0;
margin: 0px 8px;
}
.coview_tool_btn img {
width: 48px;
height: 48px;
}
.coview_tool_btn_long {
width: 134px;
height: 48px;
-webkit-appearance: none;
border: none;
padding: 0;
margin: 0px 8px;
position: relative;
}
.coview_tool_btn_long img {
width: 134px;
height: 48px;
}
.coview_tool_btn_long p {
position: absolute;
top: 6px;
right: 6px;
width: 80px;
height: 36px;
margin-bottom: 0;
font-size: 14px;
line-height: 36px;
background: #0070CA;
}
.coview_bottom_area {
width: 100%;
height: 120px;
bottom: 0px;
text-align: center;
position: absolute;
background: #1D1D1D;
z-index: 4;
}
.bottom_area {
padding: 30px 0px;
}
.bottom_btn {
width: 60px;
height: 60px;
-webkit-appearance: none;
border-radius: 50px;
margin: 0px 17px;
padding: 0;
background: white;
}
.bottom_btn img {
width: 60px;
height: 60px;
padding: 0px;
}
.coview_type_area {
position: absolute;
width: 100%;
height: calc(100vh - 178px);
bottom: 120px;
text-align: center;
z-index: 4;
background: #525252;
}
.coview_member_area {
position: absolute;
width: 100%;
height: calc(100vh - 178px);
bottom: 120px;
overflow-y: scroll;
text-align: center;
z-index: 3;
background: #525252;
}
.coview_add_member_area {
width: 70vw;
height: 70vh;
top: 15vh;
left: 15vw;
flex-wrap: wrap;
display: flex;
position: absolute;
z-index: 4;
background: white;
}
.tab_class {
width: calc(100%/2);
height: 50px;
background-color: #E0E0E0;
line-height: 50px;
font-size: 15px;
text-align: center;
display: block;
float: left;
order: -1;
margin-bottom: 0;
border-bottom: 5px solid #0070CA;
}
input[name="tab_name"] {
display: none;
}
input:checked + .tab_class {
background-color: #0070CA;
color: white;
}
.content_class {
display: none;
width: 100%;
overflow-y: scroll;
}
input:checked + .tab_class + .content_class {
display: block;
height: calc(70vh - 50px);
}
.separator {
width: 100%;
height: 25px;
background: #C4C4C4;
line-height: 25px;
}
.separator label {
margin-left: 8px;
font-family: Noto Sans JP;
font-style: normal;
font-weight: normal;
font-size: 12px;
}
.coview_group_list, .coview_favorite_list, .coview_all_group_list {
margin-bottom: 0;
}
.coview_group_list li, .coview_favorite_list li, .coview_all_group_list li {
border-bottom: 1px solid #E2E8F0;
}
.chat_item_t {
font-size: 16px;
line-height: 20px;
color: #323743;
}
.chat_item_l {
height: 40px;
margin: 15px;
}
.chat_item_m {
white-space: nowrap;
overflow: hidden;
width: calc(100% - 160px);
}
.chat_item_r {
margin: 17px;
margin-left: auto;
}
.chat_item_r img {
width: 36px;
height: 36px;
}
.thubnail {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.thubnail img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.coview_group_tree {
width: 100%;
height: 40px;
color: black;
font-weight: 500;
font-size: 16px;
line-height: 40px;
margin-bottom: 0;
padding: 0px 8px;
}
.content_class hr {
border-bottom: 2px solid #E2E8F0;
margin: 0;
}
.coview_type_inbox {
padding: 29vh 0px;
}
.coview_type_cell {
display: inline-block;
width: 84px;
height: 112px;
margin: 10px;
}
.coview_type_area img {
width: 68px;
height: 68px;
}
.coview_type_area p {
margin: 8px 0px;
font-size: 16px;
line-height: 16px;
}
.coview_type_btn {
width: 68px;
height: 68px;
-webkit-appearance: none;
border: none;
padding: 0;
}
.member_profile_btn, .member_profile_btn_host {
width: 50vw;
height: 50vw;
padding: 0;
background: #525252;
float: left;
-webkit-appearance: none;
border: none;
position: relative;
}
.member_profile_btn_host::before {
content: "";
top: 0;
right: 0;
border-bottom: 5em solid transparent;
border-right: 5em solid #FF4747;
position: absolute;
z-index: 100;
}
.member_profile_btn_host::after {
display: block;
content: "ホスト";
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 20px;
top: 15px;
right: 5px;
transform: rotate(45deg);
color: #FFFFFF;
position: absolute;
z-index: 101;
}
.coview_font {
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
color: white;
}
/* --------------------------------------------------- */
/* Archive STYLE */
/* --------------------------------------------------- */
.inbox_archive { .inbox_archive {
width: 100%; width: 100%;
} }
......
public/index.html
...@@ -26,6 +26,112 @@ ...@@ -26,6 +26,112 @@
</script> </script>
</head> </head>
<body> <body>
<!-- coview share -->
<div class="coview_share_area">
<div class="coview_share_title">
<div class="coview_share_title_left_area col-3 coview_share_title_name" href="#">LIVE</div>
<div class="coview_share_title_left_area">
<p class="coview_font" id="coview_time">00:00</p>
</div>
<div class="coview_share_title_right_area">
<button class="btn coview_share_title_btn" type="button" id="coviewChangeTypeButton">
<img class="" src="./icon/ic_collaboration_type.png" alt="">
</button>
</div>
<div class="coview_share_title_right_area">
<button class="btn coview_share_title_btn" type="button" id="coviewAddMemberButton">
<img class="" src="./icon/ic_collaboration_add_member.png" alt="">
</button>
</div>
<div class="coview_share_title_right_area">
<button class="btn coview_share_title_btn" type="button" id="coviewMemberButton">
<img class="" src="./icon/ic_collaboration_member.png" alt="">
</button>
</div>
<div class="coview_share_title_right_area">
<button class="btn coview_share_title_btn" type="button" id="coviewShareCloseButton">
<img class="" src="./icon/ic_collaboration_close.png" alt="">
</button>
</div>
</div>
<div class="coview_share_body" id="coviewShare">
</div>
<div class="coview_type_area" id="coviewTypeArea">
</div>
<div class="coview_add_member_area">
<input type="radio" name="tab_name" id="tab1" checked>
<label class="tab_class" for="tab1" id="collaborationMyGroup">myGroup</label>
<div class="content_class">
<div class="separator">
<label id="collaborationFavorite">favorite</label>
</div>
<ul class="p-0 coview_favorite_list" id="coviewFavoriteList">
</ul>
<div class="separator">
<label id="collaborationSeparatorMyGroup">myGroup</label>
</div>
<ul class="p-0 coview_group_list" id="coviewGroupList">
</ul>
</div>
<input type="radio" name="tab_name" id="tab2" >
<label class="tab_class" for="tab2" id="collaborationAllGroup">allGroup</label>
<div class="content_class">
<label class="coview_group_tree coview_font">Root</label>
<hr></hr>
<ul class="p-0 coview_all_group_list" id="coviewAllGroupList">
</ul>
</div>
</div>
<div class="coview_member_area" id="coviewMemberArea">
</div>
<div class="tool_area_switcher" id="toolAreaSwitcher">
<button class="tool_hide_btn" id="toolHideBtn">
<img class="" src="./icon/ic_collaboration_tool_hide.png" alt="">
</button>
<button class="tool_show_btn" id="toolShowBtn">
<img class="" src="./icon/ic_collaboration_tool_show.png" alt="">
</button>
</div>
<div class="coview_tool_area" id="coviewToolArea">
<div class="coview_tool_area_left">
<button class="coview_tool_btn" id="penBtn">
<img class="" src="./icon/ic_collaboration_tool_pen.png" alt="">
</button>
<button class="coview_tool_btn" id="pointerBtn">
<img class="" src="./icon/ic_collaboration_tool_pointer.png" alt="">
</button>
<button class="coview_tool_btn" id="clearBtn">
<img class="" src="./icon/ic_collaboration_tool_clear.png" alt="">
</button>
</div>
<div class="coview_tool_area_right">
<button class="coview_tool_btn" id="pageBackBtn">
<img class="" src="./icon/ic_collaboration_tool_back.png" alt="">
</button>
<button class="coview_tool_btn" id="pageForwardBtn">
<img class="" src="./icon/ic_collaboration_tool_forward.png" alt="">
</button>
<button class="coview_tool_btn_long" id="captureBtn">
<img class="" src="./icon/ic_collaboration_tool_capture.png" alt="">
<p class="coview_font" id="coviewCapture">Capture</p>
</button>
</div>
</div>
<div class="coview_bottom_area">
<div class="bottom_area">
<button class="bottom_btn" id="coviewMicBtn">
<img class="" src="./icon/ic_collaboration_mic_off.png" alt="">
</button>
<button class="bottom_btn" id="coviewRecBtn">
<img class="" src="./icon/ic_collaboration_record.png" alt="">
</button>
<button class="bottom_btn" style="background: red" id="coviewLeaveRoomBtn">
<img class="" src="./icon/ic_collaboration_disconnect.png" alt="">
</button>
</div>
</div>
</div>
<nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow"> <nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
<ul class="navbar-nav col-3" id="navbarLeft"> <ul class="navbar-nav col-3" id="navbarLeft">
<button class="btn btn-primary" type="button" id="backButton"> <button class="btn btn-primary" type="button" id="backButton">
...@@ -183,7 +289,7 @@ ...@@ -183,7 +289,7 @@
<div class="mesgs"> <div class="mesgs">
<div class="msg_history" id="messages"> <div class="msg_history" id="messages">
</div> </div>
<div class="type_msg fixed-bottom"> <div class="type_msg">
<div class="row"> <div class="row">
<div class="msg_notification" id="messageNotification"> <div class="msg_notification" id="messageNotification">
</div> </div>
...@@ -218,6 +324,41 @@ ...@@ -218,6 +324,41 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 協業タブ -->
<div class="collaboration_tab fixed-bottom">
<ul>
<li>
<a class="collaboration_tab_btn" id="coviewShareChat">
<img src="./icon/ic_collaboration_call.png" alt="">
<p class="coview_font" id="collaboration_call">Call</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewShareDoc">
<img src="./icon/ic_collaboration_document.png" alt="">
<p class="coview_font" id="collaboration_document">Document</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewSharePhoto">
<img src="./icon/ic_collaboration_photo.png" alt="">
<p class="coview_font" id="collaboration_photo">Photo</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewShareLive">
<img src="./icon/ic_collaboration_live.png" alt="">
<p class="coview_font" id="collaboration_live">Live</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewShareBoad">
<img src="./icon/ic_collaboration_boad.png" alt="">
<p class="coview_font" id="collaboration_boad">Boad</p>
</a>
</li>
</ul>
</div>
</div> </div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
...@@ -534,6 +675,87 @@ ...@@ -534,6 +675,87 @@
</div> </div>
</div> </div>
</script> </script>
<script id="coview-type-template" type="text/template">
<div class="coview_type_inbox">
<div>
<div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId1}}">
<img class="" src="{{imgUrl1}}" alt="">
</button>
<p class="coview_font">{{type1}}</p>
</div>
<div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId2}}">
<img class="" src="{{imgUrl2}}" alt="">
</button>
<p class="coview_font">{{type2}}</p>
</div>
</div>
<div>
<div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId3}}">
<img class="" src="{{imgUrl3}}" alt="">
</button>
<p class="coview_font">{{type3}}</p>
</div>
<div class="coview_type_cell">
<button class="coview_type_btn" id="{{btnId4}}">
<img class="" src="{{imgUrl4}}" alt="">
</button>
<p class="coview_font">{{type4}}</p>
</div>
</div>
</div>
</script>
<script id="coview-member-template" type="text/template">
<button class="{{className}}">
<img class="" src="{{profileImage}}" alt="">
</button>
</script>
<script id="coview-favorite-template" type="text/template">
<li class="d-flex align-items-center">
<div class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<img src="{{profileImage}}" alt="" />
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t coview_font">
<span>{{userName}}</span>
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<img src="./icon/ic_collaboration_favorite.png" alt="" />
</div>
</div>
</div>
</div>
</li>
</script>
<script id="coview-group-template" type="text/template">
<li class="d-flex align-items-center">
<div class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<img src="{{profileImage}}" alt="" />
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t coview_font">
<span>{{userName}}</span>
</div>
</div>
</div>
</div>
</div>
</script>
<script id="archive-template" type="text/template"> <script id="archive-template" type="text/template">
<div class="archive_list col-12"> <div class="archive_list col-12">
<div class="archive_data"> <div class="archive_data">
...@@ -612,6 +834,8 @@ ...@@ -612,6 +834,8 @@
<script src="./js/chat-util.js"></script> <script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script> <script src="./js/chat-db.js"></script>
<script src="./js/chat-websocket.js"></script> <script src="./js/chat-websocket.js"></script>
<script src="https://app.coview.co.kr:7443/coview_api.js"></script>
<script src="./js/share.js"></script>
</body> </body>
<script> <script>
jQuery('#homeButton').on('click', function() { jQuery('#homeButton').on('click', function() {
......
public/js/chat-ui.js
...@@ -31,7 +31,7 @@ $(window).on('resize', function() { ...@@ -31,7 +31,7 @@ $(window).on('resize', function() {
$(".chat_list").addClass("col-6").removeClass("col-12"); $(".chat_list").addClass("col-6").removeClass("col-12");
$(".squareBoxContent span").addClass("landscape_span"); $(".squareBoxContent span").addClass("landscape_span");
$(".mesgs").addClass("landscape_mesgs"); $(".msg_history").addClass("landscape_msg_history");
} else { } else {
$(".group_list").removeClass("col-6").addClass("col-12"); $(".group_list").removeClass("col-6").addClass("col-12");
...@@ -39,7 +39,7 @@ $(window).on('resize', function() { ...@@ -39,7 +39,7 @@ $(window).on('resize', function() {
$(".chat_list").removeClass("col-6").addClass("col-12"); $(".chat_list").removeClass("col-6").addClass("col-12");
$(".squareBoxContent span").removeClass("landscape_span"); $(".squareBoxContent span").removeClass("landscape_span");
$(".mesgs").removeClass("landscape_mesgs"); $(".msg_history").removeClass("landscape_msg_history");
} }
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
...@@ -428,9 +428,9 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) { ...@@ -428,9 +428,9 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
switch(target) { switch(target) {
case '#pills-chat': case '#pills-chat':
if (CHAT_UI.isLandscapeMode()) { if (CHAT_UI.isLandscapeMode()) {
$(".mesgs").addClass("landscape_mesgs"); $(".msg_history").addClass("landscape_msg_history");
} else { } else {
$(".mesgs").removeClass("landscape_mesgs"); $(".msg_history").removeClass("landscape_msg_history");
} }
CHAT.globalIsInvite = true; CHAT.globalIsInvite = true;
$('.chatRoomIcon, .titleRoomName, #backButton').show(); $('.chatRoomIcon, .titleRoomName, #backButton').show();
...@@ -881,6 +881,17 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) { ...@@ -881,6 +881,17 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#favorite-seperator").text(getLocalizedString("favorite")) $("#favorite-seperator").text(getLocalizedString("favorite"))
$("#mygroup-seperator").text(getLocalizedString("mygroup")) $("#mygroup-seperator").text(getLocalizedString("mygroup"))
$("#collaboration_call").text(getLocalizedString("collaboration_call"))
$("#collaboration_document").text(getLocalizedString("collaboration_document"))
$("#collaboration_photo").text(getLocalizedString("collaboration_photo"))
$("#collaboration_live").text(getLocalizedString("collaboration_live"))
$("#collaboration_boad").text(getLocalizedString("collaboration_boad"))
$("#collaborationMyGroup").text(getLocalizedString("collaborationMyGroup"))
$("#collaborationSeparatorMyGroup").text(getLocalizedString("collaborationSeparatorMyGroup"))
$("#collaborationAllGroup").text(getLocalizedString("collaborationAllGroup"))
$("#collaborationFavorite").text(getLocalizedString("collaborationFavorite"))
$("#coviewCapture").text(getLocalizedString("coviewCapture"))
} }
// 画像の読み込みが全て終わったタイミングでコールバック実行 // 画像の読み込みが全て終わったタイミングでコールバック実行
...@@ -1079,6 +1090,8 @@ CHAT_UI.refreshRoomList = function(roomType) { ...@@ -1079,6 +1090,8 @@ CHAT_UI.refreshRoomList = function(roomType) {
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = $(jQuery.parseHTML(html)).on('click', function() {
let roomId = $(this).data('roomId'); let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname'); let roomName = $(this).data('roomname');
globalUserInfo.roomId = roomId;
globalUserInfo.roomName = roomName;
CHAT_UI.joinRoom(roomId,roomName); CHAT_UI.joinRoom(roomId,roomName);
//TODO ルームに入る処理追加必要 //TODO ルームに入る処理追加必要
}); });
......
public/js/chat.js
...@@ -8,6 +8,9 @@ CHAT.globalIsInvite = false; ...@@ -8,6 +8,9 @@ CHAT.globalIsInvite = false;
//ログイン中の部屋情報を保存する変数 //ログイン中の部屋情報を保存する変数
CHAT.globalLoginParameter; CHAT.globalLoginParameter;
// 協業用
let globalUserInfo = new Object()
CHAT.saveRoomInfo = function(roomId, roomName) { CHAT.saveRoomInfo = function(roomId, roomName) {
CHAT.globalLoginParameter.roomId = roomId; CHAT.globalLoginParameter.roomId = roomId;
CHAT.globalLoginParameter.roomName = roomName; CHAT.globalLoginParameter.roomName = roomName;
...@@ -230,6 +233,14 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam ...@@ -230,6 +233,14 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
} }
CHAT_UI.htmlElementTextInitialize(languageCode) CHAT_UI.htmlElementTextInitialize(languageCode)
// 協業用
globalUserInfo.sid = sid;
globalUserInfo.loginId = loginId;
globalUserInfo.shopName = shopName;
globalUserInfo.roomId = roomId;
globalUserInfo.roomName = roomName;
globalUserInfo.languageCode = languageCode;
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
socket.emit('join', loginParam, function(err) { socket.emit('join', loginParam, function(err) {
if (err) { if (err) {
......
public/js/language_en.js
...@@ -59,6 +59,22 @@ $.lang.en = { ...@@ -59,6 +59,22 @@ $.lang.en = {
"favorite":"Favorite List", "favorite":"Favorite List",
"mygroup":"My Group", "mygroup":"My Group",
"groupChatRoom":"Group", "groupChatRoom":"Group",
"collaboration_call":"Call",
"collaboration_document":"Document",
"collaboration_photo":"Photo",
"collaboration_live":"Live",
"collaboration_boad":"Boad",
"talking":"Talking",
"sharePhoto":"Photo",
"shareLive":"Live",
"shareDocument":"Document",
"shareBoad":"Boad",
"shareVoice":"Voice",
"collaborationFavorite":"Favorite",
"collaborationMyGroup":"My Group",
"collaborationSeparatorMyGroup":"My Group",
"collaborationAllGroup":"All Group",
"coviewCapture":"Capture",
"archiveListTitle":"Archive", "archiveListTitle":"Archive",
"archiveTypeImage":"Image", "archiveTypeImage":"Image",
"archiveTypeMovie":"Movie", "archiveTypeMovie":"Movie",
......
public/js/language_ja.js
...@@ -59,6 +59,22 @@ $.lang.ja = { ...@@ -59,6 +59,22 @@ $.lang.ja = {
"favorite":"お気に入りリスト", "favorite":"お気に入りリスト",
"mygroup":"マイグループ", "mygroup":"マイグループ",
"groupChatRoom":"グループ", "groupChatRoom":"グループ",
"collaboration_call":"通話",
"collaboration_document":"文書",
"collaboration_photo":"画像",
"collaboration_live":"動画",
"collaboration_boad":"ボード",
"talking":"通話中",
"sharePhoto":"写真共有",
"shareLive":"現場中継",
"shareDocument":"文書共有",
"shareBoad":"落書き",
"shareVoice":"音声共有",
"collaborationFavorite":"お気に入り",
"collaborationMyGroup":"マイグループ",
"collaborationSeparatorMyGroup":"マイグループ",
"collaborationAllGroup":"全グループ",
"coviewCapture":"キャプチャ",
"archiveListTitle":"アーカイブ", "archiveListTitle":"アーカイブ",
"archiveTypeImage":"画像", "archiveTypeImage":"画像",
"archiveTypeMovie":"動画", "archiveTypeMovie":"動画",
......
public/js/language_ko.js
...@@ -59,6 +59,22 @@ $.lang.ko = { ...@@ -59,6 +59,22 @@ $.lang.ko = {
"favorite":"즐겨찾기리스트", "favorite":"즐겨찾기리스트",
"mygroup":"마이그룹", "mygroup":"마이그룹",
"groupChatRoom":"그룹", "groupChatRoom":"그룹",
"collaboration_call":"통화",
"collaboration_document":"문서",
"collaboration_photo":"이미지",
"collaboration_live":"동영상",
"collaboration_boad":"보드",
"talking":"통화 중",
"sharePhoto":"이미지",
"shareLive":"동영상",
"shareDocument":"문서",
"shareBoad":"보드",
"shareVoice":"통화",
"collaborationFavorite":"즐겨찾기",
"collaborationMyGroup":"마이그룹",
"collaborationSeparatorMyGroup":"마이그룹",
"collaborationAllGroup":"전체그룹",
"coviewCapture":"캡처",
"archiveListTitle":"아카이브", "archiveListTitle":"아카이브",
"archiveTypeImage":"이미지", "archiveTypeImage":"이미지",
"archiveTypeMovie":"동영상", "archiveTypeMovie":"동영상",
......
public/js/share.js 0 → 100644
let coview_api = new CoviewApi();
$(function() {
var coviewApiActive = coview_api.Init (
{
testSTRParam : "param1",
testNUMParam : 77,
testBOOLParam : false,
coview_api_srv_addr: "https://app.coview.co.kr:7443",
coview_wrap_id : "coviewShare",
}
);
// special button IN Chat ui
$("#coviewShareMainBtn").on("click", function(e) {
e.stopPropagation();
if($(".coview_share_dropdown_bar").is(':visible') == true) {
Coview_shareDropdownHide();
if($(".coview_share_photo_select_bubble").is(':visible') == true) {
$(".coview_share_photo_select_bubble").slideUp();
}
} else {
$(".coview_share_dropdown_bar").slideDown();
}
});
// ナビゲーションバー
// 協業タイプ変更ボタン
$("#coviewChangeTypeButton").on("click", function(e) {
// ナビゲーションボタン
$("#coviewChangeTypeButton").hide();
$("#coviewAddMemberButton").hide();
$("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show();
// 協業タイプ選択画面表示
$(".coview_type_area").show();
});
// 写真共有
$("#photoBtn").on("click", function(e) {
console.log("写真共有");
// TODO
});
// 現場中継
$("#liveBtn").on("click", function(e) {
console.log("現場中継");
// TODO
});
// 文書共有
$("#documentBtn").on("click", function(e) {
console.log("文書共有");
// TODO
});
// 落書き
$("#boadBtn").on("click", function(e) {
console.log("落書き");
// TODO
});
// 音声共有
$("#voiceBtn").on("click", function(e) {
console.log("音声共有");
// TODO
});
// メンバー招待ボタン
$("#coviewAddMemberButton").on("click", function(e) {
// ナビゲーションボタン
$("#coviewChangeTypeButton").hide();
$("#coviewAddMemberButton").hide();
$("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show();
// メンバー招待画面表示
Coview_setCoviewAddMember();
$(".coview_add_member_area").show();
});
// メンバー表示ボタン
$("#coviewMemberButton").on("click", function(e) {
// ナビゲーションボタン
$("#coviewChangeTypeButton").hide();
$("#coviewAddMemberButton").hide();
$("#coviewMemberButton").hide();
$("#coviewShareCloseButton").show();
// メンバー表示
$(".coview_member_area").show();
});
// 閉じるボタン
$("#coviewShareCloseButton").on("click", function(e) {
Coview_setNavigationMenu();
$(".coview_type_area").hide();
$(".coview_add_member_area").hide();
// 画面表示
switch (globalUserInfo.coWorkType) {
case "audio":
$(".coview_member_area").show();
break;
default:
$(".coview_member_area").hide();
}
});
// コントロールメニュー
// コントロールメニュー非表示
$("#toolHideBtn").on("click", function(e) {
$(".tool_hide_btn").hide();
$(".coview_tool_area").hide();
$(".coview_on_screen_btn_area").hide();
$(".coview_bottom_area").hide();
$("#coviewMemberArea").css({'height':'calc(100vh - 60px)'});
$("#coviewMemberArea").css({'bottom':'0px'});
$("#toolAreaSwitcher").css({'bottom':'0'});
$(".tool_show_btn").show();
});
// コントロールメニュー表示
$("#toolShowBtn").on("click", function(e) {
$(".tool_hide_btn").show();
$(".coview_tool_area").show();
$(".coview_bottom_area").show();
$("#coviewMemberArea").css({'height':'calc(100vh - 178px)'});
$("#coviewMemberArea").css({'bottom':'120px'});
$("#toolAreaSwitcher").css({'bottom':'198px'});
$(".tool_show_btn").hide();
});
// ペン
$("#penBtn").on("click", function(e) {
var flg = $(this).hasClass("active");
if (flg == true) {
$(this).removeClass("active");
document.getElementById('penBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_tool_pen.png" alt="">';
FreeDrawOnOff("on");
} else {
$(this).addClass("active");
document.getElementById('penBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_tool_pen.png" alt="">';
FreeDrawOnOff("off");
}
});
// ポインター
$("#pointerBtn").on("click", function(e) {
var flg = $(this).hasClass("active");
if (flg == true) {
$(this).removeClass("active");
document.getElementById('pointerBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_tool_pointer.png" alt="">';
ColorDrawOnOff("on");
} else {
$(this).addClass("active");
document.getElementById('pointerBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_tool_pointer.png" alt="">';
ColorDrawOnOff("off");
}
});
// クリア
$("#clearBtn").on("click", function(e) {
cleardrawOnCanvas();
});
// ページ(戻る)
$("#pageBackBtn").on("click", function(e) {
// TODO
});
// ページ(進む)
$("#pageForwardBtn").on("click", function(e) {
// TODO
});
// キャプチャ
$("#captureBtn").on("click", function(e) {
// TODO
});
// マイク
$("#coviewMicBtn").on("click", function(e) {
var flg = $(this).hasClass("active");
if (flg == true) {
$(this).removeClass("active");
document.getElementById('coviewMicBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_mic_off.png" alt=""> ';
userMute();
} else {
$(this).addClass("active");
document.getElementById('coviewMicBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_mic_on.png" alt=""> ';
userUnMute();
}
});
// レコード
$("#coviewRecBtn").on("click", function(e) {
var flg = $(this).hasClass("active");
if (flg == true) {
$(this).removeClass("active");
document.getElementById('coviewRecBtn').innerHTML = '<img class="" src="./icon/ic_collaboration_record.png" alt="">';
// TODO 記録終了
// TODO アーカイブ保存
} else {
$(this).addClass("active");
document.getElementById('coviewRecBtn').innerHTML = '<img class="" src="https://app.coview.co.kr:7443/office_img/api/icon_api_record_stop.png" alt="">';
// TODO 記録開始
}
});
// 退室
$("#coviewLeaveRoomBtn").on("click", function(e) {
coview_api.LeaveRoom();
$(".coview_share_area").hide();
});
$("body").on("click", function() {
Coview_shareDropdownHide();
});
$(document).on("click", ".coview_share_request", function() {
console.log("globalUserInfo", globalUserInfo);
if($(this).hasClass("video") == true) {
globalUserInfo.coWorkType = "video";
$(".coview_share_title_name").text("LIVE");
} else {
globalUserInfo.coWorkType = "image";
$(".coview_share_title_name").text("IMAGE");
}
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
});
// 協業タブ
// 通話タブ
$("#coviewShareChat").on("click", function() {
console.log("ON click coviewShareChat");
globalUserInfo.coWorkType = "audio";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
});
// 文書タブ
$("#coviewShareDoc").on("click", function() {
console.log("ON click coviewShareDoc");
alert("INTO a document share mode (only audio)");
globalUserInfo.coWorkType = "audio";
// TODO 文書協業画面へ遷移
});
// 画像タブ
$("#coviewSharePhoto").on("click", function(e) {
e.stopPropagation();
console.log("ON click coviewSharePhoto");
if($(".coview_share_photo_select_bubble").is(':visible') == true) {
$(".coview_share_photo_select_bubble").slideUp();
} else {
$(".coview_share_photo_select_bubble").slideDown();
}
});
// 画像(カメラ起動)
$("#coviewSharePhotoCamera").on("click", function() {
$(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "camera";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
});
// 画像(カメラロール)
$("#coviewSharePhotoGalary").on("click", function() {
$(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "galary";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
});
// 動画タブ
$("#coviewShareLive").on("click", function() {
console.log("ON click coviewShareLive");
globalUserInfo.coWorkType = "video";
console.log("globalUserInfo", globalUserInfo);
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
});
// ボードタブ
$("#coviewShareBoad").on("click", function() {
console.log("ON click coviewShareBoad");
globalUserInfo.coWorkType = "audio";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
});
// Fermi_API連動
coview_api.addEventListener ("ready", function () {
console.log("=============> READY : ready for coview api");
coview_api.Login(globalUserInfo.loginId);
});
coview_api.addEventListener ("start", function () {
console.log("=============> START : share start");
$("#loadingIndicator").removeClass("full_active");
});
coview_api.addEventListener ("destroy", function () {
console.log("=============> START : share start");
coview_api.LeaveRoom();
$(".coview_share_area").hide();
$("#loadingIndicator").removeClass("full_active");
});
coview_api.addEventListener ("message", async function (event, json) {
console.log("+++ addEventListener", json);
console.log("processMessage api = ", json.api);
switch (json.api){
case "LoginResponse":
break;
case "CreateRoomResponse":
if(json.resultCode == 200){
var coviewInviteMessage = "coviewsharerequest:" + globalUserInfo.coWorkType;
socket.emit('createMessage', {
text: coviewInviteMessage
}, 0);
} else {
}
break;
case "joinRoomInfoResponse":
if(json.resultCode == 200){
} else {
// alert(json.resultMsg + "(" + json.resultCode + ")" );
alert("Not exist sharing call (" + json.resultCode + ")\nPlease using share menu.");
coview_api.LeaveRoom();
$(".coview_share_area").hide();
$("#loadingIndicator").removeClass("full_active");
}
break;
default:
// console.log('Unrecognized api', json);
break;
}
});
});
function Coview_shareDropdownHide() {
$(".coview_share_dropdown_bar").slideUp();
$(".coview_share_photo_select_bubble").slideUp();
}
// 協業画面へ遷移
function Coview_moveToVideoShareArea() {
$("#loadingIndicator").addClass("full_active");
$(".coview_share_title_name").text(getLocalizedString("talking"));
// 表示設定
Coview_setShareArea();
Coview_setNavigationMenu();
Coview_setControlMenu();
Coview_setCoviewTypeBtn();
Coview_setCoviewMember();
// 時間計測開始
startTime = new Date().getTime();
timerId = setTimeout(Coview_setTime, 1000);
}
// 協業画面の表示設定
function Coview_setShareArea() {
switch (globalUserInfo.coWorkType) {
case "audio":
$(".coview_share_area").show();
$(".coview_member_area").show();
$(".coview_type_area").hide();
$(".coview_add_member_area").hide();
break;
default:
$(".coview_share_area").show();
$(".coview_member_area").hide();
$(".coview_type_area").hide();
$(".coview_add_member_area").hide();
}
}
// ナビゲーションバーの表示設定
function Coview_setNavigationMenu() {
switch (globalUserInfo.coWorkType) {
case "audio":
$("#coviewChangeTypeButton").show();
$("#coviewAddMemberButton").show();
$("#coviewMemberButton").hide();
$("#coviewShareCloseButton").hide();
break;
default:
$("#coviewChangeTypeButton").show();
$("#coviewAddMemberButton").show();
$("#coviewMemberButton").show();
$("#coviewShareCloseButton").hide();
}
}
// コントロールメニューの表示設定
function Coview_setControlMenu() {
switch (globalUserInfo.coWorkType) {
case "audio":
$('#toolAreaSwitcher').hide();
$('#coviewToolArea').hide();
break;
// TODO 他の協業の場合
default:
$('#toolAreaSwitcher').show();
$('#coviewToolArea').show();
}
}
// 協業タイプ選択画面の設定
function Coview_setCoviewTypeBtn() {
// 初期化
$('#coviewTypeArea').html('');
// 様式を読み込む
const typeTemplate = $('#coview-type-template').html();
switch (globalUserInfo.coWorkType) {
case "audio":
let html = Mustache.render(typeTemplate, {
btnId1: "photoBtn",
imgUrl1: "./icon/ic_collaboration_record.png",
type1: getLocalizedString("sharePhoto"),
btnId2: "liveBtn",
imgUrl2: "./icon/ic_collaboration_record.png",
type2: getLocalizedString("shareLive"),
btnId3: "documentBtn",
imgUrl3: "./icon/ic_collaboration_record.png",
type3: getLocalizedString("shareDocument"),
btnId4: "boadBtn",
imgUrl4: "./icon/ic_collaboration_record.png",
type4: getLocalizedString("shareBoad")
});
let obj = $(jQuery.parseHTML(html))
$('#coviewTypeArea').append(obj);
break;
// TODO　他のケース
default:
}
}
// 協業参加メンバー画面の設定
function Coview_setCoviewMember() {
// 初期化
$('#coviewMemberArea').html('');
// メンバー取得
var memberList = coview_api.GetMemberList();
// 様式を読み込む
const memberTemplate = $('#coview-member-template').html();
memberList.forEach(function(member) {
// ホストの場合は右上に帯を追加
// TODO ホスト判定＆プロフィール画像取得
var className = "member_profile_btn_host";//(member == 4 ? "member_profile_btn_host":"member_profile_btn");
let html = Mustache.render(memberTemplate, {
className: className,
profileImage: ""
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// TODO ネームカード表示
});
$('#coviewMemberArea').append(obj);
});
}
//協業メンバー招待画面の設定
function Coview_setCoviewAddMember() {
// 初期化
$('#coviewFavoriteList').html('');
$('#coviewGroupList').html('');
$('#coviewAllGroupList').html('');
// TODO グループ情報取得
var favoriteList;
var groupList;
var allGroupList;
// お気に入り
const favoriteTemplate = $('#coview-favorite-template').html();
favoriteList.forEach(function(group) {
let html = Mustache.render(favoriteTemplate, {
profileImage: "https://www.silhouette-illust.com/wp-content/uploads/2016/11/15795-300x300.jpg",
userName: "ユーザー名"
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// TODO
console.log("お気に入りがタップされました");
});
$('#coviewFavoriteList').append(obj);
});
// お気に入り以外のグループ
const groupTemplate = $('#coview-group-template').html();
groupList.forEach(function(group) {
let html = Mustache.render(groupTemplate, {
profileImage: "https://www.silhouette-illust.com/wp-content/uploads/2016/11/15795-300x300.jpg",
userName: "ユーザー名"
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// TODO
console.log("グループがタップされました");
});
$('#coviewGroupList').append(obj);
});
// 全てのグループ
const allGroupTemplate = $('#coview-favorite-template').html();
allGroupList.forEach(function(group) {
let html = Mustache.render(allGroupTemplate, {
profileImage: "https://www.silhouette-illust.com/wp-content/uploads/2016/11/15795-300x300.jpg",
userName: "ユーザー名"
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// TODO
console.log("グループがタップされました");
});
$('#coviewAllGroupList').append(obj);
});
}
// 経過時間の計算・表示
var timerId;
var startTime;
function Coview_setTime() {
// 経過時間計算
nowTime = new Date().getTime();
diff = new Date(nowTime - startTime);
// 時間表示
var sec = diff.getSeconds();
var min = diff.getMinutes();
var strSec = "" + sec;
if ( strSec.length < 2) {
strSec = "0" + strSec;
}
strMin = "" + min;
if ( strMin.length < 2) {
strMin = "0" + strMin;
}
var strTime = strMin + ":" + strSec;
document.getElementById("coview_time").innerHTML = strTime;
timerId = setTimeout(Coview_setTime, 1000);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment