New way of deleting songs on mobile

server/public/assets/css/style.css

@@ -2147,6 +2147,10 @@ nav ul li:hover, nav ul li.active {
   z-index: 99;
 }
 
+.mobile-delete {
+  display: none;
+}
+
 /***************************************************************************
 ****************************************************************************
 ********************* Screen size specific rules ***************************
@@ -2176,6 +2180,27 @@ nav ul li:hover, nav ul li.active {
       width:95vw !important;
     }
 
+    .list-song {
+      overflow: visible;
+    }
+
+    #main-row {
+      margin-right: -3px !important;
+    }
+
+    .mobile-delete {
+      height: 100%;
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 60px;
+      top: 0px;
+      right: -60px;
+      /* overflow: visible; */
+      z-index: -99999999;
+    }
+
     #main-container {
       padding-bottom: 20px;
     }
@@ -2430,8 +2455,9 @@ nav ul li:hover, nav ul li.active {
     }
 
     #playlist {
-      margin-left: 8px;
-      width: calc(100% - 8px);
+      margin-left: 10px;
+      width: calc(100% - 10px);
+      overflow: hidden;
     }
 
     #player{

server/public/assets/js/admin.js

@@ -146,6 +146,7 @@ var Admin = {
                 });
             }
         }
+        List.dragging(true);
         $('ul.playlist-tabs-loggedIn').tabs('select_tab', $(".playlist-tabs li a.active").attr("href").substring(1));
     },
 
@@ -227,6 +228,8 @@ var Admin = {
             $(".playlist-tabs").removeClass("hide");
         }
 
+        List.dragging(false);
+
         /*if($(".card-action").length !== 0 &&
         !Helper.contains($(".card-action").attr("class").split(" "), "hide") && !offline){
             $(".card-action").addClass("hide");

server/public/assets/js/helpers.js

@@ -240,8 +240,46 @@ var Helper = {
 			$("#contact-container").html("Something went wrong, sorry about that. You could instead try with your own mail-client: <a title='Open in client' href='mailto:contact@zoff.no?Subject=Contact%20Zoff&Body=" + message + "'>contact@zoff.no</a>");
 			setTimeout(function(){newWindow.close();},500);*/
 		}
