From b692c0ebf3bbc2b3cb1c8934987aa092ca0de1b7 Mon Sep 17 00:00:00 2001 From: Aysam Guerler Date: Thu, 11 Sep 2014 12:02:21 -0400 Subject: [PATCH] ToolForm: Implements error handling, applies fixes to styles and structure, UI: Fixes code style for frames --- static/scripts/mvc/tools/tools-form.js | 29 ++- static/scripts/mvc/tools/tools-jobs.js | 49 ++-- static/scripts/mvc/tools/tools-section.js | 138 ++++++++--- static/scripts/mvc/tools/tools-tree.js | 90 ++++++- static/scripts/mvc/ui/ui-frames.js | 232 +++++++++--------- static/scripts/mvc/ui/ui-portlet.js | 5 +- .../scripts/packed/mvc/tools/tools-section.js | 2 +- static/scripts/packed/mvc/ui/ui-frames.js | 2 +- static/style/blue/base.css | 2 + static/style/src/less/frame.less | 57 ++--- static/style/src/less/ui.less | 14 ++ 11 files changed, 384 insertions(+), 236 deletions(-) diff --git a/static/scripts/mvc/tools/tools-form.js b/static/scripts/mvc/tools/tools-form.js index bcd79081411..c8d630e09f4 100644 --- a/static/scripts/mvc/tools/tools-form.js +++ b/static/scripts/mvc/tools/tools-form.js @@ -1,8 +1,11 @@ +/* + This is the main class of the tool form plugin. It is referenced as 'app' in all lower level modules. +*/ define(['mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'mvc/citation/citation-model', 'mvc/citation/citation-view', - 'mvc/tools', 'mvc/tools/tools-template', 'mvc/tools/tools-datasets', 'mvc/tools/tools-section', 'mvc/tools/tools-tree'], + 'mvc/tools', 'mvc/tools/tools-template', 'mvc/tools/tools-datasets', 'mvc/tools/tools-section', 'mvc/tools/tools-tree', 'mvc/tools/tools-jobs'], function(Portlet, Ui, CitationModel, CitationView, - Tools, ToolTemplate, ToolDatasets, ToolSection, ToolTree) { + Tools, ToolTemplate, ToolDatasets, ToolSection, ToolTree, ToolJobs) { // create tool model var Model = Backbone.Model.extend({ @@ -32,12 +35,18 @@ define(['mvc/ui/ui-portlet', 'mvc/ui/ui-misc', // creates a tree/json structure from the input form this.tree = new ToolTree(this); + // creates the job handler + this.job_handler = new ToolJobs(this); + // reset field list this.field_list = {}; // reset sequential input definition list this.input_list = {}; + // reset input element definition list + this.element_list = {}; + // initialize datasets this.datasets = new ToolDatasets({ history_id : this.options.history_id, @@ -47,6 +56,13 @@ define(['mvc/ui/ui-portlet', 'mvc/ui/ui-misc', }); }, + // reset form + reset: function() { + for (var i in this.element_list) { + this.element_list[i].reset(); + } + }, + // initialize tool form _initializeToolForm: function() { // link this @@ -102,7 +118,7 @@ define(['mvc/ui/ui-portlet', 'mvc/ui/ui-misc', title : 'Execute', floating : 'clear', onclick : function() { - self._submit(); + self.job_handler.submit(); } }) }, @@ -157,7 +173,7 @@ define(['mvc/ui/ui-portlet', 'mvc/ui/ui-misc', // trigger refresh self.refresh(); - self._submit(); + //self.job_handler.submit(); } }); }, @@ -174,11 +190,6 @@ define(['mvc/ui/ui-portlet', 'mvc/ui/ui-misc', // log console.debug('tools-form::refresh() - Recreated tree structure. Refresh.'); - }, - - // submit - _submit: function() { - console.log(this.tree.finalize()); } }); diff --git a/static/scripts/mvc/tools/tools-jobs.js b/static/scripts/mvc/tools/tools-jobs.js index 9f66f67c2c2..ae31474dfbc 100644 --- a/static/scripts/mvc/tools/tools-jobs.js +++ b/static/scripts/mvc/tools/tools-jobs.js @@ -1,9 +1,7 @@ -// dependencies +/* + This class handles job submissions and the error handling. +*/ define(['utils/utils'], function(Utils) { - -/** - * This class handles job submissions. - */ return Backbone.Model.extend({ // initialize initialize: function(app, options) { @@ -15,34 +13,49 @@ return Backbone.Model.extend({ }, // create job - submit: function(data, success, error) { + submit: function() { // link this var self = this; + // create job definition for submission to tools api + var job_def = { + tool_id : this.app.options.id, + inputs : this.app.tree.finalize() + } + + // reset + this.app.reset(); + // post job - Utils.request('POST', config.root + 'api/tools', data, + Utils.request('POST', galaxy_config.root + 'api/tools', job_def, // success handler function(response) { if (!response.outputs || response.outputs.length == 0) { - // call error - error && error(); - } else { - // update galaxy history console.log(response); } + self._refreshHdas(); }, // error handler function(response) { - var message = ''; - if (response && response.message && response.message.data && response.message.data.input) { - message = response.message.data.input + '.'; + if (response && response.message && response.message.data) { + var error_messages = self.app.tree.match(response.message.data); + for (var id in error_messages) { + var error_text = error_messages[id]; + if (!error_text) { + error_text = 'Please verify this parameter.'; + } + self.app.element_list[id].error(error_text); + } } - - // call error - error && error(); - } ); + }, + + // refresh history panel + _refreshHdas: function() { + if (parent.Galaxy && parent.Galaxy.currHistoryPanel) { + parent.Galaxy.currHistoryPanel.refreshContents(); + } } }); diff --git a/static/scripts/mvc/tools/tools-section.js b/static/scripts/mvc/tools/tools-section.js index 2ce58721547..7006145ede7 100644 --- a/static/scripts/mvc/tools/tools-section.js +++ b/static/scripts/mvc/tools/tools-section.js @@ -1,6 +1,60 @@ +/* + This class creates a tool form section and populates it with input elements. It also handles repeat blocks and conditionals by recursively creating new sub sections. New input elements can be plugged in by adding cases to the switch block defined in the _addRow() function. +*/ define(['utils/utils', 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'mvc/tools/tools-select-dataset'], function(Utils, Table, Ui, Tabs, SelectDataset) { + // input field element wrapper + var InputElement = Backbone.View.extend({ + // initialize input wrapper + initialize: function(options) { + this.setElement(this._template(options)); + }, + + // set error text + error: function(text) { + // set text + this.$el.find('.ui-table-form-error-text').html(text); + this.$el.find('.ui-table-form-error').fadeIn(); + this.$el.addClass('ui-table-row-error'); + }, + + // reset + reset: function() { + this.$el.find('.ui-table-form-error').hide(); + this.$el.removeClass('ui-table-form-error'); + }, + + // template + _template: function(options) { + var $input; + if (options.highlight) { + $input = $('
'); + } else { + $input = $('
'); + } + + // add error + $input.append('
'); + + // add label + if (options.label) { + $input.append('
' + options.label + '
'); + } + + // add input element + $input.append(options.$el); + + // add help + if (options.help) { + $input.append('
' + options.help + '
'); + } + + // return input element + return $input; + } + }); + // create form view var View = Backbone.View.extend({ // initialize @@ -76,7 +130,7 @@ define(['utils/utils', 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'm input_def.value = input_def.test_param.value; // build options field - this._addRow('conditional', input_def); + var table_row = this._addRow('conditional', input_def); // add fields for (var i in input_def.cases) { @@ -89,13 +143,16 @@ define(['utils/utils', 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'm cls : 'ui-table-plain' }); + // create input field wrapper + var input_element = new InputElement({ + label : '', + help : input_def.help, + $el : sub_section.$el, + highlight : true + }); + // create table row - this.table.add(this._create_field({ - label : '', - help : input_def.help, - $el : sub_section.$el, - color : true - })); + this.table.add(input_element.$el); // append to table this.table.append(sub_section_id); @@ -175,13 +232,16 @@ define(['utils/utils', 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'm // retitle tabs tabs.retitle(input_def.title); + // create input field wrapper + var input_element = new InputElement({ + label : input_def.title, + help : input_def.help, + $el : tabs.$el, + highlight : true + }); + // create table row - this.table.add(this._create_field({ - label : input_def.title, - help : input_def.help, - $el : tabs.$el, - color : true - })); + this.table.add(input_element.$el); // append row to table this.table.append(input_def.id); @@ -265,15 +325,24 @@ define(['utils/utils', 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'm // add to field list this.app.field_list[id] = field; - // create table row - this.table.add(this._create_field({ + // create input field wrapper + var input_element = new InputElement({ label : input_def.label, help : input_def.help, $el : field.$el - })); + }); + + // add to element list + this.app.element_list[id] = input_element; + + // create table row + this.table.add(input_element.$el); // append to table this.table.append(id); + + // return table row + return this.table.get(id) }, // conditional input field @@ -349,7 +418,7 @@ define(['utils/utils', 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'm } // get referenced columns - var column_list = self.app.tree.findReferences(id, 'data_column'); + var column_list = self.app.tree.references(id, 'data_column'); // find selected dataset var dataset = self.app.datasets.filter(value); @@ -385,11 +454,20 @@ define(['utils/utils', 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'm // get column type var column_type = meta[key]; + // column index + var column_index = (parseInt(key) + 1); + + // column type label + var column_label = 'Text'; + if (column_type == 'int' || column_type == 'float') { + column_label = 'Number'; + } + // add to selection if (column_type == 'int' || column_type == 'float' || !numerical) { columns.push({ - 'label' : 'Column: ' + (parseInt(key) + 1) + ' [' + meta[key] + ']', - 'value' : key + 'label' : 'Column: ' + column_index + ' [' + column_label + ']', + 'value' : column_index }); } } @@ -485,27 +563,9 @@ define(['utils/utils', 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'm _field_boolean : function(input_def) { return new Ui.RadioButton.View({ id : 'field-' + input_def.id, - data : [ { label : 'Yes', value : true }, - { label : 'No', value : false }] + data : [ { label : 'Yes', value : 'true' }, + { label : 'No', value : 'false' }] }); - }, - - // create a field element with title and help information - _create_field: function(options) { - var $input; - if (options.color) { - $input = $('
'); - } else { - $input = $('
'); - } - if (options.label) { - $input.append('
' + options.label + '
'); - } - $input.append(options.$el); - if (options.help) { - $input.append('
' + options.help + '
'); - } - return $input; } }); diff --git a/static/scripts/mvc/tools/tools-tree.js b/static/scripts/mvc/tools/tools-tree.js index c27d23e0442..9d89831ff72 100644 --- a/static/scripts/mvc/tools/tools-tree.js +++ b/static/scripts/mvc/tools/tools-tree.js @@ -1,3 +1,6 @@ +/* + This class maps the tool form to javascript datastructures. Once refreshed it converts the tool form (including sub sections) into a xml (containing only ids) and a detailed dictionary representation. The xml object is a jquery element and can be searched/filtered e.g. in order to hierarchically identify referenced fields. Once the job is ready for submission, the finalize function will transform the generic dictionary representation into the specific flat dictionary format required by the tools api. +*/ // dependencies define([], function() { @@ -9,7 +12,8 @@ return Backbone.Model.extend({ this.app = app; }, - // creates tree structure + /** Refresh the datastructures representing the ToolForm. + */ refresh: function() { // create dictionary this.dict = {}; @@ -26,13 +30,23 @@ return Backbone.Model.extend({ this._iterate(this.app.section.$el, this.dict, this.xml); }, - // convert to job dictionary + /** Convert dictionary representation into tool api specific flat dictionary format. + */ finalize: function() { // link this var self = this; // dictionary formatted for job submission - var job_def = {}; + this.job_def = {}; + + // dictionary with api specific identifiers + this.job_ids = {}; + + // add identifier and value to job definition + function add(job_input_id, input_id, input_value) { + self.job_def[job_input_id] = input_value; + self.job_ids[job_input_id] = input_id; + }; // converter between raw dictionary and job dictionary function convert(identifier, head) { @@ -65,6 +79,9 @@ return Backbone.Model.extend({ // get conditional value var value = self.app.field_list[input.id].value(); + // add conditional value + add (job_input_id + '|' + input.test_param.name, input.id, value); + // find selected case for (var j in input.cases) { if (input.cases[j].value == value) { @@ -72,13 +89,28 @@ return Backbone.Model.extend({ break; } } - - // break + break; + // handle data inputs + case 'data': + var value = { + id : self.app.field_list[input.id].value(), + src : 'hda' + } + add(job_input_id, input.id, value); + break; + // handle boolean input + case 'boolean': + var value = self.app.field_list[input.id].value(); + if (value === 'true') { + value = input.truevalue; + } else { + value = input.falsevalue; + } + add (job_input_id, input.id, value); break; default: // handle default value - var value = self.app.field_list[input.id].value(); - job_def[job_input_id] = value; + add (job_input_id, input.id, self.app.field_list[input.id].value()); } } } @@ -88,11 +120,46 @@ return Backbone.Model.extend({ convert('', this.dict); // return result - return job_def; + return this.job_def; }, - // find referenced elements - findReferences: function(identifier, type) { + /** Matches identifier from api response to input element + */ + match: function(response) { + // final result dictionary + var result = {}; + + // link this + var self = this; + + // search throughout response + function search (id, head) { + if (typeof head === 'string') { + var input_id = self.app.tree.job_ids[id]; + if (input_id) { + result[input_id] = head; + } + } else { + for (var i in head) { + var new_id = i; + if (id !== '') { + new_id = id + '|' + new_id; + } + search (new_id, head[i]); + } + } + } + + // match all ids and return messages + search('', response); + + // return matched results + return result; + }, + + /** Find referenced elements. + */ + references: function(identifier, type) { // referenced elements var referenced = []; @@ -164,7 +231,8 @@ return Backbone.Model.extend({ return referenced; }, - // iterate + /** Iterate through the tool form dom and map it to the dictionary and xml representation. + */ _iterate: function(parent, dict, xml) { // get child nodes var self = this; diff --git a/static/scripts/mvc/ui/ui-frames.js b/static/scripts/mvc/ui/ui-frames.js index 8d1f2b3632a..117790b4036 100644 --- a/static/scripts/mvc/ui/ui-frames.js +++ b/static/scripts/mvc/ui/ui-frames.js @@ -83,10 +83,10 @@ var View = Backbone.View.extend({ this.setElement(this._template()); // load background - $(this.el).append(this._template_background()); + $(this.el).append(this._templateBackground()); // load menu buttons - $(this.el).append(this._template_menu()); + $(this.el).append(this._templateMenu()); // load to main frame $(this.el_main).append($(this.el)); @@ -97,7 +97,7 @@ var View = Backbone.View.extend({ var id_shadow = '#frame-shadow'; // add shadow template - $(this.el).append(this._template_shadow(id_shadow.substring(1))); + $(this.el).append(this._templateShadow(id_shadow.substring(1))); // initialize frame this.frame_shadow = { @@ -109,13 +109,13 @@ var View = Backbone.View.extend({ }; // initialize size - this._frame_resize(this.frame_shadow, {width: 0, height: 0}); + this._frameResize(this.frame_shadow, {width: 0, height: 0}); // add shadow to frame list this.frame_list[id_shadow] = this.frame_shadow; // initialize panel - this._panel_refresh(); + this._panelRefresh(); // apply visibility if (!this.visible) { @@ -128,7 +128,7 @@ var View = Backbone.View.extend({ var self = this; $(window).resize(function () { if (self.visible) - self._panel_refresh(); + self._panelRefresh(); }); }, @@ -183,9 +183,9 @@ var View = Backbone.View.extend({ // append var $frame_el = null; if (options.type === 'url') { - $frame_el = $(this._template_frame_url(frame_id.substring(1), options.title, options.content)); + $frame_el = $(this._templateFrameUrl(frame_id.substring(1), options.title, options.content)); } else if (options.type === 'other') { - $frame_el = $(this._template_frame(frame_id.substring(1), options.title)); + $frame_el = $(this._templateFrame(frame_id.substring(1), options.title)); // Load content into frame. var content_elt = $frame_el.find('.f-content'); @@ -208,8 +208,8 @@ var View = Backbone.View.extend({ }; // set dimensions - options.width = this._to_pixel_coord('width', this.options.frame.cols); - options.height = this._to_pixel_coord('height', this.options.frame.rows); + options.width = this._toPixelCoord('width', this.options.frame.cols); + options.height = this._toPixelCoord('height', this.options.frame.rows); // default z-index this.frame_z = parseInt($(frame.id).css('z-index')); @@ -221,10 +221,10 @@ var View = Backbone.View.extend({ this.frame_counter++; // resize - this._frame_resize(frame, {width: options.width, height: options.height}); + this._frameResize(frame, {width: options.width, height: options.height}); // place frame - this._frame_insert(frame, {top: 0, left: 0}, true); + this._frameInsert(frame, {top: 0, left: 0}, true); // show frames if hidden if (!this.visible) { @@ -247,10 +247,10 @@ var View = Backbone.View.extend({ this.$el.find(".frame-background").show(); // show panel - this._panel_refresh(); + this._panelRefresh(); // refresh - this._menu_refresh(); + this._menuRefresh(); }, // hide panel @@ -272,7 +272,7 @@ var View = Backbone.View.extend({ this.$el.find(".frame-menu").hide(); // refresh - this._menu_refresh(); + this._menuRefresh(); }, // length @@ -299,23 +299,23 @@ var View = Backbone.View.extend({ // events events: { // global frame events - 'mousemove' : '_event_frame_mouse_move', - 'mouseup' : '_event_frame_mouse_up', - 'mouseleave' : '_event_frame_mouse_up', - 'mousewheel' : '_event_panel_scroll', - 'DOMMouseScroll' : '_event_panel_scroll', + 'mousemove' : '_eventFrameMouseMove', + 'mouseup' : '_eventFrameMouseUp', + 'mouseleave' : '_eventFrameMouseUp', + 'mousewheel' : '_eventPanelScroll', + 'DOMMouseScroll' : '_eventPanelScroll', // events fixed to elements - 'mousedown .frame' : '_event_frame_mouse_down', - 'mousedown .frame-background' : '_event_hide', - 'mousedown .frame-scroll-up' : '_event_panel_scroll_up', - 'mousedown .frame-scroll-down' : '_event_panel_scroll_down', - 'mousedown .f-close' : '_event_frame_close', - 'mousedown .f-pin' : '_event_frame_lock' + 'mousedown .frame' : '_eventFrameMouseDown', + 'mousedown .frame-background' : '_eventHide', + 'mousedown .frame-scroll-up' : '_eventPanelScroll_up', + 'mousedown .frame-scroll-down' : '_eventPanelScroll_down', + 'mousedown .f-close' : '_eventFrameClose', + 'mousedown .f-pin' : '_eventFrameLock' }, // drag start - _event_frame_mouse_down: function (e) { + _eventFrameMouseDown: function (e) { // skip if event is already active if (this.event.type !== null) { return; @@ -340,7 +340,7 @@ var View = Backbone.View.extend({ e.preventDefault(); // identify frame - this.event.target = this._frame_identify(e.target); + this.event.target = this._frameIdentify(e.target); // check if frame is locked if (this.event.target.grid_lock) { @@ -355,11 +355,11 @@ var View = Backbone.View.extend({ }; // prepare drag/resize - this._frame_drag_start(this.event.target); + this._frameDragStart(this.event.target); }, // mouse move event - _event_frame_mouse_move: function (e) { + _eventFrameMouseMove: function (e) { // check if (this.event.type != 'drag' && this.event.type != 'resize') { return; @@ -381,7 +381,7 @@ var View = Backbone.View.extend({ this.event.xy = event_xy_new; // object position / size - var p = this._frame_screen (this.event.target); + var p = this._frameScreen (this.event.target); // resize event if (this.event.type == 'resize') { @@ -395,23 +395,23 @@ var View = Backbone.View.extend({ p.height = Math.max(p.height, min_dim); // apply resize to frame - this._frame_resize(this.event.target, p); + this._frameResize(this.event.target, p); // break down to grid coordinates - p.width = this._to_grid_coord('width', p.width) + 1; - p.height = this._to_grid_coord('height', p.height) + 1; + p.width = this._toGridCoord('width', p.width) + 1; + p.height = this._toGridCoord('height', p.height) + 1; // transfer back to pixels - p.width = this._to_pixel_coord('width', p.width); - p.height = this._to_pixel_coord('height', p.height); + p.width = this._toPixelCoord('width', p.width); + p.height = this._toPixelCoord('height', p.height); // apply - this._frame_resize(this.frame_shadow, p); + this._frameResize(this.frame_shadow, p); // fix position - this._frame_insert(this.frame_shadow, { - top : this._to_grid_coord('top', p.top), - left : this._to_grid_coord('left', p.left) + this._frameInsert(this.frame_shadow, { + top : this._toGridCoord('top', p.top), + left : this._toGridCoord('left', p.left) }); } @@ -422,12 +422,12 @@ var View = Backbone.View.extend({ p.top += event_xy_delta.y; // apply - this._frame_offset(this.event.target, p); + this._frameOffset(this.event.target, p); // get location of shadow var l = { - top : this._to_grid_coord('top', p.top), - left : this._to_grid_coord('left', p.left) + top : this._toGridCoord('top', p.top), + left : this._toGridCoord('left', p.left) }; // increase priority of current frame @@ -436,26 +436,26 @@ var View = Backbone.View.extend({ } // fix position - this._frame_insert(this.frame_shadow, l); + this._frameInsert(this.frame_shadow, l); } }, // mouse up - _event_frame_mouse_up: function (e) { + _eventFrameMouseUp: function (e) { // check if (this.event.type != 'drag' && this.event.type != 'resize') { return; } // stop - this._frame_drag_stop(this.event.target); + this._frameDragStop(this.event.target); // reset event this.event.type = null; }, // drag start - _event_frame_close: function (e) { + _eventFrameClose: function (e) { // check if (this.event.type !== null) { return; @@ -465,7 +465,7 @@ var View = Backbone.View.extend({ e.preventDefault(); // get frame - var frame = this._frame_identify(e.target); + var frame = this._frameIdentify(e.target); var self = this; // fade out @@ -480,10 +480,10 @@ var View = Backbone.View.extend({ self.frame_counter--; // reload - self._panel_refresh(true); + self._panelRefresh(true); // refresh scroll state once all animations completed - self._panel_animation_complete(); + self._panelAnimationComplete(); // hide if no frames left if (self.visible && self.frame_counter == 0) @@ -492,7 +492,7 @@ var View = Backbone.View.extend({ }, // drag start - _event_frame_lock: function (e) { + _eventFrameLock: function (e) { // check if (this.event.type !== null) { return; @@ -502,7 +502,7 @@ var View = Backbone.View.extend({ e.preventDefault(); // get frame - var frame = this._frame_identify(e.target); + var frame = this._frameIdentify(e.target); // check if (frame.grid_lock) { @@ -529,7 +529,7 @@ var View = Backbone.View.extend({ }, // show/hide panel - _event_hide: function (e) { + _eventHide: function (e) { // check if (this.event.type !== null) { return; @@ -542,7 +542,7 @@ var View = Backbone.View.extend({ /** * Fired when scrolling occurs on panel. */ - _event_panel_scroll: function(e) { + _eventPanelScroll: function(e) { // check if (this.event.type !== null || !this.visible) { return; @@ -563,11 +563,11 @@ var View = Backbone.View.extend({ var delta = e.originalEvent.detail ? e.originalEvent.detail : e.originalEvent.wheelDelta / -3; // refresh panel - this._panel_scroll(delta); + this._panelScroll(delta); }, // scroll up - _event_panel_scroll_up: function(e) { + _eventPanelScroll_up: function(e) { // check if (this.event.type !== null) return; @@ -576,11 +576,11 @@ var View = Backbone.View.extend({ e.preventDefault(); // scroll up - this._panel_scroll(-this.options.scroll); + this._panelScroll(-this.options.scroll); }, // scroll down - _event_panel_scroll_down: function(e) { + _eventPanelScroll_down: function(e) { // check if (this.event.type !== null) return; @@ -589,7 +589,7 @@ var View = Backbone.View.extend({ e.preventDefault(); // scroll down - this._panel_scroll(this.options.scroll); + this._panelScroll(this.options.scroll); }, /* @@ -597,21 +597,21 @@ var View = Backbone.View.extend({ */ // identify - _frame_identify: function(target) { + _frameIdentify: function(target) { return this.frame_list['#' + $(target).closest('.frame').attr('id')]; }, // drag start - _frame_drag_start : function (frame) { + _frameDragStart : function (frame) { // set focus - this._frame_focus(frame, true); + this._frameFocus(frame, true); // get current dimensions - var p = this._frame_screen (frame); + var p = this._frameScreen (frame); // initialize shadow - this._frame_resize(this.frame_shadow, p); - this._frame_grid(this.frame_shadow, frame.grid_location); + this._frameResize(this.frame_shadow, p); + this._frameGrid(this.frame_shadow, frame.grid_location); // reset location frame.grid_location = null; @@ -624,16 +624,16 @@ var View = Backbone.View.extend({ }, // drag stop - _frame_drag_stop : function (frame) { + _frameDragStop : function (frame) { // remove focus - this._frame_focus(frame, false); + this._frameFocus(frame, false); // get new dimensions - var p = this._frame_screen(this.frame_shadow); + var p = this._frameScreen(this.frame_shadow); // update frame - this._frame_resize(frame, p); - this._frame_grid(frame, this.frame_shadow.grid_location, true); + this._frameResize(frame, p); + this._frameGrid(frame, this.frame_shadow.grid_location, true); // reset location of shadow this.frame_shadow.grid_location = null; @@ -645,7 +645,7 @@ var View = Backbone.View.extend({ $('.f-cover').hide(); // refresh scroll state once all animations completed - this._panel_animation_complete(); + this._panelAnimationComplete(); }, /* @@ -653,7 +653,7 @@ var View = Backbone.View.extend({ */ // converts a pixel coordinate to grids - _to_grid_coord: function (type, px) { + _toGridCoord: function (type, px) { // determine sign var sign = (type == 'width' || type == 'height') ? 1 : -1; @@ -664,7 +664,7 @@ var View = Backbone.View.extend({ }, // converts a grid coordinate to pixels - _to_pixel_coord: function (type, g) { + _toPixelCoord: function (type, g) { // determine sign var sign = (type == 'width' || type == 'height') ? 1 : -1; @@ -677,23 +677,23 @@ var View = Backbone.View.extend({ }, // get grid coordinates - _to_grid: function (px) { + _toGrid: function (px) { // full set return { - top : this._to_grid_coord('top', px.top), - left : this._to_grid_coord('left', px.left), - width : this._to_grid_coord('width', px.width), - height : this._to_grid_coord('height', px.height) + top : this._toGridCoord('top', px.top), + left : this._toGridCoord('left', px.left), + width : this._toGridCoord('width', px.width), + height : this._toGridCoord('height', px.height) }; }, // get pixel coordinates - _to_pixel: function(g) { + _toPixel: function(g) { return { - top : this._to_pixel_coord('top', g.top), - left : this._to_pixel_coord('left', g.left), - width : this._to_pixel_coord('width', g.width), - height : this._to_pixel_coord('height', g.height) + top : this._toPixelCoord('top', g.top), + left : this._toPixelCoord('left', g.left), + width : this._toPixelCoord('width', g.width), + height : this._toPixelCoord('height', g.height) }; }, @@ -702,7 +702,7 @@ var View = Backbone.View.extend({ */ // check collision - _is_collision: function(g) { + _isCollision: function(g) { // is collision pair function is_collision_pair (a, b) { return !(a.left > b.left + b.width - 1 || a.left + a.width - 1 < b.left || @@ -728,7 +728,7 @@ var View = Backbone.View.extend({ }, // location/grid rank - _location_rank: function(loc) { + _locationRank: function(loc) { return (loc.top * this.cols) + loc.left; }, @@ -737,7 +737,7 @@ var View = Backbone.View.extend({ */ // update frame counter - _menu_refresh: function() { + _menuRefresh: function() { // scroll up possible? if (this.visible) { if (this.top == this.options.top_min) @@ -763,22 +763,22 @@ var View = Backbone.View.extend({ */ // panel on animation complete / frames not moving - _panel_animation_complete: function() { + _panelAnimationComplete: function() { var self = this; - $(".frame").promise().done(function() {self._panel_scroll(0, true)}); + $(".frame").promise().done(function() {self._panelScroll(0, true)}); }, // refresh panel - _panel_refresh: function(animate) { + _panelRefresh: function(animate) { // get current size this.cols = parseInt($(window).width() / this.options.cell, 10) + 1; // recalculate frame positions - this._frame_insert(null, null, animate); + this._frameInsert(null, null, animate); }, // update scroll - _panel_scroll: function(delta, animate) { + _panelScroll: function(delta, animate) { // new top value var top_new = this.top - this.options.scroll * delta; @@ -799,7 +799,7 @@ var View = Backbone.View.extend({ top : frame.screen_location.top - (this.top - top_new), left : frame.screen_location.left } - this._frame_offset(frame, screen_location, animate); + this._frameOffset(frame, screen_location, animate); } } @@ -808,7 +808,7 @@ var View = Backbone.View.extend({ } // refresh - this._menu_refresh(); + this._menuRefresh(); }, /* @@ -816,7 +816,7 @@ var View = Backbone.View.extend({ */ // frame insert at given location - _frame_insert: function(frame, new_loc, animate) { + _frameInsert: function(frame, new_loc, animate) { // define var place_list = []; @@ -826,7 +826,7 @@ var View = Backbone.View.extend({ frame.grid_location = null; // set first one to be placed - place_list.push([frame, this._location_rank(new_loc)]); + place_list.push([frame, this._locationRank(new_loc)]); } // search @@ -854,7 +854,7 @@ var View = Backbone.View.extend({ // place for (i = 0; i < place_list.length; i++) { - this._frame_place(place_list[i][0], animate); + this._framePlace(place_list[i][0], animate); } // identify maximum viewport size @@ -875,16 +875,16 @@ var View = Backbone.View.extend({ this.top_max = Math.min(this.top_max, this.options.top_min); // panel menu - this._menu_refresh(); + this._menuRefresh(); }, // naive frame place - _frame_place: function(frame, animate) { + _framePlace: function(frame, animate) { // reset grid location frame.grid_location = null; // grid coordinates of new frame - var g = this._to_grid(this._frame_screen(frame)); + var g = this._toGrid(this._frameScreen(frame)); // try grid coordinates var done = false; @@ -896,7 +896,7 @@ var View = Backbone.View.extend({ g.left = j; // no collision - if (!this._is_collision(g)) { + if (!this._isCollision(g)) { done = true; break; } @@ -910,14 +910,14 @@ var View = Backbone.View.extend({ // check if valid spot was found if (done) { - this._frame_grid(frame, g, animate); + this._frameGrid(frame, g, animate); } else { console.log("Grid dimensions exceeded."); } }, // focus - _frame_focus: function(frame, has_focus) { + _frameFocus: function(frame, has_focus) { // get new z-value var z = this.frame_z + (has_focus ? 1 : 0); @@ -926,7 +926,7 @@ var View = Backbone.View.extend({ }, // new left/top position frame - _frame_offset: function(frame, p, animate) { + _frameOffset: function(frame, p, animate) { // update screen location frame.screen_location.left = p.left; frame.screen_location.top = p.top; @@ -934,7 +934,7 @@ var View = Backbone.View.extend({ // animate if (animate) { // set focus on animated - this._frame_focus(frame, true); + this._frameFocus(frame, true); // prepare for callback var self = this; @@ -943,7 +943,7 @@ var View = Backbone.View.extend({ $(frame.id).animate({top: p.top, left: p.left}, 'fast', function() { // remove focus - self._frame_focus(frame, false); + self._frameFocus(frame, false); }); } else // update css @@ -951,7 +951,7 @@ var View = Backbone.View.extend({ }, // resize frame - _frame_resize: function(frame, p) { + _frameResize: function(frame, p) { // update css $(frame.id).css({width: p.width, height: p.height}); @@ -961,19 +961,19 @@ var View = Backbone.View.extend({ }, // new grid location - _frame_grid: function (frame, l, animate) { + _frameGrid: function (frame, l, animate) { // update grid location frame.grid_location = l; // place frame - this._frame_offset(frame, this._to_pixel(l), animate); + this._frameOffset(frame, this._toPixel(l), animate); // update grid rank - frame.grid_rank = this._location_rank(l); + frame.grid_rank = this._locationRank(l); }, // get frame dimensions - _frame_screen: function(frame) { + _frameScreen: function(frame) { var p = frame.screen_location; return {top: p.top, left: p.left, width: p.width, height: p.height}; }, @@ -988,7 +988,7 @@ var View = Backbone.View.extend({ }, // fill regular frame template - _template_frame: function(id, title) { + _templateFrame: function(id, title) { // check title if (!title) title = ''; @@ -1008,7 +1008,7 @@ var View = Backbone.View.extend({ }, // fill regular frame template - _template_frame_url: function(id, title, url) { + _templateFrameUrl: function(id, title, url) { // url if (url.indexOf('?') == -1) url += '?'; @@ -1017,7 +1017,7 @@ var View = Backbone.View.extend({ url += 'widget=True'; // element - var $el = $(this._template_frame(id, title)); + var $el = $(this._templateFrame(id, title)); $el.find('.f-content').append(''); // load template @@ -1025,17 +1025,17 @@ var View = Backbone.View.extend({ }, // fill shadow template - _template_shadow: function(id) { + _templateShadow: function(id) { return '
'; }, // fill background template in order to cover underlying iframes - _template_background: function() { + _templateBackground: function() { return '
'; }, // fill menu button template - _template_menu: function() { + _templateMenu: function() { return '
' + '
'; } diff --git a/static/scripts/mvc/ui/ui-portlet.js b/static/scripts/mvc/ui/ui-portlet.js index 1ba7230bcc5..c8ec6a5039a 100644 --- a/static/scripts/mvc/ui/ui-portlet.js +++ b/static/scripts/mvc/ui/ui-portlet.js @@ -1,9 +1,8 @@ // dependencies define(['utils/utils'], function(Utils) { -// return -var View = Backbone.View.extend( -{ +// portlet view class +var View = Backbone.View.extend({ // visibility visible: false, diff --git a/static/scripts/packed/mvc/tools/tools-section.js b/static/scripts/packed/mvc/tools/tools-section.js index 849e24bd465..9d56d9dbeff 100644 --- a/static/scripts/packed/mvc/tools/tools-section.js +++ b/static/scripts/packed/mvc/tools/tools-section.js @@ -1 +1 @@ -define(["utils/utils","mvc/ui/ui-table","mvc/ui/ui-misc","mvc/ui/ui-tabs","mvc/tools/tools-select-dataset"],function(d,b,f,a,c){var e=Backbone.View.extend({initialize:function(h,g){this.app=h;this.inputs=g.inputs;g.cls_tr="section-row";this.table=new b.View(g);this.setElement(this.table.$el);this.render()},render:function(){this.table.delAll();for(var g in this.inputs){this._add(this.inputs[g])}},_add:function(i){var h=this;var g=jQuery.extend(true,{},i);g.id=d.uuid();this.app.input_list[g.id]=g;var j=g.type;switch(j){case"conditional":this._addConditional(g);break;case"repeat":this._addRepeat(g);break;default:this._addRow(j,g)}},_addConditional:function(g){g.label=g.test_param.label;g.value=g.test_param.value;this._addRow("conditional",g);for(var j in g.cases){var h=g.id+"-section-"+j;var k=new e(this.app,{inputs:g.cases[j].inputs,cls:"ui-table-plain"});this.table.add(this._create_field({label:"",help:g.help,$el:k.$el,color:true}));this.table.append(h)}},_addRepeat:function(g){var h=this;var l=new a.View({title_new:"Add "+g.title,max:g.max,onnew:function(){var i=g.id+"-section-"+d.uuid();var n=new e(h.app,{inputs:g.inputs,cls:"ui-table-plain"});l.add({id:i,title:g.title,$el:n.$el,ondel:function(){l.del(i);l.retitle(g.title);h.app.refresh()}});l.retitle(g.title);l.show(i);h.app.refresh()}});for(var k=0;k0){console.debug("tool-form::field_data() - Selected dataset "+r+".");var t=k.get("metadata_column_types");if(!t){console.debug("tool-form::field_data() - FAILED: Could not find metadata for dataset "+r+".")}for(var m in p){var n=h.app.input_list[p[m]];var o=h.app.field_list[p[m]];if(!n||!o){console.debug("tool-form::field_data() - FAILED: Column not found.")}var l=n.numerical;var j=[];for(var s in t){var q=t[s];if(q=="int"||q=="float"||!l){j.push({label:"Column: "+(parseInt(s)+1)+" ["+t[s]+"]",value:s})}}if(o){o.update(j);if(!o.exists(o.value())){o.value(o.first())}}}}else{console.debug("tool-form::field_data() - FAILED: Could not find dataset "+r+".")}}})},_field_select:function(g){var h=[];for(var j in g.options){var k=g.options[j];h.push({label:k[0],value:k[1]})}var l=f.Select;switch(g.display){case"checkboxes":l=f.Checkbox;break;case"radio":l=f.RadioButton;break}return new l.View({id:"field-"+g.id,data:h,multiple:g.multiple})},_field_data_colum:function(g){return new f.Select.View({id:"field-"+g.id,multiple:g.multiple})},_field_text:function(g){return new f.Input({id:"field-"+g.id,area:g.area})},_field_slider:function(g){var h=1;if(g.type=="float"){h=(g.max-g.min)/10000}return new f.Slider.View({id:"field-"+g.id,min:g.min||0,max:g.max||1000,step:h})},_field_hidden:function(g){return new f.Hidden({id:"field-"+g.id})},_field_boolean:function(g){return new f.RadioButton.View({id:"field-"+g.id,data:[{label:"Yes",value:true},{label:"No",value:false}]})},_create_field:function(g){var h;if(g.color){h=$('
')}else{h=$("
")}if(g.label){h.append('
'+g.label+"
")}h.append(g.$el);if(g.help){h.append('
'+g.help+"
")}return h}});return{View:e}}); \ No newline at end of file +define(["utils/utils","mvc/ui/ui-table","mvc/ui/ui-misc","mvc/ui/ui-tabs","mvc/tools/tools-select-dataset"],function(d,b,g,a,c){var e=Backbone.View.extend({initialize:function(h){this.setElement(this._template(h))},error:function(h){this.$el.find(".ui-table-form-error-text").html(h);this.$el.find(".ui-table-form-error").fadeIn();this.$el.addClass("ui-table-row-error")},reset:function(){this.$el.find(".ui-table-form-error").hide();this.$el.removeClass("ui-table-form-error")},_template:function(h){var i;if(h.highlight){i=$('
')}else{i=$('
')}i.append('
');if(h.label){i.append('
'+h.label+"
")}i.append(h.$el);if(h.help){i.append('
'+h.help+"
")}return i}});var f=Backbone.View.extend({initialize:function(i,h){this.app=i;this.inputs=h.inputs;h.cls_tr="section-row";this.table=new b.View(h);this.setElement(this.table.$el);this.render()},render:function(){this.table.delAll();for(var h in this.inputs){this._add(this.inputs[h])}},_add:function(j){var i=this;var h=jQuery.extend(true,{},j);h.id=d.uuid();this.app.input_list[h.id]=h;var k=h.type;switch(k){case"conditional":this._addConditional(h);break;case"repeat":this._addRepeat(h);break;default:this._addRow(k,h)}},_addConditional:function(h){h.label=h.test_param.label;h.value=h.test_param.value;var j=this._addRow("conditional",h);for(var l in h.cases){var k=h.id+"-section-"+l;var n=new f(this.app,{inputs:h.cases[l].inputs,cls:"ui-table-plain"});var m=new e({label:"",help:h.help,$el:n.$el,highlight:true});this.table.add(m.$el);this.table.append(k)}},_addRepeat:function(h){var j=this;var m=new a.View({title_new:"Add "+h.title,max:h.max,onnew:function(){var i=h.id+"-section-"+d.uuid();var p=new f(j.app,{inputs:h.inputs,cls:"ui-table-plain"});m.add({id:i,title:h.title,$el:p.$el,ondel:function(){m.del(i);m.retitle(h.title);j.app.refresh()}});m.retitle(h.title);m.show(i);j.app.refresh()}});for(var l=0;l0){console.debug("tool-form::field_data() - Selected dataset "+u+".");var w=m.get("metadata_column_types");if(!w){console.debug("tool-form::field_data() - FAILED: Could not find metadata for dataset "+u+".")}for(var o in s){var q=i.app.input_list[s[o]];var r=i.app.field_list[s[o]];if(!q||!r){console.debug("tool-form::field_data() - FAILED: Column not found.")}var n=q.numerical;var l=[];for(var v in w){var t=w[v];var k=(parseInt(v)+1);var p="Text";if(t=="int"||t=="float"){p="Number"}if(t=="int"||t=="float"||!n){l.push({label:"Column: "+k+" ["+p+"]",value:k})}}if(r){r.update(l);if(!r.exists(r.value())){r.value(r.first())}}}}else{console.debug("tool-form::field_data() - FAILED: Could not find dataset "+u+".")}}})},_field_select:function(h){var j=[];for(var k in h.options){var l=h.options[k];j.push({label:l[0],value:l[1]})}var m=g.Select;switch(h.display){case"checkboxes":m=g.Checkbox;break;case"radio":m=g.RadioButton;break}return new m.View({id:"field-"+h.id,data:j,multiple:h.multiple})},_field_data_colum:function(h){return new g.Select.View({id:"field-"+h.id,multiple:h.multiple})},_field_text:function(h){return new g.Input({id:"field-"+h.id,area:h.area})},_field_slider:function(h){var i=1;if(h.type=="float"){i=(h.max-h.min)/10000}return new g.Slider.View({id:"field-"+h.id,min:h.min||0,max:h.max||1000,step:i})},_field_hidden:function(h){return new g.Hidden({id:"field-"+h.id})},_field_boolean:function(h){return new g.RadioButton.View({id:"field-"+h.id,data:[{label:"Yes",value:"true"},{label:"No",value:"false"}]})}});return{View:f}}); \ No newline at end of file diff --git a/static/scripts/packed/mvc/ui/ui-frames.js b/static/scripts/packed/mvc/ui/ui-frames.js index 150088ec8f7..576f420d403 100644 --- a/static/scripts/packed/mvc/ui/ui-frames.js +++ b/static/scripts/packed/mvc/ui/ui-frames.js @@ -1 +1 @@ -define([],function(){var a=Backbone.View.extend({options:{frame:{cols:6,rows:3},rows:1000,cell:130,margin:5,scroll:5,top_min:40,frame_max:9,visible:true,onchange:null},cols:0,top:0,top_max:0,frame_z:0,frame_counter:0,frame_counter_id:0,frame_list:[],frame_shadow:null,visible:null,initialize:function(c){var b=this;if(c){this.options=_.defaults(c,this.options)}this.visible=this.options.visible;this.top=this.top_max=this.options.top_min;this.setElement(this._template());$(this.el).append(this._template_background());$(this.el).append(this._template_menu());$(this.el_main).append($(this.el));var d="#frame-shadow";$(this.el).append(this._template_shadow(d.substring(1)));this.frame_shadow={id:d,screen_location:{},grid_location:{},grid_rank:null,grid_lock:false};this._frame_resize(this.frame_shadow,{width:0,height:0});this.frame_list[d]=this.frame_shadow;this._panel_refresh();if(!this.visible){this.hide()}else{this.show()}var b=this;$(window).resize(function(){if(b.visible){b._panel_refresh()}})},add:function(c){var f={title:"",content:null,target:"",type:null};if(c){c=_.defaults(c,f)}else{c=f}if(!c.content){return}if(this.frame_counter>=this.options.frame_max){alert("You have reached the maximum number of allowed frames ("+this.options.frame_max+").");return}var d="#frame-"+(this.frame_counter_id++);if($(d).length!==0){alert("This frame already exists. This page might contain multiple frame managers.");return}this.top=this.options.top_min;var e=null;if(c.type==="url"){e=$(this._template_frame_url(d.substring(1),c.title,c.content))}else{if(c.type==="other"){e=$(this._template_frame(d.substring(1),c.title));var b=e.find(".f-content");if(_.isFunction(c.content)){c.content(b)}else{b.append(c.content)}}}$(this.el).append(e);var g={id:d,screen_location:{},grid_location:{},grid_rank:null,grid_lock:false};c.width=this._to_pixel_coord("width",this.options.frame.cols);c.height=this._to_pixel_coord("height",this.options.frame.rows);this.frame_z=parseInt($(g.id).css("z-index"));this.frame_list[d]=g;this.frame_counter++;this._frame_resize(g,{width:c.width,height:c.height});this._frame_insert(g,{top:0,left:0},true);if(!this.visible){this.show()}},show:function(){this.visible=true;this.$el.find(".frame").fadeIn("fast");this.$el.find(this.frame_shadow.id).hide();this.$el.find(".frame-background").show();this._panel_refresh();this._menu_refresh()},hide:function(){if(this.event.type!==null){return}this.visible=false;this.$el.find(".frame").fadeOut("fast");this.$el.find(".frame-background").hide();this.$el.find(".frame-menu").hide();this._menu_refresh()},length:function(){return this.frame_counter},setOnChange:function(b){this.options.onchange=b},event:{type:null,target:null,xy:null},events:{mousemove:"_event_frame_mouse_move",mouseup:"_event_frame_mouse_up",mouseleave:"_event_frame_mouse_up",mousewheel:"_event_panel_scroll",DOMMouseScroll:"_event_panel_scroll","mousedown .frame":"_event_frame_mouse_down","mousedown .frame-background":"_event_hide","mousedown .frame-scroll-up":"_event_panel_scroll_up","mousedown .frame-scroll-down":"_event_panel_scroll_down","mousedown .f-close":"_event_frame_close","mousedown .f-pin":"_event_frame_lock"},_event_frame_mouse_down:function(b){if(this.event.type!==null){return}if($(b.target).hasClass("f-header")||$(b.target).hasClass("f-title")){this.event.type="drag"}if($(b.target).hasClass("f-resize")){this.event.type="resize"}if(this.event.type===null){return}b.preventDefault();this.event.target=this._frame_identify(b.target);if(this.event.target.grid_lock){this.event.type=null;return}this.event.xy={x:b.originalEvent.pageX,y:b.originalEvent.pageY};this._frame_drag_start(this.event.target)},_event_frame_mouse_move:function(h){if(this.event.type!="drag"&&this.event.type!="resize"){return}var f={x:h.originalEvent.pageX,y:h.originalEvent.pageY};var c={x:f.x-this.event.xy.x,y:f.y-this.event.xy.y};this.event.xy=f;var g=this._frame_screen(this.event.target);if(this.event.type=="resize"){g.width+=c.x;g.height+=c.y;var d=this.options.cell-this.options.margin-1;g.width=Math.max(g.width,d);g.height=Math.max(g.height,d);this._frame_resize(this.event.target,g);g.width=this._to_grid_coord("width",g.width)+1;g.height=this._to_grid_coord("height",g.height)+1;g.width=this._to_pixel_coord("width",g.width);g.height=this._to_pixel_coord("height",g.height);this._frame_resize(this.frame_shadow,g);this._frame_insert(this.frame_shadow,{top:this._to_grid_coord("top",g.top),left:this._to_grid_coord("left",g.left)})}if(this.event.type=="drag"){g.left+=c.x;g.top+=c.y;this._frame_offset(this.event.target,g);var b={top:this._to_grid_coord("top",g.top),left:this._to_grid_coord("left",g.left)};if(b.left!==0){b.left++}this._frame_insert(this.frame_shadow,b)}},_event_frame_mouse_up:function(b){if(this.event.type!="drag"&&this.event.type!="resize"){return}this._frame_drag_stop(this.event.target);this.event.type=null},_event_frame_close:function(c){if(this.event.type!==null){return}c.preventDefault();var d=this._frame_identify(c.target);var b=this;$(d.id).fadeOut("fast",function(){$(d.id).remove();delete b.frame_list[d.id];b.frame_counter--;b._panel_refresh(true);b._panel_animation_complete();if(b.visible&&b.frame_counter==0){b.hide()}})},_event_frame_lock:function(b){if(this.event.type!==null){return}b.preventDefault();var c=this._frame_identify(b.target);if(c.grid_lock){c.grid_lock=false;$(c.id).find(".f-pin").removeClass("toggle");$(c.id).find(".f-header").removeClass("f-not-allowed");$(c.id).find(".f-title").removeClass("f-not-allowed");$(c.id).find(".f-resize").show();$(c.id).find(".f-close").show()}else{c.grid_lock=true;$(c.id).find(".f-pin").addClass("toggle");$(c.id).find(".f-header").addClass("f-not-allowed");$(c.id).find(".f-title").addClass("f-not-allowed");$(c.id).find(".f-resize").hide();$(c.id).find(".f-close").hide()}},_event_hide:function(b){if(this.event.type!==null){return}this.hide()},_event_panel_scroll:function(b){if(this.event.type!==null||!this.visible){return}var c=$(b.srcElement).parents(".frame");if(c.length!==0){b.stopPropagation();return}b.preventDefault();var d=b.originalEvent.detail?b.originalEvent.detail:b.originalEvent.wheelDelta/-3;this._panel_scroll(d)},_event_panel_scroll_up:function(b){if(this.event.type!==null){return}b.preventDefault();this._panel_scroll(-this.options.scroll)},_event_panel_scroll_down:function(b){if(this.event.type!==null){return}b.preventDefault();this._panel_scroll(this.options.scroll)},_frame_identify:function(b){return this.frame_list["#"+$(b).closest(".frame").attr("id")]},_frame_drag_start:function(c){this._frame_focus(c,true);var b=this._frame_screen(c);this._frame_resize(this.frame_shadow,b);this._frame_grid(this.frame_shadow,c.grid_location);c.grid_location=null;$(this.frame_shadow.id).show();$(".f-cover").show()},_frame_drag_stop:function(c){this._frame_focus(c,false);var b=this._frame_screen(this.frame_shadow);this._frame_resize(c,b);this._frame_grid(c,this.frame_shadow.grid_location,true);this.frame_shadow.grid_location=null;$(this.frame_shadow.id).hide();$(".f-cover").hide();this._panel_animation_complete()},_to_grid_coord:function(d,c){var b=(d=="width"||d=="height")?1:-1;if(d=="top"){c-=this.top}return parseInt((c+b*this.options.margin)/this.options.cell,10)},_to_pixel_coord:function(d,e){var b=(d=="width"||d=="height")?1:-1;var c=(e*this.options.cell)-b*this.options.margin;if(d=="top"){c+=this.top}return c},_to_grid:function(b){return{top:this._to_grid_coord("top",b.top),left:this._to_grid_coord("left",b.left),width:this._to_grid_coord("width",b.width),height:this._to_grid_coord("height",b.height)}},_to_pixel:function(b){return{top:this._to_pixel_coord("top",b.top),left:this._to_pixel_coord("left",b.left),width:this._to_pixel_coord("width",b.width),height:this._to_pixel_coord("height",b.height)}},_is_collision:function(d){function b(g,f){return !(g.left>f.left+f.width-1||g.left+g.width-1f.top+f.height-1||g.top+g.height-1l?1:0)});for(e=0;e
'},_template_frame:function(c,b){if(!b){b=""}return'
'+b+'
'},_template_frame_url:function(e,d,b){if(b.indexOf("?")==-1){b+="?"}else{b+="&"}b+="widget=True";var c=$(this._template_frame(e,d));c.find(".f-content").append('');return c},_template_shadow:function(b){return'
'},_template_background:function(){return'
'},_template_menu:function(){return'
'}});return{View:a}}); \ No newline at end of file +define([],function(){var a=Backbone.View.extend({options:{frame:{cols:6,rows:3},rows:1000,cell:130,margin:5,scroll:5,top_min:40,frame_max:9,visible:true,onchange:null},cols:0,top:0,top_max:0,frame_z:0,frame_counter:0,frame_counter_id:0,frame_list:[],frame_shadow:null,visible:null,initialize:function(c){var b=this;if(c){this.options=_.defaults(c,this.options)}this.visible=this.options.visible;this.top=this.top_max=this.options.top_min;this.setElement(this._template());$(this.el).append(this._templateBackground());$(this.el).append(this._templateMenu());$(this.el_main).append($(this.el));var d="#frame-shadow";$(this.el).append(this._templateShadow(d.substring(1)));this.frame_shadow={id:d,screen_location:{},grid_location:{},grid_rank:null,grid_lock:false};this._frameResize(this.frame_shadow,{width:0,height:0});this.frame_list[d]=this.frame_shadow;this._panelRefresh();if(!this.visible){this.hide()}else{this.show()}var b=this;$(window).resize(function(){if(b.visible){b._panelRefresh()}})},add:function(c){var f={title:"",content:null,target:"",type:null};if(c){c=_.defaults(c,f)}else{c=f}if(!c.content){return}if(this.frame_counter>=this.options.frame_max){alert("You have reached the maximum number of allowed frames ("+this.options.frame_max+").");return}var d="#frame-"+(this.frame_counter_id++);if($(d).length!==0){alert("This frame already exists. This page might contain multiple frame managers.");return}this.top=this.options.top_min;var e=null;if(c.type==="url"){e=$(this._templateFrameUrl(d.substring(1),c.title,c.content))}else{if(c.type==="other"){e=$(this._templateFrame(d.substring(1),c.title));var b=e.find(".f-content");if(_.isFunction(c.content)){c.content(b)}else{b.append(c.content)}}}$(this.el).append(e);var g={id:d,screen_location:{},grid_location:{},grid_rank:null,grid_lock:false};c.width=this._toPixelCoord("width",this.options.frame.cols);c.height=this._toPixelCoord("height",this.options.frame.rows);this.frame_z=parseInt($(g.id).css("z-index"));this.frame_list[d]=g;this.frame_counter++;this._frameResize(g,{width:c.width,height:c.height});this._frameInsert(g,{top:0,left:0},true);if(!this.visible){this.show()}},show:function(){this.visible=true;this.$el.find(".frame").fadeIn("fast");this.$el.find(this.frame_shadow.id).hide();this.$el.find(".frame-background").show();this._panelRefresh();this._menuRefresh()},hide:function(){if(this.event.type!==null){return}this.visible=false;this.$el.find(".frame").fadeOut("fast");this.$el.find(".frame-background").hide();this.$el.find(".frame-menu").hide();this._menuRefresh()},length:function(){return this.frame_counter},setOnChange:function(b){this.options.onchange=b},event:{type:null,target:null,xy:null},events:{mousemove:"_eventFrameMouseMove",mouseup:"_eventFrameMouseUp",mouseleave:"_eventFrameMouseUp",mousewheel:"_eventPanelScroll",DOMMouseScroll:"_eventPanelScroll","mousedown .frame":"_eventFrameMouseDown","mousedown .frame-background":"_eventHide","mousedown .frame-scroll-up":"_eventPanelScroll_up","mousedown .frame-scroll-down":"_eventPanelScroll_down","mousedown .f-close":"_eventFrameClose","mousedown .f-pin":"_eventFrameLock"},_eventFrameMouseDown:function(b){if(this.event.type!==null){return}if($(b.target).hasClass("f-header")||$(b.target).hasClass("f-title")){this.event.type="drag"}if($(b.target).hasClass("f-resize")){this.event.type="resize"}if(this.event.type===null){return}b.preventDefault();this.event.target=this._frameIdentify(b.target);if(this.event.target.grid_lock){this.event.type=null;return}this.event.xy={x:b.originalEvent.pageX,y:b.originalEvent.pageY};this._frameDragStart(this.event.target)},_eventFrameMouseMove:function(h){if(this.event.type!="drag"&&this.event.type!="resize"){return}var f={x:h.originalEvent.pageX,y:h.originalEvent.pageY};var c={x:f.x-this.event.xy.x,y:f.y-this.event.xy.y};this.event.xy=f;var g=this._frameScreen(this.event.target);if(this.event.type=="resize"){g.width+=c.x;g.height+=c.y;var d=this.options.cell-this.options.margin-1;g.width=Math.max(g.width,d);g.height=Math.max(g.height,d);this._frameResize(this.event.target,g);g.width=this._toGridCoord("width",g.width)+1;g.height=this._toGridCoord("height",g.height)+1;g.width=this._toPixelCoord("width",g.width);g.height=this._toPixelCoord("height",g.height);this._frameResize(this.frame_shadow,g);this._frameInsert(this.frame_shadow,{top:this._toGridCoord("top",g.top),left:this._toGridCoord("left",g.left)})}if(this.event.type=="drag"){g.left+=c.x;g.top+=c.y;this._frameOffset(this.event.target,g);var b={top:this._toGridCoord("top",g.top),left:this._toGridCoord("left",g.left)};if(b.left!==0){b.left++}this._frameInsert(this.frame_shadow,b)}},_eventFrameMouseUp:function(b){if(this.event.type!="drag"&&this.event.type!="resize"){return}this._frameDragStop(this.event.target);this.event.type=null},_eventFrameClose:function(c){if(this.event.type!==null){return}c.preventDefault();var d=this._frameIdentify(c.target);var b=this;$(d.id).fadeOut("fast",function(){$(d.id).remove();delete b.frame_list[d.id];b.frame_counter--;b._panelRefresh(true);b._panelAnimationComplete();if(b.visible&&b.frame_counter==0){b.hide()}})},_eventFrameLock:function(b){if(this.event.type!==null){return}b.preventDefault();var c=this._frameIdentify(b.target);if(c.grid_lock){c.grid_lock=false;$(c.id).find(".f-pin").removeClass("toggle");$(c.id).find(".f-header").removeClass("f-not-allowed");$(c.id).find(".f-title").removeClass("f-not-allowed");$(c.id).find(".f-resize").show();$(c.id).find(".f-close").show()}else{c.grid_lock=true;$(c.id).find(".f-pin").addClass("toggle");$(c.id).find(".f-header").addClass("f-not-allowed");$(c.id).find(".f-title").addClass("f-not-allowed");$(c.id).find(".f-resize").hide();$(c.id).find(".f-close").hide()}},_eventHide:function(b){if(this.event.type!==null){return}this.hide()},_eventPanelScroll:function(b){if(this.event.type!==null||!this.visible){return}var c=$(b.srcElement).parents(".frame");if(c.length!==0){b.stopPropagation();return}b.preventDefault();var d=b.originalEvent.detail?b.originalEvent.detail:b.originalEvent.wheelDelta/-3;this._panelScroll(d)},_eventPanelScroll_up:function(b){if(this.event.type!==null){return}b.preventDefault();this._panelScroll(-this.options.scroll)},_eventPanelScroll_down:function(b){if(this.event.type!==null){return}b.preventDefault();this._panelScroll(this.options.scroll)},_frameIdentify:function(b){return this.frame_list["#"+$(b).closest(".frame").attr("id")]},_frameDragStart:function(c){this._frameFocus(c,true);var b=this._frameScreen(c);this._frameResize(this.frame_shadow,b);this._frameGrid(this.frame_shadow,c.grid_location);c.grid_location=null;$(this.frame_shadow.id).show();$(".f-cover").show()},_frameDragStop:function(c){this._frameFocus(c,false);var b=this._frameScreen(this.frame_shadow);this._frameResize(c,b);this._frameGrid(c,this.frame_shadow.grid_location,true);this.frame_shadow.grid_location=null;$(this.frame_shadow.id).hide();$(".f-cover").hide();this._panelAnimationComplete()},_toGridCoord:function(d,c){var b=(d=="width"||d=="height")?1:-1;if(d=="top"){c-=this.top}return parseInt((c+b*this.options.margin)/this.options.cell,10)},_toPixelCoord:function(d,e){var b=(d=="width"||d=="height")?1:-1;var c=(e*this.options.cell)-b*this.options.margin;if(d=="top"){c+=this.top}return c},_toGrid:function(b){return{top:this._toGridCoord("top",b.top),left:this._toGridCoord("left",b.left),width:this._toGridCoord("width",b.width),height:this._toGridCoord("height",b.height)}},_toPixel:function(b){return{top:this._toPixelCoord("top",b.top),left:this._toPixelCoord("left",b.left),width:this._toPixelCoord("width",b.width),height:this._toPixelCoord("height",b.height)}},_isCollision:function(d){function b(g,f){return !(g.left>f.left+f.width-1||g.left+g.width-1f.top+f.height-1||g.top+g.height-1l?1:0)});for(e=0;e
'},_templateFrame:function(c,b){if(!b){b=""}return'
'+b+'
'},_templateFrameUrl:function(e,d,b){if(b.indexOf("?")==-1){b+="?"}else{b+="&"}b+="widget=True";var c=$(this._templateFrame(e,d));c.find(".f-content").append('');return c},_templateShadow:function(b){return'
'},_templateBackground:function(){return'
'},_templateMenu:function(){return'
'}});return{View:a}}); \ No newline at end of file diff --git a/static/style/blue/base.css b/static/style/blue/base.css index 46afa3b18d4..a9bea733fb5 100644 --- a/static/style/blue/base.css +++ b/static/style/blue/base.css @@ -1278,6 +1278,8 @@ label{font-weight:normal} .upload-ftp .upload-ftp-help{margin-bottom:10px} .upload-ftp .upload-ftp-warning{text-align:center;margin-top:20px} .upload-settings .upload-settings-cover{position:absolute;width:100%;height:100%;top:0px;left:0px;background:#fff;opacity:0.4;cursor:no-drop} +.ui-table-row-error{-moz-border-radius:3px;border-radius:3px;background:#f9c7c5;padding:5px} +.ui-table-form-error{display:none}.ui-table-form-error .ui-table-form-error-text{padding-left:5px} .ui-form-slider .ui-form-slider-text{width:100px;float:left} .ui-form-slider .ui-form-slider-element{width:calc(100% - 110px);float:left;top:8px;left:10px} .ui-radiobutton label{height:23px;line-height:1em} diff --git a/static/style/src/less/frame.less b/static/style/src/less/frame.less index 453fffefa76..3568e3092a4 100644 --- a/static/style/src/less/frame.less +++ b/static/style/src/less/frame.less @@ -1,18 +1,14 @@ -.galaxy-frame -{ - .corner - { +.galaxy-frame{ + .corner { -moz-border-radius: @border-radius-large; border-radius: @border-radius-large; } - .toggle - { + .toggle { color: gold; } - .frame-background - { + .frame-background { z-index : @zindex-navbar; position : absolute; display : none; @@ -25,8 +21,7 @@ overflow : auto; } - .frame-shadow - { + .frame-shadow { z-index : @zindex-navbar + 1; position : absolute; display : none; @@ -40,8 +35,7 @@ /* panel menu button */ - .frame-menu - { + .frame-menu { z-index : @zindex-navbar + 5; position : absolute; cursor : pointer; @@ -49,13 +43,11 @@ right : 10px; } - .frame-scroll-up - { + .frame-scroll-up { top : 50px; } - .frame-scroll-down - { + .frame-scroll-down { bottom : 20px; } @@ -63,8 +55,7 @@ frame components */ - .frame - { + .frame { z-index : @zindex-navbar + 2; overflow : hidden; position : absolute; @@ -72,8 +63,7 @@ border : 1px solid @navbar-default-border; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); - .f-content - { + .f-content{ position : absolute; overflow : hidden; background : @white; @@ -84,8 +74,7 @@ right : 3px; } - .f-cover - { + .f-cover{ position : absolute; display : none; top : 0px; @@ -96,15 +85,13 @@ background : @white; } - .f-iframe - { + .f-iframe{ border : none; width : 100%; height : 100%; } - .f-header - { + .f-header{ height : 17px; margin : 2px; cursor : pointer; @@ -113,8 +100,7 @@ color : @white; } - .f-title - { + .f-title { position : absolute; top : 2px; left : 16px; @@ -128,32 +114,27 @@ frame icons */ - .f-icon - { + .f-icon{ position : absolute; cursor : pointer; font-size : 14px; } - .f-not-allowed - { + .f-not-allowed{ cursor : not-allowed; } - .f-close - { + .f-close{ right : 5px; top : 3px; } - .f-pin - { + .f-pin{ left : 6px; top : 3px; } - .f-resize - { + .f-resize{ right : 0px; bottom : 0px; background : @white; diff --git a/static/style/src/less/ui.less b/static/style/src/less/ui.less index 9c4052e3154..9f3e664bee6 100644 --- a/static/style/src/less/ui.less +++ b/static/style/src/less/ui.less @@ -1,3 +1,17 @@ +.ui-table-row-error { + -moz-border-radius: @border-radius-base; + border-radius: @border-radius-base; + background: @state-danger-bg; + padding: 5px; +} + +.ui-table-form-error { + display: none; + .ui-table-form-error-text { + padding-left: 5px; + } +} + .ui-form-slider { .ui-form-slider-text { &:extend(.form-control);