Statistics
| Branch: | Tag: | Revision:

root / snf-astakos-app / astakos / im / static / im / cloudbar / README.rst @ fb9d96e9

History | View | Annotate | Download (2 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). 
13
The bar contains links to the refered services application urls, and
14
depending on if the user is authenticated links to account pages
15
(login, change profile, logout etc.).
16

    
17
To identify if a user is authenticated the script checks of a
18
specific cookie which can be configured using ``CLOUDBAR_COOKIE_NAME`` setting
19
contains valid data which should match the following format::
20
    
21
    <username or email>|<authentication token>
22

    
23

    
24
Usage
25
-----
26

    
27
Each page that wants to display the navigation bar should:
28

    
29
    - Include one of the latest jquery builds.
30
    - Set the ``CLOUDBAR_COOKIE_NAME`` variable containing info about the username
31
      and the authentication status of the current visitor of the page.
32
    - Set the ``CLOUDBAR_LOCATION`` to the url where bar files are served from.
33
    - Include the servicesbar.js script.
34

    
35

    
36
Example
37
*******
38

    
39
.. codeblock:: javascript
40
    
41
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
42
    <script>
43
        var CLOUDBAR_COOKIE_NAME = '_pithos2_a';
44
        var CLOUDBAR_LOCATION = "https://accounts.cloud.grnet.gr/cloudbar/";
45

    
46
        $(document).ready(function(){
47
            $.getScript(CLOUDBAR_LOC + 'cloudbar.js');
48
        })
49
    </script>
50

    
51

    
52
Build styles
53
------------
54

    
55
Cloudbar uses `less-css <http://www.lesscss.org>`_ for css styles
56
definitions. To build the less file you need the bootstrap less files
57
available on 
58
`bootstrap github repository <https://github.com/twitter/bootstrap/>`.
59

    
60
You can build the styles using the following command::
61

    
62
    $ lessc --include-path=<path/to/bootstrap> cloudbar.less > cloudbar.css
63