Skip to content

Commit

Permalink
Listview & Popup: Listview incorrect build
Browse files Browse the repository at this point in the history 
[Issue] #1579
[Problem] How to make listview in popup
[Solution]
 - Listview has to be rebuild on popup show

Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
  • Loading branch information
@TomaszLukawskiSam
TomaszLukawskiSam committed Feb 15, 2021
1 parent 610db19 commit 75fd8a0
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 39 deletions.
73 changes: 73 additions & 0 deletions examples/wearable/UIComponents/contents/assistviews/popup-listview.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>

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

<body>
<div class="ui-page" id="listview-popup-page" data-go-to-top-button="true">
<div class="ui-content">
<a data-rel="popup" href="#listviewPopup" data-transition="none">
General
</a>
</div>
<div class="ui-popup" id="listviewPopup">
<div class="ui-popup-content">
<ul class="ui-listview">
<li>
<a href="#">
Item 1
</a>
</li>
<li>
<a href="#">
Item 2
</a>
</li>
<li>
<a href="#">
Item 3
</a>
</li>
<li>
<a href="#">
Item 4
</a>
</li>
<li class="li-has-radio">
<label>
Radio
<input type="radio" name="radio-el" checked="checked"/>
</label>
</li>
<li class="li-has-radio">
<label>
Radio
<input type="radio" name="radio-el" />
</label>
</li>
<li class="li-has-radio">
<label>
Radio
<input type="radio" name="radio-el" />
</label>
</li>
</ul>
</div>
</div>
</div>
</body>

</html>
5 changes: 5 additions & 0 deletions examples/wearable/UIComponents/contents/assistviews/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ <h2 class="ui-title">
Single button
</a>
</li>
<li>
<a href="popup-listview.html">
Popup with listview
</a>
</li>
</ul>
</div>
<div class="ui-popup" id="checkboxPopup">
Expand Down
24 changes: 14 additions & 10 deletions src/js/core/widget/core/Popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -604,7 +604,8 @@
activeClass = classes.active,
elementClassList = self.element.classList,
route = Router && Router.getInstance().getRoute("popup"),
options;
options,
ui = self._ui;

// NOTE: popup's options object is stored in window.history at the router module,
// and this window.history can't store DOM element object.
Expand All @@ -631,8 +632,8 @@
self.state = states.CLOSED;
}

if (self._ui.content.scrollHeight > self._ui.content.clientHeight) {
self._ui.footer.classList.add("bottomDivider");
if (ui.content.scrollHeight > ui.content.clientHeight) {
ui.footer && ui.footer.classList.add("bottomDivider");
}
};

Expand All @@ -644,17 +645,20 @@
*/
prototype._onScroll = function () {
var self = this,
content = self._ui.content;
ui = self._ui,
content = ui.content,
header = ui.header,
footer = ui.footer;

if (content.scrollTop === 0) {
self._ui.header.classList.remove("topDivider");
self._ui.footer.classList.add("bottomDivider");
header && header.classList.remove("topDivider");
footer && footer.classList.add("bottomDivider");
} else if (content.scrollHeight - content.clientHeight === content.scrollTop) {
self._ui.header.classList.add("topDivider");
self._ui.footer.classList.remove("bottomDivider");
header && header.classList.add("topDivider");
footer && footer.classList.remove("bottomDivider");
} else {
self._ui.header.classList.add("topDivider");
self._ui.footer.classList.add("bottomDivider");
header && header.classList.add("topDivider");
footer && footer.classList.add("bottomDivider");
}
}

Expand Down
96 changes: 67 additions & 29 deletions src/js/profile/wearable/widget/wearable/ArcListview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*
*/
/*global window, define, ns, Math*/
/*global define, ns*/
/**
* #ArcListview Widget
*
Expand Down Expand Up @@ -258,6 +258,7 @@
PAGE: "." + Page.classes.uiPage,
POPUP: ".ui-popup",
SCROLLER: ".ui-scroller",
POPUP_WRAPPER: ".ui-popup-wrapper",
ITEMS: "." + WIDGET_CLASS + " > li",
TEXT_INPUT: "input[type='text']" +
", input[type='number']" +
Expand Down Expand Up @@ -1119,7 +1120,7 @@

state.toIndex = index;

if (this.options.listItemUpdater) { // virtual list
if (this.options.listItemUpdater) { // virtual list
if (state.toIndex > self.options.dataLength - 1) {
state.toIndex = self.options.dataLength - 1;
}
Expand Down Expand Up @@ -1553,6 +1554,25 @@

/**
* Handler for popupbeforeshow event
* @method _onPopupBeforeShow
* @param {Event} event
* @memberof ns.widget.wearable.ArcListview
* @protected
*/
prototype._onPopupBeforeShow = function (event) {
var self = this,
popup = event.target;

if (!popup.classList.contains(Popup.classes.toastSmall)) {
if (popup.querySelector(".ui-listview") !== self.element) {
self.disableList();
self._disabledByPopup = true;
}
}
};

