commit/galaxy-central: carlfeberhard: Client build: remove references to ui.js in client and templates; mv scripts/jq-plugins/ui to more generic/catch-all scripts/ui/
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/336a1e96bf51/ Changeset: 336a1e96bf51 User: carlfeberhard Date: 2014-12-09 18:52:24+00:00 Summary: Client build: remove references to ui.js in client and templates; mv scripts/jq-plugins/ui to more generic/catch-all scripts/ui/ Affected #: 73 files diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/jq-plugins/ui/fa-icon-button.js --- a/client/galaxy/scripts/jq-plugins/ui/fa-icon-button.js +++ /dev/null @@ -1,48 +0,0 @@ -(function (root, factory) { - if (typeof define === 'function' && define.amd) { - define([], factory); - } else { - root.faIconButton = factory(); - } - -}(this, function () { -//============================================================================ - /** Returns a jQuery object containing a clickable font-awesome button. - * options: - * tooltipConfig : option map for bootstrap tool tip - * classes : array of class names (will always be classed as icon-btn) - * disabled : T/F - add the 'disabled' class? - * title : tooltip/title string - * target : optional href target - * href : optional href - * faIcon : which font awesome icon to use - * onclick : function to call when the button is clicked - */ - var faIconButton = function( options ){ - options = options || {}; - options.tooltipConfig = options.tooltipConfig || { placement: 'bottom' }; - - options.classes = [ 'icon-btn' ].concat( options.classes || [] ); - if( options.disabled ){ - options.classes.push( 'disabled' ); - } - - var html = [ - '<a class="', options.classes.join( ' ' ), '"', - (( options.title )?( ' title="' + options.title + '"' ):( '' )), - (( !options.disabled && options.target )? ( ' target="' + options.target + '"' ):( '' )), - ' href="', (( !options.disabled && options.href )?( options.href ):( 'javascript:void(0);' )), '">', - // could go with something less specific here - like 'html' - '<span class="fa ', options.faIcon, '"></span>', - '</a>' - ].join( '' ); - var $button = $( html ).tooltip( options.tooltipConfig ); - if( _.isFunction( options.onclick ) ){ - $button.click( options.onclick ); - } - return $button; - }; - -//============================================================================ - return faIconButton; -})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/jq-plugins/ui/filter-control.js --- a/client/galaxy/scripts/jq-plugins/ui/filter-control.js +++ /dev/null @@ -1,204 +0,0 @@ -// from: https://raw.githubusercontent.com/umdjs/umd/master/jqueryPlugin.js -// Uses AMD or browser globals to create a jQuery plugin. -(function (factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['jquery'], factory); - } else { - // Browser globals - factory(jQuery); - } - -}(function ($) { - //============================================================================== - /** - * Template function that produces a bootstrap dropdown to replace the - * vanilla HTML select input. Pass in an array of options and an initial selection: - * $( '.my-div' ).append( dropDownSelect( [ 'option1', 'option2' ], 'option2' ); - * - * When the user changes the selected option a 'change.dropdown-select' event will - * fire with both the jq event and the new selection text as arguments. - * - * Get the currently selected choice using: - * var userChoice = $( '.my-div .dropdown-select .dropdown-select-selected' ).text(); - * - */ - function dropDownSelect( options, selected ){ - // replacement for vanilla select element using bootstrap dropdowns instead - selected = selected || (( !_.isEmpty( options ) )?( options[0] ):( '' )); - var $select = $([ - '<div class="dropdown-select btn-group">', - '<button type="button" class="btn btn-default">', - '<span class="dropdown-select-selected">' + selected + '</span>', - '</button>', - '</div>' - ].join( '\n' )); - - // if there's only one option, do not style/create as buttons, dropdown - use simple span - // otherwise, a dropdown displaying the current selection - if( options && options.length > 1 ){ - $select.find( 'button' ) - .addClass( 'dropdown-toggle' ).attr( 'data-toggle', 'dropdown' ) - .append( ' <span class="caret"></span>' ); - $select.append([ - '<ul class="dropdown-menu" role="menu">', - _.map( options, function( option ){ - return [ - '<li><a href="javascript:void(0)">', option, '</a></li>' - ].join( '' ); - }).join( '\n' ), - '</ul>' - ].join( '\n' )); - } - - // trigger 'change.dropdown-select' when a new selection is made using the dropdown - function selectThis( event ){ - var $this = $( this ), - $select = $this.parents( '.dropdown-select' ), - newSelection = $this.text(); - $select.find( '.dropdown-select-selected' ).text( newSelection ); - $select.trigger( 'change.dropdown-select', newSelection ); - } - - $select.find( 'a' ).click( selectThis ); - return $select; - } - - //============================================================================== - /** - * Creates a three part bootstrap button group (key, op, value) meant to - * allow the user control of filters (e.g. { key: 'name', op: 'contains', value: 'my_history' }) - * - * Each field uses a dropDownSelect (from ui.js) to allow selection - * (with the 'value' field appearing as an input when set to do so). - * - * Any change or update in any of the fields will trigger a 'change.filter-control' - * event which will be passed an object containing those fields (as the example above). - * - * Pass in an array of possible filter objects to control what the user can select. - * Each filter object should have: - * key : generally the attribute name on which to filter something - * ops : an array of 1 or more filter operations (e.g. [ 'is', '<', 'contains', '!=' ]) - * values (optional) : an array of possible values for the filter (e.g. [ 'true', 'false' ]) - * @example: - * $( '.my-div' ).filterControl({ - * filters : [ - * { key: 'name', ops: [ 'is exactly', 'contains' ] } - * { key: 'deleted', ops: [ 'is' ], values: [ 'true', 'false' ] } - * ] - * }); - * // after initialization, you can prog. get the current value using: - * $( '.my-div' ).filterControl( 'val' ) - * - */ - function FilterControl( element, options ){ - return this.init( element, options ); - } - /** the data key that this object will be stored under in the DOM element */ - FilterControl.prototype.DATA_KEY = 'filter-control'; - - /** parses options, sets up instance vars, and does initial render */ - FilterControl.prototype.init = function _init( element, options ){ - options = options || { filters: [] }; - this.$element = $( element ).addClass( 'filter-control btn-group' ); - this.options = jQuery.extend( true, {}, this.defaults, options ); - - this.currFilter = this.options.filters[0]; - return this.render(); - }; - - /** render (or re-render) the controls on the element */ - FilterControl.prototype.render = function _render(){ - this.$element.empty() - .append([ this._renderKeySelect(), this._renderOpSelect(), this._renderValueInput() ]); - return this; - }; - - /** render the key dropDownSelect, bind a change event to it, and return it */ - FilterControl.prototype._renderKeySelect = function __renderKeySelect(){ - var filterControl = this; - var keys = this.options.filters.map( function( filter ){ - return filter.key; - }); - this.$keySelect = dropDownSelect( keys, this.currFilter.key ) - .addClass( 'filter-control-key' ) - .on( 'change.dropdown-select', function( event, selection ){ - filterControl.currFilter = _.findWhere( filterControl.options.filters, { key: selection }); - // when the filter/key changes, re-render the control entirely - filterControl.render()._triggerChange(); - }); - return this.$keySelect; - }; - - /** render the op dropDownSelect, bind a change event to it, and return it */ - FilterControl.prototype._renderOpSelect = function __renderOpSelect(){ - var filterControl = this, - ops = this.currFilter.ops; - //TODO: search for currOp in avail. ops: use that for selected if there; otherwise: first op - this.$opSelect = dropDownSelect( ops, ops[0] ) - .addClass( 'filter-control-op' ) - .on( 'change.dropdown-select', function( event, selection ){ - filterControl._triggerChange(); - }); - return this.$opSelect; - }; - - /** render the value control, bind a change event to it, and return it */ - FilterControl.prototype._renderValueInput = function __renderValueInput(){ - var filterControl = this; - // if a values attribute is prov. on the filter - make this a dropdown; otherwise, use an input - if( this.currFilter.values ){ - this.$valueSelect = dropDownSelect( this.currFilter.values, this.currFilter.values[0] ) - .on( 'change.dropdown-select', function( event, selection ){ - filterControl._triggerChange(); - }); - } else { - //TODO: allow setting a value type (mainly for which html5 input to use: range, number, etc.) - this.$valueSelect = $( '<input/>' ).addClass( 'form-control' ) - .on( 'change', function( event, value ){ - filterControl._triggerChange(); - }); - } - this.$valueSelect.addClass( 'filter-control-value' ); - return this.$valueSelect; - }; - - /** return the current state/setting for the filter as a three key object: key, op, value */ - FilterControl.prototype.val = function _val(){ - var key = this.$element.find( '.filter-control-key .dropdown-select-selected' ).text(), - op = this.$element.find( '.filter-control-op .dropdown-select-selected' ).text(), - // handle either a dropdown or plain input - $value = this.$element.find( '.filter-control-value' ), - value = ( $value.hasClass( 'dropdown-select' ) )?( $value.find( '.dropdown-select-selected' ).text() ) - :( $value.val() ); - return { key: key, op: op, value: value }; - }; - - // single point of change for change event - FilterControl.prototype._triggerChange = function __triggerChange(){ - this.$element.trigger( 'change.filter-control', this.val() ); - }; - - // as jq plugin - jQuery.fn.extend({ - filterControl : function $filterControl( options ){ - var nonOptionsArgs = jQuery.makeArray( arguments ).slice( 1 ); - return this.map( function(){ - var $this = $( this ), - data = $this.data( FilterControl.prototype.DATA_KEY ); - - if( jQuery.type( options ) === 'object' ){ - data = new FilterControl( $this, options ); - $this.data( FilterControl.prototype.DATA_KEY, data ); - } - if( data && jQuery.type( options ) === 'string' ){ - var fn = data[ options ]; - if( jQuery.type( fn ) === 'function' ){ - return fn.apply( data, nonOptionsArgs ); - } - } - return this; - }); - } - }); -})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/jq-plugins/ui/loading-indicator.js --- a/client/galaxy/scripts/jq-plugins/ui/loading-indicator.js +++ /dev/null @@ -1,98 +0,0 @@ -(function (root, factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define([], factory); - } else { - // Browser globals - root.LoadingIndicator = factory(); - } - -//============================================================================ -}(this, function () { - //TODO: too specific to history panel - function LoadingIndicator( $where, options ){ - - var self = this; - // defaults - options = jQuery.extend({ - cover : false - }, options || {} ); - - function render(){ - var html = [ - '<div class="loading-indicator">', - '<div class="loading-indicator-text">', - '<span class="fa fa-spinner fa-spin fa-lg"></span>', - '<span class="loading-indicator-message">loading...</span>', - '</div>', - '</div>' - ].join( '\n' ); - - var $indicator = $( html ).hide().css( options.css || { - position : 'fixed' - }), - $text = $indicator.children( '.loading-indicator-text' ); - - if( options.cover ){ - $indicator.css({ - 'z-index' : 2, - top : $where.css( 'top' ), - bottom : $where.css( 'bottom' ), - left : $where.css( 'left' ), - right : $where.css( 'right' ), - opacity : 0.5, - 'background-color': 'white', - 'text-align': 'center' - }); - $text = $indicator.children( '.loading-indicator-text' ).css({ - 'margin-top' : '20px' - }); - - } else { - $text = $indicator.children( '.loading-indicator-text' ).css({ - margin : '12px 0px 0px 10px', - opacity : '0.85', - color : 'grey' - }); - $text.children( '.loading-indicator-message' ).css({ - margin : '0px 8px 0px 0px', - 'font-style' : 'italic' - }); - } - return $indicator; - } - - self.show = function( msg, speed, callback ){ - msg = msg || 'loading...'; - speed = speed || 'fast'; - // remove previous - $where.parent().find( '.loading-indicator' ).remove(); - // since position is fixed - we insert as sibling - self.$indicator = render().insertBefore( $where ); - self.message( msg ); - self.$indicator.fadeIn( speed, callback ); - return self; - }; - - self.message = function( msg ){ - self.$indicator.find( 'i' ).text( msg ); - }; - - self.hide = function( speed, callback ){ - speed = speed || 'fast'; - if( self.$indicator && self.$indicator.size() ){ - self.$indicator.fadeOut( speed, function(){ - self.$indicator.remove(); - if( callback ){ callback(); } - }); - } else { - if( callback ){ callback(); } - } - return self; - }; - return self; - } - -//============================================================================ - return LoadingIndicator; -})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/jq-plugins/ui/mode-button.js --- a/client/galaxy/scripts/jq-plugins/ui/mode-button.js +++ /dev/null @@ -1,191 +0,0 @@ -// from: https://raw.githubusercontent.com/umdjs/umd/master/jqueryPlugin.js -// Uses AMD or browser globals to create a jQuery plugin. -(function (factory) { - if (typeof define === 'function' && define.amd) { - //TODO: So...this turns out to be an all or nothing thing. If I load jQuery in the define below, it will - // (of course) wipe the old jquery *and all the plugins loaded into it*. So the define below *is still - // relying on jquery being loaded globally* in order to preserve plugins. - define([], factory); - } else { - // Browser globals - factory(jQuery); - } - -}(function () { - - /** Multi 'mode' button (or any element really) that changes the html - * contents of itself when clicked. Pass in an ordered list of - * objects with 'html' and (optional) onclick functions. - * - * When clicked in a particular node, the onclick function will - * be called (with the element as this) and the element will - * switch to the next mode, replacing its html content with - * that mode's html. - * - * If there is no next mode, the element will switch back to - * the first mode. - * @example: - * $( '.myElement' ).modeButton({ - * modes : [ - * { - * mode: 'bler', - * html: '<h5>Bler</h5>', - * onclick : function(){ - * $( 'body' ).css( 'background-color', 'red' ); - * } - * }, - * { - * mode: 'bloo', - * html: '<h4>Bloo</h4>', - * onclick : function(){ - * $( 'body' ).css( 'background-color', 'blue' ); - * } - * }, - * { - * mode: 'blah', - * html: '<h3>Blah</h3>', - * onclick : function(){ - * $( 'body' ).css( 'background-color', 'grey' ); - * } - * }, - * ] - * }); - * $( '.myElement' ).modeButton( 'callModeFn', 'bler' ); - */ - /** constructor */ - function ModeButton( element, options ){ - this.currModeIndex = 0; - return this._init( element, options ); - } - - /** html5 data key to store this object inside an element */ - ModeButton.prototype.DATA_KEY = 'mode-button'; - /** default options */ - ModeButton.prototype.defaults = { - switchModesOnClick : true - }; - - // ---- private interface - /** set up options, intial mode, and the click handler */ - ModeButton.prototype._init = function _init( element, options ){ - //console.debug( 'ModeButton._init:', element, options ); - options = options || {}; - this.$element = $( element ); - this.options = $.extend( true, {}, this.defaults, options ); - if( !options.modes ){ - throw new Error( 'ModeButton requires a "modes" array' ); - } - - var modeButton = this; - this.$element.click( function _ModeButtonClick( event ){ - // call the curr mode fn - modeButton.callModeFn(); - // inc the curr mode index - if( modeButton.options.switchModesOnClick ){ modeButton._incModeIndex(); } - // set the element html - $( this ).html( modeButton.options.modes[ modeButton.currModeIndex ].html ); - }); - return this.reset(); - }; - /** increment the mode index to the next in the array, looping back to zero if at the last */ - ModeButton.prototype._incModeIndex = function _incModeIndex(){ - this.currModeIndex += 1; - if( this.currModeIndex >= this.options.modes.length ){ - this.currModeIndex = 0; - } - return this; - }; - /** get the mode index in the modes array for the given key (mode name) */ - ModeButton.prototype._getModeIndex = function _getModeIndex( modeKey ){ - for( var i=0; i<this.options.modes.length; i+=1 ){ - if( this.options.modes[ i ].mode === modeKey ){ return i; } - } - throw new Error( 'mode not found: ' + modeKey ); - }; - /** set the current mode to the one with the given index and set button html */ - ModeButton.prototype._setModeByIndex = function _setModeByIndex( index ){ - var newMode = this.options.modes[ index ]; - if( !newMode ){ - throw new Error( 'mode index not found: ' + index ); - } - this.currModeIndex = index; - if( newMode.html ){ - this.$element.html( newMode.html ); - } - return this; - }; - - // ---- public interface - /** get the current mode object (not just the mode name) */ - ModeButton.prototype.currentMode = function currentMode(){ - return this.options.modes[ this.currModeIndex ]; - }; - /** return the mode key of the current mode */ - ModeButton.prototype.current = function current(){ - // sugar for returning mode name - return this.currentMode().mode; - }; - /** get the mode with the given modeKey or the current mode if modeKey is undefined */ - ModeButton.prototype.getMode = function getMode( modeKey ){ - if( !modeKey ){ return this.currentMode(); } - return this.options.modes[( this._getModeIndex( modeKey ) )]; - }; - /** T/F if the button has the given mode */ - ModeButton.prototype.hasMode = function hasMode( modeKey ){ - try { - return !!this.getMode( modeKey ); - } catch( err ){} - return false; - }; - /** set the current mode to the mode with the given name */ - ModeButton.prototype.setMode = function setMode( modeKey ){ - return this._setModeByIndex( this._getModeIndex( modeKey ) ); - }; - /** reset to the initial mode */ - ModeButton.prototype.reset = function reset(){ - this.currModeIndex = 0; - if( this.options.initialMode ){ - this.currModeIndex = this._getModeIndex( this.options.initialMode ); - } - return this._setModeByIndex( this.currModeIndex ); - }; - /** manually call the click handler of the given mode */ - ModeButton.prototype.callModeFn = function callModeFn( modeKey ){ - var modeFn = this.getMode( modeKey ).onclick; - if( modeFn && $.type( modeFn === 'function' ) ){ - // call with the element as context (std jquery pattern) - return modeFn.call( this.$element.get(0) ); - } - return undefined; - }; - - // as jq plugin - $.fn.modeButton = function $modeButton( options ){ - if( !this.size() ){ return this; } - - //TODO: does map still work with jq multi selection (i.e. $( '.class-for-many-btns' ).modeButton)? - if( $.type( options ) === 'object' ){ - return this.map( function(){ - var $this = $( this ); - $this.data( 'mode-button', new ModeButton( $this, options ) ); - return this; - }); - } - - var $first = $( this[0] ), - button = $first.data( 'mode-button' ); - - if( !button ){ - throw new Error( 'modeButton needs an options object or string name of a function' ); - } - - if( button && $.type( options ) === 'string' ){ - var fnName = options; - if( button && $.type( button[ fnName ] ) === 'function' ){ - return button[ fnName ].apply( button, $.makeArray( arguments ).slice( 1 ) ); - } - } - return button; - }; - -})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/jq-plugins/ui/pagination.js --- a/client/galaxy/scripts/jq-plugins/ui/pagination.js +++ /dev/null @@ -1,226 +0,0 @@ -// from: https://raw.githubusercontent.com/umdjs/umd/master/jqueryPlugin.js -// Uses AMD or browser globals to create a jQuery plugin. -(function (factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['jquery'], factory); - } else { - // Browser globals - factory(jQuery); - } - -}(function ($) { - - /** Builds (twitter bootstrap styled) pagination controls. - * If the totalDataSize is not null, a horizontal list of page buttons is displayed. - * If totalDataSize is null, two links ('Prev' and 'Next) are displayed. - * When pages are changed, a 'pagination.page-change' event is fired - * sending the event and the (0-based) page requested. - */ - function Pagination( element, options ){ - /** the total number of pages */ - this.numPages = null; - /** the current, active page */ - this.currPage = 0; - return this.init( element, options ); - } - - /** data key under which this object will be stored in the element */ - Pagination.prototype.DATA_KEY = 'pagination'; - /** default options */ - Pagination.prototype.defaults = { - /** which page to begin at */ - startingPage : 0, - /** number of data per page */ - perPage : 20, - /** the total number of data (null == unknown) */ - totalDataSize : null, - /** size of current data on current page */ - currDataSize : null - }; - - /** init the control, calc numPages if possible, and render - * @param {jQuery} the element that will contain the pagination control - * @param {Object} options a map containing overrides to the pagination default options - */ - Pagination.prototype.init = function _init( $element, options ){ - options = options || {}; - this.$element = $element; - this.options = jQuery.extend( true, {}, this.defaults, options ); - - this.currPage = this.options.startingPage; - if( this.options.totalDataSize !== null ){ - this.numPages = Math.ceil( this.options.totalDataSize / this.options.perPage ); - // limit currPage by numPages - if( this.currPage >= this.numPages ){ - this.currPage = this.numPages - 1; - } - } - //console.debug( 'Pagination.prototype.init:', this.$element, this.currPage ); - //console.debug( JSON.stringify( this.options ) ); - - // bind to data of element - this.$element.data( Pagination.prototype.DATA_KEY, this ); - - this._render(); - return this; - }; - - /** helper to create a simple li + a combo */ - function _make$Li( contents ){ - return $([ - '<li><a href="javascript:void(0);">', contents, '</a></li>' - ].join( '' )); - } - - /** render previous and next pagination buttons */ - Pagination.prototype._render = function __render(){ - // no data - no pagination - if( this.options.totalDataSize === 0 ){ return this; } - // only one page - if( this.numPages === 1 ){ return this; } - - // when the number of pages are known, render each page as a link - if( this.numPages > 0 ){ - this._renderPages(); - this._scrollToActivePage(); - - // when the number of pages is not known, render previous or next - } else { - this._renderPrevNext(); - } - return this; - }; - - /** render previous and next pagination buttons */ - Pagination.prototype._renderPrevNext = function __renderPrevNext(){ - var pagination = this, - $prev = _make$Li( 'Prev' ), - $next = _make$Li( 'Next' ), - $paginationContainer = $( '<ul/>' ).addClass( 'pagination pagination-prev-next' ); - - // disable if it either end - if( this.currPage === 0 ){ - $prev.addClass( 'disabled' ); - } else { - $prev.click( function(){ pagination.prevPage(); }); - } - if( ( this.numPages && this.currPage === ( this.numPages - 1 ) ) - || ( this.options.currDataSize && this.options.currDataSize < this.options.perPage ) ){ - $next.addClass( 'disabled' ); - } else { - $next.click( function(){ pagination.nextPage(); }); - } - - this.$element.html( $paginationContainer.append([ $prev, $next ]) ); - //console.debug( this.$element, this.$element.html() ); - return this.$element; - }; - - /** render page links for each possible page (if we can) */ - Pagination.prototype._renderPages = function __renderPages(){ - // it's better to scroll the control and let the user see all pages - // than to force her/him to change pages in order to find the one they want (as traditional << >> does) - var pagination = this, - $scrollingContainer = $( '<div>' ).addClass( 'pagination-scroll-container' ), - $paginationContainer = $( '<ul/>' ).addClass( 'pagination pagination-page-list' ), - page$LiClick = function( ev ){ - pagination.goToPage( $( this ).data( 'page' ) ); - }; - - for( var i=0; i<this.numPages; i+=1 ){ - // add html5 data tag 'page' for later click event handler use - var $pageLi = _make$Li( i + 1 ).attr( 'data-page', i ).click( page$LiClick ); - // highlight the current page - if( i === this.currPage ){ - $pageLi.addClass( 'active' ); - } - //console.debug( '\t', $pageLi ); - $paginationContainer.append( $pageLi ); - } - return this.$element.html( $scrollingContainer.html( $paginationContainer ) ); - }; - - /** scroll scroll-container (if any) to show the active page */ - Pagination.prototype._scrollToActivePage = function __scrollToActivePage(){ - // scroll to show active page in center of scrollable area - var $container = this.$element.find( '.pagination-scroll-container' ); - // no scroll container : don't scroll - if( !$container.size() ){ return this; } - - var $activePage = this.$element.find( 'li.active' ), - midpoint = $container.width() / 2; - //console.debug( $container, $activePage, midpoint ); - $container.scrollLeft( $container.scrollLeft() + $activePage.position().left - midpoint ); - return this; - }; - - /** go to a certain page */ - Pagination.prototype.goToPage = function goToPage( page ){ - if( page <= 0 ){ page = 0; } - if( this.numPages && page >= this.numPages ){ page = this.numPages - 1; } - if( page === this.currPage ){ return this; } - - //console.debug( '\t going to page ' + page ) - this.currPage = page; - this.$element.trigger( 'pagination.page-change', this.currPage ); - //console.info( 'pagination:page-change', this.currPage ); - this._render(); - return this; - }; - - /** go to the previous page */ - Pagination.prototype.prevPage = function prevPage(){ - return this.goToPage( this.currPage - 1 ); - }; - - /** go to the next page */ - Pagination.prototype.nextPage = function nextPage(){ - return this.goToPage( this.currPage + 1 ); - }; - - /** return the current page */ - Pagination.prototype.page = function page(){ - return this.currPage; - }; - - // alternate constructor invocation - Pagination.create = function _create( $element, options ){ - return new Pagination( $element, options ); - }; - - // as jq plugin - jQuery.fn.extend({ - pagination : function $pagination( options ){ - var nonOptionsArgs = jQuery.makeArray( arguments ).slice( 1 ); - - // if passed an object - use that as an options map to create pagination for each selected - if( jQuery.type( options ) === 'object' ){ - return this.map( function(){ - Pagination.create( $( this ), options ); - return this; - }); - } - - // (other invocations only work on the first element in selected) - var $firstElement = $( this[0] ), - previousControl = $firstElement.data( Pagination.prototype.DATA_KEY ); - // if a pagination control was found for this element, either... - if( previousControl ){ - // invoke a function on the pagination object if passed a string (the function name) - if( jQuery.type( options ) === 'string' ){ - var fn = previousControl[ options ]; - if( jQuery.type( fn ) === 'function' ){ - return fn.apply( previousControl, nonOptionsArgs ); - } - - // if passed nothing, return the previously set control - } else { - return previousControl; - } - } - // if there is no control already set, return undefined - return undefined; - } - }); -})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/jq-plugins/ui/peek-column-selector.js --- a/client/galaxy/scripts/jq-plugins/ui/peek-column-selector.js +++ /dev/null @@ -1,317 +0,0 @@ -// from: https://raw.githubusercontent.com/umdjs/umd/master/jqueryPlugin.js -// Uses AMD or browser globals to create a jQuery plugin. -(function (factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['jquery'], factory); - } else { - // Browser globals - factory(jQuery); - } - -}(function ($) { - //============================================================================== - /** Column selection using the peek display as the control. - * Adds rows to the bottom of the peek with clickable areas in each cell - * to allow the user to select columns. - * Column selection can be limited to a single column or multiple. - * (Optionally) adds a left hand column of column selection prompts. - * (Optionally) allows the column headers to be clicked/renamed - * and set to some initial value. - * (Optionally) hides comment rows. - * (Optionally) allows pre-selecting and disabling certain columns for - * each row control. - * - * Construct by selecting a peek table to be used with jQuery and - * calling 'peekColumnSelector' with options. - * Options must include a 'controls' array and can include other options - * listed below. - * @example: - * $( 'pre.peek' ).peekColumnSelector({ - * columnNames : ["Chromosome", "Start", "Base", "", "", "Qual" ], - * controls : [ - * { label: 'X Column', id: 'xColumn' }, - * { label: 'Y Column', id: 'yColumn', selected: 2 }, - * { label: 'ID Column', id: 'idColumn', selected: 4, disabled: [ 1, 5 ] }, - * { label: 'Heatmap', id: 'heatmap', selected: [ 2, 4 ], disabled: [ 0, 1 ], multiselect: true, - * selectedText: 'Included', unselectedText: 'Excluded' } - * ], - * renameColumns : true, - * hideCommentRows : true, - * includePrompts : true, - * topLeftContent : 'Data sample:' - * }).on( 'peek-column-selector.change', function( ev, selection ){ - * console.info( 'new selection:', selection ); - * //{ yColumn: 2 } - * }).on( 'peek-column-selector.rename', function( ev, names ){ - * console.info( 'column names', names ); - * //[ 'Bler', 'Start', 'Base', '', '', 'Qual' ] - * }); - * - * An event is fired when column selection is changed and the event - * is passed an object in the form: { the row id : the new selection value }. - * An event is also fired when the table headers are re-named and - * is passed the new array of column names. - */ - - /** option defaults */ - var defaults = { - /** does this control allow renaming headers? */ - renameColumns : false, - /** does this control allow renaming headers? */ - columnNames : [], - /** the comment character used by the peek's datatype */ - commentChar : '#', - /** should comment rows be shown or hidden in the peek */ - hideCommentRows : false, - /** should a column of row control prompts be used */ - includePrompts : true, - /** what is the content of the top left cell (often a title) */ - topLeftContent : 'Columns:' - }, - /** class added to the pre.peek element (to allow css on just the control) */ - PEEKCONTROL_CLASS = 'peek-column-selector', - /** the string of the event fired when a control row changes */ - CHANGE_EVENT = 'peek-column-selector.change', - /** the string of the event fired when a column is renamed */ - RENAME_EVENT = 'peek-column-selector.rename', - /** class added to the control rows */ - ROW_CLASS = 'control', - /** class added to the left-hand cells that serve as row prompts */ - PROMPT_CLASS = 'control-prompt', - /** class added to selected _cells_/tds */ - SELECTED_CLASS = 'selected', - /** class added to disabled/un-clickable cells/tds */ - DISABLED_CLASS = 'disabled', - /** class added to the clickable surface within a cell to select it */ - BUTTON_CLASS = 'button', - /** class added to peek table header (th) cells to indicate they can be clicked and are renamable */ - RENAMABLE_HEADER_CLASS = 'renamable-header', - /** the data key used for each cell to store the column index ('data-...') */ - COLUMN_INDEX_DATA_KEY = 'column-index', - /** renamable header data key used to store the column name (w/o the number and dot: '1.Bler') */ - COLUMN_NAME_DATA_KEY = 'column-name'; - - //TODO: not happy with pure functional here - rows should polymorph (multi, single, etc.) - //TODO: needs clean up, move handlers to outer scope - - // ........................................................................ - /** validate the control data sent in for each row */ - function validateControl( control ){ - if( control.disabled && jQuery.type( control.disabled ) !== 'array' ){ - throw new Error( '"disabled" must be defined as an array of indeces: ' + JSON.stringify( control ) ); - } - if( control.multiselect && control.selected && jQuery.type( control.selected ) !== 'array' ){ - throw new Error( 'Mulitselect rows need an array for "selected": ' + JSON.stringify( control ) ); - } - if( !control.label || !control.id ){ - throw new Error( 'Peek controls need a label and id for each control row: ' + JSON.stringify( control ) ); - } - if( control.disabled && control.disabled.indexOf( control.selected ) !== -1 ){ - throw new Error( 'Selected column is in the list of disabled columns: ' + JSON.stringify( control ) ); - } - return control; - } - - /** build the inner control surface (i.e. button-like) */ - function buildButton( control, columnIndex ){ - return $( '<div/>' ).addClass( BUTTON_CLASS ).text( control.label ); - } - - /** build the basic (shared) cell structure */ - function buildControlCell( control, columnIndex ){ - var $td = $( '<td/>' ) - .html( buildButton( control, columnIndex ) ) - .attr( 'data-' + COLUMN_INDEX_DATA_KEY, columnIndex ); - - // disable if index in disabled array - if( control.disabled && control.disabled.indexOf( columnIndex ) !== -1 ){ - $td.addClass( DISABLED_CLASS ); - } - return $td; - } - - /** set the text of the control based on selected/un */ - function setSelectedText( $cell, control, columnIndex ){ - var $button = $cell.children( '.' + BUTTON_CLASS ); - if( $cell.hasClass( SELECTED_CLASS ) ){ - $button.html( ( control.selectedText !== undefined )?( control.selectedText ):( control.label ) ); - } else { - $button.html( ( control.unselectedText !== undefined )?( control.unselectedText ):( control.label ) ); - } - } - - /** build a cell for a row that only allows one selection */ - function buildSingleSelectCell( control, columnIndex ){ - // only one selection - selected is single index - var $cell = buildControlCell( control, columnIndex ); - if( control.selected === columnIndex ){ - $cell.addClass( SELECTED_CLASS ); - } - setSelectedText( $cell, control, columnIndex ); - - // only add the handler to non-disabled controls - if( !$cell.hasClass( DISABLED_CLASS ) ){ - $cell.click( function selectClick( ev ){ - var $cell = $( this ); - // don't re-select or fire event if already selected - if( !$cell.hasClass( SELECTED_CLASS ) ){ - // only one can be selected - remove selected on all others, add it here - var $otherSelected = $cell.parent().children( '.' + SELECTED_CLASS ).removeClass( SELECTED_CLASS ); - $otherSelected.each( function(){ - setSelectedText( $( this ), control, columnIndex ); - }); - - $cell.addClass( SELECTED_CLASS ); - setSelectedText( $cell, control, columnIndex ); - - // fire the event from the table itself, passing the id and index of selected - var eventData = {}, - key = $cell.parent().attr( 'id' ), - val = $cell.data( COLUMN_INDEX_DATA_KEY ); - eventData[ key ] = val; - $cell.parents( '.peek' ).trigger( CHANGE_EVENT, eventData ); - } - }); - } - return $cell; - } - - /** build a cell for a row that allows multiple selections */ - function buildMultiSelectCell( control, columnIndex ){ - var $cell = buildControlCell( control, columnIndex ); - // multiple selection - selected is an array - if( control.selected && control.selected.indexOf( columnIndex ) !== -1 ){ - $cell.addClass( SELECTED_CLASS ); - } - setSelectedText( $cell, control, columnIndex ); - - // only add the handler to non-disabled controls - if( !$cell.hasClass( DISABLED_CLASS ) ){ - $cell.click( function multiselectClick( ev ){ - var $cell = $( this ); - // can be more than one selected - toggle selected on this cell - $cell.toggleClass( SELECTED_CLASS ); - setSelectedText( $cell, control, columnIndex ); - var selectedColumnIndeces = $cell.parent().find( '.' + SELECTED_CLASS ).map( function( i, e ){ - return $( e ).data( COLUMN_INDEX_DATA_KEY ); - }); - // fire the event from the table itself, passing the id and index of selected - var eventData = {}, - key = $cell.parent().attr( 'id' ), - val = jQuery.makeArray( selectedColumnIndeces ); - eventData[ key ] = val; - $cell.parents( '.peek' ).trigger( CHANGE_EVENT, eventData ); - }); - } - return $cell; - } - - /** iterate over columns in peek and create a control for each */ - function buildControlCells( count, control ){ - var $cells = []; - // build a control for each column - using a build fn based on control - for( var columnIndex=0; columnIndex<count; columnIndex+=1 ){ - $cells.push( control.multiselect? buildMultiSelectCell( control, columnIndex ) - : buildSingleSelectCell( control, columnIndex ) ); - } - return $cells; - } - - /** build a row of controls for the peek */ - function buildControlRow( cellCount, control, includePrompts ){ - var $controlRow = $( '<tr/>' ).attr( 'id', control.id ).addClass( ROW_CLASS ); - if( includePrompts ){ - var $promptCell = $( '<td/>' ).addClass( PROMPT_CLASS ).text( control.label + ':' ); - $controlRow.append( $promptCell ); - } - $controlRow.append( buildControlCells( cellCount, control ) ); - return $controlRow; - } - - // ........................................................................ - /** add to the peek, using options for configuration, return the peek */ - function peekColumnSelector( options ){ - options = jQuery.extend( true, {}, defaults, options ); - - var $peek = $( this ).addClass( PEEKCONTROL_CLASS ), - $peektable = $peek.find( 'table' ), - // get the size of the tables - width and height, number of comment rows - columnCount = $peektable.find( 'th' ).size(), - rowCount = $peektable.find( 'tr' ).size(), - // get the rows containing text starting with the comment char (also make them grey) - $commentRows = $peektable.find( 'td[colspan]' ).map( function( e, i ){ - var $this = $( this ); - if( $this.text() && $this.text().match( new RegExp( '^' + options.commentChar ) ) ){ - return $( this ).css( 'color', 'grey' ).parent().get(0); - } - return null; - }); - - // should comment rows in the peek be hidden? - if( options.hideCommentRows ){ - $commentRows.hide(); - rowCount -= $commentRows.size(); - } - //console.debug( 'rowCount:', rowCount, 'columnCount:', columnCount, '$commentRows:', $commentRows ); - - // should a first column of control prompts be added? - if( options.includePrompts ){ - var $topLeft = $( '<th/>' ).addClass( 'top-left' ).text( options.topLeftContent ) - .attr( 'rowspan', rowCount ); - $peektable.find( 'tr' ).first().prepend( $topLeft ); - } - - // save either the options column name or the parsed text of each column header in html5 data attr and text - var $headers = $peektable.find( 'th:not(.top-left)' ).each( function( i, e ){ - var $this = $( this ), - // can be '1.name' or '1' - text = $this.text().replace( /^\d+\.*/, '' ), - name = options.columnNames[ i ] || text; - $this.attr( 'data-' + COLUMN_NAME_DATA_KEY, name ) - .text( ( i + 1 ) + (( name )?( '.' + name ):( '' )) ); - }); - - // allow renaming of columns when the header is clicked - if( options.renameColumns ){ - $headers.addClass( RENAMABLE_HEADER_CLASS ) - .click( function renameColumn(){ - // prompt for new name - var $this = $( this ), - index = $this.index() + ( options.includePrompts? 0: 1 ), - prevName = $this.data( COLUMN_NAME_DATA_KEY ), - newColumnName = prompt( 'New column name:', prevName ); - if( newColumnName !== null && newColumnName !== prevName ){ - // set the new text and data - $this.text( index + ( newColumnName?( '.' + newColumnName ):'' ) ) - .data( COLUMN_NAME_DATA_KEY, newColumnName ) - .attr( 'data-', COLUMN_NAME_DATA_KEY, newColumnName ); - // fire event for new column names - var columnNames = jQuery.makeArray( - $this.parent().children( 'th:not(.top-left)' ).map( function(){ - return $( this ).data( COLUMN_NAME_DATA_KEY ); - })); - $this.parents( '.peek' ).trigger( RENAME_EVENT, columnNames ); - } - }); - } - - // build a row for each control - options.controls.forEach( function( control, i ){ - validateControl( control ); - var $controlRow = buildControlRow( columnCount, control, options.includePrompts ); - $peektable.find( 'tbody' ).append( $controlRow ); - }); - return this; - } - - // ........................................................................ - // as jq plugin - jQuery.fn.extend({ - peekColumnSelector : function $peekColumnSelector( options ){ - return this.map( function(){ - return peekColumnSelector.call( this, options ); - }); - } - }); -})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/jq-plugins/ui/search-input.js --- a/client/galaxy/scripts/jq-plugins/ui/search-input.js +++ /dev/null @@ -1,159 +0,0 @@ -// from: https://raw.githubusercontent.com/umdjs/umd/master/jqueryPlugin.js -// Uses AMD or browser globals to create a jQuery plugin. -(function (factory) { - if (typeof define === 'function' && define.amd) { - //TODO: So...this turns out to be an all or nothing thing. If I load jQuery in the define below, it will - // (of course) wipe the old jquery *and all the plugins loaded into it*. So the define below *is still - // relying on jquery being loaded globally* in order to preserve plugins. - define([], factory); - } else { - // Browser globals - factory(jQuery); - } - -}(function () { - var _l = window._l || function( s ){ return s; }; - - /** searchInput: (jQuery plugin) - * Creates a search input, a clear button, and loading indicator - * within the selected node. - * - * When the user either presses return or enters some minimal number - * of characters, a callback is called. Pressing ESC when the input - * is focused will clear the input and call a separate callback. - */ - function searchInput( parentNode, options ){ -//TODO: consolidate with tool menu functionality, use there - var KEYCODE_ESC = 27, - KEYCODE_RETURN = 13, - $parentNode = $( parentNode ), - firstSearch = true, - defaults = { - initialVal : '', - name : 'search', - placeholder : 'search', - classes : '', - onclear : function(){}, - onfirstsearch : null, - onsearch : function( inputVal ){}, - minSearchLen : 0, - escWillClear : true, - oninit : function(){} - }; - - // .................................................................... input rendering and events - // visually clear the search, trigger an event, and call the callback - function clearSearchInput( event ){ - var $input = $( this ).parent().children( 'input' ); - //console.debug( this, 'clear', $input ); - $input.focus().val( '' ).trigger( 'clear:searchInput' ); - options.onclear(); - } - - // search for searchTerms, trigger an event, call the appropo callback (based on whether this is the first) - function search( event, searchTerms ){ - //console.debug( this, 'searching', searchTerms ); - //TODO: I don't think this is classic jq custom event form? search.searchInput? - $( this ).trigger( 'search:searchInput', searchTerms ); - if( typeof options.onfirstsearch === 'function' && firstSearch ){ - firstSearch = false; - options.onfirstsearch( searchTerms ); - } else { - options.onsearch( searchTerms ); - } - } - - // .................................................................... input rendering and events - function inputTemplate(){ - // class search-query is bootstrap 2.3 style that now lives in base.less - return [ '<input type="text" name="', options.name, '" placeholder="', options.placeholder, '" ', - 'class="search-query ', options.classes, '" ', '/>' ].join( '' ); - } - - // the search input that responds to keyboard events and displays the search value - function $input(){ - return $( inputTemplate() ) - // select all text on a focus - .focus( function( event ){ - $( this ).select(); - }) - // attach behaviors to esc, return if desired, search on some min len string - .keyup( function( event ){ - event.preventDefault(); - event.stopPropagation(); -//TODO: doesn't work - if( !$( this ).val() ){ $( this ).blur(); } - - // esc key will clear if desired - if( event.which === KEYCODE_ESC && options.escWillClear ){ - clearSearchInput.call( this, event ); - - } else { - var searchTerms = $( this ).val(); - // return key or the search string len > minSearchLen (if not 0) triggers search - if( ( event.which === KEYCODE_RETURN ) - || ( options.minSearchLen && searchTerms.length >= options.minSearchLen ) ){ - search.call( this, event, searchTerms ); - } else if( !searchTerms.length ){ - clearSearchInput.call( this, event ); - } - } - }) - .on( 'change', function( event ){ - search.call( this, event, $( this ).val() ); - }) - .val( options.initialVal ); - } - - // .................................................................... clear button rendering and events - // a button for clearing the search bar, placed on the right hand side - function $clearBtn(){ - return $([ '<span class="search-clear fa fa-times-circle" ', - 'title="', _l( 'clear search (esc)' ), '"></span>' ].join('') ) - .tooltip({ placement: 'bottom' }) - .click( function( event ){ - clearSearchInput.call( this, event ); - }); - } - - // .................................................................... loadingIndicator rendering - // a button for clearing the search bar, placed on the right hand side - function $loadingIndicator(){ - return $([ '<span class="search-loading fa fa-spinner fa-spin" ', - 'title="', _l( 'loading...' ), '"></span>' ].join('') ) - .hide().tooltip({ placement: 'bottom' }); - } - - // .................................................................... commands - // visually swap the load, clear buttons - function toggleLoadingIndicator(){ - $parentNode.find( '.search-loading' ).toggle(); - $parentNode.find( '.search-clear' ).toggle(); - } - - // .................................................................... init - // string command (not constructor) - if( jQuery.type( options ) === 'string' ){ - if( options === 'toggle-loading' ){ - toggleLoadingIndicator(); - } - return $parentNode; - } - - // initial render - if( jQuery.type( options ) === 'object' ){ - options = jQuery.extend( true, {}, defaults, options ); - } - //NOTE: prepended - return $parentNode.addClass( 'search-input' ).prepend([ $input(), $clearBtn(), $loadingIndicator() ]); - } - - // as jq plugin - jQuery.fn.extend({ - searchInput : function $searchInput( options ){ - return this.each( function(){ - return searchInput( this, options ); - }); - } - }); -})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/mvc/dataset/dataset-li-edit.js --- a/client/galaxy/scripts/mvc/dataset/dataset-li-edit.js +++ b/client/galaxy/scripts/mvc/dataset/dataset-li-edit.js @@ -3,7 +3,7 @@ "mvc/dataset/dataset-li", "mvc/tags", "mvc/annotations", - "jq-plugins/ui/fa-icon-button", + "ui/fa-icon-button", "mvc/base-mvc", "utils/localization" ], function( STATES, DATASET_LI, TAGS, ANNOTATIONS, faIconButton, BASE_MVC, _l ){ diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/mvc/dataset/dataset-li.js --- a/client/galaxy/scripts/mvc/dataset/dataset-li.js +++ b/client/galaxy/scripts/mvc/dataset/dataset-li.js @@ -1,7 +1,7 @@ define([ "mvc/list/list-item", "mvc/dataset/states", - "jq-plugins/ui/fa-icon-button", + "ui/fa-icon-button", "mvc/base-mvc", "utils/localization" ], function( LIST_ITEM, STATES, faIconButton, BASE_MVC, _l ){ diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/mvc/history/hdca-li-edit.js --- a/client/galaxy/scripts/mvc/history/hdca-li-edit.js +++ b/client/galaxy/scripts/mvc/history/hdca-li-edit.js @@ -1,7 +1,7 @@ define([ "mvc/dataset/states", "mvc/history/hdca-li", - "jq-plugins/ui/fa-icon-button", + "ui/fa-icon-button", "utils/localization" ], function( STATES, HDCA_LI, faIconButton, _l ){ //============================================================================== diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/mvc/history/history-panel-edit.js --- a/client/galaxy/scripts/mvc/history/history-panel-edit.js +++ b/client/galaxy/scripts/mvc/history/history-panel-edit.js @@ -7,7 +7,7 @@ "mvc/history/hdca-li-edit", "mvc/tags", "mvc/annotations", - "jq-plugins/ui/fa-icon-button", + "ui/fa-icon-button", "mvc/ui/popup-menu", "utils/localization" ], function( diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/mvc/history/history-panel.js --- a/client/galaxy/scripts/mvc/history/history-panel.js +++ b/client/galaxy/scripts/mvc/history/history-panel.js @@ -6,10 +6,10 @@ "mvc/history/hdca-li", "mvc/collection/collection-panel", "mvc/user/user-model", - "jq-plugins/ui/fa-icon-button", + "ui/fa-icon-button", "mvc/base-mvc", "utils/localization", - "jq-plugins/ui/search-input" + "ui/search-input" ], function( LIST_PANEL, HISTORY_MODEL, diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/mvc/history/multi-panel.js --- a/client/galaxy/scripts/mvc/history/multi-panel.js +++ b/client/galaxy/scripts/mvc/history/multi-panel.js @@ -3,8 +3,8 @@ "mvc/history/history-panel-edit", "mvc/base-mvc", "utils/ajax-queue", - "jq-plugins/ui/mode-button", - "jq-plugins/ui/search-input" + "ui/mode-button", + "ui/search-input" ], function( HISTORY_MODEL, HPANEL_EDIT, baseMVC, ajaxQueue ){ window.HISTORY_MODEL = HISTORY_MODEL; //============================================================================== diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/mvc/list/list-panel.js --- a/client/galaxy/scripts/mvc/list/list-panel.js +++ b/client/galaxy/scripts/mvc/list/list-panel.js @@ -1,9 +1,9 @@ define([ "mvc/list/list-item", - "jq-plugins/ui/loading-indicator", + "ui/loading-indicator", "mvc/base-mvc", "utils/localization", - "jq-plugins/ui/search-input" + "ui/search-input" ], function( LIST_ITEM, LoadingIndicator, BASE_MVC, _l ){ /* ============================================================================ TODO: diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/mvc/upload/upload-view.js --- a/client/galaxy/scripts/mvc/upload/upload-view.js +++ b/client/galaxy/scripts/mvc/upload/upload-view.js @@ -6,7 +6,6 @@ "mvc/upload/upload-ftp", "mvc/ui/ui-popover", "mvc/ui/ui-modal", - "mvc/ui", "utils/uploadbox"], function( Utils, diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/ui/fa-icon-button.js --- /dev/null +++ b/client/galaxy/scripts/ui/fa-icon-button.js @@ -0,0 +1,48 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define([], factory); + } else { + root.faIconButton = factory(); + } + +}(this, function () { +//============================================================================ + /** Returns a jQuery object containing a clickable font-awesome button. + * options: + * tooltipConfig : option map for bootstrap tool tip + * classes : array of class names (will always be classed as icon-btn) + * disabled : T/F - add the 'disabled' class? + * title : tooltip/title string + * target : optional href target + * href : optional href + * faIcon : which font awesome icon to use + * onclick : function to call when the button is clicked + */ + var faIconButton = function( options ){ + options = options || {}; + options.tooltipConfig = options.tooltipConfig || { placement: 'bottom' }; + + options.classes = [ 'icon-btn' ].concat( options.classes || [] ); + if( options.disabled ){ + options.classes.push( 'disabled' ); + } + + var html = [ + '<a class="', options.classes.join( ' ' ), '"', + (( options.title )?( ' title="' + options.title + '"' ):( '' )), + (( !options.disabled && options.target )? ( ' target="' + options.target + '"' ):( '' )), + ' href="', (( !options.disabled && options.href )?( options.href ):( 'javascript:void(0);' )), '">', + // could go with something less specific here - like 'html' + '<span class="fa ', options.faIcon, '"></span>', + '</a>' + ].join( '' ); + var $button = $( html ).tooltip( options.tooltipConfig ); + if( _.isFunction( options.onclick ) ){ + $button.click( options.onclick ); + } + return $button; + }; + +//============================================================================ + return faIconButton; +})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/ui/filter-control.js --- /dev/null +++ b/client/galaxy/scripts/ui/filter-control.js @@ -0,0 +1,204 @@ +// from: https://raw.githubusercontent.com/umdjs/umd/master/jqueryPlugin.js +// Uses AMD or browser globals to create a jQuery plugin. +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else { + // Browser globals + factory(jQuery); + } + +}(function ($) { + //============================================================================== + /** + * Template function that produces a bootstrap dropdown to replace the + * vanilla HTML select input. Pass in an array of options and an initial selection: + * $( '.my-div' ).append( dropDownSelect( [ 'option1', 'option2' ], 'option2' ); + * + * When the user changes the selected option a 'change.dropdown-select' event will + * fire with both the jq event and the new selection text as arguments. + * + * Get the currently selected choice using: + * var userChoice = $( '.my-div .dropdown-select .dropdown-select-selected' ).text(); + * + */ + function dropDownSelect( options, selected ){ + // replacement for vanilla select element using bootstrap dropdowns instead + selected = selected || (( !_.isEmpty( options ) )?( options[0] ):( '' )); + var $select = $([ + '<div class="dropdown-select btn-group">', + '<button type="button" class="btn btn-default">', + '<span class="dropdown-select-selected">' + selected + '</span>', + '</button>', + '</div>' + ].join( '\n' )); + + // if there's only one option, do not style/create as buttons, dropdown - use simple span + // otherwise, a dropdown displaying the current selection + if( options && options.length > 1 ){ + $select.find( 'button' ) + .addClass( 'dropdown-toggle' ).attr( 'data-toggle', 'dropdown' ) + .append( ' <span class="caret"></span>' ); + $select.append([ + '<ul class="dropdown-menu" role="menu">', + _.map( options, function( option ){ + return [ + '<li><a href="javascript:void(0)">', option, '</a></li>' + ].join( '' ); + }).join( '\n' ), + '</ul>' + ].join( '\n' )); + } + + // trigger 'change.dropdown-select' when a new selection is made using the dropdown + function selectThis( event ){ + var $this = $( this ), + $select = $this.parents( '.dropdown-select' ), + newSelection = $this.text(); + $select.find( '.dropdown-select-selected' ).text( newSelection ); + $select.trigger( 'change.dropdown-select', newSelection ); + } + + $select.find( 'a' ).click( selectThis ); + return $select; + } + + //============================================================================== + /** + * Creates a three part bootstrap button group (key, op, value) meant to + * allow the user control of filters (e.g. { key: 'name', op: 'contains', value: 'my_history' }) + * + * Each field uses a dropDownSelect (from ui.js) to allow selection + * (with the 'value' field appearing as an input when set to do so). + * + * Any change or update in any of the fields will trigger a 'change.filter-control' + * event which will be passed an object containing those fields (as the example above). + * + * Pass in an array of possible filter objects to control what the user can select. + * Each filter object should have: + * key : generally the attribute name on which to filter something + * ops : an array of 1 or more filter operations (e.g. [ 'is', '<', 'contains', '!=' ]) + * values (optional) : an array of possible values for the filter (e.g. [ 'true', 'false' ]) + * @example: + * $( '.my-div' ).filterControl({ + * filters : [ + * { key: 'name', ops: [ 'is exactly', 'contains' ] } + * { key: 'deleted', ops: [ 'is' ], values: [ 'true', 'false' ] } + * ] + * }); + * // after initialization, you can prog. get the current value using: + * $( '.my-div' ).filterControl( 'val' ) + * + */ + function FilterControl( element, options ){ + return this.init( element, options ); + } + /** the data key that this object will be stored under in the DOM element */ + FilterControl.prototype.DATA_KEY = 'filter-control'; + + /** parses options, sets up instance vars, and does initial render */ + FilterControl.prototype.init = function _init( element, options ){ + options = options || { filters: [] }; + this.$element = $( element ).addClass( 'filter-control btn-group' ); + this.options = jQuery.extend( true, {}, this.defaults, options ); + + this.currFilter = this.options.filters[0]; + return this.render(); + }; + + /** render (or re-render) the controls on the element */ + FilterControl.prototype.render = function _render(){ + this.$element.empty() + .append([ this._renderKeySelect(), this._renderOpSelect(), this._renderValueInput() ]); + return this; + }; + + /** render the key dropDownSelect, bind a change event to it, and return it */ + FilterControl.prototype._renderKeySelect = function __renderKeySelect(){ + var filterControl = this; + var keys = this.options.filters.map( function( filter ){ + return filter.key; + }); + this.$keySelect = dropDownSelect( keys, this.currFilter.key ) + .addClass( 'filter-control-key' ) + .on( 'change.dropdown-select', function( event, selection ){ + filterControl.currFilter = _.findWhere( filterControl.options.filters, { key: selection }); + // when the filter/key changes, re-render the control entirely + filterControl.render()._triggerChange(); + }); + return this.$keySelect; + }; + + /** render the op dropDownSelect, bind a change event to it, and return it */ + FilterControl.prototype._renderOpSelect = function __renderOpSelect(){ + var filterControl = this, + ops = this.currFilter.ops; + //TODO: search for currOp in avail. ops: use that for selected if there; otherwise: first op + this.$opSelect = dropDownSelect( ops, ops[0] ) + .addClass( 'filter-control-op' ) + .on( 'change.dropdown-select', function( event, selection ){ + filterControl._triggerChange(); + }); + return this.$opSelect; + }; + + /** render the value control, bind a change event to it, and return it */ + FilterControl.prototype._renderValueInput = function __renderValueInput(){ + var filterControl = this; + // if a values attribute is prov. on the filter - make this a dropdown; otherwise, use an input + if( this.currFilter.values ){ + this.$valueSelect = dropDownSelect( this.currFilter.values, this.currFilter.values[0] ) + .on( 'change.dropdown-select', function( event, selection ){ + filterControl._triggerChange(); + }); + } else { + //TODO: allow setting a value type (mainly for which html5 input to use: range, number, etc.) + this.$valueSelect = $( '<input/>' ).addClass( 'form-control' ) + .on( 'change', function( event, value ){ + filterControl._triggerChange(); + }); + } + this.$valueSelect.addClass( 'filter-control-value' ); + return this.$valueSelect; + }; + + /** return the current state/setting for the filter as a three key object: key, op, value */ + FilterControl.prototype.val = function _val(){ + var key = this.$element.find( '.filter-control-key .dropdown-select-selected' ).text(), + op = this.$element.find( '.filter-control-op .dropdown-select-selected' ).text(), + // handle either a dropdown or plain input + $value = this.$element.find( '.filter-control-value' ), + value = ( $value.hasClass( 'dropdown-select' ) )?( $value.find( '.dropdown-select-selected' ).text() ) + :( $value.val() ); + return { key: key, op: op, value: value }; + }; + + // single point of change for change event + FilterControl.prototype._triggerChange = function __triggerChange(){ + this.$element.trigger( 'change.filter-control', this.val() ); + }; + + // as jq plugin + jQuery.fn.extend({ + filterControl : function $filterControl( options ){ + var nonOptionsArgs = jQuery.makeArray( arguments ).slice( 1 ); + return this.map( function(){ + var $this = $( this ), + data = $this.data( FilterControl.prototype.DATA_KEY ); + + if( jQuery.type( options ) === 'object' ){ + data = new FilterControl( $this, options ); + $this.data( FilterControl.prototype.DATA_KEY, data ); + } + if( data && jQuery.type( options ) === 'string' ){ + var fn = data[ options ]; + if( jQuery.type( fn ) === 'function' ){ + return fn.apply( data, nonOptionsArgs ); + } + } + return this; + }); + } + }); +})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/ui/loading-indicator.js --- /dev/null +++ b/client/galaxy/scripts/ui/loading-indicator.js @@ -0,0 +1,98 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define([], factory); + } else { + // Browser globals + root.LoadingIndicator = factory(); + } + +//============================================================================ +}(this, function () { + //TODO: too specific to history panel + function LoadingIndicator( $where, options ){ + + var self = this; + // defaults + options = jQuery.extend({ + cover : false + }, options || {} ); + + function render(){ + var html = [ + '<div class="loading-indicator">', + '<div class="loading-indicator-text">', + '<span class="fa fa-spinner fa-spin fa-lg"></span>', + '<span class="loading-indicator-message">loading...</span>', + '</div>', + '</div>' + ].join( '\n' ); + + var $indicator = $( html ).hide().css( options.css || { + position : 'fixed' + }), + $text = $indicator.children( '.loading-indicator-text' ); + + if( options.cover ){ + $indicator.css({ + 'z-index' : 2, + top : $where.css( 'top' ), + bottom : $where.css( 'bottom' ), + left : $where.css( 'left' ), + right : $where.css( 'right' ), + opacity : 0.5, + 'background-color': 'white', + 'text-align': 'center' + }); + $text = $indicator.children( '.loading-indicator-text' ).css({ + 'margin-top' : '20px' + }); + + } else { + $text = $indicator.children( '.loading-indicator-text' ).css({ + margin : '12px 0px 0px 10px', + opacity : '0.85', + color : 'grey' + }); + $text.children( '.loading-indicator-message' ).css({ + margin : '0px 8px 0px 0px', + 'font-style' : 'italic' + }); + } + return $indicator; + } + + self.show = function( msg, speed, callback ){ + msg = msg || 'loading...'; + speed = speed || 'fast'; + // remove previous + $where.parent().find( '.loading-indicator' ).remove(); + // since position is fixed - we insert as sibling + self.$indicator = render().insertBefore( $where ); + self.message( msg ); + self.$indicator.fadeIn( speed, callback ); + return self; + }; + + self.message = function( msg ){ + self.$indicator.find( 'i' ).text( msg ); + }; + + self.hide = function( speed, callback ){ + speed = speed || 'fast'; + if( self.$indicator && self.$indicator.size() ){ + self.$indicator.fadeOut( speed, function(){ + self.$indicator.remove(); + if( callback ){ callback(); } + }); + } else { + if( callback ){ callback(); } + } + return self; + }; + return self; + } + +//============================================================================ + return LoadingIndicator; +})); diff -r 6f73d9d8de65e81d16049f4507777ca5df7dc1bf -r 336a1e96bf5196955ec9f1b45d0446c42d4bc9ae client/galaxy/scripts/ui/mode-button.js --- /dev/null +++ b/client/galaxy/scripts/ui/mode-button.js @@ -0,0 +1,191 @@ +// from: https://raw.githubusercontent.com/umdjs/umd/master/jqueryPlugin.js +// Uses AMD or browser globals to create a jQuery plugin. +(function (factory) { + if (typeof define === 'function' && define.amd) { + //TODO: So...this turns out to be an all or nothing thing. If I load jQuery in the define below, it will + // (of course) wipe the old jquery *and all the plugins loaded into it*. So the define below *is still + // relying on jquery being loaded globally* in order to preserve plugins. + define([], factory); + } else { + // Browser globals + factory(jQuery); + } + +}(function () { + + /** Multi 'mode' button (or any element really) that changes the html + * contents of itself when clicked. Pass in an ordered list of + * objects with 'html' and (optional) onclick functions. + * + * When clicked in a particular node, the onclick function will + * be called (with the element as this) and the element will + * switch to the next mode, replacing its html content with + * that mode's html. + * + * If there is no next mode, the element will switch back to + * the first mode. + * @example: + * $( '.myElement' ).modeButton({ + * modes : [ + * { + * mode: 'bler', + * html: '<h5>Bler</h5>', + * onclick : function(){ + * $( 'body' ).css( 'background-color', 'red' ); + * } + * }, + * { + * mode: 'bloo', + * html: '<h4>Bloo</h4>', + * onclick : function(){ + * $( 'body' ).css( 'background-color', 'blue' ); + * } + * }, + * { + * mode: 'blah', + * html: '<h3>Blah</h3>', + * onclick : function(){ + * $( 'body' ).css( 'background-color', 'grey' ); + * } + * }, + * ] + * }); + * $( '.myElement' ).modeButton( 'callModeFn', 'bler' ); + */ + /** constructor */ + function ModeButton( element, options ){ + this.currModeIndex = 0; + return this._init( element, options ); + } + + /** html5 data key to store this object inside an element */ + ModeButton.prototype.DATA_KEY = 'mode-button'; + /** default options */ + ModeButton.prototype.defaults = { + switchModesOnClick : true + }; + + // ---- private interface + /** set up options, intial mode, and the click handler */ + ModeButton.prototype._init = function _init( element, options ){ + //console.debug( 'ModeButton._init:', element, options ); + options = options || {}; + this.$element = $( element ); + this.options = $.extend( true, {}, this.defaults, options ); + if( !options.modes ){ + throw new Error( 'ModeButton requires a "modes" array' ); + } + + var modeButton = this; + this.$element.click( function _ModeButtonClick( event ){ + // call the curr mode fn + modeButton.callModeFn(); + // inc the curr mode index + if( modeButton.options.switchModesOnClick ){ modeButton._incModeIndex(); } + // set the element html + $( this ).html( modeButton.options.modes[ modeButton.currModeIndex ].html ); + }); + return this.reset(); + }; + /** increment the mode index to the next in the array, looping back to zero if at the last */ + ModeButton.prototype._incModeIndex = function _incModeIndex(){ + this.currModeIndex += 1; + if( this.currModeIndex >= this.options.modes.length ){ + this.currModeIndex = 0; + } + return this; + }; + /** get the mode index in the modes array for the given key (mode name) */ + ModeButton.prototype._getModeIndex = function _getModeIndex( modeKey ){ + for( var i=0; i<this.options.modes.length; i+=1 ){ + if( this.options.modes[ i ].mode === modeKey ){ return i; } + } + throw new Error( 'mode not found: ' + modeKey ); + }; + /** set the current mode to the one with the given index and set button html */ + ModeButton.prototype._setModeByIndex = function _setModeByIndex( index ){ + var newMode = this.options.modes[ index ]; + if( !newMode ){ + throw new Error( 'mode index not found: ' + index ); + } + this.currModeIndex = index; + if( newMode.html ){ + this.$element.html( newMode.html ); + } + return this; + }; + + // ---- public interface + /** get the current mode object (not just the mode name) */ + ModeButton.prototype.currentMode = function currentMode(){ + return this.options.modes[ this.currModeIndex ]; + }; + /** return the mode key of the current mode */ + ModeButton.prototype.current = function current(){ + // sugar for returning mode name + return this.currentMode().mode; + }; + /** get the mode with the given modeKey or the current mode if modeKey is undefined */ + ModeButton.prototype.getMode = function getMode( modeKey ){ + if( !modeKey ){ return this.currentMode(); } + return this.options.modes[( this._getModeIndex( modeKey ) )]; + }; + /** T/F if the button has the given mode */ + ModeButton.prototype.hasMode = function hasMode( modeKey ){ + try { + return !!this.getMode( modeKey ); + } catch( err ){} + return false; + }; + /** set the current mode to the mode with the given name */ + ModeButton.prototype.setMode = function setMode( modeKey ){ + return this._setModeByIndex( this._getModeIndex( modeKey ) ); + }; + /** reset to the initial mode */ + ModeButton.prototype.reset = function reset(){ + this.currModeIndex = 0; + if( this.options.initialMode ){ + this.currModeIndex = this._getModeIndex( this.options.initialMode ); + } + return this._setModeByIndex( this.currModeIndex ); + }; + /** manually call the click handler of the given mode */ + ModeButton.prototype.callModeFn = function callModeFn( modeKey ){ + var modeFn = this.getMode( modeKey ).onclick; + if( modeFn && $.type( modeFn === 'function' ) ){ + // call with the element as context (std jquery pattern) + return modeFn.call( this.$element.get(0) ); + } + return undefined; + }; + + // as jq plugin + $.fn.modeButton = function $modeButton( options ){ + if( !this.size() ){ return this; } + + //TODO: does map still work with jq multi selection (i.e. $( '.class-for-many-btns' ).modeButton)? + if( $.type( options ) === 'object' ){ + return this.map( function(){ + var $this = $( this ); + $this.data( 'mode-button', new ModeButton( $this, options ) ); + return this; + }); + } + + var $first = $( this[0] ), + button = $first.data( 'mode-button' ); + + if( !button ){ + throw new Error( 'modeButton needs an options object or string name of a function' ); + } + + if( button && $.type( options ) === 'string' ){ + var fnName = options; + if( button && $.type( button[ fnName ] ) === 'function' ){ + return button[ fnName ].apply( button, $.makeArray( arguments ).slice( 1 ) ); + } + } + return button; + }; + +})); This diff is so big that we needed to truncate the remainder. Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.
participants (1)
-
commits-noreply＠bitbucket.org