Move more templates out into separate files.

This commit is contained in:
JC Brand 2014-01-19 06:21:49 +02:00
parent 55b9a4e568
commit feb81a02f3
14 changed files with 179 additions and 135 deletions

View File

@ -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="#">&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) {
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({
'name':name,
'jid':jid
}))[0]);
fragment.appendChild($(
converse.templates.room_item({
'name':name,
'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;

View File

@ -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]
};
});

View 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>

View 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
View File

@ -0,0 +1 @@
<field var="{{name}}"><value>{{value}}</value></field>

View File

@ -0,0 +1 @@
<label>{{label}}<input name="{{name}}" type="{{type}}" {{checked}}></label>

View File

@ -0,0 +1 @@
<label>{{label}}<input name="{{name}}" type="{{type}}" value="{{value}}"></label>

View File

@ -0,0 +1 @@
<label>{{label}}<select name="{{name}}">{{options}}</select></label>

View 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>

View 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>

View 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="#">&nbsp;</a>
</dd>

View 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>

View 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>

View File

@ -0,0 +1 @@
<option value="{{value}}">{{label}}</option>