Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (2 kB)

1 8afc06d1 Kostas Papadimitriou
Cloudbar
2 8afc06d1 Kostas Papadimitriou
========
3 8afc06d1 Kostas Papadimitriou
4 8afc06d1 Kostas Papadimitriou
Cloudbar is a project to provide common navigation user experience
5 8afc06d1 Kostas Papadimitriou
between services that share common authentication mechanism and user
6 8afc06d1 Kostas Papadimitriou
entries but get deployed on different domains and may not share
7 8afc06d1 Kostas Papadimitriou
common frontend themes/templates.
8 8afc06d1 Kostas Papadimitriou
9 8afc06d1 Kostas Papadimitriou
The project consists of a javascript file which once imported in a
10 8afc06d1 Kostas Papadimitriou
html page handles the automatic creation and styling of a bar that
11 8afc06d1 Kostas Papadimitriou
is placed on top of the page (first body element absolutely
12 7fb14dbb Kostas Papadimitriou
positioned on top). 
13 8afc06d1 Kostas Papadimitriou
The bar contains links to the refered services application urls, and
14 8afc06d1 Kostas Papadimitriou
depending on if the user is authenticated links to account pages
15 8afc06d1 Kostas Papadimitriou
(login, change profile, logout etc.).
16 8afc06d1 Kostas Papadimitriou
17 8afc06d1 Kostas Papadimitriou
To identify if a user is authenticated the script checks of a
18 8afc06d1 Kostas Papadimitriou
specific cookie which can be configured using ``CLOUDBAR_COOKIE_NAME`` setting
19 8afc06d1 Kostas Papadimitriou
contains valid data which should match the following format::
20 8afc06d1 Kostas Papadimitriou
    
21 8afc06d1 Kostas Papadimitriou
    <username or email>|<authentication token>
22 8afc06d1 Kostas Papadimitriou
23 8afc06d1 Kostas Papadimitriou
24 8afc06d1 Kostas Papadimitriou
Usage
25 8afc06d1 Kostas Papadimitriou
-----
26 8afc06d1 Kostas Papadimitriou
27 8afc06d1 Kostas Papadimitriou
Each page that wants to display the navigation bar should:
28 8afc06d1 Kostas Papadimitriou
29 8afc06d1 Kostas Papadimitriou
    - Include one of the latest jquery builds.
30 8afc06d1 Kostas Papadimitriou
    - Set the ``CLOUDBAR_COOKIE_NAME`` variable containing info about the username
31 8afc06d1 Kostas Papadimitriou
      and the authentication status of the current visitor of the page.
32 8afc06d1 Kostas Papadimitriou
    - Set the ``CLOUDBAR_LOCATION`` to the url where bar files are served from.
33 8afc06d1 Kostas Papadimitriou
    - Include the servicesbar.js script.
34 8afc06d1 Kostas Papadimitriou
35 8afc06d1 Kostas Papadimitriou
36 8afc06d1 Kostas Papadimitriou
Example
37 8afc06d1 Kostas Papadimitriou
*******
38 8afc06d1 Kostas Papadimitriou
39 8afc06d1 Kostas Papadimitriou
.. codeblock:: javascript
40 8afc06d1 Kostas Papadimitriou
    
41 4e705202 Kostas Papadimitriou
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
42 8afc06d1 Kostas Papadimitriou
    <script>
43 8afc06d1 Kostas Papadimitriou
        var CLOUDBAR_COOKIE_NAME = '_pithos2_a';
44 4e705202 Kostas Papadimitriou
        var CLOUDBAR_LOCATION = "https://accounts.cloud.grnet.gr/cloudbar/";
45 8afc06d1 Kostas Papadimitriou
46 8afc06d1 Kostas Papadimitriou
        $(document).ready(function(){
47 8afc06d1 Kostas Papadimitriou
            $.getScript(CLOUDBAR_LOC + 'cloudbar.js');
48 8afc06d1 Kostas Papadimitriou
        })
49 8afc06d1 Kostas Papadimitriou
    </script>
50 8afc06d1 Kostas Papadimitriou
51 8afc06d1 Kostas Papadimitriou
52 8afc06d1 Kostas Papadimitriou
Build styles
53 8afc06d1 Kostas Papadimitriou
------------
54 8afc06d1 Kostas Papadimitriou
55 8afc06d1 Kostas Papadimitriou
Cloudbar uses `less-css <http://www.lesscss.org>`_ for css styles
56 8afc06d1 Kostas Papadimitriou
definitions. To build the less file you need the bootstrap less files
57 8afc06d1 Kostas Papadimitriou
available on 
58 8afc06d1 Kostas Papadimitriou
`bootstrap github repository <https://github.com/twitter/bootstrap/>`.
59 8afc06d1 Kostas Papadimitriou
60 8afc06d1 Kostas Papadimitriou
You can build the styles using the following command::
61 8afc06d1 Kostas Papadimitriou
62 8afc06d1 Kostas Papadimitriou
    $ lessc --include-path=<path/to/bootstrap> cloudbar.less > cloudbar.css