ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added template loading through AJAX

Browse source
This commit is contained in:
Marcin Kurczewski 2014-09-02 09:36:42 +02:00
parent 5573c49985
commit 978d22de67
9 changed files with 197 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public_html/.htaccess
View file

@ -1,2 +1,6 @@
RewriteEngine On RewriteEngine On
RewriteRule ^/?api/(.*) api-dispatch.php?q=$1 [L] RewriteRule ^/?api/(.*) api-dispatch.php?q=$1 [L]
<IfModule mod_mime.c>
AddType text/html .tpl
</IfModule>

126
public_html/index.html
View file

@ -25,134 +25,11 @@
</div> </div>
</div> </div>
<script type="text/template" id="top-navigation-template">
<ul>
<!-- todo: check privileges -->
<li class="users">
<a href="#/users">Users</a>
</li>
<% if (!loggedIn) { %>
<li class="login">
<a href="#/login">Login</a>
</li>
<li class="register">
<a href="#/register">Register</a>
</li>
<% } else { %>
<li class="logout">
<a href="#/logout">Logout</a>
</li>
<% } %>
</ul>
</script>
<script type="text/template" id="login-form-template">
<div id="login-form">
<p>
If you don't have an account yet,<br/>
<a href="#/register">click here</a> to create a new one.
</p>
<div class="messages"></div>
<form method="post" class="form-wrapper">
<div class="form-row">
<label for="login-user" class="form-label">User name:</label>
<div class="form-input">
<input autocomplete="off" type="text" name="user" id="login-user"/>
</div>
</div>
<div class="form-row">
<label for="login-password" class="form-label">Password:</label>
<div class="form-input">
<input autocomplete="off" type="password" name="password" id="login-password"/>
</div>
</div>
<div class="form-row">
<label class="form-label"></label>
<div class="form-input">
<button class="submit" type="submit">Log in</button>
&nbsp;
<input type="hidden" name="remember" value="0"/>
<label class="checkbox-wrapper">
<input type="checkbox" name="remember" value="1"/>
<span></span>
Remember me
</label>
</div>
</div>
</form>
<div class="help">
<p>Problems logging in?</p>
<ul>
<li><a href="#/password-reset">I don't remember my password</a></li>
<li><a href="#/activate-account">I haven't received activation e-mail</a></li>
<li><a href="#/register">I don't have an account</a></li>
</ul>
</div>
</div>
</script>
<script type="text/template" id="registration-form-template">
<div id="registration-form">
<p>
Registered users can view more content,<br/>
upload files and add posts to favorites.
</p>
<div class="messages"></div>
<form method="post" class="form-wrapper">
<div class="form-row">
<label for="registration-user" class="form-label">User name:</label>
<div class="form-input">
<input autocomplete="off" type="text" name="user" id="registration-user" placeholder="e.g. darth_vader" value=""/>
</div>
</div>
<div class="form-row">
<label for="registration-password" class="form-label">Password:</label>
<div class="form-input">
<input autocomplete="off" type="password" name="password1" id="registration-password" placeholder="e.g. &#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;" value=""/>
</div>
</div>
<div class="form-row">
<label for="registration-password-confirm" class="form-label">Password (repeat):</label>
<div class="form-input">
<input autocomplete="off" type="password" name="password2" id="registration-password-confirm" placeholder="e.g. &#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;" value=""/>
</div>
</div>
<div class="form-row">
<label for="registration-email" class="form-label">E-mail address:</label>
<div class="form-input">
<input autocomplete="off" type="text" name="email" id="registration-email" placeholder="e.g. vader@empire.gov" value=""/>
</div>
</div>
<div class="form-row">
<label class="form-label"></label>
<div class="form-input">
<button class="submit" type="submit">Register</button>
</div>
</div>
</form>
<p id="email-info">
Your e-mail will be used to show your <a href="http://gravatar.com/">Gravatar</a>.<br/>
Leave blank for random Gravatar.
</p>
</div>
</script>
<script type="text/javascript" src="/js/DI.js"></script> <script type="text/javascript" src="/js/DI.js"></script>
<script type="text/javascript" src="/js/State.js"></script> <script type="text/javascript" src="/js/State.js"></script>
<script type="text/javascript" src="/js/Api.js"></script> <script type="text/javascript" src="/js/Api.js"></script>
<script type="text/javascript" src="/js/Auth.js"></script> <script type="text/javascript" src="/js/Auth.js"></script>
<script type="text/javascript" src="/js/Util.js"></script>
<script type="text/javascript" src="/js/Presenters/TopNavigationPresenter.js"></script> <script type="text/javascript" src="/js/Presenters/TopNavigationPresenter.js"></script>
<script type="text/javascript" src="/js/Presenters/LoginPresenter.js"></script> <script type="text/javascript" src="/js/Presenters/LoginPresenter.js"></script>
<script type="text/javascript" src="/js/Presenters/LogoutPresenter.js"></script> <script type="text/javascript" src="/js/Presenters/LogoutPresenter.js"></script>
@ -161,6 +38,5 @@
<script type="text/javascript" src="/js/Presenters/UserListPresenter.js"></script> <script type="text/javascript" src="/js/Presenters/UserListPresenter.js"></script>
<script type="text/javascript" src="/js/Router.js"></script> <script type="text/javascript" src="/js/Router.js"></script>
<script type="text/javascript" src="/js/Bootstrap.js"></script> <script type="text/javascript" src="/js/Bootstrap.js"></script>
</body> </body>
</html> </html>

