Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add attribute to only allow file drop in the drop zone. #46

Closed
wants to merge 2 commits into from
Closed

Add attribute to only allow file drop in the drop zone. #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59a5e16
Add attribute to only allow file drop in the drop zone.
zwilson2 Jul 27, 2017
e1bb4a6
Add new langterms if dropZoneOnly is true
zwilson2 Jul 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 30 additions & 12 deletions d2l-file-uploader.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,14 @@
value: false,
reflectToAttribute: true
},
/**
* Whether a file can be dropped anywhere on the screen or just on the dropzone.
*/
dropZoneOnly: {
type: Boolean,
value: false,
reflectToAttribute: true
},
/**
* Collection of uploaded files, as [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects.
*/
Expand All @@ -250,30 +258,40 @@
*/
_message: {
type: String,
computed: '_computeMessage(localize, multiple)'
computed: '_computeMessage(localize, multiple, dropZoneOnly)'
},
/**
* The element that is being used as the drop zone.
*/
_dropZone: {
type: Object
}
},

attached: function() {

this.loadResources(this.resolveUrl('locales.json'));

this.listen(document, 'dragover', '__onDragOver');
this.listen(document, 'dragleave', '__onDragLeave');
this.listen(document, 'dragend', '__onDragEnd');
this.listen(document, 'drop', '__onDrop');
this._dropZone = this.dropZoneOnly ? this.querySelector('.d2l-file-uploader-drop-zone') : document;
this.listen(this._dropZone, 'dragover', '__onDragOver');
this.listen(this._dropZone, 'dragleave', '__onDragLeave');
this.listen(this._dropZone, 'dragend', '__onDragEnd');
this.listen(this._dropZone, 'drop', '__onDrop');

},

},

detached: function() {
this.unlisten(document, 'dragover', '__onDragOver');
this.unlisten(document, 'dragleave', '__onDragLeave');
this.unlisten(document, 'dragend', '__onDragEnd');
this.unlisten(document, 'drop', '__onDrop');
this.unlisten(this._dropZone, 'dragover', '__onDragOver');
this.unlisten(this._dropZone, 'dragleave', '__onDragLeave');
this.unlisten(this._dropZone, 'dragend', '__onDragEnd');
this.unlisten(this._dropZone, 'drop', '__onDrop');
},

