Move more templates out into separate files.

src/templates.js

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

src/templates/chatarea.html

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

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

+<field var="{{name}}"><value>{{value}}</value></field>

src/templates/form_checkbox.html

+<label>{{label}}<input name="{{name}}" type="{{type}}" {{checked}}></label>

src/templates/form_input.html

+<label>{{label}}<input name="{{name}}" type="{{type}}" value="{{value}}"></label>

src/templates/form_select.html

+<label>{{label}}<select name="{{name}}">{{options}}</select></label>

src/templates/occupant.html

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

+<!-- 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

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

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

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

+<option value="{{value}}">{{label}}</option>