10
public_html/js/Presenters/LoginPresenter.js
View file

@ -3,6 +3,7 @@ App.Presenters = App.Presenters || {};
App.Presenters.LoginPresenter = function( App.Presenters.LoginPresenter = function(
jQuery, jQuery,
util,
topNavigationPresenter, topNavigationPresenter,
messagePresenter, messagePresenter,
auth, auth,
@ -13,7 +14,12 @@ App.Presenters.LoginPresenter = function(
var $el = jQuery('#content'); var $el = jQuery('#content');
var $messages; var $messages;
var template = _.template(jQuery('#login-form-template').html()); var template;
util.loadTemplate('login-form').then(function(html) {
template = _.template(html);
render();
});
var eventHandlers = { var eventHandlers = {
@ -41,8 +47,6 @@ App.Presenters.LoginPresenter = function(
if (appState.get('loggedIn')) if (appState.get('loggedIn'))
router.navigateToMainPage(); router.navigateToMainPage();
render();
function render() { function render() {
$el.html(template()); $el.html(template());
$el.find('form').submit(eventHandlers.loginFormSubmit); $el.find('form').submit(eventHandlers.loginFormSubmit);

10
public_html/js/Presenters/RegistrationPresenter.js
View file

@ -3,6 +3,7 @@ App.Presenters = App.Presenters || {};
App.Presenters.RegistrationPresenter = function( App.Presenters.RegistrationPresenter = function(
jQuery, jQuery,
util,
topNavigationPresenter, topNavigationPresenter,
messagePresenter, messagePresenter,
api) { api) {
@ -10,7 +11,12 @@ App.Presenters.RegistrationPresenter = function(
topNavigationPresenter.select('register'); topNavigationPresenter.select('register');
var $el = jQuery('#content'); var $el = jQuery('#content');
var template = _.template(jQuery('#registration-form-template').html()); var template;
util.loadTemplate('registration-form').then(function(html) {
template = _.template(html);
render();
});
var eventHandlers = { var eventHandlers = {
@ -50,8 +56,6 @@ App.Presenters.RegistrationPresenter = function(
}, },
}; };
render();
function render() { function render() {
$el.html(template()); $el.html(template());
$el.find('form').submit(eventHandlers.registrationFormSubmit); $el.find('form').submit(eventHandlers.registrationFormSubmit);

10
public_html/js/Presenters/TopNavigationPresenter.js
View file

@ -1,10 +1,15 @@
var App = App || {}; var App = App || {};
App.Presenters = App.Presenters || {}; App.Presenters = App.Presenters || {};
App.Presenters.TopNavigationPresenter = function(jQuery, appState) { App.Presenters.TopNavigationPresenter = function(util, jQuery, appState) {
var selectedElement = null; var selectedElement = null;
var template = _.template(jQuery('#top-navigation-template').html()); var template;
util.loadTemplate('top-navigation').then(function(html) {
template = _.template(html);
render();
});
var $el = jQuery('#top-navigation'); var $el = jQuery('#top-navigation');
var eventHandlers = { var eventHandlers = {
@ -14,7 +19,6 @@ App.Presenters.TopNavigationPresenter = function(jQuery, appState) {
}; };
appState.startObserving('loggedIn', 'top-navigation', eventHandlers.loginStateChanged); appState.startObserving('loggedIn', 'top-navigation', eventHandlers.loginStateChanged);
render();
function select(newSelectedElement) { function select(newSelectedElement) {
selectedElement = newSelectedElement; selectedElement = newSelectedElement;

56
public_html/js/Util.js Normal file
View file

@ -0,0 +1,56 @@
var App = App || {};
App.Util = (function(jQuery) {
var templateCache = {};
function loadTemplate(templateName) {
return loadTemplateFromCache(templateName)
|| loadTemplateFromDOM(templateName)
|| loadTemplateWithAJAX(templateName);
}
function loadTemplateFromCache(templateName) {
if (templateName in templateCache) {
return new Promise(function(resolve, reject) {
resolve(templateCache[templateName]);
});
}
}
function loadTemplateFromDOM(templateName) {
var $template = jQuery('#' + templateName + '-template');
if ($template.length) {
return new Promise(function(resolve, reject) {
resolve($template.html());
});
}
return null;
}
function loadTemplateWithAJAX(templateName) {
return new Promise(function(resolve, reject) {
var templatesDir = '/templates';
var templateUrl = templatesDir + '/' + templateName + '.tpl';
var templateString;
$.ajax({
url: templateUrl,
method: 'GET',
success: function(data, textStatus, xhr) {
resolve(data);
},
error: function(xhr, textStatus, errorThrown) {
console.log(Error('Error while loading template ' + templateName + ': ' + errorThrown));
reject();
},
});
});
}
return {
loadTemplate: loadTemplate,
};
});
App.DI.registerSingleton('util', App.Util);

47
public_html/templates/login-form.tpl Normal file
View file

@ -0,0 +1,47 @@
<div id="login-form">
<p>
If you don't have an account yet,<br/>
<a href="#/register">click here</a> to create a new one.
</p>
<div class="messages"></div>
<form method="post" class="form-wrapper">
<div class="form-row">
<label for="login-user" class="form-label">User name:</label>
<div class="form-input">
<input autocomplete="off" type="text" name="user" id="login-user"/>
</div>
</div>
<div class="form-row">
<label for="login-password" class="form-label">Password:</label>
<div class="form-input">
<input autocomplete="off" type="password" name="password" id="login-password"/>
</div>
</div>
<div class="form-row">
<label class="form-label"></label>
<div class="form-input">
<button class="submit" type="submit">Log in</button>
&nbsp;
<input type="hidden" name="remember" value="0"/>
<label class="checkbox-wrapper">
<input type="checkbox" name="remember" value="1"/>
<span></span>
Remember me
</label>
</div>
</div>
</form>
<div class="help">
<p>Problems logging in?</p>
<ul>
<li><a href="#/password-reset">I don't remember my password</a></li>
<li><a href="#/activate-account">I haven't received activation e-mail</a></li>
<li><a href="#/register">I don't have an account</a></li>
</ul>
</div>
</div>

50
public_html/templates/registration-form.tpl Normal file
View file

@ -0,0 +1,50 @@
<div id="registration-form">
<p>
Registered users can view more content,<br/>
upload files and add posts to favorites.
</p>
<div class="messages"></div>
<form method="post" class="form-wrapper">
<div class="form-row">
<label for="registration-user" class="form-label">User name:</label>
<div class="form-input">
<input autocomplete="off" type="text" name="user" id="registration-user" placeholder="e.g. darth_vader" value=""/>
</div>
</div>
<div class="form-row">
<label for="registration-password" class="form-label">Password:</label>
<div class="form-input">
<input autocomplete="off" type="password" name="password1" id="registration-password" placeholder="e.g. &#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;" value=""/>
</div>
</div>
<div class="form-row">
<label for="registration-password-confirm" class="form-label">Password (repeat):</label>
<div class="form-input">
<input autocomplete="off" type="password" name="password2" id="registration-password-confirm" placeholder="e.g. &#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;&#x25cf;" value=""/>
</div>
</div>
<div class="form-row">
<label for="registration-email" class="form-label">E-mail address:</label>
<div class="form-input">
<input autocomplete="off" type="text" name="email" id="registration-email" placeholder="e.g. vader@empire.gov" value=""/>
</div>
</div>
<div class="form-row">
<label class="form-label"></label>
<div class="form-input">
<button class="submit" type="submit">Register</button>
</div>
</div>
</form>
<p id="email-info">
Your e-mail will be used to show your <a href="http://gravatar.com/">Gravatar</a>.<br/>
Leave blank for random Gravatar.
</p>
</div>

18
public_html/templates/top-navigation.tpl Normal file
View file

@ -0,0 +1,18 @@
<ul>
<!-- todo: check privileges -->
<li class="users">
<a href="#/users">Users</a>
</li>
<% if (!loggedIn) { %>
<li class="login">
<a href="#/login">Login</a>
</li>
<li class="register">
<a href="#/register">Register</a>
</li>
<% } else { %>
<li class="logout">
<a href="#/logout">Logout</a>
</li>
<% } %>
</ul>