← Back to branch summary

~loggerhead-team/loggerhead/trunk-rich

« back to all changes in this revision

Viewing changes to loggerhead/templates/master.kid

  • Committer: Robey Pointer
  • Date: 2007-01-06 05:02:02 UTC
  • Revision ID: robey@lag.net-20070106050202-i1hzwt613qigsin3
refactor and clean up the javascript code for the expand/collapse buttons,
and apply the same logic to files being diff'd on the revision view.  the
primary difference is that a revision starts out expanded, since otherwise
there's not much to see.  also, change the terminology from "show/hide" to
"expand/collapse" on nicholas allen's recommendation.

Show diffs side-by-side

added added

removed removed

Lines of Context:
loggerhead/templates/master.kid
11
11
    </style>
12
12
 
13
13
<!-- !define common navbar -->
14
 
<span py:def="navbar()" py:strip="True">
 
14
<span py:def="navbar()">
15
15
    <!-- !requires: ${navigation: start_revid, revid, revid_list, pagesize, buttons, scan_url}, ${branch}, ${history} -->
16
 
    <div class="navbar" py:if="navigation is not None"><div class="bar">
17
 
        <!-- form must go OUTSIDE the table, or safari will add extra padding :( -->
18
 
        <form action="${branch.url('/changes', start_revid=getattr(navigation, 'start_revid', None),
19
 
              file_id=getattr(navigation, 'file_id', None))}"><table><tr>
20
 
            <td><span class="buttons">
21
 
                <!-- ! navbar buttons never change, from now on.  i decree it! -->
22
 
                <a href="${branch.url('/changes', **util.get_context(clear=1))}"> changes </a>
23
 
                <a href="${branch.url('/files', **util.get_context(clear=1))}"> files </a>
24
 
                <span class="search"> search: <input type="text" name="q" /> </span>
25
 
            </span></td>
26
 
            <td align="right" py:if="hasattr(navigation, 'revid_list')">
27
 
                <span py:if="hasattr(navigation, 'feed')" class="rbuttons feed">
28
 
                    <a href="${branch.url('/atom')}">
29
 
                    <img src="${tg.url('/static/images/feed-icon-16x16.gif')}" /></a>
30
 
                </span>
31
 
                <span class="navbuttons">
32
 
                        <span py:if="navigation.prev_page_revid">
33
 
                        <a href="${navigation.prev_page_url}" title="Previous page"> &#171; </a>
34
 
                    </span>
35
 
                        <span py:if="not navigation.prev_page_revid"> &#171; </span>
36
 
                    revision ${history.get_revno(revid)}
37
 
                    (<span py:if="navigation.pagesize > 1">page </span>
38
 
                    ${navigation.page_position} / ${navigation.page_count})
39
 
                        <span py:if="navigation.next_page_revid">
40
 
                    <a href="${navigation.next_page_url}" title="Next page"> &#187; </a>
41
 
                    </span>
42
 
                        <span py:if="not navigation.next_page_revid"> &#187; </span>
43
 
                </span>
44
 
            </td>
45
 
        </tr></table></form>
46
 
    </div></div>
47
 
</span>
48
 
 
49
 
<span py:def="revision_link(revid, text, **overrides)" py:strip="True">
50
 
    <a title="Show revision ${history.get_revno(revid)}"
51
 
       href="${branch.url([ '/revision', revid ], **util.get_context(**overrides))}"> ${text} </a>
52
 
</span>
53
 
 
54
 
 
55
 
<!-- ! expand button functions: -->
56
 
 
57
 
        <span py:strip="True" py:def="use_collapse_buttons()">
58
 
                <!-- this is totally matty's fault.  i don't like javacsript. ;) -->
59
 
                <script type="text/javascript" src="${tg.url('/static/javascript/collapse.js')}"></script>
60
 
        </span>
61
 
        
62
 
        <span py:strip="True" py:def="collapse_all_button(group, normal='block')">
63
 
            <a class="hide-all collapse-${group}-hideall"
64
 
               href="javascript:collapseAllDisplay('${group}','none')">
65
 
                <img src="${tg.url('/static/images/nav-small-down.gif')}"
66
 
                     width="10" height="10" alt="collapse"
67
 
                     class="collapse-triangle" />collapse all</a>
68
 
            <a class="hide-all collapse-${group}-showall"
69
 
               href="javascript:collapseAllDisplay('${group}','${normal}')">
70
 
                <img src="${tg.url('/static/images/nav-small-right.gif')}"
