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 Riley Porter

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</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">
                <textarea class="form-control paste-load" placeholder="Paste Gcode Here" style="font-size:10px;" rows="3"></textarea>
                <span class="input-group-btn" style="vertical-align: top;">
                    <button class="btn btn-default paste-load-go" style="" type="button">Go!</button>
                </span>
            </div><!-- /input-group -->
        </li>
        <li class="divider"></li>
        <li...

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);

} /*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 you can hilite/react. Empty payload.",
            "/com-chilipeppr-elem-dragdrop/ondragleave": "When mouse stops hovering so you can remove hilites. Empty payload.",
            "/com-chilipeppr-elem-dragdrop/ondragdone" : "When user drops the file onto browser so you can remove hilites. Empty payload. Don't confuse this with ondropped which is the pubsub that actually contains file that was dropped."
        },
        subscribe: null,
        hasHtml: true,
        hasCss: true,
        hasJs: true,
        dropArea: null,
        txtDomElemSelector: null,
        init: function () {
            console.log("init called");
            $(".com-chilipeppr-elem-dragdrop...