Merge pull request #1599 from w33ble/vis-spy-full
Vis spy full screen toggle fixes
This commit is contained in:
commit
068ccda93f
|
@ -14,7 +14,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<a ng-click="toggleFullPage()">
|
||||
<a ng-if="!fullScreenSpy" ng-click="toggleFullPage()">
|
||||
<i ng-if="!spyMode.fill" class="fa fa-expand"></i>
|
||||
<i ng-if="spyMode.fill" class="fa fa-compress"></i>
|
||||
</a>
|
||||
|
|
|
@ -14,11 +14,9 @@ define(function (require) {
|
|||
var perPageDefault = 10;
|
||||
var perPageExtended = 20;
|
||||
|
||||
// TODO: finish this - the list should get longer in full screen mode
|
||||
// $scope.$parent.$watch('spyMode.fill', function (fill) {
|
||||
// $scope.perPage = (fill) ? perPageExtended : perPageDefault;
|
||||
// });
|
||||
$scope.perPage = perPageDefault;
|
||||
$scope.$parent.$watch('spyMode.fill', function (fill) {
|
||||
$scope.perPage = (fill) ? perPageExtended : perPageDefault;
|
||||
});
|
||||
|
||||
$scope.sort = null;
|
||||
$scope.csv = {
|
||||
|
|
|
@ -22,14 +22,12 @@ define(function (require) {
|
|||
$scope.modes = modes;
|
||||
|
||||
$scope.toggleDisplay = function () {
|
||||
$scope.showPageToggle = !$scope.fullScreenSpy;
|
||||
$scope.setSpyMode($scope.spyMode ? null : defaultMode);
|
||||
};
|
||||
|
||||
$scope.toggleFullPage = function () {
|
||||
fullPageSpy = $scope.spyMode.fill = !fullPageSpy;
|
||||
|
||||
// tell any listeners spyMode changed
|
||||
$scope.$emit('change:spyMode', $scope.spyMode);
|
||||
};
|
||||
|
||||
$scope.setSpyMode = function (newMode) {
|
||||
|
@ -71,8 +69,6 @@ define(function (require) {
|
|||
|
||||
// wrapped in fn to enable early return
|
||||
set();
|
||||
|
||||
if (change) $scope.$emit('change:spyMode', current);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
@ -24,28 +24,25 @@ define(function (require) {
|
|||
template: require('text!components/visualize/visualize.html'),
|
||||
link: function ($scope, $el, attr) {
|
||||
var chart; // set in "vis" watcher
|
||||
var $visualize = $el.find('.visualize-chart');
|
||||
var $visChart = $el.find('.visualize-chart');
|
||||
var $spy = $el.find('visualize-spy');
|
||||
var minVisChartHeight = 180;
|
||||
|
||||
$scope.spyMode = false;
|
||||
$scope.onlyShowSpy = false;
|
||||
$scope.fullScreenSpy = false;
|
||||
|
||||
var applyClassNames = function () {
|
||||
var fullSpy = ($scope.spyMode && ($scope.spyMode.fill || $scope.fullScreenSpy));
|
||||
|
||||
// external
|
||||
$el.toggleClass('only-visualization', !$scope.spyMode);
|
||||
$el.toggleClass('visualization-and-spy', $scope.spyMode && !$scope.onlyShowSpy);
|
||||
$el.toggleClass('only-spy', Boolean($scope.onlyShowSpy));
|
||||
|
||||
$spy.toggleClass('only', Boolean($scope.onlyShowSpy));
|
||||
$el.toggleClass('visualization-and-spy', $scope.spyMode && !fullSpy);
|
||||
$el.toggleClass('only-spy', Boolean(fullSpy));
|
||||
$spy.toggleClass('only', Boolean(fullSpy));
|
||||
|
||||
// internal
|
||||
$visualize.toggleClass('spy-visible', Boolean($scope.spyMode));
|
||||
$visualize.toggleClass('spy-only', Boolean($scope.onlyShowSpy));
|
||||
};
|
||||
|
||||
var calcResponsiveStuff = function () {
|
||||
$scope.onlyShowSpy = $scope.spyMode && ($scope.spyMode.fill || $el.height() < 550);
|
||||
applyClassNames();
|
||||
$visChart.toggleClass('spy-visible', Boolean($scope.spyMode));
|
||||
$visChart.toggleClass('spy-only', Boolean(fullSpy));
|
||||
};
|
||||
|
||||
// we need to wait for come watchers to fire at least once
|
||||
|
@ -69,8 +66,13 @@ define(function (require) {
|
|||
};
|
||||
}());
|
||||
|
||||
$scope.$on('change:spyMode', function (event, spyMode) {
|
||||
calcResponsiveStuff();
|
||||
$scope.$watchCollection('spyMode', function (spyMode, oldSpyMode) {
|
||||
$scope.spyMode = spyMode;
|
||||
// if the spy has been opened, check chart height
|
||||
if (spyMode && !oldSpyMode) {
|
||||
$scope.fullScreenSpy = $visChart.height() < minVisChartHeight;
|
||||
}
|
||||
applyClassNames();
|
||||
});
|
||||
|
||||
$scope.$watch('vis', prereq(function (vis, prevVis) {
|
||||
|
@ -91,7 +93,7 @@ define(function (require) {
|
|||
vis.vislibParams
|
||||
);
|
||||
|
||||
chart = new visLib.Vis($visualize[0], vislibParams);
|
||||
chart = new visLib.Vis($visChart[0], vislibParams);
|
||||
|
||||
_.each(vis.listeners, function (listener, event) {
|
||||
chart.on(event, listener);
|
||||
|
|
|
@ -15,45 +15,18 @@ define(function (require) {
|
|||
|
||||
$scope.paginate = {};
|
||||
|
||||
// pagination controls
|
||||
// watchers on attributes
|
||||
$scope.$watchCollection(attrs.list, function (list) {
|
||||
$scope.list = list;
|
||||
renderList();
|
||||
});
|
||||
$scope.$watch(attrs.perPage, function (perPage) {
|
||||
$scope.paginate.perPage = perPage || perPageDefault;
|
||||
});
|
||||
|
||||
$scope.$watch('paginate.perPage', renderList);
|
||||
var getOtherWidth = $parse(attrs.otherWidth);
|
||||
|
||||
$scope.$watchCollection(attrs.list, function (list) {
|
||||
$scope.pages = [];
|
||||
if (!list) return;
|
||||
|
||||
var perPage = $scope.paginate.perPage;
|
||||
var count = Math.ceil(list.length / perPage);
|
||||
|
||||
_.times(count, function (i) {
|
||||
var start = perPage * i;
|
||||
var page = list.slice(start, start + perPage);
|
||||
|
||||
page.number = i + 1;
|
||||
page.i = i;
|
||||
|
||||
page.count = count;
|
||||
page.first = page.number === 1;
|
||||
page.last = page.number === count;
|
||||
|
||||
page.prev = $scope.pages[i - 1];
|
||||
if (page.prev) page.prev.next = page;
|
||||
|
||||
$scope.pages.push(page);
|
||||
});
|
||||
|
||||
// set the new page, or restore the previous page number
|
||||
if ($scope.page && $scope.page.i < $scope.pages.length) {
|
||||
$scope.page = $scope.pages[$scope.page.i];
|
||||
} else {
|
||||
$scope.page = $scope.pages[0];
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$watch('page', function (newPage, oldPage) {
|
||||
if (!newPage) {
|
||||
delete $scope.otherPages;
|
||||
|
@ -96,6 +69,38 @@ define(function (require) {
|
|||
$scope.page = $scope.pages[number - 1] || $scope.pages[0];
|
||||
}
|
||||
};
|
||||
|
||||
function renderList() {
|
||||
$scope.pages = [];
|
||||
if (!$scope.list) return;
|
||||
|
||||
var perPage = $scope.paginate.perPage;
|
||||
var count = Math.ceil($scope.list.length / perPage);
|
||||
|
||||
_.times(count, function (i) {
|
||||
var start = perPage * i;
|
||||
var page = $scope.list.slice(start, start + perPage);
|
||||
|
||||
page.number = i + 1;
|
||||
page.i = i;
|
||||
|
||||
page.count = count;
|
||||
page.first = page.number === 1;
|
||||
page.last = page.number === count;
|
||||
|
||||
page.prev = $scope.pages[i - 1];
|
||||
if (page.prev) page.prev.next = page;
|
||||
|
||||
$scope.pages.push(page);
|
||||
});
|
||||
|
||||
// set the new page, or restore the previous page number
|
||||
if ($scope.page && $scope.page.i < $scope.pages.length) {
|
||||
$scope.page = $scope.pages[$scope.page.i];
|
||||
} else {
|
||||
$scope.page = $scope.pages[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue