fix: clean up buttons on widget destroy for extended slider on wearables

[orcema]

[Problem]
Extended slider on wearable does't clean up buttons on widget destroy. Thus each time the widget is recreated new buttons appear and finally buttons are cloned as many times as the widget has been created.

Steps for reproducing the issue:

1. HTML

<div class="ui-page" id="extendedSliderPage">
	<div class="ui-content ui-content-padding">
		<input type="range" class="ui-slider" id="extendedSlider" name="circleSlider"
					 max="10" data-buttons="true"/>
		<div class="ui-slider-icon" id="slider-icon" style="opacity: 0.5"></div>
		<div class="ui-slider-title">Slider name</div>
		<div class="ui-slider-subtitle">Description</div>
	</div>
</div>

2. JavaScript

function attach (pageId) {

	var pageIdToUse = getPageIdToUse(pageId);
	page = document.getElementById(pageIdToUse);
	if (page != undefined && page!= null){
		extendedSlider = page.querySelector("#" + widgetName);
		if (extendedSlider!= null && extendedSlider!= null){
			console.log(widgetName + "-attach(): attaching to page id " + "[" + pageIdToUse+ "]" );
			extendedSliderComponent = tau.widget.Slider(extendedSlider,{"thickness":3});
		}else{
			console.log(widgetName + "-attach(): no " + extendedSlider + " to attach on page id" + "[" + pageIdToUse + "]"  );
		}
	}
	
}

Here below a screenshot of a widget created 3 times (browser load/unload page)

[pkaczmarczy]

Hi,

Such selector (on "document") may cause problems, TAU pages are build within the same "document" and such selector may select buttons from different page.

I think that best option is to use this._ui dict to store reference to buttons container after it is build (_buildButtons method) and remove it here if it exists.

[TomaszLukawskiSam]

This change should be applied to /src/js/profile/wearable/widget/wearable/Slider.js.
The dist folder is overriden with each build.

I agree with @pkaczmarczy about store the buttonsContainer in this._ui object.