71
 
                     width="10" height="10" alt="expand"
72
 
                     class="collapse-triangle" />expand all</a>
73
 
        </span>
74
 
        
75
 
        <span py:strip="True" py:def="collapse_button(group, name, normal='block')">
76
 
            <a href="javascript:collapseDisplay('${group}','${name}','none')"
77
 
               class="hide-button collapse-${group}-${name}-hide" title="collapse">
78
 
                <img src="${tg.url('/static/images/nav-small-down.gif')}"
79
 
                     width="10" height="10" alt="collapse"
80
 
                     class="collapse-triangle" />
81
 
            </a>
82
 
            <a href="javascript:collapseDisplay('${group}','${name}','${normal}')"
83
 
               class="show-button collapse-${group}-${name}-show" title="expand">
84
 
                <img src="${tg.url('/static/images/nav-small-right.gif')}"
85
 
                     witdh="10" height="10" alt="expand"
86
 
                     class="collapse-triangle" />
87
 
            </a>
88
 
        </span>
 
16
    <div class="navbar" py:if="navigation is not None">
 
17
        <div class="bar">
 
18
            <!-- form must go OUTSIDE the table, or safari will add extra padding :( -->
 
19
            <form action="${branch.url('/changes', start_revid=getattr(navigation, 'start_revid', None), file_id=getattr(navigation, 'file_id', None))}">
 
20
            <table>
 
21
                <tr><td>
 
22
                    <span class="buttons">
 
23
                        <!-- ! navbar buttons never change, from now on.  i decree it! -->
 
24
                        <a href="${branch.url('/changes')}"> changes </a>
 
25
                        <a href="${branch.url('/files')}"> files </a>
 
26
                        <span class="search"> search: <input type="text" name="q" /> </span>
 
27
                    </span>
 
28
                </td><td align="right" py:if="hasattr(navigation, 'revid_list')">
 
29
                    <span py:if="hasattr(navigation, 'feed')" class="rbuttons feed">
 
30
                        <a href="${branch.url('/atom')}"><img src="${tg.url('/static/images/feed-icon-16x16.gif')}" /></a>
 
31
                    </span>
 
32
                    <span class="navbuttons">
 
33
                        <span py:if="navigation.prev_page_revid"> <a href="${navigation.prev_page_url}" title="Previous page"> &#171; </a>      </span>
 
34
                        <span py:if="not navigation.prev_page_revid"> &#171; </span>
 
35
                                revision ${history.get_revno(revid)} (<span py:if="navigation.pagesize > 1">page </span>${navigation.page_position} / ${navigation.page_count})
 
36
                        <span py:if="navigation.next_page_revid"> <a href="${navigation.next_page_url}" title="Next page"> &#187; </a>  </span>
 
37
                        <span py:if="not navigation.next_page_revid"> &#187; </span>
 
38
                    </span>
 
39
                </td></tr>
 
40
            </table>
 
41
            </form>
 
42
        </div>
 
43
    </div>
 
44
</span>
 
45
 
 
46
<span py:def="revlink(revid, start_revid, file_id, text)">
 
47
    <a title="Show revision ${history.get_revno(revid)}" href="${branch.url([ '/revision', revid ], start_revid=start_revid, file_id=file_id)}" class="revlink"> ${text} </a>
 
48
</span>
 
49
<span py:def="revlink_q(revid, start_revid, file_id, query, text)">
 
50
    <a title="Show revision ${history.get_revno(revid)}" href="${branch.url([ '/revision', revid ], start_revid=start_revid, file_id=file_id, q=query)}" class="revlink"> ${text} </a>
 
51
</span>
 
52
 
 
53
<span py:def="use_expand_buttons()">
 
54
        <!-- this is totally matty's fault.  i don't like javacsript. ;) -->
 
55
        <script type="text/javascript"> // <!--
 
56
 
 
57
        function getElementsByClass(name) {
 
58
            var filter = function(node) {
 
59
                // cannot filter here.  treeWalker will skip the entire subtree if you reject. :(
 
60
                return NodeFilter.FILTER_ACCEPT;
 
61
            };
 
62
            var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, { acceptNode: filter }, false);
 
63
            
 
64
            var ret = new Array();
 
65
            while (treeWalker.nextNode()) {
 
66
                var classes = treeWalker.currentNode.className.split(' ');
 
67
                for (var i = 0; i < classes.length; i++) {
 
68
                    // is the string either identical, or startsWith?
 
69
                    if (classes[i].indexOf(name) == 0) { ret.push(treeWalker.currentNode); }
 
70
                }
 
71
            }
 