_computeMessage: function(localize, multiple) {
_computeMessage: function(localize, multiple, dropZoneOnly) {
var term = multiple ? 'multiple_file_upload_text' : 'single_file_upload_text';
if (dropZoneOnly) {
term = multiple ? 'multiple_file_upload_text_drop_zone' : 'single_file_upload_text_drop_zone';
}
return localize(term);
},

Expand Down
12 changes: 12 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,18 @@ <h2>Feedback</h2>
</template>
</demo-snippet>

<h2>Drop Zone Only</h2>
<demo-snippet>
<template>
<d2l-file-uploader drop-zone-only></d2l-file-uploader>
</template>
</demo-snippet>
<demo-snippet>
<template>
<d2l-file-uploader multiple drop-zone-only></d2l-file-uploader>
</template>
</demo-snippet>

</div>
</body>
</html>
24 changes: 16 additions & 8 deletions locales.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,36 @@
{
"en": {
"single_file_upload_text": "Drag and drop a file anywhere on this screen or",
"multiple_file_upload_text": "Drag and drop files anywhere on this screen or",
"single_file_upload_text": "Drag and drop a file anywhere on this screen or",
"single_file_upload_text_drop_zone": "Drag and drop a file anywhere in this area or",
"multiple_file_upload_text": "Drag and drop files anywhere on this screen or",
"multiple_file_upload_text_drop_zone": "Drag and drop files anywhere in this area or",
"browse": "browse",
"browse_files": "Browse Files",
"choose_one_file_to_upload": "Choose one file to upload"
},
"en-US": {
"single_file_upload_text": "Drag and drop a file anywhere on this screen or",
"multiple_file_upload_text": "Drag and drop files anywhere on this screen or",
"single_file_upload_text": "Drag and drop a file anywhere on this screen or",
"single_file_upload_text_drop_zone": "Drag and drop a file anywhere in this area or",
"multiple_file_upload_text": "Drag and drop files anywhere on this screen or",
"multiple_file_upload_text_drop_zone": "Drag and drop files anywhere in this area or",
"browse": "browse",
"browse_files": "Browse Files",
"choose_one_file_to_upload": "Choose one file to upload"
},
"en-CA": {
"single_file_upload_text": "Drag and drop a file anywhere on this screen or",
"multiple_file_upload_text": "Drag and drop files anywhere on this screen or",
"single_file_upload_text": "Drag and drop a file anywhere on this screen or",
"single_file_upload_text_drop_zone": "Drag and drop a file anywhere in this area or",
"multiple_file_upload_text": "Drag and drop files anywhere on this screen or",
"multiple_file_upload_text_drop_zone": "Drag and drop files anywhere in this area or",
"browse": "browse",
"browse_files": "Browse Files",
"choose_one_file_to_upload": "Choose one file to upload"
},
"en-GB": {
"single_file_upload_text": "Drag and drop a file anywhere on this screen or",
"multiple_file_upload_text": "Drag and drop files anywhere on this screen or",
"single_file_upload_text": "Drag and drop a file anywhere on this screen or",
"single_file_upload_text_drop_zone": "Drag and drop a file anywhere in this area or",
"multiple_file_upload_text": "Drag and drop files anywhere on this screen or",
"multiple_file_upload_text_drop_zone": "Drag and drop files anywhere in this area or",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we end up going with this solution, we'll need to send these off for translation. Another idea (if we want to do this) would be to use more generic text that covers both cases.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup. I just wanted to make sure that all the changes needing to be made were in if this is something we do. This definitely should be looked over by a designer to properly word this.

"browse": "browse",
"browse_files": "Browse Files",
"choose_one_file_to_upload": "Choose one file to upload"
Expand Down
62 changes: 62 additions & 0 deletions test/d2l-file-uploader.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@
<d2l-file-uploader multiple></d2l-file-uploader>
</template>
</test-fixture>
<test-fixture id="dropZoneOnly">
<template>
<d2l-file-uploader drop-zone-only></d2l-file-uploader>
</template>
</test-fixture>
<test-fixture id="dropZoneOnlyMultiple">
<template>
<d2l-file-uploader drop-zone-only multiple></d2l-file-uploader>
</template>
</test-fixture>
<test-fixture id="label">
<template>
<d2l-file-uploader label="file uploader label"></d2l-file-uploader>
Expand Down Expand Up @@ -119,6 +129,58 @@

});

describe('dropZoneOnly', function() {

describe('dropZoneOnly-false', function() {

beforeEach(
fixtureAndWaitForLocalization('single')
);

it('should default "dropZoneOnly" to false', function() {
expect(elem.dropZoneOnly).to.be.false;
expect(elem.hasAttribute('drop-zone-only')).to.be.false;
expect(elem._dropZone).to.equal(document);
expect(elem._message).to.equal('Drag and drop a file anywhere on this screen or');
});

});

describe('dropZoneOnly-true', function() {

beforeEach(
fixtureAndWaitForLocalization('dropZoneOnly')
);

it('should default "dropZoneOnly" to true', function() {
expect(elem.dropZoneOnly).to.be.true;
expect(elem.hasAttribute('drop-zone-only')).to.be.true;
expect(elem._dropZone).to.equal(elem.querySelector('.d2l-file-uploader-drop-zone'));
expect(elem._message).to.equal('Drag and drop a file anywhere in this area or');
});

});

describe('dropZoneOnly-true multiple-true', function() {

beforeEach(
fixtureAndWaitForLocalization('dropZoneOnlyMultiple')
);

it('should default "dropZoneOnly" to true and "multiple" to true', function() {
expect(elem.multiple).to.be.true;
expect(elem.hasAttribute('multiple')).to.be.true;
expect(elem.$$('input').multiple).to.be.true;
expect(elem.dropZoneOnly).to.be.true;
expect(elem.hasAttribute('drop-zone-only')).to.be.true;
expect(elem._dropZone).to.equal(elem.querySelector('.d2l-file-uploader-drop-zone'));
expect(elem._message).to.equal('Drag and drop files anywhere in this area or');
});

});

});

describe('label', function() {

beforeEach(
Expand Down