Element / Drag Drop

This is a file drag drop element that can be used in multiple widgets or workspaces. It has a UI element to indicate the drag drop is available. It also publishes events to the rest of the app when the file is loaded.

by Stewart Allen

HTML

<script src="http://www.chilipeppr.com/js/require.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="com-chilipeppr-elem-dragdrop well dropdown pull-left">
    <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" data-container="body" data-toggle="popover" data-placement="auto" data-trigger="hover" data-title="Drag and Drop" data-content="Drag a Gcode file onto your browser window to load it."><span class="glyphicon glyphicon-file"></span><span class="glyphicon glyphicon-share-alt" style="margin-left:-2px;color:#666666;"></span> <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="javascript:" class="com-chilipeppr-elem-dragdrop-loadlogo">Load ChiliPeppr Logo Gcode (mm)</a></li>
        <li><a href="javascript:" class="com-chilipeppr-elem-dragdrop-loadlogoinch">Load ChiliPeppr Logo Gcode (inch)</a></li>
        <li><a href="javascript:" class="com-chilipeppr-elem-dragdrop-loadcirclediamondsquare">Load Circle Diamond Square Calibration Gcode (mm)</a></li>
        <li class="divider"></li>
        <li><a href="javascript:" class="com-chilipeppr-elem-dragdrop-download">Download/Save Gcode File</a></li>
        <li class="divider"></li>
        <li role="presentation" class="dropdown-header">Open Gcode From URL</li>
        <li style="padding:0 20px;">
            <div class="input-group">
                <input type="url" class="form-control url-load" placeholder="Enter URL" style="" />
                <span class="input-group-btn">
                    <button class="btn btn-default url-load-go" type="button">Go!</button>
                </span>
            </div>
            <!-- /input-group -->
        </li>
        <!-- <li class="divider"></li> -->
        <li role="presentation" class="dropdown-header">Open Gcode From Clipboard</li>
        <li style="padding:0 20px;">
            <div...

CSS

.lastModifyDate {
    color: silver;
}

.com-chilipeppr-elem-dragdrop.well {
    /* padding: 0px 20px; */
    /* background-color: #428bca; */
    padding: 0;
    margin: 0;
}

.com-chilipeppr-elem-dragdrop.hover {
    background-color: #428bca;
}

JavaScript

// -----( begin test )-----
cprequire_test(["inline:com-chilipeppr-elem-dragdrop"], function(dd) {
    console.log(">>>>>>> test running of " + dd.id);
    console.log(window.location);
    console.log("testing drag drop");

    $("body").height("300px;");
    dd.init();
    dd.bind("body", null);
    console.log(dd);

    var testLoadGcodePubSub = function() {
		return;
        setTimeout(function() {
            chilipeppr.publish("/com-chilipeppr-elem-dragdrop/loadGcodeDoNotCreateRecentFileEntry", {
                gcode: "G0 X10 Y10\n",
                name: "my test file no recent entry",
                lastModified: new Date()
            });
        }, 5000);
    }
    var testLoadGcodeFromUrlPubSub = function() {
		return;
        setTimeout(function() {
            chilipeppr.publish(
                "/com-chilipeppr-elem-dragdrop/loadGcodeFromUrl",
                "http://www.shapeoko.com/wiki/images/0/09/Circle-diamond-square-50-45-40mm.txt");
        }, 5000);
    }
    testLoadGcodeFromUrlPubSub();

});
// -----( end test )-----

cpdefine("inline:com-chilipeppr-elem-dragdrop", ["chilipeppr_ready"], function() {
    var IDB = self.indexedDB || self.mozIndexedDB || self.webkitIndexedDB || self.msIndexedDB,
        IRR = self.IDBKeyRange,
        SDB = null,
		SDBNAME = "CPRecentFiles", 
		ONDROP = "/com-chilipeppr-elem-dragdrop/ondropped",
		ONDRAGOVER = "/com-chilipeppr-elem-dragdrop/ondragover",
		ONDRAGLEAVE = "/com-chilipeppr-elem-dragdrop/ondragleave",
		ONDRAGDONE = "/com-chilipeppr-elem-dragdrop/ondragdone",
		RECENTMETAKEY = "/com-chilipeppr-elem-dragdrop-recent"
		;

    console.log(">>>>>>> Inside of define for com-chilipeppr-elem-dragdrop");

    return {
        id: "com-chilipeppr-elem-dragdrop",
        url: "http://fiddle.jshell.net/chilipeppr/v1L0jcnq/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/v1L0jcnq/",
        name: "Element / Drag Drop",
        desc: "An element that presents a drag and drop icon that allows...