Skip to content
This repository
Browse code

added a dragdrop sample project

  • Loading branch information...
commit ac31d70d0a35df557754ee80a40df4de786b01ca 1 parent fd26e82
Mike de Boer mikedeboer authored
4 examples/dragdrop/appinfo.json
... ... @@ -0,0 +1,4 @@
  1 +{
  2 + "name": "Chromeless DragDrop",
  3 + "version": "0.1"
  4 +}
139 examples/dragdrop/async.js
... ... @@ -0,0 +1,139 @@
  1 +/*
  2 + * See the NOTICE file distributed with this work for additional
  3 + * information regarding copyright ownership.
  4 + *
  5 + * This is free software; you can redistribute it and/or modify it
  6 + * under the terms of the GNU Lesser General Public License as
  7 + * published by the Free Software Foundation; either version 2.1 of
  8 + * the License, or (at your option) any later version.
  9 + *
  10 + * This software is distributed in the hope that it will be useful,
  11 + * but WITHOUT ANY WARRANTY; without even the implied warranty of
  12 + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  13 + * Lesser General Public License for more details.
  14 + *
  15 + * You should have received a copy of the GNU Lesser General Public
  16 + * License along with this software; if not, write to the Free
  17 + * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
  18 + * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  19 + *
  20 + */
  21 +
  22 +if (typeof async == "undefined")
  23 + async = {};
  24 +
  25 +/**
  26 + * @author Fabian Jakobs
  27 + * @version %I%, %G%
  28 + * @since 1.0
  29 + *
  30 + * @namespace async
  31 + *
  32 + */
  33 +
  34 +/**
  35 + * Perform an async function in serial on each of the list items
  36 + *
  37 + * @param {Array} list
  38 + * @param {Function} async async function of the form function(item, callback)
  39 + * @param {Function} callback function of the form function(error), which is
  40 + * called after all items have been processed
  41 + */
  42 +async.forEach = function(list, async, callback) {
  43 + var i = 0;
  44 + var len = list.length;
  45 +
  46 + if (!len) return callback(null, []);
  47 +
  48 + async(list[i], function handler(err) {
  49 + if (err) return callback(err);
  50 + i++;
  51 +
  52 + if (i < len) {
  53 + async(list[i], handler, i);
  54 + } else {
  55 + callback(null);
  56 + }
  57 + }, i);
  58 +};
  59 +
  60 +/**
  61 + * Perform an async function in serial while the function 'condition' (first
  62 + * argument) evaluates to true.
  63 + *
  64 + * @param {Function} condition function that returns a Boolean, which determines
  65 + * if the loop should continue
  66 + * @param {Function} async async function of the form function(iteration_no, callback)
  67 + * @param {Function} callback function of the form function(error), which is
  68 + * called after all items have been processed
  69 + */
  70 +async.whileLoop = function(condition, async, callback) {
  71 + var i = 0;
  72 + async(i, function handler(err) {
  73 + if (err)
  74 + return callback ? callback(err, i) : null;
  75 +
  76 + ++i;
  77 + if (condition(i))
  78 + async(i, handler);
  79 + else
  80 + callback && callback(null, i);
  81 + });
  82 +};
  83 +
  84 +/**
  85 + * Map each element from the list to the result returned by the async mapper
  86 + * function. The mapper takes an element from the list and a callback as arguments.
  87 + * After completion the mapper has to call the callback with an (optional) error
  88 + * object as first and the result of the map as second argument. After all
  89 + * list elements have been processed the last callback is called with the mapped
  90 + * array as second argument.
  91 + *
  92 + * @param {Array} list
  93 + * @param {Function} mapper function of the form function(item, next)
  94 + * @param {Function} callback function of the form function(error, result)
  95 + */
  96 +async.map = function(list, mapper, callback) {
  97 + var i = 0;
  98 + var len = list.length;
  99 +
  100 + if (!len) return callback(null, []);
  101 + var map = [];
  102 +
  103 + async(list[i], function handler(err, value) {
  104 + if (err) return callback(err);
  105 +
  106 + map[i] = value;
  107 + i++;
  108 +
  109 + if (i < len) {
  110 + async(list[i], handler);
  111 + } else {
  112 + callback(null, map);
  113 + }
  114 + });
  115 +};
  116 +
  117 +
  118 +/**
  119 + * Chains an array of functions. Each of the functions except the last one must
  120 + * have excatly one 'callback' argument, which has to be called after the functions has
  121 + * finished. If the callback fails if has to pass a non null error object as
  122 + * first argument to the callback.
  123 + *
  124 + * @param {Array} funcs
  125 + */
  126 +async.chain = function(funcs) {
  127 + var i = 0;
  128 + var len = funcs.length;
  129 +
  130 + function next() {
  131 + var f = funcs[i++];
  132 + if (i == len)
  133 + f()
  134 + else
  135 + f(next)
  136 + }
  137 +
  138 + next();
  139 +}
