##// END OF EJS Templates
add missing `that = this`
Min RK -
Show More
@@ -1,721 +1,722 b''
1 1 // Copyright (c) IPython Development Team.
2 2 // Distributed under the terms of the Modified BSD License.
3 3
4 4 define([
5 5 'base/js/namespace',
6 6 'jquery',
7 7 'base/js/utils',
8 8 'base/js/dialog',
9 9 'base/js/events',
10 10 'base/js/keyboard',
11 11 ], function(IPython, $, utils, dialog, events, keyboard) {
12 12 "use strict";
13 13
14 14 var NotebookList = function (selector, options) {
15 15 /**
16 16 * Constructor
17 17 *
18 18 * Parameters:
19 19 * selector: string
20 20 * options: dictionary
21 21 * Dictionary of keyword arguments.
22 22 * session_list: SessionList instance
23 23 * element_name: string
24 24 * base_url: string
25 25 * notebook_path: string
26 26 * contents: Contents instance
27 27 */
28 28 var that = this;
29 29 this.session_list = options.session_list;
30 30 // allow code re-use by just changing element_name in kernellist.js
31 31 this.element_name = options.element_name || 'notebook';
32 32 this.selector = selector;
33 33 if (this.selector !== undefined) {
34 34 this.element = $(selector);
35 35 this.style();
36 36 this.bind_events();
37 37 }
38 38 this.notebooks_list = [];
39 39 this.sessions = {};
40 40 this.base_url = options.base_url || utils.get_body_data("baseUrl");
41 41 this.notebook_path = options.notebook_path || utils.get_body_data("notebookPath");
42 42 this.contents = options.contents;
43 43 if (this.session_list && this.session_list.events) {
44 44 this.session_list.events.on('sessions_loaded.Dashboard',
45 45 function(e, d) { that.sessions_loaded(d); });
46 46 }
47 47 };
48 48
49 49 NotebookList.prototype.style = function () {
50 50 var prefix = '#' + this.element_name;
51 51 $(prefix + '_toolbar').addClass('list_toolbar');
52 52 $(prefix + '_list_info').addClass('toolbar_info');
53 53 $(prefix + '_buttons').addClass('toolbar_buttons');
54 54 $(prefix + '_list_header').addClass('list_header');
55 55 this.element.addClass("list_container");
56 56 };
57 57
58 58 NotebookList.prototype.bind_events = function () {
59 59 var that = this;
60 60 $('#refresh_' + this.element_name + '_list').click(function () {
61 61 that.load_sessions();
62 62 });
63 63 this.element.bind('dragover', function () {
64 64 return false;
65 65 });
66 66 this.element.bind('drop', function(event){
67 67 that.handleFilesUpload(event,'drop');
68 68 return false;
69 69 });
70 70
71 71 // Bind events for singleton controls.
72 72 if (!NotebookList._bound_singletons) {
73 73 NotebookList._bound_singletons = true;
74 74 $('#new-file').click(function(e) {
75 75 var w = window.open();
76 76 that.contents.new_untitled(that.notebook_path || '', {type: 'file', ext: '.txt'}).then(function(data) {
77 77 var url = utils.url_join_encode(
78 78 that.base_url, 'edit', data.path
79 79 );
80 80 w.location = url;
81 81 });
82 82 that.load_sessions();
83 83 });
84 84 $('#new-folder').click(function(e) {
85 85 that.contents.new_untitled(that.notebook_path || '', {type: 'directory'})
86 86 .then(function(){
87 87 that.load_list();
88 88 });
89 89 });
90 90
91 91 $('.rename-button').click($.proxy(this.rename_selected, this));
92 92 $('.shutdown-button').click($.proxy(this.shutdown_selected, this));
93 93 $('.duplicate-button').click($.proxy(this.duplicate_selected, this));
94 94 $('.delete-button').click($.proxy(this.delete_selected, this));
95 95 }
96 96 };
97 97
98 98 NotebookList.prototype.handleFilesUpload = function(event, dropOrForm) {
99 99 var that = this;
100 100 var files;
101 101 if(dropOrForm =='drop'){
102 102 files = event.originalEvent.dataTransfer.files;
103 103 } else
104 104 {
105 105 files = event.originalEvent.target.files;
106 106 }
107 107 for (var i = 0; i < files.length; i++) {
108 108 var f = files[i];
109 109 var name_and_ext = utils.splitext(f.name);
110 110 var file_ext = name_and_ext[1];
111 111
112 112 var reader = new FileReader();
113 113 if (file_ext === '.ipynb') {
114 114 reader.readAsText(f);
115 115 } else {
116 116 // read non-notebook files as binary
117 117 reader.readAsArrayBuffer(f);
118 118 }
119 119 var item = that.new_item(0, true);
120 120 item.addClass('new-file');
121 121 that.add_name_input(f.name, item, file_ext == '.ipynb' ? 'notebook' : 'file');
122 122 // Store the list item in the reader so we can use it later
123 123 // to know which item it belongs to.
124 124 $(reader).data('item', item);
125 125 reader.onload = function (event) {
126 126 var item = $(event.target).data('item');
127 127 that.add_file_data(event.target.result, item);
128 128 that.add_upload_button(item);
129 129 };
130 130 reader.onerror = function (event) {
131 131 var item = $(event.target).data('item');
132 132 var name = item.data('name');
133 133 item.remove();
134 134 dialog.modal({
135 135 title : 'Failed to read file',
136 136 body : "Failed to read file '" + name + "'",
137 137 buttons : {'OK' : { 'class' : 'btn-primary' }}
138 138 });
139 139 };
140 140 }
141 141 // Replace the file input form wth a clone of itself. This is required to
142 142 // reset the form. Otherwise, if you upload a file, delete it and try to
143 143 // upload it again, the changed event won't fire.
144 144 var form = $('input.fileinput');
145 145 form.replaceWith(form.clone(true));
146 146 return false;
147 147 };
148 148
149 149 NotebookList.prototype.clear_list = function (remove_uploads) {
150 150 /**
151 151 * Clears the navigation tree.
152 152 *
153 153 * Parameters
154 154 * remove_uploads: bool=False
155 155 * Should upload prompts also be removed from the tree.
156 156 */
157 157 if (remove_uploads) {
158 158 this.element.children('.list_item').remove();
159 159 } else {
160 160 this.element.children('.list_item:not(.new-file)').remove();
161 161 }
162 162 };
163 163
164 164 NotebookList.prototype.load_sessions = function(){
165 165 this.session_list.load_sessions();
166 166 };
167 167
168 168
169 169 NotebookList.prototype.sessions_loaded = function(data){
170 170 this.sessions = data;
171 171 this.load_list();
172 172 };
173 173
174 174 NotebookList.prototype.load_list = function () {
175 175 var that = this;
176 176 this.contents.list_contents(that.notebook_path).then(
177 177 $.proxy(this.draw_notebook_list, this),
178 178 function(error) {
179 179 that.draw_notebook_list({content: []}, "Server error: " + error.message);
180 180 }
181 181 );
182 182 };
183 183
184 184 /**
185 185 * Draw the list of notebooks
186 186 * @method draw_notebook_list
187 187 * @param {Array} list An array of dictionaries representing files or
188 188 * directories.
189 189 * @param {String} error_msg An error message
190 190 */
191 191
192 192
193 193 var type_order = {'directory':0,'notebook':1,'file':2};
194 194
195 195 NotebookList.prototype.draw_notebook_list = function (list, error_msg) {
196 196 list.content.sort(function(a, b) {
197 197 if (type_order[a['type']] < type_order[b['type']]) {
198 198 return -1;
199 199 }
200 200 if (type_order[a['type']] > type_order[b['type']]) {
201 201 return 1;
202 202 }
203 203 if (a['name'] < b['name']) {
204 204 return -1;
205 205 }
206 206 if (a['name'] > b['name']) {
207 207 return 1;
208 208 }
209 209 return 0;
210 210 });
211 211 var message = error_msg || 'Notebook list empty.';
212 212 var item = null;
213 213 var model = null;
214 214 var len = list.content.length;
215 215 this.clear_list();
216 216 var n_uploads = this.element.children('.list_item').length;
217 217 if (len === 0) {
218 218 item = this.new_item(0);
219 219 var span12 = item.children().first();
220 220 span12.empty();
221 221 span12.append($('<div style="margin:auto;text-align:center;color:grey"/>').text(message));
222 222 }
223 223 var path = this.notebook_path;
224 224 var offset = n_uploads;
225 225 if (path !== '') {
226 226 item = this.new_item(offset, false);
227 227 model = {
228 228 type: 'directory',
229 229 name: '..',
230 230 path: utils.url_path_split(path)[0],
231 231 };
232 232 this.add_link(model, item);
233 233 offset += 1;
234 234 }
235 235 for (var i=0; i<len; i++) {
236 236 model = list.content[i];
237 237 item = this.new_item(i+offset, true);
238 238 this.add_link(model, item);
239 239 }
240 240 // Trigger an event when we've finished drawing the notebook list.
241 241 events.trigger('draw_notebook_list.NotebookList');
242 242 this._selection_changed();
243 243 };
244 244
245 245
246 246 /**
247 247 * Creates a new item.
248 248 * @param {integer} index
249 249 * @param {boolean} [selectable] - tristate, undefined: don't draw checkbox,
250 250 * false: don't draw checkbox but pad
251 251 * where it should be, true: draw checkbox.
252 252 * @return {JQuery} row
253 253 */
254 254 NotebookList.prototype.new_item = function (index, selectable) {
255 255 var row = $('<div/>')
256 256 .addClass("list_item")
257 257 .addClass("row");
258 258
259 259 var item = $("<div/>")
260 260 .addClass("col-md-12")
261 261 .appendTo(row);
262 262
263 263 var checkbox;
264 264 if (selectable !== undefined) {
265 265 checkbox = $('<input/>')
266 266 .attr('type', 'checkbox')
267 267 .attr('title', 'Click here to rename, delete, etc.')
268 268 .appendTo(item);
269 269 }
270 270
271 271 $('<i/>')
272 272 .addClass('item_icon')
273 273 .appendTo(item);
274 274
275 275 var link = $("<a/>")
276 276 .addClass("item_link")
277 277 .appendTo(item);
278 278
279 279 $("<span/>")
280 280 .addClass("item_name")
281 281 .appendTo(link);
282 282
283 283 if (selectable === false) {
284 284 checkbox.css('visibility', 'hidden');
285 285 } else if (selectable === true) {
286 286 var that = this;
287 287 link.click(function(e) {
288 288 e.stopPropagation();
289 289 });
290 290 checkbox.click(function(e) {
291 291 e.stopPropagation();
292 292 that._selection_changed();
293 293 });
294 294 row.click(function(e) {
295 295 e.stopPropagation();
296 296 checkbox.prop('checked', !checkbox.prop('checked'));
297 297 that._selection_changed();
298 298 });
299 299 }
300 300
301 301 var buttons = $('<div/>')
302 302 .addClass("item_buttons pull-right")
303 303 .appendTo(item);
304 304
305 305 $('<div/>')
306 306 .addClass('running-indicator')
307 307 .text('Running')
308 308 .css('visibility', 'hidden')
309 309 .appendTo(buttons);
310 310
311 311 if (index === -1) {
312 312 this.element.append(row);
313 313 } else {
314 314 this.element.children().eq(index).after(row);
315 315 }
316 316 return row;
317 317 };
318 318
319 319
320 320 NotebookList.icons = {
321 321 directory: 'folder_icon',
322 322 notebook: 'notebook_icon',
323 323 file: 'file_icon',
324 324 };
325 325
326 326 NotebookList.uri_prefixes = {
327 327 directory: 'tree',
328 328 notebook: 'notebooks',
329 329 file: 'edit',
330 330 };
331 331
332 332 NotebookList.prototype._selection_changed = function() {
333 333 var selected = [];
334 334 var has_running_notebook = false;
335 335 var has_directory = false;
336 336 var has_file = false;
337 337 var that = this;
338 338 $('.list_item :checked').each(function(index, item) {
339 339 var parent = $(item).parent().parent();
340 340 selected.push({
341 341 name: parent.data('name'),
342 342 path: parent.data('path'),
343 343 type: parent.data('type')
344 344 });
345 345
346 346 has_running_notebook = has_running_notebook ||
347 347 (parent.data('type') == 'notebook' && that.sessions[parent.data('path')] !== undefined);
348 348 has_file = has_file || parent.data('type') == 'file';
349 349 has_directory = has_directory || parent.data('type') == 'directory';
350 350 });
351 351 this.selected = selected;
352 352
353 353 // Rename is only visible when one item is selected.
354 354 if (selected.length==1) {
355 355 $('.rename-button').css('display', 'inline-block');
356 356 } else {
357 357 $('.rename-button').css('display', 'none');
358 358 }
359 359
360 360 // Shutdown is only visible when one or more notebooks are visible.
361 361 if (has_running_notebook && !(has_file || has_directory)) {
362 362 $('.shutdown-button').css('display', 'inline-block');
363 363 } else {
364 364 $('.shutdown-button').css('display', 'none');
365 365 }
366 366
367 367 // Duplicate isn't visible if a directory is selected.
368 368 if (selected.length > 0 && !has_directory) {
369 369 $('.duplicate-button').css('display', 'inline-block');
370 370 } else {
371 371 $('.duplicate-button').css('display', 'none');
372 372 }
373 373
374 374 // Delete is visible if one or more items are selected.
375 375 if (selected.length > 0) {
376 376 $('.delete-button').css('display', 'inline-block');
377 377 } else {
378 378 $('.delete-button').css('display', 'none');
379 379 }
380 380 };
381 381
382 382 NotebookList.prototype.add_link = function (model, item) {
383 383 var path = model.path,
384 384 name = model.name;
385 385 item.data('name', name);
386 386 item.data('path', path);
387 387 item.data('type', model.type);
388 388 item.find(".item_name").text(name);
389 389 var icon = NotebookList.icons[model.type];
390 390 var uri_prefix = NotebookList.uri_prefixes[model.type];
391 391 item.find(".item_icon").addClass(icon).addClass('icon-fixed-width');
392 392 var link = item.find("a.item_link")
393 393 .attr('href',
394 394 utils.url_join_encode(
395 395 this.base_url,
396 396 uri_prefix,
397 397 path
398 398 )
399 399 );
400 400
401 401 var running = (model.type == 'notebook' && this.sessions[path] !== undefined);
402 402 item.find(".item_buttons .running-indicator").css('visibility', running ? '' : 'hidden');
403 403
404 404 // directory nav doesn't open new tabs
405 405 // files, notebooks do
406 406 if (model.type !== "directory") {
407 407 link.attr('target','_blank');
408 408 }
409 409 };
410 410
411 411
412 412 NotebookList.prototype.add_name_input = function (name, item, icon_type) {
413 413 item.data('name', name);
414 414 item.find(".item_icon").addClass(NotebookList.icons[icon_type]).addClass('icon-fixed-width');
415 415 item.find(".item_name").empty().append(
416 416 $('<input/>')
417 417 .addClass("filename_input")
418 418 .attr('value', name)
419 419 .attr('size', '30')
420 420 .attr('type', 'text')
421 421 .keyup(function(event){
422 422 if(event.keyCode == 13){item.find('.upload_button').click();}
423 423 else if(event.keyCode == 27){item.remove();}
424 424 })
425 425 );
426 426 };
427 427
428 428
429 429 NotebookList.prototype.add_file_data = function (data, item) {
430 430 item.data('filedata', data);
431 431 };
432 432
433 433
434 434 NotebookList.prototype.shutdown_selected = function() {
435 435 var that = this;
436 436 this.selected.forEach(function(item) {
437 437 if (item.type == 'notebook') {
438 438 that.shutdown_notebook(item.path);
439 439 }
440 440 });
441 441 };
442 442
443 443 NotebookList.prototype.shutdown_notebook = function(path) {
444 444 var that = this;
445 445 var settings = {
446 446 processData : false,
447 447 cache : false,
448 448 type : "DELETE",
449 449 dataType : "json",
450 450 success : function () {
451 451 that.load_sessions();
452 452 },
453 453 error : utils.log_ajax_error,
454 454 };
455 455
456 456 var session = this.sessions[path];
457 457 if (session) {
458 458 var url = utils.url_join_encode(
459 459 this.base_url,
460 460 'api/sessions',
461 461 session
462 462 );
463 463 $.ajax(url, settings);
464 464 }
465 465 }
466 466
467 467 NotebookList.prototype.rename_selected = function() {
468 468 if (this.selected.length != 1) return;
469 469
470 470 var that = this;
471 471 var path = this.selected[0].path;
472 472 var input = $('<input/>').attr('type','text').attr('size','25').addClass('form-control')
473 473 .val(path);
474 474 var dialog_body = $('<div/>').append(
475 475 $("<p/>").addClass("rename-message")
476 476 .text('Enter a new directory name:')
477 477 ).append(
478 478 $("<br/>")
479 479 ).append(input);
480 480 var d = dialog.modal({
481 481 title : "Rename directory",
482 482 body : dialog_body,
483 483 buttons : {
484 484 OK : {
485 485 class: "btn-primary",
486 486 click: function() {
487 487 that.contents.rename(path, input.val()).then(function() {
488 488 that.load_list();
489 489 }).catch(function(e) {
490 490 dialog.modal({
491 491 title : "Error",
492 492 body : $('<div/>')
493 493 .text("An error occurred while renaming \"" + path + "\" to \"" + input.val() + "\".")
494 494 .append($('<div/>').addClass('alert alert-danger').text(String(e))),
495 495 buttons : {
496 496 OK : {}
497 497 }
498 498 });
499 499 });
500 500 }
501 501 },
502 502 Cancel : {}
503 503 },
504 504 open : function () {
505 505 // Upon ENTER, click the OK button.
506 506 input.keydown(function (event) {
507 507 if (event.which === keyboard.keycodes.enter) {
508 508 d.find('.btn-primary').first().click();
509 509 return false;
510 510 }
511 511 });
512 512 input.focus().select();
513 513 }
514 514 });
515 515 };
516 516
517 517 NotebookList.prototype.delete_selected = function() {
518 518 var message;
519 519 if (this.selected.length == 1) {
520 520 message = 'Are you sure you want to permanently delete: ' + this.selected[0].name + '?';
521 521 } else {
522 522 message = 'Are you sure you want to permanently delete the ' + this.selected.length + ' files selected?';
523 523 }
524 524 var that = this;
525 525 dialog.modal({
526 526 title : "Delete",
527 527 body : message,
528 528 buttons : {
529 529 Delete : {
530 530 class: "btn-danger",
531 531 click: function() {
532 532 // Shutdown any/all selected notebooks before deleting
533 533 // the files.
534 534 that.shutdown_selected();
535 535
536 536 // Delete selected.
537 537 that.selected.forEach(function(item) {
538 538 that.contents.delete(item.path).then(function() {
539 539 that.notebook_deleted(item.path);
540 540 }).catch(function(e) {
541 541 dialog.modal({
542 542 title : "Error",
543 543 body : $('<div/>')
544 544 .text("An error occurred while deleting \"" + item.path + "\".")
545 545 .append($('<div/>').addClass('alert alert-danger').text(String(e))),
546 546 buttons : {
547 547 OK : {}
548 548 }
549 549 });
550 550 });
551 551 });
552 552 }
553 553 },
554 554 Cancel : {}
555 555 }
556 556 });
557 557 };
558 558
559 559 NotebookList.prototype.duplicate_selected = function() {
560 560 var message;
561 561 if (this.selected.length == 1) {
562 562 message = 'Are you sure you want to duplicate: ' + this.selected[0].name + '?';
563 563 } else {
564 564 message = 'Are you sure you want to duplicate the ' + this.selected.length + ' files selected?';
565 565 }
566 566 var that = this;
567 567 dialog.modal({
568 568 title : "Delete",
569 569 body : message,
570 570 buttons : {
571 571 Duplicate : {
572 572 class: "btn-primary",
573 573 click: function() {
574 574 that.selected.forEach(function(item) {
575 575 that.contents.copy(item.path, that.notebook_path).then(function () {
576 576 that.load_list();
577 577 }).catch(function(e) {
578 578 dialog.modal({
579 579 title : "Error",
580 580 body : $('<div/>')
581 581 .text("An error occurred while copying \"" + item.path + "\".")
582 582 .append($('<div/>').addClass('alert alert-danger').text(String(e))),
583 583 buttons : {
584 584 OK : {}
585 585 }
586 586 });
587 587 });
588 588 });
589 589 }
590 590 },
591 591 Cancel : {}
592 592 }
593 593 });
594 594 };
595 595
596 596 NotebookList.prototype.notebook_deleted = function(path) {
597 597 /**
598 598 * Remove the deleted notebook.
599 599 */
600 var that = this;
600 601 $( ":data(path)" ).each(function() {
601 602 var element = $(this);
602 if (element.data("path") == path) {
603 if (element.data("path") === path) {
603 604 element.remove();
604 605 events.trigger('notebook_deleted.NotebookList');
605 this._selection_changed();
606 that._selection_changed();
606 607 }
607 608 });
608 609 };
609 610
610 611
611 612 NotebookList.prototype.add_upload_button = function (item) {
612 613 var that = this;
613 614 var upload_button = $('<button/>').text("Upload")
614 615 .addClass('btn btn-primary btn-xs upload_button')
615 616 .click(function (e) {
616 617 var filename = item.find('.item_name > input').val();
617 618 var path = utils.url_path_join(that.notebook_path, filename);
618 619 var filedata = item.data('filedata');
619 620 var format = 'text';
620 621 if (filename.length === 0 || filename[0] === '.') {
621 622 dialog.modal({
622 623 title : 'Invalid file name',
623 624 body : "File names must be at least one character and not start with a dot",
624 625 buttons : {'OK' : { 'class' : 'btn-primary' }}
625 626 });
626 627 return false;
627 628 }
628 629 if (filedata instanceof ArrayBuffer) {
629 630 // base64-encode binary file data
630 631 var bytes = '';
631 632 var buf = new Uint8Array(filedata);
632 633 var nbytes = buf.byteLength;
633 634 for (var i=0; i<nbytes; i++) {
634 635 bytes += String.fromCharCode(buf[i]);
635 636 }
636 637 filedata = btoa(bytes);
637 638 format = 'base64';
638 639 }
639 640 var model = {};
640 641
641 642 var name_and_ext = utils.splitext(filename);
642 643 var file_ext = name_and_ext[1];
643 644 var content_type;
644 645 if (file_ext === '.ipynb') {
645 646 model.type = 'notebook';
646 647 model.format = 'json';
647 648 try {
648 649 model.content = JSON.parse(filedata);
649 650 } catch (e) {
650 651 dialog.modal({
651 652 title : 'Cannot upload invalid Notebook',
652 653 body : "The error was: " + e,
653 654 buttons : {'OK' : {
654 655 'class' : 'btn-primary',
655 656 click: function () {
656 657 item.remove();
657 658 }
658 659 }}
659 660 });
660 661 return false;
661 662 }
662 663 content_type = 'application/json';
663 664 } else {
664 665 model.type = 'file';
665 666 model.format = format;
666 667 model.content = filedata;
667 668 content_type = 'application/octet-stream';
668 669 }
669 670 filedata = item.data('filedata');
670 671
671 672 var on_success = function () {
672 673 item.removeClass('new-file');
673 674 that.add_link(model, item);
674 675 that.add_delete_button(item);
675 676 that.session_list.load_sessions();
676 677 };
677 678
678 679 var exists = false;
679 680 $.each(that.element.find('.list_item:not(.new-file)'), function(k,v){
680 681 if ($(v).data('name') === filename) { exists = true; return false; }
681 682 });
682 683
683 684 if (exists) {
684 685 dialog.modal({
685 686 title : "Replace file",
686 687 body : 'There is already a file named ' + filename + ', do you want to replace it?',
687 688 buttons : {
688 689 Overwrite : {
689 690 class: "btn-danger",
690 691 click: function () {
691 692 that.contents.save(path, model).then(on_success);
692 693 }
693 694 },
694 695 Cancel : {
695 696 click: function() { item.remove(); }
696 697 }
697 698 }
698 699 });
699 700 } else {
700 701 that.contents.save(path, model).then(on_success);
701 702 }
702 703
703 704 return false;
704 705 });
705 706 var cancel_button = $('<button/>').text("Cancel")
706 707 .addClass("btn btn-default btn-xs")
707 708 .click(function (e) {
708 709 item.remove();
709 710 return false;
710 711 });
711 712 item.find(".item_buttons").empty()
712 713 .append(upload_button)
713 714 .append(cancel_button);
714 715 };
715 716
716 717
717 718 // Backwards compatability.
718 719 IPython.NotebookList = NotebookList;
719 720
720 721 return {'NotebookList': NotebookList};
721 722 });
General Comments 0
You need to be logged in to leave comments. Login now