From 13882fe7cb00951673e6e81ce2fbcbeaf8054820 Mon Sep 17 00:00:00 2001 From: Dannon Baker Date: Wed, 21 Mar 2018 08:25:21 -0400 Subject: [PATCH] Peek column selector jquery handling, minor cleanup --- .../galaxy/scripts/ui/peek-column-selector.js | 64 +++++++++---------- 1 file changed, 30 insertions(+), 34 deletions(-) diff --git a/client/galaxy/scripts/ui/peek-column-selector.js b/client/galaxy/scripts/ui/peek-column-selector.js index f804c1e0dca..81f58cb75e4 100644 --- a/client/galaxy/scripts/ui/peek-column-selector.js +++ b/client/galaxy/scripts/ui/peek-column-selector.js @@ -1,8 +1,4 @@ -// from: https://raw.githubusercontent.com/umdjs/umd/master/jqueryPlugin.js -// Uses AMD or browser globals to create a jQuery plugin. -import jQuery from "jquery"; -var $ = jQuery; - +import $ from "jquery"; //============================================================================== /** Column selection using the peek display as the control. * Adds rows to the bottom of the peek with clickable areas in each cell @@ -63,38 +59,38 @@ var defaults = { topLeftContent: "Columns:" }; -var /** class added to the pre.peek element (to allow css on just the control) */ -PEEKCONTROL_CLASS = "peek-column-selector"; +/** class added to the pre.peek element (to allow css on just the control) */ +const PEEKCONTROL_CLASS = "peek-column-selector"; -var /** 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 control row changes */ +const CHANGE_EVENT = "peek-column-selector.change"; -var /** the string of the event fired when a column is renamed */ -RENAME_EVENT = "peek-column-selector.rename"; +/** the string of the event fired when a column is renamed */ +const RENAME_EVENT = "peek-column-selector.rename"; -var /** class added to the control rows */ -ROW_CLASS = "control"; +/** class added to the control rows */ +const ROW_CLASS = "control"; -var /** class added to the left-hand cells that serve as row prompts */ -PROMPT_CLASS = "control-prompt"; +/** class added to the left-hand cells that serve as row prompts */ +const PROMPT_CLASS = "control-prompt"; -var /** class added to selected _cells_/tds */ -SELECTED_CLASS = "selected"; +/** class added to selected _cells_/tds */ +const SELECTED_CLASS = "selected"; -var /** class added to disabled/un-clickable cells/tds */ -DISABLED_CLASS = "disabled"; +/** class added to disabled/un-clickable cells/tds */ +const DISABLED_CLASS = "disabled"; -var /** class added to the clickable surface within a cell to select it */ -BUTTON_CLASS = "button"; +/** class added to the clickable surface within a cell to select it */ +const BUTTON_CLASS = "button"; -var /** class added to peek table header (th) cells to indicate they can be clicked and are renamable */ -RENAMABLE_HEADER_CLASS = "renamable-header"; +/** class added to peek table header (th) cells to indicate they can be clicked and are renamable */ +const RENAMABLE_HEADER_CLASS = "renamable-header"; -var /** the data key used for each cell to store the column index ('data-...') */ -COLUMN_INDEX_DATA_KEY = "column-index"; +/** the data key used for each cell to store the column index ('data-...') */ +const COLUMN_INDEX_DATA_KEY = "column-index"; -var /** renamable header data key used to store the column name (w/o the number and dot: '1.Bler') */ -COLUMN_NAME_DATA_KEY = "column-name"; +/** renamable header data key used to store the column name (w/o the number and dot: '1.Bler') */ +const 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 @@ -102,10 +98,10 @@ COLUMN_NAME_DATA_KEY = "column-name"; // ........................................................................ /** validate the control data sent in for each row */ function validateControl(control) { - if (control.disabled && jQuery.type(control.disabled) !== "array") { + if (control.disabled && $.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") { + if (control.multiselect && control.selected && $.type(control.selected) !== "array") { throw new Error(`Mulitselect rows need an array for "selected": ${JSON.stringify(control)}`); } if (!control.label || !control.id) { @@ -212,7 +208,7 @@ function buildMultiSelectCell(control, columnIndex) { var eventData = {}; var key = $cell.parent().attr("id"); - var val = jQuery.makeArray(selectedColumnIndeces); + var val = $.makeArray(selectedColumnIndeces); eventData[key] = val; $cell.parents(".peek").trigger(CHANGE_EVENT, eventData); }); @@ -252,7 +248,7 @@ function buildControlRow(cellCount, control, includePrompts) { // ........................................................................ /** add to the peek, using options for configuration, return the peek */ function peekColumnSelector(options) { - options = jQuery.extend(true, {}, defaults, options); + options = $.extend(true, {}, defaults, options); var $peek = $(this).addClass(PEEKCONTROL_CLASS); var $peektable = $peek.find("table"); @@ -312,7 +308,7 @@ function peekColumnSelector(options) { var index = $this.index() + (options.includePrompts ? 0 : 1); var prevName = $this.data(COLUMN_NAME_DATA_KEY); - var newColumnName = prompt("New column name:", prevName); + var newColumnName = window.prompt("New column name:", prevName); if (newColumnName !== null && newColumnName !== prevName) { // set the new text and data $this @@ -320,7 +316,7 @@ function peekColumnSelector(options) { .data(COLUMN_NAME_DATA_KEY, newColumnName) .attr("data-", COLUMN_NAME_DATA_KEY, newColumnName); // fire event for new column names - var columnNames = jQuery.makeArray( + var columnNames = $.makeArray( $this .parent() .children("th:not(.top-left)") @@ -344,7 +340,7 @@ function peekColumnSelector(options) { // ........................................................................ // as jq plugin -jQuery.fn.extend({ +$.fn.extend({ peekColumnSelector: function $peekColumnSelector(options) { return this.map(function() { return peekColumnSelector.call(this, options);