refactor drag and drag to manual fave palette

2 files changed, 91 insertions, 49 deletions

diff --git a/static/js/src/drag.js b/static/js/src/drag.js
index c155989..e519670 100644
--- a/static/js/src/drag.js
+++ b/static/js/src/drag.js
@@ -1,63 +1,105 @@
-
-window.Drag = {
-	'imgSrc': "",
-	'bindImages': function (){
-		$('.unbound').each(function(index,img){
-			img.addEventListener('dragstart', Drag.start, false);
-			$(this).removeClass('unbound');
-		});
-	},
-	'start': function(e){
-		// console.log(this);
-		if (this.src) Drag.imgSrc = this.src;
-	},
-	'enter': function(e){
-		Drag.chatbox.classList.add('over');
-		// console.log('enter')
+function dragTarget (target, callbacks) {
+	if (! target) return;
+	var base = this;
+	base.target = target;
+	base.callbacks = callbacks;
+	base.init = function(){
+		base.bind();
+	}
+	base.bind = function(){
+		base.target.addEventListener('dragenter', base.enter, false);
+		base.target.addEventListener('dragover', base.over, false);
+		base.target.addEventListener('dragleave', base.leave, false);
+		base.target.addEventListener('dragend', base.end, false);
+		base.target.addEventListener('drop', base.drop, false);
+	}
+	base.enter = function(e){
+		base.target.classList.add('over');
+		if ('enter' in callbacks) {
+			callbacks.enter(Drag.imgSrc);
+		}
 		return false;
-	},
-	'over': function(e){
+	}
+	base.over = function(e){
 		if (e.preventDefault) {
 			e.preventDefault(); // Necessary. Allows us to drop.
 		}
-		// console.log('over')
+		if ('over' in callbacks) {
+			callbacks.over(Drag.imgSrc);
+		}
 		return false;
-	},
-	'leave': function(e){
-		Drag.chatbox.classList.remove('leave');
-		// console.log('leave')
+	}
+	base.leave = function(e){
+		base.target.classList.remove('over');
+		if ('leave' in callbacks) {
+			callbacks.leave(Drag.imgSrc);
+		}
 		return false;
-	},
-	'end': function(e){
-		Drag.chatbox.classList.remove('end');
-		// console.log('end')
+	}
+	base.end = function(e){
+		base.target.classList.remove('over');
+		if ('leave' in callbacks) {
+			callbacks.leave(Drag.imgSrc);
+		}
 		return false;
-	},
-	'drop': function(e){
-		Drag.chatbox.classList.remove('over');
+	}
+	base.drop = function(e){
+		base.target.classList.remove('over');
 		if (e.stopPropagation) {
 			e.stopPropagation(); // stops the browser from redirecting.
 		}
 		if (e.preventDefault) {
 			e.preventDefault();
 		}
-		// console.log('drop');
-		Drag.chatbox.value += " " + Drag.imgSrc;
-		Drag.chatbox.value += " ";
-		Drag.chatbox.focus();
-		// console.log(Drag.imgSrc);
-		Drag.imgSrc = "";
-		// ok.onclick();
+		if ('drop' in callbacks) {
+			callbacks.drop(Drag.imgSrc);
+		}
 		return false;
 	}
+	base.init();
+};
+
+window.Drag = {
+	'imgSrc': "",
+	'bindImages': function (){
+		$('.unbound').each(function(index,img){
+			img.addEventListener('dragstart', Drag.start, false);
+			$(this).removeClass('unbound');
+		});
+	},
+	'start': function(e){
+		if (this.src) {
+			Drag.imgSrc = this.src;
+		}
+	}
 }
 
 $(function(){
-	Drag.chatbox = document.getElementById("msgInput");
-	if (! Drag.chatbox || $.browser.mozilla) return;
-	Drag.chatbox.addEventListener('dragenter', Drag.enter, false);
-	Drag.chatbox.addEventListener('dragover', Drag.over, false);
-	Drag.chatbox.addEventListener('dragleave', Drag.leave, false);
-	Drag.chatbox.addEventListener('dragend', Drag.end, false);
-	Drag.chatbox.addEventListener('drop', Drag.drop, false);
+	// dragging images into the manual fave palette
+	var palette = document.getElementById("manual-palette");
+	var paletteButton = document.getElementById("manual-palette-button");
+	var paletteCallbacks = {
+		'enter': function() {
+			manPaletteShow();
+		},
+		'leave': function() {
+			manPaletteHide();
+		},
+		'drop': function (url) {
+			addManualFav(url);
+		}
+	};
+	Drag.manualPalette = new dragTarget (palette, paletteCallbacks);
+	Drag.manualPaletteButton = new dragTarget (paletteButton, paletteCallbacks);
+	
+	// dragging images directly into the chatbox (fixes chrome and safari)
+	if ($.browser.mozilla) return;
+	var msgInput = document.getElementById("msgInput");
+	Drag.chatbox = new dragTarget (msgInput, {
+		"drop": function(url) {
+			msgInput.value += " " + url;
+			msgInput.value += " ";
+			msgInput.focus();
+		}
+	});
 });
diff --git a/static/js/src/palette-manual.js b/static/js/src/palette-manual.js
index 61733b5..ca45702 100644
--- a/static/js/src/palette-manual.js
+++ b/static/js/src/palette-manual.js
@@ -60,8 +60,8 @@ function manualPaletteBuildImageThumbs() {
     }
 };
 
-function addManualFav(imgsrc) {
-    if (!imgsrc) return;
+function addManualFav(url) {
+    if (!url) return;
     if (hasLocalStorage()) {
         if (manPaletteIsEmpty())
             $("#manual-palette-thumbs").html("");
@@ -69,15 +69,15 @@ function addManualFav(imgsrc) {
         if ($.inArray(imgsrc, mfavs) == -1) {
             mfavs.push(imgsrc);
             setManualFaves(mfavs);
-            $("#manual-palette-thumbs").append("<img onclick='paletteToChat(this)' src='" + imgsrc + "'>");
+            $("#manual-palette-thumbs").append("<img onclick='paletteToChat(this)' src='" + url + "'>");
         }
     }
 };
 
-function removeManualFav(imgsrc) {
+function removeManualFav(url) {
     if (hasLocalStorage()) {
         var mfavs = getManualFaves();
-        var idx = $.inArray(imgsrc, mfavs);
+        var idx = $.inArray(url, mfavs);
         if (idx != -1) {
             mfavs.splice(idx, 1);
             setManualFaves(mfavs);