Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • advertisement
  • automagic
  • dbp-translation-component
  • demo
  • demo-file-handling
  • favorites-and-recent-files
  • icon-set-mapping
  • lit2
  • main
  • person-select-custom
  • port-i18next-parser
  • publish
  • remove-sentry
  • renovate/lock-file-maintenance
  • revert-6c632dc6
  • wc-part
  • wip-cleanup
17 results

Target

Select target project
  • 987FCF504483CBC8/toolkit
1 result
Select Git revision
  • advertisement
  • automagic
  • dbp-translation-component
  • demo
  • demo-file-handling
  • favorites-and-recent-files
  • icon-set-mapping
  • lit2
  • main
  • person-select-custom
  • port-i18next-parser
  • publish
  • remove-sentry
  • renovate/lock-file-maintenance
  • revert-6c632dc6
  • wc-part
  • wip-cleanup
17 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 277 additions and 123 deletions
packages/file-handling/src/file-sink.js
View file @ d8440964
import {i18n} from './i18n'; import {createInstance} from './i18n';
import {css, html} from 'lit-element'; import {css, html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
import * as commonUtils from "@dbp-toolkit/common/utils"; import * as commonUtils from "@dbp-toolkit/common/utils";
import {Icon, MiniSpinner} from '@dbp-toolkit/common'; import {Icon, MiniSpinner} from '@dbp-toolkit/common';
import * as commonStyles from '@dbp-toolkit/common/styles'; import * as commonStyles from '@dbp-toolkit/common/styles';
...@@ -12,16 +11,18 @@ import MicroModal from "./micromodal.es"; ...@@ -12,16 +11,18 @@ import MicroModal from "./micromodal.es";
import * as fileHandlingStyles from './styles'; import * as fileHandlingStyles from './styles';
import { send } from '@dbp-toolkit/common/notification'; import { send } from '@dbp-toolkit/common/notification';
import {Clipboard} from "@dbp-toolkit/file-handling/src/clipboard"; import {Clipboard} from "@dbp-toolkit/file-handling/src/clipboard";
import DbpFileHandlingLitElement from "./dbp-file-handling-lit-element";
/** /**
* FileSink web component * FileSink web component
*/ */
export class FileSink extends ScopedElementsMixin(DBPLitElement) { export class FileSink extends ScopedElementsMixin(DbpFileHandlingLitElement) {
constructor() { constructor() {
super(); super();
this.context = ''; this.context = '';
this.lang = 'de'; this._i18n = createInstance();
this.lang = this._i18n.language;
this.nextcloudAuthUrl = ''; this.nextcloudAuthUrl = '';
this.nextcloudWebDavUrl = ''; this.nextcloudWebDavUrl = '';
this.nextcloudName ='Nextcloud'; this.nextcloudName ='Nextcloud';
...@@ -78,8 +79,12 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) { ...@@ -78,8 +79,12 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
this.updateComplete.then(() => { this.updateComplete.then(() => {
this._('nav.modal-nav').addEventListener("scroll", this.handleScroll.bind(this));
this._('.right-paddle').addEventListener("click", this.handleScrollRight.bind(this, this._('nav.modal-nav')));
this._('.left-paddle').addEventListener("click", this.handleScrollLeft.bind(this, this._('nav.modal-nav')));
}); });
} }
...@@ -122,7 +127,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) { ...@@ -122,7 +127,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
changedProperties.forEach((oldValue, propName) => { changedProperties.forEach((oldValue, propName) => {
switch (propName) { switch (propName) {
case "lang": case "lang":
i18n.changeLanguage(this.lang); this._i18n.changeLanguage(this.lang);
break; break;
case "enabledTargets": case "enabledTargets":
if (!this.hasEnabledDestination(this.activeTargets)) { if (!this.hasEnabledDestination(this.activeTargets)) {
...@@ -163,6 +168,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) { ...@@ -163,6 +168,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
} }
finishedFileUpload(event) { finishedFileUpload(event) {
const i18n = this._i18n;
this.sendDestination(); this.sendDestination();
MicroModal.close(this._('#modal-picker')); MicroModal.close(this._('#modal-picker'));
if (event.detail > 0) { if (event.detail > 0) {
...@@ -268,6 +274,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) { ...@@ -268,6 +274,7 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
} }
getNextcloudHtml() { getNextcloudHtml() {
const i18n = this._i18n;
if (this.enabledTargets.includes('nextcloud') && this.nextcloudWebDavUrl !== "" && this.nextcloudAuthUrl !== "") { if (this.enabledTargets.includes('nextcloud') && this.nextcloudWebDavUrl !== "" && this.nextcloudAuthUrl !== "") {
return html` return html`
<dbp-nextcloud-file-picker id="nextcloud-file-picker" <dbp-nextcloud-file-picker id="nextcloud-file-picker"
...@@ -330,38 +337,87 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) { ...@@ -330,38 +337,87 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.paddle {
position: absolute;
background-color: #ffffffd1;
top: 0px;
padding: 0px 5px;
box-sizing: content-box;
height: 100%;
}
.right-paddle{
right: 0px;
}
.left-paddle{
left: 0px;
}
.nav-wrapper{
position: relative;
display: block;
overflow-x: auto;
border:none;
}
.paddles{
display: none;
}
.modal-nav{
height: 100%;
}
@media only screen
and (orientation: portrait)
and (max-width: 768px) {
.paddles{
display: inherit;
}
}
`; `;
} }
render() { render() {
const i18n = this._i18n;
return html` return html`
<vpu-notification lang="de" client-id="my-client-id"></vpu-notification> <vpu-notification lang="de" client-id="my-client-id"></vpu-notification>
<div class="modal micromodal-slide" id="modal-picker" aria-hidden="true"> <div class="modal micromodal-slide" id="modal-picker" aria-hidden="true">
<div class="modal-overlay" tabindex="-1"> <div class="modal-overlay" tabindex="-1">
<div class="modal-container ${classMap({"modal-container-full-size": this.fullsizeModal})}" role="dialog" aria-modal="true" aria-labelledby="modal-picker-title"> <div class="modal-container ${classMap({"modal-container-full-size": this.fullsizeModal})}" role="dialog" aria-modal="true" aria-labelledby="modal-picker-title">
<nav class="modal-nav"> <div class="nav-wrapper modal-nav">
<div title="${i18n.t('file-sink.nav-local')}" <nav class="modal-nav">
@click="${() => { this.activeTarget = "local"; }}" <div title="${i18n.t('file-sink.nav-local')}"
class="${classMap({"active": this.activeTarget === "local", hidden: !this.hasEnabledDestination("local")})}"> @click="${() => { this.activeTarget = "local"; }}"
<dbp-icon class="nav-icon" name="laptop"></dbp-icon> class="${classMap({"active": this.activeTarget === "local", hidden: !this.hasEnabledDestination("local")})}">
<p>${i18n.t('file-source.nav-local')}</p> <dbp-icon class="nav-icon" name="laptop"></dbp-icon>
</div> <p>${i18n.t('file-source.nav-local')}</p>
<div title="${this.nextcloudName}" </div>
@click="${() => { this.activeTarget = "nextcloud"; this.loadWebdavDirectory();}}" <div title="${this.nextcloudName}"
class="${classMap({"active": this.activeTarget === "nextcloud", hidden: !this.hasEnabledDestination("nextcloud") || this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"> @click="${() => { this.activeTarget = "nextcloud"; this.loadWebdavDirectory();}}"
<dbp-icon class="nav-icon" name="cloud"></dbp-icon> class="${classMap({"active": this.activeTarget === "nextcloud", hidden: !this.hasEnabledDestination("nextcloud") || this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}">
<p> ${this.nextcloudName} </p> <dbp-icon class="nav-icon" name="cloud"></dbp-icon>
</div> <p> ${this.nextcloudName} </p>
<div title="${i18n.t('file-sink.clipboard')}" </div>
@click="${() => { this.activeTarget = "clipboard"; }}" <div title="${i18n.t('file-sink.clipboard')}"
class="${classMap({"active": this.activeTarget === "clipboard", hidden: (!this.hasEnabledDestination("clipboard")) })}"> @click="${() => { this.activeTarget = "clipboard"; }}"
<dbp-icon class="nav-icon" name="clipboard"></dbp-icon> class="${classMap({"active": this.activeTarget === "clipboard", hidden: (!this.hasEnabledDestination("clipboard")) })}">
<p>${i18n.t('file-sink.clipboard')}</p> <dbp-icon class="nav-icon" name="clipboard"></dbp-icon>
<p>${i18n.t('file-sink.clipboard')}</p>
</div>
</nav>
<div class="paddles">
<dbp-icon class="left-paddle paddle hidden" name="chevron-left" class="close-icon"></dbp-icon>
<dbp-icon class="right-paddle paddle" name="chevron-right" class="close-icon"></dbp-icon>
</div> </div>
</nav> </div>
<div class="modal-header"> <div class="modal-header">
<button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" @click="${() => { this.closeDialog();}}"> <button title="${i18n.t('file-sink.modal-close')}" class="modal-close" aria-label="Close modal" @click="${() => { this.closeDialog();}}">
<dbp-icon title="${i18n.t('file-sink.modal-close')}" name="close" class="close-icon"></dbp-icon> <dbp-icon title="${i18n.t('file-sink.modal-close')}" name="close" class="close-icon"></dbp-icon>
......
packages/file-handling/src/file-source.js
View file @ d8440964
import {i18n} from './i18n'; import {createInstance} from './i18n';
import {css, html} from 'lit-element'; import {css, html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
import * as commonUtils from "@dbp-toolkit/common/utils"; import * as commonUtils from "@dbp-toolkit/common/utils";
import {Icon, MiniSpinner} from '@dbp-toolkit/common'; import {Icon, MiniSpinner} from '@dbp-toolkit/common';
import {send as notify} from '@dbp-toolkit/common/notification'; import {send as notify} from '@dbp-toolkit/common/notification';
...@@ -11,6 +10,7 @@ import {classMap} from 'lit-html/directives/class-map.js'; ...@@ -11,6 +10,7 @@ import {classMap} from 'lit-html/directives/class-map.js';
import MicroModal from './micromodal.es'; import MicroModal from './micromodal.es';
import * as fileHandlingStyles from './styles'; import * as fileHandlingStyles from './styles';
import {Clipboard} from "@dbp-toolkit/file-handling/src/clipboard"; import {Clipboard} from "@dbp-toolkit/file-handling/src/clipboard";
import DbpFileHandlingLitElement from "./dbp-file-handling-lit-element";
function mimeTypesToAccept(mimeTypes) { function mimeTypesToAccept(mimeTypes) {
// Some operating systems can't handle mime types and // Some operating systems can't handle mime types and
...@@ -33,11 +33,12 @@ function mimeTypesToAccept(mimeTypes) { ...@@ -33,11 +33,12 @@ function mimeTypesToAccept(mimeTypes) {
/** /**
* FileSource web component * FileSource web component
*/ */
export class FileSource extends ScopedElementsMixin(DBPLitElement) { export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
constructor() { constructor() {
super(); super();
this.context = ''; this.context = '';
this.lang = 'de'; this._i18n = createInstance();
this.lang = this._i18n.language;
this.nextcloudAuthUrl = ''; this.nextcloudAuthUrl = '';
this.nextcloudName ='Nextcloud'; this.nextcloudName ='Nextcloud';
this.nextcloudWebDavUrl = ''; this.nextcloudWebDavUrl = '';
...@@ -96,7 +97,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -96,7 +97,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
changedProperties.forEach((oldValue, propName) => { changedProperties.forEach((oldValue, propName) => {
switch (propName) { switch (propName) {
case "lang": case "lang":
i18n.changeLanguage(this.lang); this._i18n.changeLanguage(this.lang);
break; break;
case "enabledTargets": case "enabledTargets":
if (!this.hasEnabledSource(this.activeTarget)) { if (!this.hasEnabledSource(this.activeTarget)) {
...@@ -139,6 +140,12 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -139,6 +140,12 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
}); });
this.dropArea.addEventListener('drop', this.handleDrop.bind(this), false); this.dropArea.addEventListener('drop', this.handleDrop.bind(this), false);
this._('#fileElem').addEventListener('change', this.handleChange.bind(this)); this._('#fileElem').addEventListener('change', this.handleChange.bind(this));
this._('nav.modal-nav').addEventListener("scroll", this.handleScroll.bind(this));
this._('.right-paddle').addEventListener("click", this.handleScrollRight.bind(this, this._('nav.modal-nav')));
this._('.left-paddle').addEventListener("click", this.handleScrollLeft.bind(this, this._('nav.modal-nav')));
}); });
} }
...@@ -148,8 +155,6 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -148,8 +155,6 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
super.disconnectedCallback(); super.disconnectedCallback();
} }
preventDefaults (e) { preventDefaults (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
...@@ -198,42 +203,44 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -198,42 +203,44 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
// console.log('handleFiles: files.length = ' + files.length); // console.log('handleFiles: files.length = ' + files.length);
// this.dispatchEvent(new CustomEvent("dbp-file-source-selection-start", // this.dispatchEvent(new CustomEvent("dbp-file-source-selection-start",
// { "detail": {}, bubbles: true, composed: true })); // { "detail": {}, bubbles: true, composed: true }));
let fileCount = files.length;
await commonUtils.asyncArrayForEach(files, async (file) => { await commonUtils.asyncArrayForEach(files, async (file, index) => {
if (file.size === 0) { if (file.size === 0) {
console.log('file \'' + file.name + '\' has size=0 and is denied!'); console.log('file \'' + file.name + '\' has size=0 and is denied!');
return; return;
} }
// check if we want to decompress the zip and queue the contained files // check if we want to decompress the zip and queue the contained files
if (this.decompressZip if (this.decompressZip
&& (file.type === "application/zip" || file.type === "application/x-zip-compressed")) { && (file.type === "application/zip" || file.type === "application/x-zip-compressed")) {
// add decompressed files to tempFilesToHandle // add decompressed files to tempFilesToHandle
await commonUtils.asyncArrayForEach( await commonUtils.asyncArrayForEach(
await this.decompressZIP(file), (file) => this.sendFileEvent(file)); await this.decompressZIP(file), (file, index, array) => {
fileCount = index === array.length - 1 ? fileCount : fileCount + 1;
this.sendFileEvent(file,fileCount);
});
return; return;
} else if (this.allowedMimeTypes && !this.checkFileType(file)) { } else if (this.allowedMimeTypes && !this.checkFileType(file)) {
return; return;
} }
await this.sendFileEvent(file); await this.sendFileEvent(file, fileCount);
}); });
// this.dispatchEvent(new CustomEvent("dbp-file-source-selection-finished", // this.dispatchEvent(new CustomEvent("dbp-file-source-selection-finished",
// { "detail": {}, bubbles: true, composed: true })); // { "detail": {}, bubbles: true, composed: true }));
const event = new CustomEvent("dbp-file-source-file-upload-finished", { "detail": {count: files.length}, bubbles: true, composed: true }); const event = new CustomEvent("dbp-file-source-file-upload-finished", { "detail": {count: fileCount}, bubbles: true, composed: true });
this.dispatchEvent(event); this.dispatchEvent(event);
this.closeDialog(); this.closeDialog();
} }
/** /**
* @param file * @param file, last
*/ */
sendFileEvent(file) { sendFileEvent(file, maxUpload) {
this.sendSource(); this.sendSource();
MicroModal.close(this._('#modal-picker')); MicroModal.close(this._('#modal-picker'));
const data = {"file": file}; const data = {"file": file, "maxUpload": maxUpload};
const event = new CustomEvent("dbp-file-source-file-selected", { "detail": data, bubbles: true, composed: true }); const event = new CustomEvent("dbp-file-source-file-selected", { "detail": data, bubbles: true, composed: true });
this.dispatchEvent(event); this.dispatchEvent(event);
} }
...@@ -242,7 +249,6 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -242,7 +249,6 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
let data = {}; let data = {};
if (this.activeTarget == 'nextcloud') { if (this.activeTarget == 'nextcloud') {
data = {"target": this.activeTarget, "path": this._("#nextcloud-file-picker").directoryPath}; data = {"target": this.activeTarget, "path": this._("#nextcloud-file-picker").directoryPath};
} else { } else {
data = {"target": this.activeTarget}; data = {"target": this.activeTarget};
} }
...@@ -321,6 +327,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -321,6 +327,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
// no suitable files found // no suitable files found
if (filesToHandle.length === 0) { if (filesToHandle.length === 0) {
const i18n = this._i18n;
console.error('ZIP file does not contain any files of ' + this.allowedMimeTypes); console.error('ZIP file does not contain any files of ' + this.allowedMimeTypes);
//throw new Error('ZIP file does not contain any files of ' + this.allowedMimeTypes); //throw new Error('ZIP file does not contain any files of ' + this.allowedMimeTypes);
notify({ notify({
...@@ -477,7 +484,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -477,7 +484,7 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
auth-info="${this.nextcloudAuthInfo}" auth-info="${this.nextcloudAuthInfo}"
allowed-mime-types="${this.allowedMimeTypes}" allowed-mime-types="${this.allowedMimeTypes}"
@dbp-nextcloud-file-picker-file-downloaded="${(event) => { @dbp-nextcloud-file-picker-file-downloaded="${(event) => {
this.sendFileEvent(event.detail.file);}}"> this.sendFileEvent(event.detail.file, event.detail.maxUpload);}}">
</dbp-nextcloud-file-picker>`; </dbp-nextcloud-file-picker>`;
} }
return html``; return html``;
...@@ -529,25 +536,68 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -529,25 +536,68 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
height: 100%; height: 100%;
} }
.paddle {
position: absolute;
background-color: #ffffffd1;
top: 0px;
padding: 0px 5px;
box-sizing: content-box;
height: 100%;
}
.right-paddle{
right: 0px;
}
.left-paddle{
left: 0px;
}
.nav-wrapper{
position: relative;
display: block;
overflow-x: auto;
border:none;
}
.paddles{
display: none;
}
.modal-nav{
height: 100%;
}
@media only screen @media only screen
and (orientation: portrait) and (orientation: portrait)
and (max-width: 768px) { and (max-width: 768px) {
#dropArea{ #dropArea{
height: 100%; height: 100%;
} }
} }
@media only screen
and (orientation: portrait)
and (max-width: 340px) {
.paddles{
display: inherit;
}
}
`; `;
} }
render() { render() {
const i18n = this._i18n;
let allowedMimeTypes = this.allowedMimeTypes; let allowedMimeTypes = this.allowedMimeTypes;
if (this.decompressZip && this.allowedMimeTypes !== "*/*") { if (this.decompressZip && this.allowedMimeTypes !== "*/*") {
allowedMimeTypes += ",application/zip,application/x-zip-compressed"; allowedMimeTypes += ",application/zip,application/x-zip-compressed";
} }
return html` return html`
<!-- <!--
<button class="button" <button class="button"
...@@ -557,27 +607,32 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) { ...@@ -557,27 +607,32 @@ export class FileSource extends ScopedElementsMixin(DBPLitElement) {
<div class="modal micromodal-slide" id="modal-picker" aria-hidden="true"> <div class="modal micromodal-slide" id="modal-picker" aria-hidden="true">
<div class="modal-overlay" tabindex="-1" data-micromodal-close> <div class="modal-overlay" tabindex="-1" data-micromodal-close>
<div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-picker-title"> <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-picker-title">
<nav class="modal-nav"> <div class="nav-wrapper modal-nav">
<div title="${i18n.t('file-source.nav-local')}" <nav class="modal-nav">
@click="${() => { this.activeTarget = "local"; }}" <div title="${i18n.t('file-source.nav-local')}"
class="${classMap({"active": this.activeTarget === "local", hidden: !this.hasEnabledSource("local")})}"> @click="${() => { this.activeTarget = "local"; }}"
<dbp-icon class="nav-icon" name="laptop"></dbp-icon> class="${classMap({"active": this.activeTarget === "local", hidden: !this.hasEnabledSource("local")})}">
<p>${i18n.t('file-source.nav-local')}</p> <dbp-icon class="nav-icon" name="laptop"></dbp-icon>
</div> <p>${i18n.t('file-source.nav-local')}</p>
<div title="Nextcloud" </div>
@click="${() => { this.activeTarget = "nextcloud";}}" <div title="Nextcloud"
class="${classMap({"active": this.activeTarget === "nextcloud", hidden: !this.hasEnabledSource("nextcloud") || this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"> @click="${() => { this.activeTarget = "nextcloud";}}"
<dbp-icon class="nav-icon" name="cloud"></dbp-icon> class="${classMap({"active": this.activeTarget === "nextcloud", hidden: !this.hasEnabledSource("nextcloud") || this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}">
<p> ${this.nextcloudName} </p> <dbp-icon class="nav-icon" name="cloud"></dbp-icon>
</div> <p> ${this.nextcloudName} </p>
<div title="${i18n.t('file-source.clipboard')}" </div>
@click="${() => { this.activeTarget = "clipboard"; }}" <div title="${i18n.t('file-source.clipboard')}"
class="${classMap({"active": this.activeTarget === "clipboard", hidden: !this.hasEnabledSource("clipboard") })}"> @click="${() => { this.activeTarget = "clipboard"; }}"
<dbp-icon class="nav-icon" name="clipboard"></dbp-icon> class="${classMap({"active": this.activeTarget === "clipboard", hidden: !this.hasEnabledSource("clipboard") })}">
<p>${i18n.t('file-source.clipboard')}</p> <dbp-icon class="nav-icon" name="clipboard"></dbp-icon>
<p>${i18n.t('file-source.clipboard')}</p>
</div>
</nav>
<div class="paddles">
<dbp-icon class="left-paddle paddle hidden" name="chevron-left" class="close-icon"></dbp-icon>
<dbp-icon class="right-paddle paddle" name="chevron-right" class="close-icon"></dbp-icon>
</div> </div>
</div>
</nav>
<div class="modal-header"> <div class="modal-header">
<button title="${i18n.t('file-source.modal-close')}" class="modal-close" aria-label="Close modal" @click="${() => {this.closeDialog();}}"> <button title="${i18n.t('file-source.modal-close')}" class="modal-close" aria-label="Close modal" @click="${() => {this.closeDialog();}}">
<dbp-icon name="close" class="close-icon"></dbp-icon> <dbp-icon name="close" class="close-icon"></dbp-icon>
......
packages/file-handling/src/i18n.js
View file @ d8440964
import {createInstance} from '@dbp-toolkit/common/i18next.js'; import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
import de from './i18n/de/translation.json'; import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json'; import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en'); export function createInstance() {
\ No newline at end of file return _createInstance({en: en, de: de}, 'de', 'en');
}
\ No newline at end of file
packages/file-handling/src/i18n/de/translation.json
View file @ d8440964
...@@ -84,7 +84,8 @@ ...@@ -84,7 +84,8 @@
"select-nothing": "Nichts auswählen", "select-nothing": "Nichts auswählen",
"select-nothing-title": "Alle gewählten Dateien nicht mehr selektieren", "select-nothing-title": "Alle gewählten Dateien nicht mehr selektieren",
"abort": "Vorgang abbrechen", "abort": "Vorgang abbrechen",
"abort-message": "Vorgang wurde abgebrochen." "abort-message": "Vorgang wurde abgebrochen.",
"remember-me": "Angemeldet bleiben"
}, },
"clipboard": { "clipboard": {
"add-files": "Dateien der Zwischenablage hinzufügen", "add-files": "Dateien der Zwischenablage hinzufügen",
......
packages/file-handling/src/i18n/en/translation.json
View file @ d8440964
...@@ -98,7 +98,8 @@ ...@@ -98,7 +98,8 @@
"select-nothing": "Select none", "select-nothing": "Select none",
"select-nothing-title": "Select no files", "select-nothing-title": "Select no files",
"abort": "Cancel process", "abort": "Cancel process",
"abort-message": "The process was canceled." "abort-message": "The process was canceled.",
"remember-me": "Remember me"
}, },
"clipboard": { "clipboard": {
"add-files": "Add files to clipboard", "add-files": "Add files to clipboard",
......
packages/file-handling/src/nextcloud-file-picker.js
View file @ d8440964
import {i18n} from './i18n'; import {createInstance} from './i18n';
import {css, html} from 'lit-element'; import {css, html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element'; import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
...@@ -19,7 +19,9 @@ import * as fileHandlingStyles from './styles'; ...@@ -19,7 +19,9 @@ import * as fileHandlingStyles from './styles';
export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this._i18n = createInstance();
this.lang = this._i18n.language;
this.authUrl = ''; this.authUrl = '';
this.webDavUrl = ''; this.webDavUrl = '';
this.nextcloudName = 'Nextcloud'; this.nextcloudName = 'Nextcloud';
...@@ -37,7 +39,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -37,7 +39,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.loading = false; this.loading = false;
this._onReceiveWindowMessage = this.onReceiveWindowMessage.bind(this); this._onReceiveWindowMessage = this.onReceiveWindowMessage.bind(this);
this.folderIsSelected = i18n.t('nextcloud-file-picker.load-in-folder'); this.folderIsSelected = this._i18n.t('nextcloud-file-picker.load-in-folder');
this.generatedFilename = ''; this.generatedFilename = '';
this.replaceFilename = ''; this.replaceFilename = '';
this.customFilename = ''; this.customFilename = '';
...@@ -97,7 +99,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -97,7 +99,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
changedProperties.forEach((oldValue, propName) => { changedProperties.forEach((oldValue, propName) => {
switch (propName) { switch (propName) {
case "lang": case "lang":
i18n.changeLanguage(this.lang); this._i18n.changeLanguage(this.lang);
break; break;
case "directoriesOnly": case "directoriesOnly":
if (this.directoriesOnly && this._("#select_all_wrapper")) { if (this.directoriesOnly && this._("#select_all_wrapper")) {
...@@ -136,6 +138,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -136,6 +138,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
const that = this; const that = this;
const i18n = this._i18n;
this.updateComplete.then(() => { this.updateComplete.then(() => {
// see: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage // see: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
window.addEventListener('message', this._onReceiveWindowMessage); window.addEventListener('message', this._onReceiveWindowMessage);
...@@ -347,8 +350,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -347,8 +350,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
password: sessionStorage.getItem("nextcloud-webdav-password") password: sessionStorage.getItem("nextcloud-webdav-password")
} }
); );
console.log("check");
this.loadDirectory(this.directoryPath); this.loadDirectory(this.directoryPath);
} }
...@@ -377,6 +378,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -377,6 +378,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
} }
openFilePicker() { openFilePicker() {
const i18n = this._i18n;
if (this.webDavClient === null) { if (this.webDavClient === null) {
this.loading = true; this.loading = true;
this.statusText = i18n.t('nextcloud-file-picker.auth-progress'); this.statusText = i18n.t('nextcloud-file-picker.auth-progress');
...@@ -391,7 +393,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -391,7 +393,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
} }
onReceiveWindowMessage(event) { onReceiveWindowMessage(event) {
console.log("hui");
if (this.webDavClient === null) { if (this.webDavClient === null) {
const data = event.data; const data = event.data;
...@@ -399,7 +400,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -399,7 +400,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
if (this.loginWindow !== null) { if (this.loginWindow !== null) {
this.loginWindow.close(); this.loginWindow.close();
} }
console.log("lala");
// see https://github.com/perry-mitchell/webdav-client/blob/master/API.md#module_WebDAV.createClient // see https://github.com/perry-mitchell/webdav-client/blob/master/API.md#module_WebDAV.createClient
this.webDavClient = createClient( this.webDavClient = createClient(
...@@ -409,7 +409,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -409,7 +409,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
password: data.token password: data.token
} }
); );
console.log("tada");
if (this._("#remember-checkbox") && this._("#remember-checkbox").checked) { if (this._("#remember-checkbox") && this._("#remember-checkbox").checked) {
sessionStorage.setItem('nextcloud-webdav-username', data.loginName); sessionStorage.setItem('nextcloud-webdav-username', data.loginName);
...@@ -428,6 +427,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -428,6 +427,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* @param path * @param path
*/ */
loadDirectory(path) { loadDirectory(path) {
const i18n = this._i18n;
if (typeof this.directoryPath === 'undefined' || this.directoryPath === undefined) { if (typeof this.directoryPath === 'undefined' || this.directoryPath === undefined) {
this.directoryPath = ''; this.directoryPath = '';
} }
...@@ -549,7 +549,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -549,7 +549,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* @param files * @param files
*/ */
downloadFiles(files) { downloadFiles(files) {
files.forEach((fileData) => this.downloadFile(fileData)); files.forEach((fileData) => this.downloadFile(fileData, files.length));
this.tabulatorTable.deselectRow(); this.tabulatorTable.deselectRow();
if (this._("#select_all")) { if (this._("#select_all")) {
this._("#select_all").checked = false; this._("#select_all").checked = false;
...@@ -569,9 +570,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -569,9 +570,11 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
/** /**
* Download a single file * Download a single file
* *
* @param fileData * @param fileData, maxUpload
*/ */
downloadFile(fileData) { downloadFile(fileData, maxUpload) {
const i18n = this._i18n;
this.loading = true; this.loading = true;
this.statusText = "Loading " + fileData.filename + "..."; this.statusText = "Loading " + fileData.filename + "...";
...@@ -582,7 +585,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -582,7 +585,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
// create file to send via event // create file to send via event
const file = new File([contents], fileData.basename, {type: fileData.mime}); const file = new File([contents], fileData.basename, {type: fileData.mime});
// send event // send event
const data = {"file": file, "data": fileData}; const data = {"file": file, "data": fileData, "maxUpload": maxUpload};
const event = new CustomEvent("dbp-nextcloud-file-picker-file-downloaded", const event = new CustomEvent("dbp-nextcloud-file-picker-file-downloaded",
{"detail": data, bubbles: true, composed: true}); {"detail": data, bubbles: true, composed: true});
this.dispatchEvent(event); this.dispatchEvent(event);
...@@ -602,6 +605,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -602,6 +605,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* @param directory * @param directory
*/ */
sendDirectory(directory) { sendDirectory(directory) {
const i18n = this._i18n;
this.tabulatorTable.deselectRow(); this.tabulatorTable.deselectRow();
let path; let path;
...@@ -626,6 +630,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -626,6 +630,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* @param directory * @param directory
*/ */
uploadFiles(files, directory) { uploadFiles(files, directory) {
const i18n = this._i18n;
this.loading = true; this.loading = true;
this.statusText = i18n.t('nextcloud-file-picker.upload-to', {path: directory}); this.statusText = i18n.t('nextcloud-file-picker.upload-to', {path: directory});
this.fileList = files; this.fileList = files;
...@@ -646,6 +651,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -646,6 +651,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* @param directory * @param directory
*/ */
async uploadFile(directory) { async uploadFile(directory) {
const i18n = this._i18n;
if (this.abortUpload) { if (this.abortUpload) {
this.abortUpload = false; this.abortUpload = false;
this.abortUploadButton = false; this.abortUploadButton = false;
...@@ -712,6 +718,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -712,6 +718,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* *
*/ */
async uploadFileAfterConflict() { async uploadFileAfterConflict() {
const i18n = this._i18n;
if (this.abortUpload) { if (this.abortUpload) {
this.abortUpload = false; this.abortUpload = false;
this.abortUploadButton = false; this.abortUploadButton = false;
...@@ -861,6 +868,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -861,6 +868,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* @param directory * @param directory
*/ */
replaceModalDialog(file, directory) { replaceModalDialog(file, directory) {
const i18n = this._i18n;
this.uploadFileObject = file; this.uploadFileObject = file;
this.uploadFileDirectory = directory; this.uploadFileDirectory = directory;
let rights = this.checkRights(file); let rights = this.checkRights(file);
...@@ -969,6 +977,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -969,6 +977,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* @returns {string} correct cancel text * @returns {string} correct cancel text
*/ */
getCancelText() { getCancelText() {
const i18n = this._i18n;
if (this.fileList.length > 1) { if (this.fileList.length > 1) {
return i18n.t('nextcloud-file-picker.replace-cancel-all'); return i18n.t('nextcloud-file-picker.replace-cancel-all');
} }
...@@ -996,6 +1005,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -996,6 +1005,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* *
*/ */
openAddFolderDialogue() { openAddFolderDialogue() {
const i18n = this._i18n;
if (this._('.addRowAnimation')) { if (this._('.addRowAnimation')) {
this._('.addRowAnimation').classList.remove('addRowAnimation'); this._('.addRowAnimation').classList.remove('addRowAnimation');
} }
...@@ -1015,6 +1025,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1015,6 +1025,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* *
*/ */
addFolder() { addFolder() {
const i18n = this._i18n;
if (this._('#new-folder').value !== "") { if (this._('#new-folder').value !== "") {
let folderName = this._('#new-folder').value; let folderName = this._('#new-folder').value;
if (typeof this.directoryPath === 'undefined') { if (typeof this.directoryPath === 'undefined') {
...@@ -1095,6 +1106,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1095,6 +1106,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
* @returns {string} clickable breadcrumb path * @returns {string} clickable breadcrumb path
*/ */
getBreadcrumb() { getBreadcrumb() {
const i18n = this._i18n;
if (typeof this.directoryPath === 'undefined') { if (typeof this.directoryPath === 'undefined') {
this.directoryPath = ''; this.directoryPath = '';
} }
...@@ -1601,6 +1613,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1601,6 +1613,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
} }
render() { render() {
const i18n = this._i18n;
const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css'); const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
return html` return html`
...@@ -1630,7 +1643,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) { ...@@ -1630,7 +1643,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</div> </div>
<div class="block text-center m-inherit ${classMap({hidden: this.isPickerActive})}"> <div class="block text-center m-inherit ${classMap({hidden: this.isPickerActive})}">
<label class="button-container remember-container"> <label class="button-container remember-container">
Remember me ${i18n.t('nextcloud-file-picker.remember-me')}
<input type="checkbox" id="remember-checkbox" name="remember"> <input type="checkbox" id="remember-checkbox" name="remember">
<span class="checkmark"></span> <span class="checkmark"></span>
</label> </label>
......
packages/file-handling/src/styles.js
View file @ d8440964
...@@ -211,7 +211,7 @@ export function getFileHandlingCss() { ...@@ -211,7 +211,7 @@ export function getFileHandlingCss() {
} }
.tabulator .tabulator-tableHolder { .tabulator .tabulator-tableHolder {
height: unset !important; /*TODO find a better way to do this*/ /* height: unset !important; /*TODO find a better way to do this*/
} }
.tabulator-row .tabulator-responsive-collapse{ .tabulator-row .tabulator-responsive-collapse{
...@@ -226,6 +226,15 @@ export function getFileHandlingCss() { ...@@ -226,6 +226,15 @@ export function getFileHandlingCss() {
font-size: 1.3em; font-size: 1.3em;
margin-top: -8px; margin-top: -8px;
} }
.tabulator-responsive-collapse-toggle-open, .tabulator-responsive-collapse-toggle-close{
width: 100%;
height: 100%;
}
.tabulator-row-handle{
padding: 0px !important;
}
@media only screen @media only screen
and (orientation: portrait) and (orientation: portrait)
......
packages/knowledge-base-web-page-element-view/package.json
View file @ d8440964
...@@ -30,7 +30,8 @@ ...@@ -30,7 +30,8 @@
"rollup-plugin-copy": "^3.1.0", "rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0", "rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1", "rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2" "rollup-plugin-terser": "^7.0.2",
"i18next-scanner": "^3.0.0"
}, },
"dependencies": { "dependencies": {
"@dbp-toolkit/auth": "^0.2.2", "@dbp-toolkit/auth": "^0.2.2",
...@@ -42,6 +43,7 @@ ...@@ -42,6 +43,7 @@
"material-design-icons-svg": "^3.0.0" "material-design-icons-svg": "^3.0.0"
}, },
"scripts": { "scripts": {
"i18next": "i18next-scanner",
"clean": "rm dist/*", "clean": "rm dist/*",
"build": "npm run build-local", "build": "npm run build-local",
"build-local": "rollup -c", "build-local": "rollup -c",
......
packages/knowledge-base-web-page-element-view/src/dbp-knowledge-base-web-page-element-view-demo.js
View file @ d8440964
import {i18n} from './i18n'; import {createInstance} from './i18n';
import {css, html} from 'lit-element'; import {css, html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth'; import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
...@@ -10,7 +10,8 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element"; ...@@ -10,7 +10,8 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
export class KnowledgeBaseWebPageElementViewDemo extends ScopedElementsMixin(DBPLitElement) { export class KnowledgeBaseWebPageElementViewDemo extends ScopedElementsMixin(DBPLitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this._i18n = createInstance();
this.lang = this._i18n.language;
this.entryPointUrl = ''; this.entryPointUrl = '';
this.noAuth = false; this.noAuth = false;
} }
...@@ -35,7 +36,7 @@ export class KnowledgeBaseWebPageElementViewDemo extends ScopedElementsMixin(DBP ...@@ -35,7 +36,7 @@ export class KnowledgeBaseWebPageElementViewDemo extends ScopedElementsMixin(DBP
update(changedProperties) { update(changedProperties) {
changedProperties.forEach((oldValue, propName) => { changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") { if (propName === "lang") {
i18n.changeLanguage(this.lang); this._i18n.changeLanguage(this.lang);
} }
}); });
......
packages/knowledge-base-web-page-element-view/src/i18n.js
View file @ d8440964
import {createInstance} from '@dbp-toolkit/common/i18next.js'; import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
import de from './i18n/de/translation.json'; import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json'; import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en'); export function createInstance() {
\ No newline at end of file return _createInstance({en: en, de: de}, 'de', 'en');
}
\ No newline at end of file
packages/knowledge-base-web-page-element-view/src/knowledge-base-web-page-element-view.js
View file @ d8440964
import {i18n} from './i18n'; import {createInstance} from './i18n';
import {html} from 'lit-element'; import {html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {MiniSpinner} from '@dbp-toolkit/common'; import {MiniSpinner} from '@dbp-toolkit/common';
...@@ -12,7 +12,8 @@ import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element"; ...@@ -12,7 +12,8 @@ import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
export class KnowledgeBaseWebPageElementView extends ScopedElementsMixin(AdapterLitElement) { export class KnowledgeBaseWebPageElementView extends ScopedElementsMixin(AdapterLitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this._i18n = createInstance();
this.lang = this._i18n.language;
this.value = ''; this.value = '';
this.html = ''; this.html = '';
this.entryPointUrl = ''; this.entryPointUrl = '';
...@@ -56,6 +57,8 @@ export class KnowledgeBaseWebPageElementView extends ScopedElementsMixin(Adapter ...@@ -56,6 +57,8 @@ export class KnowledgeBaseWebPageElementView extends ScopedElementsMixin(Adapter
* Loads the data from the web page element * Loads the data from the web page element
*/ */
loadWebPageElement() { loadWebPageElement() {
const i18n = this._i18n;
if (this.auth.token === undefined || this.auth.token === "") { if (this.auth.token === undefined || this.auth.token === "") {
return; return;
} }
...@@ -107,7 +110,7 @@ export class KnowledgeBaseWebPageElementView extends ScopedElementsMixin(Adapter ...@@ -107,7 +110,7 @@ export class KnowledgeBaseWebPageElementView extends ScopedElementsMixin(Adapter
update(changedProperties) { update(changedProperties) {
changedProperties.forEach((oldValue, propName) => { changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") { if (propName === "lang") {
i18n.changeLanguage(this.lang); this._i18n.changeLanguage(this.lang);
} }
switch(propName) { switch(propName) {
......
packages/language-select/src/dbp-language-select-demo.js
View file @ d8440964
...@@ -9,12 +9,12 @@ import {createInstance, setOverrides} from './i18n.js'; ...@@ -9,12 +9,12 @@ import {createInstance, setOverrides} from './i18n.js';
// This is an example on how to override translations at runtime // This is an example on how to override translations at runtime
let OVERRIDES = { let OVERRIDES = {
'de': { 'de': {
'translation': { 'dbp-language-select-display': {
'demo': 'Überschrieben' 'demo': 'Überschrieben'
} }
}, },
'en': { 'en': {
'translation': { 'dbp-language-select-display': {
'demo': 'Overridden' 'demo': 'Overridden'
} }
} }
...@@ -26,7 +26,7 @@ class LanguageSelectDisplay extends AdapterLitElement { ...@@ -26,7 +26,7 @@ class LanguageSelectDisplay extends AdapterLitElement {
super(); super();
this.lang = 'de'; this.lang = 'de';
this._i18n = createInstance(); this._i18n = createInstance();
setOverrides(this._i18n, OVERRIDES); setOverrides(this._i18n, this, OVERRIDES);
} }
static get properties() { static get properties() {
......
packages/matomo/i18next-scanner.config.js
View file @ d8440964
...@@ -6,6 +6,7 @@ module.exports = { ...@@ -6,6 +6,7 @@ module.exports = {
options: { options: {
debug: false, debug: false,
removeUnusedKeys: true, removeUnusedKeys: true,
func: {list: ['i18n.t', '_i18n.t']},
lngs: ['en','de'], lngs: ['en','de'],
resource: { resource: {
loadPath: 'src/i18n/{{lng}}/{{ns}}.json', loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
......
packages/matomo/src/dbp-matomo-demo.js
View file @ d8440964
import {i18n} from './i18n.js'; import {createInstance} from './i18n.js';
import {css, html} from 'lit-element'; import {css, html} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth'; import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
...@@ -12,7 +12,8 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) { ...@@ -12,7 +12,8 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this._i18n = createInstance();
this.lang = this._i18n.language;
this.entryPointUrl = ''; this.entryPointUrl = '';
this.matomoUrl = ''; this.matomoUrl = '';
this.matomoSiteId = -1; this.matomoSiteId = -1;
...@@ -38,9 +39,14 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) { ...@@ -38,9 +39,14 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) {
}; };
} }
connectedCallback() { update(changedProperties) {
super.connectedCallback(); changedProperties.forEach((oldValue, propName) => {
i18n.changeLanguage(this.lang); if (propName === "lang") {
this._i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
} }
track(action, message) { track(action, message) {
......
packages/matomo/src/i18n.js
View file @ d8440964
import {createInstance} from '@dbp-toolkit/common/i18next.js'; import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
import de from './i18n/de/translation.json'; import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json'; import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en'); export function createInstance() {
\ No newline at end of file return _createInstance({en: en, de: de}, 'de', 'en');
}
\ No newline at end of file
packages/matomo/src/i18n/de/translation.json
View file @ d8440964
{ {}
"matomo": {
}
}
\ No newline at end of file
packages/matomo/src/i18n/en/translation.json
View file @ d8440964
{ {}
"matomo": {
}
}
\ No newline at end of file
packages/notification/i18next-scanner.config.js
View file @ d8440964
...@@ -6,6 +6,7 @@ module.exports = { ...@@ -6,6 +6,7 @@ module.exports = {
options: { options: {
debug: false, debug: false,
removeUnusedKeys: true, removeUnusedKeys: true,
func: {list: ['i18n.t', '_i18n.t']},
lngs: ['en','de'], lngs: ['en','de'],
resource: { resource: {
loadPath: 'src/i18n/{{lng}}/{{ns}}.json', loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
......
packages/notification/src/dbp-notification-demo.js
View file @ d8440964
import {i18n} from './i18n'; import {createInstance} from './i18n';
import {send as notify} from '@dbp-toolkit/common/notification'; import {send as notify} from '@dbp-toolkit/common/notification';
import {css, html, LitElement} from 'lit-element'; import {css, html, LitElement} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import {ScopedElementsMixin} from '@open-wc/scoped-elements';
...@@ -9,7 +9,8 @@ import * as commonStyles from "@dbp-toolkit/common/styles"; ...@@ -9,7 +9,8 @@ import * as commonStyles from "@dbp-toolkit/common/styles";
export class NotificationDemo extends ScopedElementsMixin(LitElement) { export class NotificationDemo extends ScopedElementsMixin(LitElement) {
constructor() { constructor() {
super(); super();
this.lang = 'de'; this._i18n = createInstance();
this.lang = this._i18n.language;
} }
static get scopedElements() { static get scopedElements() {
...@@ -24,13 +25,15 @@ export class NotificationDemo extends ScopedElementsMixin(LitElement) { ...@@ -24,13 +25,15 @@ export class NotificationDemo extends ScopedElementsMixin(LitElement) {
}; };
} }
connectedCallback() { update(changedProperties) {
super.connectedCallback(); changedProperties.forEach((oldValue, propName) => {
i18n.changeLanguage(this.lang); if (propName === "lang") {
this._i18n.changeLanguage(this.lang);
}
});
this.updateComplete.then(()=>{ super.update(changedProperties);
}); }
}
static get styles() { static get styles() {
// language=css // language=css
...@@ -42,6 +45,8 @@ export class NotificationDemo extends ScopedElementsMixin(LitElement) { ...@@ -42,6 +45,8 @@ export class NotificationDemo extends ScopedElementsMixin(LitElement) {
} }
render() { render() {
const i18n = this._i18n;
return html` return html`
<section class="section"> <section class="section">
<div class="container"> <div class="container">
......
packages/notification/src/i18n.js
View file @ d8440964
import {createInstance} from '@dbp-toolkit/common/i18next.js'; import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
import de from './i18n/de/translation.json'; import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json'; import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en'); export function createInstance() {
\ No newline at end of file return _createInstance({en: en, de: de}, 'de', 'en');
}
\ No newline at end of file