{{config.title}}
{{config.subtitle}}
{{config.content}}
{{config.excerptLink}}
/
{{breadcrump.name}}
{{ props.row.name }}
{{ props.row.size | formatBytes}}
{{ props.row.dateModified | formatDateRelative }}
{{ props.row.name }}
{{ props.row.size | formatBytes}}
{{ props.row.dateModified | formatDateRelative }}
section pathPrefix: null, pathContentTableData: [], previousContinuationTokens: [], continuationToken: undefined, nextContinuationToken: undefined }, computed: { pathBreadcrumps() { return `/${this.pathPrefix}`.match(/(?=[/])|[^/]+[/]?/g) .map((pathPrefixPart, index, pathPrefixParts) => ({ name: pathPrefixPart, url: '#' + pathPrefixParts.slice(0, index).join('') + pathPrefixPart })); }, isMobileBreakoint(){ return this.windowWidth <= 768 } }, watch: { pathPrefix() { this.previousContinuationTokens = []; this.continuationToken = undefined; this.nextContinuationToken = undefined; this.refresh(); } }, methods: { moment: moment, previousPage(){ if(this.previousContinuationTokens.length > 0){ this.continuationToken = this.previousContinuationTokens.pop(); this.refresh(); } }, nextPage(){ if(this.nextContinuationToken){ this.previousContinuationTokens.push(this.continuationToken); this.continuationToken = this.nextContinuationToken; this.refresh(); } }, async refresh() { let listBucketResult; try { let bucketListApiUrl = `${this.config.bucketUrl}?list-type=2`; bucketListApiUrl += `&delimiter=/`; bucketListApiUrl += `&prefix=${this.pathPrefix}`; if(this.config.pageSize){ bucketListApiUrl += `&max-keys=${this.config.pageSize}`; } if(this.continuationToken){ bucketListApiUrl += `&continuation-token=${encodeURIComponent(this.continuationToken)}`; } let listBucketResultResponse = await fetch(bucketListApiUrl); let listBucketResultXml = await listBucketResultResponse.text(); listBucketResult = new DOMParser().parseFromString(listBucketResultXml, "text/xml"); if (!listBucketResult.querySelector('ListBucketResult')){ throw Error("List bucket response does not contain
tag!"); } } catch (error) { this.$buefy.notification.open({ message: escapeHTML(error.message), type: 'is-danger', duration: 60000, position: 'is-bottom' }); throw error; } let nextContinuationTokenTag = listBucketResult.querySelector("NextContinuationToken"); this.nextContinuationToken = nextContinuationTokenTag && nextContinuationTokenTag.textContent; let commonPrefixes = [...listBucketResult.querySelectorAll("ListBucketResult > CommonPrefixes")].map(tag => ({ prefix: tag.querySelector('Prefix').textContent })); let contents = [...listBucketResult.querySelectorAll("ListBucketResult > Contents")].map(tag => ({ key: tag.querySelector('Key').textContent, size: parseInt(tag.querySelector('Size').textContent), dateModified: new Date(tag.querySelector('LastModified').textContent) })); this.pathContentTableData = []; commonPrefixes .forEach(prefix => { this.pathContentTableData.push({ type: 'prefix', name: prefix.prefix.replace(/^.*\/(?=.+)/, ''), prefix: prefix.prefix }) }); contents .filter(content => !content.key.endsWith('/')) // exclude folder entries .filter(content => !config.keyExcludePattern || !content.key.match(config.keyExcludePattern)) .forEach(content => { this.pathContentTableData.push({ type: 'content', name: content.key.replace(/^.*\//, ''), size: content.size, dateModified: content.dateModified, key: content.key, url: `${this.config.bucketUrl}/${content.key}` }) }); }, sortTableData(columnName) { return (rowA, rowB, isAsc) => { if(rowA.type != rowB.type){ return rowA.type === 'prefix' ? -1 :1 } const valueA = rowA[columnName]; const valueB = rowB[columnName]; if(valueA != valueB){ if(valueA === undefined){ return isAsc ? -1 : 1; } if(valueB === undefined){ return isAsc ? 1 : -1; } return isAsc ? (valueA < valueB ? -1 : 1) : (valueA < valueB ? 1 : -1); } return 0; }; } }, async mounted() { window.onhashchange = () => { let locationHash = window.location.hash.replace(/^#/, ''); this.pathPrefix = locationHash.replace(/^\//, ''); }; window.onhashchange(); window.addEventListener('resize', () => { this.windowWidth = window.innerWidth; }); }, async beforeDestroy() { window.removeEventListener('resize'); }, filters: { formatBytes(size) { if(!size){ return '-' } const KB = 1024; if (size < KB) { return size + ' B'; } const MB = 1000000; if (size < MB) { return (size / KB).toFixed(0) + ' KB'; } const GB = 1000000000; if (size < GB) { return (size / MB).toFixed(2) + ' MB'; } return (size / GB).toFixed(2) + ' GB'; }, formatDate(date) { if(!date){ return '-' } return moment(date).format('dddd, MMMM Do, YYYY • hh:mm:ss') }, formatDateRelative(date) { if(!date){ return '-' } return moment(date).fromNow() } } }); function escapeHTML(unsafeText) { let div = document.createElement('div'); div.innerText = unsafeText; return div.innerHTML; }