notebooklist.js
436 lines
| 15.1 KiB
| application/javascript
|
JavascriptLexer
|
r4609 | //---------------------------------------------------------------------------- | ||
|
r13063 | // Copyright (C) 2011 The IPython Development Team | ||
|
r4609 | // | ||
// Distributed under the terms of the BSD License. The full license is in | ||||
// the file COPYING, distributed as part of this software. | ||||
//---------------------------------------------------------------------------- | ||||
|
r4488 | |||
//============================================================================ | ||||
|
r4609 | // NotebookList | ||
|
r4488 | //============================================================================ | ||
var IPython = (function (IPython) { | ||||
|
r13063 | "use strict"; | ||
var utils = IPython.utils; | ||||
|
r4488 | |||
var NotebookList = function (selector) { | ||||
this.selector = selector; | ||||
if (this.selector !== undefined) { | ||||
this.element = $(selector); | ||||
this.style(); | ||||
this.bind_events(); | ||||
} | ||||
|
r13063 | this.notebooks_list = []; | ||
this.sessions = {}; | ||||
|
r4488 | }; | ||
|
r9502 | NotebookList.prototype.baseProjectUrl = function () { | ||
|
r12988 | return $('body').data('baseProjectUrl'); | ||
}; | ||||
|
r13012 | |||
|
r12988 | NotebookList.prototype.notebookPath = function() { | ||
|
r13063 | return $('body').data('notebookPath'); | ||
|
r12988 | }; | ||
|
r4488 | NotebookList.prototype.style = function () { | ||
|
r6195 | $('#notebook_toolbar').addClass('list_toolbar'); | ||
$('#drag_info').addClass('toolbar_info'); | ||||
$('#notebook_buttons').addClass('toolbar_buttons'); | ||||
|
r10919 | $('#notebook_list_header').addClass('list_header'); | ||
|
r10920 | this.element.addClass("list_container"); | ||
|
r4488 | }; | ||
NotebookList.prototype.bind_events = function () { | ||||
|
r4491 | var that = this; | ||
|
r6195 | $('#refresh_notebook_list').click(function () { | ||
that.load_list(); | ||||
}); | ||||
|
r4491 | this.element.bind('dragover', function () { | ||
return false; | ||||
}); | ||||
|
r6838 | this.element.bind('drop', function(event){ | ||
|
r6851 | that.handelFilesUpload(event,'drop'); | ||
|
r4491 | return false; | ||
}); | ||||
|
r4488 | }; | ||
|
r6838 | NotebookList.prototype.handelFilesUpload = function(event, dropOrForm) { | ||
var that = this; | ||||
var files; | ||||
if(dropOrForm =='drop'){ | ||||
files = event.originalEvent.dataTransfer.files; | ||||
} else | ||||
{ | ||||
|
r13063 | files = event.originalEvent.target.files; | ||
|
r6838 | } | ||
|
r13063 | for (var i = 0; i < files.length; i++) { | ||
var f = files[i]; | ||||
|
r6838 | var reader = new FileReader(); | ||
reader.readAsText(f); | ||||
|
r13121 | var name_and_ext = utils.splitext(f.name); | ||
var nbname = name_and_ext[0]; | ||||
|
r13322 | var file_ext = name_and_ext[1]; | ||
|
r13121 | if (file_ext === '.ipynb') { | ||
|
r6838 | var item = that.new_notebook_item(0); | ||
that.add_name_input(nbname, item); | ||||
// Store the notebook item in the reader so we can use it later | ||||
// to know which item it belongs to. | ||||
$(reader).data('item', item); | ||||
reader.onload = function (event) { | ||||
var nbitem = $(event.target).data('item'); | ||||
that.add_notebook_data(event.target.result, nbitem); | ||||
that.add_upload_button(nbitem); | ||||
}; | ||||
|
r13115 | } else { | ||
var dialog = 'Uploaded notebooks must be .ipynb files'; | ||||
IPython.dialog.modal({ | ||||
title : 'Invalid file type', | ||||
body : dialog, | ||||
buttons : {'OK' : {'class' : 'btn-primary'}} | ||||
}); | ||||
|
r13063 | } | ||
|
r6838 | } | ||
|
r14926 | // Replace the file input form wth a clone of itself. This is required to | ||
// reset the form. Otherwise, if you upload a file, delete it and try to | ||||
// upload it again, the changed event won't fire. | ||||
var form = $('input.fileinput'); | ||||
form.replaceWith(form.clone(true)); | ||||
|
r6838 | return false; | ||
|
r13063 | }; | ||
|
r4488 | |||
|
r6195 | NotebookList.prototype.clear_list = function () { | ||
this.element.children('.list_item').remove(); | ||||
|
r7941 | }; | ||
|
r6195 | |||
|
r12988 | NotebookList.prototype.load_sessions = function(){ | ||
|
r12996 | var that = this; | ||
|
r12988 | var settings = { | ||
processData : false, | ||||
cache : false, | ||||
type : "GET", | ||||
dataType : "json", | ||||
|
r12996 | success : $.proxy(that.sessions_loaded, this) | ||
|
r12988 | }; | ||
var url = this.baseProjectUrl() + 'api/sessions'; | ||||
$.ajax(url,settings); | ||||
}; | ||||
NotebookList.prototype.sessions_loaded = function(data){ | ||||
|
r13063 | this.sessions = {}; | ||
|
r12988 | var len = data.length; | ||
|
r13063 | if (len > 0) { | ||
|
r12988 | for (var i=0; i<len; i++) { | ||
|
r13069 | var nb_path; | ||
|
r13063 | if (!data[i].notebook.path) { | ||
nb_path = data[i].notebook.name; | ||||
|
r12988 | } | ||
else { | ||||
|
r13063 | nb_path = utils.url_path_join( | ||
data[i].notebook.path, | ||||
data[i].notebook.name | ||||
); | ||||
|
r12988 | } | ||
|
r13063 | this.sessions[nb_path] = data[i].id; | ||
|
r12988 | } | ||
|
r13063 | } | ||
|
r12988 | this.load_list(); | ||
}; | ||||
|
r6195 | |||
|
r4488 | NotebookList.prototype.load_list = function () { | ||
|
r7881 | var that = this; | ||
|
r4488 | var settings = { | ||
processData : false, | ||||
cache : false, | ||||
type : "GET", | ||||
dataType : "json", | ||||
|
r7881 | success : $.proxy(this.list_loaded, this), | ||
|
r7941 | error : $.proxy( function(){ | ||
that.list_loaded([], null, null, {msg:"Error connecting to server."}); | ||||
},this) | ||||
|
r4488 | }; | ||
|
r7881 | |||
|
r13693 | var url = utils.url_join_encode( | ||
|
r13063 | this.baseProjectUrl(), | ||
'api', | ||||
'notebooks', | ||||
this.notebookPath() | ||||
); | ||||
|
r5106 | $.ajax(url, settings); | ||
|
r4488 | }; | ||
|
r7881 | NotebookList.prototype.list_loaded = function (data, status, xhr, param) { | ||
|
r7976 | var message = 'Notebook list empty.'; | ||
if (param !== undefined && param.msg) { | ||||
|
r13063 | message = param.msg; | ||
|
r7976 | } | ||
|
r15078 | var item = null; | ||
|
r4488 | var len = data.length; | ||
|
r6842 | this.clear_list(); | ||
|
r13063 | if (len === 0) { | ||
|
r15078 | var item = this.new_notebook_item(0); | ||
var span12 = item.children().first(); | ||||
span12.empty(); | ||||
span12.append($('<div style="margin:auto;text-align:center;color:grey"/>').text(message)) | ||||
|
r6857 | } | ||
|
r15071 | var path = this.notebookPath(); | ||
var offset = 0; | ||||
if (path !== '') { | ||||
|
r15078 | item = this.new_notebook_item(0); | ||
|
r15071 | this.add_dir(path, '..', item); | ||
offset = 1; | ||||
} | ||||
|
r4488 | for (var i=0; i<len; i++) { | ||
|
r15071 | if (data[i].type === 'directory') { | ||
var name = data[i].name; | ||||
|
r15078 | item = this.new_notebook_item(i+offset); | ||
|
r15071 | this.add_dir(path, name, item); | ||
|
r11644 | } else { | ||
|
r15071 | var name = data[i].name; | ||
var nbname = utils.splitext(name)[0]; | ||||
|
r15078 | item = this.new_notebook_item(i+offset); | ||
|
r15071 | this.add_link(path, nbname, item); | ||
name = utils.url_path_join(path, name); | ||||
if(this.sessions[name] === undefined){ | ||||
this.add_delete_button(item); | ||||
} else { | ||||
this.add_shutdown_button(item,this.sessions[name]); | ||||
} | ||||
|
r5200 | } | ||
|
r13063 | } | ||
|
r4491 | }; | ||
|
r4490 | |||
|
r4491 | |||
NotebookList.prototype.new_notebook_item = function (index) { | ||||
|
r10919 | var item = $('<div/>').addClass("list_item").addClass("row-fluid"); | ||
|
r10891 | // item.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix'); | ||
// item.css('border-top-style','none'); | ||||
|
r10919 | item.append($("<div/>").addClass("span12").append( | ||
|
r15071 | $('<i/>').addClass('item_icon') | ||
).append( | ||||
|
r10919 | $("<a/>").addClass("item_link").append( | ||
|
r10891 | $("<span/>").addClass("item_name") | ||
) | ||||
|
r10919 | ).append( | ||
$('<div/>').addClass("item_buttons btn-group pull-right") | ||||
)); | ||||
|
r10891 | |||
|
r4491 | if (index === -1) { | ||
|
r4490 | this.element.append(item); | ||
|
r4491 | } else { | ||
this.element.children().eq(index).after(item); | ||||
|
r4488 | } | ||
|
r4491 | return item; | ||
}; | ||||
|
r15071 | NotebookList.prototype.add_dir = function (path, name, item) { | ||
item.data('name', name); | ||||
item.data('path', path); | ||||
item.find(".item_name").text(name); | ||||
item.find(".item_icon").addClass('icon-folder-open'); | ||||
item.find("a.item_link") | ||||
.attr('href', | ||||
utils.url_join_encode( | ||||
this.baseProjectUrl(), | ||||
"tree", | ||||
path, | ||||
name | ||||
) | ||||
); | ||||
}; | ||||
|
r12988 | NotebookList.prototype.add_link = function (path, nbname, item) { | ||
|
r4491 | item.data('nbname', nbname); | ||
|
r12988 | item.data('path', path); | ||
|
r15071 | item.find(".item_name").text(nbname + '.ipynb'); | ||
item.find(".item_icon").addClass('icon-book'); | ||||
|
r10919 | item.find("a.item_link") | ||
|
r13063 | .attr('href', | ||
|
r13693 | utils.url_join_encode( | ||
|
r13063 | this.baseProjectUrl(), | ||
"notebooks", | ||||
|
r13693 | path, | ||
|
r13063 | nbname + ".ipynb" | ||
) | ||||
).attr('target','_blank'); | ||||
|
r4491 | }; | ||
NotebookList.prototype.add_name_input = function (nbname, item) { | ||||
item.data('nbname', nbname); | ||||
|
r15071 | item.find(".item_icon").addClass('icon-book'); | ||
|
r10919 | item.find(".item_name").empty().append( | ||
|
r10896 | $('<input/>') | ||
.addClass("nbname_input") | ||||
.attr('value', nbname) | ||||
.attr('size', '30') | ||||
.attr('type', 'text') | ||||
|
r4491 | ); | ||
}; | ||||
NotebookList.prototype.add_notebook_data = function (data, item) { | ||||
|
r13072 | item.data('nbdata', data); | ||
|
r4491 | }; | ||
|
r12988 | NotebookList.prototype.add_shutdown_button = function (item, session) { | ||
|
r6842 | var that = this; | ||
|
r15075 | var shutdown_button = $("<button/>").text("Shutdown").addClass("btn btn-mini btn-danger"). | ||
|
r6842 | click(function (e) { | ||
var settings = { | ||||
processData : false, | ||||
cache : false, | ||||
type : "DELETE", | ||||
dataType : "json", | ||||
|
r12996 | success : function () { | ||
|
r12988 | that.load_sessions(); | ||
|
r6842 | } | ||
}; | ||||
|
r13693 | var url = utils.url_join_encode( | ||
|
r13063 | that.baseProjectUrl(), | ||
'api/sessions', | ||||
session | ||||
); | ||||
|
r6842 | $.ajax(url, settings); | ||
|
r10891 | return false; | ||
|
r6842 | }); | ||
|
r10891 | // var new_buttons = item.find('a'); // shutdown_button; | ||
|
r14634 | item.find(".item_buttons").text("").append(shutdown_button); | ||
|
r6842 | }; | ||
|
r4491 | NotebookList.prototype.add_delete_button = function (item) { | ||
|
r10891 | var new_buttons = $('<span/>').addClass("btn-group pull-right"); | ||
|
r9787 | var notebooklist = this; | ||
|
r10936 | var delete_button = $("<button/>").text("Delete").addClass("btn btn-mini"). | ||
|
r4491 | click(function (e) { | ||
// $(this) is the button that was clicked. | ||||
var that = $(this); | ||||
// We use the nbname and notebook_id from the parent notebook_item element's | ||||
// data because the outer scopes values change as we iterate through the loop. | ||||
|
r6195 | var parent_item = that.parents('div.list_item'); | ||
|
r4491 | var nbname = parent_item.data('nbname'); | ||
|
r10921 | var message = 'Are you sure you want to permanently delete the notebook: ' + nbname + '?'; | ||
IPython.dialog.modal({ | ||||
title : "Delete notebook", | ||||
body : message, | ||||
|
r4491 | buttons : { | ||
|
r10921 | Delete : { | ||
class: "btn-danger", | ||||
click: function() { | ||||
var settings = { | ||||
processData : false, | ||||
cache : false, | ||||
type : "DELETE", | ||||
dataType : "json", | ||||
success : function (data, status, xhr) { | ||||
parent_item.remove(); | ||||
} | ||||
}; | ||||
|
r13693 | var url = utils.url_join_encode( | ||
|
r13063 | notebooklist.baseProjectUrl(), | ||
'api/notebooks', | ||||
notebooklist.notebookPath(), | ||||
|
r13693 | nbname + '.ipynb' | ||
|
r13063 | ); | ||
|
r10921 | $.ajax(url, settings); | ||
} | ||||
|
r4491 | }, | ||
|
r10921 | Cancel : {} | ||
|
r4491 | } | ||
}); | ||||
|
r10891 | return false; | ||
|
r4491 | }); | ||
|
r14634 | item.find(".item_buttons").text("").append(delete_button); | ||
|
r4491 | }; | ||
NotebookList.prototype.add_upload_button = function (item) { | ||||
var that = this; | ||||
|
r10896 | var upload_button = $('<button/>').text("Upload") | ||
.addClass('btn btn-primary btn-mini upload_button') | ||||
.click(function (e) { | ||||
|
r13074 | var nbname = item.find('.item_name > input').val(); | ||
|
r14921 | var path = that.notebookPath(); | ||
|
r4491 | var nbdata = item.data('nbdata'); | ||
|
r13072 | var content_type = 'application/json'; | ||
var model = { | ||||
content : JSON.parse(nbdata), | ||||
}; | ||||
|
r4491 | var settings = { | ||
processData : false, | ||||
cache : false, | ||||
|
r13322 | type : 'PUT', | ||
|
r4493 | dataType : 'json', | ||
|
r13072 | data : JSON.stringify(model), | ||
|
r4493 | headers : {'Content-Type': content_type}, | ||
|
r4491 | success : function (data, status, xhr) { | ||
|
r14921 | that.add_link(path, nbname, item); | ||
|
r4491 | that.add_delete_button(item); | ||
|
r13072 | }, | ||
error : function (data, status, xhr) { | ||||
console.log(data, status); | ||||
|
r4491 | } | ||
}; | ||||
|
r13693 | var url = utils.url_join_encode( | ||
|
r13063 | that.baseProjectUrl(), | ||
|
r13072 | 'api/notebooks', | ||
|
r13074 | that.notebookPath(), | ||
nbname + '.ipynb' | ||||
|
r13063 | ); | ||
|
r5106 | $.ajax(url, settings); | ||
|
r10891 | return false; | ||
|
r4491 | }); | ||
|
r10896 | var cancel_button = $('<button/>').text("Cancel") | ||
.addClass("btn btn-mini") | ||||
.click(function (e) { | ||||
console.log('cancel click'); | ||||
|
r4491 | item.remove(); | ||
|
r10891 | return false; | ||
|
r4491 | }); | ||
|
r10896 | item.find(".item_buttons").empty() | ||
|
r10891 | .append(upload_button) | ||
.append(cancel_button); | ||||
|
r4488 | }; | ||
|
r13017 | NotebookList.prototype.new_notebook = function(){ | ||
var path = this.notebookPath(); | ||||
|
r13075 | var base_project_url = this.baseProjectUrl(); | ||
|
r13017 | var settings = { | ||
processData : false, | ||||
cache : false, | ||||
type : "POST", | ||||
dataType : "json", | ||||
|
r13075 | async : false, | ||
success : function (data, status, xhr) { | ||||
|
r13063 | var notebook_name = data.name; | ||
window.open( | ||||
|
r13693 | utils.url_join_encode( | ||
|
r13075 | base_project_url, | ||
|
r13063 | 'notebooks', | ||
|
r13069 | path, | ||
|
r13063 | notebook_name), | ||
'_blank' | ||||
); | ||||
|
r13075 | } | ||
|
r13017 | }; | ||
|
r13693 | var url = utils.url_join_encode( | ||
|
r13075 | base_project_url, | ||
|
r13063 | 'api/notebooks', | ||
path | ||||
); | ||||
$.ajax(url, settings); | ||||
|
r13017 | }; | ||
|
r13016 | |||
|
r4488 | IPython.NotebookList = NotebookList; | ||
return IPython; | ||||
}(IPython)); | ||||