Skip to content

C
converse.js
Commit b2a118ca authored by JC Brand's avatar JC Brand
Browse files
Options

Refactor slide methods in utils and use them for toolbar menus

parent ce2548c8
Hide whitespace changes
Inline Side-by-side
Showing with 603 additions and 587 deletions
Makefile
View file @ b2a118ca
...@@ -148,7 +148,7 @@ css/mobile.min.css:: stamp-npm sass/* ...@@ -148,7 +148,7 @@ css/mobile.min.css:: stamp-npm sass/*
.PHONY: watch .PHONY: watch
watch: stamp-bundler watch: stamp-bundler
$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css $(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css sass/inverse/inverse.scss:css/inverse.css
.PHONY: watchjs .PHONY: watchjs
watchjs: stamp-npm watchjs: stamp-npm
......
css/converse.css
View file @ b2a118ca
...@@ -1201,9 +1201,6 @@ ...@@ -1201,9 +1201,6 @@
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; } user-select: none; }
#converse-embedded-chat .emoticon,
#conversejs .emoticon {
font-size: 14px; }
@keyframes fadein { @keyframes fadein {
0% { 0% {
opacity: 0; } opacity: 0; }
...@@ -1234,6 +1231,10 @@ ...@@ -1234,6 +1231,10 @@
#conversejs .hidden { #conversejs .hidden {
opacity: 0; opacity: 0;
display: none; } display: none; }
#converse-embedded-chat .collapsed,
#conversejs .collapsed {
height: 0;
overflow: hidden; }
#converse-embedded-chat .locked, #converse-embedded-chat .locked,
#conversejs .locked { #conversejs .locked {
padding-right: 22px; } padding-right: 22px; }
...@@ -1697,12 +1698,6 @@ ...@@ -1697,12 +1698,6 @@
color: #818479; color: #818479;
text-decoration: none; text-decoration: none;
text-shadow: none; } text-shadow: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .emoji-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .emoji-picker {
margin-bottom: 30px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
font-size: 12px; font-size: 12px;
...@@ -1712,10 +1707,10 @@ ...@@ -1712,10 +1707,10 @@
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
color: #818479; } color: #818479; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
...@@ -1736,79 +1731,75 @@ ...@@ -1736,79 +1731,75 @@
float: right; } float: right; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
cursor: pointer;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
padding: 0 3px 0 3px; margin-top: 1px;
cursor: pointer; padding: 0 3px 0 3px; }
margin-top: 1px; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover { cursor: pointer; }
cursor: pointer; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul { background-color: #fff;
background: #fff; bottom: 100%;
bottom: 100%; box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); font-size: 12px;
font-size: 12px; margin: 0;
margin: 0; position: absolute;
position: absolute; right: 0; }
right: 0; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li { color: #578EA9; }
cursor: pointer; #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
list-style: none; #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
position: relative; } box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover {
color: #8f2831; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
margin-left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
color: #818479;
padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-category-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-category-picker {
z-index: 100; } z-index: 100; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-category-picker .picked, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-category-picker .picked { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-picker, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-picker { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 250px; height: 250px;
overflow: scroll; } overflow: scroll; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
font-size: 14px; margin-left: 0;
padding: 5px; cursor: pointer;
z-index: 98; } list-style: none;
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a, position: relative; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a { #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
font-size: 20px; } #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover, color: #8f2831; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover { #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: #818479; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu ul li:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding: 7px; padding-left: 5px; }
background-color: white; #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul,
display: block; #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul {
z-index: 99; } left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li {
-moz-transition: background-color 0.2s ease-in-out; padding: 5px;
-webkit-transition: background-color 0.2s ease-in-out; z-index: 98; }
transition: background-color 0.2s ease-in-out; #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a,
display: block; #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a {
padding: 1px; font-size: 20px; }
text-decoration: none; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover { z-index: 99; }
background-color: #DCF9F6; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
display: block;
padding: 7px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
display: block; }
#converse-embedded-chat .chatbox .dragresize, #converse-embedded-chat .chatbox .dragresize,
#conversejs .chatbox .dragresize { #conversejs .chatbox .dragresize {
background: transparent; background: transparent;
......
css/inverse.css
View file @ b2a118ca
...@@ -1201,9 +1201,6 @@ ...@@ -1201,9 +1201,6 @@
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; } user-select: none; }
#converse-embedded-chat .emoticon,
#conversejs .emoticon {
font-size: 16px; }
@keyframes fadein { @keyframes fadein {
0% { 0% {
opacity: 0; } opacity: 0; }
...@@ -1234,6 +1231,10 @@ ...@@ -1234,6 +1231,10 @@
#conversejs .hidden { #conversejs .hidden {
opacity: 0; opacity: 0;
display: none; } display: none; }
#converse-embedded-chat .collapsed,
#conversejs .collapsed {
height: 0;
overflow: hidden; }
#converse-embedded-chat .locked, #converse-embedded-chat .locked,
#conversejs .locked { #conversejs .locked {
padding-right: 22px; } padding-right: 22px; }
...@@ -1743,12 +1744,6 @@ body { ...@@ -1743,12 +1744,6 @@ body {
color: #818479; color: #818479;
text-decoration: none; text-decoration: none;
text-shadow: none; } text-shadow: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .emoji-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .emoji-picker {
margin-bottom: 34px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
font-size: 12px; font-size: 12px;
...@@ -1758,10 +1753,10 @@ body { ...@@ -1758,10 +1753,10 @@ body {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
color: #818479; } color: #818479; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
...@@ -1782,79 +1777,75 @@ body { ...@@ -1782,79 +1777,75 @@ body {
float: right; } float: right; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
cursor: pointer;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
padding: 0 3px 0 3px; margin-top: 1px;
cursor: pointer; padding: 0 3px 0 3px; }
margin-top: 1px; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover { cursor: pointer; }
cursor: pointer; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul { background-color: #fff;
background: #fff; bottom: 100%;
bottom: 100%; box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); font-size: 12px;
font-size: 12px; margin: 0;
margin: 0; position: absolute;
position: absolute; right: 0; }
right: 0; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li { color: #578EA9; }
cursor: pointer; #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker,
list-style: none; #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker {
position: relative; } box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover {
color: #8f2831; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
margin-left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
color: #818479;
padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-category-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-category-picker {
z-index: 100; } z-index: 100; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-category-picker .picked, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-category-picker .picked { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-category-picker .picked {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-picker, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul.emoji-picker { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 250px; height: 250px;
overflow: scroll; } overflow: scroll; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
font-size: 16px; margin-left: 0;
padding: 5px; cursor: pointer;
z-index: 98; } list-style: none;
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a, position: relative; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a { #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
font-size: 26px; } #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover, color: #8f2831; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover { #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: #818479; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu ul li:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding: 7px; padding-left: 5px; }
background-color: white; #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul,
display: block; #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul {
z-index: 99; } left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li {
-moz-transition: background-color 0.2s ease-in-out; padding: 5px;
-webkit-transition: background-color 0.2s ease-in-out; z-index: 98; }
transition: background-color 0.2s ease-in-out; #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a,
display: block; #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley ul li.emoji a {
padding: 1px; font-size: 26px; }
text-decoration: none; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover { z-index: 99; }
background-color: #DCF9F6; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
display: block;
padding: 7px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
display: block; }
#converse-embedded-chat .chatbox .dragresize, #converse-embedded-chat .chatbox .dragresize,
#conversejs .chatbox .dragresize { #conversejs .chatbox .dragresize {
background: transparent; background: transparent;
......
sass/_chatbox.scss
View file @ b2a118ca
...@@ -272,14 +272,6 @@ ...@@ -272,14 +272,6 @@
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
} }
.emoji-picker {
margin-bottom: $toolbar-height + 5px;
}
.toolbar-picker-panel {
a {
color: $link-color;
}
}
.chat-toolbar-text { .chat-toolbar-text {
font-size: 12px; font-size: 12px;
padding-right: 3px; padding-right: 3px;
...@@ -287,7 +279,7 @@ ...@@ -287,7 +279,7 @@
.unencrypted a, .unencrypted a,
.unencrypted { .unencrypted {
color: $text-color; color: $text-color;
.toolbar-picker-panel { .toolbar-menu {
a { a {
color: $link-color; color: $link-color;
} }
...@@ -307,84 +299,84 @@ ...@@ -307,84 +299,84 @@
float: right; float: right;
} }
li { li {
cursor: pointer;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
padding: 0 3px 0 3px;
cursor: pointer;
margin-top: 1px; margin-top: 1px;
} padding: 0 3px 0 3px;
li:hover { &:hover {
cursor: pointer;
}
ul {
background: #fff;
bottom: 100%;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
font-size: 12px;
margin: 0;
position: absolute;
right: 0;
li {
cursor: pointer; cursor: pointer;
list-style: none;
position: relative;
a:hover {
color: #8f2831;
}
} }
} .toolbar-menu {
li { background-color: #fff;
margin-left: 0; bottom: 100%;
} box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
.toggle-smiley { font-size: 12px;
color: $text-color; margin: 0;
padding-left: 5px; position: absolute;
ul { right: 0;
&.emoji-category-picker { a {
z-index: 100; color: $link-color;
.picked {
background-color: $highlight-color;
}
} }
&.emoji-picker { ul {
height: 250px; &.emoji-category-picker {
overflow: scroll; box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
z-index: 100;
.picked {
background-color: $highlight-color;
}
}
&.emoji-picker {
height: 250px;
overflow: scroll;
}
li {
margin-left: 0;
cursor: pointer;
list-style: none;
position: relative;
a:hover {
color: #8f2831;
}
}
} }
left: 0; }
li { &.toggle-toolbar-menu {
font-size: $font-size; color: $text-color;
padding: 5px; ul {
z-index: 98; li {
&.emoji { &:hover {
a { background-color: $highlight-color;
font-size: $font-size-huge;
} }
} }
} }
li:hover { }
background-color: $highlight-color; &.toggle-smiley {
padding-left: 5px;
ul {
left: 0;
li {
padding: 5px;
z-index: 98;
&.emoji {
a {
font-size: $font-size-huge;
}
}
}
} }
} }
} &.toggle-otr {
.toggle-otr { ul {
ul {
li {
padding: 7px;
background-color: white;
display: block;
z-index: 99; z-index: 99;
a { li {
-moz-transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
display: block; display: block;
padding: 1px; padding: 7px;
text-decoration: none; a {
display: block;
}
} }
} }
li:hover {
background-color: $highlight-color;
}
} }
} }
} }
......
sass/_core.scss
View file @ b2a118ca
...@@ -74,6 +74,10 @@ ...@@ -74,6 +74,10 @@
opacity: 0; opacity: 0;
display: none; display: none;
} }
.collapsed {
height: 0;
overflow: hidden;
}
.locked { .locked {
padding-right: 22px; padding-right: 22px;
......
src/converse-chatview.js
View file @ b2a118ca
...@@ -54,14 +54,13 @@ ...@@ -54,14 +54,13 @@
// //
registerGlobalEventHandlers: function () { registerGlobalEventHandlers: function () {
this.__super__.registerGlobalEventHandlers(); this.__super__.registerGlobalEventHandlers();
document.addEventListener('click', function () { document.addEventListener(
if ($('.toggle-smiley ul').is(':visible')) { 'click', function () {
_.each( utils.slideInAllElements(
document.querySelectorAll('.toggle-smiley .emoji-picker-container'), document.querySelectorAll('.toolbar-menu')
utils.hideElement )
);
} }
}); );
}, },
ChatBoxViews: { ChatBoxViews: {
...@@ -114,7 +113,7 @@ ...@@ -114,7 +113,7 @@
}); });
_converse.EmojiPickerView = Backbone.View.extend({ _converse.EmojiPickerView = Backbone.View.extend({
className: 'emoji-picker-container hidden', className: 'emoji-picker-container toolbar-menu collapsed',
events: { events: {
'click .emoji-category-picker li a': 'chooseCategory', 'click .emoji-category-picker li a': 'chooseCategory',
}, },
...@@ -710,7 +709,16 @@ ...@@ -710,7 +709,16 @@
return; return;
} }
} }
utils.toggleElement(this.emoji_picker_view.el); const elements = _.difference(
document.querySelectorAll('.toolbar-menu'),
[this.emoji_picker_view.el]
);
utils.slideInAllElements(elements).then(
_.partial(
utils.slideToggleElement,
this.emoji_picker_view.el
)
);
}, },
toggleCall (ev) { toggleCall (ev) {
......
src/converse-otr.js
View file @ b2a118ca
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
OTR_CLASS_MAPPING[VERIFIED] = 'verified'; OTR_CLASS_MAPPING[VERIFIED] = 'verified';
OTR_CLASS_MAPPING[FINISHED] = 'finished'; OTR_CLASS_MAPPING[FINISHED] = 'finished';
converse.plugins.add('converse-otr', { converse.plugins.add('converse-otr', {
overrides: { overrides: {
...@@ -51,15 +52,6 @@ ...@@ -51,15 +52,6 @@
// //
// New functions which don't exist yet can also be added. // New functions which don't exist yet can also be added.
registerGlobalEventHandlers () {
this.__super__.registerGlobalEventHandlers();
document.addEventListener('click', function () {
if ($('.toggle-otr ul').is(':visible')) {
_.each($('.toggle-otr ul', this), utils.hideElement);
}
});
},
ChatBox: { ChatBox: {
initialize () { initialize () {
this.__super__.initialize.apply(this, arguments); this.__super__.initialize.apply(this, arguments);
...@@ -347,7 +339,6 @@ ...@@ -347,7 +339,6 @@
}, },
startOTRFromToolbar (ev) { startOTRFromToolbar (ev) {
$(ev.target).parent().parent().slideUp();
ev.stopPropagation(); ev.stopPropagation();
this.model.initiateOTR(); this.model.initiateOTR();
}, },
...@@ -392,7 +383,17 @@ ...@@ -392,7 +383,17 @@
toggleOTRMenu (ev) { toggleOTRMenu (ev) {
ev.stopPropagation(); ev.stopPropagation();
utils.toggleElement(this.el.querySelector('.toggle-otr ul')); const menu = this.el.querySelector('.toggle-otr ul');
const elements = _.difference(
document.querySelectorAll('.toolbar-menu'),
[menu]
);
utils.slideInAllElements(elements).then(
_.partial(
utils.slideToggleElement,
menu
)
);
}, },
getOTRTooltip () { getOTRTooltip () {
......
src/converse-roomslist.js
View file @ b2a118ca
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
}); });
this.hide(); this.hide();
if (this.list_model.get('toggle-state') !== _converse.OPENED) { if (this.list_model.get('toggle-state') !== _converse.OPENED) {
this.el.querySelector('.open-rooms-list').classList.add('hidden'); this.el.querySelector('.open-rooms-list').classList.add('collapsed');
} }
this.model.each(this.renderRoomsListElement.bind(this)); this.model.each(this.renderRoomsListElement.bind(this));
const controlboxview = _converse.chatboxviews.get('controlbox'); const controlboxview = _converse.chatboxviews.get('controlbox');
...@@ -142,13 +142,13 @@ ...@@ -142,13 +142,13 @@
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
const el = ev.target; const el = ev.target;
if (el.classList.contains("icon-opened")) { if (el.classList.contains("icon-opened")) {
utils.slideUp(this.el.querySelector('.open-rooms-list')).then(() => { utils.slideIn(this.el.querySelector('.open-rooms-list')).then(() => {
this.list_model.save({'toggle-state': _converse.CLOSED}); this.list_model.save({'toggle-state': _converse.CLOSED});
el.classList.remove("icon-opened"); el.classList.remove("icon-opened");
el.classList.add("icon-closed"); el.classList.add("icon-closed");
}); });
} else { } else {
utils.slideDown(this.el.querySelector('.open-rooms-list')).then(() => { utils.slideOut(this.el.querySelector('.open-rooms-list')).then(() => {
this.list_model.save({'toggle-state': _converse.OPENED}); this.list_model.save({'toggle-state': _converse.OPENED});
el.classList.remove("icon-closed"); el.classList.remove("icon-closed");
el.classList.add("icon-opened"); el.classList.add("icon-opened");
......
src/templates/emojis.html
View file @ b2a118ca
<ul class="emoji-category-picker">
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
<li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
<a href="#" data-category="{{{category}}}"> {{ emojione.shortnameToUnicode(emojis_by_category[category][0]._shortname) }} </a>
</li>
{[ }); ]}
</ul>
{[ _.forEach(emojis_by_category, function (obj, category) { ]} {[ _.forEach(emojis_by_category, function (obj, category) { ]}
<ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}"> <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
{[ _.forEach(emojis_by_category[category], function (emoji) { ]} {[ _.forEach(emojis_by_category[category], function (emoji) { ]}
...@@ -14,3 +7,10 @@ ...@@ -14,3 +7,10 @@
{[ }); ]} {[ }); ]}
</ul> </ul>
{[ }); ]} {[ }); ]}
<ul class="emoji-category-picker">
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
<li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
<a href="#" data-category="{{{category}}}"> {{ emojione.shortnameToUnicode(emojis_by_category[category][0]._shortname) }} </a>
</li>
{[ }); ]}
</ul>
src/templates/toolbar.html
View file @ b2a118ca
{[ if (use_emoji) { ]} {[ if (use_emoji) { ]}
<li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}"> <li class="toggle-toolbar-menu toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
<ul class="emoji-picker"></ul> <ul class="emoji-picker"></ul>
</li> </li>
{[ } ]} {[ } ]}
......
src/templates/toolbar_otr.html
View file @ b2a118ca
{[ if (allow_otr) { ]} {[ if (allow_otr) { ]}
<li class="toggle-otr {{{otr_status_class}}}" title="{{{otr_tooltip}}}"> <li class="toggle-toolbar-menu toggle-otr {{{otr_status_class}}}" title="{{{otr_tooltip}}}">
<span class="chat-toolbar-text">{{{otr_translated_status}}}</span> <span class="chat-toolbar-text">{{{otr_translated_status}}}</span>
{[ if (otr_status == UNENCRYPTED) { ]} {[ if (otr_status == UNENCRYPTED) { ]}
<span class="icon-unlocked"></span> <span class="icon-unlocked"></span>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
{[ if (otr_status == FINISHED) { ]} {[ if (otr_status == FINISHED) { ]}
<span class="icon-unlocked"></span> <span class="icon-unlocked"></span>
{[ } ]} {[ } ]}
<ul class="toolbar-picker-panel"> <ul class="toolbar-menu collapsed">
{[ if (otr_status == UNENCRYPTED) { ]} {[ if (otr_status == UNENCRYPTED) { ]}
<li><a class="start-otr" href="#">{{{label_start_encrypted_conversation}}}</a></li> <li><a class="start-otr" href="#">{{{label_start_encrypted_conversation}}}</a></li>
{[ } ]} {[ } ]}
......
src/utils.js
View file @ b2a118ca
...@@ -129,356 +129,385 @@ ...@@ -129,356 +129,385 @@
return this; return this;
}; };
var utils = { function calculateSlideStep (height) {
// Translation machinery if (height > 100) {
// --------------------- return 10;
__: function (str) { } else if (height > 50) {
if (!utils.isConverseLocale(this.locale) || this.locale === 'en') { return 5;
return Jed.sprintf.apply(Jed, arguments); } else {
} return 1;
if (typeof this.jed === "undefined") { }
this.jed = new Jed(window.JSON.parse(locales[this.locale])); }
}
var t = this.jed.translate(str); var utils = {};
if (arguments.length>1) {
return t.fetch.apply(t, [].slice.call(arguments,1)); // Translation machinery
} else { // ---------------------
return t.fetch(); utils.__ = function (str) {
} if (!utils.isConverseLocale(this.locale) || this.locale === 'en') {
}, return Jed.sprintf.apply(Jed, arguments);
}
___: function (str) { if (typeof this.jed === "undefined") {
/* XXX: This is part of a hack to get gettext to scan strings to be this.jed = new Jed(window.JSON.parse(locales[this.locale]));
* translated. Strings we cannot send to the function above because }
* they require variable interpolation and we don't yet have the var t = this.jed.translate(str);
* variables at scan time. if (arguments.length>1) {
* return t.fetch.apply(t, [].slice.call(arguments,1));
* See actionInfoMessages in src/converse-muc.js } else {
*/ return t.fetch();
return str; }
}, };
isLocaleAvailable: function (locale, available) { utils.___ = function (str) {
/* Check whether the locale or sub locale (e.g. en-US, en) is supported. /* XXX: This is part of a hack to get gettext to scan strings to be
* * translated. Strings we cannot send to the function above because
* Parameters: * they require variable interpolation and we don't yet have the
* (Function) available - returns a boolean indicating whether the locale is supported * variables at scan time.
*/ *
if (available(locale)) { * See actionInfoMessages in src/converse-muc.js
return locale; */
} else { return str;
var sublocale = locale.split("-")[0]; };
if (sublocale !== locale && available(sublocale)) {
return sublocale; utils.isLocaleAvailable = function (locale, available) {
} /* Check whether the locale or sub locale (e.g. en-US, en) is supported.
*
* Parameters:
* (Function) available - returns a boolean indicating whether the locale is supported
*/
if (available(locale)) {
return locale;
} else {
var sublocale = locale.split("-")[0];
if (sublocale !== locale && available(sublocale)) {
return sublocale;
} }
}, }
};
hideElement: function (el) { utils.slideInAllElements = function (elements) {
el.classList.add('hidden'); return Promise.all(
}, _.map(
elements,
_.partial(utils.slideIn, _, 600)
));
};
toggleElement: function (el) { utils.slideToggleElement = function (el) {
if (_.includes(el.classList, 'hidden')) { if (!el.offsetHeight) {
// XXX: use fadeIn? return utils.slideOut(el);
el.classList.remove('hidden'); } else {
} else { return utils.slideIn(el);
this.hideElement (el); }
};
utils.slideOut = function (el, duration=600) {
/* Shows/expands an element by sliding it out of itself. */
return new Promise((resolve, reject) => {
if (_.isNil(el)) {
const err = "Undefined or null element passed into slideOut"
console.warn(err);
reject(new Error(err));
} }
}, let interval_marker = el.getAttribute('data-slider-marker');
if (interval_marker) {
slideDown: function (el, interval=0.6) { window.clearInterval(interval_marker);
return new Promise((resolve, reject) => { }
if (_.isNil(el)) { const end_height = _.reduce(el.children, function (result, child) {
const err = "Undefined or null element passed into slideDown" return result + child.offsetHeight;
console.warn(err); }, 0);
reject(new Error(err)); const step = calculateSlideStep(end_height),
} interval = end_height/duration*step;
let intval = el.getAttribute('data-slider-intval');
if (intval) { let h = 0;
window.clearInterval(intval); interval_marker = window.setInterval(function () {
} h += step;
let h = 0; if (h < end_height) {
const end_height = el.getAttribute('data-slider-height');
intval = window.setInterval(function () {
h++;
el.style.height = h + 'px'; el.style.height = h + 'px';
if (h >= end_height) { } else {
window.clearInterval(intval); el.style.height = end_height + 'px';
el.style.height = ''; window.clearInterval(interval_marker);
el.style.overflow = ''; el.style.overflow = '';
el.removeAttribute('data-slider-intval'); el.removeAttribute('data-slider-marker');
el.removeAttribute('data-slider-height'); resolve();
resolve();
}
}, interval);
el.setAttribute('data-slider-intval', intval);
});
},
slideUp: function (el, interval=0.6) {
return new Promise((resolve, reject) => {
if (_.isNil(el)) {
const err = "Undefined or null element passed into slideUp";
console.warn(err);
reject(new Error(err));
}
let intval = el.getAttribute('data-slider-intval');
if (intval) {
window.clearInterval(intval);
} }
let h = el.offsetHeight; }, interval);
el.setAttribute('data-slider-height', h); el.setAttribute('data-slider-marker', interval_marker);
el.style.overflow = 'hidden'; });
intval = window.setInterval(function () { };
el.style.height = h + 'px';
h--;
if (h < 0) {
window.clearInterval(intval);
el.removeAttribute('data-slider-intval');
resolve();
}
}, interval);
el.setAttribute('data-slider-intval', intval);
});
},
fadeIn: function (el, callback) { utils.slideIn = function (el, duration=600) {
/* Hides/collapses an element by sliding it into itself. */
return new Promise((resolve, reject) => {
if (_.isNil(el)) { if (_.isNil(el)) {
console.warn("Undefined or null element passed into fadeIn"); const err = "Undefined or null element passed into slideIn";
console.warn(err);
reject(new Error(err));
} }
if ($.fx.off) { if (!el.offsetHeight) {
el.classList.remove('hidden'); resolve();
if (_.isFunction(callback)) {
callback();
}
return; return;
} }
if (_.includes(el.classList, 'hidden')) { let interval_marker = el.getAttribute('data-slider-marker');
/* XXX: This doesn't appear to be working... if (interval_marker) {
el.addEventListener("webkitAnimationEnd", _.partial(afterAnimationEnd, el, callback), false); window.clearInterval(interval_marker);
el.addEventListener("animationend", _.partial(afterAnimationEnd, el, callback), false);
*/
setTimeout(_.partial(afterAnimationEnd, el, callback), 351);
el.classList.add('visible');
el.classList.remove('hidden');
} else {
afterAnimationEnd(el, callback);
}
},
isSameBareJID: function (jid1, jid2) {
return Strophe.getBareJidFromJid(jid1).toLowerCase() ===
Strophe.getBareJidFromJid(jid2).toLowerCase();
},
isNewMessage: function (message) {
/* Given a stanza, determine whether it's a new
* message, i.e. not a MAM archived one.
*/
if (message instanceof Element) {
return !(sizzle('result[xmlns="'+Strophe.NS.MAM+'"]', message).length);
} else {
return !message.get('archive_id');
}
},
isOTRMessage: function (message) {
var body = message.querySelector('body'),
text = (!_.isNull(body) ? body.textContent: undefined);
return text && !!text.match(/^\?OTR/);
},
isHeadlineMessage: function (message) {
var from_jid = message.getAttribute('from');
if (message.getAttribute('type') === 'headline') {
return true;
}
if (message.getAttribute('type') !== 'error' &&
!_.isNil(from_jid) &&
!_.includes(from_jid, '@')) {
// Some servers (I'm looking at you Prosody) don't set the message
// type to "headline" when sending server messages. For now we
// check if an @ signal is included, and if not, we assume it's
// a headline message.
return true;
} }
return false; let h = el.offsetHeight;
}, const step = calculateSlideStep(h),
interval = h/duration*step;
merge: function merge (first, second) {
/* Merge the second object into the first one. el.style.overflow = 'hidden';
*/
for (var k in second) { interval_marker = window.setInterval(function () {
if (_.isObject(first[k])) { h -= step;
merge(first[k], second[k]); if (h > 0) {
} else { el.style.height = h + 'px';
first[k] = second[k];
}
}
},
applyUserSettings: function applyUserSettings (context, settings, user_settings) {
/* Configuration settings might be nested objects. We only want to
* add settings which are whitelisted.
*/
for (var k in settings) {
if (_.isUndefined(user_settings[k])) {
continue;
}
if (_.isObject(settings[k]) && !_.isArray(settings[k])) {
applyUserSettings(context[k], settings[k], user_settings[k]);
} else { } else {
context[k] = user_settings[k]; el.style.height = 0 + 'px';
window.clearInterval(interval_marker);
el.removeAttribute('data-slider-marker');
resolve();
} }
}, interval);
el.setAttribute('data-slider-marker', interval_marker);
});
};
utils.fadeIn = function (el, callback) {
if (_.isNil(el)) {
console.warn("Undefined or null element passed into fadeIn");
}
if ($.fx.off) {
el.classList.remove('hidden');
if (_.isFunction(callback)) {
callback();
} }
}, return;
}
refreshWebkit: function () { if (_.includes(el.classList, 'hidden')) {
/* This works around a webkit bug. Refreshes the browser's viewport, /* XXX: This doesn't appear to be working...
* otherwise chatboxes are not moved along when one is closed. el.addEventListener("webkitAnimationEnd", _.partial(afterAnimationEnd, el, callback), false);
*/ el.addEventListener("animationend", _.partial(afterAnimationEnd, el, callback), false);
if ($.browser.webkit && window.requestAnimationFrame) { */
window.requestAnimationFrame(function () { setTimeout(_.partial(afterAnimationEnd, el, callback), 351);
var conversejs = document.getElementById('conversejs'); el.classList.add('visible');
conversejs.style.display = 'none'; el.classList.remove('hidden');
var tmp = conversejs.offsetHeight; // jshint ignore:line } else {
conversejs.style.display = 'block'; afterAnimationEnd(el, callback);
}); }
};
utils.isSameBareJID = function (jid1, jid2) {
return Strophe.getBareJidFromJid(jid1).toLowerCase() ===
Strophe.getBareJidFromJid(jid2).toLowerCase();
};
utils.isNewMessage = function (message) {
/* Given a stanza, determine whether it's a new
* message, i.e. not a MAM archived one.
*/
if (message instanceof Element) {
return !(sizzle('result[xmlns="'+Strophe.NS.MAM+'"]', message).length);
} else {
return !message.get('archive_id');
}
};
utils.isOTRMessage = function (message) {
var body = message.querySelector('body'),
text = (!_.isNull(body) ? body.textContent: undefined);
return text && !!text.match(/^\?OTR/);
};
utils.isHeadlineMessage = function (message) {
var from_jid = message.getAttribute('from');
if (message.getAttribute('type') === 'headline') {
return true;
}
if (message.getAttribute('type') !== 'error' &&
!_.isNil(from_jid) &&
!_.includes(from_jid, '@')) {
// Some servers (I'm looking at you Prosody) don't set the message
// type to "headline" when sending server messages. For now we
// check if an @ signal is included, and if not, we assume it's
// a headline message.
return true;
}
return false;
};
utils.merge = function merge (first, second) {
/* Merge the second object into the first one.
*/
for (var k in second) {
if (_.isObject(first[k])) {
merge(first[k], second[k]);
} else {
first[k] = second[k];
} }
}, }
};
webForm2xForm: function (field) { utils.applyUserSettings = function applyUserSettings (context, settings, user_settings) {
/* Takes an HTML DOM and turns it into an XForm field. /* Configuration settings might be nested objects. We only want to
* * add settings which are whitelisted.
* Parameters: */
* (DOMElement) field - the field to convert for (var k in settings) {
*/ if (_.isUndefined(user_settings[k])) {
var $input = $(field), value; continue;
if ($input.is('[type=checkbox]')) { }
value = $input.is(':checked') && 1 || 0; if (_.isObject(settings[k]) && !_.isArray(settings[k])) {
} else if ($input.is('textarea')) { applyUserSettings(context[k], settings[k], user_settings[k]);
value = [];
var lines = $input.val().split('\n');
for( var vk=0; vk<lines.length; vk++) {
var val = $.trim(lines[vk]);
if (val === '')
continue;
value.push(val);
}
} else { } else {
value = $input.val(); context[k] = user_settings[k];
} }
return $(tpl_field({ }
name: $input.attr('name'), };
value: value
}))[0]; utils.refreshWebkit = function () {
}, /* This works around a webkit bug. Refreshes the browser's viewport,
* otherwise chatboxes are not moved along when one is closed.
contains: function (attr, query) { */
return function (item) { if ($.browser.webkit && window.requestAnimationFrame) {
if (typeof attr === 'object') { window.requestAnimationFrame(function () {
var value = false; var conversejs = document.getElementById('conversejs');
_.forEach(attr, function (a) { conversejs.style.display = 'none';
value = value || _.includes(item.get(a).toLowerCase(), query.toLowerCase()); var tmp = conversejs.offsetHeight; // jshint ignore:line
}); conversejs.style.display = 'block';
return value; });
} else if (typeof attr === 'string') { }
return _.includes(item.get(attr).toLowerCase(), query.toLowerCase()); };
} else {
throw new TypeError('contains: wrong attribute type. Must be string or array.');
}
};
},
xForm2webForm: function ($field, $stanza) {
/* Takes a field in XMPP XForm (XEP-004: Data Forms) format
* and turns it into a HTML DOM field.
*
* Parameters:
* (XMLElement) field - the field to convert
*/
// FIXME: take <required> into consideration utils.webForm2xForm = function (field) {
var options = [], j, $options, $values, value, values; /* Takes an HTML DOM and turns it into an XForm field.
*
* Parameters:
* (DOMElement) field - the field to convert
*/
var $input = $(field), value;
if ($input.is('[type=checkbox]')) {
value = $input.is(':checked') && 1 || 0;
} else if ($input.is('textarea')) {
value = [];
var lines = $input.val().split('\n');
for( var vk=0; vk<lines.length; vk++) {
var val = $.trim(lines[vk]);
if (val === '')
continue;
value.push(val);
}
} else {
value = $input.val();
}
return $(tpl_field({
name: $input.attr('name'),
value: value
}))[0];
};
if ($field.attr('type') === 'list-single' || $field.attr('type') === 'list-multi') { utils.contains = function (attr, query) {
values = []; return function (item) {
$values = $field.children('value'); if (typeof attr === 'object') {
for (j=0; j<$values.length; j++) { var value = false;
values.push($($values[j]).text()); _.forEach(attr, function (a) {
} value = value || _.includes(item.get(a).toLowerCase(), query.toLowerCase());
$options = $field.children('option');
for (j=0; j<$options.length; j++) {
value = $($options[j]).find('value').text();
options.push(tpl_select_option({
value: value,
label: $($options[j]).attr('label'),
selected: _.startsWith(values, value),
required: $field.find('required').length
}));
}
return tpl_form_select({
name: $field.attr('var'),
label: $field.attr('label'),
options: options.join(''),
multiple: ($field.attr('type') === 'list-multi'),
required: $field.find('required').length
});
} else if ($field.attr('type') === 'fixed') {
return $('<p class="form-help">').text($field.find('value').text());
} else if ($field.attr('type') === 'jid-multi') {
return tpl_form_textarea({
name: $field.attr('var'),
label: $field.attr('label') || '',
value: $field.find('value').text(),
required: $field.find('required').length
});
} else if ($field.attr('type') === 'boolean') {
return tpl_form_checkbox({
name: $field.attr('var'),
type: XFORM_TYPE_MAP[$field.attr('type')],
label: $field.attr('label') || '',
checked: $field.find('value').text() === "1" && 'checked="1"' || '',
required: $field.find('required').length
});
} else if ($field.attr('type') && $field.attr('var') === 'username') {
return tpl_form_username({
domain: ' @'+this.domain,
name: $field.attr('var'),
type: XFORM_TYPE_MAP[$field.attr('type')],
label: $field.attr('label') || '',
value: $field.find('value').text(),
required: $field.find('required').length
});
} else if ($field.attr('type')) {
return tpl_form_input({
name: $field.attr('var'),
type: XFORM_TYPE_MAP[$field.attr('type')],
label: $field.attr('label') || '',
value: $field.find('value').text(),
required: $field.find('required').length
}); });
return value;
} else if (typeof attr === 'string') {
return _.includes(item.get(attr).toLowerCase(), query.toLowerCase());
} else { } else {
if ($field.attr('var') === 'ocr') { // Captcha throw new TypeError('contains: wrong attribute type. Must be string or array.');
return _.reduce(_.map($field.find('uri'),
$.proxy(function (uri) {
return tpl_form_captcha({
label: this.$field.attr('label'),
name: this.$field.attr('var'),
data: this.$stanza.find('data[cid="'+uri.textContent.replace(/^cid:/, '')+'"]').text(),
type: uri.getAttribute('type'),
required: this.$field.find('required').length
});
}, {'$stanza': $stanza, '$field': $field})
),
function (memo, num) { return memo + num; }, ''
);
}
} }
} };
}; };
utils.xForm2webForm = function ($field, $stanza) {
/* Takes a field in XMPP XForm (XEP-004: Data Forms) format
* and turns it into a HTML DOM field.
*
* Parameters:
* (XMLElement) field - the field to convert
*/
// FIXME: take <required> into consideration
var options = [], j, $options, $values, value, values;
if ($field.attr('type') === 'list-single' || $field.attr('type') === 'list-multi') {
values = [];
$values = $field.children('value');
for (j=0; j<$values.length; j++) {
values.push($($values[j]).text());
}
$options = $field.children('option');
for (j=0; j<$options.length; j++) {
value = $($options[j]).find('value').text();
options.push(tpl_select_option({
value: value,
label: $($options[j]).attr('label'),
selected: _.startsWith(values, value),
required: $field.find('required').length
}));
}
return tpl_form_select({
name: $field.attr('var'),
label: $field.attr('label'),
options: options.join(''),
multiple: ($field.attr('type') === 'list-multi'),
required: $field.find('required').length
});
} else if ($field.attr('type') === 'fixed') {
return $('<p class="form-help">').text($field.find('value').text());
} else if ($field.attr('type') === 'jid-multi') {
return tpl_form_textarea({
name: $field.attr('var'),
label: $field.attr('label') || '',
value: $field.find('value').text(),
required: $field.find('required').length
});
} else if ($field.attr('type') === 'boolean') {
return tpl_form_checkbox({
name: $field.attr('var'),
type: XFORM_TYPE_MAP[$field.attr('type')],
label: $field.attr('label') || '',
checked: $field.find('value').text() === "1" && 'checked="1"' || '',
required: $field.find('required').length
});
} else if ($field.attr('type') && $field.attr('var') === 'username') {
return tpl_form_username({
domain: ' @'+this.domain,
name: $field.attr('var'),
type: XFORM_TYPE_MAP[$field.attr('type')],
label: $field.attr('label') || '',
value: $field.find('value').text(),
required: $field.find('required').length
});
} else if ($field.attr('type')) {
return tpl_form_input({
name: $field.attr('var'),
type: XFORM_TYPE_MAP[$field.attr('type')],
label: $field.attr('label') || '',
value: $field.find('value').text(),
required: $field.find('required').length
});
} else {
if ($field.attr('var') === 'ocr') { // Captcha
return _.reduce(_.map($field.find('uri'),
$.proxy(function (uri) {
return tpl_form_captcha({
label: this.$field.attr('label'),
name: this.$field.attr('var'),
data: this.$stanza.find('data[cid="'+uri.textContent.replace(/^cid:/, '')+'"]').text(),
type: uri.getAttribute('type'),
required: this.$field.find('required').length
});
}, {'$stanza': $stanza, '$field': $field})
),
function (memo, num) { return memo + num; }, ''
);
}
}
}
utils.detectLocale = function (library_check) { utils.detectLocale = function (library_check) {
/* Determine which locale is supported by the user's system as well /* Determine which locale is supported by the user's system as well
* as by the relevant library (e.g. converse.js or moment.js). * as by the relevant library (e.g. converse.js or moment.js).
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7