Topo2 - Animate the position of the details panel based on SummaryPanel visiblity
JIRA Tasks; ONOS-6294
Change-Id: I0aaf71021cadd529cf0f5c591cd91de22b396f7a
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js
index 29773f8..fd55a08 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js
@@ -22,39 +22,83 @@
(function () {
'use strict';
+ // TODO: Topo2Panel - A view that draws the container for Summary and Details Panels
+ // TODO: as well as the show/hide/toggle methods.
+
+ // TODO: Topo2DetailsPanel should extend Topo2Panel and add methods to controller position
+ // TODO: based on the visibility of Topo2Summary
+
+ // TODO: Topo2<Device|Link|Host>Panel should only be concerned with the content displayed
+
// Injected Services
var Panel;
// Internal State
- var detailsPanel;
+ var detailsPanel, summaryPanel;
// configuration
var id = 'topo2-p-detail',
className = 'topo2-p',
+ transTime = 750,
+ panelPadding = 64,
+ panelSpacing = 20,
panelOpts = {
width: 260 // summary and detail panel width
};
- function getInstance() {
+ function getInstance(_summaryPanel_) {
if (detailsPanel) {
return detailsPanel;
}
+ summaryPanel = _summaryPanel_;
+
var options = angular.extend({}, panelOpts, {
class: className
});
+ Panel = Panel.extend({
+ up: function () {
+ detailsPanel.el.el()
+ .transition()
+ .duration(transTime)
+ .style('top', panelPadding + 'px');
+ },
+ down: function (position, callback) {
+ detailsPanel.el.el()
+ .transition()
+ .duration(transTime)
+ .style('top', position + (panelPadding + panelSpacing) + 'px')
+ .each('end', callback);
+ },
+ show: function () {
+
+ var summaryInstance = summaryPanel.getInstance(),
+ position = 0;
+
+ if (summaryInstance.isVisible()) {
+ position = summaryInstance.el.bbox().height;
+ position = position + panelSpacing;
+ }
+
+ detailsPanel.el.el()
+ .style('top', panelPadding + position + 'px');
+ detailsPanel.el.show();
+ }
+ });
+
detailsPanel = new Panel(id, options);
detailsPanel.el.classed(className, true);
return detailsPanel;
}
+
+
angular.module('ovTopo2')
.factory('Topo2DetailsPanelService', [
'Topo2PanelService',
function (_ps_) {
-
Panel = _ps_;
return getInstance;