Added new component SwipeListItemView

Author: SonoIo

examples/lib/MenuPage.js

@@ -5,6 +5,7 @@ import PageView from '../../lib/PageView';
 import OsBarView from '../../lib/navigations/OsBarView';
 import ListView from '../../lib/listviews/ListView';
 import DifferentSizeListViewPage from './DifferentSizeListViewPage';
+import SwipeListViewPage from './SwipeListViewPage';
 
 export default class MenuPage extends PageView {
 
@@ -18,6 +19,7 @@ export default class MenuPage extends PageView {
 		this.template = require('../templates/menu.html');
 
 		this.addEvents({
+			'click .js-swipe-list-item': 'onSwipeListItemClick',
 			'click .js-different-size': 'onDifferentSizeClick',
 			'click .js-different-size-with-header': 'onDifferentSizeWithHeaderClick',
 			'click .js-different-size-with-2-columns': 'onDifferentSizeWith2ColumnsClick',
@@ -26,7 +28,7 @@ export default class MenuPage extends PageView {
 			'click .js-horizontal-different-size': 'onHorizontalDifferentSizeClick',
 			'click .js-horizontal-different-size-with-header': 'onHorizontalDifferentSizeWithHeaderClick',
 			'click .js-horizontal-different-size-with-2-columns': 'onHorizontalDifferentSizeWith2ColumnsClick',
-			'click .js-horizontal-different-size-with-3-columns': 'onHorizontalDifferentSizeWith3ColumnsClick'
+			'click .js-horizontal-different-size-with-3-columns': 'onHorizontalDifferentSizeWith3ColumnsClick',
 		});
 
 		let state = this.getState();
@@ -51,7 +53,11 @@ export default class MenuPage extends PageView {
 
 	//
 	// Vertial list view
-	//
+
+	onSwipeListItemClick() {
+		const swipeListViewPage = new SwipeListViewPage();
+		context.viewstack.pushView(swipeListViewPage);
+	}
 
 	onDifferentSizeClick() {
 		const differentSizeListViewPage = new DifferentSizeListViewPage();

examples/lib/SwipeListView.js

@@ -0,0 +1,32 @@
+import _ from 'underscore';
+import $ from 'jquery';
+import ListView from '../../lib/listviews/ListView';
+import SwipeListItemView from '../../lib/listviews/SwipeListItemView';
+
+class MySwipeListItemView extends SwipeListItemView {
+
+	constructor(options) {
+		super(options);
+	}
+
+	onRender(rendered) {
+		super.onRender(rendered);
+		this.cache.$drawer.html('<p>Title</p><p>Description description description</p><p>Short description</p>');
+	}
+
+}
+
+export default class SwipeListView extends ListView {
+
+	getListItemViewAtIndexWithOptions(index, options) {
+		return new MySwipeListItemView(options);
+	}
+
+	onSelectItem(item, done) {
+		if (item) {
+			console.log(item.element);
+		}
+		return done();
+	}
+
+}

examples/lib/SwipeListViewPage.js

@@ -0,0 +1,73 @@
+import _ from 'underscore';
+import $ from 'jquery';
+import context from 'context-utils';
+import { Collection } from 'backbone';
+import PageView from '../../lib/PageView';
+import OsBarView from '../../lib/navigations/OsBarView';
+import SwipeListView from './SwipeListView';
+import ModelA from './models/ModelA';
+
+export default class SwipeListViewPage extends PageView {
+
+	addClass() {
+		return 'swipe-list-view';
+	}
+
+	constructor(options) {
+		super(options);
+
+		const state = this.getState();
+		const navigationBarView = new OsBarView({
+			state: state,
+			addClass: 'back-bar',
+			left: '<span>Back</span>',
+			center: $('<span class="title"></span>').text('Swipe list view'),
+			popViewOnBackButton: true
+		});
+		this.addSubView('navigationBarView', navigationBarView);
+
+		this.initCollection();
+
+		const listView = new SwipeListView(_.extend(this.options.listview || {}, {
+			collection: this.collection,
+			itemClass: 'ui-swipe-list-item'
+		}));
+		this.addSubView('listView', listView);
+
+		this.listenTo(listView, 'swipe:left', (view) => { console.log(view) });
+		this.listenTo(listView, 'swipe:right', (view) => { console.log(view) });
+
+		// For debug
+		window.__listView = listView;
+	}
+
+	getNavigationBar() {
+		return this.getSubView('navigationBarView');
+	}
+
+	onRender(rendered) {
+		if (!rendered) {
+			const listView = this.getSubView('listView');
+			this.$el.append(listView.el);
+			listView.render();
+		}
+	}
+
+	//
+	// Utils
+	//
+
+	initCollection() {
+		const models = [];
+		let aModelClass;
+		for (var i = 0; i < 30; i++) {
+			models.push(new ModelA({
+				id: i
+			}));
+		}
+
+		const collection = new Collection(models);
+		this.collection = collection;
+	}
+
+}

examples/lib/app.js

@@ -4,6 +4,16 @@ import NavigationView from '../../lib/navigations/NavigationView';
 import MenuPage from './MenuPage';
 import requestNextAnimationFrame from '../../lib/utils/requestAnimationFrame';
 
+context.uikit = {
+	SwipeListItemView: {
+		vibrate: () => {
+			if (window.TapticEngine) {
+				window.TapticEngine.selection();
+			}
+		}
+	}
+};
+
 const viewstack = context.viewstack  = new Viewstack({ el: '#application' });
 viewstack.render();
 

examples/lib/models/ModelA.js

@@ -1,3 +1,9 @@
 import { Model } from 'backbone';
 
-export default class ModelA extends Model {};
+export default class ModelA extends Model {
+
+	toString() {
+		return this.id;
+	}
+
+};

examples/lib/models/ModelB.js

@@ -1,3 +1,9 @@
 import { Model } from 'backbone';
 
-export default class ModelB extends Model {};
+export default class ModelB extends Model {
+
+	toString() {
+		return this.id;
+	}
+
+};

examples/lib/models/ModelC.js

@@ -1,3 +1,9 @@
 import { Model } from 'backbone';
 
-export default class ModelC extends Model {};
+export default class ModelC extends Model {
+
+	toString() {
+		return this.id;
+	}
+
+};

examples/styles/style.scss

@@ -1,12 +1,14 @@
 
-$toolbar-height: 44px;
 $overlay-color: rgba(40,47,57,0.27);
 
 $regular-font: 'helvetica';
 $bold-font: 'helvetica';
 $italic-font: 'helvetica';
 
 $nav-height: 44px;
+$tab-height: 50px;
+$toolbar-height: 44px;
+$ios-iphone-x-margin-bottom: 20px;
 
 $icon-font: 'unieuro';
 
@@ -16,6 +18,11 @@ $icon-font: 'unieuro';
 // Example style
 //
 
+html, body {
+	height: 100%;
+	overflow: hidden;
+}
+
 #application {
 	position: absolute;
 	top: 0;
@@ -77,3 +84,41 @@ $icon-font: 'unieuro';
 .menu-page {
 	padding: 0 20px;
 }
+
+
+// Swipe list item view
+.ui-swipe-list-item {
+	height: 120px;
+}
+.ui-swipe-list-item-drawer {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+	background-color: white;
+	box-sizing: border-box;
+	border-bottom: 1px solid #eee;
+}
+.ui-swipe-list-item-actions {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 0;
+	background-color: #ccc;
+}
+.ui-swipe-list-item-actions-left {
+	right: 50%;
+}
+.action-active .ui-swipe-list-item-actions-left {
+	background-color: #f2ab33;
+}
+.ui-swipe-list-item-actions-right {
+	left: 50%;
+}
+.action-active .ui-swipe-list-item-actions-right {
+	background-color: #df1c1c;
+}

examples/templates/menu.html

@@ -1,6 +1,7 @@
 <h1>ListView</h1>
 <h2>Vertical</h2>
 <div>
+	<button class="button js-swipe-list-item">Swipe list item</button>
 	<button class="button js-different-size">Different size</button>
 	<button class="button js-different-size-with-header">With header</button>
 	<button class="button js-different-size-with-2-columns">With 2 columns</button>

lib/listviews/ListItemView.js

@@ -7,6 +7,10 @@ export default class ListItemView extends BaseView {
 	constructor(options) {
 		super(options);
 
+		if (options && options.parentList) {
+			this.parent = options.parentList;
+		}
+
 		this._visibility = false;
 
 		this.listenTo(this.model, 'change', this.render);