DeltaLima/CanGrow
DeltaLima/CanGrow
0
0
Fork 0
Code Issues 14 Pull requests Projects 1 Releases 3 Packages Wiki Activity

playground - without needle

Browse source
This commit is contained in:
Marcus 2024-05-03 01:33:38 +02:00
parent 150a8b9b02
commit 43f0d935a4
3 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
playground/html/material-gauge-gh-pages/index.html
View file

@ -39,7 +39,7 @@
<div class='gauge__background'></div> <div class='gauge__background'></div>
<div class='gauge__center'></div> <div class='gauge__center'></div>
<div class='gauge__data'></div> <div class='gauge__data'></div>
<div class='gauge__needle'></div> <!-- <div class='gauge__needle'></div> -->
</div> </div>
<div class='gauge__labels mdl-typography__headline'> <div class='gauge__labels mdl-typography__headline'>
<span class='gauge__label--low'></span> <span class='gauge__label--low'></span>

4
playground/html/root/gauge.js
View file

@ -13,7 +13,7 @@ var setElement = function(el) {
// Keep a reference to the various elements and sub-elements // Keep a reference to the various elements and sub-elements
element = el; element = el;
data = element.querySelector('.gauge__data'); data = element.querySelector('.gauge__data');
needle = element.querySelector('.gauge__needle'); //needle = element.querySelector('.gauge__needle');
valueLabel = element.querySelector('.gauge__label--spacer'); valueLabel = element.querySelector('.gauge__label--spacer');
}; };
@ -23,7 +23,7 @@ var setValue = function(x, max, unit) {
value = percentage / 100; value = percentage / 100;
var turns = -0.5 + (value * 0.5); var turns = -0.5 + (value * 0.5);
data.style[prop] = 'rotate(' + turns + 'turn)'; data.style[prop] = 'rotate(' + turns + 'turn)';
needle.style[prop] = 'rotate(' + turns + 'turn)'; //needle.style[prop] = 'rotate(' + turns + 'turn)';
valueLabel.textContent = x + unit; valueLabel.textContent = x + unit;
}; };

6
playground/html/root/index.html
View file

@ -114,7 +114,7 @@ a:active {
<div class='gauge__background'></div> <div class='gauge__background'></div>
<div class='gauge__center'></div> <div class='gauge__center'></div>
<div class='gauge__data'></div> <div class='gauge__data'></div>
<div class='gauge__needle'></div> <!-- <div class='gauge__needle'></div> -->
</div> </div>
<div class='gauge__labels mdl-typography__headline'> <div class='gauge__labels mdl-typography__headline'>
<span class='gauge__label--low'></span> <span class='gauge__label--low'></span>
@ -129,7 +129,7 @@ a:active {
<div class='gauge__background'></div> <div class='gauge__background'></div>
<div class='gauge__center'></div> <div class='gauge__center'></div>
<div class='gauge__data'></div> <div class='gauge__data'></div>
<div class='gauge__needle'></div> <!-- <div class='gauge__needle'></div> -->
</div> </div>
<div class='gauge__labels mdl-typography__headline'> <div class='gauge__labels mdl-typography__headline'>
<span class='gauge__label--low'></span> <span class='gauge__label--low'></span>
@ -144,7 +144,7 @@ a:active {
<div class='gauge__background'></div> <div class='gauge__background'></div>
<div class='gauge__center'></div> <div class='gauge__center'></div>
<div class='gauge__data'></div> <div class='gauge__data'></div>
<div class='gauge__needle'></div> <!-- <div class='gauge__needle'></div> -->
</div> </div>
<div class='gauge__labels mdl-typography__headline'> <div class='gauge__labels mdl-typography__headline'>
<span class='gauge__label--low'></span> <span class='gauge__label--low'></span>