/**
* Handler for popupshow event
* @method _onPopupShow
* @param {Event} event
* @memberof ns.widget.wearable.ArcListview
Expand All @@ -1563,12 +1583,13 @@
popup = event.target;

if (!popup.classList.contains(Popup.classes.toastSmall)) {
self.disableList();
self._disabledByPopup = true;
if (popup.querySelector(".ui-listview") === self.element) {
// initialization of the listview embedded in the popup
self._init();
}
}
};


/**
* Handler for popupbeforehide event
* @method _onPopupHide
Expand Down Expand Up @@ -1649,8 +1670,10 @@
prototype._getItemsFromElement = function () {
var self = this;

// find list elements with including group indexes
self._items = slice.call(self._ui.page.querySelectorAll(selectors.ITEMS)) || [];
// find list elements with including group indexes and append to list
self._items = self._items.concat(
slice.call(self._ui.page.querySelectorAll(selectors.ITEMS))
);
}

prototype._addItemsFromElement = function () {
Expand Down Expand Up @@ -1692,25 +1715,28 @@
var self = this,
element = self.element,
options = self.options,
page,
header,
scroller,
ui = self._ui,
page = ui.page,
header = ui.header,
scroller = ui.scroller,
carousel = self._carousel,
visibleItemsCount = parseInt(self.options.visibleItems, 10);

// find outer parent elements
page = selectorsUtil.getClosestBySelector(element, selectors.PAGE);
ui.page = page;
if (!page) {
page = selectorsUtil.getClosestBySelector(element, selectors.PAGE);
ui.page = page;
}

header = page.querySelector("header");
if (header) {
ui.header = header;
ui.title = header.querySelector(".ui-title:not(.ui-subtitle)");
ui.subTitle = header.querySelector(".ui-title.ui-subtitle");
}
scroller = selectorsUtil.getClosestBySelector(element, selectors.SCROLLER);

scroller = selectorsUtil.getClosestBySelector(element, selectors.SCROLLER) ||
selectorsUtil.getClosestBySelector(element, selectors.POPUP_WRAPPER);

if (scroller) {
// initialize the position of the scroller
Expand All @@ -1724,16 +1750,21 @@
self._getItemsFromElement();
self._createTextInputs();

ui.arcListviewSelection = self._buildArcListviewElement(
scroller, classes.SELECTION, {
insertBefore: true
});
ui.arcListviewCarousel = buildArcListviewCarousel(carousel, visibleItemsCount);
ui.dummyElement = self._buildArcListviewElement(page, classes.DUMMY_ELEMENT);

// append carousel outside scroller element
scroller.parentElement.appendChild(ui.arcListviewCarousel);
ui.arcListviewCarousel.addEventListener("vclick", self, true);
if (!ui.arcListviewSelection) {
ui.arcListviewSelection = self._buildArcListviewElement(
scroller, classes.SELECTION, {
insertBefore: true
});
}
if (!ui.arcListviewCarousel) {
ui.arcListviewCarousel = buildArcListviewCarousel(carousel, visibleItemsCount);
// append carousel outside scroller element
scroller.parentElement.appendChild(ui.arcListviewCarousel);
ui.arcListviewCarousel.addEventListener("vclick", self, true);
}
if (!ui.dummyElement) {
ui.dummyElement = self._buildArcListviewElement(page, classes.DUMMY_ELEMENT);
}

// cache HTML elements
ui.scroller = scroller;
Expand Down Expand Up @@ -1807,6 +1838,9 @@
self._onPopupHide();
break;
case "popupbeforeshow":
self._onPopupBeforeShow(event);
break;
case "popupshow":
self._onPopupShow(event);
break;
case "currentindexchange" :
Expand Down Expand Up @@ -1839,6 +1873,7 @@
page.addEventListener("pagehide", self, true);
page.addEventListener("popupbeforeshow", self, true);
page.addEventListener("popupbeforehide", self, true);
page.addEventListener("popupshow", self, true);
if (self._ui.arcListviewCarousel) {
self._ui.arcListviewCarousel.addEventListener("vclick", self, true);
}
Expand Down Expand Up @@ -1904,6 +1939,7 @@
page.removeEventListener("pagehide", self, true);
page.removeEventListener("popupbeforeshow", self, true);
page.removeEventListener("popupbeforehide", self, true);
page.removeEventListener("popupshow", self, true);
if (self._ui.arcListviewCarousel) {
self._ui.arcListviewCarousel.removeEventListener("vclick", self, true);
}
Expand Down Expand Up @@ -2007,12 +2043,14 @@
prototype._initBouncingEffect = function () {
var self = this;

self._setMaxScrollY();
self._bouncingEffect = new ns.widget.core.scroller.effect.Bouncing(self._ui.page, {
maxScrollX: self.element.getBoundingClientRect().right,
maxScrollY: self._maxScrollY,
orientation: "vertical-horizontal"
});
if (!self._bouncingEffect) {
self._setMaxScrollY();
self._bouncingEffect = new ns.widget.core.scroller.effect.Bouncing(self._ui.page, {
maxScrollX: self.element.getBoundingClientRect().right,
maxScrollY: self._maxScrollY,
orientation: "vertical-horizontal"
});
}
};

prototype._setGoToTopButtonVisibility = function (visibility) {
Expand Down

0 comments on commit 75fd8a0

Please sign in to comment.