Skip to content

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

Move more templates out into separate files.

parent 55b9a4e5
Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 135 deletions
converse.js
View file @ feb81a02
...@@ -1366,72 +1366,17 @@ ...@@ -1366,72 +1366,17 @@
'click a.open-room': 'createChatRoom', 'click a.open-room': 'createChatRoom',
'click a.room-info': 'showRoomInfo' 'click a.room-info': 'showRoomInfo'
}, },
room_template: _.template(
'<dd class="available-chatroom">'+
'<a class="open-room" data-room-jid="{{jid}}"'+
'title="'+__('Click to open this room')+'" href="#">{{name}}</a>'+
'<a class="room-info icon-room-info" data-room-jid="{{jid}}"'+
'title="'+__('Show more information on this room')+'" href="#">&nbsp;</a>'+
'</dd>'),
// FIXME: check markup in mockup
room_description_template: _.template(
'<div class="room-info">'+
'<p class="room-info"><strong>'+__('Description:')+'</strong> {{desc}}</p>' +
'<p class="room-info"><strong>'+__('Occupants:')+'</strong> {{occ}}</p>' +
'<p class="room-info"><strong>'+__('Features:')+'</strong> <ul>'+
'{[ if (passwordprotected) { ]}' +
'<li class="room-info locked">'+__('Requires authentication')+'</li>' +
'{[ } ]}' +
'{[ if (hidden) { ]}' +
'<li class="room-info">'+__('Hidden')+'</li>' +
'{[ } ]}' +
'{[ if (membersonly) { ]}' +
'<li class="room-info">'+__('Requires an invitation')+'</li>' +
'{[ } ]}' +
'{[ if (moderated) { ]}' +
'<li class="room-info">'+__('Moderated')+'</li>' +
'{[ } ]}' +
'{[ if (nonanonymous) { ]}' +
'<li class="room-info">'+__('Non-anonymous')+'</li>' +
'{[ } ]}' +
'{[ if (open) { ]}' +
'<li class="room-info">'+__('Open room')+'</li>' +
'{[ } ]}' +
'{[ if (persistent) { ]}' +
'<li class="room-info">'+__('Permanent room')+'</li>' +
'{[ } ]}' +
'{[ if (publicroom) { ]}' +
'<li class="room-info">'+__('Public')+'</li>' +
'{[ } ]}' +
'{[ if (semianonymous) { ]}' +
'<li class="room-info">'+__('Semi-anonymous')+'</li>' +
'{[ } ]}' +
'{[ if (temporary) { ]}' +
'<li class="room-info">'+__('Temporary room')+'</li>' +
'{[ } ]}' +
'{[ if (unmoderated) { ]}' +
'<li class="room-info">'+__('Unmoderated')+'</li>' +
'{[ } ]}' +
'</p>' +
'</div>'
),
template: _.template(
'<form class="add-chatroom" action="" method="post">'+
'<input type="text" name="chatroom" class="new-chatroom-name" placeholder="'+__('Room name')+'"/>'+
'<input type="text" name="nick" class="new-chatroom-nick" placeholder="'+__('Nickname')+'"/>'+
'<input type="{{ server_input_type }}" name="server" class="new-chatroom-server" placeholder="'+__('Server')+'"/>'+
'<input type="submit" name="join" value="'+__('Join')+'"/>'+
'<input type="button" name="show" id="show-rooms" value="'+__('Show rooms')+'"/>'+
'</form>'+
'<dl id="available-chatrooms"></dl>'),
initialize: function (cfg) { initialize: function (cfg) {
cfg.$parent.append( cfg.$parent.append(
this.$el.html( this.$el.html(
this.template({ converse.templates.room_panel({
server_input_type: converse.hide_muc_server && 'hidden' || 'text' 'server_input_type': converse.hide_muc_server && 'hidden' || 'text',
'label_room_name': __('Room name'),
'label_nickname': __('Nickname'),
'label_server': __('Server'),
'label_join': __('Join'),
'label_show_rooms': __('Show rooms')
}) })
).hide()); ).hide());
this.$tabs = cfg.$parent.parent().find('#controlbox-tabs'); this.$tabs = cfg.$parent.parent().find('#controlbox-tabs');
...@@ -1478,10 +1423,14 @@ ...@@ -1478,10 +1423,14 @@
for (i=0; i<this.rooms.length; i++) { for (i=0; i<this.rooms.length; i++) {
name = Strophe.unescapeNode($(this.rooms[i]).attr('name')||$(this.rooms[i]).attr('jid')); name = Strophe.unescapeNode($(this.rooms[i]).attr('name')||$(this.rooms[i]).attr('jid'));
jid = $(this.rooms[i]).attr('jid'); jid = $(this.rooms[i]).attr('jid');
fragment.appendChild($(this.room_template({ fragment.appendChild($(
'name':name, converse.templates.room_item({
'jid':jid 'name':name,
}))[0]); 'jid':jid,
'open_title': __('Click to open this room'),
'info_title': __('Show more information on this room')
})
)[0]);
} }
$available_chatrooms.append(fragment); $available_chatrooms.append(fragment);
$('input#show-rooms').show().siblings('span.spinner').remove(); $('input#show-rooms').show().siblings('span.spinner').remove();
...@@ -1527,7 +1476,7 @@ ...@@ -1527,7 +1476,7 @@
var $stanza = $(stanza); var $stanza = $(stanza);
// All MUC features found here: http://xmpp.org/registrar/disco-features.html // All MUC features found here: http://xmpp.org/registrar/disco-features.html
$dd.find('span.spinner').replaceWith( $dd.find('span.spinner').replaceWith(
this.room_description_template({ converse.templates.room_description({
'desc': $stanza.find('field[var="muc#roominfo_description"] value').text(), 'desc': $stanza.find('field[var="muc#roominfo_description"] value').text(),
'occ': $stanza.find('field[var="muc#roominfo_occupants"] value').text(), 'occ': $stanza.find('field[var="muc#roominfo_occupants"] value').text(),
'hidden': $stanza.find('feature[var="muc_hidden"]').length, 'hidden': $stanza.find('feature[var="muc_hidden"]').length,
...@@ -1540,7 +1489,21 @@ ...@@ -1540,7 +1489,21 @@
'publicroom': $stanza.find('feature[var="muc_public"]').length, 'publicroom': $stanza.find('feature[var="muc_public"]').length,
'semianonymous': $stanza.find('feature[var="muc_semianonymous"]').length, 'semianonymous': $stanza.find('feature[var="muc_semianonymous"]').length,
'temporary': $stanza.find('feature[var="muc_temporary"]').length, 'temporary': $stanza.find('feature[var="muc_temporary"]').length,
'unmoderated': $stanza.find('feature[var="muc_unmoderated"]').length 'unmoderated': jstanza.find('feature[var="muc_unmoderated"]').length,
'label_desc': __('Description:'),
'label_occ': __('Occupants:'),
'label_features': __('Features:'),
'label_requires_auth': __('Requires authentication'),
'label_hidden': __('Hidden'),
'label_requires_invite': __('Requires an invitation'),
'label_moderated': __('Moderated'),
'label_non_anon': __('Non-anonymous'),
'label_open_room': __('Open room'),
'label_permanent_room': __('Permanent room'),
'label_public': __('Public'),
'label_semi_anon': _('Semi-anonymous'),
'label_temp_room': _('Temporary room'),
'label_unmoderated': __('Unmoderated')
})); }));
}, this)); }, this));
} }
...@@ -1739,42 +1702,20 @@ ...@@ -1739,42 +1702,20 @@
} }
}, },
template: _.template(
'<div class="chat-head chat-head-chatroom">' +
'<a class="close-chatbox-button icon-close"></a>' +
'<a class="configure-chatroom-button icon-wrench" style="display:none"></a>' +
'<div class="chat-title"> {{ name }} </div>' +
'<p class="chatroom-topic"><p/>' +
'</div>' +
'<div class="chat-body">' +
'<span class="spinner centered"/>' +
'</div>'),
chatarea_template: _.template(
'<div class="chat-area">' +
'<div class="chat-content"></div>' +
'<form class="sendXMPPMessage" action="" method="post">' +
'{[ if ('+converse.show_toolbar+') { ]}' +
'<ul class="chat-toolbar no-text-select"></ul>'+
'{[ } ]}' +
'<textarea type="text" class="chat-textarea" ' +
'placeholder="'+__('Message')+'"/>' +
'</form>' +
'</div>' +
'<div class="participants">' +
'<ul class="participant-list"></ul>' +
'</div>'
),
render: function () { render: function () {
this.$el.attr('id', this.model.get('box_id')) this.$el.attr('id', this.model.get('box_id'))
.html(this.template(this.model.toJSON())); .html(converse.templates.chatroom(this.model.toJSON()));
return this; return this;
}, },
renderChatArea: function () { renderChatArea: function () {
if (!this.$el.find('.chat-area').length) { if (!this.$el.find('.chat-area').length) {
this.$el.find('.chat-body').empty().append(this.chatarea_template()); this.$el.find('.chat-body').empty().append(
converse.templates.chatarea({
'show_toolbar': converse.show_toolbar,
'label_message': __('Message')
})
);
this.renderToolbar(); this.renderToolbar();
} }
return this; return this;
...@@ -1817,11 +1758,6 @@ ...@@ -1817,11 +1758,6 @@
this.model.set('connected', false); this.model.set('connected', false);
}, },
form_input_template: _.template('<label>{{label}}<input name="{{name}}" type="{{type}}" value="{{value}}"></label>'),
select_option_template: _.template('<option value="{{value}}">{{label}}</option>'),
form_select_template: _.template('<label>{{label}}<select name="{{name}}">{{options}}</select></label>'),
form_checkbox_template: _.template('<label>{{label}}<input name="{{name}}" type="{{type}}" {{checked}}"></label>'),
renderConfigurationForm: function (stanza) { renderConfigurationForm: function (stanza) {
var $form= this.$el.find('form.chatroom-form'), var $form= this.$el.find('form.chatroom-form'),
$stanza = $(stanza), $stanza = $(stanza),
...@@ -1847,7 +1783,7 @@ ...@@ -1847,7 +1783,7 @@
options = []; options = [];
$options = $field.find('option'); $options = $field.find('option');
for (j=0; j<$options.length; j++) { for (j=0; j<$options.length; j++) {
options.push(this.select_option_template({ options.push(converse.templates.select_option({
value: $($options[j]).find('value').text(), value: $($options[j]).find('value').text(),
label: $($options[j]).attr('label') label: $($options[j]).attr('label')
})); }));
...@@ -1858,14 +1794,14 @@ ...@@ -1858,14 +1794,14 @@
options: options.join('') options: options.join('')
})); }));
} else if ($field.attr('type') == 'boolean') { } else if ($field.attr('type') == 'boolean') {
$form.append(this.form_checkbox_template({ $form.append(converse.templates.form_checkbox({
name: $field.attr('var'), name: $field.attr('var'),
type: input_types[$field.attr('type')], type: input_types[$field.attr('type')],
label: $field.attr('label') || '', label: $field.attr('label') || '',
checked: $field.find('value').text() === "1" && 'checked="1"' || '' checked: $field.find('value').text() === "1" && 'checked="1"' || ''
})); }));
} else { } else {
$form.append(this.form_input_template({ $form.append(converse.templates.form_input({
name: $field.attr('var'), name: $field.attr('var'),
type: input_types[$field.attr('type')], type: input_types[$field.attr('type')],
label: $field.attr('label') || '', label: $field.attr('label') || '',
...@@ -1879,8 +1815,6 @@ ...@@ -1879,8 +1815,6 @@
$form.find('input[type=button]').on('click', $.proxy(this.cancelConfiguration, this)); $form.find('input[type=button]').on('click', $.proxy(this.cancelConfiguration, this));
}, },
field_template: _.template('<field var="{{name}}"><value>{{value}}</value></field>'),
saveConfiguration: function (ev) { saveConfiguration: function (ev) {
ev.preventDefault(); ev.preventDefault();
var that = this; var that = this;
...@@ -1894,7 +1828,7 @@ ...@@ -1894,7 +1828,7 @@
} else { } else {
value = $input.val(); value = $input.val();
} }
var cnode = $(that.field_template({ var cnode = $(converse.templates.field({
name: $input.attr('name'), name: $input.attr('name'),
value: value value: value
}))[0]; }))[0];
...@@ -2187,20 +2121,6 @@ ...@@ -2187,20 +2121,6 @@
return true; return true;
}, },
occupant_template: _.template(
'<li class="{{role}}" '+
'{[ if (role === "moderator") { ]}' +
'title="'+__('This user is a moderator')+'"' +
'{[ } ]}'+
'{[ if (role === "participant") { ]}' +
'title="'+__('This user can send messages in this room')+'"' +
'{[ } ]}'+
'{[ if (role === "visitor") { ]}' +
'title="'+__('This user can NOT send messages in this room')+'"' +
'{[ } ]}'+
'>{{nick}}</li>'
),
onChatRoomRoster: function (roster, room) { onChatRoomRoster: function (roster, room) {
this.renderChatArea(); this.renderChatArea();
var controlboxview = converse.chatboxesview.views.controlbox, var controlboxview = converse.chatboxesview.views.controlbox,
...@@ -2210,9 +2130,12 @@ ...@@ -2210,9 +2130,12 @@
this.$el.find('.participant-list').empty(); this.$el.find('.participant-list').empty();
for (i=0; i<roster_size; i++) { for (i=0; i<roster_size; i++) {
participants.push( participants.push(
this.occupant_template({ converse.templates.occupant({
role: roster[keys[i]].role, 'role': roster[keys[i]].role,
nick: Strophe.unescapeNode(keys[i]) 'nick': Strophe.unescapeNode(keys[i]),
'desc_moderator': __('This user is a moderator'),
'desc_participant': __('This user can send messages in this room'),
'desc_visitor': __('This user can NOT send messages in this room')
})); }));
} }
$participant_list.append(participants.join("")); $participant_list.append(participants.join(""));
...@@ -2421,12 +2344,6 @@ ...@@ -2421,12 +2344,6 @@
this.model.destroy(); this.model.destroy();
}, },
template: _.template(
'<a class="open-chat" title="'+__('Click to chat with this contact')+'" href="#">'+
'<span class="icon-{{ chat_status }}" title="{{ status_desc }}"></span>{{ fullname }}'+
'</a>' +
'<a class="remove-xmpp-contact icon-remove" title="'+__('Click to remove this contact')+'" href="#"></a>'),
pending_template: _.template( pending_template: _.template(
'<span>{{ fullname }}</span>' + '<span>{{ fullname }}</span>' +
'<a class="remove-xmpp-contact icon-remove" title="'+__('Click to remove this contact')+'" href="#"></a>'), '<a class="remove-xmpp-contact icon-remove" title="'+__('Click to remove this contact')+'" href="#"></a>'),
...@@ -2468,8 +2385,12 @@ ...@@ -2468,8 +2385,12 @@
converse.controlboxtoggle.showControlBox(); converse.controlboxtoggle.showControlBox();
} else if (subscription === 'both' || subscription === 'to') { } else if (subscription === 'both' || subscription === 'to') {
this.$el.addClass('current-xmpp-contact'); this.$el.addClass('current-xmpp-contact');
this.$el.html(this.template( this.$el.html(converse.templates.roster_item(
_.extend(item.toJSON(), {'status_desc': STATUSES[item.get('chat_status')||'offline']}) _.extend(item.toJSON(), {
'desc_status': STATUSES[item.get('chat_status')||'offline'],
'desc_chat': __('Click to chat with this contact'),
'desc_remove': __('Click to remove this contact')
})
)); ));
} }
return this; return this;
......
src/templates.js
View file @ feb81a02
...@@ -11,7 +11,19 @@ define("converse-templates", [ ...@@ -11,7 +11,19 @@ define("converse-templates", [
"tpl!src/templates/chatrooms_tab", "tpl!src/templates/chatrooms_tab",
"tpl!src/templates/login_tab", "tpl!src/templates/login_tab",
"tpl!src/templates/add_contact_dropdown", "tpl!src/templates/add_contact_dropdown",
"tpl!src/templates/add_contact_form" "tpl!src/templates/add_contact_form",
"tpl!src/templates/room_item",
"tpl!src/templates/room_description",
"tpl!src/templates/room_panel",
"tpl!src/templates/chatroom",
"tpl!src/templates/chatarea",
"tpl!src/templates/form_input",
"tpl!src/templates/select_option",
"tpl!src/templates/form_select",
"tpl!src/templates/form_checkbox",
"tpl!src/templates/field",
"tpl!src/templates/occupant",
"tpl!src/templates/roster_item"
], function () { ], function () {
return { return {
action: arguments[0], action: arguments[0],
...@@ -26,6 +38,18 @@ define("converse-templates", [ ...@@ -26,6 +38,18 @@ define("converse-templates", [
chatrooms_tab: arguments[9], chatrooms_tab: arguments[9],
login_tab: arguments[10], login_tab: arguments[10],
add_contact_dropdown: arguments[11], add_contact_dropdown: arguments[11],
add_contact_form: arguments[12] add_contact_form: arguments[12],
room_item: arguments[13],
room_description: arguments[14],
room_panel: arguments[15],
chatroom: arguments[16],
chatarea: arguments[17],
form_input: arguments[18],
select_option: arguments[19],
form_select: arguments[20],
form_checkbox: arguments[21],
field: arguments[22],
occupant: arguments[23],
roster_item: arguments[24]
}; };
}); });
src/templates/chatarea.html 0 → 100644
View file @ feb81a02
<div class="chat-area">
<div class="chat-content"></div>
<form class="sendXMPPMessage" action="" method="post">
{[ if (show_toolbar) { ]}
<ul class="chat-toolbar no-text-select"></ul>
{[ } ]}
<textarea type="text" class="chat-textarea"
placeholder="{{label_message}}"/>
</form>
</div>
<div class="participants">
<ul class="participant-list"></ul>
</div>
src/templates/chatroom.html 0 → 100644
View file @ feb81a02
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="configure-chatroom-button icon-wrench" style="display:none"></a>
<div class="chat-title"> {{ name }} </div>
<p class="chatroom-topic"><p/>
</div>
<div class="chat-body">
<span class="spinner centered"/>
</div>
src/templates/field.html 0 → 100644
View file @ feb81a02
<field var="{{name}}"><value>{{value}}</value></field>
src/templates/form_checkbox.html 0 → 100644
View file @ feb81a02
<label>{{label}}<input name="{{name}}" type="{{type}}" {{checked}}></label>
src/templates/form_input.html 0 → 100644
View file @ feb81a02
<label>{{label}}<input name="{{name}}" type="{{type}}" value="{{value}}"></label>
src/templates/form_select.html 0 → 100644
View file @ feb81a02
<label>{{label}}<select name="{{name}}">{{options}}</select></label>
src/templates/occupant.html 0 → 100644
View file @ feb81a02
<li class="{{role}}"
{[ if (role === "moderator") { ]}
title="{{desc_moderator}}"
{[ } ]}
{[ if (role === "participant") { ]}
title="{{desc_participant}}"
{[ } ]}
{[ if (role === "visitor") { ]}
title="{{desc_visitor}}"
{[ } ]}
>{{nick}}</li>
src/templates/room_description.html 0 → 100644
View file @ feb81a02
<!-- FIXME: check markup in mockup -->
<div class="room-info">
<p class="room-info"><strong>{{label_desc}}</strong> {{desc}}</p>
<p class="room-info"><strong>{{label_occ}}</strong> {{occ}}</p>
<p class="room-info"><strong>{{label_features}}</strong>
<ul>
{[ if (passwordprotected) { ]}
<li class="room-info locked">{{label_requires_auth}}</li>
{[ } ]}
{[ if (hidden) { ]}
<li class="room-info">{{label_hidden}}</li>
{[ } ]}
{[ if (membersonly) { ]}
<li class="room-info">{{label_requires_invite}}</li>
{[ } ]}
{[ if (moderated) { ]}
<li class="room-info">{{label_moderated}}</li>
{[ } ]}
{[ if (nonanonymous) { ]}
<li class="room-info">{{label_non_anon}}</li>
{[ } ]}
{[ if (open) { ]}
<li class="room-info">{{label_open_room}}</li>
{[ } ]}
{[ if (persistent) { ]}
<li class="room-info">{{label_permanent_room}}</li>
{[ } ]}
{[ if (publicroom) { ]}
<li class="room-info">{{label_public}}</li>
{[ } ]}
{[ if (semianonymous) { ]}
<li class="room-info">{{label_semi_anon}}</li>
{[ } ]}
{[ if (temporary) { ]}
<li class="room-info">{{label_temp_room}}</li>
{[ } ]}
{[ if (unmoderated) { ]}
<li class="room-info">{{label_unmoderated}}</li>
{[ } ]}
</ul>
</p>
</div>
src/templates/room_item.html 0 → 100644
View file @ feb81a02
<dd class="available-chatroom">
<a class="open-room" data-room-jid="{{jid}}"
title="{{open_title}}" href="#">{{name}}</a>
<a class="room-info icon-room-info" data-room-jid="{{jid}}"
title="{{info_title}}" href="#">&nbsp;</a>
</dd>
src/templates/room_panel.html 0 → 100644
View file @ feb81a02
<form class="add-chatroom" action="" method="post">
<input type="text" name="chatroom" class="new-chatroom-name"
placeholder="{{label_room_name}}"/>
<input type="text" name="nick" class="new-chatroom-nick"
placeholder="{{label_nickname}}"/>
<input type="{{server_input_type}}" name="server" class="new-chatroom-server"
placeholder="{{label_server}}"/>
<input type="submit" name="join" value="{{label_join}}"/>
<input type="button" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
</form>
<dl id="available-chatrooms"></dl>
src/templates/roster_item.html 0 → 100644
View file @ feb81a02
<a class="open-chat" title="{{desc_chat}}" href="#"><span class="icon-{{chat_status}}" title="{{desc_status}}"></span>{{fullname}}</a>
<a class="remove-xmpp-contact icon-remove" title="{{desc_remove}}" href="#"></a>
src/templates/select_option.html 0 → 100644
View file @ feb81a02
<option value="{{value}}">{{label}}</option>
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