Move more templates out into separate files.
This commit is contained in:
parent
55b9a4e568
commit
feb81a02f3
185
converse.js
185
converse.js
@ -1366,72 +1366,17 @@
|
||||
'click a.open-room': 'createChatRoom',
|
||||
'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="#"> </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) {
|
||||
cfg.$parent.append(
|
||||
this.$el.html(
|
||||
this.template({
|
||||
server_input_type: converse.hide_muc_server && 'hidden' || 'text'
|
||||
converse.templates.room_panel({
|
||||
'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());
|
||||
this.$tabs = cfg.$parent.parent().find('#controlbox-tabs');
|
||||
@ -1478,10 +1423,14 @@
|
||||
for (i=0; i<this.rooms.length; i++) {
|
||||
name = Strophe.unescapeNode($(this.rooms[i]).attr('name')||$(this.rooms[i]).attr('jid'));
|
||||
jid = $(this.rooms[i]).attr('jid');
|
||||
fragment.appendChild($(this.room_template({
|
||||
fragment.appendChild($(
|
||||
converse.templates.room_item({
|
||||
'name':name,
|
||||
'jid':jid
|
||||
}))[0]);
|
||||
'jid':jid,
|
||||
'open_title': __('Click to open this room'),
|
||||
'info_title': __('Show more information on this room')
|
||||
})
|
||||
)[0]);
|
||||
}
|
||||
$available_chatrooms.append(fragment);
|
||||
$('input#show-rooms').show().siblings('span.spinner').remove();
|
||||
@ -1527,7 +1476,7 @@
|
||||
var $stanza = $(stanza);
|
||||
// All MUC features found here: http://xmpp.org/registrar/disco-features.html
|
||||
$dd.find('span.spinner').replaceWith(
|
||||
this.room_description_template({
|
||||
converse.templates.room_description({
|
||||
'desc': $stanza.find('field[var="muc#roominfo_description"] value').text(),
|
||||
'occ': $stanza.find('field[var="muc#roominfo_occupants"] value').text(),
|
||||
'hidden': $stanza.find('feature[var="muc_hidden"]').length,
|
||||
@ -1540,7 +1489,21 @@
|
||||
'publicroom': $stanza.find('feature[var="muc_public"]').length,
|
||||
'semianonymous': $stanza.find('feature[var="muc_semianonymous"]').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));
|
||||
}
|
||||
@ -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 () {
|
||||
this.$el.attr('id', this.model.get('box_id'))
|
||||
.html(this.template(this.model.toJSON()));
|
||||
.html(converse.templates.chatroom(this.model.toJSON()));
|
||||
return this;
|
||||
},
|
||||
|
||||
renderChatArea: function () {
|
||||
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();
|
||||
}
|
||||
return this;
|
||||
@ -1817,11 +1758,6 @@
|
||||
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) {
|
||||
var $form= this.$el.find('form.chatroom-form'),
|
||||
$stanza = $(stanza),
|
||||
@ -1847,7 +1783,7 @@
|
||||
options = [];
|
||||
$options = $field.find('option');
|
||||
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(),
|
||||
label: $($options[j]).attr('label')
|
||||
}));
|
||||
@ -1858,14 +1794,14 @@
|
||||
options: options.join('')
|
||||
}));
|
||||
} else if ($field.attr('type') == 'boolean') {
|
||||
$form.append(this.form_checkbox_template({
|
||||
$form.append(converse.templates.form_checkbox({
|
||||
name: $field.attr('var'),
|
||||
type: input_types[$field.attr('type')],
|
||||
label: $field.attr('label') || '',
|
||||
checked: $field.find('value').text() === "1" && 'checked="1"' || ''
|
||||
}));
|
||||
} else {
|
||||
$form.append(this.form_input_template({
|
||||
$form.append(converse.templates.form_input({
|
||||
name: $field.attr('var'),
|
||||
type: input_types[$field.attr('type')],
|
||||
label: $field.attr('label') || '',
|
||||
@ -1879,8 +1815,6 @@
|
||||
$form.find('input[type=button]').on('click', $.proxy(this.cancelConfiguration, this));
|
||||
},
|
||||
|
||||
field_template: _.template('<field var="{{name}}"><value>{{value}}</value></field>'),
|
||||
|
||||
saveConfiguration: function (ev) {
|
||||
ev.preventDefault();
|
||||
var that = this;
|
||||
@ -1894,7 +1828,7 @@
|
||||
} else {
|
||||
value = $input.val();
|
||||
}
|
||||
var cnode = $(that.field_template({
|
||||
var cnode = $(converse.templates.field({
|
||||
name: $input.attr('name'),
|
||||
value: value
|
||||
}))[0];
|
||||
@ -2187,20 +2121,6 @@
|
||||
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) {
|
||||
this.renderChatArea();
|
||||
var controlboxview = converse.chatboxesview.views.controlbox,
|
||||
@ -2210,9 +2130,12 @@
|
||||
this.$el.find('.participant-list').empty();
|
||||
for (i=0; i<roster_size; i++) {
|
||||
participants.push(
|
||||
this.occupant_template({
|
||||
role: roster[keys[i]].role,
|
||||
nick: Strophe.unescapeNode(keys[i])
|
||||
converse.templates.occupant({
|
||||
'role': roster[keys[i]].role,
|
||||
'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(""));
|
||||
@ -2421,12 +2344,6 @@
|
||||
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(
|
||||
'<span>{{ fullname }}</span>' +
|
||||
'<a class="remove-xmpp-contact icon-remove" title="'+__('Click to remove this contact')+'" href="#"></a>'),
|
||||
@ -2468,8 +2385,12 @@
|
||||
converse.controlboxtoggle.showControlBox();
|
||||
} else if (subscription === 'both' || subscription === 'to') {
|
||||
this.$el.addClass('current-xmpp-contact');
|
||||
this.$el.html(this.template(
|
||||
_.extend(item.toJSON(), {'status_desc': STATUSES[item.get('chat_status')||'offline']})
|
||||
this.$el.html(converse.templates.roster_item(
|
||||
_.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;
|
||||
|
@ -11,7 +11,19 @@ define("converse-templates", [
|
||||
"tpl!src/templates/chatrooms_tab",
|
||||
"tpl!src/templates/login_tab",
|
||||
"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 () {
|
||||
return {
|
||||
action: arguments[0],
|
||||
@ -26,6 +38,18 @@ define("converse-templates", [
|
||||
chatrooms_tab: arguments[9],
|
||||
login_tab: arguments[10],
|
||||
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]
|
||||
};
|
||||
});
|
||||
|
13
src/templates/chatarea.html
Normal file
13
src/templates/chatarea.html
Normal file
@ -0,0 +1,13 @@
|
||||
<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>
|
9
src/templates/chatroom.html
Normal file
9
src/templates/chatroom.html
Normal file
@ -0,0 +1,9 @@
|
||||
<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>
|
1
src/templates/field.html
Normal file
1
src/templates/field.html
Normal file
@ -0,0 +1 @@
|
||||
<field var="{{name}}"><value>{{value}}</value></field>
|
1
src/templates/form_checkbox.html
Normal file
1
src/templates/form_checkbox.html
Normal file
@ -0,0 +1 @@
|
||||
<label>{{label}}<input name="{{name}}" type="{{type}}" {{checked}}></label>
|
1
src/templates/form_input.html
Normal file
1
src/templates/form_input.html
Normal file
@ -0,0 +1 @@
|
||||
<label>{{label}}<input name="{{name}}" type="{{type}}" value="{{value}}"></label>
|
1
src/templates/form_select.html
Normal file
1
src/templates/form_select.html
Normal file
@ -0,0 +1 @@
|
||||
<label>{{label}}<select name="{{name}}">{{options}}</select></label>
|
11
src/templates/occupant.html
Normal file
11
src/templates/occupant.html
Normal file
@ -0,0 +1,11 @@
|
||||
<li class="{{role}}"
|
||||
{[ if (role === "moderator") { ]}
|
||||
title="{{desc_moderator}}"
|
||||
{[ } ]}
|
||||
{[ if (role === "participant") { ]}
|
||||
title="{{desc_participant}}"
|
||||
{[ } ]}
|
||||
{[ if (role === "visitor") { ]}
|
||||
title="{{desc_visitor}}"
|
||||
{[ } ]}
|
||||
>{{nick}}</li>
|
42
src/templates/room_description.html
Normal file
42
src/templates/room_description.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!-- 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>
|
6
src/templates/room_item.html
Normal file
6
src/templates/room_item.html
Normal file
@ -0,0 +1,6 @@
|
||||
<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="#"> </a>
|
||||
</dd>
|
11
src/templates/room_panel.html
Normal file
11
src/templates/room_panel.html
Normal file
@ -0,0 +1,11 @@
|
||||
<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>
|
2
src/templates/roster_item.html
Normal file
2
src/templates/roster_item.html
Normal file
@ -0,0 +1,2 @@
|
||||
<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>
|
1
src/templates/select_option.html
Normal file
1
src/templates/select_option.html
Normal file
@ -0,0 +1 @@
|
||||
<option value="{{value}}">{{label}}</option>
|
Loading…
Reference in New Issue
Block a user