Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-09 14:45:35 +00:00
Code Issues Projects Releases Wiki Activity

Another improvement to font-size adjustments

Browse Source
This commit is contained in:
Colin McLeod
2015-07-09 13:10:01 -07:00
parent faa8759851
commit 164e9f5c8a
8 changed files with 136 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/js/directives/directive-header.js
View File

@@ -1,5 +1,6 @@
angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $rootScope, $state, Persist, Serializer, ships) {
return {
restrict: 'E',
templateUrl: 'views/_header.html',
@@ -12,6 +13,7 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta
scope.allComparisons = Persist.comparisons;
scope.bs = Persist.state;
var win = angular.element($window); // Angularized window object for event triggering
var insIndex = _.findIndex($rootScope.insurance.opts, 'name', Persist.getInsurance());
var savedDiscounts = Persist.getDiscount() || [1, 1];
$rootScope.insurance.current = $rootScope.insurance.opts[insIndex != -1 ? insIndex : 0];
@@ -80,10 +82,9 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta
});
scope.textSizeChange = function(size) {
$rootScope.fontSize = size;
$rootScope.fontSizePx = size * parseFloat(getComputedStyle(document.documentElement).fontSize);
$rootScope.sizeRatio = size;
document.getElementById('main').style.fontSize = size + 'em';
$rootScope.$broadcast('render');
win.triggerHandler('resize');
};
scope.$watchCollection('allBuilds', function() {

96
app/js/directives/directive-power-bands.js
View File

@@ -1,4 +1,8 @@
<<<<<<< HEAD
angular.module('app').directive('powerBands', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) {
=======
angular.module('app').directive('powerBands', ['$window', '$rootScope', function($window, $rootScope) {
>>>>>>> Another improvement to font-size adjustments
return {
restrict: 'A',
scope: {
@@ -6,11 +10,14 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
available: '='
},
link: function(scope, element) {
var margin = { top: 20, right: 130, bottom: 20, left: 40 },
barHeight = 20,
bands = null,
innerHeight = (barHeight * 2) + 3,
height = innerHeight + margin.top + margin.bottom + 1,
var bands = null,
available = 0,
maxBand,
maxPwr,
deployedSum = 0,
retractedSum = 0,
retBandsSelected = false,
depBandsSelected = false,
wattScale = d3.scale.linear(),
pctScale = d3.scale.linear().domain([0, 1]),
wattFmt = d3.format('.2f'),
@@ -19,7 +26,7 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
pctAxis = d3.svg.axis().scale(pctScale).outerTickSize(0).orient('bottom').tickFormat(d3.format('%')),
// Create chart
svg = d3.select(element[0]).append('svg'),
vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
vis = svg.append('g'),
deployed = vis.append('g').attr('class', 'power-band'),
retracted = vis.append('g').attr('class', 'power-band');
@@ -30,7 +37,7 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
bands[i].retSelected = false;
bands[i].depSelected = false;
}
render();
dataChange();
}
});
@@ -43,26 +50,53 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
var depVal = vis.append('text').attr('y', barHeight + 18);
// Watch for changes to data and events
scope.$watchCollection('available', render);
angular.element($window).bind('orientationchange resize pwrchange', render);
scope.$watchCollection('available', dataChange);
angular.element($window).bind('pwrchange', dataChange);
angular.element($window).bind('orientationchange resize', render);
updateFormats();
function render() {
bands = scope.bands;
available = scope.available;
maxBand = bands[bands.length - 1];
deployedSum = 0;
retractedSum = 0;
retBandsSelected = false;
depBandsSelected = false;
maxPwr = Math.max(available, maxBand.retractedSum, maxBand.deployedSum);
var available = scope.available,
for (var b = 0, l = bands.length; b < l; b++) {
if (bands[b].retSelected) {
retractedSum += bands[b].retracted + bands[b].retOnly;
retBandsSelected = true;
}
if (bands[b].depSelected) {
deployedSum += bands[b].deployed + bands[b].retracted;
depBandsSelected = true;
}
}
render();
}
function render() {
var size = $rootScope.sizeRatio;
mTop = Math.round(25 * size),
mRight = Math.round(130 * size),
mBottom = Math.round(25 * size),
mLeft = Math.round(40 * size),
barHeight = Math.round(20 * size),
width = element[0].offsetWidth,
w = width - margin.left - margin.right,
maxBand = bands[bands.length - 1],
deployedSum = 0,
retractedSum = 0,
retBandsSelected = false,
depBandsSelected = false,
maxPwr = Math.max(available, maxBand.retractedSum, maxBand.deployedSum);
innerHeight = (barHeight * 2) + 2,
height = innerHeight + mTop + mBottom,
w = width - mLeft - mRight,
repY = (barHeight / 2),
depY = (barHeight * 1.5) - 1;
// Update chart size
svg.attr('width', width).attr('height', height);
vis.attr('transform', 'translate(' + mLeft + ',' + mTop + ')');
// Remove existing elements
retracted.selectAll('rect').remove();
@@ -76,6 +110,7 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
vis.selectAll('.watt.axis').call(wattAxis);
vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis);
<<<<<<< HEAD
for (var b = 0, l = bands.length; b < l; b++) {
if (bands[b].retSelected) {
retractedSum += bands[b].retracted + bands[b].retOnly;
@@ -92,53 +127,56 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
retracted.selectAll('rect').data(bands).enter().append('rect')
.attr('height', barHeight)
.attr('width', function(d) { return Math.max(wattScale(d.retracted + d.retOnly) - 1, 0); })
.attr('x', function(d) { return wattScale(d.retractedSum) - wattScale(d.retracted + d.retOnly); })
.attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.retracted + d.retOnly), 0)); })
.attr('x', function(d) { return Math.floor(Math.max(wattScale(d.retractedSum) - wattScale(d.retracted + d.retOnly), 0)); })
.attr('y', 1)
.on('click', function(d) {
d.retSelected = !d.retSelected;
render();
dataChange();
})
.attr('class', function(d) { return getClass(d.retSelected, d.retractedSum, available); });
retracted.selectAll('text').data(bands).enter().append('text')
.attr('x', function(d) { return wattScale(d.retractedSum) - (wattScale(d.retracted + d.retOnly) / 2); })
.attr('y', 15)
.attr('y', repY)
.attr('dy', '0.5em')
.style('text-anchor', 'middle')
.attr('class', 'primary-bg')
.on('click', function(d) {
d.retSelected = !d.retSelected;
render();
dataChange();
})
.text(function(d, i) { return bandText(d.retracted + d.retOnly, i); });
deployed.selectAll('rect').data(bands).enter().append('rect')
.attr('height', barHeight)
.attr('width', function(d) { return Math.max(wattScale(d.deployed + d.retracted) - 1, 0); })
.attr('x', function(d) { return wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed); })
.attr('y', barHeight + 2)
.attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.deployed + d.retracted), 0)); })
.attr('x', function(d) { return Math.floor(Math.max(wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed), 0)); })
.attr('y', barHeight + 1)
.on('click', function(d) {
d.depSelected = !d.depSelected;
render();
dataChange();
})
.attr('class', function(d) { return getClass(d.depSelected, d.deployedSum, available); });
deployed.selectAll('text').data(bands).enter().append('text')
.attr('x', function(d) { return wattScale(d.deployedSum) - ((wattScale(d.retracted) + wattScale(d.deployed)) / 2); })
.attr('y', barHeight + 17)
.attr('y', depY)
.attr('dy', '0.5em')
.style('text-anchor', 'middle')
.attr('class', 'primary-bg')
.on('click', function(d) {
d.depSelected = !d.depSelected;
render();
dataChange();
})
.text(function(d, i) { return bandText(d.deployed + d.retracted, i); });
}
function updateLabel(lbl, width, selected, sum, available) {
function updateLabel(lbl, width, y, selected, sum, available) {
lbl
.attr('x', width + 5 )
.attr('y', y)
.attr('class', getClass(selected, sum, available))
.text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / available)) + ')');
}

2
app/js/directives/directive-slider.js
View File

@@ -40,7 +40,7 @@ angular.module('app').directive('slider', ['$window', function($window) {
render();
});
angular.element($window).bind('orientationchange resize', render);
//angular.element($window).bind('orientationchange resize', render);
function render() {
var width = element[0].offsetWidth, w = width - margin.left - margin.right;