← Back to branch summary

~azzar1/unity/add-show-desktop-key

« back to all changes in this revision

Viewing changes to www/media/browser/listing.js

  • Committer: mattgiuca
  • Date: 2008-01-13 11:03:44 UTC
  • Revision ID: svn-v3-trunk0:2b9c9e99-6f39-0410-b283-7f802c844ae2:trunk:209
browser.js: Split out dir-listing code into listing.js (it's going to get
    bigger).
listing.js: Added code to handle selection. Clicking checkboxes causes it to
    highlight selected files. Clicking a file row will select just that file.
    Also maintains a list of selected files.

Show diffs side-by-side

added added

removed removed

Lines of Context:
www/media/browser/listing.js
 
1
/* IVLE - Informatics Virtual Learning Environment
 
2
 * Copyright (C) 2007-2008 The University of Melbourne
 
3
 *
 
4
 * This program is free software; you can redistribute it and/or modify
 
5
 * it under the terms of the GNU General Public License as published by
 
6
 * the Free Software Foundation; either version 2 of the License, or
 
7
 * (at your option) any later version.
 
8
 *
 
9
 * This program is distributed in the hope that it will be useful,
 
10
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
11
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
12
 * GNU General Public License for more details.
 
13
 *
 
14
 * You should have received a copy of the GNU General Public License
 
15
 * along with this program; if not, write to the Free Software
 
16
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 
17
 *
 
18
 * Module: Listing (File Browser, client)
 
19
 * Author: Matt Giuca
 
20
 * Date: 13/1/2008
 
21
 *
 
22
 * Handles directory listings on the client side.
 
23
 */
 
24
 
 
25
/* DOM nodeType constants */
 
26
ELEMENT_NODE = 1;
 
27
 
 
28
/** Filenames of all files selected */
 
29
selected_files = [];
 
30
 
 
31
/** Updates the side-panel and status bar to reflect the current set of
 
32
 * selected files. This is done by inspecting the states of the check boxes.
 
33
 * Also changes the styling to highlight selected files.
 
34
 */
 
35
function update_selection()
 
36
{
 
37
    /* First get a list of all files that are selected, and
 
38
     * reset the styling on each file's row. */
 
39
    var files_children = document.getElementById("files").childNodes;
 
40
    var tr;
 
41
    var checkbox;
 
42
    var row_toggle = 1;
 
43
    selected_files = [];  /* Clear global selected_files */
 
44
    /* Children are trs */
 
45
    for (var i=0; i<files_children.length; i++)
 
46
    {
 
47
        tr = files_children[i];
 
48
        checked = tr.firstChild.firstChild.checked;
 
49
        /* Set the class for every row based on both the checked state,
 
50
         * and whether it is odd or even */
 
51
        tr.setAttribute("class", "row" + row_toggle.toString() +
 
52
            (checked ? "sel" : ""))
 
53
        row_toggle = row_toggle == 1 ? 2 : 1;
 
54
        if (checked)
 
55
        {
 
56
            /* Add the filename (column 3) to the selected_files list */
 
57
            filename = tr.childNodes[3].firstChild;
 
58
            if (filename.nodeType == ELEMENT_NODE)
 
59
                filename = filename.firstChild.data;
 
60
            else
 
61
                filename = filename.data;
 
62
            selected_files[selected_files.length] = filename;
 
63
        }
 
64
    }
 
65
}
 
66
 
 
67
/** Clears all selected files and causes the single file specified to become
 
68
 * selected.
 
69
 * \param fileid The index of the file in the list to select.
 
70
 */
 
71
function select_file(fileid)
 
72
{
 
73
    var files_children = document.getElementById("files").childNodes;
 
74
    var checkbox;
 
75
    for (var i=0; i<files_children.length; i++)
 
76
    {
 
77
        tr = files_children[i];
 
78
        checkbox = tr.firstChild.firstChild;
 
79
        checkbox.checked = i == fileid;
 
80
    }
 
81
    update_selection();
 
82
}
 
83
 
 
84
/** Initialises the DOM elements required to present a dir listing,
 
85
 * assuming that clear_page has just been called or the page just
 
86
 * loaded for the first time.
 
87
 */
 
