Skip to content

C
chat_webview
Commit c5dc44dc by Takatoshi Miura
Options

協業タブ作成

parent 507009f6
Showing with 273 additions and 182 deletions
public/css/chat.css
...@@ -764,152 +764,169 @@ a.article:hover { ...@@ -764,152 +764,169 @@ a.article:hover {
/* COLLABORATION STYLE */ /* COLLABORATION STYLE */
/* --------------------------------------------------- */ /* --------------------------------------------------- */
#coviewShareMainBtn{ #coviewShareMainBtn {
padding-top: 9px; padding-top: 9px;
} }
.coview_share_area {
.coview_share_area{ display: none;
display: none; position: absolute;
top: 0;
position: absolute; left: 0;
top: 0; width: 100%;
left: 0; height: 100vh;
width: 100%; z-index: 1050;
height: 100vh; }
z-index: 1050;
} .coview_share_title {
.coview_share_title{ background-color: #095395!important;
background-color: #095395!important; border-color: #095395!important;
border-color: #095395!important; width: 100%;
width: 100%; height: 58px;
height: 58px; }
}
.coview_share_body{ .coview_share_body {
width: 100%; width: 100%;
height: calc(100vh - 58px); height: calc(100vh - 58px);
} }
.coview_share_dropdown_bar{ .coview_share_title_left_area {
display: none; display: inline-block;
list-style: none; height: 58px;
padding: unset; line-height: 58px;
margin: unset; padding: 0;
/* padding-top: 58px; */ margin: 0;
background: #000; }
position: absolute;
width: 100%; .coview_share_title_btn {
top: 57px; display: inline-block;
left: 0px; margin-left: 10px;
padding-top: 10px; margin-top: 4px;
} color: #fff;
.coview_share_dropdown_bar ul{ }
list-style: none;
padding: unset; .coview_share_title_name {
margin: unset; display: inline-block;
} height: 58px;
.coview_share_dropdown_bar li{ line-height: 58px;
display: inline-block; padding: 0;
width: 24%; margin: 0;
height: 75px; color: #fff;
line-height: 52px; }
margin: unset;
padding: unset; .coview_share_photo_select_bubble {
background: #000; display: none;
text-align: center; position: absolute;
} padding: 2px;
.coview_share_dropdown_btn{ background: #3e3e3e;
background: transparent; border-radius: 5px;
border: none; margin-top: 156px;
width: 100%; margin-left: 117px;
padding: unset; font-size: 12px;
text-align: center; }
}
.coview_share_dropdown_btn img{ .coview_share_photo_select_bubble:after {
width: 38px; border-top: 0 solid transparent;
height: 38px; border-left: 5px solid transparent;
vertical-align: middle; border-right: 5px solid transparent;
} border-bottom: 10px solid #3e3e3e;
.coview_share_dropdown_btn span{ content: "";
display: block; position: absolute;
color: #fff; top: -10px;
margin-top: -11px; left: 22px;
font-size: 0.85em; }
}
.coview_share_photo_select_bubble_in_button {
.coview_share_title_left_area{ width: 106px;
display: inline-block; height: 39px;
height: 58px; border: none;
line-height: 58px; text-align: left;
padding: 0; }
margin: 0;
} .coview_share_photo_select_bubble_in_button.cam {
.coview_share_title_btn{ border-top-left-radius: 5px;
display: inline-block; border-top-right-radius: 5px;
margin-left: 10px; }
margin-top: 4px;
color: #fff;
}
.coview_share_title_name{
display: inline-block;
height: 58px;
line-height: 58px;
padding: 0;
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.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{ .coview_share_photo_select_bubble_in_button_img{
width: 27%; width: 27%;
} }
.coview_share_photo_select_bubble_in_button_text{ .coview_share_photo_select_bubble_in_button_text{
margin-left: 5px; 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;
} }
.coview_share_request{ .collaboration_tab_btn {
width: 100%; align-items: center;
height: 4em; justify-content: center;
background-image: linear-gradient(to top, #82b127, #30c8d2); flex: 1;
color: #fff; padding-top: 8px;
border: none; text-decoration: none;
border-radius: 5px; text-align: center;
word-break: break-all;
box-sizing: border-box;
} }
.collaboration_tab_btn img {
height: 32px;
width: 32px;
}
.collaboration_tab_btn p {
font-family: Noto Sans JP;
font-style: normal;
font-weight: bold;
font-size: 12px;
align-items: center;
color: #707070;
}
.coview_on_screen_btn {
width: 60px !important;
height: 60px !important;
margin: 30px 34px 30px 34px !important;
border-radius: 50px !important;
}
.coview_on_screen_btn img {
width: 60px !important;
height: 60px !important;
padding: 0px !important;
}
public/index.html
...@@ -173,6 +173,43 @@ ...@@ -173,6 +173,43 @@
<i class="fa fa-plus my-float"></i> <i class="fa fa-plus my-float"></i>
</a> </a>
</div> </div>
<!-- 協業タブ -->
<div class="collaboration_tab fixed-bottom">
<ul>
<li>
<a class="collaboration_tab_btn" id="coviewShareChat">
<img src="./images/ic_collaboration_call.png" alt="">
<p id="collaboration_call">Call</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewShareDoc">
<img src="./images/ic_collaboration_document.png" alt="">
<p id="collaboration_document">Document</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewSharePhoto">
<img src="./images/ic_collaboration_photo.png" alt="">
<p id="collaboration_photo">Photo</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewShareLive">
<img src="./images/ic_collaboration_live.png" alt="">
<p id="collaboration_live">Live</p>
</a>
</li>
<li>
<a class="collaboration_tab_btn" id="coviewShareBoad">
<img src="./images/ic_collaboration_boad.png" alt="">
<p id="collaboration_boad">Boad</p>
</a>
</li>
</ul>
</div>
</div> </div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
......
public/js/chat-ui.js
...@@ -871,6 +871,12 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) { ...@@ -871,6 +871,12 @@ 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"))
} }
// 画像の読み込みが全て終わったタイミングでコールバック実行 // 画像の読み込みが全て終わったタイミングでコールバック実行
......
public/js/language_en.js
...@@ -58,5 +58,10 @@ $.lang.en = { ...@@ -58,5 +58,10 @@ $.lang.en = {
"directMessageChatRoom":"DM", "directMessageChatRoom":"DM",
"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"
} }
public/js/language_ja.js
...@@ -58,5 +58,10 @@ $.lang.ja = { ...@@ -58,5 +58,10 @@ $.lang.ja = {
"directMessageChatRoom":"DM", "directMessageChatRoom":"DM",
"favorite":"お気に入りリスト", "favorite":"お気に入りリスト",
"mygroup":"マイグループ", "mygroup":"マイグループ",
"groupChatRoom":"グループ" "groupChatRoom":"グループ",
"collaboration_call":"通話",
"collaboration_document":"文書",
"collaboration_photo":"画像",
"collaboration_live":"動画",
"collaboration_boad":"ボード"
} }
public/js/language_ko.js
...@@ -58,5 +58,10 @@ $.lang.ko = { ...@@ -58,5 +58,10 @@ $.lang.ko = {
"directMessageChatRoom":"DM", "directMessageChatRoom":"DM",
"favorite":"즐겨찾기리스트", "favorite":"즐겨찾기리스트",
"mygroup":"마이그룹", "mygroup":"마이그룹",
"groupChatRoom":"그룹" "groupChatRoom":"그룹",
"collaboration_call":"통화",
"collaboration_document":"문서",
"collaboration_photo":"이미지",
"collaboration_live":"동영상",
"collaboration_boad":"보드"
} }
public/js/share.js
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
let coview_api = new CoviewApi(); let coview_api = new CoviewApi();
$(function(){ $(function() {
var coviewApiActive = coview_api.Init( var coviewApiActive = coview_api.Init (
{ {
testSTRParam : "param1", testSTRParam : "param1",
testNUMParam : 77, testNUMParam : 77,
...@@ -19,46 +19,39 @@ $(function(){ ...@@ -19,46 +19,39 @@ $(function(){
$("#coviewShareMainBtn").on("click", function(e){ $("#coviewShareMainBtn").on("click", function(e) {
e.stopPropagation(); e.stopPropagation();
if($(".coview_share_dropdown_bar").is(':visible') == true){ if($(".coview_share_dropdown_bar").is(':visible') == true) {
Coview_shareDropdownHide(); Coview_shareDropdownHide();
if($(".coview_share_photo_select_bubble").is(':visible') == true){ if($(".coview_share_photo_select_bubble").is(':visible') == true) {
$(".coview_share_photo_select_bubble").slideUp(); $(".coview_share_photo_select_bubble").slideUp();
} }
} } else {
else{
$(".coview_share_dropdown_bar").slideDown(); $(".coview_share_dropdown_bar").slideDown();
} }
}); });
$("#coviewShareCloseButton").on("click", function(e){ $("#coviewShareCloseButton").on("click", function(e) {
coview_api.LeaveRoom(); coview_api.LeaveRoom();
$(".coview_share_area").hide(); $(".coview_share_area").hide();
}); });
$("body").on("click", function(){ $("body").on("click", function() {
Coview_shareDropdownHide(); Coview_shareDropdownHide();
}); });
$(document).on("click", ".coview_share_request", function(){ $(document).on("click", ".coview_share_request", function() {
console.log("globalUserInfo", globalUserInfo); console.log("globalUserInfo", globalUserInfo);
if($(this).hasClass("video") == true){ if($(this).hasClass("video") == true) {
globalUserInfo.coWorkType = "video"; globalUserInfo.coWorkType = "video";
$(".coview_share_title_name").text("LIVE"); $(".coview_share_title_name").text("LIVE");
} } else {
else{
globalUserInfo.coWorkType = "image"; globalUserInfo.coWorkType = "image";
$(".coview_share_title_name").text("IMAGE"); $(".coview_share_title_name").text("IMAGE");
} }
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea(); Coview_moveToVideoShareArea();
}); });
// $('#coviewShareRequestVideo').bind('click', function() // $('#coviewShareRequestVideo').bind('click', function()
...@@ -68,28 +61,39 @@ $(function(){ ...@@ -68,28 +61,39 @@ $(function(){
// }); // });
/* --------------------------------------------------- */ /* --------------------------------------------------- */
/* Video, photo, chat, doc */ /* 協業タブ 　　　　　 */
/* --------------------------------------------------- */ /* --------------------------------------------------- */
$("#coviewShareChat").on("click", function(){
// 通話
$("#coviewShareChat").on("click", function() {
console.log("ON click coviewShareChat"); console.log("ON click coviewShareChat");
// 協業画面へ遷移
globalUserInfo.coWorkType = "audio";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("通話中");
});
// 文書
$("#coviewShareDoc").on("click", function() {
console.log("ON click coviewShareDoc");
alert("INTO a document share mode (only audio)");
globalUserInfo.coWorkType = "audio";
}); });
$("#coviewSharePhoto").on("click", function(e){ // 画像()
$("#coviewSharePhoto").on("click", function(e) {
e.stopPropagation(); e.stopPropagation();
console.log("ON click coviewSharePhoto"); console.log("ON click coviewSharePhoto");
if($(".coview_share_photo_select_bubble").is(':visible') == true) {
if($(".coview_share_photo_select_bubble").is(':visible') == true){
$(".coview_share_photo_select_bubble").slideUp(); $(".coview_share_photo_select_bubble").slideUp();
} } else {
else{
$(".coview_share_photo_select_bubble").slideDown(); $(".coview_share_photo_select_bubble").slideDown();
} }
}); });
// 画像(カメラ)
$("#coviewSharePhotoCamera").on("click", function() {
$("#coviewSharePhotoCamera").on("click", function(){
$(".coview_share_photo_select_bubble").hide(); $(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "camera"; globalUserInfo.coWorkType = "camera";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
...@@ -97,7 +101,9 @@ $(function(){ ...@@ -97,7 +101,9 @@ $(function(){
$(".coview_share_title_name").text("カメラ"); $(".coview_share_title_name").text("カメラ");
}); });
$("#coviewSharePhotoGalary").on("click", function(){
// 画像(ライブラリ)
$("#coviewSharePhotoGalary").on("click", function() {
$(".coview_share_photo_select_bubble").hide(); $(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "galary"; globalUserInfo.coWorkType = "galary";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
...@@ -106,7 +112,8 @@ $(function(){ ...@@ -106,7 +112,8 @@ $(function(){
$(".coview_share_title_name").text("ライブラリ"); $(".coview_share_title_name").text("ライブラリ");
}); });
$("#coviewShareLive").on("click", function(){ // 動画
$("#coviewShareLive").on("click", function() {
console.log("ON click coviewShareLive"); console.log("ON click coviewShareLive");
globalUserInfo.coWorkType = "video"; globalUserInfo.coWorkType = "video";
console.log("globalUserInfo", globalUserInfo); console.log("globalUserInfo", globalUserInfo);
...@@ -126,12 +133,17 @@ $(function(){ ...@@ -126,12 +133,17 @@ $(function(){
$(".coview_share_title_name").text("LIVE"); $(".coview_share_title_name").text("LIVE");
}); });
$("#coviewShareDoc").on("click", function(){ // ボード
console.log("ON click coviewShareDoc"); $("#coviewShareBoad").on("click", function() {
alert("INTO a document share mode (only audio)"); console.log("ON click coviewShareBoad");
// 協業画面へ遷移
globalUserInfo.coWorkType = "audio"; globalUserInfo.coWorkType = "audio";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("通話中");
}); });
coview_api.addEventListener ("ready", function () { coview_api.addEventListener ("ready", function () {
console.log("=============> READY : ready for coview api"); console.log("=============> READY : ready for coview api");
coview_api.Login(globalUserInfo.loginId); coview_api.Login(globalUserInfo.loginId);
...@@ -162,16 +174,13 @@ $(function(){ ...@@ -162,16 +174,13 @@ $(function(){
socket.emit('createMessage', { socket.emit('createMessage', {
text: coviewInviteMessage text: coviewInviteMessage
}, 0); }, 0);
} } else {
else{
} }
break; break;
case "joinRoomInfoResponse": case "joinRoomInfoResponse":
if(json.resultCode == 200){ if(json.resultCode == 200){
} } else {
else{
// alert(json.resultMsg + "(" + json.resultCode + ")" ); // alert(json.resultMsg + "(" + json.resultCode + ")" );
alert("Not exist sharing call (" + json.resultCode + ")\nPlease using share menu."); alert("Not exist sharing call (" + json.resultCode + ")\nPlease using share menu.");
coview_api.LeaveRoom(); coview_api.LeaveRoom();
...@@ -187,12 +196,19 @@ $(function(){ ...@@ -187,12 +196,19 @@ $(function(){
}); });
}); });
function Coview_shareDropdownHide(){ function Coview_shareDropdownHide() {
$(".coview_share_dropdown_bar").slideUp(); $(".coview_share_dropdown_bar").slideUp();
$(".coview_share_photo_select_bubble").slideUp(); $(".coview_share_photo_select_bubble").slideUp();
} }
function Coview_moveToVideoShareArea(){ // 協業画面へ遷移
function Coview_moveToVideoShareArea() {
$("#loadingIndicator").addClass("full_active"); $("#loadingIndicator").addClass("full_active");
$(".coview_share_area").show(); $(".coview_share_area").show();
// マイクを設定
document.getElementById('coviewMicCtrBtn').innerHTML = '\
<img class="coview_on_screen_btn_image_default" src="" alt="">\
<img class="coview_on_screen_btn_image_sub" src="" alt="">\
<div>Mic</div>';
} }
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