Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

More work on the "add chatroom" modal. Working now.

Browse Source
This commit is contained in:
JC Brand 2018-02-22 15:51:44 +01:00
parent 224e1eee29
commit e143c88475
15 changed files with 119 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -132,7 +132,7 @@ dev: stamp-bundler stamp-npm
## Builds ## Builds
.PHONY: css .PHONY: css
css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css css: dev sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
css/inverse.css:: stamp-bundler sass sass/*.scss css/inverse.css:: stamp-bundler sass sass/*.scss
$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse/inverse.scss css/inverse.css $(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse/inverse.scss css/inverse.css

2
css/converse-muc-embedded.css
View File

@ -15,7 +15,7 @@
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
#conversejs.converse-embedded form.pure-form.converse-centered-form { #conversejs.converse-embedded form.converse-centered-form {
position: absolute; position: absolute;
top: 30%; top: 30%;
transform: translateY(-50%); } transform: translateY(-50%); }

46
css/converse.css
View File

@ -4773,7 +4773,7 @@ body.reset {
height: auto; } height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote, #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li, #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody, #conversejs fieldset, #conversejs form, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details, #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu, #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video { #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
@ -5016,8 +5016,6 @@ body.reset {
border-radius: 25%; } border-radius: 25%; }
#conversejs .activated { #conversejs .activated {
display: block !important; } display: block !important; }
#conversejs .pure-form-message {
padding: 0.5em 0; }
#conversejs .button-primary { #conversejs .button-primary {
color: white; color: white;
background-color: #3AA569; } background-color: #3AA569; }
@ -5032,46 +5030,44 @@ body.reset {
right: 0.2em; right: 0.2em;
cursor: pointer; cursor: pointer;
font-size: 0.75rem; } font-size: 0.75rem; }
#conversejs form.pure-form.converse-form { #conversejs form.converse-form {
background: white; background: white;
padding: 1em; } padding: 1em; }
#conversejs form.pure-form.converse-form legend { #conversejs form.converse-form legend {
color: #777; color: #777;
font-size: 125%; font-size: 125%;
margin-bottom: 1.5em; } margin-bottom: 1.5em; }
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.converse-form input[type=checkbox] {
display: block; } display: block; }
#conversejs form.pure-form.converse-form select, #conversejs form.converse-form select,
#conversejs form.pure-form.converse-form input[type=password], #conversejs form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number], #conversejs form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=text] { #conversejs form.converse-form input[type=text] {
min-width: 50%; } min-width: 50%; }
#conversejs form.pure-form.converse-form label { #conversejs form.converse-form input[type=text],
font-size: 16px; } #conversejs form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=text], #conversejs form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=password], #conversejs form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=number], #conversejs form.converse-form input[type=submit] {
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
padding: 0.5em; } padding: 0.5em; }
#conversejs form.pure-form.converse-form input[type=button], #conversejs form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] { #conversejs form.converse-form input[type=submit] {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
margin: 0.5em 0; margin: 0.5em 0;
border: none; } border: none; }
#conversejs form.pure-form.converse-form input.error { #conversejs form.converse-form input.error {
border: 1px solid #A53214; border: 1px solid #A53214;
color: #777; } color: #777; }
#conversejs form.pure-form.converse-form .form-help { #conversejs form.converse-form .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
padding-top: 0.5em; } padding-top: 0.5em; }
#conversejs form.pure-form.converse-form .form-help:hover { #conversejs form.converse-form .form-help:hover {
color: #777; } color: #777; }
#conversejs form.pure-form.converse-form .form-help.error { #conversejs form.converse-form .form-help.error {
color: #A53214; } color: #A53214; }
#conversejs form.pure-form.converse-centered-form { #conversejs form.converse-centered-form {
text-align: center; text-align: center;
width: 100%; } width: 100%; }
#conversejs .chat-textarea-chatbox-selected { #conversejs .chat-textarea-chatbox-selected {
@ -5589,7 +5585,7 @@ body.reset {
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs > .row { #conversejs > .row {
flex-direction: row-reverse; } flex-direction: row-reverse; }
#conversejs #login-dialog .pure-form.converse-form { #conversejs #login-dialog .converse-form {
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
#conversejs .sidebar { #conversejs .sidebar {
display: block; } display: block; }

64
css/inverse.css
View File

@ -4773,7 +4773,7 @@ body.reset {
height: auto; } height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote, #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li, #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody, #conversejs fieldset, #conversejs form, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details, #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu, #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video { #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
@ -5016,8 +5016,6 @@ body.reset {
border-radius: 25%; } border-radius: 25%; }
#conversejs .activated { #conversejs .activated {
display: block !important; } display: block !important; }
#conversejs .pure-form-message {
padding: 0.5em 0; }
#conversejs .button-primary { #conversejs .button-primary {
color: white; color: white;
background-color: #E7A151; } background-color: #E7A151; }
@ -5032,46 +5030,44 @@ body.reset {
right: 0.2em; right: 0.2em;
cursor: pointer; cursor: pointer;
font-size: 0.75rem; } font-size: 0.75rem; }
#conversejs form.pure-form.converse-form { #conversejs form.converse-form {
background: white; background: white;
padding: 1em; } padding: 1em; }
#conversejs form.pure-form.converse-form legend { #conversejs form.converse-form legend {
color: #777; color: #777;
font-size: 125%; font-size: 125%;
margin-bottom: 1.5em; } margin-bottom: 1.5em; }
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.converse-form input[type=checkbox] {
display: block; } display: block; }
#conversejs form.pure-form.converse-form select, #conversejs form.converse-form select,
#conversejs form.pure-form.converse-form input[type=password], #conversejs form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number], #conversejs form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=text] { #conversejs form.converse-form input[type=text] {
min-width: 50%; } min-width: 50%; }
#conversejs form.pure-form.converse-form label { #conversejs form.converse-form input[type=text],
font-size: 18px; } #conversejs form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=text], #conversejs form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=password], #conversejs form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=number], #conversejs form.converse-form input[type=submit] {
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
padding: 0.5em; } padding: 0.5em; }
#conversejs form.pure-form.converse-form input[type=button], #conversejs form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] { #conversejs form.converse-form input[type=submit] {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
margin: 0.5em 0; margin: 0.5em 0;
border: none; } border: none; }
#conversejs form.pure-form.converse-form input.error { #conversejs form.converse-form input.error {
border: 1px solid #A53214; border: 1px solid #A53214;
color: #777; } color: #777; }
#conversejs form.pure-form.converse-form .form-help { #conversejs form.converse-form .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
padding-top: 0.5em; } padding-top: 0.5em; }
#conversejs form.pure-form.converse-form .form-help:hover { #conversejs form.converse-form .form-help:hover {
color: #777; } color: #777; }
#conversejs form.pure-form.converse-form .form-help.error { #conversejs form.converse-form .form-help.error {
color: #A53214; } color: #A53214; }
#conversejs form.pure-form.converse-centered-form { #conversejs form.converse-centered-form {
text-align: center; text-align: center;
width: 100%; } width: 100%; }
#conversejs .chat-textarea-chatbox-selected { #conversejs .chat-textarea-chatbox-selected {
@ -5155,20 +5151,20 @@ body {
padding-right: 10%; padding-right: 10%;
font-size: 120%; } font-size: 120%; }
#conversejs.fullscreen form.pure-form.converse-form { #conversejs.fullscreen form.converse-form {
margin: 1em; } margin: 1em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] { #conversejs.fullscreen form.converse-form input[type=checkbox] {
margin-left: 1em; margin-left: 1em;
display: inline; display: inline;
margin-bottom: 2em; } margin-bottom: 2em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=text], #conversejs.fullscreen form.converse-form input[type=text],
#conversejs.fullscreen form.pure-form.converse-form input[type=password], #conversejs.fullscreen form.converse-form input[type=password],
#conversejs.fullscreen form.pure-form.converse-form input[type=number], #conversejs.fullscreen form.converse-form input[type=number],
#conversejs.fullscreen form.pure-form.converse-form input[type=button], #conversejs.fullscreen form.converse-form input[type=button],
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] { #conversejs.fullscreen form.converse-form input[type=submit] {
height: 2.2em; } height: 2.2em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=button], #conversejs.fullscreen form.converse-form input[type=button],
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] { #conversejs.fullscreen form.converse-form input[type=submit] {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
margin-right: 1em; } margin-right: 1em; }
@ -5645,7 +5641,7 @@ body {
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs > .row { #conversejs > .row {
flex-direction: row-reverse; } flex-direction: row-reverse; }
#conversejs #login-dialog .pure-form.converse-form { #conversejs #login-dialog .converse-form {
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
#conversejs .sidebar { #conversejs .sidebar {
display: block; } display: block; }

10
mockup/modals.html
View File

@ -149,12 +149,16 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="pure-form pure-form-stacked converse-form add-chatroom"> <form class="converse-form add-chatroom">
<div class="form-group"> <div class="form-group">
<label for="chatroom">Room address</label> <label for="chatroom">Room address:</label>
<input type="text" name="chatroom" class="form-control" placeholder="room@conference.example.org"> <input type="text" name="chatroom" class="form-control" placeholder="room@conference.example.org">
<input type="submit" class="btn btn-primary" name="join" value="Join">
</div> </div>
<div class="form-group">
<label for="chatroom">Nickname:</label>
<input type="text" name="nickname" class="form-control">
</div>
<input type="submit" class="btn btn-primary" name="join" value="Join">
</form> </form>
</div> </div>
</div> </div>

2
sass/_chatbox.scss
View File

@ -494,7 +494,7 @@
} }
#login-dialog { #login-dialog {
.pure-form.converse-form { .converse-form {
padding: 3em 2em 3em; padding: 3em 2em 3em;
} }
} }

13
sass/_core.scss
View File

@ -80,7 +80,7 @@ body.reset {
ul li { height: auto; } ul li { height: auto; }
div, span, h1, h2, h3, h4, h5, h6, p, blockquote, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, em, img, strong, dl, dt, dd, ol, ul, li, pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, fieldset, form, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, embed, figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video { nav, output, ruby, section, summary, time, mark, audio, video {
@ -338,10 +338,6 @@ body.reset {
display: block !important; display: block !important;
} }
.pure-form-message {
padding: 0.5em 0;
}
.button-primary { .button-primary {
color: white; color: white;
background-color: $primary-color; background-color: $primary-color;
@ -363,7 +359,7 @@ body.reset {
font-size: 0.75rem; font-size: 0.75rem;
} }
&.pure-form.converse-form { &.converse-form {
background: white; background: white;
padding: 1em; padding: 1em;
legend { legend {
@ -380,9 +376,6 @@ body.reset {
input[type=text] { input[type=text] {
min-width: 50%; min-width: 50%;
} }
label {
font-size: $font-size-large;
}
input[type=text], input[type=text],
input[type=password], input[type=password],
input[type=number], input[type=number],
@ -413,7 +406,7 @@ body.reset {
} }
} }
} }
&.pure-form.converse-centered-form { &.converse-centered-form {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }

2
sass/_muc_embedded.scss
View File

@ -13,7 +13,7 @@
width: 100%; width: 100%;
form { form {
&.pure-form.converse-centered-form { &.converse-centered-form {
position: absolute; position: absolute;
top: 30%; top: 30%;
transform: translateY(-50%); transform: translateY(-50%);

2
sass/inverse/_core.scss
View File

@ -37,7 +37,7 @@ body {
#conversejs.fullscreen { #conversejs.fullscreen {
form { form {
&.pure-form.converse-form { &.converse-form {
margin: 1em; margin: 1em;
input[type=checkbox] { input[type=checkbox] {
margin-left: 1em; margin-left: 1em;

104
src/converse-muc-views.js
View File

@ -21,7 +21,6 @@
"tpl!chatroom_form", "tpl!chatroom_form",
"tpl!chatroom_head", "tpl!chatroom_head",
"tpl!chatroom_invite", "tpl!chatroom_invite",
"tpl!chatroom_join_form",
"tpl!chatroom_nickname_form", "tpl!chatroom_nickname_form",
"tpl!chatroom_password_form", "tpl!chatroom_password_form",
"tpl!chatroom_sidebar", "tpl!chatroom_sidebar",
@ -46,7 +45,6 @@
tpl_chatroom_form, tpl_chatroom_form,
tpl_chatroom_head, tpl_chatroom_head,
tpl_chatroom_invite, tpl_chatroom_invite,
tpl_chatroom_join_form,
tpl_chatroom_nickname_form, tpl_chatroom_nickname_form,
tpl_chatroom_password_form, tpl_chatroom_password_form,
tpl_chatroom_sidebar, tpl_chatroom_sidebar,
@ -154,6 +152,7 @@
_converse.AddChatRoomModal = Backbone.VDOMView.extend({ _converse.AddChatRoomModal = Backbone.VDOMView.extend({
events: { events: {
'submit form.add-chatroom': 'openChatRoom'
}, },
initialize () { initialize () {
@ -162,13 +161,44 @@
backdrop: 'static', backdrop: 'static',
keyboard: true keyboard: true
}); });
this.model.on('change:muc_domain', this.render, this);
}, },
toHTML () { toHTML () {
return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), { return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), {
'heading_new_chatroom': __('Enter a new Chatroom'), 'heading_new_chatroom': __('Enter a new Chatroom'),
'label_room_name': __('Room'), 'label_room_address': __('Room address'),
'label_nickname': __('Optional nickname')
})); }));
},
insertIntoDOM () {
const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
container_el.insertAdjacentElement('beforeEnd', this.el);
},
show () {
this.render();
this.modal.show();
},
parseRoomDataFromEvent (form) {
const data = new FormData(form);
const jid = data.get('chatroom');
const server = Strophe.getDomainFromJid(jid);
this.model.save('muc_domain', server);
return {
'jid': jid,
'nick': data.get('nickname')
}
},
openChatRoom (ev) {
ev.preventDefault();
const data = this.parseRoomDataFromEvent(ev.target);
_converse.api.rooms.open(data.jid, data);
this.modal.hide();
ev.target.reset();
} }
}); });
@ -1962,25 +1992,6 @@
}); });
_converse.MUCJoinForm = Backbone.VDOMView.extend({
initialize () {
this.model.on('change:muc_domain', this.render, this);
},
toHTML () {
return tpl_chatroom_join_form(_.assign(this.model.toJSON(), {
'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
'label_room_name': __('Room name'),
'label_nickname': __('Nickname'),
'label_server': __('Server'),
'label_join': __('Join Room'),
'label_show_rooms': __('Show rooms')
}));
}
});
_converse.RoomsPanel = Backbone.NativeView.extend({ _converse.RoomsPanel = Backbone.NativeView.extend({
/* Backbone.NativeView which renders MUC section of the control box. /* Backbone.NativeView which renders MUC section of the control box.
* *
@ -1990,15 +2001,15 @@
className: 'controlbox-pane', className: 'controlbox-pane',
id: 'chatrooms', id: 'chatrooms',
events: { events: {
'submit form.add-chatroom': 'openChatRoom', 'click a.chatbox-btn.fa-users': 'showAddRoomModal',
'click input#show-rooms': 'showRooms', 'change input[name=nick]': 'setNick',
'click a.room-info': 'toggleRoomInfo',
'change input[name=server]': 'setDomain', 'change input[name=server]': 'setDomain',
'change input[name=nick]': 'setNick' 'click a.room-info': 'toggleRoomInfo',
'click input#show-rooms': 'showRooms',
}, },
initialize (cfg) { initialize (cfg) {
this.join_form = new _converse.MUCJoinForm({'model': this.model}); this.add_room_modal = new _converse.AddChatRoomModal({'model': this.model});
this.model.on('change:muc_domain', this.onDomainChange, this); this.model.on('change:muc_domain', this.onDomainChange, this);
this.model.on('change:nick', this.onNickChange, this); this.model.on('change:nick', this.onNickChange, this);
}, },
@ -2008,11 +2019,15 @@
'heading_chatrooms': __('Chatrooms'), 'heading_chatrooms': __('Chatrooms'),
'title_new_room': __('Click to add a new room') 'title_new_room': __('Click to add a new room')
}); });
this.join_form.setElement(this.el.querySelector('.add-chatroom'));
this.join_form.render();
return this; return this;
}, },
showAddRoomModal (ev) {
ev.preventDefault();
this.add_room_modal.show();
},
onDomainChange (model) { onDomainChange (model) {
if (_converse.auto_list_rooms) { if (_converse.auto_list_rooms) {
this.updateRoomsList(); this.updateRoomsList();
@ -2182,37 +2197,6 @@
} }
}, },
parseRoomDataFromEvent (ev) {
let jid;
const name_el = this.el.querySelector('input.new-chatroom-name');
const server_el= this.el.querySelector('input.new-chatroom-server');
const server = server_el.value;
const name = name_el.value.trim();
name_el.value = ''; // Clear the input
if (name && server) {
jid = Strophe.escapeNode(name.toLowerCase()) + '@' + server.toLowerCase();
name_el.classList.remove('error');
server_el.classList.remove('error');
this.model.save({muc_domain: server});
} else {
if (!name) { name_el.classList.add('error'); }
if (!server) { server_el.classList.add('error'); }
return;
}
return {
'jid': jid,
'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
}
},
openChatRoom (ev) {
ev.preventDefault();
const data = this.parseRoomDataFromEvent(ev);
if (!_.isUndefined(data)) {
_converse.api.rooms.open(data.jid, data);
}
},
setDomain (ev) { setDomain (ev) {
this.model.save({muc_domain: ev.target.value}); this.model.save({muc_domain: ev.target.value});
}, },

2
src/converse-profile.js
View File

@ -38,7 +38,6 @@
_converse.ChatStatusModal = Backbone.VDOMView.extend({ _converse.ChatStatusModal = Backbone.VDOMView.extend({
id: "modal-status-change",
events: { events: {
"submit form#set-xmpp-status": "onFormSubmitted", "submit form#set-xmpp-status": "onFormSubmitted",
"click .clear-input": "clearStatusMessage" "click .clear-input": "clearStatusMessage"
@ -126,6 +125,7 @@
}, },
showStatusChangeModal (ev) { showStatusChangeModal (ev) {
ev.preventDefault();
this.status_modal.show(); this.status_modal.show();
}, },

10
src/templates/add_chatroom_modal.html
View File

@ -9,10 +9,14 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="pure-form pure-form-stacked converse-form add-chatroom"> <form class="converse-form add-chatroom">
<div class="form-group"> <div class="form-group">
<label for="chatroom">Room address</label> <label for="chatroom">{{{o.label_room_address}}}:</label>
<input type="text" name="chatroom" class="form-control" placeholder="name@conference.example.org"> <input type="text" required="required" name="chatroom" class="form-control" placeholder="name@conference.example.org">
</div>
<div class="form-group">
<label for="chatroom">{{{o.label_nickname}}}:</label>
<input type="text" name="nickname" class="form-control">
</div> </div>
<input type="submit" class="btn btn-primary" name="join" value="Join"> <input type="submit" class="btn btn-primary" name="join" value="Join">
</form> </form>

2
src/templates/chatboxes.html
View File

@ -1,2 +1,2 @@
<div class="row no-gutters"></div> <div class="row no-gutters"></div>
<div id="converse-modals"></div> <div id="converse-modals" class="modals"></div>

16
src/templates/chatroom_join_form.html
View File

@ -1,16 +0,0 @@
<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
<fieldset>
<label>{{{o.label_room_name}}}</label>
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{{o.label_room_name}}}"/>
{[ if (o.server_input_type != 'hidden') { ]}
<label{{{o.server_label_global_attr}}}>{{{o.label_server}}}</label>
{[ } ]}
<input type="{{{o.server_input_type}}}"
name="server"
class="new-chatroom-server"
placeholder="{{{o.label_server}}}"
value="{{{o.muc_domain}}}"/>
<input type="submit" class="pure-button button-primary" name="join" value="{{{o.label_join}}}"/>
<input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{{o.label_show_rooms}}}"/>
</fieldset>
</form>

1
src/templates/room_panel.html
View File

@ -1,5 +1,4 @@
<!-- <div id="chatrooms"> --> <!-- <div id="chatrooms"> -->
<form class="add-chatroom"></form>
<div class="d-flex"> <div class="d-flex">
<span class="w-100">{{{o.heading_chatrooms}}}</span> <span class="w-100">{{{o.heading_chatrooms}}}</span>
<a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a> <a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a>