/static/scripts/galaxy.panels.js

  1!function( exports, $ ){
  2
  3"use strict"
  4
  5var ensure_dd_helper = function () {
  6    // Insert div that covers everything when dragging the borders
  7    if ( $( "#DD-helper" ).length == 0 ) {
  8        $( "<div id='DD-helper'/>" ).appendTo( "body" ).hide();
  9    }
 10}
 11
 12// Panels
 13
 14var MIN_PANEL_WIDTH = 160,
 15    MAX_PANEL_WIDTH = 800;
 16
 17var Panel = function( options ) {
 18    this.$panel = options.panel;
 19    this.$center = options.center;
 20    this.$drag = options.drag;
 21    this.$toggle = options.toggle;
 22    this.left = !options.right;
 23    this.hidden = false;
 24    this.hidden_by_tool = false;
 25    this.saved_size = null;
 26    this.init();
 27}
 28$.extend( Panel.prototype, {
 29    resize: function( x ) {
 30        this.$panel.css( "width", x );
 31        if ( this.left ) {
 32            this.$center.css( "left", x );
 33        } else {
 34            this.$center.css( "right", x );
 35        }
 36        // ie7-recalc.js
 37        if ( document.recalc ) { document.recalc(); }
 38    },
 39    do_toggle: function() {
 40        var self = this;
 41        if ( this.hidden ) {
 42            this.$toggle.removeClass( "hidden" );
 43            if ( this.left ) {
 44                this.$panel.css( "left", - this.saved_size ).show().animate( { "left": 0 }, "fast", function () {
 45                    self.resize( self.saved_size );
 46                });
 47            } else {
 48                this.$panel.css( "right", - this.saved_size ).show().animate( { "right": 0 }, "fast", function () {
 49                    self.resize( self.saved_size );
 50                });
 51            }
 52            self.hidden = false;
 53        } else {
 54            self.saved_size = this.$panel.width();
 55            if ( document.recalc ) { document.recalc(); }
 56            // Hide border
 57            if ( this.left ) {
 58                this.$panel.animate( { left: - this.saved_size }, "fast" );
 59            } else {
 60                this.$panel.animate( { right: - this.saved_size }, "fast" );
 61            }
 62            // self.resize(0);
 63            if ( this.left ) {
 64                this.$center.css( "left", 0 );
 65            } else {
 66                this.$center.css( "right", 0 );
 67            }
 68
 69            self.hidden = true;
 70            self.$toggle.addClass( "hidden" );
 71        }
 72        this.hidden_by_tool = false;
 73    },
 74    handle_minwidth_hint: function( x ) {
 75        var space = this.$center.width() - ( this.hidden ? this.saved_size : 0 );
 76        if ( space < x )
 77        {
 78            if ( ! this.hidden ) {
 79                this.do_toggle();
 80                this.hidden_by_tool = true;
 81            }
 82        } else {
 83            if ( this.hidden_by_tool ) {
 84                this.do_toggle();
 85                this.hidden_by_tool = false;
 86            }
 87        }
 88    },
 89    force_panel: function( op ) {
 90        if ( ( this.hidden && op == 'show' ) || ( ! this.hidden && op == 'hide' ) ) { 
 91            this.do_toggle();
 92        }
 93    },
 94    init: function() {
 95        var self = this;
 96        // Pull the collapse element out to body level so it is visible when panel is hidden
 97        this.$toggle.remove().appendTo( "body" );
 98        // Resizing using drag element
 99        this.$drag.on( "dragstart", function( e, d ) {
100            $( '#DD-helper' ).show();
101            d.width = self.$panel.width();
102        }).on( "dragend", function() {  
103            $( '#DD-helper' ).hide();
104        }).on( "drag", function( e, d ) {
105            var x;
106            if ( self.left ) {
107                x = d.width + d.deltaX;
108            } else {
109                x = d.width - d.deltaX;
110            }
111            // Limit range
112            x = Math.min( MAX_PANEL_WIDTH, Math.max( MIN_PANEL_WIDTH, x ) );
113            self.resize( x );
114        });
115        // Hide/show using toggle element
116        self.$toggle.on( "click", function() { self.do_toggle(); } );
117    }
118});
119  
120// Modal dialog boxes
121var Modal = function( options ) {
122    this.$overlay = options.overlay;
123    this.$dialog = options.dialog;
124    this.$header = this.$dialog.find( ".modal-header" );
125    this.$body = this.$dialog.find( ".modal-body" );
126    this.$footer = this.$dialog.find( ".modal-footer" );
127    this.$backdrop = options.backdrop;
128    // Close button
129    this.$header.find( ".close" ).on( "click", $.proxy( this.hide, this ) );
130}
131$.extend( Modal.prototype, {
132    setContent: function( options ) {
133        this.$header.hide();
134        // Title
135        if ( options.title ) {
136            this.$header.find( ".title" ).html( options.title );
137            this.$header.show();
138        }
139        if ( options.closeButton ) {
140            this.$header.find( ".close" ).show();
141            this.$header.show();
142        } else {
143            this.$header.find( ".close" ).hide();
144        }
145        // Buttons
146        this.$footer.hide();
147        var $buttons = this.$footer.find( ".buttons" ).html( "" );
148        if ( options.buttons ) {
149            $.each( options.buttons, function( name, value ) {
150                 $buttons.append( $( '<button></button> ' ).text( name ).click( value ) ).append( " " );
151            });
152            this.$footer.show();
153        }
154        var $extraButtons = this.$footer.find( ".extra_buttons" ).html( "" );
155        if ( options.extra_buttons ) {
156            $.each( options.extra_buttons, function( name, value ) {
157                 $extraButtons.append( $( '<button></button>' ).text( name ).click( value ) ).append( " " );
158            });
159            this.$footer.show();
160        }
161        // Body
162        var body = options.body;
163        if ( body == "progress" ) {
164            body = $("<div class='progress progress-striped active'><div class='progress-bar' style='width: 100%'></div></div>"); 
165        }
166        this.$body.html( body );
167    },
168    show: function( options, callback ) {
169        if ( ! this.$dialog.is( ":visible" ) ) {
170            if ( options.backdrop) {
171                this.$backdrop.addClass( "in" );
172            } else {
173                this.$backdrop.removeClass( "in" );
174            }
175            this.$overlay.show();
176            this.$dialog.show();
177            this.$overlay.addClass("in");
178            // Fix min-width so that modal cannot shrink considerably if new content is loaded.
179            this.$body.css( "min-width", this.$body.width() );
180            // Set max-height so that modal does not exceed window size and is in middle of page.
181            // TODO: this could perhaps be handled better using CSS.
182            this.$body.css( "max-height", 
183                            $(window).height() - 
184                            this.$footer.outerHeight() - 
185                            this.$header.outerHeight() -
186                            parseInt( this.$dialog.css( "padding-top" ), 10 ) - 
187                            parseInt( this.$dialog.css( "padding-bottom" ), 10 ) 
188                            );
189        }
190        // Callback on init
191        if ( callback ) {
192            callback();
193        }
194    },
195    hide: function() {
196        var modal = this;
197        modal.$dialog.fadeOut( function() {
198           modal.$overlay.hide();
199           modal.$backdrop.removeClass( "in" );
200           modal.$body.children().remove();
201           // Clear min-width to allow for modal to take size of new body.
202           modal.$body.css( "min-width", undefined );
203       });
204   }
205});
206
207var modal;
208
209$(function(){
210   modal = new Modal( { overlay: $("#top-modal"), dialog: $("#top-modal-dialog"), backdrop: $("#top-modal-backdrop") } );
211});
212
213// Backward compatibility
214function hide_modal() {
215    modal.hide();
216}
217function show_modal( title, body, buttons, extra_buttons, init_fn ) {
218    modal.setContent( { title: title, body: body, buttons: buttons, extra_buttons: extra_buttons } );
219    modal.show( { backdrop: true }, init_fn );
220}
221function show_message( title, body, buttons, extra_buttons, init_fn ) {
222    modal.setContent( { title: title, body: body, buttons: buttons, extra_buttons: extra_buttons } );
223    modal.show( { backdrop: false }, init_fn  );
224}
225function show_in_overlay( options ) {
226    var width = options.width || '600';
227    var height = options.height || '400';
228    var scroll = options.scroll || 'auto';
229    $("#overlay-background").bind( "click.overlay", function() {
230        hide_modal();
231        $("#overlay-background").unbind( "click.overlay" );
232    });
233    modal.setContent( { closeButton: true, title: "&nbsp;", body: $( "<div style='margin: -5px;'><iframe style='margin: 0; padding: 0;' src='" + options.url + "' width='" + width + "' height='" + height + "' scrolling='" + scroll + "' frameborder='0'></iframe></div>" ) } );
234    modal.show( { backdrop: true } );
235}
236
237function user_changed( user_email, is_admin ) {
238    if ( user_email ) {
239        $(".loggedin-only").show();
240        $(".loggedout-only").hide();
241        $("#user-email").text( user_email );
242        if ( is_admin ) {
243            $(".admin-only").show();
244        }
245    } else {
246        $(".loggedin-only").hide();
247        $(".loggedout-only").show();
248        $(".admin-only").hide();
249    }
250}
251
252// Masthead dropdown menus
253$(function() {
254    var $dropdowns = $("#masthead ul.nav > li.dropdown > .dropdown-menu");
255    $("body").on( "click.nav_popups", function( e ) {
256        $dropdowns.hide();
257        $("#DD-helper").hide();
258        // If the target is in the menu, treat normally
259        if ( $(e.target).closest( "#masthead ul.nav > li.dropdown > .dropdown-menu" ).length ) {
260            return;
261        }
262        // Otherwise, was the click in a tab
263        var $clicked = $(e.target).closest( "#masthead ul.nav > li.dropdown" );
264        if ( $clicked.length ) {
265            $("#DD-helper").show();
266            $clicked.children( ".dropdown-menu" ).show();
267            e.preventDefault();
268        }
269    });
270});
271
272// Exports
273exports.ensure_dd_helper = ensure_dd_helper;
274exports.Panel = Panel;
275exports.Modal = Modal;
276exports.hide_modal = hide_modal;
277exports.show_modal = show_modal;
278exports.show_message = show_message;
279exports.show_in_overlay = show_in_overlay;
280exports.user_changed = user_changed;
281
282}( window, window.jQuery );