This commit is contained in:
mappu 2017-10-08 13:45:55 +13:00
parent 7451d39d66
commit dca72442d9
3 changed files with 205 additions and 128 deletions

View File

@ -22,12 +22,8 @@ html, body {
<script type="text/javascript" src="/sdk.js"></script> <script type="text/javascript" src="/sdk.js"></script>
<script type="text/javascript"> <script type="text/javascript">
"use strict"; "use strict";
$(function() { contented.enableDrop( $("#surrogate-area")[0], "", function(itm) {
console.log(itm);
contented_EnableDrop( $("#surrogate-area")[0], "", function(itm) {
console.log(itm);
});
}); });
</script> </script>
</body> </body>

View File

@ -1,124 +1,153 @@
"use strict"; ;"use strict";
/** var contented = (function($) {
* contented_SupportsDrop returns whether drag-and-drop is supported by this "use strict";
* browser.
*
* @return bool
*/
function contented_SupportsDrop() {
return ('ondrop' in window && 'FormData' in window && 'FileReader' in window);
}
/** /**
* contented_EnableDrop enables drag-and-drop upload on a DOM element. * contented_SupportsDrop returns whether drag-and-drop is supported by this
* The class "is-dragover" will be toggled on the target element. * browser.
* *
* @param DOMElement element Drop target * @return bool
* @param string baseURL Base URL of the contented server */
* @param Function onUploaded Called with a property object for every uploaded file var contented_SupportsDrop = function() {
*/ return ('ondrop' in window && 'FormData' in window && 'FileReader' in window);
function contented_EnableDrop(element, baseURL, onUploaded) { }
// <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" />
// Create a new div for ourselves on top of the existing area /**
$.get(baseURL + "/about", function(ret) { * contented_EnableDrop enables drag-and-drop upload on a DOM element.
$("title").text( ret.AppTitle ); * The class "is-dragover" will be toggled on the target element.
*
* @param DOMElement element Drop target
* @param string baseURL Base URL of the contented server
* @param Function onUploaded Called with a property object for every uploaded file
* @param Function onClose Called when the widget should be destroyed
*/
var contented_EnableDrop = function(element, baseURL, onUploaded, onClose) {
onUploaded = onUploaded || function(){};
onClose = onClose || function(){};
var extraText = ""; // <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" />
if (ret.MaxUploadBytes > 0) {
extraText = " (max " + Math.floor(ret.MaxUploadBytes / (1024*1024)) + " MiB)";
}
$.get(baseURL + "/widget.html", function(widgetHtml) { // Create a new div for ourselves on top of the existing area
$.get(baseURL + "/about", function(ret) {
$("title").text( ret.AppTitle );
var $f = $("<div>").html(widgetHtml); var extraText = "";
$f.find(".contented-extratext").text(extraText); if (ret.MaxUploadBytes > 0) {
extraText = " (max " + Math.floor(ret.MaxUploadBytes / (1024*1024)) + " MiB)";
}
$f.find(".contented-upload-type").click(function() { $.get(baseURL + "/widget.html", function(widgetHtml) {
$f.find(".contented-upload-type").removeClass("contented-upload-type-active");
$(this).addClass("contented-upload-type-active"); var $f = $("<div>").html(widgetHtml);
$f.find(".contented-extratext").text(extraText);
var ourClose = function() {
$f.remove(); // remove from dom
onClose(); // upstream close
};
$f.find(".contented-close").click(function() {
ourClose();
})
var setType = function(type) {
$f.find(".contented-upload-type").removeClass("contented-upload-type-active");
$f.find(".contented-upload-type[data-upload-type=" + type + "]").addClass("contented-upload-type-active");
$f.find(".contented-upload-if").removeClass("contented-active");
$f.find(".contented-if-" + type).addClass("contented-active");
};
$f.find(".contented-upload-type").click(function() {
setType( $(this).attr('data-upload-type') );
});
if (!contented_SupportsDrop()) {
// switch default
setType('file');
}
//
var $element = $(element);
var offset = $element.offset();
$f.css({
'position': 'absolute',
'left': offset.left + "px",
'top': offset.top + "px",
'width': $element.width() + "px",
'min-width': $element.width() + "px",
'max-width': $element.width() + "px",
'height': $element.height() + "px",
'min-height': $element.height() + "px",
'max-height': $element.height() + "px"
});
$f.find('.contented').on('dragover dragenter', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('is-dragging');
});
$f.find('.contented').on('dragleave dragend', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('is-dragging');
});
$f.find('.contented').on('drag', function(e) {
input.files = event.originalEvent.dataTransfer.files;
refreshCaption();
setType("progress");
// Ajax uploader
// TODO
form.submit();
});
$("body").append($f);
$f.find(".contented-upload-if").removeClass("contented-active");
$f.find(".contented-if-" + $(this).attr('data-upload-type')).addClass("contented-active");
}); });
var $element = $(element);
var offset = $element.offset();
$f.css({
'position': 'absolute',
'left': offset.left + "px",
'top': offset.top + "px",
'width': $element.width() + "px",
'min-width': $element.width() + "px",
'max-width': $element.width() + "px",
'height': $element.height() + "px",
'min-height': $element.height() + "px",
'max-height': $element.height() + "px"
});
$("body").append($f);
}); });
}
}); /*
var onLoad = function() {
var form = document.getElementById("form");
var input = document.getElementById("form-upload");
var label = document.getElementById("form-label");
var makeCaptionText = function( files ) {
return files.length > 1 ? ( input.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', files.length ) : files[ 0 ].name;
};
var refreshCaption = function() {
onStateChange( makeCaptionText( input.files ) );
};
input.addEventListener('change', refreshCaption);
//
document.getElementById("classic-uploader").addEventListener("click", function() {
form.classList.remove("supports-drag");
});
// Handle uploads
}
form.addEventListener('drop', function(e) {
});
};
*/
var onLoad = function() { return {
var form = document.getElementById("form"); 'supportsDrop': contented_SupportsDrop,
var input = document.getElementById("form-upload"); 'enableDrop': contented_EnableDrop
var label = document.getElementById("form-label"); };
var makeCaptionText = function( files ) { })(jQuery);
return files.length > 1 ? ( input.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', files.length ) : files[ 0 ].name;
};
var refreshCaption = function() {
onStateChange( makeCaptionText( input.files ) );
};
input.addEventListener('change', refreshCaption);
//
document.getElementById("classic-uploader").addEventListener("click", function() {
form.classList.remove("supports-drag");
});
if (contented_SupportsDrop()) {
// Handle CSS
form.classList.add('supports-drag');
var handleDragState = function(event_name, classEnabled) {
form.addEventListener(event_name, function(e) {
e.preventDefault();
e.stopPropagation();
if (classEnabled) {
form.classList.add( 'is-dragover' );
} else {
form.classList.remove( 'is-dragover' );
}
});
}
handleDragState('dragover', true);
handleDragState('dragenter', true);
handleDragState('dragleave', false);
handleDragState('dragend', false);
handleDragState('drop', false);
// Handle uploads
form.addEventListener('drop', function(e) {
input.files = e.dataTransfer.files; // the files that were dropped
refreshCaption();
form.submit();
});
}
};

