mirror of
https://github.com/Ekokumppanit/CalCalc.git
synced 2026-01-26 03:04:04 +00:00
Init
This commit is contained in:
Juho Teperi
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
*.sublime-workspace
|
||||||
|
*.css
|
||||||
|
temp
|
||||||
|
build
|
||||||
14
README.md
Normal file
14
README.md
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
# Calcalc
|
||||||
|
|
||||||
|
http://www.liikkumisenohjaus.fi/kalorilaskuri
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
npm install -g nodefront
|
||||||
|
|
||||||
|
## Development server
|
||||||
|
|
||||||
|
nodefront serve -cl
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
build.sh
|
||||||
16
build.sh
Executable file
16
build.sh
Executable file
@@ -0,0 +1,16 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
nodefront compile -r
|
||||||
|
|
||||||
|
mkdir -p build
|
||||||
|
mkdir -p temp
|
||||||
|
|
||||||
|
nodefront minify --out build/calcalc.min.css main.css
|
||||||
|
|
||||||
|
nodefront minify --out build/calcalc.min.js main.js
|
||||||
|
|
||||||
|
# cp main.js build/calcalc.min.js
|
||||||
|
|
||||||
|
cp index.html build/calcalc.html
|
||||||
|
|
||||||
|
|
||||||
8
calcalc.sublime-project
Normal file
8
calcalc.sublime-project
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"folders":
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"path": "."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
16
dynamicgif.less
Normal file
16
dynamicgif.less
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
.gifhex(@hex) {
|
||||||
|
@s: ~`(function(s){s=s.substring(1,7); return (s.length<6)? s[0]+s[0]+s[1]+s[1]+s[2]+s[2] : s;})("@{hex}")`;
|
||||||
|
@func: ~`(function(s,i){return parseInt(s[0+2*i]+s[1+2*i],16);})`;
|
||||||
|
@r: ~`@{func}("@{s}", 0)`;
|
||||||
|
@g: ~`@{func}("@{s}", 1)`;
|
||||||
|
@b: ~`@{func}("@{s}", 2)`;
|
||||||
|
.gifrgb(@r, @g, @b);
|
||||||
|
|
||||||
|
}
|
||||||
|
.gifrgb(@r,@g,@b) {
|
||||||
|
@k: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
||||||
|
@g1: "url(data:image/gif;base64,R0lGODlhAQABAPAAA";
|
||||||
|
@g2: "///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==)";
|
||||||
|
@b64img: ~`function(r,g,b){var k=@{k};return @{g1}+k.charAt(((0&3)<<4)|(r>>4))+k.charAt(((r&15)<<2)|(g>>6))+k.charAt(g&63)+k.charAt(b>>2)+k.charAt(((b&3)<<4)|(255>>4))+@{g2}}(@{r},@{g},@{b})`;
|
||||||
|
background-image: @b64img;
|
||||||
|
}
|
||||||
136
elements.less
Normal file
136
elements.less
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
/*---------------------------------------------------
|
||||||
|
LESS Elements 0.6
|
||||||
|
---------------------------------------------------
|
||||||
|
A set of useful LESS mixins by Dmitry Fadeyev
|
||||||
|
Special thanks for mixin suggestions to:
|
||||||
|
Kris Van Herzeele,
|
||||||
|
Benoit Adam,
|
||||||
|
Portenart Emile-Victor,
|
||||||
|
Ryan Faerman
|
||||||
|
|
||||||
|
More info at: http://lesselements.com
|
||||||
|
-----------------------------------------------------*/
|
||||||
|
|
||||||
|
.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
|
||||||
|
background: @color;
|
||||||
|
background: -webkit-gradient(linear,
|
||||||
|
left bottom,
|
||||||
|
left top,
|
||||||
|
color-stop(0, @start),
|
||||||
|
color-stop(1, @stop));
|
||||||
|
background: -ms-linear-gradient(bottom,
|
||||||
|
@start,
|
||||||
|
@stop);
|
||||||
|
background: -moz-linear-gradient(center bottom,
|
||||||
|
@start 0%,
|
||||||
|
@stop 100%);
|
||||||
|
}
|
||||||
|
.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
|
||||||
|
background: @color;
|
||||||
|
background: -webkit-gradient(linear,
|
||||||
|
left bottom,
|
||||||
|
left top,
|
||||||
|
color-stop(0, rgb(@start,@start,@start)),
|
||||||
|
color-stop(1, rgb(@stop,@stop,@stop)));
|
||||||
|
background: -ms-linear-gradient(bottom,
|
||||||
|
rgb(@start,@start,@start) 0%,
|
||||||
|
rgb(@start,@start,@start) 100%);
|
||||||
|
background: -moz-linear-gradient(center bottom,
|
||||||
|
rgb(@start,@start,@start) 0%,
|
||||||
|
rgb(@stop,@stop,@stop) 100%);
|
||||||
|
}
|
||||||
|
.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
|
||||||
|
border-top: solid 1px @top-color;
|
||||||
|
border-left: solid 1px @left-color;
|
||||||
|
border-right: solid 1px @right-color;
|
||||||
|
border-bottom: solid 1px @bottom-color;
|
||||||
|
}
|
||||||
|
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
|
||||||
|
-webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||||
|
-moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||||
|
box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||||
|
}
|
||||||
|
.rounded(@radius: 2px) {
|
||||||
|
-webkit-border-radius: @radius;
|
||||||
|
-moz-border-radius: @radius;
|
||||||
|
border-radius: @radius;
|
||||||
|
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
|
||||||
|
}
|
||||||
|
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
|
||||||
|
-webkit-border-top-right-radius: @topright;
|
||||||
|
-webkit-border-bottom-right-radius: @bottomright;
|
||||||
|
-webkit-border-bottom-left-radius: @bottomleft;
|
||||||
|
-webkit-border-top-left-radius: @topleft;
|
||||||
|
-moz-border-radius-topright: @topright;
|
||||||
|
-moz-border-radius-bottomright: @bottomright;
|
||||||
|
-moz-border-radius-bottomleft: @bottomleft;
|
||||||
|
-moz-border-radius-topleft: @topleft;
|
||||||
|
border-top-right-radius: @topright;
|
||||||
|
border-bottom-right-radius: @bottomright;
|
||||||
|
border-bottom-left-radius: @bottomleft;
|
||||||
|
border-top-left-radius: @topleft;
|
||||||
|
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
|
||||||
|
}
|
||||||
|
.opacity(@opacity: 0.5) {
|
||||||
|
-moz-opacity: @opacity;
|
||||||
|
-khtml-opacity: @opacity;
|
||||||
|
-webkit-opacity: @opacity;
|
||||||
|
opacity: @opacity;
|
||||||
|
}
|
||||||
|
.transition-duration(@duration: 0.2s) {
|
||||||
|
-moz-transition-duration: @duration;
|
||||||
|
-webkit-transition-duration: @duration;
|
||||||
|
transition-duration: @duration;
|
||||||
|
}
|
||||||
|
.rotation(@deg:5deg){
|
||||||
|
-webkit-transform: rotate(@deg);
|
||||||
|
-moz-transform: rotate(@deg);
|
||||||
|
transform: rotate(@deg);
|
||||||
|
}
|
||||||
|
.scale(@ratio:1.5){
|
||||||
|
-webkit-transform:scale(@ratio);
|
||||||
|
-moz-transform:scale(@ratio);
|
||||||
|
transform:scale(@ratio);
|
||||||
|
}
|
||||||
|
.transition(@duration:0.2s, @ease:ease-out) {
|
||||||
|
-webkit-transition: all @duration @ease;
|
||||||
|
-moz-transition: all @duration @ease;
|
||||||
|
transition: all @duration @ease;
|
||||||
|
}
|
||||||
|
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
|
||||||
|
-webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
|
||||||
|
-moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
|
||||||
|
box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
|
||||||
|
}
|
||||||
|
.box-shadow(@arguments) {
|
||||||
|
-webkit-box-shadow: @arguments;
|
||||||
|
-moz-box-shadow: @arguments;
|
||||||
|
box-shadow: @arguments;
|
||||||
|
}
|
||||||
|
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
|
||||||
|
-moz-column-width: @colwidth;
|
||||||
|
-moz-column-count: @colcount;
|
||||||
|
-moz-column-gap: @colgap;
|
||||||
|
-moz-column-rule-color: @columnRuleColor;
|
||||||
|
-moz-column-rule-style: @columnRuleStyle;
|
||||||
|
-moz-column-rule-width: @columnRuleWidth;
|
||||||
|
-webkit-column-width: @colwidth;
|
||||||
|
-webkit-column-count: @colcount;
|
||||||
|
-webkit-column-gap: @colgap;
|
||||||
|
-webkit-column-rule-color: @columnRuleColor;
|
||||||
|
-webkit-column-rule-style: @columnRuleStyle;
|
||||||
|
-webkit-column-rule-width: @columnRuleWidth;
|
||||||
|
column-width: @colwidth;
|
||||||
|
column-count: @colcount;
|
||||||
|
column-gap: @colgap;
|
||||||
|
column-rule-color: @columnRuleColor;
|
||||||
|
column-rule-style: @columnRuleStyle;
|
||||||
|
column-rule-width: @columnRuleWidth;
|
||||||
|
}
|
||||||
|
.translate(@x:0, @y:0) {
|
||||||
|
-moz-transform: translate(@x, @y);
|
||||||
|
-webkit-transform: translate(@x, @y);
|
||||||
|
-o-transform: translate(@x, @y);
|
||||||
|
-ms-transform: translate(@x, @y);
|
||||||
|
transform: translate(@x, @y);
|
||||||
|
}
|
||||||
128
index.html
Normal file
128
index.html
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<title>Calcalc proto</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
|
||||||
|
<!--<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>-->
|
||||||
|
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
|
||||||
|
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
|
||||||
|
<link href="main.css" rel="stylesheet"/>
|
||||||
|
<style>
|
||||||
|
* { font-family: Arial; }
|
||||||
|
.calculator { width: 60%; margin: 0 auto; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||||
|
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container calculator">
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
|
<h1>Polkupyöräily kalorilaskuri</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- copy+paste -->
|
||||||
|
|
||||||
|
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
|
||||||
|
<script src="main.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span3">
|
||||||
|
<legend>
|
||||||
|
Sukupuoli
|
||||||
|
<span class="help"><i class="icon-question-sign" rel="tooltip" title="Ei vaikuta tulokseen. Käytetään tulosten tilastoinnissa."></i></span>
|
||||||
|
</legend>
|
||||||
|
<div class="btn-group row-fluid" data-toggle="buttons-radio" id="gender">
|
||||||
|
<button type="button" class="btn span6 btn-large" data-gender="1">M</button>
|
||||||
|
<button type="button" class="btn span6 btn-large" data-gender="2">N</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="span3 select-speed">
|
||||||
|
<legend>Nopeus</legend>
|
||||||
|
<div class="dropdown">
|
||||||
|
<a href="#" class="btn speed-btn dropdown-toggle" data-toggle="dropdown" id="selectedSpeed">
|
||||||
|
<span class="activity"> </span>
|
||||||
|
<span class="description"> </span>
|
||||||
|
<span class="caret"></span>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" id="speed">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="span6">
|
||||||
|
<legend>Paino</legend>
|
||||||
|
<div>
|
||||||
|
<div class="input-append large">
|
||||||
|
<input type="text" id="weight" size="1"/>
|
||||||
|
<span class="add-on">kg</span>
|
||||||
|
</div>
|
||||||
|
<div class="error-msg message hide">Kirjoita kenttään numero.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span6">
|
||||||
|
<legend>
|
||||||
|
Reitti
|
||||||
|
<span class="help"><i class="icon-question-sign" rel="tooltip" title="Käyttää Google Mapsia reittien laskemiseen. Reitit kulkevat pyöräilyyn sopivia teitä."></i></span>
|
||||||
|
</legend>
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span9">
|
||||||
|
<div class="input-prepend">
|
||||||
|
<span class="add-on">1.</span>
|
||||||
|
<input type="text" id="place1" data-var="place1" placeholder="Lähtöosoite"/>
|
||||||
|
</div>
|
||||||
|
<div class="input-prepend">
|
||||||
|
<span class="add-on">2.</span>
|
||||||
|
<input type="text" id="place2" data-var="place2" placeholder="Kohdeosoite"/>
|
||||||
|
</div>
|
||||||
|
<div class="zero-results-msg message hide">Ei reittiä osoitteiden välillä.</div>
|
||||||
|
<div class="not-found-msg message hide">Toista osoitteista ei löytynyt.</div>
|
||||||
|
<a href="#" target="new" class="google-maps-msg hide" tabindex="-1">Katso reitti Google Mapsissa <i class="icon-external-link"></i></a>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn find-route span3 btn-large" id="compute"><i class="icon-arrow-right"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="span6">
|
||||||
|
<legend>Matka</legend>
|
||||||
|
<div>
|
||||||
|
<div class="input-append large">
|
||||||
|
<input type="text" id="distance" size="1"/>
|
||||||
|
<span class="add-on">km</span>
|
||||||
|
</div>
|
||||||
|
<div class="error-msg message hide">Kirjoita kenttään numero.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
|
<p class="result">Kulutit matkallasi <strong><span id="calories">0</span> kilokaloria</strong><span id="control"></span>.</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button type="button" class="btn facebook-btn" id="facebook-share"><i class="icon-facebook-sign"></i> Lähetä Facebookiin</button>
|
||||||
|
tai vaihtoehtoisesti voit kopioida sivun osoitteen ja jakaa sen.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p><strong>Kalorinkulutuksen laskeminen</strong> perustuu MET-arvoihin (<a href="http://fi.wikipedia.org/wiki/Metabolinen_ekvivalentti" target="new">Metabolinen ekvivalentti</a>). Yksi <italic>MET</italic> on 1<italic>kcal/kg/tunti</italic>, joten kertomalla MET arvo painolla ja ajalla saadaan kalorien kulutus.</p>
|
||||||
|
<ul class="sources">
|
||||||
|
<li>Lähde 1: <a href="https://sites.google.com/site/compendiumofphysicalactivities/" target="new">Compendium of Physical Activities</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><strong>Vastaukset tilastoidaan</strong>, jotta voidaan seurata sukupuolijakaumaa, keskimääräistä matkaa ja kalorinkulutusta. Tietoja ei yksilöidä.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- / copy+paste -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
422
main.js
Normal file
422
main.js
Normal file
@@ -0,0 +1,422 @@
|
|||||||
|
$.fn.show_message = function (message) {
|
||||||
|
return this.each(function () {
|
||||||
|
$(this).parent('div').parent().children('.' + message + '-msg').removeClass('hide');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.hide_message = function (message) {
|
||||||
|
return this.each(function () {
|
||||||
|
$(this).parent('div').parent().children('.' + message + '-msg').addClass('hide');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.valueChanged = function (callback) {
|
||||||
|
return this.each(function () {
|
||||||
|
var el = $(this),
|
||||||
|
prev = null,
|
||||||
|
focus = function () {
|
||||||
|
prev = el.attr('value');
|
||||||
|
},
|
||||||
|
change = function () {
|
||||||
|
var val = el.attr('value');
|
||||||
|
if (val !== prev) {
|
||||||
|
prev = val;
|
||||||
|
callback.apply(this);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
el.bind('focus', focus).bind('blur', change).bind('keyup', change);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var toFloat = function (str) {
|
||||||
|
return Number(str.replace(/,/g, '.'));
|
||||||
|
};
|
||||||
|
var displayFloat = function (num) {
|
||||||
|
return num.toString().replace(/\./g, ',');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Okay, this should have been done using eq. JQuery-BBQ
|
||||||
|
// But changing it now would require some hacks as we don't want to break
|
||||||
|
// existing urls.
|
||||||
|
// (places=place+1;place+2 vs. places[]=place+1&places[]=place+2)
|
||||||
|
var HashSave = {
|
||||||
|
settings: {
|
||||||
|
filter: null,
|
||||||
|
types: {},
|
||||||
|
display: {}
|
||||||
|
},
|
||||||
|
init: function (settings) {
|
||||||
|
$.extend(true, HashSave.settings, settings);
|
||||||
|
},
|
||||||
|
save: function (dict) {
|
||||||
|
var hash = [],
|
||||||
|
encode = function (value) {
|
||||||
|
if (typeof value === 'string') {
|
||||||
|
return value.replace(/\ /g, '+');
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
};
|
||||||
|
|
||||||
|
for (var key in dict) {
|
||||||
|
if ((1 + $.inArray(key, HashSave.settings.ignored)) ||
|
||||||
|
HashSave.settings.filter === null ||
|
||||||
|
HashSave.settings.filter(key)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
var val;
|
||||||
|
if ($.isArray(dict[key])) {
|
||||||
|
var r = [];
|
||||||
|
for (var i in dict[key]) {
|
||||||
|
r.push(encode(dict[key][i]));
|
||||||
|
}
|
||||||
|
val = r.join(';');
|
||||||
|
} else {
|
||||||
|
val = encode(dict[key]);
|
||||||
|
}
|
||||||
|
hash.push(key + '=' + val);
|
||||||
|
}
|
||||||
|
|
||||||
|
location.hash = '!' + hash.join('&');
|
||||||
|
},
|
||||||
|
load: function (dict) {
|
||||||
|
var hash = location.hash,
|
||||||
|
display = HashSave.settings.display,
|
||||||
|
decode = function (type, value) {
|
||||||
|
if (type === 'string') {
|
||||||
|
return value.replace(/\+/g, ' ');
|
||||||
|
} else if (type === 'Number') {
|
||||||
|
return toFloat(value);
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
types = HashSave.settings.types;
|
||||||
|
|
||||||
|
if (!hash || hash[1] !== '!') return false;
|
||||||
|
|
||||||
|
hash = hash.slice(2).split('&');
|
||||||
|
for (var i in hash) {
|
||||||
|
var a = hash[i].split('='),
|
||||||
|
key = a[0], value = a[1];
|
||||||
|
|
||||||
|
if ($.isArray(types[key])) {
|
||||||
|
value = value.split(';');
|
||||||
|
for (var b in value) {
|
||||||
|
value[b] = decode(types[key][b], value[b]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
value = decode(types[key], value);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(value);
|
||||||
|
dict[key] = value;
|
||||||
|
if (key in display) {
|
||||||
|
display[key]();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var CalCalc = {
|
||||||
|
mets: {
|
||||||
|
bike: {
|
||||||
|
text: 'Pyöräillen',
|
||||||
|
text2: 'pyöräilen',
|
||||||
|
travelMode: google.maps.TravelMode.BICYCLING,
|
||||||
|
googleLink: '&mra=ltm&lci=bike&z=14&oq=mann&t=h&dirflg=b',
|
||||||
|
data: {
|
||||||
|
18: {activity: 'Hidas', met: 6.8, description: '16-19 km/h'},
|
||||||
|
21: {activity: 'Normaali', met: 8.0, description: '19-23 km/h'},
|
||||||
|
24: {activity: 'Nopea', met: 10.0, description: '23-26 km/h'}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
foot: {
|
||||||
|
text: 'Jalan',
|
||||||
|
text2: 'kuljen jalan',
|
||||||
|
travelMode: google.maps.TravelMode.WALKING,
|
||||||
|
googleLink: '&t=h&dirflg=w&mra=ltm&z=14',
|
||||||
|
data: {
|
||||||
|
5: {activity: 'Kävely', met: 3.0, description: '70 m/min'},
|
||||||
|
12: {activity: 'Juoksu', met: 11.8, description: '200 m/min'}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
genders: {
|
||||||
|
0: 'Puuttuu',
|
||||||
|
1: 'Mies',
|
||||||
|
2: 'Nainen'
|
||||||
|
},
|
||||||
|
calories: [
|
||||||
|
{name: 'omenaa', kcal: 46},
|
||||||
|
{name: 'maitolasillista', kcal: 100},
|
||||||
|
{name: 'jäätelötuuttia', kcal: 200},
|
||||||
|
{name: 'korvapuustia', kcal: 380},
|
||||||
|
{name: 'hampurilaista', kcal: 500},
|
||||||
|
{name: 'pakastepizzaa', kcal: 900},
|
||||||
|
{name: 'sipsipussia', kcal: 1800}
|
||||||
|
],
|
||||||
|
vars: {
|
||||||
|
places: [null, null],
|
||||||
|
calories: 0,
|
||||||
|
weight: 70, // default weight
|
||||||
|
distance: 0,
|
||||||
|
method: ['bike', 21],
|
||||||
|
gender: 0
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
reporting: false
|
||||||
|
},
|
||||||
|
display: {
|
||||||
|
places: function () {
|
||||||
|
$("#place1").attr('value', CalCalc.vars.places[0]);
|
||||||
|
$("#place2").attr('value', CalCalc.vars.places[1]);
|
||||||
|
},
|
||||||
|
calories: function () {
|
||||||
|
$('#calories').html(CalCalc.vars.calories);
|
||||||
|
},
|
||||||
|
distance: function () {
|
||||||
|
$('#distance').attr('value', displayFloat(CalCalc.vars.distance));
|
||||||
|
},
|
||||||
|
weight: function () {
|
||||||
|
$('#weight').attr('value', displayFloat(CalCalc.vars.weight));
|
||||||
|
},
|
||||||
|
method: function () {
|
||||||
|
var el = $('#selectedSpeed');
|
||||||
|
el.find('.activity').html(CalCalc.mets[CalCalc.vars.method[0]].text + ', ' + CalCalc.mets[CalCalc.vars.method[0]].data[CalCalc.vars.method[1]].activity);
|
||||||
|
el.find('.description').html(CalCalc.mets[CalCalc.vars.method[0]].data[CalCalc.vars.method[1]].description);
|
||||||
|
|
||||||
|
$('#speed li').removeClass('active');
|
||||||
|
$('#speed a[data-method=' + CalCalc.vars.method[0] + '][data-speed=' + CalCalc.vars.method[1] + ']').parent().addClass('active');
|
||||||
|
},
|
||||||
|
url: function (value) {
|
||||||
|
return value.replace(/\ /g, '+');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReady: function () {
|
||||||
|
// Google Places Autocomplete
|
||||||
|
var autocompleteOptions = {componentRestrictions: {country: 'fi'}, types: ['geocode']},
|
||||||
|
place1complete = new google.maps.places.Autocomplete($('#place1').get(0), autocompleteOptions),
|
||||||
|
place2complete = new google.maps.places.Autocomplete($('#place2').get(0), autocompleteOptions);
|
||||||
|
|
||||||
|
// Activate inputs with prefilled data
|
||||||
|
$('#weight').attr('placeholder', CalCalc.vars.weight);
|
||||||
|
$('#distance').attr('placeholder', CalCalc.vars.distance);
|
||||||
|
var speedList = '';
|
||||||
|
for (var method in CalCalc.mets) {
|
||||||
|
speedList += '<li class="nav-header">' + CalCalc.mets[method].text + '</li>';
|
||||||
|
for (var speed in CalCalc.mets[method].data) {
|
||||||
|
speedList += '<li><a href="#" data-method="' + method + '" data-speed="' + speed + '">' + CalCalc.mets[method].data[speed].activity + '</a></li>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$('#speed').html(speedList);
|
||||||
|
CalCalc.display.method();
|
||||||
|
|
||||||
|
// Update variables if input value changes
|
||||||
|
$('#place1, #place2').bind('keyup', function (event) {
|
||||||
|
if (event.keyCode === 13) {
|
||||||
|
if (CalCalc.addressChange()) {
|
||||||
|
$(this).blur();
|
||||||
|
$(this).addClass('focus');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$('#compute').click(CalCalc.addressChange);
|
||||||
|
$('#weight').valueChanged(CalCalc.weightChange);
|
||||||
|
$('#distance').valueChanged(CalCalc.distanceChange);
|
||||||
|
$('#speed').find('a').click(CalCalc.speedChange);
|
||||||
|
$('#gender').find('button').click(CalCalc.genderChange);
|
||||||
|
|
||||||
|
HashSave.init({
|
||||||
|
ignored: ['gender', 'calories'],
|
||||||
|
filter: function (key) {
|
||||||
|
// Skip distance if both places are set
|
||||||
|
// Skip places if either of places is null
|
||||||
|
return ((CalCalc.vars.places[0] !== null && CalCalc.vars.places[1] !== null) && key === 'distance') ||
|
||||||
|
((CalCalc.vars.places[0] === null || CalCalc.vars.places[1] === null) && key === 'places');
|
||||||
|
},
|
||||||
|
types: {
|
||||||
|
calories: 'Number',
|
||||||
|
weight: 'Number',
|
||||||
|
distance: 'Number',
|
||||||
|
method: ['string', 'Number'],
|
||||||
|
places: ['string', 'string']
|
||||||
|
},
|
||||||
|
display: CalCalc.display
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Read hashbang
|
||||||
|
if (HashSave.load(CalCalc.vars)) {
|
||||||
|
if (CalCalc.vars.places[0] !== null && CalCalc.vars.places[1] !== null) {
|
||||||
|
CalCalc.updateRoute();
|
||||||
|
} else {
|
||||||
|
CalCalc.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Android - Dropdown fix - Bootstrap 2.1.1
|
||||||
|
// https://github.com/twitter/bootstrap/issues/4550
|
||||||
|
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
$('a.dropdown-toggle').on('touchstart', function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
update: function () {
|
||||||
|
var reportTimeout = null;
|
||||||
|
return function () {
|
||||||
|
if (CalCalc.vars.distance !== null &&
|
||||||
|
CalCalc.vars.method[0] !== null && CalCalc.vars.method[1] !== null &&
|
||||||
|
CalCalc.vars.weight !== null) {
|
||||||
|
|
||||||
|
var duration = CalCalc.vars.distance / CalCalc.vars.method[1], // -> hours
|
||||||
|
met = CalCalc.mets[CalCalc.vars.method[0]].data[CalCalc.vars.method[1]].met;
|
||||||
|
|
||||||
|
CalCalc.vars.calories = (met * CalCalc.vars.weight * duration).toFixed(0);
|
||||||
|
|
||||||
|
CalCalc.display.calories();
|
||||||
|
|
||||||
|
var multi,
|
||||||
|
food,
|
||||||
|
fuu = 0;
|
||||||
|
|
||||||
|
for (var i in CalCalc.calories) {
|
||||||
|
if (CalCalc.vars.calories > CalCalc.calories[i].kcal) {
|
||||||
|
fuu = i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
food = CalCalc.calories[fuu].name;
|
||||||
|
multi = (CalCalc.vars.calories / CalCalc.calories[fuu].kcal).toFixed(2);
|
||||||
|
if (multi > 0) {
|
||||||
|
$('#control').html(', tämä vastaa ' + displayFloat(multi) + ' ' + food);
|
||||||
|
} else {
|
||||||
|
$('#control').html('');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 5 sec after latest update, report values
|
||||||
|
clearTimeout(reportTimeout);
|
||||||
|
reportTimeout = setTimeout(CalCalc.report, 5000);
|
||||||
|
|
||||||
|
HashSave.save(CalCalc.vars);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}(),
|
||||||
|
distanceChange: function () {
|
||||||
|
var el = $('#distance').removeClass('from-route'),
|
||||||
|
distance = toFloat(el.attr('value'));
|
||||||
|
|
||||||
|
if (!isNaN(distance)) {
|
||||||
|
CalCalc.vars.places[0] = null;
|
||||||
|
CalCalc.vars.places[1] = null;
|
||||||
|
$('#place1').attr('value', '').hide_message('error');
|
||||||
|
$('#place2').attr('value', '').hide_message('error').hide_message('zero-results').hide_message('google-maps');
|
||||||
|
|
||||||
|
CalCalc.vars.distance = distance || 0;
|
||||||
|
el.hide_message('error');
|
||||||
|
CalCalc.update();
|
||||||
|
} else {
|
||||||
|
CalCalc.vars.distance = null;
|
||||||
|
el.show_message('error');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
weightChange: function () {
|
||||||
|
var el = $(this),
|
||||||
|
weight = toFloat(el.attr('value'));
|
||||||
|
|
||||||
|
if (!isNaN(weight)) {
|
||||||
|
CalCalc.vars.weight = weight || toFloat(el.attr('placeholder'));
|
||||||
|
el.hide_message('error');
|
||||||
|
CalCalc.update();
|
||||||
|
} else {
|
||||||
|
// Parse error - weight not number
|
||||||
|
CalCalc.vars.weight = null;
|
||||||
|
el.show_message('error');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
speedChange: function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var data = $(this).data('speed');
|
||||||
|
var data2 = $(this).data('method');
|
||||||
|
if (data2 in CalCalc.mets && data in CalCalc.mets[data2].data) {
|
||||||
|
CalCalc.vars.method = [data2, data];
|
||||||
|
CalCalc.display.method();
|
||||||
|
if (!CalCalc.updateRoute()) {
|
||||||
|
CalCalc.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
genderChange: function () {
|
||||||
|
var data = $(this).data('gender');
|
||||||
|
if (data in CalCalc.genders) {
|
||||||
|
CalCalc.vars.gender = data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addressChange: function () {
|
||||||
|
CalCalc.vars.places[0] = $("#place1").attr('value');
|
||||||
|
CalCalc.vars.places[1] = $("#place2").attr('value');
|
||||||
|
CalCalc.updateRoute();
|
||||||
|
|
||||||
|
return CalCalc.vars.places[0] !== '' && CalCalc.vars.places[1] !== '';
|
||||||
|
},
|
||||||
|
updateRoute: function () {
|
||||||
|
var service = new google.maps.DirectionsService();
|
||||||
|
return function () {
|
||||||
|
$("#place2").hide_message('zero-results').hide_message('not-found');
|
||||||
|
if (!CalCalc.vars.places[0] || !CalCalc.vars.places[1]) return false;
|
||||||
|
|
||||||
|
var request = {
|
||||||
|
destination: CalCalc.vars.places[1],
|
||||||
|
origin: CalCalc.vars.places[0],
|
||||||
|
travelMode: CalCalc.mets[CalCalc.vars.method[0]].travelMode,
|
||||||
|
region: 'fi'
|
||||||
|
};
|
||||||
|
|
||||||
|
service.route(request, function (result, status) {
|
||||||
|
// console.log(status);
|
||||||
|
if (status === google.maps.DirectionsStatus.ZERO_RESULTS) {
|
||||||
|
$("#place2").show_message('zero-results').hide_message('google-maps');
|
||||||
|
} else if (status === google.maps.DirectionsStatus.NOT_FOUND) {
|
||||||
|
$("#place2").show_message('not-found').hide_message('google-maps');
|
||||||
|
} else if (status === google.maps.DirectionsStatus.OK && result.routes.length !== 0 || result.routes[0].legs.length !== 0) {
|
||||||
|
$("#place2").show_message('google-maps');
|
||||||
|
$(".google-maps-msg").attr('href', 'https://maps.google.com/maps?saddr=' + CalCalc.display.url(CalCalc.vars.places[0]) + '&daddr=' + CalCalc.display.url(CalCalc.vars.places[1]) + CalCalc.mets[CalCalc.vars.method[0]].googleLink);
|
||||||
|
|
||||||
|
// console.log(result.routes[0].legs[0]);
|
||||||
|
CalCalc.vars.places[0] = result.routes[0].legs[0].start_address;
|
||||||
|
CalCalc.vars.places[1] = result.routes[0].legs[0].end_address;
|
||||||
|
CalCalc.display.places();
|
||||||
|
|
||||||
|
CalCalc.vars.distance = result.routes[0].legs[0].distance.value / 1000; // m -> km
|
||||||
|
$('#distance').addClass('from-route').hide_message('error');//.attr('value', displayFloat(CalCalc.vars.distance.toFixed(2)));
|
||||||
|
CalCalc.display.distance();
|
||||||
|
CalCalc.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Now that input value has been changed, focus can be returned to it.
|
||||||
|
$("#place1, #place2").filter(".focus").focus().removeClass('focus');
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
}(),
|
||||||
|
report: function () {
|
||||||
|
if (CalCalc.vars.distance > 100 || !CalCalc.settings.reporting) return;
|
||||||
|
|
||||||
|
_gaq.push(['_trackEvent', 'CalCalc', 'Weight', 'Weight', Number(CalCalc.vars.weight.toFixed(0)), true]);
|
||||||
|
_gaq.push(['_trackEvent', 'CalCalc', 'Distance', 'Distance', Number(CalCalc.vars.distance.toFixed(0)), true]);
|
||||||
|
_gaq.push(['_trackEvent', 'CalCalc', 'Kilocalories', 'Kilocalories', Number(CalCalc.vars.calories), true]);
|
||||||
|
_gaq.push(['_trackEvent', 'CalCalc', 'Gender', CalCalc.genders[CalCalc.vars.gender], undefined, true]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('[rel=tooltip]').tooltip({
|
||||||
|
container: 'body'
|
||||||
|
});
|
||||||
|
CalCalc.onReady();
|
||||||
|
});
|
||||||
144
main.less
Normal file
144
main.less
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
@import "dynamicgif.less";
|
||||||
|
@import "elements.less";
|
||||||
|
|
||||||
|
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
|
||||||
|
background-color: @start;
|
||||||
|
background-image: -webkit-linear-gradient(@origin, @start, @stop);
|
||||||
|
background-image: -moz-linear-gradient(@origin, @start, @stop);
|
||||||
|
background-image: -o-linear-gradient(@origin, @start, @stop);
|
||||||
|
background-image: -ms-linear-gradient(@origin, @start, @stop);
|
||||||
|
background-image: linear-gradient(@origin, @start, @stop);
|
||||||
|
}
|
||||||
|
|
||||||
|
@input_padding: 2%;
|
||||||
|
@input_width: 85.85%;
|
||||||
|
@addon_width: 9.85%;
|
||||||
|
|
||||||
|
@large_input_width: 60.85%;
|
||||||
|
@large_addon_width: 34.85%;
|
||||||
|
|
||||||
|
@result_input_width: 35%;
|
||||||
|
@result_addon_width: 20%;
|
||||||
|
|
||||||
|
.calculator {
|
||||||
|
input {
|
||||||
|
width: @input_width;
|
||||||
|
padding-left: @input_padding;
|
||||||
|
padding-right: @input_padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-on {
|
||||||
|
width: @addon_width;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-append.large {
|
||||||
|
input {
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 55px;
|
||||||
|
height: 55px;
|
||||||
|
text-align: right;
|
||||||
|
width: @large_input_width;
|
||||||
|
}
|
||||||
|
.add-on {
|
||||||
|
height: 55px;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 55px;
|
||||||
|
width: @large_addon_width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 64px;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sources {
|
||||||
|
margin-top: -0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span.help {
|
||||||
|
color: #3D5DA8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.from-route {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-large {
|
||||||
|
padding: 4px 19px;
|
||||||
|
line-height: 55px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
& > .btn + .btn {
|
||||||
|
margin-left: 0;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
[class*="span"] { float: left; }
|
||||||
|
.span6 { width: 49.9998%; }
|
||||||
|
.span4 { width: 33.332%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed-btn {
|
||||||
|
height: 55px;
|
||||||
|
line-height: 27px;
|
||||||
|
text-align: left;
|
||||||
|
display: block;
|
||||||
|
span.activity {
|
||||||
|
display: block;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
span.description {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.caret {
|
||||||
|
margin-top: -27px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
li.active a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
background: #DD4F4F;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 1px 12px;
|
||||||
|
position: absolute;
|
||||||
|
.rounded(3px);
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
border-right: 6px solid transparent;
|
||||||
|
border-bottom: 6px solid #DD4F4F;
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
&.hide { display: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user