Skip to content

Commit

Permalink
Spin: fix for widget rendering with <13 items
Browse files Browse the repository at this point in the history 
[Issue] #1486
[Problem] Number Spinner with < 13 items not rendering correctly
[Solution]
 - method for roll items has been changed
 - additional manual tests

[Manual test]
   tests/manualTest/numberPicker/number-0-11.html
   tests/manualTest/numberPicker/number-0-12.html
   tests/manualTest/numberPicker/number-0-2.html
   tests/manualTest/numberPicker/number-0-3.html
   tests/manualTest/numberPicker/number-0-8.html
   tests/manualTest/numberPicker/number-0-9.html

Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
  • Loading branch information
@TomaszLukawskiSam
TomaszLukawskiSam committed Dec 12, 2020
1 parent b99498e commit ba515de
Show file tree
Hide file tree
Showing 7 changed files with 198 additions and 4 deletions.
16 changes: 12 additions & 4 deletions src/js/core/widget/core/Spin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,14 +196,20 @@
var self = this,
direction = delta > 0 ? 1 : -1,
borderItem,
newItemToPlace;
newItemToPlace,
halfOfFreeCarouselItems = Math.round((self._numberOfCarouselItems - self._ui.items.length) / 2);

if (halfOfFreeCarouselItems < 0) {
halfOfFreeCarouselItems = 0;
}

delta = Math.abs(delta);
if (delta === 1) { // move one item
borderItem = self._carouselItems[
self._carouselItemByCount(count + direction * self._carouselCenterIndex)
self._carouselItemByCount(count + direction * (self._carouselCenterIndex - halfOfFreeCarouselItems))
];
newItemToPlace = self._itemByCount(count + direction * self._carouselCenterIndex);

newItemToPlace = self._itemByCount(count + direction * (self._carouselCenterIndex - halfOfFreeCarouselItems));

if (borderItem.element.firstElementChild) {
borderItem.element.removeChild(borderItem.element.firstElementChild);
Expand All @@ -229,7 +235,9 @@
// change carousel items content on change current index
if (self._lastCurrentIndex !== Math.round(value)) {
if (self._lastCurrentIndex !== null) {
self._rollItems(Math.round(value) - self._lastCurrentIndex, Math.round(value));
if (self._ui.items.length !== self._numberOfCarouselItems) {
self._rollItems(Math.round(value) - self._lastCurrentIndex, Math.round(value));
}
}
self._lastCurrentIndex = Math.round(value);
}
Expand Down
31 changes: 31 additions & 0 deletions tests/manualTest/numberPicker/number-0-11.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>

<head>
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport" />
<title>
Wearable UI
</title>
<link href="../../../dist/wearable/theme/default/tau.css" rel="stylesheet" />
<link href="../../../dist/wearable/theme/default/tau.circle.css" rel="stylesheet" />
<script src="../../../dist/wearable/js/tau.js">
</script>
</head>

<body>
<div class="ui-page" data-enable-page-scroll="false">
<div class="ui-content">
<label>
unit
<input max="11" min="0" step="1" type="number" value="0" id="number-picker"/>
</label>
</div>
</div>
<script>
document.addEventListener("pagebeforeshow", function () {
widget = tau.widget.NumberPicker(document.getElementById("number-picker"));
});
</script>
</body>

</html>
31 changes: 31 additions & 0 deletions tests/manualTest/numberPicker/number-0-12.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>

<head>
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport" />
<title>
Wearable UI
</title>
<link href="../../../dist/wearable/theme/default/tau.css" rel="stylesheet" />
<link href="../../../dist/wearable/theme/default/tau.circle.css" rel="stylesheet" />
<script src="../../../dist/wearable/js/tau.js">
</script>
</head>

<body>
<div class="ui-page" data-enable-page-scroll="false">
<div class="ui-content">
<label>
unit
<input max="12" min="0" step="1" type="number" value="0" id="number-picker"/>
</label>
</div>
</div>
<script>
document.addEventListener("pagebeforeshow", function () {
widget = tau.widget.NumberPicker(document.getElementById("number-picker"));
});
</script>
</body>

</html>
31 changes: 31 additions & 0 deletions tests/manualTest/numberPicker/number-0-2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>

<head>
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport" />
<title>
Wearable UI
</title>
<link href="../../../dist/wearable/theme/default/tau.css" rel="stylesheet" />
<link href="../../../dist/wearable/theme/default/tau.circle.css" rel="stylesheet" />
<script src="../../../dist/wearable/js/tau.js">
</script>
</head>

<body>
<div class="ui-page" data-enable-page-scroll="false">
<div class="ui-content">
<label>
unit
<input max="2" min="0" step="1" type="number" value="0" id="number-picker"/>
</label>
</div>
</div>
<script>
document.addEventListener("pagebeforeshow", function () {
widget = tau.widget.NumberPicker(document.getElementById("number-picker"));
});
</script>
</body>

</html>
31 changes: 31 additions & 0 deletions tests/manualTest/numberPicker/number-0-3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>

<head>
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport" />
<title>
Wearable UI
</title>
<link href="../../../dist/wearable/theme/default/tau.css" rel="stylesheet" />
<link href="../../../dist/wearable/theme/default/tau.circle.css" rel="stylesheet" />
<script src="../../../dist/wearable/js/tau.js">
</script>
</head>

<body>
<div class="ui-page" data-enable-page-scroll="false">
<div class="ui-content">
<label>
unit
<input max="3" min="0" step="1" type="number" value="0" id="number-picker"/>
</label>
</div>
</div>
<script>
document.addEventListener("pagebeforeshow", function () {
widget = tau.widget.NumberPicker(document.getElementById("number-picker"));
});
</script>
</body>

</html>
31 changes: 31 additions & 0 deletions tests/manualTest/numberPicker/number-0-8.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>

<head>
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport" />
<title>
Wearable UI
</title>
<link href="../../../dist/wearable/theme/default/tau.css" rel="stylesheet" />
<link href="../../../dist/wearable/theme/default/tau.circle.css" rel="stylesheet" />
<script src="../../../dist/wearable/js/tau.js">
</script>
</head>

<body>
<div class="ui-page" data-enable-page-scroll="false">
<div class="ui-content">
<label>
unit
<input max="8" min="0" step="1" type="number" value="0" id="number-picker"/>
</label>
</div>
</div>
<script>
document.addEventListener("pagebeforeshow", function () {
widget = tau.widget.NumberPicker(document.getElementById("number-picker"));
});
</script>
</body>

</html>
31 changes: 31 additions & 0 deletions tests/manualTest/numberPicker/number-0-9.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>

<head>
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport" />
<title>
Wearable UI
</title>
<link href="../../../dist/wearable/theme/default/tau.css" rel="stylesheet" />
<link href="../../../dist/wearable/theme/default/tau.circle.css" rel="stylesheet" />
<script src="../../../dist/wearable/js/tau.js">
</script>
</head>

<body>
<div class="ui-page" data-enable-page-scroll="false">
<div class="ui-content">
<label>
unit
<input max="9" min="0" step="1" type="number" value="0" id="number-picker"/>
</label>
</div>
</div>
<script>
document.addEventListener("pagebeforeshow", function () {
widget = tau.widget.NumberPicker(document.getElementById("number-picker"));
});
</script>
</body>

</html>

0 comments on commit ba515de

Please sign in to comment.