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

Target

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