BIN  examples/dragdrop/images/cool.png
BIN  examples/dragdrop/images/love.png
BIN  examples/dragdrop/images/question.png
184 examples/dragdrop/index.html
... ... @@ -0,0 +1,184 @@
  1 +<html>
  2 + <head>
  3 + <title>Cloud9</title>
  4 + <style type="text/css" media="screen">
  5 + body {
  6 + background-color: #999;
  7 + padding: 0;
  8 + margin: 0;
  9 + }
  10 +
  11 + #browserContentArea {
  12 + -moz-box-orient: vertical;
  13 + display: -moz-box;
  14 + -moz-box-flex: 1;
  15 + width: 100%;
  16 + height: 100%;
  17 + overflow: auto;
  18 + }
  19 +
  20 + #outer {
  21 + margin: 0;
  22 + width: 100%;
  23 + height: 100%;
  24 + display: -moz-box;
  25 + -moz-box-orient: vertical;
  26 + }
  27 +
  28 + #listDraggables {
  29 + display: -moz-inline-box;
  30 + -moz-box-flex: 1;
  31 + }
  32 +
  33 + #listContents {
  34 + display: -moz-inline-box;
  35 + -moz-box-flex: 1;
  36 + }
  37 +
  38 + #txtContents {
  39 + display: -moz-inline-box;
  40 + -moz-box-flex: 2;
  41 + height: 350px;
  42 + }
  43 +
  44 + div.draggable {
  45 + background-color: #77b8b8;
  46 + cursor: pointer;
  47 + width: 130px;
  48 + height: 30px;
  49 + padding: 4px;
  50 + margin: 4px;
  51 + overflow: visible;
  52 + text-align: center;
  53 + vertical-align: middle;
  54 + }
  55 +
  56 + div.draggable img {
  57 + width: 48px;
  58 + height: 48px;
  59 + }
  60 +
  61 + div.draggable:hover {
  62 + background-color: #336262;
  63 + }
  64 + </style>
  65 + <script type="text/javascript" src="async.js"></script>
  66 + <script type="text/javascript">
  67 + function inspect(o) {
  68 + var s = "";
  69 + for (var i in o)
  70 + s += i + ": " + o[i] + "\n";
  71 + console.log(s);
  72 + }
  73 +
  74 + function cancel(e) {
  75 + if (e.preventDefault) e.preventDefault(); // required by FF + Safari
  76 + // e.dataTransfer.dropEffect = "copy"; // tells the browser what drop effect is allowed here
  77 + return false; // required by IE
  78 + }
  79 +
  80 + function entities(s) {
  81 + var e = {
  82 + '"' : "&quot;",
  83 + "&" : "&amp;",
  84 + "<" : "&lt;",
  85 + ">" : "&gt;"
  86 + };
  87 + return s.replace(/["&<>]/g, function (m) {
  88 + return e[m];
  89 + });
  90 + }
  91 +
  92 + function handleDragStart(e) {
  93 + console.log("Starting drag...");
  94 + e.dataTransfer.setData("text/plain", "Text to drag");
  95 + var image = document.createElement("img");
  96 + image.setAttribute("border", "0");
  97 + image.setAttribute("src", "images/question.png");
  98 + image.setAttribute("width", "48");
  99 + image.setAttribute("height", "48");
  100 + e.dataTransfer.setDragImage(image, 25, 25);
  101 + }
  102 +
  103 + function handleDragEnd(e) {
  104 + //inspect(e);
  105 + }
  106 +
  107 + function start() {
  108 + var drop = document.getElementById("browserContentArea"),
  109 + list = document.getElementById("listContents"),
  110 + text = document.getElementById("txtContents");
  111 +
  112 + // setup draggables:
  113 + var dragItems = document.querySelectorAll("[draggable=true]");
  114 +
  115 + for (var i = 0, l = dragItems.length; i < l; ++i) {
  116 + dragItems[i].addEventListener("dragstart", handleDragStart, true);
  117 + dragItems[i].addEventListener("dragend", handleDragEnd, true);
  118 + }
  119 +
  120 + // Tells the browser that we *can* drop on this target
  121 + drop.addEventListener("dragover", cancel, false);
  122 + drop.addEventListener("dragenter", cancel, false);
  123 +
  124 + drop.addEventListener("drop", function (e) {
  125 + if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
  126 +
  127 + if (!e.dataTransfer.types.contains("application/x-moz-file"))
  128 + return;
  129 +
  130 + // clear out the original text
  131 + list.innerHTML = "<ul></ul>";
  132 +
  133 + var li = document.createElement("li");
  134 +
  135 + li.innerHTML = "<ul>";
  136 +
  137 + async.forEach(e.dataTransfer.types, function (type, nextType) {
  138 + if (type != "application/x-moz-file")
  139 + return nextType();
  140 +
  141 + async.forEach(e.dataTransfer.files, function(file, nextFile) {
  142 + li.innerHTML += "<li>" + entities(file.name) + "</li>"
  143 + + "<li>" + file.size + " bytes</li>"
  144 +
  145 + var reader = new FileReader();
  146 + reader.onloadend = function(e) {
  147 + text.value = e.target.result;
  148 + //li.innerHTML += '<li>' + entities(e.target.result + ' (content-type: ' + type + ')') + '</li>';
  149 + nextFile();
  150 + };
  151 + reader.readAsText(file);
  152 + }, nextType);
  153 + }, function() {
  154 + li.innerHTML += "</ul>";
  155 +
  156 + var ul = list.getElementsByTagName("ul")[0];
  157 +
  158 + if (ul.firstChild) {
  159 + ul.insertBefore(li, ul.firstChild);
  160 + } else {
  161 + ul.appendChild(li);
  162 + }
  163 + });
  164 +
  165 + return false;
  166 + }, false);
  167 + }
  168 + </script>
  169 + </head>
  170 + <body onload="start()">
  171 + <div id="outer">
  172 + <div id="browserContentArea">
  173 + <div id="listDraggables">
  174 + <div class="draggable" draggable="true">
  175 + <img src="images/cool.png" border="0" alt="Drag Me!" />
  176 + Drag Me!
  177 + </div>
  178 + </div>
  179 + <div id="listContents"> </div>
  180 + <textarea id="txtContents"></textarea>
  181 + </div>
  182 + </div>
  183 + </body>
  184 +</html>

0 comments on commit ac31d70

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