From 1fb3e2de251f5f1d33a43cd13bc4ca6d3ae23c26 Mon Sep 17 00:00:00 2001 From: RblSb Date: Tue, 10 Mar 2020 08:55:09 +0300 Subject: Show/hide password button --- res/client.js | 43 +++++++++++++++++++++++++++---------------- res/css/cytube.css | 11 +++++++++++ res/css/des.css | 12 +++++++++--- res/index.html | 3 ++- src/client/Buttons.hx | 9 +++++++++ 5 files changed, 58 insertions(+), 20 deletions(-) diff --git a/res/client.js b/res/client.js index 4870d85..55b2328 100644 --- a/res/client.js +++ b/res/client.js @@ -417,8 +417,19 @@ client_Buttons.__name__ = true; client_Buttons.init = function(main) { client_Buttons.initChatInput(main); client_Buttons.initNavBar(main); + var passIcon = window.document.querySelector("#guestpass_icon"); + passIcon.onclick = function(e) { + var isOpen = passIcon.classList.toggle("glyphicon-eye-open"); + passIcon.classList.toggle("glyphicon-eye-close"); + var pass = window.document.querySelector("#guestpass"); + if(isOpen) { + return pass.type = "password"; + } else { + return pass.type = "text"; + } + }; var smilesBtn = window.document.querySelector("#smilesbtn"); - smilesBtn.onclick = function(e) { + smilesBtn.onclick = function(e1) { smilesBtn.classList.toggle("active"); var smilesWrap = window.document.querySelector("#smileswrap"); if(smilesBtn.classList.contains("active")) { @@ -427,18 +438,18 @@ client_Buttons.init = function(main) { return smilesWrap.style.display = "none"; } }; - window.document.querySelector("#clearchatbtn").onclick = function(e1) { + window.document.querySelector("#clearchatbtn").onclick = function(e2) { if((main.personal.group & 4) != 0) { main.send({ type : "ClearChat"}); } return; }; var userList = window.document.querySelector("#userlist"); - userList.onclick = function(e2) { + userList.onclick = function(e3) { if((main.personal.group & 4) == 0) { return; } - var el = e2.target; + var el = e3.target; if(userList == el) { return; } @@ -453,7 +464,7 @@ client_Buttons.init = function(main) { return; }; var userlistToggle = window.document.querySelector("#userlisttoggle"); - userlistToggle.onclick = function(e3) { + userlistToggle.onclick = function(e4) { var style = window.document.querySelector("#userlist").style; if(style.display == "none") { userlistToggle.classList.add("glyphicon-chevron-down"); @@ -467,7 +478,7 @@ client_Buttons.init = function(main) { }; window.document.querySelector("#usercount").onclick = userlistToggle.onclick; var extendPlayer = window.document.querySelector("#extendplayer"); - extendPlayer.onclick = function(e4) { + extendPlayer.onclick = function(e5) { if(extendPlayer.classList.contains("active")) { client_Buttons.split.setSizes([40,60]); window.document.querySelector("#userlist").style.width = "90px"; @@ -479,7 +490,7 @@ client_Buttons.init = function(main) { return window.dispatchEvent(new Event("resize")); }; var toggleSynch = window.document.querySelector("#togglesynch"); - toggleSynch.onclick = function(e5) { + toggleSynch.onclick = function(e6) { var icon = toggleSynch.firstElementChild; if(main.isSyncActive) { if(!window.confirm(Lang.get("toggleSynchConfirm"))) { @@ -498,15 +509,15 @@ client_Buttons.init = function(main) { } return; }; - window.document.querySelector("#mediarefresh").onclick = function(e6) { + window.document.querySelector("#mediarefresh").onclick = function(e7) { main.refreshPlayer(); return; }; - window.document.querySelector("#fullscreenbtn").onclick = function(e7) { + window.document.querySelector("#fullscreenbtn").onclick = function(e8) { return client_Utils.toggleFullScreen(window.document.querySelector("#ytapiplayer")); }; var getPlaylist = window.document.querySelector("#getplaylist"); - getPlaylist.onclick = function(e8) { + getPlaylist.onclick = function(e9) { client_Utils.copyToClipboard(main.getPlaylistLinks().join(",")); var icon1 = getPlaylist.firstElementChild; icon1.classList.remove("glyphicon-link"); @@ -517,37 +528,37 @@ client_Buttons.init = function(main) { return; },2000); }; - window.document.querySelector("#clearplaylist").onclick = function(e9) { + window.document.querySelector("#clearplaylist").onclick = function(e10) { if(!window.confirm(Lang.get("clearPlaylistConfirm"))) { return; } main.send({ type : "ClearPlaylist"}); return; }; - window.document.querySelector("#shuffleplaylist").onclick = function(e10) { + window.document.querySelector("#shuffleplaylist").onclick = function(e11) { if(!window.confirm(Lang.get("shufflePlaylistConfirm"))) { return; } main.send({ type : "ShufflePlaylist"}); return; }; - window.document.querySelector("#lockplaylist").onclick = function(e11) { + window.document.querySelector("#lockplaylist").onclick = function(e12) { if((main.personal.group & 4) != 0) { main.send({ type : "TogglePlaylistLock"}); } return; }; var showMediaUrl = window.document.querySelector("#showmediaurl"); - showMediaUrl.onclick = function(e12) { + showMediaUrl.onclick = function(e13) { client_Buttons.showPlayerGroup(showMediaUrl); return; }; var showCustomEmbed = window.document.querySelector("#showcustomembed"); - showCustomEmbed.onclick = function(e13) { + showCustomEmbed.onclick = function(e14) { client_Buttons.showPlayerGroup(showCustomEmbed); return; }; - window.document.querySelector("#insert_template").onclick = function(e14) { + window.document.querySelector("#insert_template").onclick = function(e15) { var input = window.document.querySelector("#mediaurl"); input.value = main.getTemplateUrl(); input.focus(); diff --git a/res/css/cytube.css b/res/css/cytube.css index 56c53b2..f85b66a 100644 --- a/res/css/cytube.css +++ b/res/css/cytube.css @@ -49,6 +49,17 @@ border-top-left-radius: 0; border-top-right-radius: 0; } +#guestpass_icon { + float: right; + margin-right: 14px; + margin-top: -27px; + position: relative; + z-index: 2; +} +#guestpass_icon:hover { + cursor: pointer; + color: white; +} .linewrap, .linewrap code { white-space: pre-wrap; /* css-3 */ diff --git a/res/css/des.css b/res/css/des.css index d611991..750f34a 100644 --- a/res/css/des.css +++ b/res/css/des.css @@ -167,15 +167,21 @@ src:url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/fonts/gl .glyphicon-step-forward:before { content:"\e077" } +.glyphicon-chevron-right::before { + content: "\e080"; +} .glyphicon-share-alt:before { content:"\e095" } +.glyphicon-eye-open:before { + content:"\e105"; +} +.glyphicon-eye-close:before { + content: "\e106"; +} .glyphicon-chevron-down:before { content:"\e114" } -.glyphicon-chevron-right::before { - content: "\e080"; -} .glyphicon-retweet:before { content:"\e115" } diff --git a/res/index.html b/res/index.html index 99a524d..3125fc9 100644 --- a/res/index.html +++ b/res/index.html @@ -80,7 +80,8 @@ diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx index e5c36a0..b8e4a16 100644 --- a/src/client/Buttons.hx +++ b/src/client/Buttons.hx @@ -19,6 +19,15 @@ class Buttons { initChatInput(main); initNavBar(main); + final passIcon = ge("#guestpass_icon"); + passIcon.onclick = e -> { + final isOpen = passIcon.classList.toggle("glyphicon-eye-open"); + passIcon.classList.toggle("glyphicon-eye-close"); + final pass:InputElement = cast ge("#guestpass"); + if (isOpen) pass.type = "password"; + else pass.type = "text"; + } + final smilesBtn = ge("#smilesbtn"); smilesBtn.onclick = e -> { smilesBtn.classList.toggle("active"); -- cgit v1.2.3