Fixed the drag-n-drop functionality

Author: Matt Karl

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.9",
+	"version": "0.2.10",
 	"private": true,
 	"dependencies": {
 		"jqueryui": "*",

deploy/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "SpringRollStudio",
 	"description": "Application for SpringRoll projects",
-	"version": "0.2.9",
+	"version": "0.2.10",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SpringRoll/SpringRollStudio"

installer/win32.nsi

@@ -4,7 +4,7 @@
 # These three must be integers
 !define VERSIONMAJOR 0
 !define VERSIONMINOR 2
-!define VERSIONBUILD 9
+!define VERSIONBUILD 10
 # These will be displayed by the "Click here for support information" link in "Add/Remove Programs"
 # It is possible to use "mailto:" links in here to open the email client
 !define HELPURL "https://github.com/SpringRoll/SpringRollStudio/issues"

installer/win64.nsi

@@ -4,7 +4,7 @@
 # These three must be integers
 !define VERSIONMAJOR 0
 !define VERSIONMINOR 2
-!define VERSIONBUILD 9
+!define VERSIONBUILD 10
 # These will be displayed by the "Click here for support information" link in "Add/Remove Programs"
 # It is possible to use "mailto:" links in here to open the email client
 !define HELPURL "https://github.com/SpringRoll/SpringRollStudio/issues"

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "SpringRollStudio",
 	"private": true,
-	"version": "0.2.9",
+	"version": "0.2.10",
 	"dependencies": {
 		"grunt": "^0.4.5",
 		"grunt-appdmg": "^0.3.1",

project.json

@@ -1,6 +1,6 @@
 {
 	"name": "SpringRollStudio",
-	"version": "0.2.9",
+	"version": "0.2.10",
 	"main": [
 		"components/node-webkit-app/src/utils/UpdateChecker.js",
 		"components/node-webkit-app/src/utils/Browser.js",

src/js/Module.js

@@ -38,6 +38,12 @@
 			}
 		}
 
+		// Turn off all file dragging
+		$(document.body).on("dragover drop", function(e){
+			e.preventDefault();
+			return false;
+		});
+
 		// Initialize the browser utility
 		Browser.init();	
 	};

src/js/SpringRollStudio.js

@@ -93,6 +93,48 @@
 			}
 		}.bind(this));
 
+		// Setup the drop zone for the new templates
+		var self = this;
+		var drop = $(document.body)
+			.on("dragenter", function(ev){
+				ev.preventDefault();
+				drop.addClass(DRAG_CLASS);
+			})
+			.on("dragover", function(ev){
+				ev.preventDefault();
+				if(!drop.hasClass(DRAG_CLASS))
+					drop.addClass(DRAG_CLASS);
+			})
+			.on("dragleave", function(ev){
+				ev.preventDefault();
+				drop.removeClass(DRAG_CLASS);
+			})
+			.on("drop", function(ev){
+				ev.preventDefault();
+				drop.removeClass(DRAG_CLASS);
+				var fileList = ev.originalEvent.dataTransfer.files;
+				if (fileList.length > 1)
+				{
+					alert("Only one template at a time.");
+					return;
+				}
+
+				// Select the first entry
+				var file = fileList[0];
+
+				// Directories only!
+				if (APP)
+				{
+					if (!fs.lstatSync(file.path).isDirectory())
+					{
+						alert("Folders only. Please drag a project folder.");
+						return;
+					}
+					self.openProject(file.path);
+				}
+			});
+		
+
 		// Set the current project state based on the project
 		var project = localStorage.getItem('project');
 		if (project)
@@ -108,6 +150,9 @@
 	// Reference to the prototype
 	var p = extend(SpringRollStudio, NodeWebkitApp);
 
+	// The class name for when dragging a file
+	var DRAG_CLASS = "dragging";
+
 	/**
 	*  Handle when an item is clicked on in the system menu
 	*  @method _menuHandler

src/js/captions/Captions.js

@@ -104,59 +104,7 @@
 
 		var list = this.list.parent;
 		var self = this;
-
-		$(document.body).on("dragover drop", function(e) {
-			e.preventDefault();
-			return false;
-		});
-
-		/*list.on("dragenter", function(event){
-			event.preventDefault();
-			list.addClass("dragover");
-		})
-		.on("dragover", function(event) {
-			event.preventDefault();
-			if(!list.hasClass("dragover"))
-				list.addClass("dragover");
-		})
-		.on("dragleave", function(event) {
-			event.preventDefault();
-			list.removeClass("dragover");
-		})
-		.on("drop", function(event) {
-			event.preventDefault();
-			list.removeClass("dragover");
-
-			var fileList = event.originalEvent.dataTransfer.files;
-
-			if (fileList.length > 1)
-			{
-				throw "Only one project at a time";
-			}
-
-			// Select the first entry
-			var file = fileList[0];
-
-			// Directories only!
-			if (APP)
-			{
-				var fs = require('fs');
-				if (!fs.lstatSync(file.path).isDirectory())
-				{
-					throw "Folders only. Please drag a project folder.";
-				}
-			}
-			else
-			{
-				if (file.type !== "")
-				{
-					throw "Folders only. Please drag a project folder.";
-				}
-			}
-
-			self.open(APP ? file.path : file.name);
-		});*/
-
+		
 		this.open(localStorage.getItem('project'));
 	};
 

src/js/new/TemplateManager.js

@@ -75,12 +75,6 @@
 		this._modal = $("#templateModal")
 			.on('hidden.bs.modal', this.onModalClose.bind(this));
 
-		// Turn off all file dragging
-		$(document.body).on("dragover drop", function(e){
-			e.preventDefault();
-			return false;
-		});
-
 		var self = this;
 
 		// Setup the drop zone for the new templates

src/less/SpringRollStudio.less

@@ -5,14 +5,22 @@ body {
 	cursor:default;
 	font-family:'OpenSans', sans-serif;
 	font-weight: lighter;
+	width:100%;
+	height:100%;
+	position:absolute;
+	padding:0 10px;
+	background-color:#fff;
+	&.dragging {
+		box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
+		background-color:#eee;
+	}
 }
 
 .modules {
 	width:100%;
-	border:10px solid #fff;
-	border-bottom-width: 0;
+	margin-top: 10px;
 	&:last-child {
-		border-bottom-width: 10px;
+		margin-bottom: 10px;
 	}
 	a, button {
 		font-weight:lighter;
@@ -26,7 +34,7 @@ body {
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;
 	text-align: center;
-	margin:0 10px;
+	margin:0;
 	width:auto;
 	color:#fff;
 	border:0;