Commit 6d2b9072 authored by akiraohgaki's avatar akiraohgaki

Update CollectioninstalledComponent

parent 8faeb30d
import BaseComponent from './BaseComponent.js';
import BaseComponent from './common/BaseComponent.js';
export default class CollectioninstalledComponent extends BaseComponent {
......@@ -23,9 +23,15 @@ export default class CollectioninstalledComponent 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 {
......@@ -33,65 +39,86 @@ export default class CollectioninstalledComponent extends BaseComponent {
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);
}
ul[data-container] li > div {
div[data-main] {
flex: 1 1 auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
ul[data-container] li > div figure[data-previewpic] {
figure[data-previewpic] {
flex: 0 0 auto;
display: inline-block;
width: 64px;
height: 64px;
margin-right: 1em;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
ul[data-container] li > div span[data-name] {
span[data-name] {
flex: 1 1 auto;
display: inline-block;
margin: 0 1em;
}
ul[data-container] li nav[data-actions] {
nav[data-action] {
}
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;
}
ul[data-container] button[data-apply="inactive"] {
nav[data-action] button:hover {
border-color: rgba(0,0,0,0.3);
}
nav[data-action] button[data-status="inactive"] {
display: none;
}
</style>
<ul class="flex-auto" data-container></ul>
<ul data-container></ul>
`;
}
_listItemsHtml(installedItemsByTypeState) {
_listItemsHtml(state) {
const listItems = [];
if (installedItemsByTypeState.count) {
const apply = installedItemsByTypeState.isApplicableType ? 'active' : 'inactive';
const openButtonText = (installedItemsByTypeState.installType === 'bin') ? 'Run' : 'Open';
const destination = installedItemsByTypeState.installTypes[installedItemsByTypeState.installType].destination;
for (const [key, value] of Object.entries(installedItemsByTypeState.installedItemsByType)) {
const previewpicUrl = `file://${installedItemsByTypeState.previewpicDirectory}/${this.convertItemKeyToPreviewpicFilename(key)}`;
if (state.count) {
const applyButtonStatus = state.isApplicableType ? 'active' : 'inactive';
const openButtonText = (state.installType === 'bin') ? 'Run' : 'Open';
const destination = state.installTypes[state.installType].destination;
for (const [key, value] of Object.entries(state.installedItemsByType)) {
const previewpicUrl = `file://${state.previewpicDirectory}/${this.convertItemKeyToPreviewpicFilename(key)}`;
for (const file of value.files) {
const path = `${destination}/${file}`;
const fileUrl = `file://${path}`;
const filePath = `${destination}/${file}`;
const fileUrl = `file://${filePath}`;
listItems.push(`
<li class="widget">
<div>
<li>
<div data-main>
<figure data-previewpic style="background-image: url('${previewpicUrl}');"></figure>
<span data-name>${file}</span>
</div>
<nav data-actions>
<button class="button" data-action="open" data-url="${fileUrl}">${openButtonText}</button>
<button class="button-accept"
data-action="apply"
data-path="${path}" data-install-type="${installedItemsByTypeState.installType}"
data-apply="${apply}">Apply</button>
<button class="button-warning" data-action="uninstall" data-item-key="${key}">Delete</button>
<nav data-action>
<button data-action="ocsManager_openUrl" data-url="${fileUrl}">${openButtonText}</button>
<button data-action="ocsManager_applyTheme"
data-path="${filePath}" data-install-type="${state.installType}"
data-status="${applyButtonStatus}">Apply</button>
<button data-action="ocsManager_uninstall" data-item-key="${key}">Delete</button>
</nav>
</li>
`);
......@@ -103,26 +130,22 @@ export default class CollectioninstalledComponent extends BaseComponent {
}
_handleClick(event) {
if (event.target.closest('button')) {
event.preventDefault();
const buttonElement = event.target.closest('button');
const action = buttonElement.getAttribute('data-action');
if (action === 'open') {
this.dispatch('ocsManager_openUrl', {
url: buttonElement.getAttribute('data-url')
});
}
else if (action === 'apply') {
this.dispatch('ocsManager_applyTheme', {
path: buttonElement.getAttribute('data-path'),
installType: buttonElement.getAttribute('data-install-type')
});
}
else if (action === 'uninstall') {
this.dispatch('ocsManager_uninstall', {
itemKey: buttonElement.getAttribute('data-item-key')
});
buttonElement.closest('li').remove();
if (event.target.closest('button[data-action]')) {
const button = event.target.closest('button[data-action]');
switch (button.getAttribute('data-action')) {
case 'ocsManager_openUrl':
this.dispatch('ocsManager_openUrl', {url: button.getAttribute('data-url')});
break;
case 'ocsManager_applyTheme':
this.dispatch('ocsManager_applyTheme', {
path: button.getAttribute('data-path'),
installType: button.getAttribute('data-install-type')
});
break;
case 'ocsManager_uninstall':
this.dispatch('ocsManager_uninstall', {itemKey: button.getAttribute('data-item-key')});
button.closest('li').remove();
break;
}
}
}
......
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