Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Framasoft
Etherpad
ep_mypads
Commits
6d6af2cb
Commit
6d6af2cb
authored
Apr 10, 2015
by
Yakulu
Browse files
backbone, fronpage, login beginning
parent
92f09a37
Changes
5
Hide whitespace changes
Inline
Side-by-side
frontend.js
View file @
6d6af2cb
...
...
@@ -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
);
frontend/js/modules/layout.js
View file @
6d6af2cb
...
...
@@ -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
();
};
/**
* ## In
ternal views
* ## In
itialization
*
*
###
menu
M
ain
*
*
Returns views for auth and unauth.
*
`init` function creates the `
menu
m
ain
` 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
;
...
...
frontend/js/modules/login.js
View file @
6d6af2cb
...
...
@@ -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
);
frontend/js/route.js
View file @
6d6af2cb
...
...
@@ -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
();
};
...
...
static/index.html
View file @
6d6af2cb
...
...
@@ -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>
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment