Languages

Menu
Sites
Language
swipelist in virtual list

Hi all !

I'm trying to use the swipe list in a virtual list, in vain...

Indeed, at the first look, my implementation seems working (before scrolling) ! The swipes are operationnals on the first entries <li>...<li>.

But if i scroll in list, a misalignment appears on the display of the "ui-swipelist-left" and "ui-swipelist-right".

Can you help me please ? 

Device target: Samsung GerFit 2 Pro

Tizen : Web Wearable 3.0

Lib TAU : v0.13.29

Screen resolution : 216x432

HTML

    <div class="ui-page" id="lights">
    	<header class="ui-header">
			<h2 class="ui-title center">Luminaires</h2>
		</header>
		<div class="ui-content">
			<ul id="lights_vlist" class="ui-listview ui-swipelist-list"></ul>
			<div class="ui-swipelist">
				<div class="ui-swipelist-left">
					<div class="ui-swipelist-text">On</div>
				</div>
				<div class="ui-swipelist-right">
					<div class="ui-swipelist-text">Off</div>
				</div>
			</div>
			<div class="ui-grid-col-2">
		   		<a href="#main" class="ui-btn color_green gauche"></a>
		   	</div>
		</div>
	</div>

JS

/***********************
 ** LIGHTS PAGE **
 ***********************/

/* Get HTML element reference */
var elList_lights = document.getElementById("lights_vlist");

/* Initialize vlist */
var vlist_lights = tau.widget.VirtualListview(elList_lights,
{
   dataLength: LIGHTS_JSON_DATA.length,
   bufferSize: 20
});

/* Update vlist items */
vlist_lights.setListItemUpdater(function(elListItem, newIndex)
{
    var data = LIGHTS_JSON_DATA[newIndex];
	vlistHTMLRendering(elListItem, data);
});

/** PAGE HANDLING EVENTS **/
(function(){
		
	var page = document.getElementById( "lights" ),
	listElement,
	swipeList;
	
	page.addEventListener( "pagebeforeshow", function() {
		vlist_lights.draw();
	});
	
	page.addEventListener( "pageshow", function() {
		
		listElement = page.getElementsByClassName( "ui-listview ui-swipelist-list ui-virtual-list-container" )[0];
		
		swipeList = tau.widget.SwipeList( listElement, {
			swipeTarget: "li",
			swipeElement: ".ui-swipelist"
		});
		
		var children = listElement.childNodes;
		for (var i = 0; i < children.length; i++) {
			if(children[i].type==="SWIPE"){
	    	    children[i].addEventListener("swipelist.left", function(evt){
	    	    	requestcommand(this.on);
	    	    });
	    		children[i].addEventListener("swipelist.right", function(evt){
	    	    	requestcommand(this.off);
	    	    });
			}
		}
	});
	
	page.addEventListener("pagehide", function(){
		swipeList.destroy();
		vlist_lights.destroy();
	});
	
}());

LIGHTS_JSON_DATA

var LIGHTS_JSON_DATA = 
[
   	{TYPE:"SWIPE", LABEL:"Canapé", ID_SWIP:"salon-canape-swipe", ID_CMD_ON:commandesConfig.luminaires.salon.canape_on, ID_CMD_OFF:commandesConfig.luminaires.salon.canape_off},
   	{TYPE:"SWIPE", LABEL:"Bureau", ID_SWIP:"salon-bureau-swipe", ID_CMD_ON:commandesConfig.luminaires.salon.bureau_on, ID_CMD_OFF:commandesConfig.luminaires.salon.bureau_off},
   	{TYPE:"SWIPE", LABEL:"Buffet", ID_SWIP:"salon-buffet-swipe", ID_CMD_ON:commandesConfig.luminaires.salon.buffet_on, ID_CMD_OFF:commandesConfig.luminaires.salon.buffet_off},
   	{TYPE:"SWIPE", LABEL:"TV", ID_SWIP:"salon-tv-swipe", ID_CMD_ON:commandesConfig.luminaires.salon.tv_on, ID_CMD_OFF:commandesConfig.luminaires.salon.tv_off},
   	{TYPE:"SWIPE", LABEL:"Buffet", ID_SWIP:"veranda-buffet-swipe", ID_CMD_ON:commandesConfig.luminaires.veranda.buffet_on, ID_CMD_OFF:commandesConfig.luminaires.veranda.buffet_off},
   	{TYPE:"SWIPE", LABEL:"Veilleuse", ID_SWIP:"chNino-veilleuse-swipe", ID_CMD_ON:commandesConfig.luminaires.chambreNino.veilleuse_on, ID_CMD_OFF:commandesConfig.luminaires.chambreNino.veilleuse_off}
];

vlistHTMLRendering

elListItem.innerHTML = data.LABEL;
elListItem.id=data.ID_SWIP;
elListItem.type="SWIPE";
elListItem.on=data.ID_CMD_ON;
elListItem.off=data.ID_CMD_OFF;
 
Regards,

 

List

Responses

3 Replies
André Reus

hi, as these libraries are targeted to Gear S series wearable which have different screen resolution than fit series...So i think the problem is there.  You may mix it by modifying some css / overriding some css. 
Hope your problem will be solved :-) 

Flo Calamity

Hi André, thank you for your response.

Sadly, CSS are a basic pet peeve of mine... I don't know what to override, moreover with HTML hard coded list (without virtual list), the swipe list works perfectly.

Is there any lib for GearFit series ? 

André Reus

I think you don't need to modify that much css ....you just need some ui modification...may be for fit the width as the Gear Fit has less width than S series ... 

I think for 

Here are some helful resource:

1. https://www.netguru.co/tips/how-to-override-one-css-class-with-another

2. https://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class