- Major rewrite of most of the functionality

- Updates to tutorial
zeppu · Jun 28, 2015 · 0727c00 · 0727c00
1 parent 1984259
commit 0727c00
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 99 deletions.
diff --git a/assets/background.js b/assets/background.js
@@ -109,7 +109,8 @@ function processGMUpdate(request, sender) {
 		data.songData = request.songData;
 	}
 
-	messageContentScript( data );	
+	messageContentScript( data );
+	data.updated = false;	
 	gm_player = data;	
 }
 
@@ -139,7 +140,7 @@ var bubble = new function() {
     }
 
     this.shouldHideOnDisabled = function(data) {
-    	self.options.hide = data.hideOnDisabled;
+    	gm_player.hideOnDisabled = data.hideOnDisabled;
     }
 
     this.shouldShowTrackTitle = function(data) {
@@ -159,7 +160,8 @@ var bubble = new function() {
 		if (self.html != null && self.options.position != null)
 		{
 			self.options.showMinWidth = 400;
-			self.options.opacity = 0.5;
+			self.options.opacity = 0.25;
+			self.options.zindex = 2000000000;
 			return format(self.html, self.options);
 		}
 		else return "";

diff --git a/assets/content_script.js b/assets/content_script.js
@@ -27,6 +27,10 @@ function loadExtension(data) {
 		excuteCommand : function() {			
 			chrome.runtime.sendMessage({command: this.dataset.command});
 		},
+		hide : function() {
+			blacklisted = true;
+			document.getElementById("gm-bubble-content").remove();
+		},
 		blacklistUrl: function () {
 			blacklisted = true;
 			chrome.runtime.sendMessage({blacklist: window.location.hostname});
@@ -59,9 +63,10 @@ function loadExtension(data) {
 		document.getElementById('gm-bubble-dislike').onclick=gm_Bubble_Control.excuteCommand;
 
 		document.getElementById('gm-bubble-blacklist').onclick=gm_Bubble_Control.blacklistUrl;
+		document.getElementById('gm-bubble-hide').onclick=gm_Bubble_Control.hide;
 		document.getElementById('gm-bubble-main').onmousewheel=gm_Bubble_Control.scroll;
 
-		document.getElementById('gm-bubble-content').ondblclick=gm_Bubble_Control.selectPlayer;
+		document.getElementById('gm-bubble-main').ondblclick=gm_Bubble_Control.selectPlayer;
 		setDraggable();	
 		update(data);
 	}
@@ -72,7 +77,7 @@ function update(data) {
 		return;
 	gm_player = data;
 	element = document.getElementById("gm-bubble-content");
-	element.setAttribute("data-hideoption", data.hideOnDisabled	);
+	element.setAttribute("data-hideoption", data.hideOnDisabled);
 
 	if (data.disabled) {
 		element.setAttribute("data-state", "disabled");
@@ -234,39 +239,44 @@ var progressBar = new function() {
 
 
 // Drag Stuff
-var draggable, container,dragData=null;
+var draggable, container, dragData=null;
 function setDraggable() {
-	draggable=document.getElementById("gm-bubble-drag");
+	draggable1=document.getElementById("gm-bubble-main");
+	draggable2=document.getElementById("gm-bubble-layer");
 	container=document.getElementById("gm-bubble-content");
-	if(window.addEventListener) {
-		draggable.addEventListener('mousedown',startDrag,false);
-		document.body.addEventListener('mousemove',drag,false);
-		document.body.addEventListener('mouseup',stopDrag,false);
-	}
-	else if(window.attachEvent) {
-		draggable.attachEvent('onmousedown',startDrag);
-		document.body.attachEvent('onmousemove',drag);
-		document.body.attachEvent('onmouseup',stopDrag);
-	}
+
+	draggable1.addEventListener('mousedown',startDrag,false);
+	draggable2.addEventListener('mousedown',startDrag,false);
 }
 
 
 function startDrag(ev) {
-if(!dragData) {
+if(!dragData) {	
 	containerOffset = document.getElementById("gm-bubble-content").dataset.state == "disabled"? 0 : 64;
 	ev=ev||event;
 		dragData={
 		x: ev.clientX-container.offsetLeft-containerOffset,
 		y: ev.clientY-container.offsetTop-containerOffset
 		};
 	};
+
+	document.body.addEventListener('mousemove',drag,false);
+	document.body.addEventListener('mouseup',stopDrag,false);
 }
 
-function processDrag(ev) {
+function processDrag(ev) {	
 	posX = ev.clientX-dragData.x;
 	posY = ev.clientY-dragData.y;
+
 	maxX = document.body.clientWidth;
 	maxY = window.innerHeight;
+
+	if (!dragData.moved && Math.abs(container.offsetLeft - posX) < 20 && Math.abs(container.offsetTop - posY) < 20) {
+		return;
+	} 
+
+	dragData.moved = true;
+
 	pos = {};
 	if(maxX / 2 > posX) {
 		pos.left = posX;
@@ -291,17 +301,23 @@ function processDrag(ev) {
 }
 
 function drag(ev) {
-	if(dragData) {
+	if (dragData) {
 		processDrag(ev||event);
 	}
 }
 
-function stopDrag(ev) {
-if(dragData) {
+function stopDrag(ev) {	
+	if(dragData && dragData.moved) {
+		dragData.moved = false;
 		processDrag(ev||event);
-		setLocation(dragData.pos);
+		if (dragData.pos) {
+			setLocation(dragData.pos);
+		}
 		dragData=null;
 	}
+
+	document.body.removeEventListener('mousemove',drag,false);
+	document.body.removeEventListener('mouseup',stopDrag,false);
 }
 
 // End Drag stuff

diff --git a/assets/gm-content-script.js b/assets/gm-content-script.js
@@ -76,8 +76,7 @@ function setEnabled(enabled) {
     updatePlayerStatus("disabled", !enabled);
 }
 
-function observePlayButton(mutations) {
-    console.log("BB");
+function observePlayButton(mutations) {    
     var playButton = document.querySelector('[data-id="play-pause"]');
     enabled = !playButton.hasAttribute("disabled");
     setEnabled(enabled);
@@ -110,7 +109,6 @@ var observers = {
         observeSongTitle();
     }),
     playButtonObserver: new MutationObserver(function(mutations) {
-        console.log("AA");
         observePlayButton();
     }),
     thumbsUpObserver: new MutationObserver(function(mutations) {

diff --git a/assets/options.css b/assets/options.css
@@ -20,21 +20,21 @@ body {
 	height: 100%;	
 	box-sizing: border-box;
 	margin: 0 auto;	
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));			
+	background: #4CAF50;			
 
 }
 
 .wrapper {
 	height: 100%;
 	background-color: #fff;
 	padding: 0 30px;
-	box-shadow: 0 0 10px #333;
 	box-sizing: border-box;
 	position: absolute;
 	min-width: 1000px;
 	max-width: 1280px;
 	left: 0;
 	right: 0;
+	top: 0;
 	margin: auto;
 
 }
@@ -187,27 +187,27 @@ width: 20px;
 }
 
 .pluginButton .pluginButtonLabel {
--webkit-font-smoothing: antialiased;
-border-collapse: collapse;
-color: rgb(255, 255, 255);
-cursor: pointer;
-direction: ltr;
-display: inline;
-font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
-font-size: 11px;
-font-weight: bold;
-height: auto;
-line-height: 20px;
-padding-bottom: 0px;
-padding-left: 0px;
-padding-right: 5px;
-padding-top: 0px;
-position: relative;
-text-align: left;
-text-shadow: rgb(53, 76, 140) 0px -1px 0px;
-vertical-align: top;
-white-space: nowrap;
-width: auto;
+	-webkit-font-smoothing: antialiased;
+	border-collapse: collapse;
+	color: rgb(255, 255, 255);
+	cursor: pointer;
+	direction: ltr;
+	display: inline;
+	font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
+	font-size: 11px;
+	font-weight: bold;
+	height: auto;
+	line-height: 20px;
+	padding-bottom: 0px;
+	padding-left: 0px;
+	padding-right: 5px;
+	padding-top: 0px;
+	position: relative;
+	text-align: left;
+	text-shadow: rgb(53, 76, 140) 0px -1px 0px;
+	vertical-align: top;
+	white-space: nowrap;
+	width: auto;
 }
 
 input[type="checkbox"] {

diff --git a/assets/tutorial.css b/assets/tutorial.css
@@ -113,7 +113,7 @@ h1 {
 
 [data-step="step5"] #tut-step-5  {
 	background-color: #fff;
-	top: calc(30% + 200px);
+	top: calc(30%);
 	transition: all 0.75s cubic-bezier(0.4, 0, 0.2, 1);
 	opacity: 1;
 }
@@ -127,10 +127,10 @@ h1 {
 }
 
 #background-container {
-	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 	position: absolute;
 	width:100%;
 	height: 100%;
+	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 [data-step="step2"] #background-container {
@@ -221,6 +221,10 @@ h1 {
 	color: #F44336;				
 }
 
+.action.green {
+	color: #4CAF50;
+}
+
 .tip {
 	font-style: italic;
 	font-size: small;

diff --git a/assets/tutorial.js b/assets/tutorial.js
@@ -60,13 +60,27 @@ function onHashChange() {
 
 }
 
+function temporaryHide() {
+	element = document.getElementById("gm-bubble-container");
+	element.style.opacity = 0;
+	bubbleHighlight = document.getElementById('bubble-highlight');
+	bubbleHighlight.classList.add("pop-highlight");
+	setTimeout(function() {
+		element = document.getElementById("gm-bubble-container");
+		bubbleHighlight.classList.remove("pop-highlight");
+		element.style.opacity = 1;
+	}, 1500)
+};
+
 function startTutorial() {
  	document.getElementById("gm-bubble-content").setAttribute("style", "bottom: calc(70% - 32px); right: calc(50% - 32px)");
  	document.body.appendChild(document.getElementById("tut-container"));
  	setTimeout(function() { document.getElementById("tut-container").setAttribute("class", "start"); }, 250);
  	document.body.onhashchange = onHashChange;
  	onHashChange();
 
+ 	document.getElementById('gm-bubble-blacklist').onclick=temporaryHide;
+	document.getElementById('gm-bubble-hide').onclick=temporaryHide;
 }
 
  window.onload=function() { setTimeout(startTutorial, 100) };
diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
 	"manifest_version": 2,
 	"author": "Joseph DeBono",
 	"homepage_url": "https://plus.google.com/communities/114213776133869190328",
-	"version": "1.5.3",
+	"version": "1.6",
 	"description": "Floating quick controls for Google Play Music",
 	"options_page": "options.html",
 	"content_security_policy": "script-src 'self' https://apis.google.com https://platform.twitter.com; object-src 'self'",