From 048561d282d32373e4432edcccb54fe963eb6f95 Mon Sep 17 00:00:00 2001 From: guerler Date: Fri, 18 Dec 2015 13:55:19 -0500 Subject: [PATCH] Avoid duplicate upload entries, revise modals, add tests Revise styles Add more tests --- client/galaxy/scripts/layout/page.js | 1 + client/galaxy/scripts/mvc/ui/ui-modal.js | 286 +++++++++--------- client/galaxy/scripts/utils/uploadbox.js | 27 +- client/galaxy/style/less/ui.less | 26 ++ static/maps/layout/page.js.map | 2 +- static/maps/mvc/ui/ui-modal.js.map | 2 +- static/maps/utils/uploadbox.js.map | 2 +- static/scripts/bundled/analysis.bundled.js | 8 +- .../scripts/bundled/analysis.bundled.js.map | 2 +- static/scripts/bundled/libs.bundled.js | 4 +- static/scripts/bundled/libs.bundled.js.map | 2 +- static/scripts/layout/page.js | 2 +- static/scripts/mvc/ui/ui-modal.js | 2 +- static/scripts/utils/uploadbox.js | 2 +- static/style/blue/base.css | 2 +- test/qunit/test-app.js | 1 + test/qunit/tests/modal_dialog_tests.html | 10 + test/qunit/tests/modal_dialog_tests.js | 87 ++++++ 18 files changed, 293 insertions(+), 175 deletions(-) create mode 100644 test/qunit/tests/modal_dialog_tests.html create mode 100644 test/qunit/tests/modal_dialog_tests.js diff --git a/client/galaxy/scripts/layout/page.js b/client/galaxy/scripts/layout/page.js index f11c6b88500..a0b7dc9d56c 100644 --- a/client/galaxy/scripts/layout/page.js +++ b/client/galaxy/scripts/layout/page.js @@ -43,6 +43,7 @@ var PageLayoutView = Backbone.View.extend( BASE_MVC.LoggableMixin ).extend({ this.log( this + '.render:' ); this.$el.attr( 'scroll', 'no' ); this.$el.html( this.template( this.options ) ); + this.$el.append( this.modal.$el ); //TODO: no render on masthead, needs init each time Galaxy.masthead = this.masthead = new MASTHEAD.GalaxyMasthead( _.extend( this.options.config, { diff --git a/client/galaxy/scripts/mvc/ui/ui-modal.js b/client/galaxy/scripts/mvc/ui/ui-modal.js index 4a2fc91af43..c1a8047300c 100644 --- a/client/galaxy/scripts/mvc/ui/ui-modal.js +++ b/client/galaxy/scripts/mvc/ui/ui-modal.js @@ -1,13 +1,10 @@ define([], function() { - var View = Backbone.View.extend({ - - // base element - elMain: 'body', - - // defaults options - optionsDefault: { + // defaults + optionsDefault : { + container : 'body', title : 'ui-modal', + cls : 'ui-modal', body : '', backdrop : true, height : null, @@ -21,177 +18,164 @@ var View = Backbone.View.extend({ buttonList: {}, // initialize - initialize : function(options) { - if (options){ - this._create(options); + initialize: function( options ) { + this.setElement( this._template() ); + this.options = _.defaults( options || {}, this.optionsDefault ); + $( this.options.container ).prepend( this.el ); + + // link elements + this.$header = this.$( '.modal-header' ); + this.$dialog = this.$( '.modal-dialog' ); + this.$body = this.$( '.modal-body' ); + this.$footer = this.$( '.modal-footer' ); + this.$backdrop = this.$( '.modal-backdrop' ); + this.$buttons = this.$( '.buttons' ); + + // optional render + options && this.render(); + }, + + /* + Displays modal + */ + show: function( options ) { + if ( options ) { + this.options = _.defaults( options, this.optionsDefault ); + this.render(); + } + if ( !this.visible ) { + this.visible = true; + this.$el.fadeIn( 'fast' ); } }, - // adds and displays a new frame/window - show: function(options) { - // create - this.initialize(options); - - // fix height - 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); - } - - // fix width - if (this.options.width) { - this.$dialog.css('width', this.options.width); - } - - // show - if (this.visible) { - this.$el.show(); - } else { - this.$el.fadeIn('fast'); - } - - // set visible flag - this.visible = true; - }, - - // hide - hide: function( cancelled ) { + /** + * Hide modal + */ + hide: function( canceled ) { this.visible = false; - this.$el.fadeOut('fast'); - if (this.options.closing_callback){ - this.options.closing_callback( cancelled ); + this.$el.fadeOut( 'fast' ); + this.options.closing_callback && this.options.closing_callback( canceled ); + }, + + /** + * Render modal + */ + render: function() { + var self = this; + if (this.options.body == 'progress') { + this.options.body = $( '
' + + '
' + + '
' ); + } + + // fix main content + this.$el.removeClass().addClass( 'modal' ).addClass( this.options.cls ); + this.$header.find( '.title' ).html( this.options.title ); + this.$body.html( this.options.body ); + + // append buttons + this.$buttons.empty(); + this.buttonList = {}; + if ( this.options.buttons ) { + var counter = 0; + $.each( this.options.buttons, function( name, callback ) { + var $button = $( '').text(name).click(value)).append(" "); - self.buttonList[name] = button_id; - }); - } else { - // hide footer - this.$footer.hide(); - } - - // append to main element - $(this.elMain).append($(this.el)); - - // bind additional closing events - if (this.options.closing_events) { - // bind the ESC key to hide() function - $(document).on('keyup.ui-modal', function(e) { - if (e.keyCode == 27) { - self.hide( true ); - } - }); - - // hide modal if background is clicked - this.$el.find('.modal-backdrop').on('click', function() { self.hide( true ); }); - } - - // removes the default separator line - if (!this.options.title_separator) { - this.$('.modal-header').css({ 'border': 'none', 'padding-bottom': '0px' }); - } - }, - - // fill regular modal template - _template: function(title) { - return '