/static/scripts/galaxy.panels.js
JavaScript | 282 lines | 244 code | 14 blank | 24 comment | 45 complexity | e9e1aea81f53ef5801d8435d1b6ff267 MD5 | raw file
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: " ", 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 );