Commit 20d6fbed authored by akiraohgaki's avatar akiraohgaki

Update CollectiondownloadComponent

parent ec5917ef
import Chilit from '../../libs/chirit/Chirit.js';
import BaseComponent from './BaseComponent.js';
import BaseComponent from './common/BaseComponent.js';
export default class CollectiondownloadComponent extends BaseComponent {
......@@ -26,42 +26,99 @@ export default class CollectiondownloadComponent extends BaseComponent {
<style>${this.sharedStyle}</style>
<style>
:host {
display: flex;
flex-flow: column nowrap;
flex: 1 1 auto;
}
ul[data-container] {
flex: 1 1 auto;
list-style: none;
margin: 0;
overflow: auto;
}
ul[data-container] li {
display: flex;
flex-flow: row nowrap;
align-items: center;
margin: 1em;
padding: 1em;
padding: 1em 2em;
border: 1px solid var(--color-border);
border-radius: 5px;
}
ul[data-container] li:hover {
border-color: rgba(0,0,0,0.3);
}
figure[data-previewpic] {
flex: 0 0 auto;
width: 64px;
height: 64px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
div[data-main] {
flex: 1 1 auto;
padding: 0 1em;
}
progress[data-progress] {
display: inline-block;
width: 100%;
margin: 0.5em 0;
}
progress[data-progress][value=""] {
display: none;
}
nav[data-action] {
flex: 0 0 auto;
}
nav[data-action] button {
-webkit-appearance: none;
appearance: none;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid var(--color-border);
border-radius: 3px;
background-color: var(--color-content);
line-height: 1;
outline: none;
cursor: pointer;
}
nav[data-action] button:hover {
border-color: rgba(0,0,0,0.3);
}
ul[data-container] li progress[data-progress] {
width: 70%;
nav[data-action] button[data-status="inactive"] {
display: none;
}
</style>
<ul class="flex-auto" data-container></ul>
<ul data-container></ul>
`;
}
_listItemHtml(installingState) {
_listItemHtml(state) {
return `
<li class="widget" data-url="${installingState.metadata.url}">
<div><span data-name>${installingState.metadata.filename}</span></div>
<div>
<li data-url="${state.metadata.url}">
<figure data-previewpic></figure>
<div data-main>
<span data-name>${state.metadata.filename}</span>
<progress data-progress value="" max=""></progress>
<span data-progress></span>
<span data-message>${state.message}</span>
</div>
<div><span data-message>${installingState.status.startsWith('success') ? '' : installingState.message}</span></div>
<nav data-action>
<!--<button data-action="" data-item-key="">Cancel</button>-->
</nav>
</li>
`;
}
_viewHandler_ocsManager_installing(state) {
const downloadItem = this.contentRoot.querySelector(`li[data-url="${state.metadata.url}"]`);
if (downloadItem) {
downloadItem.querySelector('span[data-name]').textContent = state.metadata.filename;
downloadItem.querySelector('span[data-message]').textContent = state.status.startsWith('success') ? '' : state.message;
const listItem = this.contentRoot.querySelector(`li[data-url="${state.metadata.url}"]`);
if (listItem) {
listItem.querySelector('span[data-message]').textContent = state.message;
}
else {
this.contentRoot.querySelector('ul[data-container]')
......@@ -70,15 +127,16 @@ export default class CollectiondownloadComponent extends BaseComponent {
}
_viewHandler_ocsManager_downloading(state) {
const downloadItem = this.contentRoot.querySelector(`li[data-url="${state.url}"]`);
if (downloadItem) {
const progressElement = downloadItem.querySelector('progress[data-progress]');
progressElement.value = state.bytesReceived;
progressElement.max = state.bytesTotal;
downloadItem.querySelector('span[data-progress]')
.textContent = Chilit.Utility.convertByteToHumanReadable(state.bytesReceived)
+ ' / '
+ Chilit.Utility.convertByteToHumanReadable(state.bytesTotal);
const listItem = this.contentRoot.querySelector(`li[data-url="${state.url}"]`);
if (listItem) {
const progress = listItem.querySelector('progress[data-progress]');
progress.value = '' + state.bytesReceived;
progress.max = '' + state.bytesTotal;
const message = 'Downloading... '
+ Chilit.Utility.convertByteToHumanReadable(state.bytesReceived)
+ ' / '
+ Chilit.Utility.convertByteToHumanReadable(state.bytesTotal);
listItem.querySelector('span[data-message]').textContent = message;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment