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 = ''; 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 = ''; 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