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 {
/* 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-color: #095395!important;
border-color: #095395!important;
width: 100%;
height: 58px;
}
.coview_share_body{
width: 100%;
height: calc(100vh - 58px);
}
.coview_share_dropdown_bar{
display: none;
list-style: none;
padding: unset;
margin: unset;
/* padding-top: 58px; */
background: #000;
position: absolute;
width: 100%;
top: 57px;
left: 0px;
padding-top: 10px;
}
.coview_share_dropdown_bar ul{
list-style: none;
padding: unset;
margin: unset;
}
.coview_share_dropdown_bar li{
display: inline-block;
width: 24%;
height: 75px;
line-height: 52px;
margin: unset;
padding: unset;
background: #000;
text-align: center;
}
.coview_share_dropdown_btn{
background: transparent;
border: none;
width: 100%;
padding: unset;
text-align: center;
}
.coview_share_dropdown_btn img{
width: 38px;
height: 38px;
vertical-align: middle;
}
.coview_share_dropdown_btn span{
display: block;
color: #fff;
margin-top: -11px;
font-size: 0.85em;
}
.coview_share_title_left_area{
display: inline-block;
height: 58px;
line-height: 58px;
padding: 0;
margin: 0;
}
.coview_share_title_btn{
display: inline-block;
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;
#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-color: #095395!important;
border-color: #095395!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;
}
.coview_share_title_btn {
display: inline-block;
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_img{
width: 27%;
width: 27%;
}
.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{
width: 100%;
height: 4em;
background-image: linear-gradient(to top, #82b127, #30c8d2);
color: #fff;
border: none;
border-radius: 5px;
.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-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 @@
<i class="fa fa-plus my-float"></i>
</a>
</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 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) {
$("#favorite-seperator").text(getLocalizedString("favorite"))
$("#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 = {
"directMessageChatRoom":"DM",
"favorite":"Favorite List",
"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 = {
"directMessageChatRoom":"DM",
"favorite":"お気に入りリスト",
"mygroup":"マイグループ",
"groupChatRoom":"グループ"
"groupChatRoom":"グループ",
"collaboration_call":"通話",
"collaboration_document":"文書",
"collaboration_photo":"画像",
"collaboration_live":"動画",
"collaboration_boad":"ボード"
}
public/js/language_ko.js
......@@ -58,5 +58,10 @@ $.lang.ko = {
"directMessageChatRoom":"DM",
"favorite":"즐겨찾기리스트",
"mygroup":"마이그룹",
"groupChatRoom":"그룹"
"groupChatRoom":"그룹",
"collaboration_call":"통화",
"collaboration_document":"문서",
"collaboration_photo":"이미지",
"collaboration_live":"동영상",
"collaboration_boad":"보드"
}
public/js/share.js
......@@ -4,8 +4,8 @@
let coview_api = new CoviewApi();
$(function(){
var coviewApiActive = coview_api.Init(
$(function() {
var coviewApiActive = coview_api.Init (
{
testSTRParam : "param1",
testNUMParam : 77,
......@@ -19,46 +19,39 @@ $(function(){
$("#coviewShareMainBtn").on("click", function(e){
$("#coviewShareMainBtn").on("click", function(e) {
e.stopPropagation();
if($(".coview_share_dropdown_bar").is(':visible') == true){
if($(".coview_share_dropdown_bar").is(':visible') == true) {
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();
}
}
else{
} else {
$(".coview_share_dropdown_bar").slideDown();
}
});
$("#coviewShareCloseButton").on("click", function(e){
$("#coviewShareCloseButton").on("click", function(e) {
coview_api.LeaveRoom();
$(".coview_share_area").hide();
});
$("body").on("click", function(){
$("body").on("click", function() {
Coview_shareDropdownHide();
});
$(document).on("click", ".coview_share_request", function(){
$(document).on("click", ".coview_share_request", function() {
console.log("globalUserInfo", globalUserInfo);
if($(this).hasClass("video") == true){
if($(this).hasClass("video") == true) {
globalUserInfo.coWorkType = "video";
$(".coview_share_title_name").text("LIVE");
}
else{
} else {
globalUserInfo.coWorkType = "image";
$(".coview_share_title_name").text("IMAGE");
}
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
});
// $('#coviewShareRequestVideo').bind('click', function()
......@@ -68,28 +61,39 @@ $(function(){
// });
/* --------------------------------------------------- */
/* Video, photo, chat, doc */
/* 協業タブ 　　　　　 */
/* --------------------------------------------------- */
$("#coviewShareChat").on("click", function(){
// 通話
$("#coviewShareChat").on("click", function() {
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();
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();
}
else{
} else {
$(".coview_share_photo_select_bubble").slideDown();
}
});
$("#coviewSharePhotoCamera").on("click", function(){
// 画像(カメラ)
$("#coviewSharePhotoCamera").on("click", function() {
$(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "camera";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
......@@ -97,7 +101,9 @@ $(function(){
$(".coview_share_title_name").text("カメラ");
});
$("#coviewSharePhotoGalary").on("click", function(){
// 画像(ライブラリ)
$("#coviewSharePhotoGalary").on("click", function() {
$(".coview_share_photo_select_bubble").hide();
globalUserInfo.coWorkType = "galary";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
......@@ -106,7 +112,8 @@ $(function(){
$(".coview_share_title_name").text("ライブラリ");
});
$("#coviewShareLive").on("click", function(){
// 動画
$("#coviewShareLive").on("click", function() {
console.log("ON click coviewShareLive");
globalUserInfo.coWorkType = "video";
console.log("globalUserInfo", globalUserInfo);
......@@ -126,12 +133,17 @@ $(function(){
$(".coview_share_title_name").text("LIVE");
});
$("#coviewShareDoc").on("click", function(){
console.log("ON click coviewShareDoc");
alert("INTO a document share mode (only audio)");
// ボード
$("#coviewShareBoad").on("click", function() {
console.log("ON click coviewShareBoad");
// 協業画面へ遷移
globalUserInfo.coWorkType = "audio";
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
Coview_moveToVideoShareArea();
$(".coview_share_title_name").text("通話中");
});
coview_api.addEventListener ("ready", function () {
console.log("=============> READY : ready for coview api");
coview_api.Login(globalUserInfo.loginId);
......@@ -162,16 +174,13 @@ $(function(){
socket.emit('createMessage', {
text: coviewInviteMessage
}, 0);
}
else{
} else {
}
break;
case "joinRoomInfoResponse":
if(json.resultCode == 200){
}
else{
} else {
// alert(json.resultMsg + "(" + json.resultCode + ")" );
alert("Not exist sharing call (" + json.resultCode + ")\nPlease using share menu.");
coview_api.LeaveRoom();
......@@ -187,12 +196,19 @@ $(function(){
});
});
function Coview_shareDropdownHide(){
function Coview_shareDropdownHide() {
$(".coview_share_dropdown_bar").slideUp();
$(".coview_share_photo_select_bubble").slideUp();
}
function Coview_moveToVideoShareArea(){
// 協業画面へ遷移
function Coview_moveToVideoShareArea() {
$("#loadingIndicator").addClass("full_active");
$(".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