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.

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 class="input-group">
        ...

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

// 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;");
    //$(".com-chilipeppr-elem-dragdrop").popover('show');
    dd.init();
    dd.bind("body", null);
    console.log(dd);
    
    var testLoadGcodePubSub = function() {
        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() {
        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);
    }
    //testLoadGcodePubSub();
    testLoadGcodeFromUrlPubSub();

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-elem-dragdrop", ["chilipeppr_ready"], function () {
    console.log("Inside of define for com-chilipeppr-elem-dragdrop");
    return {
        id: "com-chilipeppr-elem-dragdrop",
        url: "http://fiddle.jshell.net/chilipeppr/Z9F6G/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/Z9F6G/",
        name: "Element / Drag Drop",
        desc: "An element that presents a drag and drop icon that allows files to be dragged onto it. A pubsub event called /com-chilipeppr-elem-dragdrop/ondropped is published when the drop is complete. The contents of the file are passed in the pubsub call so different widgets/elements can consume the contents of the file.",
        publish: {
            "/com-chilipeppr-elem-dragdrop/ondropped":"When the file is dropped. Payload contains the file.",
            "/com-chilipeppr-elem-dragdrop/ondragover":"When the mouse is hovering over drop area so...