-
Notifications
You must be signed in to change notification settings - Fork 273
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui5-rating-indicator): initial implementation (#1729)
- v./29.5
- v2.8.0-rc.1
- v2.8.0-rc.0
- v2.7.3
- v2.7.2
- v2.7.1
- v2.7.0
- v2.7.0-rc.2
- v2.7.0-rc.1
- v2.7.0-rc.0
- v2.6.3
- v2.6.2
- v2.6.2-rc.0
- v2.6.1
- v2.6.0
- v2.6.0-rc.5
- v2.6.0-rc.4
- v2.6.0-rc.3
- v2.6.0-rc.2
- v2.6.0-rc.1
- v2.6.0-rc.0
- v2.5.2
- v2.5.1
- v2.5.0
- v2.5.0-rc.3
- v2.5.0-rc.2
- v2.5.0-rc.1
- v2.5.0-rc.0
- v2.4.1-rc.0
- v2.4.0
- v2.4.0-rc.4
- v2.4.0-rc.3
- v2.4.0-rc.2
- v2.4.0-rc.1
- v2.4.0-rc.0
- v2.3.1-rc.0
- v2.3.0
- v2.3.0-rc.3
- v2.3.0-rc.2
- v2.3.0-rc.1
- v2.3.0-rc.0
- v2.2.0
- v2.2.0-rc.3
- v2.2.0-rc.2
- v2.2.0-rc.1
- v2.2.0-rc.0
- v2.1.2
- v2.1.1
- v2.1.0
- v2.1.0-rc.3
- v2.1.0-rc.2
- v2.1.0-rc.1
- v2.1.0-rc.0
- v2.0.1
- v2.0.0
- v2.0.0-rc.6
- v2.0.0-rc.5
- v2.0.0-rc.4
- v2.0.0-rc.3
- v2.0.0-rc.2
- v2.0.0-rc.1
- v2.0.0-rc.0
- v1.24.16
- v1.24.15
- v1.24.14
- v1.24.13
- v1.24.12
- v1.24.11
- v1.24.10
- v1.24.9
- v1.24.8
- v1.24.7
- v1.24.6
- v1.24.5
- v1.24.4
- v1.24.3
- v1.24.2
- v1.24.1
- v1.24.0
- v1.24.0-rc.4
- v1.24.0-rc.3
- v1.24.0-rc.2
- v1.24.0-rc.1
- v1.24.0-rc.0
- v1.23.3
- v1.23.2
- v1.23.1
- v1.23.1-rc.0
- v1.23.0
- v1.23.0-rc.5
- v1.23.0-rc.4
- v1.23.0-rc.3
- v1.23.0-rc.2
- v1.23.0-rc.1
- v1.23.0-rc.0
- v1.22.1-rc.0
- v1.22.0
- v1.22.0-rc.3
- v1.22.0-rc.2
- v1.22.0-rc.1
- v1.22.0-rc.0
- v1.21.2
- v1.21.1
- v1.21.0
- v1.21.0-rc.5
- v1.21.0-rc.4
- v1.21.0-rc.3
- v1.21.0-rc.2
- v1.21.0-rc.1
- v1.21.0-rc.0
- v1.20.1
- v1.20.0
- v1.20.0-rc.3
- v1.20.0-rc.2
- v1.20.0-rc.1
- v1.20.0-rc.0
- v1.19.1
- v1.19.0
- v1.19.0-rc.3
- v1.19.0-rc.2
- v1.19.0-rc.1
- v1.19.0-rc.0
- v1.18.1-rc.0
- v1.18.0
- v1.18.0-rc.2
- v1.18.0-rc.1
- v1.18.0-rc.0
- v1.17.4
- v1.17.3
- v1.17.2
- v1.17.1
- v1.17.0
- v1.17.0-rc.2
- v1.17.0-rc.1
- v1.17.0-rc.0
- v1.16.0
- v1.16.0-rc.4
- v1.16.0-rc.3
- v1.16.0-rc.2
- v1.16.0-rc.1
- v1.16.0-rc.0
- v1.15.1
- v1.15.0
- v1.15.0-rc.2
- v1.15.0-rc.1
- v1.15.0-rc.0
- v1.14.7
- v1.14.6
- v1.14.5
- v1.14.4
- v1.14.3
- v1.14.2
- v1.14.1
- v1.14.0
- v1.14.0-rc.2
- v1.14.0-rc.1
- v1.14.0-rc.0
- v1.13.3
- v1.13.2
- v1.13.1
- v1.13.0
- v1.13.0-rc.5
- v1.13.0-rc.4
- v1.13.0-rc.3
- v1.13.0-rc.2
- v1.13.0-rc.1
- v1.13.0-rc.0
- v1.12.2
- v1.12.1
- v1.12.0
- v1.12.0-rc.3
- v1.12.0-rc.2
- v1.12.0-rc.1
- v1.12.0-rc.0
- v1.11.3
- v1.11.2
- v1.11.1
- v1.11.0
- v1.11.0-rc.4
- v1.11.0-rc.3
- v1.11.0-rc.2
- v1.11.0-rc.1
- v1.11.0-rc.0
- v1.10.7
- v1.10.6
- v1.10.5
- v1.10.4
- v1.10.4-rc.0
- v1.10.3
- v1.10.2
- v1.10.1
- v1.10.0
- v1.9.5
- v1.9.4
- v1.9.3
- v1.9.2
- v1.9.1
- v1.9.0
- v1.8.0
- v1.7.5
- v1.7.4
- v1.7.3
- v1.7.2
- v1.7.1
- v1.7.0
- v1.6.0
- v1.5.0
- v1.4.0
- v1.3.1
- v1.3.0
- v1.2.9
- v.1.2.7
- v1.2.6
- v1.2.5
- v1.2.4
- v1.2.3
- v1.2.2
- v1.2.1
- v1.2.0
- v1.1.2
- v1.1.1
- v1.1.0
- v1.0.2
- v1.0.1
- v1.0.0
- v1.0.0-rc.16
- v1.0.0-rc.15
- v1.0.0-rc.14
- v1.0.0-rc.13
- v1.0.0-rc.12
- v1.0.0-rc.11
- v1.0.0-rc.10
- v1.0.0-rc.9
- v1.0.0-rc.8
- v0.33.0
- v0.31.27
- v0.31.26
- v0.31.25
- v0.31.24
- v0.31.23
- v0.31.22
- v0.31.21
- v0.31.20
- v0.31.19
- v0.31.18
- v0.31.17
- v0.31.16
- v0.31.15
- v0.31.14
- v0.31.13
- v0.31.12
- v0.31.11
- v0.31.10
- v0.31.9
- v0.31.8
- v0.31.7
- v0.31.6
- v0.31.1
- v0.31.0
- v0.29.20
- v0.29.19
- v0.29.18
- v0.29.17
- v0.29.16
- v0.29.15
- v0.29.9
- v0.29.8
- v0.29.6
- v0.29.5
- v0/29/5
- v0.29.4
- v0.29.3
- v0.29.2
- v0.29.1
- v0.29.0
- v0.29
- v0.27.3
- v0.27.2
- v0.27.1
- v0.27.0
- v0.23.7
- v0.23.6
- v0.23.5
- v0.23.4
- v0.23.3
- v0.23.2
- v0.23.1
- v0.23.0
- v0.21.11
- v0.21.10
- v0.21.9
- v0.21.0
- v0.0.0-dd8065714
- v0.0.0-7b49a7ff1
Showing
13 changed files
with
565 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import DataType from "./DataType.js"; | ||
|
||
class Float extends DataType { | ||
static isValid(value) { | ||
// Assuming that integers are floats as well! | ||
return Number(value) === value; | ||
} | ||
} | ||
|
||
export default Float; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<div class="ui5-rating-indicator-root" | ||
role="slider" | ||
aria-roledescription="{{_ariaRoleDescription}}" | ||
aria-valuemin="0" | ||
aria-valuenow="{{this.value}}" | ||
aria-valuemax="{{this.maxValue}}" | ||
aria-orientation="horizontal" | ||
?aria-disabled="{{this.disabled}}" | ||
?aria-readonly="{{this.readOnly}}" | ||
tabindex="{{tabIndex}}" | ||
@focusin="{{_onfocusin}}" | ||
@focusout="{{_onfocusout}}" | ||
@click="{{_onclick}}" | ||
@keydown="{{_onkeydown}}" | ||
> | ||
<div | ||
class="ui5-rating-indicator-stars-wrapper" | ||
> | ||
{{#each _stars}} | ||
{{#if this.selected}} | ||
<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">★</div> | ||
{{else if this.halfStar}} | ||
<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">☆</div> | ||
{{else}} | ||
<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">☆</div> | ||
{{/if}} | ||
{{/each}} | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,256 @@ | ||
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; | ||
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; | ||
import { | ||
isDown, | ||
isUp, | ||
isLeft, | ||
isRight, | ||
isSpace, | ||
isEnter, | ||
} from "@ui5/webcomponents-base/dist/Keys.js"; | ||
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; | ||
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; | ||
import Float from "@ui5/webcomponents-base/dist/types/Float.js"; | ||
import { | ||
RATING_INDICATOR_TEXT, | ||
} from "./generated/i18n/i18n-defaults.js"; | ||
import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js"; | ||
|
||
// Styles | ||
import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js"; | ||
|
||
/** | ||
* @public | ||
*/ | ||
const metadata = { | ||
tag: "ui5-rating-indicator", | ||
properties: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ { | ||
|
||
/** | ||
* The indicated value of the rating | ||
* <br><br> | ||
* <b>Note:</b> If you set a number which is not round, it would be shown as follows: | ||
* <ul> | ||
* <li>1.0 - 1.2 -> 1</li> | ||
* <li>1.3 - 1.7 -> 1.5</li> | ||
* <li>1.8 - 1.9 -> 2</li> | ||
* <ul> | ||
* @type {Float} | ||
* @defaultvalue 0 | ||
* @public | ||
*/ | ||
value: { | ||
type: Float, | ||
defaultValue: 0, | ||
}, | ||
|
||
/** | ||
* The number of displayed rating symbols | ||
* @type {Integer} | ||
* @defaultvalue 5 | ||
* @public | ||
*/ | ||
maxValue: { | ||
type: Integer, | ||
defaultValue: 5, | ||
}, | ||
|
||
/** | ||
* Defines whether the <code>ui5-rating-indicator</code> is disabled. | ||
* @type {boolean} | ||
* @defaultvalue false | ||
* @public | ||
*/ | ||
disabled: { | ||
type: Boolean, | ||
}, | ||
|
||
/** | ||
* @type {boolean} | ||
* @defaultvalue false | ||
* @public | ||
*/ | ||
readonly: { | ||
type: Boolean, | ||
}, | ||
|
||
/** | ||
* @private | ||
*/ | ||
_stars: { | ||
type: Object, | ||
multiple: true, | ||
}, | ||
|
||
/** | ||
* @private | ||
*/ | ||
_focused: { | ||
type: Boolean, | ||
}, | ||
}, | ||
slots: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ { | ||
// | ||
}, | ||
events: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ { | ||
|
||
/** | ||
* The event is fired when the value changes. | ||
* | ||
* @event | ||
* @public | ||
*/ | ||
change: {}, | ||
}, | ||
}; | ||
|
||
/** | ||
* @class | ||
* | ||
* <h3 class="comment-api-title">Overview</h3> | ||
* The rating indicator is used to display a specific number of icons that are used to rate an item. | ||
* Additionally, it is also used to display the average and overall ratings. | ||
* | ||
* <h3>Usage</h3> | ||
* The preferred number of icons is between 5 and 7. | ||
* | ||
* <h3>Responsive Behavior</h3> | ||
* You can change the size of the Rating Indicator by changing its <code>font-size</code> CSS property. | ||
* <br> | ||
* Example: <code><ui5-rating-indicator style="font-size: 3rem;"></ui5-rating-indicator></code> | ||
* | ||
* <h3>Usage</h3> | ||
* | ||
* For the <code>ui5-rating-indicator</code> | ||
* <h3>ES6 Module Import</h3> | ||
* | ||
* <code>import @ui5/webcomponents/dist/RatingIndicator.js";</code> | ||
* | ||
* @constructor | ||
* @author SAP SE | ||
* @alias sap.ui.webcomponents.main.RatingIndicator | ||
* @extends UI5Element | ||
* @tagname ui5-rating-indicator | ||
* @public | ||
*/ | ||
class RatingIndicator extends UI5Element { | ||
static get metadata() { | ||
return metadata; | ||
} | ||
|
||
static get render() { | ||
return litRender; | ||
} | ||
|
||
static get styles() { | ||
return RatingIndicatorCss; | ||
} | ||
|
||
static get template() { | ||
return RatingIndicatorTemplate; | ||
} | ||
|
||
static async onDefine() { | ||
await Promise.all([ | ||
fetchI18nBundle("@ui5/webcomponents"), | ||
]); | ||
} | ||
|
||
constructor() { | ||
super(); | ||
|
||
this._liveValue = null; // stores the value to determine when to fire change | ||
this.i18nBundle = getI18nBundle("@ui5/webcomponents"); | ||
} | ||
|
||
onBeforeRendering() { | ||
this.calcState(); | ||
} | ||
|
||
calcState() { | ||
this._stars = []; | ||
|
||
for (let i = 1; i < this.maxValue + 1; i++) { | ||
const remainder = Math.round((this.value - Math.floor(this.value)) * 10); | ||
let halfStar = false, | ||
tempValue = this.value; | ||
|
||
if (Math.floor(this.value) + 1 === i && remainder > 2 && remainder < 8) { | ||
halfStar = true; | ||
} else if (remainder <= 2) { | ||
tempValue = Math.floor(this.value); | ||
} else if (remainder >= 8) { | ||
tempValue = Math.ceil(this.value); | ||
} | ||
|
||
this._stars.push({ | ||
selected: i <= tempValue, | ||
index: i, | ||
halfStar, | ||
}); | ||
} | ||
} | ||
|
||
_onclick(event) { | ||
if (this.disabled || this.readonly) { | ||
return; | ||
} | ||
|
||
this.value = parseInt(event.target.getAttribute("data-value")); | ||
|
||
if (this.value === 1 && this._liveValue === 1) { | ||
this.value = 0; | ||
} | ||
|
||
if (this._liveValue !== this.value) { | ||
this.fireEvent("change"); | ||
this._liveValue = this.value; | ||
} | ||
} | ||
|
||
_onkeydown(event) { | ||
if (this.disabled || this.readonly) { | ||
return; | ||
} | ||
|
||
const down = isDown(event) || isLeft(event); | ||
const up = isRight(event) || isUp(event) || isSpace(event) || isEnter(event); | ||
|
||
if (down || up) { | ||
event.preventDefault(); | ||
|
||
if (down && this.value > 0) { | ||
this.value = Math.round(this.value - 1); | ||
this.fireEvent("change"); | ||
} else if (up && this.value < this.maxValue) { | ||
this.value = Math.round(this.value + 1); | ||
this.fireEvent("change"); | ||
} | ||
} | ||
} | ||
|
||
_onfocusin() { | ||
if (this.disabled) { | ||
return; | ||
} | ||
|
||
this._focused = true; | ||
this._liveValue = this.value; | ||
} | ||
|
||
_onfocusout() { | ||
this._focused = false; | ||
} | ||
|
||
get tabIndex() { | ||
return this.disabled ? "-1" : "0"; | ||
} | ||
|
||
get _ariaRoleDescription() { | ||
return this.i18nBundle.getText(RATING_INDICATOR_TEXT); | ||
} | ||
} | ||
|
||
RatingIndicator.define(); | ||
|
||
export default RatingIndicator; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
:host(:not([hidden])) { | ||
display: inline-block; | ||
font-size: 1.5rem; | ||
cursor: pointer; | ||
} | ||
|
||
:host([disabled]) { | ||
opacity: .6; | ||
cursor: initial; | ||
outline: none; | ||
} | ||
|
||
:host([readonly]) { | ||
cursor: initial; | ||
} | ||
|
||
:host([_focused]) { | ||
outline: 1px dotted var(--sapContent_FocusColor); | ||
} | ||
|
||
.ui5-rating-indicator-root { | ||
outline: none; | ||
} | ||
|
||
.ui5-rating-indicator-icon { | ||
position: relative; | ||
color: var(--sapContent_UnratedColor); | ||
user-select: none; | ||
} | ||
|
||
.ui5-rating-indicator-icon.ui5-rating-indicator-active-icon { | ||
color: var(--sapContent_RatedColor); | ||
} | ||
|
||
.ui5-rating-indicator-icon.ui5-rating-indicator-half-icon:before { | ||
content: "\2605"; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 50%; | ||
height: 100%; | ||
color: var(--sapContent_RatedColor); | ||
overflow: hidden; | ||
} | ||
|
||
.ui5-rating-indicator-stars-wrapper { | ||
display: flex; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
<meta charset="utf-8"> | ||
|
||
<title>Rating Indicator</title> | ||
<script> | ||
delete Document.prototype.adoptedStyleSheets | ||
</script> | ||
|
||
<script src="../../webcomponentsjs/webcomponents-loader.js"></script> | ||
<script src="../../resources/bundle.esm.js" type="module"></script> | ||
<script nomodule src="../../resources/bundle.es5.js"></script> | ||
|
||
</head> | ||
|
||
<body style="background-color: var(--sapBackgroundColor);"> | ||
|
||
<ui5-rating-indicator id="rating-indicator1"></ui5-rating-indicator> | ||
<br> | ||
<br> | ||
<br> | ||
|
||
<ui5-rating-indicator id="rating-indicator2" max-value="10" value="6"></ui5-rating-indicator> | ||
<br> | ||
<br> | ||
<br> | ||
|
||
<ui5-rating-indicator id="rating-indicator3" max-value="10" value="6"></ui5-rating-indicator> | ||
<br> | ||
<br> | ||
<br> | ||
|
||
<h3>test change event</h3> | ||
<ui5-rating-indicator id="rating-indicator4" max-value="10" value="6"></ui5-rating-indicator> | ||
<ui5-input value="0" id="change-event"></ui5-input> | ||
<br> | ||
<br> | ||
<br> | ||
|
||
<ui5-rating-indicator id="rating-indicator1" value="3.7"></ui5-rating-indicator> | ||
<br> | ||
<br> | ||
<br> | ||
|
||
<h3>readonly</h3> | ||
<ui5-rating-indicator value="1" max-value="3" readonly></ui5-rating-indicator> | ||
<br> | ||
<br> | ||
<br> | ||
|
||
<h3>disabled</h3> | ||
<ui5-rating-indicator value="3" disabled></ui5-rating-indicator> | ||
<br> | ||
<br> | ||
<br> | ||
|
||
<ui5-rating-indicator value="3" max-value="3"></ui5-rating-indicator> | ||
<br> | ||
<br> | ||
|
||
<h3>sizes</h3> | ||
<section> | ||
<ui5-rating-indicator style="font-size: 1rem;"></ui5-rating-indicator> | ||
<br> | ||
<ui5-rating-indicator style="font-size: 2rem;"></ui5-rating-indicator> | ||
<br> | ||
<ui5-rating-indicator style="font-size: 3rem;"></ui5-rating-indicator> | ||
<br> | ||
<ui5-rating-indicator style="font-size: 4rem;"></ui5-rating-indicator> | ||
<br> | ||
|
||
</section> | ||
|
||
<script> | ||
var changeCount = 0; | ||
var ratingIndicator4 = document.getElementById("rating-indicator4"); | ||
var changeEventInput = document.getElementById("change-event"); | ||
|
||
ratingIndicator4.addEventListener("change", event => { | ||
changeEventInput.value = ++changeCount; | ||
}); | ||
</script> | ||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<header> | ||
<div class="control-header">Rating Indicator</div> | ||
</header> | ||
<style> | ||
.snippet > ui5-rating-indicator { | ||
margin: 0 1rem; | ||
} | ||
</style> | ||
|
||
<div class="component-package">@ui5/webcomponents</div> | ||
|
||
<div class="control-tag"><ui5-rating-indicator></div> | ||
|
||
<section> | ||
<h3>Basic Rating Indicator</h3> | ||
<div class="snippet"> | ||
<ui5-rating-indicator></ui5-rating-indicator> | ||
<ui5-rating-indicator value="3"></ui5-rating-indicator> | ||
</div> | ||
<pre class="prettyprint lang-html"><xmp> | ||
<ui5-rating-indicator></ui5-rating-indicator> | ||
<ui5-rating-indicator value="3"></ui5-rating-indicator> | ||
</xmp></pre> | ||
</section> | ||
|
||
<section> | ||
<h3>Rating Indicator With Different Max Value</h3> | ||
<div class="snippet"> | ||
<ui5-rating-indicator max-value="10" value="5"></ui5-rating-indicator> | ||
<ui5-rating-indicator max-value="3" value="3"></ui5-rating-indicator> | ||
</div> | ||
<pre class="prettyprint lang-html"><xmp> | ||
<ui5-rating-indicator max-value="10" value="5"></ui5-rating-indicator> | ||
<ui5-rating-indicator max-value="3" value="3"></ui5-rating-indicator> | ||
</xmp></pre> | ||
</section> | ||
|
||
<section> | ||
<h3>Disabled Rating Indicator</h3> | ||
<div class="snippet"> | ||
<ui5-rating-indicator value="4" disabled></ui5-rating-indicator> | ||
<ui5-rating-indicator max-value="10" value="5" disabled></ui5-rating-indicator> | ||
<ui5-rating-indicator max-value="3" value="3" disabled></ui5-rating-indicator> | ||
</div> | ||
<pre class="prettyprint lang-html"><xmp> | ||
<ui5-rating-indicator value="4" disabled></ui5-rating-indicator> | ||
<ui5-rating-indicator max-value="10" value="5" disabled></ui5-rating-indicator> | ||
<ui5-rating-indicator max-value="3" value="3" disabled></ui5-rating-indicator> | ||
</xmp></pre> | ||
</section> | ||
|
||
<!-- JSDoc marker --> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
const assert = require("chai").assert; | ||
|
||
|
||
describe("Rating Indicator general interaction", () => { | ||
browser.url("http://localhost:8080/test-resources/pages/RatingIndicator.html"); | ||
|
||
it("Tests basic rating indicator rendering", () => { | ||
const ratingIndicator = browser.$("#rating-indicator1"); | ||
|
||
assert.strictEqual(ratingIndicator.shadow$$(".ui5-rating-indicator-icon").length, 5, "Basic rating indicator renders 5 stars"); | ||
}); | ||
|
||
it("Tests max-value property", () => { | ||
const ratingIndicator = browser.$("#rating-indicator2"); | ||
|
||
assert.strictEqual(ratingIndicator.shadow$$(".ui5-rating-indicator-icon").length, 10, "Basic rating indicator renders 5 stars"); | ||
}); | ||
|
||
it("Tests clicking on star", () => { | ||
const ratingIndicator = browser.$("#rating-indicator3"); | ||
const thirdStar = ratingIndicator.shadow$$(".ui5-rating-indicator-icon")[2]; | ||
|
||
assert.strictEqual(ratingIndicator.getProperty("value"), 6, "Initial value is applied"); | ||
|
||
thirdStar.click(); | ||
|
||
assert.strictEqual(ratingIndicator.getProperty("value"), 3, "Value is changed on click"); | ||
}); | ||
|
||
it("Tests change event", () => { | ||
const ratingIndicator = browser.$("#rating-indicator4"); | ||
const thirdStar = ratingIndicator.shadow$$(".ui5-rating-indicator-icon")[2]; | ||
const input = browser.$("#change-event"); | ||
|
||
assert.strictEqual(ratingIndicator.getProperty("value"), 6, "Initial value is applied"); | ||
|
||
thirdStar.click(); | ||
|
||
assert.strictEqual(ratingIndicator.getProperty("value"), 3, "Value is changed on click"); | ||
|
||
browser.keys("Enter"); | ||
|
||
assert.strictEqual(ratingIndicator.getProperty("value"), 4, "Value is changed on key press"); | ||
|
||
browser.keys("Space"); | ||
|
||
assert.strictEqual(ratingIndicator.getProperty("value"), 5, "Value is changed on key press"); | ||
|
||
browser.keys("ArrowUp"); | ||
browser.keys("ArrowRight"); | ||
|
||
assert.strictEqual(ratingIndicator.getProperty("value"), 7, "Value is changed on key press"); | ||
|
||
browser.keys("ArrowLeft"); | ||
browser.keys("ArrowLeft"); | ||
browser.keys("ArrowDown"); | ||
browser.keys("ArrowDown"); | ||
browser.keys("ArrowDown"); | ||
browser.keys("ArrowDown"); | ||
browser.keys("ArrowDown"); | ||
|
||
assert.strictEqual(ratingIndicator.getProperty("value"), 0, "Value is changed on key press"); | ||
|
||
assert.strictEqual(input.getProperty("value"), "12", "Input event is always fired") | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters