Menu Picker ENyo

Enyo Menu Picker ordenable

by EDWIN MAURICIO QUISHPE MALDONADO

CSS

.list-sample-language {
	color: white;
}
.list-sample-language-list {
	/*background: url(assets/bg.png);*/
}
.list-sample-language-item {
	height: 20px;
	border-top: 1px solid #000;
	padding: 12px 16px;
	background-color: #333333;
	position:relative;
}
.list-sample-language-list .rowNumberLabel {
	position:absolute;
	right:15px;
	bottom: 10px;
	font-size:12px;
}
.list-sample-language-list .itemLabel {
	font-size:16px;
	line-height:20px;
	padding-left:5px;
}
.list-sample-language-list .serialLabel {
	position:absolute;
	right:80px;
	bottom: 10px;
	font-size:12px;
}
.list-sample-language-list .reorderDragger {
	background:rgb(0,0,0);
}
.list-sample-language-list .swipeGreen {
	background-color:rgb(0,160,40);
}
.list-sample-language-list h2 {
	margin:0;
	padding:0 0 0 20px;
	font-size:16px;
	line-height:10px;
}
.list-sample-language-list .dropButton {
	width:90px;
	height:30px;
	position:absolute;
	top:20px;
	right:110px;
}
.list-sample-language-list .cancelButton {
	width:90px;
	height:30px;
	position:absolute;
	top:20px;
	right:10px;
}
.list-sample-language-list .swipeTitle {
	font-size:30px;
	font-weight:bold;
	text-align:center;
	line-height:40px;
	padding:0;
	margin:0;
}

JavaScript

enyo.kind({
	name: 'ListaDemo',
	kind: 'FittableRows',
	classes: 'list-sample-language enyo-fit',
    //style:"height: 300px; width:300px;",
	data: [],
    fit:true,
	components: [
		{
			kind: 'List',
			classes: 'list-sample-language-list enyo-unselectable enyo-fit',
            //fit:true,
            style:"height: 100%; width:100%;",
			multiSelect: true,
			reorderable: true,
			centerReorderContainer: false,
			onSetupItem: 'setupItem',
			onReorder: 'listReorder',
			onSetupReorderComponents: 'setupReorderComponents',
			components: [
                {name: 'item', classes: 'list-sample-language-item', fit:true, components: [
					{name: 'text', classes: 'itemLabel'},
					{name: 'rowNumber', classes: 'rowNumberLabel'},
					{name: 'serial', classes: 'serialLabel'}
				]}
			],
			reorderComponents: [
				{name: 'reorderContent', classes: 'enyo-fit reorderDragger', components: [
					{name: 'reorderTitle', tag: 'h2', allowHtml: true}
				]}
			],
		}
	],
	rendered: enyo.inherit(function(sup) {
		return function() {
			sup.apply(this, arguments);
			this.populateList();
		};
	}),
	listReorder: function(inSender, inEvent) {
		var movedItem = enyo.clone(this.data[inEvent.reorderFrom]);
		this.data.splice(inEvent.reorderFrom,1);
		this.data.splice((inEvent.reorderTo),0,movedItem);
        console.log(this.data);
	},
	setupItem: function(inSender, inEvent) {
		var i = inEvent.index;
		if(!this.data[i]) {
			return;
		}
		//var currentLanguage = this.data[i].langs[this.data[i].currentIndex];
		var val = this.data[i].val;
		//var number = this.languages[currentLanguage][val];
        var number = val;
		var serial = this.data[i].serial;
		this.$.rowNumber.setContent('ROW ' + i);
		this.$.text.setContent(number);
		this.$.serial.setContent('#' + serial);
	},
	setupReorderComponents: function(inSender, inEvent) {
		var i = inEvent.index;
		if(!this.data[i]) {
			return;
		}
		//var currentLanguage = this.data[i].langs[this.data[i].currentIndex];
		var val =...