Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

this just in: drag events are very broken

This commit is contained in:
riking 2015-05-16 21:04:57 -07:00
parent fbc06d044f
commit 30abc91a5c
3 changed files with 56 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/javascripts/discourse/components/json-file-uploader.js.es6
View File

@ -3,6 +3,7 @@ export default Em.Component.extend({
fileInput: null, fileInput: null,
loading: false, loading: false,
expectedRootObjectName: null, expectedRootObjectName: null,
hover: 0,
classNames: ['json-uploader'], classNames: ['json-uploader'],
@ -17,15 +18,29 @@ export default Em.Component.extend({
self.fileSelected(this.files); self.fileSelected(this.files);
}); });
const $fileSelect = $this.find('.fileSelect'); const $dragContainer = $this.find('.jsfu-shade-container');
$fileSelect.on('dragover dragenter', function(e) { $this.on('dragover', function(e) {
if (e.preventDefault) e.preventDefault(); if (e.preventDefault) e.preventDefault();
//self.set('hover', true);
return false; return false;
}); });
$fileSelect.on('drop', function(e) { $this.on('dragenter', function(e) {
if (e.preventDefault) e.preventDefault();
console.log('dragenter');
self.set('hover', self.get('hover') + 1);
return false;
});
$this.on('dragleave', function(e) {
if (e.preventDefault) e.preventDefault();
console.log('dragleave');
self.set('hover', self.get('hover') - 1);
return false;
});
$this.on('drop', function(e) {
if (e.preventDefault) e.preventDefault(); if (e.preventDefault) e.preventDefault();
self.set('hover', 0);
self.fileSelected(e.dataTransfer.files); self.fileSelected(e.dataTransfer.files);
return false; return false;
}); });

4
app/assets/javascripts/discourse/templates/components/json-file-uploader.hbs
View File

@ -1,3 +1,4 @@
<div class="jsfu-shade-container">
<div class="jsfu-file"> <div class="jsfu-file">
<input id="js-file-input" type="file" style="display:none;" accept={{accept}}> <input id="js-file-input" type="file" style="display:none;" accept={{accept}}>
{{d-button class="fileSelect" action="selectFile" class="" icon="upload" label="upload_selector.select_file"}} {{d-button class="fileSelect" action="selectFile" class="" icon="upload" label="upload_selector.select_file"}}
@ -7,4 +8,5 @@
<div class="jsfu-paste"> <div class="jsfu-paste">
{{textarea value=value}} {{textarea value=value}}
</div> </div>
<div class="jsfu-shade {{if hover '' 'hidden'}}"><span class="text">{{fa-icon "upload"}}</span></div>
</div>

26
app/assets/stylesheets/common/base/modal.scss
View File

@ -139,7 +139,33 @@
height: 300px; height: 300px;
} }
.json-uploader { .json-uploader {
.jsfu-shade-container {
display: table-row; display: table-row;
width: 100%;
height: 100%;
position: relative;
}
.jsfu-shade {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
.text {
color: rgb(255,255,255);
position: absolute;
top: 40%;
font-size: 36px;
text-align: center;
line-height: 38px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
}
.jsfu-file { .jsfu-file {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;