sdk: inline the widget html definition
This commit is contained in:
parent
e8dd95a830
commit
f13618fef1
166
static/sdk.js
166
static/sdk.js
@ -57,6 +57,170 @@
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var widgetHtml = `
|
||||||
|
<style type="text/css">
|
||||||
|
.contented {
|
||||||
|
box-sizing:border-box;
|
||||||
|
text-align: center;
|
||||||
|
border: 8px dashed lightgrey;
|
||||||
|
padding: 12px;
|
||||||
|
background:white; /* not transparent */
|
||||||
|
|
||||||
|
text-overflow:hidden;
|
||||||
|
overflow:auto;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
.contented .contented-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.contented .contented-upload-type-selector {
|
||||||
|
display:block;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.contented .contented-upload-type {
|
||||||
|
display:inline-block;
|
||||||
|
opacity:0.2;
|
||||||
|
transition:opacity linear 0.1s;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
.contented .contented-upload-type:hover {
|
||||||
|
opacity:0.5;
|
||||||
|
transition:opacity linear 0s;
|
||||||
|
}
|
||||||
|
.contented .contented-upload-type svg {
|
||||||
|
width:36px;
|
||||||
|
height:36px;
|
||||||
|
}
|
||||||
|
.contented .contented-upload-type.contented-upload-type-active {
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
.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, .contented-if-drawing {
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
.contented-upload-if.contented-active {
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
.contented textarea {
|
||||||
|
resize: none;
|
||||||
|
width:100%;
|
||||||
|
height:calc(100% - 1em - 15px);
|
||||||
|
box-sizing:border-box;
|
||||||
|
}
|
||||||
|
.contented-progress-bar {
|
||||||
|
display: block;
|
||||||
|
width:90%;
|
||||||
|
margin:0.5em auto 0 auto;
|
||||||
|
|
||||||
|
height:16px;
|
||||||
|
border-radius:8px;
|
||||||
|
background:lightgrey;
|
||||||
|
position:relative;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
.contented-progress-element {
|
||||||
|
position:absolute;
|
||||||
|
background:darkgreen;
|
||||||
|
left:0;
|
||||||
|
width:0%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="contented">
|
||||||
|
|
||||||
|
<div class="contented-close">
|
||||||
|
<svg 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 contented-upload-type-active" data-upload-type="drag" title="Drag and drop">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path fill="#000000" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contented-upload-type" data-upload-type="file" title="Multiple files">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path fill="#000000" d="M15,7H20.5L15,1.5V7M8,0H16L22,6V18A2,2 0 0,1 20,20H8C6.89,20 6,19.1 6,18V2A2,2 0 0,1 8,0M4,4V22H20V24H4A2,2 0 0,1 2,22V4H4Z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contented-upload-type" data-upload-type="paste" title="Paste">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path fill="#000000" d="M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contented-upload-type" data-upload-type="drawing" title="Drawing">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path fill="#000000" d="M16.84,2.73C16.45,2.73 16.07,2.88 15.77,3.17L13.65,5.29L18.95,10.6L21.07,8.5C21.67,7.89 21.67,6.94 21.07,6.36L17.9,3.17C17.6,2.88 17.22,2.73 16.84,2.73M12.94,6L4.84,14.11L7.4,14.39L7.58,16.68L9.86,16.85L10.15,19.41L18.25,11.3M4.25,15.04L2.5,21.73L9.2,19.94L8.96,17.78L6.65,17.61L6.47,15.29" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contented-content-area">
|
||||||
|
<div class="contented-upload-if contented-if-drag contented-active">
|
||||||
|
<label>Drop files or Ctrl-V to upload <span class="contented-extratext"></span></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contented-upload-if contented-if-file">
|
||||||
|
<label>Select files to upload <span class="contented-extratext"></span></label><br>
|
||||||
|
<input class="contented-file-selector" type="file" multiple>
|
||||||
|
<button class="contented-file-upload">Upload »</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contented-upload-if contented-if-paste">
|
||||||
|
<textarea placeholder="Paste content here"></textarea>
|
||||||
|
<button class="contented-paste-upload">Upload »</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contented-upload-if contented-if-drawing">
|
||||||
|
<div class="contented-drawing-area"></div>
|
||||||
|
</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>
|
||||||
|
`;
|
||||||
|
|
||||||
var initArea = function (elementSelector, onUploaded, onClose) {
|
var initArea = function (elementSelector, onUploaded, onClose) {
|
||||||
onUploaded = onUploaded || function () { };
|
onUploaded = onUploaded || function () { };
|
||||||
onClose = onClose || function () { };
|
onClose = onClose || function () { };
|
||||||
@ -76,7 +240,7 @@
|
|||||||
extraText = " (max " + formatBytes(ret.MaxUploadBytes) + ")";
|
extraText = " (max " + formatBytes(ret.MaxUploadBytes) + ")";
|
||||||
}
|
}
|
||||||
|
|
||||||
$.get(contented.baseURL + "widget.html", function (widgetHtml) {
|
|
||||||
|
|
||||||
var $f = $("<div>").html(widgetHtml);
|
var $f = $("<div>").html(widgetHtml);
|
||||||
$f.find(".contented-extratext").text(extraText);
|
$f.find(".contented-extratext").text(extraText);
|
||||||
|
|||||||
@ -1,161 +0,0 @@
|
|||||||
<style type="text/css">
|
|
||||||
.contented {
|
|
||||||
box-sizing:border-box;
|
|
||||||
text-align: center;
|
|
||||||
border: 8px dashed lightgrey;
|
|
||||||
padding: 12px;
|
|
||||||
background:white; /* not transparent */
|
|
||||||
|
|
||||||
text-overflow:hidden;
|
|
||||||
overflow:auto;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
.contented .contented-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
right: 12px;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.contented .contented-upload-type-selector {
|
|
||||||
display:block;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.contented .contented-upload-type {
|
|
||||||
display:inline-block;
|
|
||||||
opacity:0.2;
|
|
||||||
transition:opacity linear 0.1s;
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
.contented .contented-upload-type:hover {
|
|
||||||
opacity:0.5;
|
|
||||||
transition:opacity linear 0s;
|
|
||||||
}
|
|
||||||
.contented .contented-upload-type svg {
|
|
||||||
width:36px;
|
|
||||||
height:36px;
|
|
||||||
}
|
|
||||||
.contented .contented-upload-type.contented-upload-type-active {
|
|
||||||
opacity:1;
|
|
||||||
}
|
|
||||||
.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, .contented-if-drawing {
|
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
.contented-upload-if.contented-active {
|
|
||||||
display:block;
|
|
||||||
}
|
|
||||||
.contented textarea {
|
|
||||||
resize: none;
|
|
||||||
width:100%;
|
|
||||||
height:calc(100% - 1em - 15px);
|
|
||||||
box-sizing:border-box;
|
|
||||||
}
|
|
||||||
.contented-progress-bar {
|
|
||||||
display: block;
|
|
||||||
width:90%;
|
|
||||||
margin:0.5em auto 0 auto;
|
|
||||||
|
|
||||||
height:16px;
|
|
||||||
border-radius:8px;
|
|
||||||
background:lightgrey;
|
|
||||||
position:relative;
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
.contented-progress-element {
|
|
||||||
position:absolute;
|
|
||||||
background:darkgreen;
|
|
||||||
left:0;
|
|
||||||
width:0%;
|
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="contented">
|
|
||||||
|
|
||||||
<div class="contented-close">
|
|
||||||
<svg 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 contented-upload-type-active" data-upload-type="drag" title="Drag and drop">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path fill="#000000" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contented-upload-type" data-upload-type="file" title="Multiple files">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path fill="#000000" d="M15,7H20.5L15,1.5V7M8,0H16L22,6V18A2,2 0 0,1 20,20H8C6.89,20 6,19.1 6,18V2A2,2 0 0,1 8,0M4,4V22H20V24H4A2,2 0 0,1 2,22V4H4Z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contented-upload-type" data-upload-type="paste" title="Paste">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path fill="#000000" d="M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contented-upload-type" data-upload-type="drawing" title="Drawing">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<path fill="#000000" d="M16.84,2.73C16.45,2.73 16.07,2.88 15.77,3.17L13.65,5.29L18.95,10.6L21.07,8.5C21.67,7.89 21.67,6.94 21.07,6.36L17.9,3.17C17.6,2.88 17.22,2.73 16.84,2.73M12.94,6L4.84,14.11L7.4,14.39L7.58,16.68L9.86,16.85L10.15,19.41L18.25,11.3M4.25,15.04L2.5,21.73L9.2,19.94L8.96,17.78L6.65,17.61L6.47,15.29" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contented-content-area">
|
|
||||||
<div class="contented-upload-if contented-if-drag contented-active">
|
|
||||||
<label>Drop files or Ctrl-V to upload <span class="contented-extratext"></span></label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contented-upload-if contented-if-file">
|
|
||||||
<label>Select files to upload <span class="contented-extratext"></span></label><br>
|
|
||||||
<input class="contented-file-selector" type="file" multiple>
|
|
||||||
<button class="contented-file-upload">Upload »</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contented-upload-if contented-if-paste">
|
|
||||||
<textarea placeholder="Paste content here"></textarea>
|
|
||||||
<button class="contented-paste-upload">Upload »</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contented-upload-if contented-if-drawing">
|
|
||||||
<div class="contented-drawing-area"></div>
|
|
||||||
</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>
|
|
||||||
Loading…
Reference in New Issue
Block a user