From 978d22de67af0baff3c294653fb55c651f8b06a5 Mon Sep 17 00:00:00 2001 From: Marcin Kurczewski <mkurczew@gmail.com> Date: Tue, 2 Sep 2014 09:36:42 +0200 Subject: [PATCH] Added template loading through AJAX --- public_html/.htaccess | 4 + public_html/index.html | 126 +----------------- public_html/js/Presenters/LoginPresenter.js | 10 +- .../js/Presenters/RegistrationPresenter.js | 10 +- .../js/Presenters/TopNavigationPresenter.js | 10 +- public_html/js/Util.js | 56 ++++++++ public_html/templates/login-form.tpl | 47 +++++++ public_html/templates/registration-form.tpl | 50 +++++++ public_html/templates/top-navigation.tpl | 18 +++ 9 files changed, 197 insertions(+), 134 deletions(-) create mode 100644 public_html/js/Util.js create mode 100644 public_html/templates/login-form.tpl create mode 100644 public_html/templates/registration-form.tpl create mode 100644 public_html/templates/top-navigation.tpl diff --git a/public_html/.htaccess b/public_html/.htaccess index 29176dc6..169fbf32 100644 --- a/public_html/.htaccess +++ b/public_html/.htaccess @@ -1,2 +1,6 @@ RewriteEngine On RewriteRule ^/?api/(.*) api-dispatch.php?q=$1 [L] + +<IfModule mod_mime.c> +AddType text/html .tpl +</IfModule> diff --git a/public_html/index.html b/public_html/index.html index 2bf34047..12c16564 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -25,134 +25,11 @@ </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> - - <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. ●●●●●●●●" 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. ●●●●●●●●" 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/State.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/Util.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/LogoutPresenter.js"></script> @@ -161,6 +38,5 @@ <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/Bootstrap.js"></script> - </body> </html> diff --git a/public_html/js/Presenters/LoginPresenter.js b/public_html/js/Presenters/LoginPresenter.js index 386f43d0..34ae0c08 100644 --- a/public_html/js/Presenters/LoginPresenter.js +++ b/public_html/js/Presenters/LoginPresenter.js @@ -3,6 +3,7 @@ App.Presenters = App.Presenters || {}; App.Presenters.LoginPresenter = function( jQuery, + util, topNavigationPresenter, messagePresenter, auth, @@ -13,7 +14,12 @@ App.Presenters.LoginPresenter = function( var $el = jQuery('#content'); 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 = { @@ -41,8 +47,6 @@ App.Presenters.LoginPresenter = function( if (appState.get('loggedIn')) router.navigateToMainPage(); - render(); - function render() { $el.html(template()); $el.find('form').submit(eventHandlers.loginFormSubmit); diff --git a/public_html/js/Presenters/RegistrationPresenter.js b/public_html/js/Presenters/RegistrationPresenter.js index 0cd531e0..1b2912f2 100644 --- a/public_html/js/Presenters/RegistrationPresenter.js +++ b/public_html/js/Presenters/RegistrationPresenter.js @@ -3,6 +3,7 @@ App.Presenters = App.Presenters || {}; App.Presenters.RegistrationPresenter = function( jQuery, + util, topNavigationPresenter, messagePresenter, api) { @@ -10,7 +11,12 @@ App.Presenters.RegistrationPresenter = function( topNavigationPresenter.select('register'); 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 = { @@ -50,8 +56,6 @@ App.Presenters.RegistrationPresenter = function( }, }; - render(); - function render() { $el.html(template()); $el.find('form').submit(eventHandlers.registrationFormSubmit); diff --git a/public_html/js/Presenters/TopNavigationPresenter.js b/public_html/js/Presenters/TopNavigationPresenter.js index 340010ed..781a8103 100644 --- a/public_html/js/Presenters/TopNavigationPresenter.js +++ b/public_html/js/Presenters/TopNavigationPresenter.js @@ -1,10 +1,15 @@ var App = App || {}; App.Presenters = App.Presenters || {}; -App.Presenters.TopNavigationPresenter = function(jQuery, appState) { +App.Presenters.TopNavigationPresenter = function(util, jQuery, appState) { 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 eventHandlers = { @@ -14,7 +19,6 @@ App.Presenters.TopNavigationPresenter = function(jQuery, appState) { }; appState.startObserving('loggedIn', 'top-navigation', eventHandlers.loginStateChanged); - render(); function select(newSelectedElement) { selectedElement = newSelectedElement; diff --git a/public_html/js/Util.js b/public_html/js/Util.js new file mode 100644 index 00000000..f8559245 --- /dev/null +++ b/public_html/js/Util.js @@ -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); diff --git a/public_html/templates/login-form.tpl b/public_html/templates/login-form.tpl new file mode 100644 index 00000000..20dacbda --- /dev/null +++ b/public_html/templates/login-form.tpl @@ -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> + + <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> diff --git a/public_html/templates/registration-form.tpl b/public_html/templates/registration-form.tpl new file mode 100644 index 00000000..6a8bae28 --- /dev/null +++ b/public_html/templates/registration-form.tpl @@ -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. ●●●●●●●●" 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. ●●●●●●●●" 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> diff --git a/public_html/templates/top-navigation.tpl b/public_html/templates/top-navigation.tpl new file mode 100644 index 00000000..f19aac89 --- /dev/null +++ b/public_html/templates/top-navigation.tpl @@ -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>