/static/scripts/galaxy.panels.js

https://bitbucket.org/cistrome/cistrome-harvard/ · JavaScript · 282 lines · 244 code · 14 blank · 24 comment · 45 complexity · e9e1aea81f53ef5801d8435d1b6ff267 MD5 · raw file

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