Skip to content

Commit

Permalink
Remove fileDownload component. Just use the mixin
Browse files Browse the repository at this point in the history
  • Loading branch information
@lfarrell
lfarrell committed Jul 25, 2023
1 parent bc88267 commit 21a286c
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 353 deletions.
2 changes: 2 additions & 0 deletions static/js/vue-cdr-access/src/assets/common-styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ a.button.is-link span {
background-color: #1A698C;
color: white;
font-family: 'Open Sans', sans-serif;
height: 48px;
}

.image-download-options button:hover,
Expand All @@ -59,4 +60,5 @@ a.button.is-link span {

.image-download-options .fa-angle-down {
margin-left: 8px;
pointer-events: none;
}
91 changes: 0 additions & 91 deletions static/js/vue-cdr-access/src/components/full_record/fileDownload.vue
View file

This file was deleted.

77 changes: 0 additions & 77 deletions static/js/vue-cdr-access/src/components/full_record/fileList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,80 +239,7 @@ export default {
}
return { markDeleted: markedForDeletion, restricted: restrictedAccess };
},
showDropdownList(e) {
// Close any currently open dropdowns
this.closeDropdownLists(e);
if (e.target.id.startsWith('dcr-download')) {
let drop_down = e.target.parentElement.parentElement.querySelector('.dropdown-menu');
if (drop_down !== null) {
drop_down.setAttribute('aria-hidden', 'false');
drop_down.classList.add('show-list');
}
}
},
closeDropdownLists() {
document.querySelectorAll('.show-list').forEach(element => {
element.setAttribute('aria-hidden', 'true');
element.classList.remove('show-list');
});
},
downloadButtonHtml(brief_object) {
if (this.showNonImageDownload(brief_object)) {
return `<div class="actionlink download">
<a class="download button action" href="/content/${brief_object.id}?dl=true"><i class="fa fa-download"></i> ${this.$t('full_record.download')}</a>
</div>`;
} else if (this.showImageDownload(brief_object)) {
let html = `<div class="dropdown actionlink download image-download-options">
<div class="dropdown-trigger">
<button id="dcr-download-${brief_object.id}" class="button download-images" aria-haspopup="true" aria-controls="dropdown-menu">
${this.$t('full_record.download')} <i class="fas fa-angle-down" aria-hidden="true"></i>
</button>
</div>
<div class="dropdown-menu table-downloads" id="dropdown-menu" role="menu" aria-hidden="true">
<div class="dropdown-content">`;
if (this.validSizeOption(brief_object, 800)) {
html += `<a href="${this.imgDownloadLink(brief_object.id, '800')}" class="dropdown-item">${this.$t('full_record.small') } JPG (800px)</a>`;
}
if (this.validSizeOption(brief_object, 1600)) {
html += `<a href="${this.imgDownloadLink(brief_object.id, '1600')}" class="dropdown-item">${this.$t('full_record.medium') } JPG (1600px)</a>`;
}
if (this.validSizeOption(brief_object, 2500)) {
html += `<a href="${this.imgDownloadLink(brief_object.id, '2500')}" class="dropdown-item">${this.$t('full_record.large') } JPG (2500px)</a>`;
}
html += `<a href="${this.imgDownloadLink(brief_object.id, 'full')}" class="dropdown-item">${this.$t('full_record.full_size')} JPG</a>`;
html += '<hr class="dropdown-divider">';
html += `<a href="/indexablecontent/${brief_object.id}?dl=true" class="dropdown-item">${this.$t('full_record.original_file')}</a>`;
html += '</div>'
html += '</div>'
return html;
} else {
return `<div class="dropdown actionlink download image-download-options">
<button class="button download-images" title="${this.$t('full_record.download_unavailable')}" disabled>
<i class="fa fa-download"></i> ${this.$t('full_record.download')}
</button>
</div>`;
}
}
},
mounted() {
document.addEventListener('click', this.showDropdownList);
document.addEventListener('keyup', this.closeDropdownLists);
},
unmounted() {
document.removeEventListener('click', this.showDropdownList);
document.removeEventListener('keyup', this.closeDropdownLists);
}
}
</script>
Expand Down Expand Up @@ -399,10 +326,6 @@ export default {
background-color: #084b6b;
color: white;
}
.fa-angle-down {
pointer-events: none;
}
}
}
Expand Down
25 changes: 17 additions & 8 deletions static/js/vue-cdr-access/src/components/full_record/restrictedContent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@
</div>
<template v-if="recordData.resourceType === 'File'">
<template v-if="hasPermission(recordData, 'viewOriginal')">
<file-download :download-link="downloadLink"
:brief-object="recordData.briefObject"></file-download>
<div class="header-button" v-html="downloadButtonHtml(recordData.briefObject)"></div>
<div class="actionlink">
<a class="button view action" :href="recordData.dataFileUrl">
<i class="fa fa-search" aria-hidden="true"></i> View</a>
Expand All @@ -29,15 +28,13 @@
</template>

