Wrap the content in a div with title and comments; add some style
This commit is contained in:
parent
7ffe87a70c
commit
3e0d783454
37
plemp.js
37
plemp.js
|
@ -94,40 +94,39 @@ app.get('/draggables/:id', function(req, res) {
|
||||||
var drag = draggables[drag_id];
|
var drag = draggables[drag_id];
|
||||||
var default_style = "left:" + drag.left + "px;top:" + drag.top + "px;";
|
var default_style = "left:" + drag.left + "px;top:" + drag.top + "px;";
|
||||||
var mime_type = drag.mime.split("/")
|
var mime_type = drag.mime.split("/")
|
||||||
|
var title = drag.name || drag.title || 'Title not set';
|
||||||
|
var content;
|
||||||
switch (mime_type[0]) {
|
switch (mime_type[0]) {
|
||||||
case "image":
|
case "image":
|
||||||
res.send('<img class="draggable" id="' + drag_id + '" ' +
|
content = '<img src="' + file_name + '"></img>';
|
||||||
'style="' + default_style + '" src="' + file_name + '">' +
|
|
||||||
'</img>');
|
|
||||||
break;
|
break;
|
||||||
case "video":
|
case "video":
|
||||||
res.send('<video class="draggable" id="' + drag_id + '" ' +
|
content = '<video src="' + file_name + '" controls="true"></video>';
|
||||||
'style="' + default_style + '" src="' + file_name +
|
|
||||||
'" controls="true"></video>');
|
|
||||||
break;
|
break;
|
||||||
case "audio":
|
case "audio":
|
||||||
res.send('<audio class="draggable" id="' + drag_id + '" ' +
|
content = '<audio src="' + file_name + '" controls="true"></audio>';
|
||||||
'style="' + default_style + ';height=80px;" src="' +
|
|
||||||
file_name +
|
|
||||||
'" controls="true"></audio>');
|
|
||||||
break;
|
break;
|
||||||
case "text":
|
case "text":
|
||||||
file_contents = fs.readFileSync("public/upload/" + drag_id);
|
file_contents = fs.readFileSync("public/upload/" + drag_id);
|
||||||
res.send('<div class="draggable" id="' + drag_id + '" ' +
|
content = '<pre>' + file_contents + '</pre>';
|
||||||
'style="' + default_style + '"><pre>' + file_contents +
|
|
||||||
'</pre></div>');
|
|
||||||
break;
|
break;
|
||||||
case 'application': // FIXME: treat as code for now, but it is probably wrong
|
case 'application': // FIXME: treat as code for now, but it is probably wrong
|
||||||
file_contents = fs.readFileSync("public/upload/" + drag_id);
|
file_contents = fs.readFileSync("public/upload/" + drag_id);
|
||||||
res.send('<div class="draggable" id="' + drag_id + '" ' +
|
content = '<pre><code class="' + drag.type + '">' + file_contents +
|
||||||
'style="' + default_style + '"><pre><code>' + file_contents +
|
'</code></pre>';
|
||||||
'</code></pre></div>');
|
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
res.send('<div class="draggable" id="' + drag_id + '" ' +
|
content = '<span>Unknown type: ' + mime_type + '</span>';
|
||||||
'style="' + default_style + '">Unknown type: ' +
|
|
||||||
mime_type + '</div>');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Wrap the content in a div with title and comments.
|
||||||
|
res.send('<div class="draggable" id="' + drag_id + '" ' +
|
||||||
|
'style="' + default_style + '">' +
|
||||||
|
'<div class="header"><div class="title">' + title +
|
||||||
|
'<span class="edit">(edit)</span>' +
|
||||||
|
'<div class="delete">X</div></div>' +
|
||||||
|
'</div>' + content + '<div class="comments"></div>' +
|
||||||
|
'</div>');
|
||||||
});
|
});
|
||||||
|
|
||||||
// The position save controller: access through AJAX request by the main
|
// The position save controller: access through AJAX request by the main
|
||||||
|
|
|
@ -61,10 +61,59 @@ pre {
|
||||||
|
|
||||||
.draggable {
|
.draggable {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
background: white;
|
||||||
|
border: thin solid #888;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable div,
|
||||||
|
.draggable img,
|
||||||
|
.draggable audio,
|
||||||
|
.draggable video,
|
||||||
|
.draggable pre {
|
||||||
|
width: 400px;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border: thin solid #888;
|
}
|
||||||
background: white;
|
|
||||||
|
.draggable pre {
|
||||||
|
width: 388px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable .header {
|
||||||
|
padding-bottom: 3px;
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable .header .title {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable .header .title .edit {
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable .header .delete {
|
||||||
|
width: auto;
|
||||||
|
float: right;
|
||||||
|
padding: 0px 2px;
|
||||||
|
border: thin solid black;
|
||||||
|
color: #cccccc;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable .header .edit:hover,
|
||||||
|
.draggable .header .delete:hover {
|
||||||
|
color: #000000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable .comments {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue