MDL-33136 upload dnd files one after another
[moodle.git] / files / renderer.php
CommitLineData
64f93798
PS
1<?php
2///////////////////////////////////////////////////////////////////////////
3// //
4// This file is part of Moodle - http://moodle.org/ //
5// Moodle - Modular Object-Oriented Dynamic Learning Environment //
6// //
7// Moodle is free software: you can redistribute it and/or modify //
8// it under the terms of the GNU General Public License as published by //
9// the Free Software Foundation, either version 3 of the License, or //
10// (at your option) any later version. //
11// //
12// Moodle is distributed in the hope that it will be useful, //
13// but WITHOUT ANY WARRANTY; without even the implied warranty of //
14// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the //
15// GNU General Public License for more details. //
16// //
17// You should have received a copy of the GNU General Public License //
18// along with Moodle. If not, see <http://www.gnu.org/licenses/>. //
19// //
20///////////////////////////////////////////////////////////////////////////
21
22defined('MOODLE_INTERNAL') || die();
23
24/**
25 * Rendering of files viewer related widgets.
26 * @package core
27 * @subpackage file
28 * @copyright 2010 Dongsheng Cai
29 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
30 * @since Moodle 2.0
31 */
32
33/**
e921afa8 34 * File browser render
64f93798
PS
35 *
36 * @copyright 2010 Dongsheng Cai
37 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
38 * @since Moodle 2.0
39 */
40class core_files_renderer extends plugin_renderer_base {
41
42 public function files_tree_viewer(file_info $file_info, array $options = null) {
43 $tree = new files_tree_viewer($file_info, $options);
44 return $this->render($tree);
45 }
46
47 public function render_files_tree_viewer(files_tree_viewer $tree) {
e0873f13 48 $html = $this->output->heading_with_help(get_string('coursefiles'), 'courselegacyfiles', 'moodle');
0b259d91
DC
49
50 $html .= $this->output->container_start('coursefilesbreadcrumb');
64f93798
PS
51 foreach($tree->path as $path) {
52 $html .= $path;
53 $html .= ' / ';
54 }
0b259d91 55 $html .= $this->output->container_end();
64f93798 56
0b259d91
DC
57 $html .= $this->output->box_start();
58 $table = new html_table();
559276b1
MG
59 $table->head = array(get_string('name'), get_string('lastmodified'), get_string('size', 'repository'), get_string('type', 'repository'));
60 $table->align = array('left', 'left', 'left', 'left');
0b259d91
DC
61 $table->width = '100%';
62 $table->data = array();
63
64 foreach ($tree->tree as $file) {
559276b1
MG
65 $filedate = $filesize = $filetype = '';
66 if ($file['filedate']) {
67 $filedate = userdate($file['filedate'], get_string('strftimedatetimeshort', 'langconfig'));
68 }
69 if (empty($file['isdir'])) {
70 if ($file['filesize']) {
71 $filesize = display_size($file['filesize']);
72 }
73 $fileicon = file_file_icon($file, 24);
74 $filetype = get_mimetype_description($file);
0b259d91 75 } else {
559276b1 76 $fileicon = file_folder_icon(24);
64f93798 77 }
559276b1
MG
78 $table->data[] = array(
79 html_writer::link($file['url'], $this->output->pix_icon($fileicon, get_string('icon')) . ' ' . $file['filename']),
80 $filedate,
81 $filesize,
82 $filetype
83 );
64f93798 84 }
0b259d91
DC
85
86 $html .= html_writer::table($table);
e921afa8 87 $html .= $this->output->single_button(new moodle_url('/files/coursefilesedit.php', array('contextid'=>$tree->context->id)), get_string('coursefilesedit'), 'get');
0b259d91 88 $html .= $this->output->box_end();
64f93798
PS
89 return $html;
90 }
906e7d89
MG
91
92 /**
93 * Prints the file manager and initializes all necessary libraries
94 *
95 * <pre>
96 * $fm = new form_filemanager($options);
97 * $output = get_renderer('core', 'files');
98 * echo $output->render($fm);
99 * </pre>
100 *
101 * @param form_filemanager $fm File manager to render
102 * @return string HTML fragment
103 */
d1d18691 104 public function render_form_filemanager($fm) {
906e7d89 105 static $filemanagertemplateloaded;
d1d18691 106 $html = $this->fm_print_generallayout($fm);
906e7d89
MG
107 $module = array(
108 'name'=>'form_filemanager',
109 'fullpath'=>'/lib/form/filemanager.js',
4325db53
MG
110 'requires' => array('core_filepicker', 'base', 'io-base', 'node', 'json', 'core_dndupload', 'panel', 'resize-plugin', 'dd-plugin'),
111 'strings' => array(
112 array('error', 'moodle'), array('info', 'moodle'), array('confirmdeletefile', 'repository'),
113 array('draftareanofiles', 'repository'), array('entername', 'repository'), array('enternewname', 'repository'),
9a62f779
MG
114 array('invalidjson', 'repository'), array('popupblockeddownload', 'repository'),
115 array('unknownoriginal', 'repository'), array('confirmdeletefolder', 'repository'),
116 array('confirmdeletefilewithhref', 'repository'), array('confirmrenamefolder', 'repository'),
117 array('confirmrenamefile', 'repository')
906e7d89
MG
118 )
119 );
120 if (empty($filemanagertemplateloaded)) {
121 $filemanagertemplateloaded = true;
122 $this->page->requires->js_init_call('M.form_filemanager.set_templates',
e709ddd2 123 array($this->filemanager_js_templates()), true, $module);
906e7d89
MG
124 }
125 $this->page->requires->js_init_call('M.form_filemanager.init', array($fm->options), true, $module);
126
127 // non javascript file manager
128 $html .= '<noscript>';
129 $html .= "<div><object type='text/html' data='".$fm->get_nonjsurl()."' height='160' width='600' style='border:1px solid #000'></object></div>";
130 $html .= '</noscript>';
131
132
133 return $html;
134 }
135
136 /**
137 * Returns html for displaying one file manager
138 *
139 * The main element in HTML must have id="filemanager-{$client_id}" and
140 * class="filemanager fm-loading";
141 * After all necessary code on the page (both html and javascript) is loaded,
142 * the class fm-loading will be removed and added class fm-loaded;
143 * The main element (class=filemanager) will be assigned the following classes:
144 * 'fm-maxfiles' - when filemanager has maximum allowed number of files;
145 * 'fm-nofiles' - when filemanager has no files at all (although there might be folders);
146 * 'fm-noitems' - when current view (folder) has no items - neither files nor folders;
147 * 'fm-updating' - when current view is being updated (usually means that loading icon is to be displayed);
148 * 'fm-nomkdir' - when 'Make folder' action is unavailable (empty($fm->options->subdirs) == true)
149 *
150 * Element with class 'filemanager-container' will be holding evens for dnd upload (dragover, etc.).
151 * It will have class:
152 * 'dndupload-ready' - when a file is being dragged over the browser
153 * 'dndupload-over' - when file is being dragged over this filepicker (additional to 'dndupload-ready')
154 * 'dndupload-uploading' - during the upload process (note that after dnd upload process is
155 * over, the file manager will refresh the files list and therefore will have for a while class
156 * fm-updating. Both waiting processes should look similar so the images don't jump for user)
157 *
158 * If browser supports Drag-and-drop, the body element will have class 'dndsupported',
159 * otherwise - 'dndnotsupported';
160 *
e709ddd2
MG
161 * Element with class 'fp-content' will be populated with files list;
162 * Element with class 'fp-btn-add' will hold onclick event for adding a file (opening filepicker);
163 * Element with class 'fp-btn-mkdir' will hold onclick event for adding new folder;
164 * Element with class 'fp-btn-download' will hold onclick event for download action;
165 *
166 * Element with class 'fp-path-folder' is a template for one folder in path toolbar.
167 * It will hold mouse click event and will be assigned classes first/last/even/odd respectfully.
168 * Parent element will receive class 'empty' when there are no folders to be displayed;
169 * The content of subelement with class 'fp-path-folder-name' will be substituted with folder name;
170 *
171 * Element with class 'fp-viewbar' will have the class 'enabled' or 'disabled' when view mode
172 * can be changed or not;
173 * Inside element with class 'fp-viewbar' there are expected elements with classes
174 * 'fp-vb-icons', 'fp-vb-tree' and 'fp-vb-details'. They will handle onclick events to switch
175 * between the view modes, the last clicked element will have the class 'checked';
906e7d89
MG
176 *
177 * @param form_filemanager $fm
178 * @return string
179 */
d1d18691 180 private function fm_print_generallayout($fm) {
906e7d89
MG
181 global $OUTPUT;
182 $options = $fm->options;
183 $client_id = $options->client_id;
184 $straddfile = get_string('addfile', 'repository');
185 $strmakedir = get_string('makeafolder', 'moodle');
186 $strdownload = get_string('downloadfolder', 'repository');
187 $strloading = get_string('loading', 'repository');
906e7d89
MG
188 $strdroptoupload = get_string('droptoupload', 'moodle');
189 $icon_progress = $OUTPUT->pix_icon('i/loading_small', $strloading).'';
d1d18691 190 $restrictions = $this->fm_print_restrictions($fm);
906e7d89
MG
191 $strdndenabled = get_string('dndenabled_insentence', 'moodle').$OUTPUT->help_icon('dndenabled');
192 $strdndenabledinbox = get_string('dndenabled_inbox', 'moodle');
193 $loading = get_string('loading', 'repository');
194
e709ddd2
MG
195 $html = '
196<div id="filemanager-'.$client_id.'" class="filemanager fm-loading">
420e7bb2 197 <div class="fp-restrictions">
e709ddd2
MG
198 '.$restrictions.'
199 <span class="dndupload-message"> - '.$strdndenabled.' </span>
420e7bb2
BR
200 </div>
201 <div class="fp-navbar">
202 <div class="filemanager-toolbar">
420e7bb2
BR
203 <div class="fp-toolbar">
204 <div class="{!}fp-btn-add"><a href="#"><img src="'.$this->pix_url('a/add_file').'" /> '.$straddfile.'</a></div>
205 <div class="{!}fp-btn-mkdir"><a href="#"><img src="'.$this->pix_url('a/create_folder').'" /> '.$strmakedir.'</a></div>
0f0d10c5 206 <div class="{!}fp-btn-download"><a href="#"><img src="'.$this->pix_url('a/download_all').'" /> '.$strdownload.'</a></div>
420e7bb2 207 </div>
b4562710
BR
208 <div class="{!}fp-viewbar">
209 <a class="{!}fp-vb-icons" href="#"></a>
210 <a class="{!}fp-vb-details" href="#"></a>
211 <a class="{!}fp-vb-tree" href="#"></a>
212 </div>
420e7bb2
BR
213 </div>
214 <div class="fp-pathbar">
0f0d10c5 215 <span class="{!}fp-path-folder"><a class="{!}fp-path-folder-name" href="#"></a></span>
e709ddd2 216 </div>
906e7d89 217 </div>
0f0d10c5 218 <div class="filemanager-loading mdl-align">'.$icon_progress.'</div>
906e7d89 219 <div class="filemanager-container" >
e709ddd2 220 <div class="fm-content-wrapper">
420e7bb2 221 <div class="fp-content"></div>
322945e9 222 <div class="fm-empty-container <!--mdl-align-->">
0f0d10c5 223 <span class="dndupload-message">'.$strdndenabledinbox.'<br/><span class="dndupload-arrow"></span></span>
e709ddd2 224 </div>
0f0d10c5 225 <div class="dndupload-target">'.$strdroptoupload.'<br/><span class="dndupload-arrow"></span></div>
e709ddd2 226 <div class="dndupload-uploadinprogress">'.$icon_progress.'</div>
906e7d89 227 </div>
e709ddd2 228 <div class="filemanager-updating">'.$icon_progress.'</div>
906e7d89 229 </div>
420e7bb2 230</div>';
e709ddd2
MG
231 return preg_replace('/\{\!\}/', '', $html);
232 }
233
234 /**
235 * FileManager JS template for displaying one file in 'icon view' mode.
236 *
23b83009
MG
237 * Except for elements described in fp_js_template_iconfilename, this template may also
238 * contain element with class 'fp-contextmenu'. If context menu is available for this
239 * file, the top element will receive the additional class 'fp-hascontextmenu' and
240 * the element with class 'fp-contextmenu' will hold onclick event for displaying
241 * the context menu.
242 *
e709ddd2
MG
243 * @see fp_js_template_iconfilename()
244 * @return string
245 */
246 private function fm_js_template_iconfilename() {
420e7bb2
BR
247 $rv = '
248<div class="fp-file">
249 <a href="#">
9a62f779 250 <div style="position:relative;">
0f0d10c5
BR
251 <div class="{!}fp-thumbnail"></div>
252 <div class="fp-reficons1"></div>
253 <div class="fp-reficons2"></div>
254 </div>
255 <div class="fp-filename-field">
256 <div class="{!}fp-filename"></div>
9a62f779 257 </div>
0f0d10c5 258 </a>
23b83009
MG
259 <a class="{!}fp-contextmenu" href="#">'.$this->pix_icon('i/menu', '▶').'</a>
260</div>';
261 return preg_replace('/\{\!\}/', '', $rv);
e709ddd2
MG
262 }
263
264 /**
265 * FileManager JS template for displaying file name in 'table view' and 'tree view' modes.
266 *
23b83009
MG
267 * Except for elements described in fp_js_template_listfilename, this template may also
268 * contain element with class 'fp-contextmenu'. If context menu is available for this
269 * file, the top element will receive the additional class 'fp-hascontextmenu' and
270 * the element with class 'fp-contextmenu' will hold onclick event for displaying
271 * the context menu.
272 *
273 * @todo MDL-32736 remove onclick="return false;"
e709ddd2
MG
274 * @see fp_js_template_listfilename()
275 * @return string
276 */
277 private function fm_js_template_listfilename() {
420e7bb2 278 $rv = '
a9352f1f 279<span class="fp-filename-icon">
0f0d10c5 280 <a href="#">
420e7bb2
BR
281 <span class="{!}fp-icon"></span>
282 <span class="{!}fp-filename"></span>
0f0d10c5 283 </a>
420e7bb2
BR
284 <a class="{!}fp-contextmenu" href="#" onclick="return false;">'.$this->pix_icon('i/menu', '▶').'</a>
285</span>';
23b83009 286 return preg_replace('/\{\!\}/', '', $rv);
e709ddd2
MG
287 }
288
694beb54
MG
289 /**
290 * FileManager JS template for displaying 'Make new folder' dialog.
291 *
292 * Must be wrapped in an element, CSS for this element must define width and height of the window;
293 *
294 * Must have one input element with type="text" (for users to enter the new folder name);
295 *
296 * content of element with class 'fp-dlg-curpath' will be replaced with current path where
297 * new folder is about to be created;
298 * elements with classes 'fp-dlg-butcreate' and 'fp-dlg-butcancel' will hold onclick events;
299 *
300 * @return string
301 */
302 private function fm_js_template_mkdir() {
420e7bb2 303 $rv = '
5e117466 304<div class="filemanager fp-mkdir-dlg">
7c3e6652
BR
305 <div class="fp-mkdir-dlg-text">'.get_string('newfoldername','repository').'<br/><input type="text" /></div>
306 <a class="{!}fp-dlg-butcreate fp-panel-button" href="#">'.get_string('makeafolder').'</a>
b4562710 307 <a class="{!}fp-dlg-butcancel fp-panel-button" href="#">'.get_string('cancel').'</a>
694beb54
MG
308</div>';
309 return preg_replace('/\{\!\}/', '', $rv);
310 }
311
312 /**
313 * FileManager JS template for error/info message displayed as a separate popup window.
314 *
315 * @see fp_js_template_message()
316 * @return string
317 */
318 private function fm_js_template_message() {
319 return $this->fp_js_template_message();
320 }
321
e709ddd2
MG
322 /**
323 * FileManager JS template for window with file information/actions.
324 *
55089a9d
MG
325 * All content must be enclosed in one element, CSS for this class must define width and
326 * height of the window;
e709ddd2
MG
327 *
328 * Thumbnail image will be added as content to the element with class 'fp-thumbnail';
329 *
330 * Inside the window the elements with the following classnames must be present:
331 * 'fp-saveas', 'fp-author', 'fp-license', 'fp-path'. Inside each of them must be
332 * one input element (or select in case of fp-license and fp-path). They may also have labels.
333 * The elements will be assign with class 'uneditable' and input/select element will become
334 * disabled if they are not applicable for the particular file;
335 *
e0ff0867 336 * There may be present elements with classes 'fp-original', 'fp-datemodified', 'fp-datecreated',
9dbdf31f
MG
337 * 'fp-size', 'fp-dimensions', 'fp-reflist'. They will receive additional class 'fp-unknown' if
338 * information is unavailable. If there is information available, the content of embedded
339 * element with class 'fp-value' will be substituted with the value;
e709ddd2 340 *
9a62f779
MG
341 * The value of Original ('fp-original') is loaded in separate request. When it is applicable
342 * but not yet loaded the 'fp-original' element receives additional class 'fp-loading';
343 *
9dbdf31f
MG
344 * The value of 'Aliases/Shortcuts' ('fp-reflist') is also loaded in separate request. When it
345 * is applicable but not yet loaded the 'fp-original' element receives additional class
346 * 'fp-loading'. The string explaining that XX references exist will replace content of element
347 * 'fp-refcount'. Inside '.fp-reflist .fp-value' each reference will be enclosed in <li>;
348 *
e709ddd2
MG
349 * Elements with classes 'fp-file-update', 'fp-file-download', 'fp-file-delete', 'fp-file-zip',
350 * 'fp-file-unzip', 'fp-file-setmain' and 'fp-file-cancel' will hold corresponding onclick
351 * events (there may be several elements with class 'fp-file-cancel');
352 *
353 * When confirm button is pressed and file is being selected, the top element receives
354 * additional class 'loading'. It is removed when response from server is received.
355 *
356 * When any of the input fields is changed, the top element receives class 'fp-changed';
357 * When current file can be set as main - top element receives class 'fp-cansetmain';
358 * When current file is folder/zip/file - top element receives respectfully class
359 * 'fp-folder'/'fp-zip'/'fp-file';
360 *
361 * @return string
362 */
363 private function fm_js_template_fileselectlayout() {
9a62f779
MG
364 $strloading = get_string('loading', 'repository');
365 $icon_progress = $this->pix_icon('i/loading_small', $strloading).'';
420e7bb2
BR
366 $rv = '
367<div class="filemanager fp-select">
368 <div class="fp-select-loading">
369 <img src="'.$this->pix_url('i/loading').'" />
370 <p>'.get_string('loading', 'repository').'</p>
371 </div>
372 <form>
373 <div><a class="{!}fp-file-download fp-panel-button" href="#">'.get_string('download').'</a>
374 <a class="{!}fp-file-delete fp-panel-button" href="#">'.get_string('delete').'</a>
375 <a class="{!}fp-file-setmain fp-panel-button" href="#">'.get_string('setmainfile', 'repository').'</a>
376 <a class="{!}fp-file-zip fp-panel-button" href="#">'.get_string('zip', 'editor').'</a>
377 <a class="{!}fp-file-unzip fp-panel-button" href="#">'.get_string('unzip').'</a>
378 </div>
379 <div class="fp-hr"></div>
380 <table>
381 <tr class="{!}fp-saveas"><td class="mdl-right"><label>'.get_string('name', 'moodle').'</label>:</td>
382 <td class="mdl-left"><input type="text"/></td></tr>
383 <tr class="{!}fp-author"><td class="mdl-right"><label>'.get_string('author', 'repository').'</label>:</td>
6077e381 384 <td class="mdl-left"><input type="text"/></td></tr>
420e7bb2
BR
385 <tr class="{!}fp-license"><td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
386 <td class="mdl-left"><select></select></td></tr>
387 <tr class="{!}fp-path"><td class="mdl-right"><label>'.get_string('path', 'moodle').'</label>:</td>
388 <td class="mdl-left"><select></select></td></tr>
389 <tr class="{!}fp-original"><td class="mdl-right"><label>'.get_string('original', 'repository').'</label>:</td>
6077e381 390 <td class="mdl-left"><span class="fp-originloading">'.$icon_progress.' '.$strloading.'</span><span class="fp-value"></span></td></tr>
9dbdf31f 391 <tr class="{!}fp-reflist"><td class="mdl-right"><label>'.get_string('referenceslist', 'repository').'</label>:</td>
6077e381 392 <td class="mdl-left"><p class="{!}fp-refcount"></p><span class="fp-reflistloading">'.$icon_progress.' '.$strloading.'</span><ul class="fp-value"></ul></td></tr>
420e7bb2
BR
393 </table>
394 </form>
395 <p class="{!}fp-thumbnail"></p>
396 <form>
397 <p class="fp-select-update">
0f0d10c5
BR
398 <a class="{!}fp-file-update" href="#"><span>'.get_string('update', 'moodle').'</span></a>
399 <a class="{!}fp-file-cancel" href="#"><span>'.get_string('cancel').'</span></a>
420e7bb2
BR
400 </p>
401 </form>
402 <div class="fp-fileinfo">
6077e381
BR
403 <div class="{!}fp-datemodified">'.get_string('lastmodified', 'moodle').': <span class="fp-value"></span></div>
404 <div class="{!}fp-datecreated">'.get_string('datecreated', 'repository').': <span class="fp-value"></span></div>
405 <div class="{!}fp-size">'.get_string('size', 'repository').': <span class="fp-value"></span></div>
406 <div class="{!}fp-dimensions">'.get_string('dimensions', 'repository').': <span class="fp-value"></span></div>
420e7bb2 407 </div>
e709ddd2
MG
408</div>';
409 return preg_replace('/\{\!\}/', '', $rv);
410 }
411
9a62f779
MG
412 /**
413 * FileManager JS template for popup confirm dialogue window.
414 *
415 * Must have one top element, CSS for this element must define width and height of the window;
416 *
417 * content of element with class 'fp-dlg-text' will be replaced with dialog text;
418 * elements with classes 'fp-dlg-butconfirm' and 'fp-dlg-butcancel' will
419 * hold onclick events;
420 *
421 * @return string
422 */
423 private function fm_js_template_confirmdialog() {
420e7bb2
BR
424 $rv = '
425<div class="filemanager fp-dlg">
426 <div class="{!}fp-dlg-text"></div>
b4562710
BR
427 <a class="{!}fp-dlg-butconfirm fp-panel-button" href="#">'.get_string('ok').'</a>
428 <a class="{!}fp-dlg-butcancel fp-panel-button" href="#">'.get_string('cancel').'</a>
9a62f779
MG
429</div>';
430 return preg_replace('/\{\!\}/', '', $rv);
431 }
432
e709ddd2
MG
433 /**
434 * Returns all FileManager JavaScript templates as an array.
435 *
436 * @return array
437 */
438 public function filemanager_js_templates() {
439 $class_methods = get_class_methods($this);
440 $templates = array();
441 foreach ($class_methods as $method_name) {
442 if (preg_match('/^fm_js_template_(.*)$/', $method_name, $matches))
443 $templates[$matches[1]] = $this->$method_name();
444 }
445 return $templates;
906e7d89
MG
446 }
447
448 /**
449 * Displays restrictions for the file manager
450 *
451 * @param form_filemanager $fm
452 * @return string
453 */
d1d18691 454 private function fm_print_restrictions($fm) {
906e7d89
MG
455 $maxbytes = display_size($fm->options->maxbytes);
456 if (empty($options->maxfiles) || $options->maxfiles == -1) {
457 $maxsize = get_string('maxfilesize', 'moodle', $maxbytes);
458 //$string['maxfilesize'] = 'Maximum size for new files: {$a}';
459 } else {
460 $strparam = (object)array('size' => $maxbytes, 'attachments' => $options->maxfiles);
461 $maxsize = get_string('maxsizeandattachments', 'moodle', $strparam);
462 //$string['maxsizeandattachments'] = 'Maximum size for new files: {$a->size}, maximum attachments: {$a->attachments}';
463 }
464 // TODO MDL-32020 also should say about 'File types accepted'
465 return '<span>'. $maxsize. '</span>';
466 }
64f93798 467
d1d18691
MG
468 /**
469 * Template for FilePicker with general layout (not QuickUpload).
470 *
471 * Must have one top element containing everything else (recommended <div class="file-picker">),
472 * CSS for this element must define width and height of the filepicker window. Or CSS must
473 * define min-width, max-width, min-height and max-height and in this case the filepicker
474 * window will be resizeable;
475 *
476 * Element with class 'fp-viewbar' will have the class 'enabled' or 'disabled' when view mode
477 * can be changed or not;
478 * Inside element with class 'fp-viewbar' there are expected elements with classes
479 * 'fp-vb-icons', 'fp-vb-tree' and 'fp-vb-details'. They will handle onclick events to switch
480 * between the view modes, the last clicked element will have the class 'checked';
481 *
482 * Element with class 'fp-repo' is a template for displaying one repository. Other repositories
483 * will be attached as siblings (classes first/last/even/odd will be added respectfully).
484 * The currently selected repostory will have class 'active'. Contents of element with class
485 * 'fp-repo-name' will be replaced with repository name, source of image with class
486 * 'fp-repo-icon' will be replaced with repository icon;
487 *
488 * Element with class 'fp-content' is obligatory and will hold the current contents;
489 *
490 * Element with class 'fp-paging' will contain page navigation (will be deprecated soon);
491 *
e709ddd2 492 * Element with class 'fp-path-folder' is a template for one folder in path toolbar.
d1d18691 493 * It will hold mouse click event and will be assigned classes first/last/even/odd respectfully.
d1d18691 494 * Parent element will receive class 'empty' when there are no folders to be displayed;
e709ddd2 495 * The content of subelement with class 'fp-path-folder-name' will be substituted with folder name;
d1d18691
MG
496 *
497 * Element with class 'fp-toolbar' will have class 'empty' if all 'Back', 'Search', 'Refresh',
498 * 'Logout', 'Manage' and 'Help' are unavailable for this repo;
499 *
500 * Inside fp-toolbar there are expected elements with classes fp-tb-back, fp-tb-search,
501 * fp-tb-refresh, fp-tb-logout, fp-tb-manage and fp-tb-help. Each of them will have
502 * class 'enabled' or 'disabled' if particular repository has this functionality.
503 * Element with class 'fp-tb-search' must contain empty form inside, it's contents will
504 * be substituted with the search form returned by repository (in the most cases it
505 * is generated with template core_repository_renderer::repository_default_searchform);
506 * Other elements must have either <a> or <button> element inside, it will hold onclick
507 * event for corresponding action; labels for fp-tb-back and fp-tb-logout may be
508 * replaced with those specified by repository;
509 *
510 * @return string
511 */
512 private function fp_js_template_generallayout() {
513 $rv = '
514<div class="file-picker fp-generallayout">
e88d5641
BR
515 <div class="fp-repo-area">
516 <ul class="fp-list">
6077e381 517 <li class="{!}fp-repo"><a href="#"><img class="{!}fp-repo-icon" width="16" height="16" />&nbsp;<span class="{!}fp-repo-name"></span></a></li>
e88d5641 518 </ul>
d1d18691 519 </div>
e88d5641 520 <div class="fp-repo-items">
0f0d10c5 521 <div class="fp-navbar">
420e7bb2 522 <div>
420e7bb2
BR
523 <div class="{!}fp-toolbar">
524 <div class="{!}fp-tb-back"><a href="#">'.get_string('back', 'repository').'</a></div>
6077e381 525 <div class="{!}fp-tb-search"><form></form></div>
420e7bb2
BR
526 <div class="{!}fp-tb-refresh"><a href="#"><img src="'.$this->pix_url('a/refresh').'" /></a></div>
527 <div class="{!}fp-tb-logout"><img src="'.$this->pix_url('a/logout').'" /><a href="#"></a></div>
528 <div class="{!}fp-tb-manage"><a href="#"><img src="'.$this->pix_url('a/setting').'" /> '.get_string('manageurl', 'repository').'</a></div>
529 <div class="{!}fp-tb-help"><a href="#"><img src="'.$this->pix_url('a/help').'" /> '.get_string('help').'</a></div>
530 </div>
b4562710
BR
531 <div class="{!}fp-viewbar">
532 <a class="{!}fp-vb-icons" href="#"></a>
533 <a class="{!}fp-vb-details" href="#"></a>
534 <a class="{!}fp-vb-tree" href="#"></a>
535 </div>
6077e381 536 <div class="fp-clear-left"></div>
e88d5641
BR
537 </div>
538 <div class="fp-pathbar">
0f0d10c5
BR
539 <span class="{!}fp-path-folder"><a class="{!}fp-path-folder-name" href="#"></a></span>
540 </div>
d1d18691 541 </div>
e88d5641 542 <div class="{!}fp-content"></div>
d1d18691 543 </div>
d1d18691
MG
544</div>';
545 return preg_replace('/\{\!\}/', '', $rv);
546 }
547
548 /**
e709ddd2 549 * FilePicker JS template for displaying one file in 'icon view' mode.
d1d18691
MG
550 *
551 * the element with class 'fp-thumbnail' will be resized to the repository thumbnail size
552 * (both width and height, unless min-width and/or min-height is set in CSS) and the content of
553 * an element will be replaced with an appropriate img;
554 *
555 * the width of element with class 'fp-filename' will be set to the repository thumbnail width
556 * (unless min-width is set in css) and the content of an element will be replaced with filename
557 * supplied by repository;
558 *
e709ddd2
MG
559 * top element(s) will have class fp-folder if the element is a folder;
560 *
561 * List of files will have parent <div> element with class 'fp-iconview'
562 *
d1d18691
MG
563 * @return string
564 */
e709ddd2 565 private function fp_js_template_iconfilename() {
420e7bb2
BR
566 $rv = '
567<a class="fp-file" href="#" >
d1d18691 568 <div class="{!}fp-thumbnail"></div>
0f0d10c5
BR
569 <div class="fp-filename-field">
570 <p class="{!}fp-filename"></p>
571 </div>
e88d5641 572</a>';
d1d18691
MG
573 return preg_replace('/\{\!\}/', '', $rv);
574 }
575
576 /**
577 * FilePicker JS template for displaying file name in 'table view' and 'tree view' modes.
578 *
579 * content of the element with class 'fp-icon' will be replaced with an appropriate img;
580 *
581 * content of element with class 'fp-filename' will be replaced with filename supplied by
582 * repository;
583 *
e709ddd2
MG
584 * top element(s) will have class fp-folder if the element is a folder;
585 *
d1d18691
MG
586 * Note that tree view and table view are the YUI widgets and therefore there are no
587 * other templates. The widgets will be wrapped in <div> with class fp-treeview or
588 * fp-tableview (respectfully).
589 *
590 * @return string
591 */
592 private function fp_js_template_listfilename() {
a9352f1f
BR
593 $rv = '
594<span class="fp-filename-icon">
595 <a href="#">
596 <span class="{!}fp-icon"></span>
597 <span class="{!}fp-filename"></span>
598 </a>
599</span>';
d1d18691
MG
600 return preg_replace('/\{\!\}/', '', $rv);
601 }
602
603 /**
604 * FilePicker JS template for displaying link/loading progress for fetching of the next page
605 *
606 * This text is added to .fp-content AFTER .fp-iconview/.fp-treeview/.fp-tableview
607 *
608 * Must have one parent element with class 'fp-nextpage'. It will be assigned additional
609 * class 'loading' during loading of the next page (it is recommended that in this case the link
610 * becomes unavailable). Also must contain one element <a> or <button> that will hold
611 * onclick event for displaying of the next page. The event will be triggered automatically
612 * when user scrolls to this link.
613 *
614 * @return string
615 */
616 private function fp_js_template_nextpage() {
420e7bb2
BR
617 $rv = '
618<div class="{!}fp-nextpage">
619 <div class="fp-nextpage-link"><a href="#">'.get_string('more').'</a></div>
620 <div class="fp-nextpage-loading">
621 <img src="'.$this->pix_url('i/loading').'" />
622 <p>'.get_string('loading', 'repository').'</p>
623 </div>
d1d18691
MG
624</div>';
625 return preg_replace('/\{\!\}/', '', $rv);
626 }
627
628 /**
e709ddd2 629 * FilePicker JS template for window appearing to select a file.
d1d18691 630 *
55089a9d
MG
631 * All content must be enclosed in one element, CSS for this class must define width and
632 * height of the window;
d1d18691
MG
633 *
634 * Thumbnail image will be added as content to the element with class 'fp-thumbnail';
635 *
636 * Inside the window the elements with the following classnames must be present:
55089a9d
MG
637 * 'fp-saveas', 'fp-linktype-2', 'fp-linktype-1', 'fp-linktype-4', 'fp-setauthor',
638 * 'fp-setlicense'. Inside each of them must have one input element (or select in case of
639 * fp-setlicense). They may also have labels.
d1d18691
MG
640 * The elements will be assign with class 'uneditable' and input/select element will become
641 * disabled if they are not applicable for the particular file;
642 *
643 * There may be present elements with classes 'fp-datemodified', 'fp-datecreated', 'fp-size',
e709ddd2
MG
644 * 'fp-license', 'fp-author', 'fp-dimensions'. They will receive additional class 'fp-unknown'
645 * if information is unavailable. If there is information available, the content of embedded
646 * element with class 'fp-value' will be substituted with the value;
d1d18691
MG
647 *
648 * Elements with classes 'fp-select-confirm' and 'fp-select-cancel' will hold corresponding
649 * onclick events;
650 *
651 * When confirm button is pressed and file is being selected, the top element receives
652 * additional class 'loading'. It is removed when response from server is received.
653 *
654 * @return string
655 */
656 private function fp_js_template_selectlayout() {
420e7bb2
BR
657 $rv = '
658<div class="file-picker fp-select">
659 <div class="fp-select-loading">
660 <img src="'.$this->pix_url('i/loading').'" />
661 <p>'.get_string('loading', 'repository').'</p>
662 </div>
663 <form>
664 <div>
665 <a class="{!}fp-select-confirm fp-panel-button" href="#">'.get_string('getfile', 'repository').'</a>
666 <a class="{!}fp-select-cancel fp-panel-button" href="#">'.get_string('cancel').'</a>
667 </div>
668 <div class="fp-hr"></div>
669 <table>
420e7bb2
BR
670 <tr class="{!}fp-linktype-2">
671 <td></td>
0f0d10c5 672 <td class="mdl-left"><input type="radio"/><label>&nbsp;'.get_string('makefileinternal', 'repository').'</label></td></tr>
420e7bb2
BR
673 <tr class="{!}fp-linktype-1">
674 <td></td>
0f0d10c5 675 <td class="mdl-left"><input type="radio"/><label>&nbsp;'.get_string('makefilelink', 'repository').'</label></td></tr>
420e7bb2
BR
676 <tr class="{!}fp-linktype-4">
677 <td></td>
0f0d10c5 678 <td class="mdl-left"><input type="radio"/><label>&nbsp;'.get_string('makefilereference', 'repository').'</label></td></tr>
420e7bb2
BR
679 <tr class="{!}fp-saveas">
680 <td class="mdl-right"><label>'.get_string('saveas', 'repository').'</label>:</td>
681 <td class="mdl-left"><input type="text"/></td></tr>
682 <tr class="{!}fp-setauthor">
683 <td class="mdl-right"><label>'.get_string('author', 'repository').'</label>:</td>
684 <td class="mdl-left"><input type="text" /></td></tr>
685 <tr class="{!}fp-setlicense">
686 <td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
687 <td class="mdl-left"><select></select></td></tr>
688 </table>
689 </form>
690 <p class="{!}fp-thumbnail"></p>
691 <div class="fp-fileinfo">
6077e381
BR
692 <div class="{!}fp-datemodified">'.get_string('lastmodified', 'moodle').': <span class="fp-value"></span></div>
693 <div class="{!}fp-datecreated">'.get_string('datecreated', 'repository').': <span class="fp-value"></span></div>
694 <div class="{!}fp-size">'.get_string('size', 'repository').': <span class="fp-value"></span></div>
695 <div class="{!}fp-license">'.get_string('license', 'moodle').': <span class="fp-value"></span></div>
696 <div class="{!}fp-author">'.get_string('author', 'repository').': <span class="fp-value"></span></div>
697 <div class="{!}fp-dimensions">'.get_string('dimensions', 'repository').': <span class="fp-value"></span></div>
420e7bb2 698 </div>
d1d18691
MG
699</div>';
700 return preg_replace('/\{\!\}/', '', $rv);
701 }
702
703 /**
704 * FilePicker JS template for 'Upload file' repository
705 *
706 * Content to display when user chooses 'Upload file' repository (will be nested inside
707 * element with class 'fp-content').
708 *
709 * Must contain form (enctype="multipart/form-data" method="POST")
710 *
711 * The elements with the following classnames must be present:
712 * 'fp-file', 'fp-saveas', 'fp-setauthor', 'fp-setlicense'. Inside each of them must have
713 * one input element (or select in case of fp-setlicense). They may also have labels.
714 *
715 * Element with class 'fp-upload-btn' will hold onclick event for uploading the file;
716 *
717 * Please note that some fields may be hidden using CSS if this is part of quickupload form
718 *
719 * @return string
720 */
721 private function fp_js_template_uploadform() {
420e7bb2
BR
722 $rv = '
723<div class="fp-upload-form mdl-align">
0f0d10c5 724 <div class="fp-content-center">
420e7bb2
BR
725 <form enctype="multipart/form-data" method="POST">
726 <table >
727 <tr class="{!}fp-file">
728 <td class="mdl-right"><label>'.get_string('attachment', 'repository').'</label>:</td>
729 <td class="mdl-left"><input type="file"/></td></tr>
730 <tr class="{!}fp-saveas">
731 <td class="mdl-right"><label>'.get_string('saveas', 'repository').'</label>:</td>
732 <td class="mdl-left"><input type="text"/></td></tr>
733 <tr class="{!}fp-setauthor">
734 <td class="mdl-right"><label>'.get_string('author', 'repository').'</label>:</td>
735 <td class="mdl-left"><input type="text"/></td></tr>
736 <tr class="{!}fp-setlicense">
737 <td class="mdl-right"><label>'.get_string('chooselicense', 'repository').'</label>:</td>
6077e381 738 <td class="mdl-left"><select></select></td></tr>
420e7bb2
BR
739 </table>
740 </form>
741 <div><button class="{!}fp-upload-btn">'.get_string('upload', 'repository').'</button></div>
742 </div>
d1d18691
MG
743</div> ';
744 return preg_replace('/\{\!\}/', '', $rv);
745 }
746
747 /**
748 * FilePicker JS template to display during loading process (inside element with class 'fp-content').
749 *
750 * @return string
751 */
752 private function fp_js_template_loading() {
420e7bb2 753 return '
0f0d10c5
BR
754<div class="fp-content-loading">
755 <div class="fp-content-center">
756 <img src="'.$this->pix_url('i/loading').'" />
757 <p>'.get_string('loading', 'repository').'</p>
758 </div>
d1d18691
MG
759</div>';
760 }
761
762 /**
763 * FilePicker JS template for error (inside element with class 'fp-content').
764 *
765 * must have element with class 'fp-error', its content will be replaced with error text
766 * and the error code will be assigned as additional class to this element
767 * used errors: invalidjson, nofilesavailable, norepositoriesavailable
768 *
769 * @return string
770 */
771 private function fp_js_template_error() {
420e7bb2 772 $rv = '
6077e381 773<div class="fp-content-error" ><div class="{!}fp-error"></div></div>';
d1d18691
MG
774 return preg_replace('/\{\!\}/', '', $rv);
775 }
776
777 /**
778 * FilePicker JS template for error/info message displayed as a separate popup window.
779 *
9a62f779 780 * Must be wrapped in one element, CSS for this element must define
d1d18691
MG
781 * width and height of the window. It will be assigned with an additional class 'fp-msg-error'
782 * or 'fp-msg-info' depending on message type;
783 *
784 * content of element with class 'fp-msg-text' will be replaced with error/info text;
785 *
786 * element with class 'fp-msg-butok' will hold onclick event
787 *
788 * @return string
789 */
790 private function fp_js_template_message() {
420e7bb2
BR
791 $rv = '
792<div class="file-picker fp-msg">
793 <p class="{!}fp-msg-text"></p>
b4562710 794 <a class="{!}fp-msg-butok fp-panel-button" href="#">'.get_string('ok').'</a>
420e7bb2 795</div>';
d1d18691
MG
796 return preg_replace('/\{\!\}/', '', $rv);
797 }
798
799 /**
800 * FilePicker JS template for popup dialogue window asking for action when file with the same name already exists.
801 *
9a62f779 802 * Must have one top element, CSS for this element must define width and height of the window;
d1d18691
MG
803 *
804 * content of element with class 'fp-dlg-text' will be replaced with dialog text;
805 * elements with classes 'fp-dlg-butoverwrite', 'fp-dlg-butrename' and 'fp-dlg-butcancel' will
806 * hold onclick events;
807 *
808 * content of element with class 'fp-dlg-butrename' will be substituted with appropriate string
809 * (Note that it may have long text)
810 *
811 * @return string
812 */
813 private function fp_js_template_processexistingfile() {
420e7bb2
BR
814 $rv = '
815<div class="file-picker fp-dlg">
816 <p class="{!}fp-dlg-text"></p>
0f0d10c5
BR
817 <a class="{!}fp-dlg-butoverwrite fp-panel-button" href="#">'.get_string('overwrite', 'repository').'</a>
818 <a class="{!}fp-dlg-butcancel fp-panel-button" href="#">'.get_string('cancel').'</a>
6077e381 819 <a class="{!}fp-dlg-butrename fp-panel-button" href="#"></a>
d1d18691
MG
820</div>';
821 return preg_replace('/\{\!\}/', '', $rv);
822 }
0f0d10c5 823
d1d18691
MG
824 /**
825 * FilePicker JS template for repository login form including templates for each element type
826 *
827 * Must contain one <form> element with templates for different input types inside:
828 * Elements with classes 'fp-login-popup', 'fp-login-textarea', 'fp-login-select' and
829 * 'fp-login-input' are templates for displaying respective login form elements. Inside
830 * there must be exactly one element with type <button>, <textarea>, <select> or <input>
831 * (i.e. fp-login-popup should have <button>, fp-login-textarea should have <textarea>, etc.);
832 * They may also contain the <label> element and it's content will be substituted with
833 * label;
834 *
835 * You can also define elements with classes 'fp-login-checkbox', 'fp-login-text'
836 * but if they are not found, 'fp-login-input' will be used;
837 *
838 * Element with class 'fp-login-radiogroup' will be used for group of radio inputs. Inside
839 * it should hava a template for one radio input (with class 'fp-login-radio');
840 *
841 * Element with class 'fp-login-submit' will hold on click mouse event (form submission). It
842 * will be removed if at least one popup element is present;
843 *
844 * @return string
845 */
846 private function fp_js_template_loginform() {
847 $rv = '
848<div class="fp-login-form">
420e7bb2
BR
849 <div class="fp-content-center">
850 <form>
851 <table >
852 <tr class="{!}fp-login-popup">
853 <td colspan="2">
854 <label>'.get_string('popup', 'repository').'</label>
855 <p class="fp-popup"><button class="{!}fp-login-popup-but">'.get_string('login', 'repository').'</button></p></td></tr>
856 <tr class="{!}fp-login-textarea">
857 <td colspan="2"><p><textarea></textarea></p></td></tr>
858 <tr class="{!}fp-login-select">
859 <td align="right"><label></label></td>
860 <td align="left"><select></select></td></tr>
861 <tr class="{!}fp-login-input">
6077e381 862 <td class="label"><label></label></td>
420e7bb2
BR
863 <td class="input"><input/></td></tr>
864 <tr class="{!}fp-login-radiogroup">
6077e381
BR
865 <td align="right" width="30%" valign="top"><label></label></td>
866 <td align="left" valign="top"><p class="{!}fp-login-radio"><input /> <label></label></p></td></tr>
420e7bb2
BR
867 </table>
868 <p><button class="{!}fp-login-submit">'.get_string('submit', 'repository').'</button></p>
869 </form>
870 </div>
d1d18691
MG
871</div>';
872 return preg_replace('/\{\!\}/', '', $rv);
873 }
874
875 /**
876 * Returns all FilePicker JavaScript templates as an array.
877 *
878 * @return array
879 */
880 public function filepicker_js_templates() {
881 $class_methods = get_class_methods($this);
882 $templates = array();
883 foreach ($class_methods as $method_name) {
884 if (preg_match('/^fp_js_template_(.*)$/', $method_name, $matches))
885 $templates[$matches[1]] = $this->$method_name();
886 }
887 return $templates;
888 }
889
890 /**
891 * Returns HTML for default repository searchform to be passed to Filepicker
892 *
893 * This will be used as contents for search form defined in generallayout template
894 * (form with id {TOOLSEARCHID}).
895 * Default contents is one text input field with name="s"
896 */
897 public function repository_default_searchform() {
7c3e6652 898 $str = '<div class="fp-def-search"><input name="s" value='.get_string('search', 'repository').' /></div>';
d1d18691
MG
899 return $str;
900 }
901}
64f93798
PS
902
903/**
904 * Data structure representing a general moodle file tree viewer
905 *
906 * @copyright 2010 Dongsheng Cai
907 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
908 * @since Moodle 2.0
909 */
910class files_tree_viewer implements renderable {
911 public $tree;
912 public $path;
e921afa8 913 public $context;
64f93798
PS
914
915 /**
916 * Constructor of moodle_file_tree_viewer class
917 * @param file_info $file_info
918 * @param array $options
919 */
920 public function __construct(file_info $file_info, array $options = null) {
921 global $CFG;
922
923 //note: this MUST NOT use get_file_storage() !!!!!!!!!!!!!!!!!!!!!!!!!!!!
64f93798 924 $this->options = (array)$options;
e921afa8
DC
925 $this->context = $options['context'];
926
64f93798
PS
927 $this->tree = array();
928 $children = $file_info->get_children();
0b259d91 929 $current_file_params = $file_info->get_params();
64f93798 930 $parent_info = $file_info->get_parent();
64f93798
PS
931 $level = $parent_info;
932 $this->path = array();
933 while ($level) {
934 $params = $level->get_params();
935 $context = get_context_instance_by_id($params['contextid']);
0b259d91
DC
936 // $this->context is current context
937 if ($context->id != $this->context->id or empty($params['filearea'])) {
64f93798
PS
938 break;
939 }
e921afa8
DC
940 // unset unused parameters
941 unset($params['component']);
942 unset($params['filearea']);
0b259d91 943 unset($params['filename']);
e921afa8 944 unset($params['itemid']);
64f93798 945 $url = new moodle_url('/files/index.php', $params);
e921afa8 946 $this->path[] = html_writer::link($url, $level->get_visible_name());
64f93798
PS
947 $level = $level->get_parent();
948 }
949 $this->path = array_reverse($this->path);
0b259d91
DC
950 if ($current_file_params['filepath'] != '/') {
951 $this->path[] = $file_info->get_visible_name();
952 }
64f93798
PS
953
954 foreach ($children as $child) {
955 $filedate = $child->get_timemodified();
956 $filesize = $child->get_filesize();
957 $mimetype = $child->get_mimetype();
958 $params = $child->get_params();
0b259d91
DC
959 unset($params['component']);
960 unset($params['filearea']);
961 unset($params['filename']);
962 unset($params['itemid']);
64f93798
PS
963 $fileitem = array(
964 'params' => $params,
965 'filename' => $child->get_visible_name(),
559276b1
MG
966 'mimetype' => $child->get_mimetype(),
967 'filedate' => $filedate ? $filedate : '',
968 'filesize' => $filesize ? $filesize : ''
64f93798 969 );
e921afa8 970 $url = new moodle_url('/files/index.php', $params);
64f93798
PS
971 if ($child->is_directory()) {
972 $fileitem['isdir'] = true;
973 $fileitem['url'] = $url->out(false);
64f93798
PS
974 } else {
975 $fileitem['url'] = $child->get_url();
976 }
977 $this->tree[] = $fileitem;
978 }
979 }
980}