+	},
+
+	firstY: null,
+	lastY: null,
+	currentY: null,
+	vertScroll: false,
+	initAdjustment: 0,
+
+	touchstart: function(event) {
+			Helper.lastY = Helper.currentY = Helper.firstY = event.originalEvent.touches[0].pageY;
+	},
+
+	touchmove: function(event) {
+			Helper.currentY = event.originalEvent.touches[0].pageY;
+			var adjustment = Helper.lastY-Helper.currentY;
+
+			// Mimic native vertical scrolling where scrolling only starts after the
+			// cursor has moved up or down from its original position by ~30 pixels.
+			if (!Helper.vertScroll && Math.abs(Helper.currentY-Helper.firstY) > 30) {
+					Helper.vertScroll = true;
+					Helper.initAdjustment = Helper.currentY-Helper.firstY;
 			}
 
+			// only apply the adjustment if the user has met the threshold for vertical scrolling
+			if (Helper.vertScroll) {
+					window.scrollBy(0,adjustment + Helper.initAdjustment);
+					Helper.lastY = Helper.currentY + adjustment;
+			}
+
+	},
+
+	touchend: function(event) {
+			Helper.vertScroll = false;
+			Helper.firstY = null;
+			Helper.currentY = null;
+			Helper.vertScroll = false;
+			Helper.initAdjustment = 0;
+			Helper.currentY = null;
+	},
+
 };
 
 Element.prototype.remove = function() {

server/public/assets/js/list.js

@@ -8,6 +8,76 @@ var List = {
 	not_found: [],
 	num_songs: 0,
 
+	dragging: function(enabled) {
+		if(!enabled) {
+			var jqDraggableItem = $(".list-song");
+			try {
+				$(".list-song").draggable("destroy");
+			} catch(e) {}
+
+			jqDraggableItem.off("touchstart", Helper.touchstart);
+			jqDraggableItem.off("touchmove", Helper.touchmove);
+			jqDraggableItem.off("touchend", Helper.touchend);
+		} else {
+			if(Helper.mobilecheck()) {
+				var jqDraggableItem = $(".list-song");
+				try {
+					$(".list-song").draggable("destroy");
+				} catch(e) {}
+
+				jqDraggableItem.off("touchstart", Helper.touchstart);
+				jqDraggableItem.off("touchmove", Helper.touchmove);
+				jqDraggableItem.off("touchend", Helper.touchend);
+				$( ".list-song" ).draggable({
+					axis:"x",
+					containment: [-50, 0, 10, 0],
+					scroll: true,
+					stop: function(event, ui) {
+						if(ui.offset.left == -50) {
+							try {
+								navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
+
+								if (navigator.vibrate) {
+									navigator.vibrate(100);
+								}
+							} catch(e) {
+								//console.log(e);
+							}
+							$(".accept-delete").attr("data-video-id", $(this).attr("data-video-id"));
+							$("#delete_song_title").html($(this).find(".list-title").html());
+							$("#delete_song_alert").modal("open");
+
+							var that = this;
+							$(this).addClass("side_away");
+							$(this).css("left", "0px");
+							setTimeout(function() {
+								$(that).removeClass("side_away");
+							}, 300);
+
+						} else {
+							var that = this;
+							$(this).addClass("side_away");
+							$(this).css("left", "0px");
+							setTimeout(function() {
+								$(that).removeClass("side_away");
+							}, 300);
+						}
+					}
+				});
+
+				// record the initial position of the cursor on start of the touch
+				jqDraggableItem.on("touchstart", Helper.touchstart);
+
+				// fires whenever the cursor moves
+				jqDraggableItem.on("touchmove", Helper.touchmove);
+
+				// when the user lifts their finger, they will again need to meet the
+				// threshold before vertical scrolling starts.
+				jqDraggableItem.on("touchend", Helper.touchend);
+			}
+		}
+	},
+
 	channel_function: function(msg)
 	{
 		if(user_auth_started) {
@@ -26,10 +96,12 @@ var List = {
 					List.populate_list(full_playlist, true);
 						Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
 				}
+				if(!w_p) List.dragging(true);
 				break;
 			case "added":
 				List.added_song(msg.value);
 				Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
+				if(!w_p) List.dragging(true);
 				break;
 			case "deleted":
 				List.deleted_song(msg.value, msg.removed);
@@ -39,10 +111,12 @@ var List = {
 					List.voted_song(msg.value, msg.time);
 					Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
 				}
+				if(!w_p) List.dragging(true);
 				break;
 			case "song_change":
 				if(window.location.pathname != "/") List.song_change(msg.time, msg.remove);
 				Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
+				if(!w_p) List.dragging(true);
 			break;
 		}
 	},
@@ -100,7 +174,10 @@ var List = {
 			List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / List.can_fit)-5;
 		}
 		if(List.element_height < 55.2){
+			List.can_fit = List.can_fit - 1;
 			List.element_height = 55.2;
+			List.can_fit = Math.round(($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / 71);
+			List.element_height = (($(window).height() - $(".tabs").height() - $("header").height() - 64 - 8) / List.can_fit)-5;
 		}
 		if(list_html === undefined) list_html = $("#list-song-html").html();
 		full_playlist = msg;
@@ -358,6 +435,7 @@ var List = {
 			//if(removed) {
 			if(List.page <= index && List.page - List.can_fit <= index) {
 				$("#" + deleted).addClass("side_away");
+				$("#" + deleted).find(".mobile-delete").remove();
 				$("#" + deleted).css("transform", "translateX(-100%)");
 				setTimeout(function() {
 					$("#" + deleted).remove();
@@ -890,6 +968,12 @@ var List = {
 
 		}
 
+		if(Helper.mobilecheck()) {
+			song.find(".waves-effect").removeClass("waves-effect");
+			song.find(".waves-light").removeClass("waves-light");
+
+		}
+
 		song.find(".list-title").text(video_title);
 		song.find(".list-title").attr("title", video_title);
 		//song.find(".vote-container").attr("onclick", "vote('"+video_id+"','pos')");

server/public/assets/js/listeners.js

@@ -208,6 +208,9 @@ function init(){
 	$("#help").modal();
 	$("#contact").modal();
 	$("#embed").modal();
+	$("#delete_song_alert").modal({
+		dismissible: false
+	});
 	$("#user_password").modal({
 		dismissible: false
 	});
@@ -296,8 +299,9 @@ function init(){
 	if(Player.player === "" || Player.player === undefined || Helper.mobilecheck()) Player.loadPlayer();
 	//}
 
-	if(Helper.mobilecheck()) Mobile_remote.initiate_volume();
-	else {
+	if(Helper.mobilecheck()) {
+		Mobile_remote.initiate_volume();
+	}	else {
 		$('input#chan_description').characterCounter();
 	}
 
@@ -912,6 +916,15 @@ function seekToClick(e){
 	}
 }
 
+$(document).on("click", ".accept-delete", function(e) {
+	e.preventDefault();
+	var delete_id = $(this).attr("data-video-id");
+	if(delete_id) {
+		List.vote(delete_id, 'del');
+	}
+	$("#delete_song_alert").modal("close");
+});
+
 $(document).keyup(function(event) {
 	if(event.keyCode == 27){
 		$("#results").html("");

server/public/layouts/channel.handlebars

@@ -106,6 +106,16 @@
                 <a href="#!" class="waves-effect waves-green btn-flat submit-user-password">Submit</a>
             </div>
         </div>
+        <div id="delete_song_alert" class="modal">
+             <div class="modal-content">
+                   <h5>Delete song</h5>
+                   <p>Are you sure you want to delete <span id="delete_song_title"></span>?</p>
+             </div>
+             <div class="modal-footer">
+                   <a href="#!" class="waves-effect waves-red btn-flat accept-delete right red-text">Delete</a>
+                 <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat cancel-song-delete">Cancel</a>
+             </div>
+         </div>
       <div id="help" class="modal modal-fixed-footer">
             <div class="modal-content">
                 <h4>Help</h4>
@@ -219,7 +229,7 @@
               </div>
                 <div id="wrapper" class="tabs_height">
                     <div id="list-song-html">
-                        <div id="list-song" class="card left-align list-song  waves-effect waves-light playlist-element">
+                        <div id="list-song" class="card left-align list-song playlist-element waves-effect waves-light">
                             <div class="clickable vote-container" title="Vote!">
                                 <a class="clickable center-align votebg">
                                     <span class="lazy card-image cardbg list-image" style="background-image:url('/assets/images/loading.png');">
@@ -243,6 +253,7 @@
                                 <!--<a title="Remove song" class="waves-effect btn-flat clickable hide-on-small-only delete_button hide suggested_remove">Delete</a>
                                 <a title="Remove song" class="waves-effect btn-flat clickable hide-on-med-and-up delete_button hide suggested_remove"><i class="material-icons">close</i></a>-->
                           </div>
+                          <div class="mobile-delete red">DELETE</div>
                         </div>
                     </div>
                 </div>

server/public/layouts/main.handlebars

@@ -42,7 +42,7 @@
     <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
     <script type="text/javascript" src="/assets/dist/lib/jquery-2.1.3.min.js"></script>
     <script type="text/javascript" src="/assets/dist/lib/materialize.min.js"></script>
-    <script type="text/javascript" src="/assets/dist/lib/jquery-ui-1.10.3.min.js"></script>
+    <script type="text/javascript" src="/assets/dist/lib/jquery-ui.min.js"></script>
     <script type="text/javascript" src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
     <script type="text/javascript" src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js"></script>
     <script type="text/javascript" src="/assets/dist/lib/jquery.ui.touch-punch.min.js"></script>