added deletion of tracks

src/javascript/controllers/TracksListController.js

@@ -2,29 +2,48 @@ import UIViewController from "./UIViewController.js";
 import $ from "../smallQ.js";
 
 
+
 class TracksListController extends UIViewController {
 	viewDidLoad() {
 		$(".track").click(element => {
+			if (element.hasClass("del")) {
+				element.removeClass("del");
+				return;
+			}
 			let event = new CustomEvent("TrackListController:select", {
 				detail : element.attr("data-id")
 			});
 			document.dispatchEvent(event);
+		}).swipeleft(event => {
+			$(event.target).addClass("del");
 		});
 
 		$(document).on("ViewController::newTrack", (element, event) => {
 			this.model.add({name : event.detail, points: []});
 			this.renderCall();
 		});
+
+		$(".delete").click(element => {
+			this.model.remove(parseInt(element.attr("data-id")));
+			this.renderCall();
+		});
 	}
 
 	render() {
 		let tracks = this.model.tracks().map((track, index) => {
-			return `<li class="track" data-id="track_${index}">${track.name}</li>`;
+			return `
+				<section class="listItem">
+					<section class="track" data-id="track_${index}">
+						${track.name}
+					</section>
+					<section class="delete" data-id="${index}">Delete</section>
+				</section>
+			`
 		}).join("");
 		return `
-			<ul class="UITableView">
+			<section class="UITableViewReveal">
 				${tracks}
-			</ul>
+			</section>
 		`;
 	}
 }

src/javascript/controllers/ViewController.js

@@ -48,11 +48,20 @@ class ViewController extends UIViewController {
 		});
 
 		$("#confirmAdd").click(element => {
-			$(".modal").removeClass("show");
+			let value = $("#tracknameInput").value();
+			if (value === "")
+				return;
 			let event = new CustomEvent("ViewController::newTrack", {
-				detail : $("#tracknameInput").value()
+				detail : value
 			});
 			document.dispatchEvent(event);
+			ViewController.ClearModal();
+		});
+		$("#modalDialog").click((element, event) => {
+			event.stopPropagation();
+		});
+		$(".modal").click((element, event) => {
+			ViewController.ClearModal();
 		});
 	}
 
@@ -61,6 +70,11 @@ class ViewController extends UIViewController {
 		this.renderCall();
 	}
 
+	static ClearModal() {
+		$("#tracknameInput").setValue("");
+		$(".modal").removeClass("show");
+	}
+
 	render() {
 		this.children = [];
 		let leftButton = "<a></a>";
@@ -94,7 +108,7 @@ class ViewController extends UIViewController {
 				<button id=settings>Settings</button>
 			</footer>
 			<section class="modal">
-				<section>
+				<section id="modalDialog">
 					<h3>Add a new Track</h3>
 					<p>
 						<input type="text" id="tracknameInput">

src/javascript/models/Tracks.js

@@ -3,11 +3,19 @@ import $ from "../smallQ.js";
 class Tracks {
 	constructor() {
 		this._tracks = JSON.parse(localStorage.getItem("tracks")) || [];
-		console.log(this._tracks);
 	}
 
 	add(track) {
 		this._tracks.push(track);
+		this._save();
+	}
+
+	remove(trackID) {
+		this._tracks.splice(trackID, 1);
+		this._save();
+	}
+
+	_save() {
 		localStorage.setItem("tracks", JSON.stringify(this._tracks))
 	}
 

src/javascript/smallQ.js

@@ -41,6 +41,14 @@ class smallQ {
 	value(newValue) {
 		if (!newValue)
 			return this.elements[0].value;
+		for (let element of this.elements) {
+				element.value = newValue;
+		}
+
+		return this;
+	}
+
+	setValue(value) {
 		for (let element of this.elements)
 			element.value = value;
 	}
@@ -70,11 +78,34 @@ class smallQ {
 			element.classList.remove(className);
 	}
 
+	hasClass(className) {
+		return this.elements[0].classList.contains(className);
+	}
+
 	each(callback) {
 		for (let element of this.elements)
 			callback(new smallQ(element));
 	}
 
+	swipeleft(callback) {
+		if (this.elements.length === 0 || typeof this.get(0) === "undefined")
+			return;
+		for (let element of this.elements) {
+			element.addEventListener("touchstart", event => {
+				this.touchstart = {x : event.changedTouches[0].screenX, y : event.changedTouches[0].screenY};
+			}, false);
+			element.addEventListener("touchend", event => {
+				this.touchend   = {x : event.changedTouches[0].screenX, y : event.changedTouches[0].screenY};
+				if (this.touchend.x < (this.touchstart.x - 50))
+					callback.bind(this)(event);
+				this.touchstart = {x : 0, y : 0};
+			}, false);
+		}
+
+		return this;
+	}
+
+
 
 	static $(selector) {
 		return new smallQ(selector);

src/scss/_UITableView.scss

@@ -4,6 +4,7 @@
 	margin: 0;
 
 	li {
+		position: relative;
 		padding: 15px 12px;
 		border-bottom: solid 1px #eee;
 

src/scss/_UITableViewReveal.scss

+.UITableViewReveal {
+	.listItem {
+		border-bottom: solid 1px #eee;
+		position: relative;
+		height: 60px;
+		box-sizing: border-box;
+
+		section {
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			position: absolute;
+			box-sizing: border-box;
+		}
+
+		section:first-child {
+			background: white;
+			padding: 15px 12px;
+			z-index: 100;
+			transition: all 0.3s ease-out;
+
+			&.del {
+				left: -50px;
+			}
+		}
+
+		section:last-child {
+			background: red;
+			color: white;
+			text-align: right;
+			line-height: 60px;
+		}
+	}
+}
\ No newline at end of file

src/scss/_modal.scss

@@ -7,6 +7,7 @@ section.modal {
 	height: 100%;
 	background: rgba(0,0,0,0.2);
 
+	z-index: 1000;
 	opacity: 0;
 	display: flex;
 	visibility: hidden;
@@ -28,6 +29,7 @@ section.modal {
 		padding: 15px;
 		border: none;
 		box-sizing: border-box;
+		z-index: 1100;
 
 		p {
 			margin: 0;

src/scss/app.scss

@@ -2,6 +2,7 @@
 @import "header";
 @import "footer";
 @import "UITableView";
+@import "UITableViewReveal";
 @import "view";
 @import "modal";