View File

@ -13,6 +13,12 @@
position:relative; position:relative;
} }
.contented .contented-close {
position: absolute;
top: 12px;
right: 12px;
cursor: pointer;
}
.contented .contented-upload-type-selector { .contented .contented-upload-type-selector {
display:block; display:block;
margin-bottom: 1em; margin-bottom: 1em;
@ -38,23 +44,62 @@
.contented.is-dragging { .contented.is-dragging {
background: lightblue; background: lightblue;
} }
.contented-content-area {
position:absolute;
top: 60px;
bottom: 10px;
left: 10px;
width: calc(100% - 20px);
/* Prevent blur under translateY */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.contented-content-area > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.contented-upload-if { .contented-upload-if {
display:none; display:none;
} }
.contented-if-paste {
height:100%;
}
.contented-upload-if.contented-active { .contented-upload-if.contented-active {
display:block; display:block;
} }
.contented textarea { .contented textarea {
position:absolute;
top: 60px;
bottom: 10px;
left: 10px;
width: calc(100% - 28px);
resize: none; resize: none;
width:100%;
height:100%;
padding: 0;
box-sizing:border-box;
}
.contented-progress-bar {
display: block;
width:90%;
height:16px;
border-radius:4px;
background:lightgrey;
position:relative;
}
.contented-progress-element {
position:absolute;
background:darkgreen;
left:0;
width:0%;
} }
</style> </style>
<div class="contented"> <div class="contented">
<div class="contented-close">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
</div>
<div class="contented-upload-type-selector"> <div class="contented-upload-type-selector">
<div class="contented-upload-type contented-upload-type-active" data-upload-type="drag" title="Drag and drop"> <div class="contented-upload-type contented-upload-type-active" data-upload-type="drag" title="Drag and drop">
@ -76,16 +121,23 @@
</div> </div>
</div> </div>
<div class="contented-upload-if contented-if-drag contented-active"> <div class="contented-content-area">
<label>Drop files to upload <span class="contented-extratext"></span></label> <div class="contented-upload-if contented-if-drag contented-active">
</div> <label>Drop files to upload <span class="contented-extratext"></span></label>
</div>
<div class="contented-upload-if contented-if-file"> <div class="contented-upload-if contented-if-file">
<label>Select files to upload <span class="contented-extratext"></span></label><br> <label>Select files to upload <span class="contented-extratext"></span></label><br>
<input name="f" type="file" multiple> <input name="f" type="file" multiple>
</div> </div>
<div class="contented-upload-if contented-if-paste"> <div class="contented-upload-if contented-if-paste">
<textarea name="paste-content"></textarea> <textarea name="paste-content"></textarea>
</div>
<div class="contented-upload-if contented-if-progress">
<label>...</label>
<div class="contented-progress-bar"><div class="contented-progress-element"></div></div>
</div>
</div> </div>
</div> </div>