Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-13 01:15:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

changed the drag and drop image upload, closes #108

Browse Source
This commit is contained in:
Baris Soner Usakli
2013-07-24 15:03:49 -04:00
parent 1f8f61d1d8
commit 6865eb9f0f
2 changed files with 40 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/css/style.less
View File

@@ -549,26 +549,34 @@ body .navbar .nodebb-inline-block {
} }
#imagedrop { #imagedrop {
background: rgba(64, 64, 64, 0.95); text-align:center;
padding: 0.5em; color:white;
display: block; position: absolute;
width: 90%; top: 0px;
min-height:25px; left: 0px;
margin: 1em auto; width: 100%;
resize: none; height:230px;
color:white; line-height:230px;
font-size:20px; font-size:20px;
vertical-align: middle;
div { }
margin-right:10px;
} #imagelist {
span { position: absolute;
line-height:20px; bottom: 5px;
float:left; left: 0px;
} padding-left:2em;
button {
padding-left:5px; div {
} margin-right:5px;
}
span {
line-height:20px;
float:left;
}
button {
padding-left:5px;
}
} }
} }
} }

24
public/src/modules/composer.js
View File

@@ -10,6 +10,7 @@ define(['taskbar'], function(taskbar) {
function loadFile(file) { function loadFile(file) {
var reader = new FileReader(); var reader = new FileReader();
var dropDiv = $('#imagedrop'); var dropDiv = $('#imagedrop');
var imagelist = $('#imagelist');
var uuid = dropDiv.parents('[data-uuid]').attr('data-uuid'); var uuid = dropDiv.parents('[data-uuid]').attr('data-uuid');
var posts = composer.posts[uuid]; var posts = composer.posts[uuid];
@@ -33,15 +34,11 @@ define(['taskbar'], function(taskbar) {
if(index !== -1) { if(index !== -1) {
posts.images.splice(index, 1); posts.images.splice(index, 1);
} }
if(!dropDiv.children().length) {
dropDiv.html('Drag and drop images here');
}
}); });
imageLabel.append(closeButton); imageLabel.append(closeButton);
dropDiv.append(imageLabel); imagelist.append(imageLabel);
dropDiv.hide();
}); });
reader.readAsDataURL(file); reader.readAsDataURL(file);
@@ -73,9 +70,6 @@ define(['taskbar'], function(taskbar) {
var dt = e.dataTransfer; var dt = e.dataTransfer;
var files = dt.files; var files = dt.files;
if(!posts.images.length)
drop.html('');
for (var i=0; i<files.length; i++) { for (var i=0; i<files.length; i++) {
loadFile(files[i]); loadFile(files[i]);
} }
@@ -107,8 +101,11 @@ define(['taskbar'], function(taskbar) {
'<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' + '<button class="btn" data-action="discard" tabIndex="5"><i class="icon-remove"></i> Discard</button>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div id="imagedrop" style="display:none;"></div>'+ '<div style="position:relative;">'+
'<textarea tabIndex="2"></textarea>' + '<div id="imagedrop" class=""><div>Drag and Drop Images Here</div></div>'+
'<textarea tabIndex="2"></textarea>' +
'<div id="imagelist"></div>'+
'</div>'+
'</div>'; '</div>';
document.body.insertBefore(composer.postContainer, taskbar); document.body.insertBefore(composer.postContainer, taskbar);
@@ -246,9 +243,12 @@ define(['taskbar'], function(taskbar) {
btnRect = taskbarBtn.getBoundingClientRect(), btnRect = taskbarBtn.getBoundingClientRect(),
taskbarRect = document.getElementById('taskbar').getBoundingClientRect(), taskbarRect = document.getElementById('taskbar').getBoundingClientRect(),
dropDiv = $(composer.postContainer).find('#imagedrop'), dropDiv = $(composer.postContainer).find('#imagedrop'),
imagelist = $(composer.postContainer).find('#imagelist'),
windowRect, leftPos; windowRect, leftPos;
dropDiv.html('Drag and drop images here').hide(); dropDiv.hide();
imagelist.empty();
composer.postContainer.style.display = 'block'; composer.postContainer.style.display = 'block';
windowRect = postWindowEl.getBoundingClientRect(); windowRect = postWindowEl.getBoundingClientRect();