88
function setup_for_dir_listing()
 
89
{
 
90
    var filesbody = document.getElementById("filesbody");
 
91
 
 
92
    /* Using a table-based layout, for reasons of sanity */
 
93
    /* One row, 2 columns */
 
94
    var middle = document.createElement("table");
 
95
    filesbody.appendChild(middle);
 
96
    middle.setAttribute("id", "middle");
 
97
    var middle_tbody = document.createElement("tbody");
 
98
    middle.appendChild(middle_tbody);
 
99
    var middle_tr = document.createElement("tr");
 
100
    middle_tbody.appendChild(middle_tr);
 
101
 
 
102
    /* Column 1: File table */
 
103
    var filetable = document.createElement("td");
 
104
    middle_tr.appendChild(filetable);
 
105
    filetable.setAttribute("id", "filetable");
 
106
    var filetablediv = document.createElement("div");
 
107
    filetable.appendChild(filetablediv);
 
108
    filetablediv.setAttribute("id", "filetablediv");
 
109
    /* A nested table within this div - the actual files listing */
 
110
    var filetabletable = document.createElement("table");
 
111
    filetablediv.appendChild(filetabletable);
 
112
    filetabletable.setAttribute("width", "100%");
 
113
    var filetablethead = document.createElement("thead");
 
114
    filetabletable.appendChild(filetablethead);
 
115
    var filetablethead_tr = document.createElement("tr");
 
116
    filetablethead.appendChild(filetablethead_tr);
 
117
    filetablethead_tr.setAttribute("class", "rowhead");
 
118
    /* Row headers */
 
119
    var filetablethead_th = document.createElement("th");
 
120
    filetablethead_tr.appendChild(filetablethead_th);
 
121
    filetablethead_th.setAttribute("class", "col-check");
 
122
    filetablethead_th = dom_make_link_elem("th", "Filename",
 
123
        "Sort by filename", "")
 
124
    filetablethead_tr.appendChild(filetablethead_th);
 
125
    filetablethead_th.setAttribute("class", "col-filename");
 
126
    filetablethead_th.setAttribute("colspan", 3);
 
127
    filetablethead_th = dom_make_link_elem("th", "Size",
 
128
        "Sort by file size", "")
 
129
    filetablethead_tr.appendChild(filetablethead_th);
 
130
    filetablethead_th.setAttribute("class", "col-size");
 
131
    filetablethead_th = dom_make_link_elem("th", "Modified",
 
132
        "Sort by date modified", "")
 
133
    filetablethead_tr.appendChild(filetablethead_th);
 
134
    filetablethead_th.setAttribute("class", "col-date");
 
135
    /* Empty body */
 
136
    var filetabletbody = document.createElement("tbody");
 
137
    filetabletable.appendChild(filetabletbody);
 
138
    filetabletbody.setAttribute("id", "files");
 
139
 
 
140
    /* Column 2: Side-panel */
 
141
    var sidepanel = document.createElement("td");
 
142
    middle_tr.appendChild(sidepanel);
 
143
    sidepanel.setAttribute("id", "sidepanel");
 
144
 
 
145
 
 
146
    /* Now after the table "middle", there is a status bar */
 
147
    var statusbar = document.createElement("div");
 
148
    filesbody.appendChild(statusbar);
 
149
    statusbar.setAttribute("id", "statusbar");
 
150
}
 
151
 
 
152
/** Presents the directory listing.
 
153
 */
 
154
function handle_dir_listing(path, listing)
 
155
{
 
156
    setmode(false);
 
157
    setup_for_dir_listing();
 
158
    var row_toggle = 1;
 
159
    var i;
 
160
    /* Nav through the top-level of the JSON to the actual listing object. */
 
161
    var listing = listing.listing;
 
162
 
 
163
    /* Get "." out, it's special */
 
164
    var thisdir = listing["."];
 
165
    delete listing["."];
 
166
    /* Is this dir under svn? */
 
167
    var under_subversion = "svnstatus" in thisdir;
 
168
 
 
169
    var files = document.getElementById("files");
 
170
    var file;
 
171
    var row;
 
172
    var td;
 
173
    var checkbox;
 
174
 
 
175
    var total_files = 0;
 
176
    var total_file_size = 0;    /* In bytes */
 
177
 
 
178
    var selection_string;
 
179
 
 
180
    /* Create all of the files */
 
181
    i = 0;
 
182
    for (var filename in listing)
 
183
    {
 
184
        selection_string = "select_file(" + i.toString() + ")";
 
185
        file = listing[filename];
 
186
        total_files++;
 
187
        if ("size" in file)
 
188
            total_file_size += file.size;
 
189
        /* Make a 'tr' element */
 
190
        row = document.createElement("tr");
 
191
        /* Column 1: Selection checkbox */
 
192
        row.setAttribute("class", "row" + row_toggle.toString())
 
193
        row_toggle = row_toggle == 1 ? 2 : 1;
 
194
        td = document.createElement("td");
 
195
        checkbox = document.createElement("input");
 
196
        checkbox.setAttribute("type", "checkbox");
 
197
        checkbox.setAttribute("title", "Select this file");
 
198
        checkbox.setAttribute("onchange", "update_selection()");
 
199
        td.appendChild(checkbox);
 
200
        row.appendChild(td);
 
201
        if (file.isdir)
 
202
        {
 
203
            /* Column 2: Filetype and subversion icons. */
 
204
            td = document.createElement("td");
 
205
            td.setAttribute("class", "thincol");
 
206
            td.setAttribute("onclick", selection_string);
 
207
            td.appendChild(dom_make_img(mime_type_to_icon("text/directory"),
 
208
                22, 22, file.type));
 
209
            row.appendChild(td);
 
210
            td = document.createElement("td");
 
211
            td.setAttribute("class", "thincol");
 
212
            if (under_subversion)
 
213
                td.appendChild(dom_make_img(svnstatus_to_icon(file.svnstatus),
 
214
                    22, 22, file.svnstatus));
 
215
            row.appendChild(td);
 
216
            /* Column 3: Filename */
 
217
            td = dom_make_link_elem("td", filename,
 
218
                "Navigate to " + path_join(path, filename),
 
219
                make_path(path_join(this_app, path, filename)),
 
220
                "navigate(" + path_join(path, filename) + ")");
 
221
            td.setAttribute("onclick", selection_string);
 
222
            row.appendChild(td);
 
223
        }
 
224
        else
 
225
        {
 
226
            /* Column 2: Filetype and subversion icons. */
 
227
            td = document.createElement("td");
 
228
            td.setAttribute("class", "thincol");
 
229
            td.appendChild(dom_make_img(mime_type_to_icon(file.type),
 
230
                22, 22, file.type));
 
231
            row.appendChild(td);
 
232
            td = document.createElement("td");
 
233
            td.setAttribute("class", "thincol");
 
234
            if (under_subversion)
 
235
                td.appendChild(dom_make_img(svnstatus_to_icon(file.svnstatus),
 
236
                    22, 22, file.svnstatus));
 
237
            row.appendChild(td);
 
238
            /* Column 3: Filename */
 
239
            td = dom_make_text_elem("td", filename);
 
240
            td.setAttribute("onclick", selection_string);
 
241
            row.appendChild(td);
 
242
        }
 
243
        /* Column 4: Size */
 
244
        td = dom_make_text_elem("td", nice_filesize(file.size));
 
245
        td.setAttribute("onclick", selection_string);
 
246
        row.appendChild(td);
 
247
        /* Column 4: Date */
 
248
        td = dom_make_text_elem("td", file.mtime_short, file.mtime_nice);
 
249
        td.setAttribute("onclick", selection_string);
 
250
        row.appendChild(td);
 
251
        files.appendChild(row);
 
252
        i++;
 
253
    }
 
254
 
 
255
    /* Write to the status bar */
 
256
    var statusbar = document.getElementById("statusbar");
 
257
    var statusmsg = total_files.toString() + " files, "
 
258
        + nice_filesize(total_file_size);
 
259
    dom_removechildren(statusbar);
 
260
    statusbar.appendChild(document.createTextNode(statusmsg));
 
261
}
 
262