<script>
import fileDownload from '@/components/full_record/fileDownload.vue';
import fileDownloadUtils from '../../mixins/fileDownloadUtils';
import fullRecordUtils from '../../mixins/fullRecordUtils';
export default {
name: 'restrictedContent',
components: {fileDownload},
mixins: [fullRecordUtils],
mixins: [fileDownloadUtils, fullRecordUtils],
props: {
recordData: Object
Expand All @@ -49,15 +46,27 @@ export default {
.button {
white-space: normal;
}
.restricted-access .actionlink {
display: block;
}
.header-button {
display: inline;
}
@media (max-width: 768px) {
.actionlink {
text-align: center;
text-align: left;
margin: auto;
justify-content: center;
justify-content: left;
width: 99%;
}
.header-button {
display: block;
margin-bottom: 3px;
text-align: left;
}
}
</style>
79 changes: 79 additions & 0 deletions static/js/vue-cdr-access/src/mixins/fileDownloadUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,14 @@ export default {
mixins: [permissionUtils],

methods: {
showNonImageDownload(brief_object) {
return this.hasPermission(brief_object, 'viewOriginal') &&
!brief_object.format.includes('Image') && this.getOriginalFile(brief_object) !== undefined;
},

getOriginalFile(brief_object) {
const original_file = brief_object.datastream.find(file => file.startsWith('original_file'));
console.log(original_file)
if (original_file === undefined) {
return undefined;
}
Expand All @@ -30,6 +36,79 @@ export default {

validSizeOption(brief_object, size) {
return size <= this.largestImageEdge(brief_object);
},

downloadButtonHtml(brief_object) {
if (this.showNonImageDownload(brief_object)) {
return `<div class="actionlink download">
<a class="download button action" href="/content/${brief_object.id}?dl=true"><i class="fa fa-download"></i> ${this.$t('full_record.download')}</a>
</div>`;
} else if (this.showImageDownload(brief_object)) {
let html = `<div class="dropdown actionlink download image-download-options">
<div class="dropdown-trigger">
<button id="dcr-download-${brief_object.id}" class="button download-images" aria-haspopup="true" aria-controls="dropdown-menu">
${this.$t('full_record.download')} <i class="fas fa-angle-down" aria-hidden="true"></i>
</button>
</div>
<div class="dropdown-menu table-downloads" id="dropdown-menu" role="menu" aria-hidden="true">
<div class="dropdown-content">`;

if (this.validSizeOption(brief_object, 800)) {
html += `<a href="${this.imgDownloadLink(brief_object.id, '800')}" class="dropdown-item">${this.$t('full_record.small') } JPG (800px)</a>`;
}
if (this.validSizeOption(brief_object, 1600)) {
html += `<a href="${this.imgDownloadLink(brief_object.id, '1600')}" class="dropdown-item">${this.$t('full_record.medium') } JPG (1600px)</a>`;
}
if (this.validSizeOption(brief_object, 2500)) {
html += `<a href="${this.imgDownloadLink(brief_object.id, '2500')}" class="dropdown-item">${this.$t('full_record.large') } JPG (2500px)</a>`;
}


html += `<a href="${this.imgDownloadLink(brief_object.id, 'full')}" class="dropdown-item">${this.$t('full_record.full_size')} JPG</a>`;
html += '<hr class="dropdown-divider">';
html += `<a href="/indexablecontent/${brief_object.id}?dl=true" class="dropdown-item">${this.$t('full_record.original_file')}</a>`;

html += '</div>'
html += '</div>'

return html;
} else {
return `<div class="dropdown actionlink image-download-options">
<button class="button download-images" title="${this.$t('full_record.download_unavailable')}" disabled>
<i class="fa fa-download"></i> ${this.$t('full_record.download')}
</button>
</div>`;
}
},

showDropdownList(e) {
// Close any currently open dropdowns
this.closeDropdownLists(e);

if (e.target.id.startsWith('dcr-download')) {
let drop_down = e.target.parentElement.parentElement.querySelector('.dropdown-menu');
if (drop_down !== null) {
drop_down.setAttribute('aria-hidden', 'false');
drop_down.classList.add('show-list');
}
}
},

closeDropdownLists() {
document.querySelectorAll('.show-list').forEach(element => {
element.setAttribute('aria-hidden', 'true');
element.classList.remove('show-list');
});
}
},

mounted() {
document.addEventListener('click', this.showDropdownList);
document.addEventListener('keyup', this.closeDropdownLists);
},

unmounted() {
document.removeEventListener('click', this.showDropdownList);
document.removeEventListener('keyup', this.closeDropdownLists);
}
}
Loading

0 comments on commit 21a286c

Please sign in to comment.