From dca72442d95fc1ea50773ebca33986f1e37f6b76 Mon Sep 17 00:00:00 2001 From: mappu Date: Sun, 8 Oct 2017 13:45:55 +1300 Subject: [PATCH] redesign --- static/index.html | 8 +- static/sdk.js | 245 +++++++++++++++++++++++++-------------------- static/widget.html | 80 ++++++++++++--- 3 files changed, 205 insertions(+), 128 deletions(-) diff --git a/static/index.html b/static/index.html index d8ab245..91d49c0 100644 --- a/static/index.html +++ b/static/index.html @@ -22,12 +22,8 @@ html, body { diff --git a/static/sdk.js b/static/sdk.js index 1afdc6e..e99723b 100644 --- a/static/sdk.js +++ b/static/sdk.js @@ -1,124 +1,153 @@ -"use strict"; +;"use strict"; -/** - * contented_SupportsDrop returns whether drag-and-drop is supported by this - * browser. - * - * @return bool - */ -function contented_SupportsDrop() { - return ('ondrop' in window && 'FormData' in window && 'FileReader' in window); -} +var contented = (function($) { + "use strict"; -/** - * contented_EnableDrop enables drag-and-drop upload on a DOM element. - * 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 - */ -function contented_EnableDrop(element, baseURL, onUploaded) { - - // + /** + * contented_SupportsDrop returns whether drag-and-drop is supported by this + * browser. + * + * @return bool + */ + var contented_SupportsDrop = function() { + return ('ondrop' in window && 'FormData' in window && 'FileReader' in window); + } - // Create a new div for ourselves on top of the existing area - $.get(baseURL + "/about", function(ret) { - $("title").text( ret.AppTitle ); + /** + * contented_EnableDrop enables drag-and-drop upload on a DOM element. + * 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 = ""; - 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 = $("
").html(widgetHtml); - $f.find(".contented-extratext").text(extraText); + var extraText = ""; + if (ret.MaxUploadBytes > 0) { + extraText = " (max " + Math.floor(ret.MaxUploadBytes / (1024*1024)) + " MiB)"; + } - $f.find(".contented-upload-type").click(function() { - $f.find(".contented-upload-type").removeClass("contented-upload-type-active"); - $(this).addClass("contented-upload-type-active"); + $.get(baseURL + "/widget.html", function(widgetHtml) { + + var $f = $("
").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() { - 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"); - }); - - 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(); - }); - } - -}; + return { + 'supportsDrop': contented_SupportsDrop, + 'enableDrop': contented_EnableDrop + }; + +})(jQuery); diff --git a/static/widget.html b/static/widget.html index 36fda86..6f8b8f8 100644 --- a/static/widget.html +++ b/static/widget.html @@ -13,6 +13,12 @@ position:relative; } +.contented .contented-close { + position: absolute; + top: 12px; + right: 12px; + cursor: pointer; +} .contented .contented-upload-type-selector { display:block; margin-bottom: 1em; @@ -38,23 +44,62 @@ .contented.is-dragging { 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 { display:none; } +.contented-if-paste { + height:100%; +} .contented-upload-if.contented-active { display:block; } .contented textarea { - position:absolute; - top: 60px; - bottom: 10px; - left: 10px; - width: calc(100% - 28px); 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%; }
+
+ + + +
+
@@ -76,16 +121,23 @@
-
- -
+
+
+ +
-
-
- -
+
+
+ +
-
- +
+ +
+ +
+ +
+
\ No newline at end of file