Commit 6d6af2cb authored by Yakulu's avatar Yakulu
Browse files

backbone, fronpage, login beginning

parent 92f09a37
......@@ -28,8 +28,7 @@
(function () {
var conf = require('./frontend/js/configuration.js');
var layout = require('./frontend/js/modules/layout.js');
var route = require('./frontend/js/route.js');
conf.init(layout.init);
route.init();
var layout = require('./frontend/js/modules/layout.js');
conf.init(route.init.bind(null, layout.init));
}).call(this);
......@@ -72,18 +72,30 @@ module.exports = (function () {
}
]);
var views = {};
/**
* ## Internal views
*
* ### menuMain
*
* Returns views for auth and unauth.
*/
layout.view = {};
views.menuMain = {};
views.menuMain.container = Backbone.ContainerView.extend({
layout.view.menuMain = {};
layout.view.menuMain.container = Backbone.ContainerView.extend({
el: '#menu-main',
initialize: function () {
//this.$el.html()
this.append(new views.menuMain.header(), '#menu-main-header');
this.append(new views.menuMain.body(), '#menu-main-body');
this.append(layout.view.menuMain.header, '#menu-main-header');
this.append(layout.view.menuMain.body, '#menu-main-body');
},
render: function () {
layout.view.menuMain.body.render();
}
});
views.menuMain.header = Backbone.View.extend({
var menuMainHeader = Backbone.View.extend({
tagName: 'div',
template: und.template($('#menu-main-header-tpl').html()),
initialize: function () { this.render(); },
......@@ -96,7 +108,8 @@ module.exports = (function () {
return this;
}
});
views.menuMain.body = Backbone.View.extend({
var menuMainBody = Backbone.View.extend({
tagName: 'ul',
className: 'nav navbar-nav',
template: und.template($('#menu-main-item-tpl').html()),
......@@ -105,8 +118,7 @@ module.exports = (function () {
var me = this;
var items = (auth.isAuthenticated) ? menuItems.auth : menuItems.unauth;
var html = items.map(function (item) {
//var isActive = (Backbone.History.getFragment() === r.route);
var isActive = false;
var isActive = (Backbone.history.getFragment() === item.get('route'));
return me.template({ isActive: isActive, item: item });
});
this.$el.html(html.join(''));
......@@ -114,7 +126,17 @@ module.exports = (function () {
}
});
views.footer = Backbone.View.extend({
/**
* ### main
*/
layout.view.main = Backbone.ContainerView.create('main');
/**
* ### footer
*/
layout.view.footer = Backbone.View.extend({
el: 'footer',
template: und.template($('#footer-body').html()),
initialize: function () { this.render(); },
......@@ -125,81 +147,21 @@ module.exports = (function () {
}
});
layout.init = function () {
new views.menuMain.container();
new views.footer();
};
/**
* ## Internal views
* ## Initialization
*
* ### menuMain
*
* Returns views for auth and unauth.
* `init` function creates the `menumain` and `footer` components. it also
* use the global `router` to re-render the `mainMenu` when needed.
*/
views.menuMain = function () {
var _routes = {
auth: [
{
route:'mypads',
cls: 'doc-text',
txt: LANG.MENU.PAD
},
{
route:'mybookmarks',
icon: 'bookmarks',
txt: LANG.MENU.BOOKMARK
},
{
route:'myprofile',
icon: 'user',
txt: LANG.MENU.PROFILE
},
{
route:'admin',
icon: 'tools',
txt: LANG.MENU.ADMIN
},
{
route:'logout',
icon: 'logout',
txt: LANG.MENU.LOGOUT
}
],
unauth: [
{
route:'login',
icon: 'login',
txt: LANG.USER.LOGIN
},
{
route:'subscribe',
icon: 'thumbs-up',
txt: LANG.USER.SUBSCRIBE
}
]
};
var activeRoute = function (r) {
var liCls = (m.route() === r.route) ? classes.itemActive + ' ' : '';
liCls += classes.li;
return m('li', { class: liCls }, [
m('a', {
class: classes.a,
href: r.route,
config: m.route
}, [
m('i', { class: 'icon-' + r.icon, title: r.txt }),
m('span', { class: classes.span }, r.txt)
])
]);
};
if (auth.isAuthenticated()) {
return ld.map(_routes.auth, activeRoute);
} else {
return ld.map(_routes.unauth, activeRoute);
}
layout.init = function () {
layout.view.menuMain.header = new menuMainHeader();
layout.view.menuMain.body = new menuMainBody();
var menuMain = new layout.view.menuMain.container();
new layout.view.footer();
var route = require('../route.js');
route.router.on('route', function () { menuMain.render(); });
};
*/
return layout;
......
......@@ -26,55 +26,12 @@
*/
module.exports = (function () {
// Global dependencies
var m = require('mithril');
// Local dependencies
var und = require('underscore');
var Backbone = require('backbone');
var conf = require('../configuration.js');
var USER = conf.LANG.USER;
var auth = require('../auth.js');
var form = require('../helpers/form.js');
var notif = require('./notification.js');
var layout = require('./layout.js');
var user = require('./user.js');
var login = {};
/**
* ## Controller
*
* Used for module state and actions.
* And user submission.
*
*/
login.controller = function () {
var c = user.controller();
form.initFields(c, ['login', 'password']);
/**
* `submit` internal calls the public API to login with given login and
* password. It displays errors if needed or success and fixes local cached
* data for the user.
*/
c.submit = function (e) {
e.preventDefault();
m.request({
method: 'POST',
url: conf.URLS.LOGIN,
data: c.data
}).then(function (resp) {
auth.isAuthenticated(true);
auth.userInfo(resp.user);
notif.success({ body: USER.AUTH.SUCCESS });
m.route('/');
}, function (err) {
notif.error({ body: err.error });
});
};
return c;
};
/**
* ## Views
*
......@@ -84,43 +41,41 @@ module.exports = (function () {
var view = {};
view.form = function (c) {
var login = user.view.field.login(c);
var password = user.view.field.password(c);
return m('form', {
id: 'login-form',
class: 'block ' + c.classes.user.form,
onsubmit: c.submit
}, [
m('fieldset.block-group', [
m('legend', { class: c.classes.user.legend }, USER.MYPADS_ACCOUNT),
login.label, login.input, login.icon,
password.label, password.input, password.icon,
m('input', {
class: 'block ' + c.classes.user.inputSubmit,
form: 'login-form',
type: 'submit',
value: USER.LOGIN
})
]),
]);
};
var form = Backbone.View.extend({
tagName: 'section',
template: und.template($('#login-form').html()),
initialize: function () { return this; },
render: function () {
var html = this.template({ USER: conf.LANG.USER });
this.$el.html(html);
this.popov = this.$el.find('i[data-toggle="popover"]');
this.popov.popover();
return this;
},
remove: function () { this.popov.popover('destroy'); }
});
view.main = function (c) {
return m('section', { class: 'block-group ' + c.classes.user.section }, [
m('h2', { class: 'block ' + c.classes.user.h2 }, [
m('span', USER.FORM),
m('a', {
class: c.classes.user.a,
href: '/subscribe', config: m.route
}, USER.ORSUB)
]),
view.form(c)
]);
};
var main = Backbone.ContainerView.extend({
tagName: 'div',
className: 'row',
template: und.template($('#login-layout').html()),
initialize: function () {
var html = this.template({ title: conf.server.get('title'), descr: conf.server.get('descr') });
this.$el.html(html);
this.append(view.form, '#login-form-container');
},
render: function () {
view.form.render();
return this;
}
});
login.view = function (c) {
return layout.view(view.main(c), user.view.aside(c));
login.view = function () {
view.form = new form();
//return new main();
return view.form;
};
return login;
}).call(this);
......@@ -32,6 +32,7 @@ module.exports = (function () {
var Backbone = require('backbone');
// Local dependencies
var auth = require('./auth.js');
var layout = require('./modules/layout.js');
var route = {};
......@@ -47,7 +48,7 @@ module.exports = (function () {
'admin': 'admin'
};
route.init = function () {
route.init = function (cb) {
var authRoutes = und.mapObject(route.routes, function (v, k) {
return auth.isAuthenticated ? v : 'login';
});
......@@ -59,14 +60,20 @@ module.exports = (function () {
var Router = Backbone.Router.extend({
routes: route.routes,
login: function () { console.log('login'); },
login: function () {
var login = require('./modules/login.js');
layout.view.main.open(login.view());
},
logout: function () { console.log('logout'); },
subscribe: function () { console.log('subscribe'); },
subscribe: function () {
layout.view.main.open(new Backbone.View());
},
admin: function () {}
});
route.router = new Router();
Backbone.history.start();
cb();
};
......
......@@ -19,9 +19,8 @@
</div>
</nav>
</header>
<main class="container-fluid">Main content</main>
<footer class="container-fluid">
</footer>
<main class="container-fluid"></main>
<footer class="container-fluid"></footer>
<!-- Layout templates -->
<!-- Menu Main : Header -->
<script type="text/template" id="menu-main-header-tpl">
......@@ -36,7 +35,7 @@
<script type="text/template" id="menu-main-item-tpl">
<li <% if (isActive) { %> class="active"<% } %>>
<a href="#<%= item.get('route') %>">
<i class="icon-<% item.get('icon') %>" title="<%= item.get('txt') %>"></i>
<i class="icon-<%= item.get('icon') %>" title="<%= item.get('txt') %>"></i>
<span><%= item.get('txt') %></span>
</a>
</li>
......@@ -45,6 +44,42 @@
<script type="text/template" id="footer-body">
<p><%= footer %></p>
</script>
<!-- Login templates -->
<!-- Login layout -->
<script type="text/template" id="login-layout">
<div class="col-sm-6" id="login-form-container"></div>
<aside class="col-sm-6">
<section class="panel panel-default">
<div class="panel-body">
<h2><%= title %></h2>
<article><%= descr %></article>
</div>
</section>
</aside>
</script>
<!-- Login form -->
<script type="text/template" id="login-form">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<fieldset>
<legend><%= USER.MYPADS_ACCOUNT %></legend>
<div class="form-group">
<label class="col-sm-5 control-label" for="login"><%= USER.USERNAME %></label>
<div class="col-sm-7">
<div class="input-group">
<input class="form-control" type="text" name="login" placeholder<%= USER.LOGIN %> required />
<div class="input-group-addon btn btn-info">
<i class="icon-info-circled" data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover focus" data-content="<%= USER.INFO.LOGIN %>"></i>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</script>
<script src="js/mypads.js"></script>
</body>
</html>
Supports Markdown
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