72
            return ret;
 
73
        }
 
74
 
 
75
        function displayDetails(name, display) {
 
76
            var dthide = 'inline', dtshow = 'none';
 
77
            if (display == 'none') { dthide = 'none'; dtshow = 'inline'; }
 
78
            document.getElementById('hide-' + name).style.display = dthide;
 
79
            document.getElementById('show-' + name).style.display = dtshow;
 
80
            var elem = document.getElementById('details-' + name);
 
81
            if (elem) { elem.style.display = display; }
 
82
            var nodes = getElementsByClass('details-' + name);
 
83
            for (var i = 0; i < nodes.length; i++) {
 
84
                nodes[i].style.display = display;
 
85
            }
 
86
        }
 
87
        
 
88
        function contains(arr, item) { for (var i = 0; i < arr.length; i++) { if (arr[i] == item) { return true; } } return false; }
 
89
        
 
90
        function displayAll(display) {
 
91
            var dthide = 'inline', dtshow = 'none';
 
92
            if (display == 'none') { dthide = 'none'; dtshow = 'inline'; }
 
93
            
 
94
            var nodes = getElementsByClass('details-');
 
95
            var names = new Array();
 
96
            for (var i = 0; i < nodes.length; i++) {
 
97
                nodes[i].style.display = display;
 
98
                var classes = nodes[i].className.split(' ');
 
99
                for (var j = 0; j < classes.length; j++) {
 
100
                    if (classes[j].indexOf('details-') == 0) {
 
101
                        var name = classes[j].substring(8);
 
102
                        if (! contains(names, name)) { names.push(name); }
 
103
                    }
 
104
                }
 
105
            }
 
106
            for (var i = 0; i < names.length; i++) {
 
107
            document.getElementById('hide-' + names[i]).style.display = dthide;
 
108
            document.getElementById('show-' + names[i]).style.display = dtshow;
 
109
        }
 
110
            document.getElementById('hide-all').style.display = dthide;
 
111
            document.getElementById('show-all').style.display = dtshow;
 
112
        }
 
113
        // -->
 
114
        </script>
 
115
</span>
 
116
 
 
117
<span py:def="expand_all_button(normal='block')">
 
118
    <a class="hide-all" id="hide-all" href="javascript:displayAll('none')"> (collapse all) </a>
 
119
    <a class="hide-all" id="show-all" href="javascript:displayAll('${normal}')"> (expand all) </a>
 
120
</span>
 
121
 
 
122
<span py:def="expand_button(name, normal='block')">
 
123
    <a href="javascript:displayDetails('${name}', 'none')" id="hide-${name}" class="hide-button" title="collapse">
 
124
        <img src="${tg.url('/static/images/nav-small-down.gif')}" width="10" height="10" alt="collapse" />
 
125
    </a>
 
126
    <a href="javascript:displayDetails('${name}', '${normal}')" id="show-${name}" class="show-button" title="expand">
 
127
        <img src="${tg.url('/static/images/nav-small-right.gif')}" witdh="10" height="10" alt="expand" />
 
128
    </a>
 
129
</span>
89
130
 
90
131
</head>
91
132
 
92
 
<body py:match="item.tag=='{http://www.w3.org/1999/xhtml}body'"
93
 
      py:attrs="item.items()">
 
133
<body py:match="item.tag=='{http://www.w3.org/1999/xhtml}body'" py:attrs="item.items()">
94
134
 
95
135
    <div py:replace="[item.text]+item[:]"/>
96
136
 
97
137
        <!-- End of main_content -->
98
138
        
99
139
        <div class="footer">
100
 
            <span class="banner"><a href="http://www.bazaar-vcs.org/">
101
 
            <img src="${tg.url('/static/images/bazaar-banner.png')}" /></a></span>
102
 
            <span class="banner"><a href="http://www.lag.net/loggerhead/">
103
 
            <img src="${tg.url('/static/images/loggerhead-banner.png')}" /></a></span>
 
140
            <span class="banner"><a href="http://www.bazaar-vcs.org/"><img src="${tg.url('/static/images/bazaar-banner.png')}" /></a></span>
 
141
            <span class="banner"><a href="http://www.lag.net/loggerhead/"><img src="${tg.url('/static/images/loggerhead-banner.png')}" /></a></span>
104
142
        </div>
105
143
</body>
106
144