Skip to content
Browse files

added a dragdrop sample project

  • Loading branch information...
1 parent fd26e82 commit ac31d70d0a35df557754ee80a40df4de786b01ca @mikedeboer mikedeboer committed Jan 14, 2011
View
4 examples/dragdrop/appinfo.json
@@ -0,0 +1,4 @@
+{
+ "name": "Chromeless DragDrop",
+ "version": "0.1"
+}
View
139 examples/dragdrop/async.js
@@ -0,0 +1,139 @@
+/*
+ * See the NOTICE file distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 2.1 of
+ * the License, or (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this software; if not, write to the Free
+ * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
+ * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
+ *
+ */
+
+if (typeof async == "undefined")
+ async = {};
+
+/**
+ * @author Fabian Jakobs
+ * @version %I%, %G%
+ * @since 1.0
+ *
+ * @namespace async
+ *
+ */
+
+/**
+ * Perform an async function in serial on each of the list items
+ *
+ * @param {Array} list
+ * @param {Function} async async function of the form function(item, callback)
+ * @param {Function} callback function of the form function(error), which is
+ * called after all items have been processed
+ */
+async.forEach = function(list, async, callback) {
+ var i = 0;
+ var len = list.length;
+
+ if (!len) return callback(null, []);
+
+ async(list[i], function handler(err) {
+ if (err) return callback(err);
+ i++;
+
+ if (i < len) {
+ async(list[i], handler, i);
+ } else {
+ callback(null);
+ }
+ }, i);
+};
+
+/**
+ * Perform an async function in serial while the function 'condition' (first
+ * argument) evaluates to true.
+ *
+ * @param {Function} condition function that returns a Boolean, which determines
+ * if the loop should continue
+ * @param {Function} async async function of the form function(iteration_no, callback)
+ * @param {Function} callback function of the form function(error), which is
+ * called after all items have been processed
+ */
+async.whileLoop = function(condition, async, callback) {
+ var i = 0;
+ async(i, function handler(err) {
+ if (err)
+ return callback ? callback(err, i) : null;
+
+ ++i;
+ if (condition(i))
+ async(i, handler);
+ else
+ callback && callback(null, i);
+ });
+};
+
+/**
+ * Map each element from the list to the result returned by the async mapper
+ * function. The mapper takes an element from the list and a callback as arguments.
+ * After completion the mapper has to call the callback with an (optional) error
+ * object as first and the result of the map as second argument. After all
+ * list elements have been processed the last callback is called with the mapped
+ * array as second argument.
+ *
+ * @param {Array} list
+ * @param {Function} mapper function of the form function(item, next)
+ * @param {Function} callback function of the form function(error, result)
+ */
+async.map = function(list, mapper, callback) {
+ var i = 0;
+ var len = list.length;
+
+ if (!len) return callback(null, []);
+ var map = [];
+
+ async(list[i], function handler(err, value) {
+ if (err) return callback(err);
+
+ map[i] = value;
+ i++;
+
+ if (i < len) {
+ async(list[i], handler);
+ } else {
+ callback(null, map);
+ }
+ });
+};
+
+
+/**
+ * Chains an array of functions. Each of the functions except the last one must
+ * have excatly one 'callback' argument, which has to be called after the functions has
+ * finished. If the callback fails if has to pass a non null error object as
+ * first argument to the callback.
+ *
+ * @param {Array} funcs
+ */
+async.chain = function(funcs) {
+ var i = 0;
+ var len = funcs.length;
+
+ function next() {
+ var f = funcs[i++];
+ if (i == len)
+ f()
+ else
+ f(next)
+ }
+
+ next();
+}
View
BIN examples/dragdrop/images/cool.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN examples/dragdrop/images/love.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN examples/dragdrop/images/question.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
184 examples/dragdrop/index.html
@@ -0,0 +1,184 @@
+<html>
+ <head>
+ <title>Cloud9</title>
+ <style type="text/css" media="screen">
+ body {
+ background-color: #999;
+ padding: 0;
+ margin: 0;
+ }
+
+ #browserContentArea {
+ -moz-box-orient: vertical;
+ display: -moz-box;
+ -moz-box-flex: 1;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ }
+
+ #outer {
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ display: -moz-box;
+ -moz-box-orient: vertical;
+ }
+
+ #listDraggables {
+ display: -moz-inline-box;
+ -moz-box-flex: 1;
+ }
+
+ #listContents {
+ display: -moz-inline-box;
+ -moz-box-flex: 1;
+ }
+
+ #txtContents {
+ display: -moz-inline-box;
+ -moz-box-flex: 2;
+ height: 350px;
+ }
+
+ div.draggable {
+ background-color: #77b8b8;
+ cursor: pointer;
+ width: 130px;
+ height: 30px;
+ padding: 4px;
+ margin: 4px;
+ overflow: visible;
+ text-align: center;
+ vertical-align: middle;
+ }
+
+ div.draggable img {
+ width: 48px;
+ height: 48px;
+ }
+
+ div.draggable:hover {
+ background-color: #336262;
+ }
+ </style>
+ <script type="text/javascript" src="async.js"></script>
+ <script type="text/javascript">
+ function inspect(o) {
+ var s = "";
+ for (var i in o)
+ s += i + ": " + o[i] + "\n";
+ console.log(s);
+ }
+
+ function cancel(e) {
+ if (e.preventDefault) e.preventDefault(); // required by FF + Safari
+ // e.dataTransfer.dropEffect = "copy"; // tells the browser what drop effect is allowed here
+ return false; // required by IE
+ }
+
+ function entities(s) {
+ var e = {
+ '"' : "&quot;",
+ "&" : "&amp;",
+ "<" : "&lt;",
+ ">" : "&gt;"
+ };
+ return s.replace(/["&<>]/g, function (m) {
+ return e[m];
+ });
+ }
+
+ function handleDragStart(e) {
+ console.log("Starting drag...");
+ e.dataTransfer.setData("text/plain", "Text to drag");
+ var image = document.createElement("img");
+ image.setAttribute("border", "0");
+ image.setAttribute("src", "images/question.png");
+ image.setAttribute("width", "48");
+ image.setAttribute("height", "48");
+ e.dataTransfer.setDragImage(image, 25, 25);
+ }
+
+ function handleDragEnd(e) {
+ //inspect(e);
+ }
+
+ function start() {
+ var drop = document.getElementById("browserContentArea"),
+ list = document.getElementById("listContents"),
+ text = document.getElementById("txtContents");
+
+ // setup draggables:
+ var dragItems = document.querySelectorAll("[draggable=true]");
+
+ for (var i = 0, l = dragItems.length; i < l; ++i) {
+ dragItems[i].addEventListener("dragstart", handleDragStart, true);
+ dragItems[i].addEventListener("dragend", handleDragEnd, true);
+ }
+
+ // Tells the browser that we *can* drop on this target
+ drop.addEventListener("dragover", cancel, false);
+ drop.addEventListener("dragenter", cancel, false);
+
+ drop.addEventListener("drop", function (e) {
+ if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
+
+ if (!e.dataTransfer.types.contains("application/x-moz-file"))
+ return;
+
+ // clear out the original text
+ list.innerHTML = "<ul></ul>";
+
+ var li = document.createElement("li");
+
+ li.innerHTML = "<ul>";
+
+ async.forEach(e.dataTransfer.types, function (type, nextType) {
+ if (type != "application/x-moz-file")
+ return nextType();
+
+ async.forEach(e.dataTransfer.files, function(file, nextFile) {
+ li.innerHTML += "<li>" + entities(file.name) + "</li>"
+ + "<li>" + file.size + " bytes</li>"
+
+ var reader = new FileReader();
+ reader.onloadend = function(e) {
+ text.value = e.target.result;
+ //li.innerHTML += '<li>' + entities(e.target.result + ' (content-type: ' + type + ')') + '</li>';
+ nextFile();
+ };
+ reader.readAsText(file);
+ }, nextType);
+ }, function() {
+ li.innerHTML += "</ul>";
+
+ var ul = list.getElementsByTagName("ul")[0];
+
+ if (ul.firstChild) {
+ ul.insertBefore(li, ul.firstChild);
+ } else {
+ ul.appendChild(li);
+ }
+ });
+
+ return false;
+ }, false);
+ }
+ </script>
+ </head>
+ <body onload="start()">
+ <div id="outer">
+ <div id="browserContentArea">
+ <div id="listDraggables">
+ <div class="draggable" draggable="true">
+ <img src="images/cool.png" border="0" alt="Drag Me!" />
+ Drag Me!
+ </div>
+ </div>
+ <div id="listContents"> </div>
+ <textarea id="txtContents"></textarea>
+ </div>
+ </div>
+ </body>
+</html>

0 comments on commit ac31d70

Please sign in to comment.
Something went wrong with that request. Please try again.