File: notebook.thtml

package info (click to toggle)
libaws 20.2-2
  • links: PTS, VCS
  • area: main
  • in suites: bullseye
  • size: 16,656 kB
  • sloc: ada: 95,505; python: 2,270; ansic: 1,017; makefile: 829; xml: 235; javascript: 202; java: 112; sh: 106
file content (176 lines) | stat: -rw-r--r-- 7,103 bytes parent folder | download | duplicates (6)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
@@-- This templates provides support for implementing notebook tabs in
@@-- an HTML page, ie something that looks like:
@@--
@@--     +-------+-------+-------+
@@--     | Page1 | Page2 | Page3 |
@@--  +--+-------+       +-------+---------------------------------+
@@--  | The content of the second page                             |
@@--  |                                                            |
@@--  +------------------------------------------------------------+
@@--
@@-- This implements depends on browsers supporting CSS 2.0 and javascript,
@@-- and was tested on IExplorer 6.0, Firefox 1.0, Opera 7.0.
@@-- They degrade correctly if javascript is disabled, except the user will
@@-- then see all pages at the same time.
@@-- They also preserve the currently displayed page when the page is reloaded.
@@--
@@-- To use this template, you must do the following in your HTML file:
@@--   * Include this template in the header (between <head> and </head>)
@@--     This is done with an instruction like:
@@--
@@--         @@INCLUDE@@ notebook.thtml (1=>Tabs, 2=>currentPage,
@@--              3=>TabContents, 4=>initialPageName,
@@--              5=>activePageColor, 6=>inactivePageColor)
@@--
@@--     Where the six parameters will be explained below, but should appear
@@--     on the same line.
@@--     The first parameter mustn't contain spaces
@@--
@@--  * Optional parameters:
@@--
@@--    $5  - The active page color
@@--    $6  - The standard page color
@@--    $7  - The tab active text color
@@--    $8  - The tab standard text color
@@--    $9  - The tab selected text color
@@--    $10 - Height offset for the tab, 0 by default. It needs to be adjusted
@@--          if the font used is too big.
@@--
@@--  * Create a <ul> list that contains the text for the tabs. This
@@--    should look like the following, where the id and class attributes
@@--    should match the corresponding parameters in the @@INCLUDE@@ statement
@@--    above.
@@--    The idea for each of the <li> elements is left to your choice, but
@@--    should be the same everywhere the same page is referenced
@@--
@@--       <ul id="Tabs" >
@@--          <li id="page1" class="currentPage">
@@--              <a href=""
@@--                 onclick="return !switchTabPage_Tabs('page1')">
@@--                 Title of page 1
@@--              </a>
@@--          </li>
@@--          <li id="page2"><a href=""
@@--                          onclick="return !switchTabPage_Tabs('page2')">...
@@--          </li>
@@--          ...  same for other pages
@@--       </ul>
@@--
@@--    One of the pages should have the name given in the initialPageName, and
@@--    will be selected initially.
@@--    The name of the javascript function is made from the prefix
@@--    "switchTabPage_", followed by the name of the first parameter above.
@@--    This is so that multiple notebooks can be created on the same page.
@@--    The goal of the call to "return" is to prevent the browser from
@@--    interpreting the href attribute, which would force a reload of the page
@@--
@@--    Note the empty URL associated with the links. If you use "#" instead,
@@--    you will encounter some refresh problems in some cases.
@@--
@@--  * Create the contents of each pages. In this implementation, all notebook
@@--    pages are loaded at the same time, and no further access to the server
@@--    is done when the user switches pages. Your style sheet should be such
@@--    that the background color of the page is activePageColor, since it
@@--    gives better results.
@@--
@@--       <div class="TabContents" id="page1">
@@--          Content of page 1
@@--       </div>
@@--
@@--       <div class="TabContents" id="page2">
@@--          Content of page 2
@@--       </div>
@@--
@@--       <script language="javascript">setCurrentPage_Tabs()</script>
@@--
@@--   The last call makes sure the current page after a refresh of the page
@@--   remains the same that it was before. This requires cookies, but so does
@@--   AWS to support sessions.

@@SET@@ ACTIVE_PAGE_COLOR       = $5  | white
@@SET@@ PAGE_COLOR              = $6  | #ccc
@@SET@@ TAB_ACTIVE_TEXT_COLOR   = $7  | black
@@SET@@ TAB_TEXT_COLOR          = $8  | #666
@@SET@@ TAB_SELECTED_TEXT_COLOR = $9  | #f00
@@SET@@ TAB_HEIGHT              = $10 | 0

<style type="text/css">
#@_$1_@           { border-bottom: 1px solid @_PAGE_COLOR_@;
                    margin: 15px 10px 0px 0px;
                    position: relative;
                    height: @_"+"(19):TAB_HEIGHT_@px;
                    padding-left: 10px; }
#@_$1_@ li        { display: inline;
                    list-style-type: none;
                    padding: 0;
                    margin: 0px 20px 0px 20px; }
#@_$1_@ a:link,
#@_$1_@ a:active,
#@_$1_@ a:visited { background: @_PAGE_COLOR_@;
                    border: 1px solid @_PAGE_COLOR_@;
                    color:  @_TAB_TEXT_COLOR_@;
                    position: relative;    /* Required for IE6 */
                    float: left;
                    font-weight: normal;
                    line-height: @_"+"(14):TAB_HEIGHT_@px;
                    margin-right: 8px;
                    padding: 2px 10px 2px 10px;
                    text-decoration: none; }
#@_$1_@ a:hover   { color: @_TAB_SELECTED_TEXT_COLOR_@; }
#@_$1_@ li.@_$2_@ a:link,
#@_$1_@ li.@_$2_@ a:active,
#@_$1_@ li.@_$2_@ a:visited
                  { background: @_ACTIVE_PAGE_COLOR_@;
                    border-bottom: 1px solid @_ACTIVE_PAGE_COLOR_@;
                    color: @_TAB_ACTIVE_TEXT_COLOR_@; }
div.@_$3_@        { border: 1px solid #ccc;
                    border-top: none;
                    display: none;
                    background-color: @_ACTIVE_PAGE_COLOR_@;
                    padding: 1px 5px 10px 5px;
                    margin: 0px 10px 30px 0px; }
div#@_$4_@        { display: block; }
</style>

<script src="/we_js/cookies.js" type="text/javascript"></script>
<script language="javascript">

@@--  Select a new tab, return True if it could change the page

function switchTabPage_@_$1_@ (pageName) {
   var ul = document.getElementById ('@_$1_@');
   var children = ul.getElementsByTagName ('li');
   for (var i=0; i < children.length; i++) {
      if (children[i].id == pageName) {
         children[i].className = "@_$2_@";
      } else {
         children[i].className = "";
      }
   }

   var children = document.getElementsByTagName ('div');
   for (var i=0; i < children.length; i++) {
     if (children[i].className == '@_$3_@') {
        if (children[i].id == pageName) {
           children[i].style.display = 'block';
        } else {
           children[i].style.display = 'none';
        }
     }
   }
   createCookie ("currentPage_@_$1_@", pageName, 0, "/");
   return true;
}

@@--  Set the current page given the one previously set by the user (from the
@@--  cookie), or using the default one.

function setCurrentPage_@_$1_@ () {
   var value = readCookie ("currentPage_@_$1_@");
   if (value) {
        switchTabPage_@_$1_@ (value);
   } else {
        switchTabPage_@_$1_@ ("@_$4_@");
   }
}
</script>