Implemented basic drag & drop.

reimund · Jul 20, 2016 · 6d668f5 · 6d668f5
1 parent c07c61f
commit 6d668f5
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 30 deletions.
diff --git a/html-panel/src/index.html b/html-panel/src/index.html
@@ -13,13 +13,13 @@
 		<div class="container clearfix">
 			<div>
 				<p>New rows</p>
-				<span class="btn add-row-top"><span><a class="icon add-row-top" href="#">Top</a></span></span><br />
-				<span class="btn add-row-bottom"><span><a class="icon add-row-bottom" href="#">Bottom</a></span></span>
+				<span class="btn add-row-top" ondrop="drop('top', event)" ondragover="allowDrop(event)"><span><a class="icon add-row-top" href="#">Top</a></span></span><br />
+				<span class="btn add-row-bottom" ondrop="drop('bottom', event)" ondragover="allowDrop(event)"><span><a class="icon add-row-bottom" href="#">Bottom</a></span></span>
 			</div>
 			<div>
 				<p>New columns</p>
-				<span class="btn add-column-left"><span><a class="icon add-column-left" href="#">Left</a></span></span><br />
-				<span class="btn add-column-right"><span><a class="icon add-column-right" href="#">Right</a></span></span>
+				<span class="btn add-column-left" ondrop="drop('left', event)" ondragover="allowDrop(event)"><span><a class="icon add-column-left" href="#">Left</a></span></span><br />
+				<span class="btn add-column-right" ondrop="drop('right', event)" ondragover="allowDrop(event)"><span><a class="icon add-column-right" href="#">Right</a></span></span>
 			</div>
 			<div class="options">
 				<span class="btn options"><span><a class="icon options" href="#">Options</a></span>

diff --git a/html-panel/src/js/app.js b/html-panel/src/js/app.js
@@ -1,39 +1,79 @@
-var CSLibrary = new CSInterface();
+var CSLibrary = null;
 
-jQuery(document).ready(function($) {
+if (typeof(CSInterface) !== 'undefined')
+	CSLibrary = new CSInterface();
 
+var scripts = {
+	left: 'Tych Panel/Panel Helpers/Tych Panel - New column (left).jsx',
+	right: 'Tych Panel/Panel Helpers/Tych Panel - New column (right).jsx',
+	top:  'Tych Panel/Panel Helpers/Tych Panel - New row (top).jsx',
+	bottom: 'Tych Panel/Panel Helpers/Tych Panel - New row (bottom).jsx',
+	options: 'Tych Panel/Tych Panel - Options.jsx',
+};
 
+jQuery(document).ready(function($) {
 	$('.btn.options')
-		.on('click', function() { evalScript('Tych Panel/Tych Panel - Options.jsx'); });
+		.on('click', function() { evalScript(scripts.options); });
 
 	$('.btn.add-column-left')
-		.on('click', function() { runScript('Tych Panel/Panel Helpers/Tych Panel - New column (left).jsx'); });
+		.on('click', function() { runScript(scripts.left); });
 
 	$('.btn.add-column-right')
-		.on('click', function() { runScript('Tych Panel/Panel Helpers/Tych Panel - New column (right).jsx'); });
+		.on('click', function() { runScript(scripts.right); });
 
 	$('.btn.add-row-top')
-		.on('click', function() { runScript('Tych Panel/Panel Helpers/Tych Panel - New row (top).jsx'); });
+		.on('click', function() { runScript(scripts.top); });
 
 	$('.btn.add-row-bottom')
-		.on('click', function() { runScript('Tych Panel/Panel Helpers/Tych Panel - New row (bottom).jsx'); });
+		.on('click', function() { runScript(scripts.bottom); });
 
 	$('a.about')
 		.on('click', function() { CSLibrary.openURLInDefaultBrowser('http://lumens.se/tychpanel/'); });
 
-    CSLibrary.addEventListener("com.adobe.csxs.events.ThemeColorChanged", changeTheme); 
-
-	changeTheme();
+	if (CSLibrary) {
+		CSLibrary.addEventListener('com.adobe.csxs.events.ThemeColorChanged', changeTheme); 
+
+		changeTheme();
+	}
 });
 
+function drop(compositeType, event) {
+	event.preventDefault();
+
+	var files = event.dataTransfer.files
+	  , selectedFiles = []
+	  , selectedFilesScript = 'var selectedFiles = '
+	;
+
+	for (var i in files) {
+		if (files.hasOwnProperty(i)) {
+			var path = files[i].path ? files[i].path : files[i].name;
+
+			if (path)
+				selectedFiles.push(path);
+		}
+	};
+
+	selectedFilesScript += JSON.stringify(selectedFiles) + ';';
+
+	if (CSLibrary) {
+		var script = selectedFilesScript + evalFileScript(scripts[compositeType]);
+		setTimeout(function() { CSLibrary.evalScript(script) }, 100);
+	}
+}
+
+function allowDrop(event) {
+	event.preventDefault();
+}
+
 /**
  * Use showOpenDialog since File.openDialog behaves buggy when called via the
  * panel (at least on OS X).
  */
 function runScript(scriptPath)
 {
 	var dialogResult  = null
-	  , selectedFiles = 'var selectedFiles = undefined;';
+	  , selectedFilesScript = 'var selectedFiles = undefined;';
 	;
 
 	CSLibrary.evalScript(getUseBridgeSelectionScript(), function(useBridgeSelection) {
@@ -42,38 +82,33 @@ function runScript(scriptPath)
 			dialogResult = window.cep.fs.showOpenDialog(true, false, 'Choose file(s) to add to composite', null);
 
 			if (dialogResult.err === window.cep.fs.NO_ERROR)
-				selectedFiles = 'var selectedFiles = ' + JSON.stringify(dialogResult.data) + ';'
+				selectedFilesScript = 'var selectedFiles = ' + JSON.stringify(dialogResult.data) + ';'
 		}
 
-		var script = selectedFiles + evalFileScript(scriptPath);
+		var script = selectedFilesScript + evalFileScript(scriptPath);
 
 		setTimeout(function() { CSLibrary.evalScript(script) }, 100);
 	});
-
 }
 
-function getUseBridgeSelectionScript()
-{
+function getUseBridgeSelectionScript() {
 	return script = evalFileScript('Tych Panel/Tych Panel Only/bridge.jsx')
 		+ 'useBridgeSelection;';
 }
 
-function evalFileScript(path)
-{
+function evalFileScript(path) {
 	return 'var scriptFile = new File(app.path + \'/Presets/Scripts/' + path + '\');'
 		+ '$.evalFile(scriptFile, 30000);';
 }
 
-function evalScript(path)
-{
+function evalScript(path) {
 	CSLibrary.evalScript(evalFileScript(path));
 }
 
 /**
  * This function will be called when PP's theme color been changed.
  */
-function changeTheme(event)
-{
+function changeTheme(event) {
 	var hostEnv = CSLibrary.getHostEnvironment();
 	var bgColor = toHex(hostEnv.appSkinInfo.panelBackgroundColor);
 
@@ -96,13 +131,11 @@ function changeTheme(event)
 
 }
 
-function toHex(color)
-{
+function toHex(color) {
     var red      = Math.round(color.color.red);
     var green    = Math.round(color.color.green);
     var blue     = Math.round(color.color.blue);
     var alpha    = Math.round(color.color.alpha);
 
     return '#' + red.toString(16) + green.toString(16) + blue.toString(16);
-}
-
+}