redesign
This commit is contained in:
parent
7451d39d66
commit
dca72442d9
@ -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>
|
||||||
|
|||||||
245
static/sdk.js
245
static/sdk.js
@ -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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|||||||
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user