mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-10-25 00:12:08 +08:00
galaxy.modal refactoring; API documentation; folders API refactoring and implementation; libraries API refactoring
This commit is contained in:
Martin Cech
@@ -23,6 +23,11 @@ define([
|
||||
urlRoot: '/api/libraries'
|
||||
});
|
||||
|
||||
// FOLDER AS MODEL
|
||||
var FolderAsModel = Backbone.Model.extend({
|
||||
urlRoot: '/api/folders'
|
||||
});
|
||||
|
||||
// LIBRARIES
|
||||
var Libraries = Backbone.Collection.extend({
|
||||
url: '/api/libraries',
|
||||
@@ -34,7 +39,7 @@ define([
|
||||
urlRoot : '/api/libraries/datasets'
|
||||
})
|
||||
|
||||
// FOLDER
|
||||
// FOLDER AS COLLECTION
|
||||
var Folder = Backbone.Collection.extend({
|
||||
model: Item
|
||||
})
|
||||
@@ -316,7 +321,7 @@ var FolderContentView = Backbone.View.extend({
|
||||
'click #toolbtn_bulk_import' : 'modalBulkImport',
|
||||
'click #toolbtn_dl' : 'bulkDownload',
|
||||
'click .library-dataset' : 'showDatasetDetails',
|
||||
'click #toolbtn_create_folder' : 'createFolderModal',
|
||||
'click #toolbtn_create_folder' : 'createFolderFromModal',
|
||||
'click .btn_open_folder' : 'navigateToFolder'
|
||||
},
|
||||
|
||||
@@ -407,15 +412,15 @@ var FolderContentView = Backbone.View.extend({
|
||||
// make modal
|
||||
var self = this;
|
||||
this.modal = new mod_modal.GalaxyModal({
|
||||
destructible : true,
|
||||
title : 'Dataset Details',
|
||||
body : template,
|
||||
buttons : {
|
||||
'Import' : function() { self.importCurrentIntoHistory() },
|
||||
'Download' : function() { self.downloadCurrent() },
|
||||
'Close' : function() { self.modal.hide(); $('.modal').remove(); self.modal = null; } // TODO refill nicely modal with data
|
||||
'Close' : function() { self.modal.hideOrDestroy; self.modal = null; }
|
||||
}
|
||||
});
|
||||
this.modal.bindEvents(event);
|
||||
|
||||
$(".peek").html(item.get("peek"));
|
||||
var history_footer_tmpl = _.template(this.templateHistorySelectInModal(), {histories : histories.models});
|
||||
@@ -426,6 +431,7 @@ var FolderContentView = Backbone.View.extend({
|
||||
$(this.modal.elMain).find('#dataset_import_single').val(self.lastSelectedHistory);
|
||||
}
|
||||
|
||||
this.modal.bindEvents();
|
||||
// show the prepared modal
|
||||
this.modal.show();
|
||||
},
|
||||
@@ -563,14 +569,15 @@ var FolderContentView = Backbone.View.extend({
|
||||
// make modal
|
||||
var history_modal_tmpl = _.template(self.templateBulkImportInModal(), {histories : histories.models});
|
||||
self.modal = new mod_modal.GalaxyModal({
|
||||
destructible : true,
|
||||
title : 'Import into History',
|
||||
body : history_modal_tmpl,
|
||||
buttons : {
|
||||
'Import' : function() {self.importAllIntoHistory()},
|
||||
'Close' : function() {self.modal.hide(); $('.modal').remove(); self.modal = null;}
|
||||
'Close' : function() {self.modal.hideOrDestroy; self.modal = null;}
|
||||
}
|
||||
});
|
||||
self.modal.bindEvents(event);
|
||||
self.modal.bindEvents();
|
||||
// show the prepared modal
|
||||
self.modal.show();
|
||||
}
|
||||
@@ -693,9 +700,75 @@ var FolderContentView = Backbone.View.extend({
|
||||
},
|
||||
|
||||
// shows modal for creating folder
|
||||
createFolderModal: function(){
|
||||
mod_toastr.info('This will create folder...in the future');
|
||||
}
|
||||
createFolderFromModal: function(){
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// create modal
|
||||
var self = this;
|
||||
this.modal = new mod_modal.GalaxyModal({
|
||||
destructible : true,
|
||||
title : 'Create New Folder',
|
||||
body : this.template_new_folder(),
|
||||
buttons : {
|
||||
'Create' : function() {self.create_new_folder_event()},
|
||||
'Close' : function() {self.modal.destroy(); self.modal = null;}
|
||||
}
|
||||
});
|
||||
this.modal.bindEvents();
|
||||
// show prepared modal
|
||||
this.modal.show();
|
||||
},
|
||||
|
||||
// create the new folder from modal
|
||||
create_new_folder_event: function(){
|
||||
var folderDetails = this.serialize_new_folder();
|
||||
if (this.validate_new_folder(folderDetails)){
|
||||
var folder = new FolderAsModel();
|
||||
folder.url = folder.urlRoot + '/F2fdbd5c5858e78fb' //load real ID
|
||||
var self = this;
|
||||
folder.save(folderDetails, {
|
||||
success: function (folder) {
|
||||
self.modal.destroy();
|
||||
mod_toastr.success('Folder created');
|
||||
self.render({id: 'F2fdbd5c5858e78fb'}); //put real id
|
||||
},
|
||||
error: function(){
|
||||
mod_toastr.error('An error occured :(');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
mod_toastr.error('Folder\'s name is missing');
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// serialize data from the form
|
||||
serialize_new_folder : function(){
|
||||
return {
|
||||
name: $("input[name='Name']").val(),
|
||||
description: $("input[name='Description']").val()
|
||||
};
|
||||
},
|
||||
|
||||
// validate new library info
|
||||
validate_new_folder: function(folderDetails){
|
||||
return folderDetails.name !== '';
|
||||
},
|
||||
|
||||
// template for new library modal
|
||||
template_new_folder: function(){
|
||||
tmpl_array = [];
|
||||
|
||||
tmpl_array.push('<div id="new_folder_modal">');
|
||||
tmpl_array.push('<form>');
|
||||
tmpl_array.push('<input type="text" name="Name" value="" placeholder="Name">');
|
||||
tmpl_array.push('<input type="text" name="Description" value="" placeholder="Description">');
|
||||
tmpl_array.push('</form>');
|
||||
tmpl_array.push('</div>');
|
||||
|
||||
return tmpl_array.join('');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@@ -786,16 +859,16 @@ var GalaxyLibraryview = Backbone.View.extend({
|
||||
|
||||
// create modal
|
||||
var self = this;
|
||||
this.modal = new mod_modal.GalaxyModal(
|
||||
{
|
||||
this.modal = new mod_modal.GalaxyModal({
|
||||
destructible : true,
|
||||
title : 'Create New Library',
|
||||
body : this.template_new_library(),
|
||||
buttons : {
|
||||
'Create' : function() {self.create_new_library_event()},
|
||||
'Close' : function() {self.modal.hide()}
|
||||
'Close' : function() {self.modal.hideOrDestroy(); self.modal = null;}
|
||||
}
|
||||
});
|
||||
|
||||
this.modal.bindEvents();
|
||||
// show prepared modal
|
||||
this.modal.show();
|
||||
},
|
||||
@@ -808,7 +881,7 @@ var GalaxyLibraryview = Backbone.View.extend({
|
||||
var self = this;
|
||||
library.save(libraryDetails, {
|
||||
success: function (library) {
|
||||
self.modal.hide();
|
||||
self.modal.destroy();
|
||||
self.clear_library_modal();
|
||||
self.render();
|
||||
mod_toastr.success('Library created');
|
||||
|
||||
@@ -18,7 +18,9 @@ var GalaxyModal = Backbone.View.extend(
|
||||
},
|
||||
|
||||
// options
|
||||
options : {},
|
||||
options : {
|
||||
destructible: false // by default the modal cannot be removed by theself.destroy() method
|
||||
},
|
||||
|
||||
// initialize
|
||||
initialize : function(options) {
|
||||
@@ -27,16 +29,23 @@ var GalaxyModal = Backbone.View.extend(
|
||||
this.create(options);
|
||||
},
|
||||
|
||||
// bind the click-to-hide function
|
||||
bindEvents: function(event) {
|
||||
// bind the ESC key to hide() function
|
||||
$(document).on('keyup', function(event){
|
||||
if (event.keyCode == 27) { self.hide(); $('.modal').remove();}
|
||||
})
|
||||
// bind the 'click anywhere' to hide() function...
|
||||
$('html').on('click', function(event){
|
||||
hideOrDestroy: function(){
|
||||
if (this.options.destructible){
|
||||
self.destroy();
|
||||
} else {
|
||||
self.hide();
|
||||
$('.modal').remove();
|
||||
}
|
||||
},
|
||||
|
||||
// bind the click-to-hide function
|
||||
bindEvents: function() {
|
||||
// bind the ESC key to hideOrDestroy() function
|
||||
$(document).on('keyup', function(event){
|
||||
if (event.keyCode == 27) { self.hideOrDestroy() }
|
||||
})
|
||||
// bind the 'click anywhere' to hideOrDestroy() function...
|
||||
$('html').on('click', function(event){
|
||||
self.hideOrDestroy()
|
||||
})
|
||||
// ...but don't hide if the click is on modal content
|
||||
$('.modal-content').on('click', function(event){
|
||||
@@ -45,28 +54,20 @@ var GalaxyModal = Backbone.View.extend(
|
||||
},
|
||||
|
||||
// unbind the click-to-hide function
|
||||
unbindEvents: function(event){
|
||||
// bind the ESC key to hide() function
|
||||
unbindEvents: function(){
|
||||
// unbind the ESC key to hideOrDestroy() function
|
||||
$(document).off('keyup', function(event){
|
||||
if (event.keyCode == 27) { self.hide(); $('.modal').remove();}
|
||||
if (event.keyCode == 27) { self.hideOrDestroy() }
|
||||
})
|
||||
// unbind the 'click anywhere' to hide() function...
|
||||
// unbind the 'click anywhere' to hideOrDestroy() function...
|
||||
$('html').off('click', function(event){
|
||||
self.hide();
|
||||
$('.modal').remove();
|
||||
self.hideOrDestroy()
|
||||
})
|
||||
$('.modal-content').off('click', function(event){
|
||||
event.stopPropagation();
|
||||
})
|
||||
},
|
||||
|
||||
// destroy
|
||||
destroy : function(){
|
||||
this.hide();
|
||||
this.unbindEvents();
|
||||
$('.modal').remove();
|
||||
},
|
||||
|
||||
// adds and displays a new frame/window
|
||||
show: function(options) {
|
||||
// create
|
||||
@@ -102,6 +103,16 @@ var GalaxyModal = Backbone.View.extend(
|
||||
// set flag
|
||||
this.visible = false;
|
||||
this.unbindEvents();
|
||||
},
|
||||
|
||||
// destroy modal
|
||||
destroy: function(){
|
||||
// set flag
|
||||
this.visible = false;
|
||||
this.unbindEvents();
|
||||
|
||||
// remove
|
||||
this.$el.remove();
|
||||
},
|
||||
|
||||
// create
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
define([],function(){var a=Backbone.View.extend({elMain:"#everything",optionsDefault:{title:"galaxy-modal",body:"",backdrop:true,height:null,width:null},options:{},initialize:function(b){self=this;if(b){this.create(b)}},bindEvents:function(b){$(document).on("keyup",function(c){if(c.keyCode==27){self.hide();$(".modal").remove()}});$("html").on("click",function(c){self.hide();$(".modal").remove()});$(".modal-content").on("click",function(c){c.stopPropagation()})},unbindEvents:function(b){$(document).off("keyup",function(c){if(c.keyCode==27){self.hide();$(".modal").remove()}});$("html").off("click",function(c){self.hide();$(".modal").remove()});$(".modal-content").off("click",function(c){c.stopPropagation()})},destroy:function(){this.hide();this.unbindEvents();$(".modal").remove()},show:function(b){this.initialize(b);if(this.options.height){this.$body.css("height",this.options.height);this.$body.css("overflow","hidden")}else{this.$body.css("max-height",$(window).height()/2)}if(this.options.width){this.$dialog.css("width",this.options.width)}if(this.visible){this.$el.show()}else{this.$el.fadeIn("fast")}this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false;this.unbindEvents()},create:function(c){this.options=_.defaults(c,this.optionsDefault);if(this.options.body=="progress"){this.options.body=$('<div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:100%"></div></div>')}if(this.$el){this.$el.remove()}this.setElement(this.template(this.options.title));this.$dialog=(this.$el).find(".modal-dialog");this.$body=(this.$el).find(".modal-body");this.$footer=(this.$el).find(".modal-footer");this.$buttons=(this.$el).find(".buttons");this.$backdrop=(this.$el).find(".modal-backdrop");this.$body.html(this.options.body);if(!this.options.backdrop){this.$backdrop.removeClass("in")}if(this.options.buttons){var b=this;$.each(this.options.buttons,function(d,e){b.$buttons.append($('<button id="'+String(d).toLowerCase()+'"></button>').text(d).click(e)).append(" ")})}else{this.$footer.hide()}$(this.elMain).append($(this.el))},enableButton:function(b){this.$buttons.find("#"+String(b).toLowerCase()).prop("disabled",false)},disableButton:function(b){this.$buttons.find("#"+String(b).toLowerCase()).prop("disabled",true)},hideButton:function(b){this.$buttons.find("#"+String(b).toLowerCase()).hide()},showButton:function(b){this.$buttons.find("#"+String(b).toLowerCase()).show()},scrollTop:function(){return this.$body.scrollTop()},template:function(b){return'<div class="modal"><div class="modal-backdrop fade in" style="z-index: -1;"></div><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" style="display: none;">×</button><h4 class="title">'+b+'</h4></div><div class="modal-body"></div><div class="modal-footer"><div class="buttons" style="float: right;"></div></div></div</div></div>'}});return{GalaxyModal:a}});
|
||||
define([],function(){var a=Backbone.View.extend({elMain:"#everything",optionsDefault:{title:"galaxy-modal",body:"",backdrop:true,height:null,width:null},options:{destructible:false},initialize:function(b){self=this;if(b){this.create(b)}},hideOrDestroy:function(){if(this.options.destructible){self.destroy()}else{self.hide()}},bindEvents:function(){$(document).on("keyup",function(b){if(b.keyCode==27){self.hideOrDestroy()}});$("html").on("click",function(b){self.hideOrDestroy()});$(".modal-content").on("click",function(b){b.stopPropagation()})},unbindEvents:function(){$(document).off("keyup",function(b){if(b.keyCode==27){self.hideOrDestroy()}});$("html").off("click",function(b){self.hideOrDestroy()});$(".modal-content").off("click",function(b){b.stopPropagation()})},show:function(b){this.initialize(b);if(this.options.height){this.$body.css("height",this.options.height);this.$body.css("overflow","hidden")}else{this.$body.css("max-height",$(window).height()/2)}if(this.options.width){this.$dialog.css("width",this.options.width)}if(this.visible){this.$el.show()}else{this.$el.fadeIn("fast")}this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false;this.unbindEvents()},destroy:function(){this.visible=false;this.unbindEvents();this.$el.remove()},create:function(c){this.options=_.defaults(c,this.optionsDefault);if(this.options.body=="progress"){this.options.body=$('<div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:100%"></div></div>')}if(this.$el){this.$el.remove()}this.setElement(this.template(this.options.title));this.$dialog=(this.$el).find(".modal-dialog");this.$body=(this.$el).find(".modal-body");this.$footer=(this.$el).find(".modal-footer");this.$buttons=(this.$el).find(".buttons");this.$backdrop=(this.$el).find(".modal-backdrop");this.$body.html(this.options.body);if(!this.options.backdrop){this.$backdrop.removeClass("in")}if(this.options.buttons){var b=this;$.each(this.options.buttons,function(d,e){b.$buttons.append($('<button id="'+String(d).toLowerCase()+'"></button>').text(d).click(e)).append(" ")})}else{this.$footer.hide()}$(this.elMain).append($(this.el))},enableButton:function(b){this.$buttons.find("#"+String(b).toLowerCase()).prop("disabled",false)},disableButton:function(b){this.$buttons.find("#"+String(b).toLowerCase()).prop("disabled",true)},hideButton:function(b){this.$buttons.find("#"+String(b).toLowerCase()).hide()},showButton:function(b){this.$buttons.find("#"+String(b).toLowerCase()).show()},scrollTop:function(){return this.$body.scrollTop()},template:function(b){return'<div class="modal"><div class="modal-backdrop fade in" style="z-index: -1;"></div><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" style="display: none;">×</button><h4 class="title">'+b+'</h4></div><div class="modal-body"></div><div class="modal-footer"><div class="buttons" style="float: right;"></div></div></div</div></div>'}});return{GalaxyModal:a}});
|
||||
Reference in New Issue
Block a user