root / snf-astakos-app / astakos / im / static / im / cloudbar / README.rst @ ebd369d0
History | View | Annotate | Download (2.7 kB)
1 |
Cloudbar |
---|---|
2 |
======== |
3 |
|
4 |
Cloudbar is a project to provide common navigation user experience |
5 |
between services that share common authentication mechanism and user |
6 |
entries but get deployed on different domains and may not share |
7 |
common frontend themes/templates. |
8 |
|
9 |
The project consists of a javascript file which once imported in a |
10 |
html page handles the automatic creation and styling of a bar that |
11 |
is placed on top of the page (first body element absolutely |
12 |
positioned on top). Since the addition of the bar may break the |
13 |
current layout of the site once imported the script tries to load an |
14 |
additional css located in the same url as the script itself named by |
15 |
the ``CLOUDBAR_ACTIVE_SERVICE`` configuration and prefixed by *service_* so |
16 |
that css changes can be applied without touching the page native styles. |
17 |
|
18 |
The bar contains links to the refered services application urls, and |
19 |
depending on if the user is authenticated links to account pages |
20 |
(login, change profile, logout etc.). |
21 |
|
22 |
To identify if a user is authenticated the script checks of a |
23 |
specific cookie which can be configured using ``CLOUDBAR_COOKIE_NAME`` setting |
24 |
contains valid data which should match the following format:: |
25 |
|
26 |
<username or email>|<authentication token> |
27 |
|
28 |
|
29 |
Usage |
30 |
----- |
31 |
|
32 |
Each page that wants to display the navigation bar should: |
33 |
|
34 |
- Include one of the latest jquery builds. |
35 |
- Set the ``CLOUDBAR_COOKIE_NAME`` variable containing info about the username |
36 |
and the authentication status of the current visitor of the page. |
37 |
- Set the ``CLOUDBAR_ACTIVE_SERVICE`` to the id of the service the current |
38 |
page refers to so that script cat set the appropriate active styles to |
39 |
the services menu for services ids see ``SERVICES_LINK`` object in |
40 |
cloudbar.js. Use special **accounts** value to set account menu as the |
41 |
active link. |
42 |
- Set the ``CLOUDBAR_LOCATION`` to the url where bar files are served from. |
43 |
- Include the servicesbar.js script. |
44 |
|
45 |
|
46 |
Example |
47 |
******* |
48 |
|
49 |
.. codeblock:: javascript |
50 |
|
51 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
52 |
<script> |
53 |
var CLOUDBAR_COOKIE_NAME = '_pithos2_a'; |
54 |
var CLOUDBAR_ACTIVE_SERVICE = 'cloud'; |
55 |
var CLOUDBAR_LOCATION = "http://accounts.cloud.grnet.gr/cloudbar/"; |
56 |
|
57 |
$(document).ready(function(){ |
58 |
$.getScript(CLOUDBAR_LOC + 'cloudbar.js'); |
59 |
}) |
60 |
</script> |
61 |
|
62 |
|
63 |
Build styles |
64 |
------------ |
65 |
|
66 |
Cloudbar uses `less-css <http://www.lesscss.org>`_ for css styles |
67 |
definitions. To build the less file you need the bootstrap less files |
68 |
available on |
69 |
`bootstrap github repository <https://github.com/twitter/bootstrap/>`. |
70 |
|
71 |
You can build the styles using the following command:: |
72 |
|
73 |
$ lessc --include-path=<path/to/bootstrap> cloudbar.less > cloudbar.css |
74 |
|