Commit 55b9a4e5 authored by JC Brand's avatar JC Brand

Initial support for external HTMl templates. Updates #77

parent f97217cf
......@@ -4,7 +4,8 @@
"devDependencies": {
"jasmine": "https://github.com/jcbrand/jasmine.git#1_3_x",
"otr": "0.2.7",
"requirejs-text": "~2.0.10"
"requirejs-text": "~2.0.10",
"requirejs-tpl-jfparadis": "*"
},
"dependencies": {
"requirejs": "2.1.8",
......@@ -22,7 +23,8 @@
"otr": "0.2.7",
"crypto-js": "~3.1.2",
"almond": "~0.2.6",
"requirejs-text": "~2.0.10"
"requirejs-text": "~2.0.10",
"requirejs-tpl-jfparadis": "*"
},
"exportsOverride": {}
}
This diff is collapsed.
require.config({
config = {
paths: {
"jquery": "components/jquery/jquery",
"locales": "locale/locales",
......@@ -6,6 +6,9 @@ require.config({
"underscore": "components/underscore/underscore",
"backbone": "components/backbone/backbone",
"backbone.localStorage": "components/backbone.localStorage/backbone.localStorage",
"text": 'components/requirejs-text/text',
"tpl": 'components/requirejs-tpl-jfparadis/tpl',
"converse-templates": "src/templates",
"strophe": "components/strophe/strophe",
"strophe.muc": "components/strophe.muc/index",
"strophe.roster": "components/strophe.roster/index",
......@@ -30,6 +33,14 @@ require.config({
"converse-dependencies": "src/deps-full"
},
tpl: {
// Use Mustache style syntax for variable interpolation
templateSettings: {
evaluate : /\{\[([\s\S]+?)\]\}/g,
interpolate : /\{\{([\s\S]+?)\}\}/g
}
},
// define module dependencies for modules not using define
shim: {
'backbone': {
......@@ -51,8 +62,11 @@ require.config({
'strophe.vcard': { deps: ['strophe'] },
'strophe.disco': { deps: ['strophe'] }
}
});
};
require(["jquery", "converse"], function(require, $, converse) {
window.converse = converse;
});
if (typeof(require) !== 'undefined') {
require.config(config);
require(["jquery", "converse"], function(require, $, converse) {
window.converse = converse;
});
}
define("converse-templates", [
"tpl!src/templates/action",
"tpl!src/templates/message",
"tpl!src/templates/new_day",
"tpl!src/templates/info",
"tpl!src/templates/controlbox",
"tpl!src/templates/chatbox",
"tpl!src/templates/toolbar",
"tpl!src/templates/contacts_tab",
"tpl!src/templates/contacts_panel",
"tpl!src/templates/chatrooms_tab",
"tpl!src/templates/login_tab",
"tpl!src/templates/add_contact_dropdown",
"tpl!src/templates/add_contact_form"
], function () {
return {
action: arguments[0],
message: arguments[1],
new_day: arguments[2],
info: arguments[3],
controlbox: arguments[4],
chatbox: arguments[5],
toolbar: arguments[6],
contacts_tab: arguments[7],
contacts_panel: arguments[8],
chatrooms_tab: arguments[9],
login_tab: arguments[10],
add_contact_dropdown: arguments[11],
add_contact_form: arguments[12]
};
});
<div class="chat-message {{extra_classes}}">
<span class="chat-message-{{sender}}">{{time}} **{{username}} </span>
<span class="chat-message-content">{{message}}</span>
</div>
<dl class="add-converse-contact dropdown">
<dt id="xmpp-contact-search" class="fancy-dropdown">
<a class="toggle-xmpp-contact-form" href="#"
title="{{label_click_to_chat}}">
<span class="icon-plus"></span>{{label_add_contact}}</a>
</dt>
<dd class="search-xmpp" style="display:none"><ul></ul></dd>
</dl>
<li>
<form class="add-xmpp-contact">
<input type="text"
name="identifier"
class="username"
placeholder="{{label_contact_username}}"/>
<button type="submit">{{label_add}}</button>
</form>
<li>
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<a href="{{url}}" target="_blank" class="user">
<div class="chat-title"> {{ fullname }} </div>
</a>
<p class="user-custom-message"><p/>
</div>
<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_personal_message}}"/>
</form>
<li><a class="s" href="#chatrooms">{{label_rooms}}</a></li>
<form class="set-xmpp-status" action="" method="post">
<span id="xmpp-status-holder">
<select id="select-xmpp-status" style="display:none">
<option value="online">{{label_online}}</option>
<option value="dnd">{{label_busy}}</option>
<option value="away">{{label_away}}</option>
<option value="offline">{{label_offline}}</option>
</select>
</span>
</form>
<li><a class="s current" href="#users">{{label_contacts}}</a></li>
<div class="chat-head oc-chat-head">
<ul id="controlbox-tabs"></ul>
<a class="close-chatbox-button icon-close"></a>
</div>
<div class="controlbox-panes"></div>
<div class="chat-info">{{message}}</div>
<li><a class="current" href="#login">{{label_sign_in}}</a></li>
<div class="chat-message {{extra_classes}}">
<span class="chat-message-{{sender}}">{{time}} {{username}}:&nbsp;</span>
<span class="chat-message-content">{{message}}</span>
</div>
<time class="chat-date" datetime="{{isodate}}">{{datestring}}</time>
<li>
<form class="search-xmpp-contact">
<input type="text"
name="identifier"
class="username"
placeholder="{{label_contact_name}}"/>
<button type="submit">{{label_search}}</button>
</form>
<li>
{[ if (show_emoticons) { ]}
<li class="toggle-smiley icon-happy" title="Insert a smilery">
<ul>
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
<li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
<li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
<li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
<li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
<li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
<li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
<li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
<li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
<li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
<li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
<li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
</ul>
</li>
{[ } ]}
{[ if (show_call_button) { ]}
<li><a class="toggle-call icon-phone" title="Start a call"></a></li>
{[ } ]}
{[ if (allow_otr) { ]}
<li class="toggle-otr {{otr_status_class}}" title="{{otr_tooltip}}">
<span class="chat-toolbar-text">{{otr_translated_status}}</span>
{[ if (otr_status == UNENCRYPTED) { ]}
<span class="icon-unlocked"></span>
{[ } ]}
{[ if (otr_status == UNVERIFIED) { ]}
<span class="icon-lock"></span>
{[ } ]}
{[ if (otr_status == VERIFIED) { ]}
<span class="icon-lock"></span>
{[ } ]}
{[ if (otr_status == FINISHED) { ]}
<span class="icon-unlocked"></span>
{[ } ]}
<ul>
{[ if (otr_status == UNENCRYPTED) { ]}
<li><a class="start-otr" href="#">{{label_start_encrypted_conversation}}</a></li>
{[ } ]}
{[ if (otr_status != UNENCRYPTED) { ]}
<li><a class="start-otr" href="#">{{label_start_encrypted_conversation}}</a></li>
<li><a class="end-otr" href="#">{{label_end_encrypted_conversation}}</a></li>
<li><a class="auth-otr" data-scheme="smp" href="#">{{label_verify_with_smp}}</a></li>
{[ } ]}
{[ if (otr_status == UNVERIFIED) { ]}
<li><a class="auth-otr" data-scheme="fingerprint" href="#">{{label_verify_with_fingerprints}}</a></li>
{[ } ]}
<li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">{{label_whats_this}}</a></li>
</ul>
</li>
{[ } ]}
......@@ -8,6 +8,7 @@
<link rel="stylesheet" type="text/css" href="components/jasmine/src/html/jasmine.css">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<link rel="stylesheet" type="text/css" media="screen" href="converse.css">
<script src="main.js"></script>
<script data-main="tests_main" src="components/requirejs/require.js"></script>
</head>
......
require.config({
paths: {
"jquery": "components/jquery/jquery",
"locales": "locale/locales",
"jquery.tinysort": "components/tinysort/src/jquery.tinysort",
"underscore": "components/underscore/underscore",
"backbone": "components/backbone/backbone",
"backbone.localStorage": "components/backbone.localStorage/backbone.localStorage",
"strophe": "components/strophe/strophe",
"strophe.muc": "components/strophe.muc/index",
"strophe.roster": "components/strophe.roster/index",
"strophe.vcard": "components/strophe.vcard/index",
"strophe.disco": "components/strophe.disco/index",
"salsa20": "components/otr/build/dep/salsa20",
"bigint": "src/bigint",
"crypto.core": "components/otr/vendor/cryptojs/core",
"crypto.enc-base64": "components/otr/vendor/cryptojs/enc-base64",
"crypto.md5": "components/crypto-js/src/md5",
"crypto.evpkdf": "components/crypto-js/src/evpkdf",
"crypto.cipher-core": "components/otr/vendor/cryptojs/cipher-core",
"crypto.aes": "components/otr/vendor/cryptojs/aes",
"crypto.sha1": "components/otr/vendor/cryptojs/sha1",
"crypto.sha256": "components/otr/vendor/cryptojs/sha256",
"crypto.hmac": "components/otr/vendor/cryptojs/hmac",
"crypto.pad-nopadding": "components/otr/vendor/cryptojs/pad-nopadding",
"crypto.mode-ctr": "components/otr/vendor/cryptojs/mode-ctr",
"crypto": "src/crypto",
"eventemitter": "components/otr/build/dep/eventemitter",
"otr": "components/otr/build/otr",
"converse-dependencies": "src/deps-full",
// Extra test dependencies
"mock": "tests/mock",
"utils": "tests/utils",
"jasmine": "components/jasmine/lib/jasmine-core/jasmine",
"jasmine-html": "components/jasmine/lib/jasmine-core/jasmine-html",
"jasmine-console-reporter": "node_modules/jasmine-reporters/src/jasmine.console_reporter",
"jasmine-junit-reporter": "node_modules/jasmine-reporters/src/jasmine.junit_reporter"
},
// Extra test dependencies
config.paths.mock = "tests/mock";
config.paths.utils = "tests/utils";
config.paths.jasmine = "components/jasmine/lib/jasmine-core/jasmine";
config.paths["jasmine-html"] = "components/jasmine/lib/jasmine-core/jasmine-html";
config.paths["jasmine-console-reporter"] = "node_modules/jasmine-reporters/src/jasmine.console_reporter";
config.paths["jasmine-junit-reporter"] = "node_modules/jasmine-reporters/src/jasmine.junit_reporter";
// define module dependencies for modules not using define
shim: {
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: [
'underscore',
'jquery'
],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'jquery.tinysort': { deps: ['jquery'] },
'strophe': { deps: ['jquery'] },
'underscore': { exports: '_' },
'strophe.muc': { deps: ['strophe', 'jquery'] },
'strophe.roster': { deps: ['strophe'] },
'strophe.vcard': { deps: ['strophe'] },
'strophe.disco': { deps: ['strophe'] },
// Extra test dependencies
'jasmine-html': {
deps: ['jasmine'],
exports: 'jasmine'
},
'jasmine-console-reporter': {
deps: ['jasmine-html'],
exports: 'jasmine'
},
'jasmine-junit-reporter': {
deps: ['jasmine-html'],
exports: 'jasmine'
}
}
});
config.shim['jasmine-html'] = {
deps: ['jasmine'],
exports: 'jasmine'
};
config.shim['jasmine-console-reporter'] = {
deps: ['jasmine-html'],
exports: 'jasmine'
};
config.shim['jasmine-junit-reporter'] = {
deps: ['jasmine-html'],
exports: 'jasmine'
};
require.config(config);
// Polyfill 'bind' which is not available in phantomjs < 2.0
if (!Function.prototype.bind) {
......
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