Commit 144773f5 authored by akiraohgaki's avatar akiraohgaki

Update CollectionsidebarComponent

parent 0358b4d1
import BaseComponent from './BaseComponent.js';
import BaseComponent from './common/BaseComponent.js';
export default class CollectionsidebarComponent extends BaseComponent {
......@@ -30,65 +30,100 @@ export default class CollectionsidebarComponent extends BaseComponent {
<style>
:host {
display: flex;
flex-flow: column nowrap;
flex: 1 1 auto;
width: 200px;
}
nav {
nav[data-sidebar] {
flex: 1 1 auto;
width: inherit;
border-right: 1px solid var(--color-border);
background-color: var(--color-widget);
overflow: auto;
}
nav ul.linklist li a {
nav[data-sidebar] h4 {
padding: 0.5em 1em;
}
nav[data-sidebar] ul[data-menu="activity"] {
border-bottom: 1px solid var(--color-border);
}
nav[data-sidebar] ul li a {
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 100%;
padding: 0.5em 1em;
background-color: transparent;
color: var(--color-text);
}
nav ul.linklist li a span[data-name] {
nav[data-sidebar] ul li a[data-selected] {
background-color: var(--color-active);
}
nav[data-sidebar] ul li a[data-status="inactive"] {
display: none;
}
nav[data-sidebar] ul li a span[data-name] {
flex: 1 1 auto;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1;
}
nav ul.linklist li a span[data-count] {
nav[data-sidebar] ul li a span[data-count] {
display: inline-block;
padding: 0.3em 0.5em;
border-radius: 1em;
padding: 4px 6px;
border-radius: 10px;
background-color: var(--color-active-secondary);
font-size: 10px;
line-height: 1;
}
nav ul.linklist li a[data-selected] {
background-color: var(--color-active);
nav[data-sidebar] ul li a[data-action="update"] span[data-count] {
background-color: var(--color-important);
color: var(--color-content);
}
nav[data-sidebar] ul li a[data-action="update"] span[data-count="0"] {
display: none;
}
nav[data-sidebar] ul li a[data-action="download"] span[data-count] {
background-color: var(--color-information);
color: var(--color-content);
}
nav[data-sidebar] ul li a[data-action="download"] span[data-count="0"] {
display: none;
}
</style>
<nav class="flex-auto">
<ul class="linklist" data-menu="activity">
<nav data-sidebar>
<ul data-menu="activity">
<li>
<a href="#" data-action="download">
<span data-name>Download</span>
<span data-count>0</span>
<a href="#" data-action="update" data-status="inactive">
<span data-name>Update</span>
<span data-count="0">0</span>
</a>
</li>
<li>
<a href="#" data-action="update">
<span data-name>Update</span>
<span data-count>0</span>
<a href="#" data-action="download" data-status="active">
<span data-name>Download</span>
<span data-count="0">0</span>
</a>
</li>
</ul>
<h4>Installed</h4>
<ul class="linklist" data-menu="category"></ul>
<ul data-menu="category"></ul>
</nav>
`;
}
_categoryMenuItemsHtml(installedItemsState) {
const listItems = [];
_categoryMenuItemsHtml(state) {
const menuItems = [];
if (installedItemsState.count) {
if (state.count) {
const categorizedInstalledItems = {};
for (const [key, value] of Object.entries(installedItemsState.installedItems)) {
for (const [key, value] of Object.entries(state.installedItems)) {
if (!categorizedInstalledItems[value.install_type]) {
categorizedInstalledItems[value.install_type] = {};
}
......@@ -99,7 +134,7 @@ export default class CollectionsidebarComponent extends BaseComponent {
for (const installType of Object.keys(categorizedInstalledItems)) {
categories.push({
installType: installType,
name: installedItemsState.installTypes[installType].name,
name: state.installTypes[installType].name,
count: Object.keys(categorizedInstalledItems[installType]).length
});
}
......@@ -116,45 +151,43 @@ export default class CollectionsidebarComponent extends BaseComponent {
});
for (const category of categories) {
listItems.push(`
menuItems.push(`
<li>
<a href="#" data-action="installed" data-install-type="${category.installType}">
<span data-name>${category.name}</span>
<span data-count>${category.count}</span>
<span data-count="${category.count}">${category.count}</span>
</a>
</li>
`);
}
}
return listItems.join('');
return menuItems.join('');
}
_handleClick(event) {
if (event.target.closest('a')) {
if (event.target.closest('a[data-action]')) {
event.preventDefault();
const anchorElement = event.target.closest('a');
const action = anchorElement.getAttribute('data-action');
const targetMenuItem = event.target.closest('a[data-action]');
const sidebarElement = anchorElement.closest('nav');
if (sidebarElement && action) {
for (const menuItemElement of sidebarElement.querySelectorAll('a[data-action]')) {
menuItemElement.removeAttribute('data-selected');
}
anchorElement.setAttribute('data-selected', 'data-selected');
for (const menuItem of this.contentRoot.querySelectorAll('a[data-action]')) {
menuItem.removeAttribute('data-selected');
}
if (action === 'download') {
this.dispatch('collectionsidebar_select', {select: 'download'});
}
else if (action === 'update') {
this.dispatch('collectionsidebar_select', {select: 'update'});
}
else if (action === 'installed') {
this.dispatch('ocsManager_installedItemsByType', {
installType: anchorElement.getAttribute('data-install-type')
});
this.dispatch('collectionsidebar_select', {select: 'installed'});
targetMenuItem.setAttribute('data-selected', 'data-selected');
switch (targetMenuItem.getAttribute('data-action')) {
case 'installed':
this.dispatch('ocsManager_installedItemsByType', {
installType: targetMenuItem.getAttribute('data-install-type')
});
this.dispatch('collectionsidebar_select', {select: 'installed'});
break;
case 'update':
this.dispatch('collectionsidebar_select', {select: 'update'});
break;
case 'download':
this.dispatch('collectionsidebar_select', {select: 'download'});
break;
}
}
}
......@@ -165,15 +198,21 @@ export default class CollectionsidebarComponent extends BaseComponent {
}
_viewHandler_ocsManager_updateAvailableItems(state) {
const updateCount = this.contentRoot
.querySelector('nav ul[data-menu="activity"] a[data-action="update"] span[data-count]');
updateCount.textContent = '' + state.count;
const menuItem = this.contentRoot.querySelector('a[data-action="update"]');
menuItem.setAttribute('data-status', state.count ? 'active' : 'inactive');
const badge = menuItem.querySelector('span[data-count]');
badge.setAttribute('data-count', '' + state.count);
badge.textContent = '' + state.count;
}
_viewHandler_ocsManager_metadataSet(state) {
const downloadCount = this.contentRoot
.querySelector('nav ul[data-menu="activity"] a[data-action="download"] span[data-count]');
downloadCount.textContent = '' + state.count;
const menuItem = this.contentRoot.querySelector('a[data-action="download"]');
//menuItem.setAttribute('data-status', state.count ? 'active' : 'inactive');
const badge = menuItem.querySelector('span[data-count]');
badge.setAttribute('data-count', '' + state.count);
badge.textContent = '' + state.count;
}
}
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