diff --git a/client/galaxy/scripts/mvc/ui/ui-button-check.js b/client/galaxy/scripts/mvc/ui/ui-button-check.js
index 0b40ca6c3b1..d18a7c1a915 100644
--- a/client/galaxy/scripts/mvc/ui/ui-button-check.js
+++ b/client/galaxy/scripts/mvc/ui/ui-button-check.js
@@ -53,11 +53,11 @@ return Backbone.View.extend({
}
}
}
+ this.current = new_val;
this.$icon.removeClass()
.addClass('icon')
.addClass(this.options.icons[new_val]);
this.options.onchange && this.options.onchange(new_val);
- this.current = new_val;
}
return this.current;
},
diff --git a/client/galaxy/scripts/mvc/ui/ui-button-menu.js b/client/galaxy/scripts/mvc/ui/ui-button-menu.js
index 3e457660098..a52b1335143 100644
--- a/client/galaxy/scripts/mvc/ui/ui-button-menu.js
+++ b/client/galaxy/scripts/mvc/ui/ui-button-menu.js
@@ -23,54 +23,54 @@ return Backbone.View.extend({
visible : true,
tag : ''
},
-
+
// optional sub menu
$menu: null,
-
+
// initialize
initialize: function (options) {
// get options
this.options = Utils.merge(options, this.optionsDefault);
-
+
// add template for tab
this.setElement($(this._template(this.options)));
-
+
// find root
var $root = $(this.el).find('.root');
-
+
// link head
var self = this;
$root.on('click', function(e) {
// hide all tooltips
$('.tooltip').hide();
-
+
// prevent default
e.preventDefault();
-
+
// add click event
if(self.options.onclick) {
self.options.onclick();
}
});
-
+
// visiblity
if (!this.options.visible)
this.hide();
-
+
// add tooltip
$root.tooltip({title: options.tooltip, placement: 'bottom'});
},
-
+
// show
show: function() {
$(this.el).show();
},
-
+
// hide
hide: function() {
$(this.el).hide();
},
-
+
// add menu item
addMenu: function (options) {
// menu option defaults
@@ -83,41 +83,41 @@ return Backbone.View.extend({
icon : null,
cls : 'button-menu btn-group'
}
-
+
// get options
menuOptions = Utils.merge(options, menuOptions);
-
+
// check if submenu element is available
if (!this.$menu) {
// insert submenu element into root
$(this.el).append(this._templateMenu());
-
+
// update element link
this.$menu = $(this.el).find('.menu');
}
-
+
// create
var $item = $(this._templateMenuItem(menuOptions));
-
+
// add events
$item.on('click', function(e) {
// prevent default
e.preventDefault();
-
+
// add click event
if(menuOptions.onclick) {
menuOptions.onclick();
}
});
-
+
// append menu
this.$menu.append($item);
-
+
// append divider
if (menuOptions.divider)
this.$menu.append($(this._templateDivider()));
},
-
+
// fill template header
_templateMenuItem: function (options) {
var tmpl = '
' +
@@ -131,16 +131,16 @@ return Backbone.View.extend({
'';
return tmpl;
},
-
+
// fill template header
_templateMenu: function () {
return '';
},
-
+
_templateDivider: function() {
return '';
},
-
+
// element
_template: function(options) {
// TODO: width/margin should be set in css
@@ -151,17 +151,17 @@ return Backbone.View.extend({
} else {
margin = 'margin: 0px;';
}
-
+
// create base string
var str = '' +
'
' +
'';
-
+
// title
if (options.title) {
str += ' ' + options.title + '';
}
-
+
// finalize
str += '
' +
'
';
diff --git a/client/galaxy/scripts/mvc/ui/ui-frames.js b/client/galaxy/scripts/mvc/ui/ui-frames.js
index 8378ad822a8..9d7e58037e4 100644
--- a/client/galaxy/scripts/mvc/ui/ui-frames.js
+++ b/client/galaxy/scripts/mvc/ui/ui-frames.js
@@ -13,81 +13,81 @@ var View = Backbone.View.extend({
// maximum number of rows
rows: 1000,
-
+
// cell size in px
cell: 130,
-
+
// margin
margin: 5,
-
+
// scroll speed
scroll: 5,
-
+
// minimum top
top_min: 40,
-
+
// maximum number of frames
frame_max: 9,
-
+
// visible
visible: true,
-
+
// onchange
onchange: null
},
-
+
// number of columns
cols: 0,
-
+
// scroll/element top
top: 0,
-
+
// viewport scrolling state
top_max: 0,
-
+
// frame z-index
frame_z : 0,
-
+
// frame counter
frame_counter: 0,
-
+
// frame counter
frame_counter_id: 0,
-
+
// frame list
frame_list: [],
-
+
// frame shadow
frame_shadow: null,
-
+
// frame panel visible
visible: null,
-
+
// initialize
initialize : function(options) {
// add to masthead menu
var self = this;
-
+
// read in defaults
if (options) {
this.options = _.defaults(options, this.options);
}
-
+
// set visibility
this.visible = this.options.visible;
-
+
// initialize top
this.top = this.top_max = this.options.top_min;
-
+
// create
this.setElement(this._template());
-
+
// load background
$(this.el).append(this._templateBackground());
-
+
// load menu buttons
$(this.el).append(this._templateMenu());
-
+
// load to main frame
$(this.el_main).append($(this.el));
@@ -107,23 +107,23 @@ var View = Backbone.View.extend({
grid_rank : null,
grid_lock : false
};
-
+
// initialize size
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._panelRefresh();
-
+
// apply visibility
if (!this.visible) {
this.hide();
} else {
this.show();
}
-
+
// catch window resize event
var self = this;
$(window).resize(function () {
@@ -131,7 +131,7 @@ var View = Backbone.View.extend({
self._panelRefresh();
});
},
-
+
/**
* Adds and displays a new frame.
*
@@ -149,19 +149,19 @@ var View = Backbone.View.extend({
target: '',
type: null
};
-
+
// read in defaults
if (options) {
options = _.defaults(options, frameOptions);
} else {
options = frameOptions;
}
-
+
// check for content
if(!options.content) {
return;
}
-
+
// check for number of frames
if (this.frame_counter >= this.options.frame_max) {
alert("You have reached the maximum number of allowed frames (" + this.options.frame_max + ").");
@@ -176,7 +176,7 @@ var View = Backbone.View.extend({
alert("This frame already exists. This page might contain multiple frame managers.");
return;
}
-
+
// reset top
this.top = this.options.top_min;
@@ -197,7 +197,7 @@ var View = Backbone.View.extend({
}
}
$(this.el).append($frame_el);
-
+
// construct a new frame
var frame = {
id : frame_id,
@@ -206,14 +206,14 @@ var View = Backbone.View.extend({
grid_rank : null,
grid_lock : false
};
-
+
// set dimensions
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'));
-
+
// add to frame list
this.frame_list[frame_id] = frame;
@@ -222,55 +222,55 @@ var View = Backbone.View.extend({
// resize
this._frameResize(frame, {width: options.width, height: options.height});
-
+
// place frame
this._frameInsert(frame, {top: 0, left: 0}, true);
-
+
// show frames if hidden
if (!this.visible) {
this.show();
}
},
-
+
// show panel
show: function() {
// show
this.visible = true;
-
+
// show
this.$el.find(".frame").fadeIn('fast');
-
+
// hide shadow
this.$el.find(this.frame_shadow.id).hide();
-
+
// show background
this.$el.find(".frame-background").show();
-
+
// show panel
this._panelRefresh();
-
+
// refresh
this._menuRefresh();
},
-
+
// hide panel
hide: function() {
// make sure that no event is currently processing
if (this.event.type !== null)
return;
-
+
// hide
this.visible = false;
-
+
// hide
this.$el.find(".frame").fadeOut('fast');
-
+
// hide background
this.$el.find(".frame-background").hide();
-
+
// hide menu
this.$el.find(".frame-menu").hide();
-
+
// refresh
this._menuRefresh();
},
@@ -279,23 +279,23 @@ var View = Backbone.View.extend({
length: function() {
return this.frame_counter;
},
-
+
// set onchange event
setOnChange: function(callback) {
this.options.onchange = callback;
},
-
+
/*
EVENT HANDLING
*/
-
+
// event
event: {
type : null,
target : null,
xy : null
},
-
+
// events
events: {
// global frame events
@@ -304,7 +304,7 @@ var View = Backbone.View.extend({
'mouseleave' : '_eventFrameMouseUp',
'mousewheel' : '_eventPanelScroll',
'DOMMouseScroll' : '_eventPanelScroll',
-
+
// events fixed to elements
'mousedown .frame' : '_eventFrameMouseDown',
'mousedown .frame-background' : '_eventHide',
@@ -320,17 +320,17 @@ var View = Backbone.View.extend({
if (this.event.type !== null) {
return;
}
-
+
// check for drag event
if ($(e.target).hasClass('f-header') || $(e.target).hasClass('f-title')) {
this.event.type = 'drag';
}
-
+
// check for resize event
if ($(e.target).hasClass('f-resize')) {
this.event.type = 'resize';
}
-
+
// skip if no event has to be handled
if (this.event.type === null) {
return;
@@ -338,22 +338,22 @@ var View = Backbone.View.extend({
// prevent
e.preventDefault();
-
+
// identify frame
this.event.target = this._frameIdentify(e.target);
-
+
// check if frame is locked
if (this.event.target.grid_lock) {
this.event.type = null;
return;
}
-
+
// backup event details
this.event.xy = {
x: e.originalEvent.pageX,
y: e.originalEvent.pageY
};
-
+
// prepare drag/resize
this._frameDragStart(this.event.target);
},
@@ -364,63 +364,63 @@ var View = Backbone.View.extend({
if (this.event.type != 'drag' && this.event.type != 'resize') {
return;
}
-
+
// current position
var event_xy_new = {
x : e.originalEvent.pageX,
y : e.originalEvent.pageY
};
-
+
// position delta
var event_xy_delta = {
x : event_xy_new.x - this.event.xy.x,
y : event_xy_new.y - this.event.xy.y
};
-
+
// update
this.event.xy = event_xy_new;
// object position / size
var p = this._frameScreen (this.event.target);
-
+
// resize event
if (this.event.type == 'resize') {
// update
p.width += event_xy_delta.x;
p.height += event_xy_delta.y;
-
+
// check size
var min_dim = this.options.cell - this.options.margin - 1;
p.width = Math.max(p.width, min_dim);
p.height = Math.max(p.height, min_dim);
-
+
// apply resize to frame
this._frameResize(this.event.target, p);
-
+
// break down to grid coordinates
p.width = this._toGridCoord('width', p.width) + 1;
p.height = this._toGridCoord('height', p.height) + 1;
-
+
// transfer back to pixels
p.width = this._toPixelCoord('width', p.width);
p.height = this._toPixelCoord('height', p.height);
-
+
// apply
this._frameResize(this.frame_shadow, p);
-
+
// fix position
this._frameInsert(this.frame_shadow, {
top : this._toGridCoord('top', p.top),
left : this._toGridCoord('left', p.left)
});
}
-
+
// drag event
if (this.event.type == 'drag') {
// update
p.left += event_xy_delta.x;
p.top += event_xy_delta.y;
-
+
// apply
this._frameOffset(this.event.target, p);
@@ -429,86 +429,86 @@ var View = Backbone.View.extend({
top : this._toGridCoord('top', p.top),
left : this._toGridCoord('left', p.left)
};
-
+
// increase priority of current frame
if (l.left !== 0) {
l.left++;
}
-
+
// fix position
this._frameInsert(this.frame_shadow, l);
}
},
-
+
// mouse up
_eventFrameMouseUp: function (e) {
// check
if (this.event.type != 'drag' && this.event.type != 'resize') {
return;
}
-
+
// stop
this._frameDragStop(this.event.target);
-
+
// reset event
this.event.type = null;
},
-
+
// drag start
_eventFrameClose: function (e) {
// check
if (this.event.type !== null) {
return;
}
-
+
// prevent
e.preventDefault();
// get frame
var frame = this._frameIdentify(e.target);
var self = this;
-
+
// fade out
$(frame.id).fadeOut('fast', function() {
// remove element
$(frame.id).remove();
-
+
// remove from dictionary
delete self.frame_list[frame.id];
-
+
// reduce frame counter
self.frame_counter--;
-
+
// reload
self._panelRefresh(true);
-
+
// refresh scroll state once all animations completed
self._panelAnimationComplete();
-
+
// hide if no frames left
if (self.visible && self.frame_counter == 0)
self.hide();
});
},
-
+
// drag start
_eventFrameLock: function (e) {
// check
if (this.event.type !== null) {
return;
}
-
+
// prevent
e.preventDefault();
// get frame
var frame = this._frameIdentify(e.target);
-
+
// check
if (frame.grid_lock) {
// unlock
frame.grid_lock = false;
-
+
// remove class
$(frame.id).find('.f-pin').removeClass('toggle');
$(frame.id).find('.f-header').removeClass('f-not-allowed');
@@ -518,7 +518,7 @@ var View = Backbone.View.extend({
} else {
// lock
frame.grid_lock = true;
-
+
// add class
$(frame.id).find('.f-pin').addClass('toggle');
$(frame.id).find('.f-header').addClass('f-not-allowed');
@@ -538,7 +538,7 @@ var View = Backbone.View.extend({
// hide panel
this.hide();
},
-
+
/**
* Fired when scrolling occurs on panel.
*/
@@ -561,11 +561,11 @@ var View = Backbone.View.extend({
// get wheel delta
var delta = e.originalEvent.detail ? e.originalEvent.detail : e.originalEvent.wheelDelta / -3;
-
+
// refresh panel
this._panelScroll(delta);
},
-
+
// scroll up
_eventPanelScroll_up: function(e) {
// check
@@ -578,24 +578,24 @@ var View = Backbone.View.extend({
// scroll up
this._panelScroll(-this.options.scroll);
},
-
+
// scroll down
_eventPanelScroll_down: function(e) {
// check
if (this.event.type !== null)
return;
-
+
// prevent
e.preventDefault();
-
+
// scroll down
this._panelScroll(this.options.scroll);
},
-
+
/*
FRAME EVENTS SUPPORT
*/
-
+
// identify
_frameIdentify: function(target) {
return this.frame_list['#' + $(target).closest('.frame').attr('id')];
@@ -605,80 +605,70 @@ var View = Backbone.View.extend({
_frameDragStart : function (frame) {
// set focus
this._frameFocus(frame, true);
-
+
// get current dimensions
var p = this._frameScreen (frame);
-
+
// initialize shadow
this._frameResize(this.frame_shadow, p);
this._frameGrid(this.frame_shadow, frame.grid_location);
-
+
// reset location
frame.grid_location = null;
-
+
// show shadow
$(this.frame_shadow.id).show();
-
+
// load frame cover
$('.f-cover').show();
},
-
+
// drag stop
_frameDragStop : function (frame) {
// remove focus
this._frameFocus(frame, false);
-
+
// get new dimensions
var p = this._frameScreen(this.frame_shadow);
-
+
// update frame
this._frameResize(frame, p);
this._frameGrid(frame, this.frame_shadow.grid_location, true);
-
+
// reset location of shadow
this.frame_shadow.grid_location = null;
// hide shadow
$(this.frame_shadow.id).hide();
-
+
// hide frame cover
$('.f-cover').hide();
-
+
// refresh scroll state once all animations completed
this._panelAnimationComplete();
},
-
+
/*
GRID/PIXEL CONVERTER
*/
-
+
// converts a pixel coordinate to grids
_toGridCoord: function (type, px) {
- // determine sign
var sign = (type == 'width' || type == 'height') ? 1 : -1;
-
if (type == 'top') px -= this.top;
-
- // return
return parseInt((px + sign * this.options.margin) / this.options.cell, 10);
},
// converts a grid coordinate to pixels
_toPixelCoord: function (type, g) {
- // determine sign
var sign = (type == 'width' || type == 'height') ? 1 : -1;
-
- // return
var px = (g * this.options.cell) - sign * this.options.margin;
-
if (type == 'top') px += this.top;
-
return px;
},
-
+
// get grid coordinates
_toGrid: function (px) {
- // full set
return {
top : this._toGridCoord('top', px.top),
left : this._toGridCoord('left', px.left),
@@ -686,7 +676,7 @@ var View = Backbone.View.extend({
height : this._toGridCoord('height', px.height)
};
},
-
+
// get pixel coordinates
_toPixel: function(g) {
return {
@@ -700,7 +690,7 @@ var View = Backbone.View.extend({
/*
COLLISION DETECTION
*/
-
+
// check collision
_isCollision: function(g) {
// is collision pair
@@ -708,7 +698,7 @@ var View = Backbone.View.extend({
return !(a.left > b.left + b.width - 1 || a.left + a.width - 1 < b.left ||
a.top > b.top + b.height - 1 || a.top + a.height - 1 < b.top);
}
-
+
// search
for (var i in this.frame_list) {
// get frame
@@ -722,20 +712,20 @@ var View = Backbone.View.extend({
if (is_collision_pair (g, frame.grid_location))
return true;
}
-
+
// return
return false;
},
-
+
// location/grid rank
_locationRank: function(loc) {
return (loc.top * this.cols) + loc.left;
},
-
+
/*
ONSCREEN MENU
*/
-
+
// update frame counter
_menuRefresh: function() {
// scroll up possible?
@@ -744,20 +734,20 @@ var View = Backbone.View.extend({
$(".frame-scroll-up").hide();
else
$(".frame-scroll-up").show();
-
+
// scroll down possible?
if (this.top == this.top_max)
$(".frame-scroll-down").hide();
else
$(".frame-scroll-down").show();
}
-
+
// trigger onchange
if (this.options.onchange) {
this.options.onchange();
}
},
-
+
/*
PANEL/WINDOW FUNCTIONS
*/
@@ -772,11 +762,11 @@ var View = Backbone.View.extend({
_panelRefresh: function(animate) {
// get current size
this.cols = parseInt($(window).width() / this.options.cell, 10) + 1;
-
+
// recalculate frame positions
this._frameInsert(null, null, animate);
},
-
+
// update scroll
_panelScroll: function(delta, animate) {
// new top value
@@ -785,7 +775,7 @@ var View = Backbone.View.extend({
// update top
top_new = Math.max(top_new, this.top_max);
top_new = Math.min(top_new, this.options.top_min);
-
+
// update screen if necessary
if (this.top != top_new) {
// update screen
@@ -802,33 +792,33 @@ var View = Backbone.View.extend({
this._frameOffset(frame, screen_location, animate);
}
}
-
+
// update top value
this.top = top_new;
}
-
+
// refresh
this._menuRefresh();
},
-
+
/*
FRAME FUNCTIONS
*/
-
+
// frame insert at given location
_frameInsert: function(frame, new_loc, animate) {
// define
var place_list = [];
-
+
// frame to place
if (frame) {
// reset grid location
frame.grid_location = null;
-
+
// set first one to be placed
place_list.push([frame, this._locationRank(new_loc)]);
}
-
+
// search
var i = null;
for (i in this.frame_list) {
@@ -839,7 +829,7 @@ var View = Backbone.View.extend({
if (f.grid_location !== null && !f.grid_lock) {
// reset grid location
f.grid_location = null;
-
+
// set up for placement
place_list.push([f, f.grid_rank]);
}
@@ -851,12 +841,12 @@ var View = Backbone.View.extend({
var j = b[1];
return i < j ? -1 : (i > j ? 1 : 0);
});
-
+
// place
for (i = 0; i < place_list.length; i++) {
this._framePlace(place_list[i][0], animate);
}
-
+
// identify maximum viewport size
this.top_max = 0;
for (var i in this.frame_list) {
@@ -867,13 +857,13 @@ var View = Backbone.View.extend({
if (frame.grid_location !== null)
this.top_max = Math.max(this.top_max, frame.grid_location.top + frame.grid_location.height);
}
-
+
// mesh maximum top with window size and margin
this.top_max = $(window).height() - this.top_max * this.options.cell - 2 * this.options.margin;
-
+
// fix value
this.top_max = Math.min(this.top_max, this.options.top_min);
-
+
// panel menu
this._menuRefresh();
},
@@ -882,10 +872,10 @@ var View = Backbone.View.extend({
_framePlace: function(frame, animate) {
// reset grid location
frame.grid_location = null;
-
+
// grid coordinates of new frame
var g = this._toGrid(this._frameScreen(frame));
-
+
// try grid coordinates
var done = false;
for (var i = 0; i < this.options.rows; i++) {
@@ -894,20 +884,20 @@ var View = Backbone.View.extend({
// coordinates
g.top = i;
g.left = j;
-
+
// no collision
if (!this._isCollision(g)) {
done = true;
break;
}
}
-
+
// break
if (done) {
break;
}
}
-
+
// check if valid spot was found
if (done) {
this._frameGrid(frame, g, animate);
@@ -915,46 +905,44 @@ var View = Backbone.View.extend({
console.log("Grid dimensions exceeded.");
}
},
-
+
// focus
_frameFocus: function(frame, has_focus) {
// get new z-value
var z = this.frame_z + (has_focus ? 1 : 0);
-
+
// update
$(frame.id).css('z-index', z);
},
-
+
// new left/top position frame
_frameOffset: function(frame, p, animate) {
// update screen location
frame.screen_location.left = p.left;
frame.screen_location.top = p.top;
-
+
// animate
if (animate) {
// set focus on animated
this._frameFocus(frame, true);
-
+
// prepare for callback
var self = this;
-
+
// animate and remove focus
- $(frame.id).animate({top: p.top, left: p.left}, 'fast', function()
- {
- // remove focus
+ $(frame.id).animate({top: p.top, left: p.left}, 'fast', function() {
self._frameFocus(frame, false);
});
- } else
- // update css
+ } else {
$(frame.id).css({top: p.top, left: p.left});
+ }
},
// resize frame
_frameResize: function(frame, p) {
// update css
$(frame.id).css({width: p.width, height: p.height});
-
+
// update descriptor
frame.screen_location.width = p.width;
frame.screen_location.height = p.height;
@@ -967,26 +955,26 @@ var View = Backbone.View.extend({
// place frame
this._frameOffset(frame, this._toPixel(l), animate);
-
+
// update grid rank
frame.grid_rank = this._locationRank(l);
},
-
+
// get frame dimensions
_frameScreen: function(frame) {
var p = frame.screen_location;
return {top: p.top, left: p.left, width: p.width, height: p.height};
},
-
+
/*
HTML TEMPLATES
*/
-
+
// main element
_template: function() {
return '';
},
-
+
// fill regular frame template
_templateFrame: function(id, title) {
// check title
@@ -1006,7 +994,7 @@ var View = Backbone.View.extend({
'' +
'';
},
-
+
// fill regular frame template
_templateFrameUrl: function(id, title, url) {
// url
@@ -1015,25 +1003,25 @@ var View = Backbone.View.extend({
else
url += '&';
url += 'widget=True';
-
+
// element
var $el = $(this._templateFrame(id, title));
$el.find('.f-content').append('');
-
+
// load template
return $el;
},
-
+
// fill shadow template
_templateShadow: function(id) {
return '';
},
-
+
// fill background template in order to cover underlying iframes
_templateBackground: function() {
return '';
},
-
+
// fill menu button template
_templateMenu: function() {
return '' +
diff --git a/static/scripts/mvc/ui/ui-button-check.js b/static/scripts/mvc/ui/ui-button-check.js
index 0b40ca6c3b1..d18a7c1a915 100644
--- a/static/scripts/mvc/ui/ui-button-check.js
+++ b/static/scripts/mvc/ui/ui-button-check.js
@@ -53,11 +53,11 @@ return Backbone.View.extend({
}
}
}
+ this.current = new_val;
this.$icon.removeClass()
.addClass('icon')
.addClass(this.options.icons[new_val]);
this.options.onchange && this.options.onchange(new_val);
- this.current = new_val;
}
return this.current;
},
diff --git a/static/scripts/mvc/ui/ui-button-menu.js b/static/scripts/mvc/ui/ui-button-menu.js
index 3e457660098..a52b1335143 100644
--- a/static/scripts/mvc/ui/ui-button-menu.js
+++ b/static/scripts/mvc/ui/ui-button-menu.js
@@ -23,54 +23,54 @@ return Backbone.View.extend({
visible : true,
tag : ''
},
-
+
// optional sub menu
$menu: null,
-
+
// initialize
initialize: function (options) {
// get options
this.options = Utils.merge(options, this.optionsDefault);
-
+
// add template for tab
this.setElement($(this._template(this.options)));
-
+
// find root
var $root = $(this.el).find('.root');
-
+
// link head
var self = this;
$root.on('click', function(e) {
// hide all tooltips
$('.tooltip').hide();
-
+
// prevent default
e.preventDefault();
-
+
// add click event
if(self.options.onclick) {
self.options.onclick();
}
});
-
+
// visiblity
if (!this.options.visible)
this.hide();
-
+
// add tooltip
$root.tooltip({title: options.tooltip, placement: 'bottom'});
},
-
+
// show
show: function() {
$(this.el).show();
},
-
+
// hide
hide: function() {
$(this.el).hide();
},
-
+
// add menu item
addMenu: function (options) {
// menu option defaults
@@ -83,41 +83,41 @@ return Backbone.View.extend({
icon : null,
cls : 'button-menu btn-group'
}
-
+
// get options
menuOptions = Utils.merge(options, menuOptions);
-
+
// check if submenu element is available
if (!this.$menu) {
// insert submenu element into root
$(this.el).append(this._templateMenu());
-
+
// update element link
this.$menu = $(this.el).find('.menu');
}
-
+
// create
var $item = $(this._templateMenuItem(menuOptions));
-
+
// add events
$item.on('click', function(e) {
// prevent default
e.preventDefault();
-
+
// add click event
if(menuOptions.onclick) {
menuOptions.onclick();
}
});
-
+
// append menu
this.$menu.append($item);
-
+
// append divider
if (menuOptions.divider)
this.$menu.append($(this._templateDivider()));
},
-
+
// fill template header
_templateMenuItem: function (options) {
var tmpl = '' +
@@ -131,16 +131,16 @@ return Backbone.View.extend({
'';
return tmpl;
},
-
+
// fill template header
_templateMenu: function () {
return '';
},
-
+
_templateDivider: function() {
return '';
},
-
+
// element
_template: function(options) {
// TODO: width/margin should be set in css
@@ -151,17 +151,17 @@ return Backbone.View.extend({
} else {
margin = 'margin: 0px;';
}
-
+
// create base string
var str = '' +
'
' +
'';
-
+
// title
if (options.title) {
str += ' ' + options.title + '';
}
-
+
// finalize
str += '
' +
'
';
diff --git a/static/scripts/mvc/ui/ui-frames.js b/static/scripts/mvc/ui/ui-frames.js
index 8378ad822a8..9d7e58037e4 100644
--- a/static/scripts/mvc/ui/ui-frames.js
+++ b/static/scripts/mvc/ui/ui-frames.js
@@ -13,81 +13,81 @@ var View = Backbone.View.extend({
// maximum number of rows
rows: 1000,
-
+
// cell size in px
cell: 130,
-
+
// margin
margin: 5,
-
+
// scroll speed
scroll: 5,
-
+
// minimum top
top_min: 40,
-
+
// maximum number of frames
frame_max: 9,
-
+
// visible
visible: true,
-
+
// onchange
onchange: null
},
-
+
// number of columns
cols: 0,
-
+
// scroll/element top
top: 0,
-
+
// viewport scrolling state
top_max: 0,
-
+
// frame z-index
frame_z : 0,
-
+
// frame counter
frame_counter: 0,
-
+
// frame counter
frame_counter_id: 0,
-
+
// frame list
frame_list: [],
-
+
// frame shadow
frame_shadow: null,
-
+
// frame panel visible
visible: null,
-
+
// initialize
initialize : function(options) {
// add to masthead menu
var self = this;
-
+
// read in defaults
if (options) {
this.options = _.defaults(options, this.options);
}
-
+
// set visibility
this.visible = this.options.visible;
-
+
// initialize top
this.top = this.top_max = this.options.top_min;
-
+
// create
this.setElement(this._template());
-
+
// load background
$(this.el).append(this._templateBackground());
-
+
// load menu buttons
$(this.el).append(this._templateMenu());
-
+
// load to main frame
$(this.el_main).append($(this.el));
@@ -107,23 +107,23 @@ var View = Backbone.View.extend({
grid_rank : null,
grid_lock : false
};
-
+
// initialize size
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._panelRefresh();
-
+
// apply visibility
if (!this.visible) {
this.hide();
} else {
this.show();
}
-
+
// catch window resize event
var self = this;
$(window).resize(function () {
@@ -131,7 +131,7 @@ var View = Backbone.View.extend({
self._panelRefresh();
});
},
-
+
/**
* Adds and displays a new frame.
*
@@ -149,19 +149,19 @@ var View = Backbone.View.extend({
target: '',
type: null
};
-
+
// read in defaults
if (options) {
options = _.defaults(options, frameOptions);
} else {
options = frameOptions;
}
-
+
// check for content
if(!options.content) {
return;
}
-
+
// check for number of frames
if (this.frame_counter >= this.options.frame_max) {
alert("You have reached the maximum number of allowed frames (" + this.options.frame_max + ").");
@@ -176,7 +176,7 @@ var View = Backbone.View.extend({
alert("This frame already exists. This page might contain multiple frame managers.");
return;
}
-
+
// reset top
this.top = this.options.top_min;
@@ -197,7 +197,7 @@ var View = Backbone.View.extend({
}
}
$(this.el).append($frame_el);
-
+
// construct a new frame
var frame = {
id : frame_id,
@@ -206,14 +206,14 @@ var View = Backbone.View.extend({
grid_rank : null,
grid_lock : false
};
-
+
// set dimensions
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'));
-
+
// add to frame list
this.frame_list[frame_id] = frame;
@@ -222,55 +222,55 @@ var View = Backbone.View.extend({
// resize
this._frameResize(frame, {width: options.width, height: options.height});
-
+
// place frame
this._frameInsert(frame, {top: 0, left: 0}, true);
-
+
// show frames if hidden
if (!this.visible) {
this.show();
}
},
-
+
// show panel
show: function() {
// show
this.visible = true;
-
+
// show
this.$el.find(".frame").fadeIn('fast');
-
+
// hide shadow
this.$el.find(this.frame_shadow.id).hide();
-
+
// show background
this.$el.find(".frame-background").show();
-
+
// show panel
this._panelRefresh();
-
+
// refresh
this._menuRefresh();
},
-
+
// hide panel
hide: function() {
// make sure that no event is currently processing
if (this.event.type !== null)
return;
-
+
// hide
this.visible = false;
-
+
// hide
this.$el.find(".frame").fadeOut('fast');
-
+
// hide background
this.$el.find(".frame-background").hide();
-
+
// hide menu
this.$el.find(".frame-menu").hide();
-
+
// refresh
this._menuRefresh();
},
@@ -279,23 +279,23 @@ var View = Backbone.View.extend({
length: function() {
return this.frame_counter;
},
-
+
// set onchange event
setOnChange: function(callback) {
this.options.onchange = callback;
},
-
+
/*
EVENT HANDLING
*/
-
+
// event
event: {
type : null,
target : null,
xy : null
},
-
+
// events
events: {
// global frame events
@@ -304,7 +304,7 @@ var View = Backbone.View.extend({
'mouseleave' : '_eventFrameMouseUp',
'mousewheel' : '_eventPanelScroll',
'DOMMouseScroll' : '_eventPanelScroll',
-
+
// events fixed to elements
'mousedown .frame' : '_eventFrameMouseDown',
'mousedown .frame-background' : '_eventHide',
@@ -320,17 +320,17 @@ var View = Backbone.View.extend({
if (this.event.type !== null) {
return;
}
-
+
// check for drag event
if ($(e.target).hasClass('f-header') || $(e.target).hasClass('f-title')) {
this.event.type = 'drag';
}
-
+
// check for resize event
if ($(e.target).hasClass('f-resize')) {
this.event.type = 'resize';
}
-
+
// skip if no event has to be handled
if (this.event.type === null) {
return;
@@ -338,22 +338,22 @@ var View = Backbone.View.extend({
// prevent
e.preventDefault();
-
+
// identify frame
this.event.target = this._frameIdentify(e.target);
-
+
// check if frame is locked
if (this.event.target.grid_lock) {
this.event.type = null;
return;
}
-
+
// backup event details
this.event.xy = {
x: e.originalEvent.pageX,
y: e.originalEvent.pageY
};
-
+
// prepare drag/resize
this._frameDragStart(this.event.target);
},
@@ -364,63 +364,63 @@ var View = Backbone.View.extend({
if (this.event.type != 'drag' && this.event.type != 'resize') {
return;
}
-
+
// current position
var event_xy_new = {
x : e.originalEvent.pageX,
y : e.originalEvent.pageY
};
-
+
// position delta
var event_xy_delta = {
x : event_xy_new.x - this.event.xy.x,
y : event_xy_new.y - this.event.xy.y
};
-
+
// update
this.event.xy = event_xy_new;
// object position / size
var p = this._frameScreen (this.event.target);
-
+
// resize event
if (this.event.type == 'resize') {
// update
p.width += event_xy_delta.x;
p.height += event_xy_delta.y;
-
+
// check size
var min_dim = this.options.cell - this.options.margin - 1;
p.width = Math.max(p.width, min_dim);
p.height = Math.max(p.height, min_dim);
-
+
// apply resize to frame
this._frameResize(this.event.target, p);
-
+
// break down to grid coordinates
p.width = this._toGridCoord('width', p.width) + 1;
p.height = this._toGridCoord('height', p.height) + 1;
-
+
// transfer back to pixels
p.width = this._toPixelCoord('width', p.width);
p.height = this._toPixelCoord('height', p.height);
-
+
// apply
this._frameResize(this.frame_shadow, p);
-
+
// fix position
this._frameInsert(this.frame_shadow, {
top : this._toGridCoord('top', p.top),
left : this._toGridCoord('left', p.left)
});
}
-
+
// drag event
if (this.event.type == 'drag') {
// update
p.left += event_xy_delta.x;
p.top += event_xy_delta.y;
-
+
// apply
this._frameOffset(this.event.target, p);
@@ -429,86 +429,86 @@ var View = Backbone.View.extend({
top : this._toGridCoord('top', p.top),
left : this._toGridCoord('left', p.left)
};
-
+
// increase priority of current frame
if (l.left !== 0) {
l.left++;
}
-
+
// fix position
this._frameInsert(this.frame_shadow, l);
}
},
-
+
// mouse up
_eventFrameMouseUp: function (e) {
// check
if (this.event.type != 'drag' && this.event.type != 'resize') {
return;
}
-
+
// stop
this._frameDragStop(this.event.target);
-
+
// reset event
this.event.type = null;
},
-
+
// drag start
_eventFrameClose: function (e) {
// check
if (this.event.type !== null) {
return;
}
-
+
// prevent
e.preventDefault();
// get frame
var frame = this._frameIdentify(e.target);
var self = this;
-
+
// fade out
$(frame.id).fadeOut('fast', function() {
// remove element
$(frame.id).remove();
-
+
// remove from dictionary
delete self.frame_list[frame.id];
-
+
// reduce frame counter
self.frame_counter--;
-
+
// reload
self._panelRefresh(true);
-
+
// refresh scroll state once all animations completed
self._panelAnimationComplete();
-
+
// hide if no frames left
if (self.visible && self.frame_counter == 0)
self.hide();
});
},
-
+
// drag start
_eventFrameLock: function (e) {
// check
if (this.event.type !== null) {
return;
}
-
+
// prevent
e.preventDefault();
// get frame
var frame = this._frameIdentify(e.target);
-
+
// check
if (frame.grid_lock) {
// unlock
frame.grid_lock = false;
-
+
// remove class
$(frame.id).find('.f-pin').removeClass('toggle');
$(frame.id).find('.f-header').removeClass('f-not-allowed');
@@ -518,7 +518,7 @@ var View = Backbone.View.extend({
} else {
// lock
frame.grid_lock = true;
-
+
// add class
$(frame.id).find('.f-pin').addClass('toggle');
$(frame.id).find('.f-header').addClass('f-not-allowed');
@@ -538,7 +538,7 @@ var View = Backbone.View.extend({
// hide panel
this.hide();
},
-
+
/**
* Fired when scrolling occurs on panel.
*/
@@ -561,11 +561,11 @@ var View = Backbone.View.extend({
// get wheel delta
var delta = e.originalEvent.detail ? e.originalEvent.detail : e.originalEvent.wheelDelta / -3;
-
+
// refresh panel
this._panelScroll(delta);
},
-
+
// scroll up
_eventPanelScroll_up: function(e) {
// check
@@ -578,24 +578,24 @@ var View = Backbone.View.extend({
// scroll up
this._panelScroll(-this.options.scroll);
},
-
+
// scroll down
_eventPanelScroll_down: function(e) {
// check
if (this.event.type !== null)
return;
-
+
// prevent
e.preventDefault();
-
+
// scroll down
this._panelScroll(this.options.scroll);
},
-
+
/*
FRAME EVENTS SUPPORT
*/
-
+
// identify
_frameIdentify: function(target) {
return this.frame_list['#' + $(target).closest('.frame').attr('id')];
@@ -605,80 +605,70 @@ var View = Backbone.View.extend({
_frameDragStart : function (frame) {
// set focus
this._frameFocus(frame, true);
-
+
// get current dimensions
var p = this._frameScreen (frame);
-
+
// initialize shadow
this._frameResize(this.frame_shadow, p);
this._frameGrid(this.frame_shadow, frame.grid_location);
-
+
// reset location
frame.grid_location = null;
-
+
// show shadow
$(this.frame_shadow.id).show();
-
+
// load frame cover
$('.f-cover').show();
},
-
+
// drag stop
_frameDragStop : function (frame) {
// remove focus
this._frameFocus(frame, false);
-
+
// get new dimensions
var p = this._frameScreen(this.frame_shadow);
-
+
// update frame
this._frameResize(frame, p);
this._frameGrid(frame, this.frame_shadow.grid_location, true);
-
+
// reset location of shadow
this.frame_shadow.grid_location = null;
// hide shadow
$(this.frame_shadow.id).hide();
-
+
// hide frame cover
$('.f-cover').hide();
-
+
// refresh scroll state once all animations completed
this._panelAnimationComplete();
},
-
+
/*
GRID/PIXEL CONVERTER
*/
-
+
// converts a pixel coordinate to grids
_toGridCoord: function (type, px) {
- // determine sign
var sign = (type == 'width' || type == 'height') ? 1 : -1;
-
if (type == 'top') px -= this.top;
-
- // return
return parseInt((px + sign * this.options.margin) / this.options.cell, 10);
},
// converts a grid coordinate to pixels
_toPixelCoord: function (type, g) {
- // determine sign
var sign = (type == 'width' || type == 'height') ? 1 : -1;
-
- // return
var px = (g * this.options.cell) - sign * this.options.margin;
-
if (type == 'top') px += this.top;
-
return px;
},
-
+
// get grid coordinates
_toGrid: function (px) {
- // full set
return {
top : this._toGridCoord('top', px.top),
left : this._toGridCoord('left', px.left),
@@ -686,7 +676,7 @@ var View = Backbone.View.extend({
height : this._toGridCoord('height', px.height)
};
},
-
+
// get pixel coordinates
_toPixel: function(g) {
return {
@@ -700,7 +690,7 @@ var View = Backbone.View.extend({
/*
COLLISION DETECTION
*/
-
+
// check collision
_isCollision: function(g) {
// is collision pair
@@ -708,7 +698,7 @@ var View = Backbone.View.extend({
return !(a.left > b.left + b.width - 1 || a.left + a.width - 1 < b.left ||
a.top > b.top + b.height - 1 || a.top + a.height - 1 < b.top);
}
-
+
// search
for (var i in this.frame_list) {
// get frame
@@ -722,20 +712,20 @@ var View = Backbone.View.extend({
if (is_collision_pair (g, frame.grid_location))
return true;
}
-
+
// return
return false;
},
-
+
// location/grid rank
_locationRank: function(loc) {
return (loc.top * this.cols) + loc.left;
},
-
+
/*
ONSCREEN MENU
*/
-
+
// update frame counter
_menuRefresh: function() {
// scroll up possible?
@@ -744,20 +734,20 @@ var View = Backbone.View.extend({
$(".frame-scroll-up").hide();
else
$(".frame-scroll-up").show();
-
+
// scroll down possible?
if (this.top == this.top_max)
$(".frame-scroll-down").hide();
else
$(".frame-scroll-down").show();
}
-
+
// trigger onchange
if (this.options.onchange) {
this.options.onchange();
}
},
-
+
/*
PANEL/WINDOW FUNCTIONS
*/
@@ -772,11 +762,11 @@ var View = Backbone.View.extend({
_panelRefresh: function(animate) {
// get current size
this.cols = parseInt($(window).width() / this.options.cell, 10) + 1;
-
+
// recalculate frame positions
this._frameInsert(null, null, animate);
},
-
+
// update scroll
_panelScroll: function(delta, animate) {
// new top value
@@ -785,7 +775,7 @@ var View = Backbone.View.extend({
// update top
top_new = Math.max(top_new, this.top_max);
top_new = Math.min(top_new, this.options.top_min);
-
+
// update screen if necessary
if (this.top != top_new) {
// update screen
@@ -802,33 +792,33 @@ var View = Backbone.View.extend({
this._frameOffset(frame, screen_location, animate);
}
}
-
+
// update top value
this.top = top_new;
}
-
+
// refresh
this._menuRefresh();
},
-
+
/*
FRAME FUNCTIONS
*/
-
+
// frame insert at given location
_frameInsert: function(frame, new_loc, animate) {
// define
var place_list = [];
-
+
// frame to place
if (frame) {
// reset grid location
frame.grid_location = null;
-
+
// set first one to be placed
place_list.push([frame, this._locationRank(new_loc)]);
}
-
+
// search
var i = null;
for (i in this.frame_list) {
@@ -839,7 +829,7 @@ var View = Backbone.View.extend({
if (f.grid_location !== null && !f.grid_lock) {
// reset grid location
f.grid_location = null;
-
+
// set up for placement
place_list.push([f, f.grid_rank]);
}
@@ -851,12 +841,12 @@ var View = Backbone.View.extend({
var j = b[1];
return i < j ? -1 : (i > j ? 1 : 0);
});
-
+
// place
for (i = 0; i < place_list.length; i++) {
this._framePlace(place_list[i][0], animate);
}
-
+
// identify maximum viewport size
this.top_max = 0;
for (var i in this.frame_list) {
@@ -867,13 +857,13 @@ var View = Backbone.View.extend({
if (frame.grid_location !== null)
this.top_max = Math.max(this.top_max, frame.grid_location.top + frame.grid_location.height);
}
-
+
// mesh maximum top with window size and margin
this.top_max = $(window).height() - this.top_max * this.options.cell - 2 * this.options.margin;
-
+
// fix value
this.top_max = Math.min(this.top_max, this.options.top_min);
-
+
// panel menu
this._menuRefresh();
},
@@ -882,10 +872,10 @@ var View = Backbone.View.extend({
_framePlace: function(frame, animate) {
// reset grid location
frame.grid_location = null;
-
+
// grid coordinates of new frame
var g = this._toGrid(this._frameScreen(frame));
-
+
// try grid coordinates
var done = false;
for (var i = 0; i < this.options.rows; i++) {
@@ -894,20 +884,20 @@ var View = Backbone.View.extend({
// coordinates
g.top = i;
g.left = j;
-
+
// no collision
if (!this._isCollision(g)) {
done = true;
break;
}
}
-
+
// break
if (done) {
break;
}
}
-
+
// check if valid spot was found
if (done) {
this._frameGrid(frame, g, animate);
@@ -915,46 +905,44 @@ var View = Backbone.View.extend({
console.log("Grid dimensions exceeded.");
}
},
-
+
// focus
_frameFocus: function(frame, has_focus) {
// get new z-value
var z = this.frame_z + (has_focus ? 1 : 0);
-
+
// update
$(frame.id).css('z-index', z);
},
-
+
// new left/top position frame
_frameOffset: function(frame, p, animate) {
// update screen location
frame.screen_location.left = p.left;
frame.screen_location.top = p.top;
-
+
// animate
if (animate) {
// set focus on animated
this._frameFocus(frame, true);
-
+
// prepare for callback
var self = this;
-
+
// animate and remove focus
- $(frame.id).animate({top: p.top, left: p.left}, 'fast', function()
- {
- // remove focus
+ $(frame.id).animate({top: p.top, left: p.left}, 'fast', function() {
self._frameFocus(frame, false);
});
- } else
- // update css
+ } else {
$(frame.id).css({top: p.top, left: p.left});
+ }
},
// resize frame
_frameResize: function(frame, p) {
// update css
$(frame.id).css({width: p.width, height: p.height});
-
+
// update descriptor
frame.screen_location.width = p.width;
frame.screen_location.height = p.height;
@@ -967,26 +955,26 @@ var View = Backbone.View.extend({
// place frame
this._frameOffset(frame, this._toPixel(l), animate);
-
+
// update grid rank
frame.grid_rank = this._locationRank(l);
},
-
+
// get frame dimensions
_frameScreen: function(frame) {
var p = frame.screen_location;
return {top: p.top, left: p.left, width: p.width, height: p.height};
},
-
+
/*
HTML TEMPLATES
*/
-
+
// main element
_template: function() {
return '';
},
-
+
// fill regular frame template
_templateFrame: function(id, title) {
// check title
@@ -1006,7 +994,7 @@ var View = Backbone.View.extend({
'' +
'';
},
-
+
// fill regular frame template
_templateFrameUrl: function(id, title, url) {
// url
@@ -1015,25 +1003,25 @@ var View = Backbone.View.extend({
else
url += '&';
url += 'widget=True';
-
+
// element
var $el = $(this._templateFrame(id, title));
$el.find('.f-content').append('');
-
+
// load template
return $el;
},
-
+
// fill shadow template
_templateShadow: function(id) {
return '';
},
-
+
// fill background template in order to cover underlying iframes
_templateBackground: function() {
return '';
},
-
+
// fill menu button template
_templateMenu: function() {
return '' +
diff --git a/static/scripts/packed/mvc/ui/ui-button-check.js b/static/scripts/packed/mvc/ui/ui-button-check.js
index 6c166939a05..88a8d393bcf 100644
--- a/static/scripts/packed/mvc/ui/ui-button-check.js
+++ b/static/scripts/packed/mvc/ui/ui-button-check.js
@@ -1 +1 @@
-define(["utils/utils"],function(a){return Backbone.View.extend({optionsDefault:{icons:["fa fa-square-o","fa fa-minus-square-o","fa fa-check-square-o"],value:0,title:"Select/Unselect all"},initialize:function(c){this.options=a.merge(c,this.optionsDefault);this.setElement(this._template());this.$title=this.$(".title");this.$icon=this.$(".icon");this.value(this.options.value);this.$title.html(this.options.title);var b=this;this.$el.on("click",function(){b.current=(b.current===0&&2)||0;b.value(b.current);b.options.onclick&&b.options.onclick()})},value:function(b,c){if(b!==undefined){if(c){if(b!==0){if(b!==c){b=1}else{b=2}}}this.$icon.removeClass().addClass("icon").addClass(this.options.icons[b]);this.options.onchange&&this.options.onchange(b);this.current=b}return this.current},_template:function(){return'
'}})});
\ No newline at end of file
+define(["utils/utils"],function(a){return Backbone.View.extend({optionsDefault:{icons:["fa fa-square-o","fa fa-minus-square-o","fa fa-check-square-o"],value:0,title:"Select/Unselect all"},initialize:function(c){this.options=a.merge(c,this.optionsDefault);this.setElement(this._template());this.$title=this.$(".title");this.$icon=this.$(".icon");this.value(this.options.value);this.$title.html(this.options.title);var b=this;this.$el.on("click",function(){b.current=(b.current===0&&2)||0;b.value(b.current);b.options.onclick&&b.options.onclick()})},value:function(b,c){if(b!==undefined){if(c){if(b!==0){if(b!==c){b=1}else{b=2}}}this.current=b;this.$icon.removeClass().addClass("icon").addClass(this.options.icons[b]);this.options.onchange&&this.options.onchange(b)}return this.current},_template:function(){return'
'}})});
\ No newline at end of file