Skip to content

Commit

Permalink
updated slider to create a licket scale
Browse files Browse the repository at this point in the history
  • Loading branch information
@jongund
jongund committed Sep 27, 2023
1 parent 1f2e462 commit 45a09d6
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 134 deletions.
35 changes: 8 additions & 27 deletions content/patterns/slider/examples/css/slider-rating.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
fill-opacity: 0;
}

.rating-slider svg .star {
.rating-slider svg .circle {
stroke-width: 2px;
stroke: currentcolor;
fill-opacity: 0;
Expand All @@ -31,56 +31,37 @@
fill-opacity: 0;
}

.rating-slider[aria-valuenow="5"] svg .star {
.rating-slider[aria-valuenow="1"] svg .circle-1 .circle {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="0.5"] svg .star-1 .fill-left {
.rating-slider[aria-valuenow="2"] svg .circle-2 .circle {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="1"] svg .star-1 .star {
.rating-slider[aria-valuenow="3"] svg .circle-3 .circle {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="1.5"] svg .star-1 .star,
.rating-slider[aria-valuenow="1.5"] svg .star-2 .fill-left {
.rating-slider[aria-valuenow="4"] svg .circle-4 .circle {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="2"] svg .star-2 .star {
.rating-slider[aria-valuenow="5"] svg .circle-5 .circle {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="2.5"] svg .star-2 .star,
.rating-slider[aria-valuenow="2.5"] svg .star-3 .fill-left {
.rating-slider[aria-valuenow="6"] svg .circle-6 .circle {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="3"] svg .star-3 .star {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="3.5"] svg .star-3 .star,
.rating-slider[aria-valuenow="3.5"] svg .star-4 .fill-left {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="4"] svg .star-4 .star {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="4.5"] svg .star-4 .star,
.rating-slider[aria-valuenow="4.5"] svg .star-5 .fill-left {
.rating-slider[aria-valuenow="7"] svg .circle-7 .circle {
fill: currentcolor;
fill-opacity: 1;
}
Expand Down
142 changes: 57 additions & 85 deletions content/patterns/slider/examples/js/slider-rating.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@ class RatingSlider {
// var color = getComputedStyle(this.sliderNode).color;
// this.svgNode.setAttribute('color', color);

this.starsWidth = 198;
this.starsX = 0;
this.railWidth = 200;
this.railOffset = 10;

this.valueMin = this.getValueMin();
this.valueMax = this.getValueMax();

this.svgPoint = this.svgNode.createSVGPoint();

Expand All @@ -44,10 +47,10 @@ class RatingSlider {
// bind a pointerup event handler to stop tracking pointer movements
document.addEventListener('pointerup', this.onPointerUp.bind(this));

this.addTotalStarsToRatingLabel();
this.addTotalCirclesToRatingLabel();
this.sliderNode.addEventListener(
'blur',
this.addTotalStarsToRatingLabel.bind(this)
this.addTotalCirclesToRatingLabel.bind(this)
);
}

Expand All @@ -70,46 +73,31 @@ class RatingSlider {
return parseFloat(this.sliderNode.getAttribute('aria-valuemax'));
}

isInRange(value) {
let valueMin = this.getValueMin();
let valueMax = this.getValueMax();
return value <= valueMax && value >= valueMin;
}

getValueText(value) {
switch (value) {
case 0:
return 'zero stars';

case 0.5:
return 'one half star';

case 1.0:
return 'one star';
return 'no rating selected';

case 1.5:
return 'one and a half stars';
case 1:
return 'Strongly disagree';

case 2.0:
return 'two stars';
case 2:
return 'Disagree';

case 2.5:
return 'two and a half stars';
case 3:
return 'Somewhat disagree';

case 3.0:
return 'three stars';
case 4:
return 'Neither agree or disagree';

case 3.5:
return 'three and a half stars';
case 5:
return 'Somewhat agree';

case 4.0:
return 'four stars';
case 6:
return 'Agree';

case 4.5:
return 'four and a half stars';

case 5.0:
return 'five stars';
case 7:
return 'Strongly agree';

default:
break;
Expand All @@ -121,37 +109,28 @@ class RatingSlider {
getValueTextWithMax(value) {
switch (value) {
case 0:
return 'zero of five stars';

case 0.5:
return 'one half of five stars';

case 1.0:
return 'one of five stars';
return 'no rating on the seven point rating scale selected';

case 1.5:
return 'one and a half of five stars';
case 1:
return 'Strongly disagree, first of seven point rating scale';

case 2.0:
return 'two of five stars';
case 2:
return 'Disagree, second of seven point rating scale';

case 2.5:
return 'two and a half of five stars';
case 3:
return 'Somewhat disagree, seven point rating scale';

case 3.0:
return 'three of five stars';
case 4:
return 'Neither agree or disagree, seven point rating scale';

case 3.5:
return 'three and a half of five stars';
case 5:
return 'Somewhat agree, fifth of seven point rating scale';

case 4.0:
return 'four of five stars';
case 6:
return 'Agree, sixth of seven point rating scale';

case 4.5:
return 'four and a half of five stars';

case 5.0:
return 'five of five stars';
case 7:
return 'Strongly agree, seventh of seven point rating scale';

default:
break;
Expand All @@ -161,54 +140,45 @@ class RatingSlider {
}

moveSliderTo(value) {
let valueMax, valueMin;

valueMin = this.getValueMin();
valueMax = this.getValueMax();

value = Math.min(Math.max(value, valueMin), valueMax);

value = Math.min(Math.max(value, 1), this.valueMax);
this.sliderNode.setAttribute('aria-valuenow', value);

this.sliderNode.setAttribute('aria-valuetext', this.getValueText(value));
}

onSliderKeydown(event) {
var flag = false;
var value = this.getValue();
var valueMin = this.getValueMin();
var valueMax = this.getValueMax();

switch (event.key) {
case 'ArrowLeft':
case 'ArrowDown':
this.moveSliderTo(value - 0.5);
this.moveSliderTo(value - 1);
flag = true;
break;

case 'ArrowRight':
case 'ArrowUp':
this.moveSliderTo(value + 0.5);
this.moveSliderTo(value + 1);
flag = true;
break;

case 'PageDown':
this.moveSliderTo(value - 1);
this.moveSliderTo(value - 2);
flag = true;
break;

case 'PageUp':
this.moveSliderTo(value + 1);
this.moveSliderTo(value + 2);
flag = true;
break;

case 'Home':
this.moveSliderTo(valueMin);
this.moveSliderTo(1);
flag = true;
break;

case 'End':
this.moveSliderTo(valueMax);
this.moveSliderTo(this.valueMax);
flag = true;
break;

Expand All @@ -222,17 +192,18 @@ class RatingSlider {
}
}

addTotalStarsToRatingLabel() {
addTotalCirclesToRatingLabel() {
let valuetext = this.getValueTextWithMax(this.getValue());
this.sliderNode.setAttribute('aria-valuetext', valuetext);
}

onRailClick(event) {
var x = this.getSVGPoint(event).x;
var min = this.getValueMin();
var max = this.getValueMax();
var diffX = x - this.starsX;
var value = Math.round((2 * (diffX * (max - min))) / this.starsWidth) / 2;
const x = this.getSVGPoint(event).x;
const diffX = x - this.railOffset;
const fract =
0.5 + (diffX * (this.valueMax - this.valueMin)) / this.railWidth;
const value = Math.round(fract);

this.moveSliderTo(value);

event.preventDefault();
Expand All @@ -254,11 +225,12 @@ class RatingSlider {

onPointerMove(event) {
if (this.isMoving) {
var x = this.getSVGPoint(event).x;
var min = this.getValueMin();
var max = this.getValueMax();
var diffX = x - this.starsX;
var value = Math.round((2 * (diffX * (max - min))) / this.starsWidth) / 2;
const x = this.getSVGPoint(event).x;
const diffX = x - this.railOffset;
const fract =
0.5 + (diffX * (this.valueMax - this.valueMin)) / this.railWidth;
const value = Math.round(fract);

this.moveSliderTo(value);

event.preventDefault();
Expand Down
42 changes: 20 additions & 22 deletions content/patterns/slider/examples/slider-rating.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,38 +62,36 @@ <h2 id="ex_label">Example</h2>
<div id="ex1">
<div id="id-rating-label" class="label">Rating</div>

<div id="id-rating" class="rating-slider" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="5" aria-valuetext="no stars" aria-labelledby="id-rating-label">
<div id="id-rating" class="rating-slider" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="7" aria-valuetext="no stars" aria-labelledby="id-rating-label">
<!-- SVG position and dimension values added through Javascript -->

<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="224" height="48">
<defs>
<g id="star">
<polygon points="2.0,13.4 11.7,20.5 8.0,31.1 17.7,24.8 27.4,31.9 23.7,20.5 33.4,13.4 21.4,13.4 17.7,2.0 14.0,13.4" />
</g>
<g id="fill-left">
<polygon points="2.0,13.4 11.7,20.5 8.0,31.1 17.7,24.8 17.7,2.0 14.0,13.4" />
<g id="circle">
<circle cx="10" cy="10" r="10"/>
</g>
</defs>
<rect class="focus-ring" x="2" y="2" width="212" height="44" rx="5" />
<g class="star-1 star-2 star-3 star-4 star-5">
<use class="star" xlink:href="#star" x="10" y="7" />
<use class="fill-left" xlink:href="#fill-left" x="10" y="7" />
<rect class="focus-ring" x="2" y="2" width="218" height="36" rx="5" />
<g class="circle-1">
<use class="circle" xlink:href="#circle" x="10" y="10" />
</g>
<g class="circle-2">
<use class="circle" xlink:href="#circle" x="40" y="10" />
</g>
<g class="circle-3">
<use class="circle" xlink:href="#circle" x="70" y="10" />
</g>
<g class="star-2 star-3 star-4 star-5">
<use class="star" xlink:href="#star" x="50" y="7" />
<use class="fill-left" xlink:href="#fill-left" x="50" y="7" />
<g class="circle-4">
<use class="circle" xlink:href="#circle" x="100" y="10" />
</g>
<g class="star-3 star-4 star-5">
<use class="star" xlink:href="#star" x="90" y="7" />
<use class="fill-left" xlink:href="#fill-left" x="90" y="7" />
<g class="circle-5">
<use class="circle" xlink:href="#circle" x="130" y="10" />
</g>
<g class="star-4 star-5">
<use class="star" xlink:href="#star" x="130" y="7" />
<use class="fill-left" xlink:href="#fill-left" x="130" y="7" />
<g class="circle-6">
<use class="circle" xlink:href="#circle" x="160" y="10" />
</g>
<g class="star-5">
<use class="star" xlink:href="#star" x="170" y="7" />
<use class="fill-left" xlink:href="#fill-left" x="170" y="7" />
<g class="circle-7">
<use class="circle" xlink:href="#circle" x="190" y="10" />
</g>
</svg>
</div>
Expand Down

0 comments on commit 45a09d6

Please sign in to comment.