Skip to content
Snippets Groups Projects
Commit 2822251e authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Refactor clipboard webcomponent

parent dd0896c8
Branches
No related tags found
No related merge requests found
Pipeline #44138 failed
Stage: test
Stage: deploy
Stage: e2e
Show whitespace changes
Inline Side-by-side
Showing
with 187 additions and 788 deletions
packages/app-shell/src/app-shell.js
+ 0
− 1
View file @ 2822251e
......@@ -803,7 +803,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
if (act.subscribe === undefined || !act.subscribe.includes("lang:")) {
elm.setAttribute("lang", this.lang);
}
return elm;
}
......
packages/file-handling/src/clipboard.js
+ 124
− 23
View file @ 2822251e
......@@ -62,8 +62,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
nextcloudName: { type: String, attribute: 'nextcloud-name' },
nextcloudFileURL: { type: String, attribute: 'nextcloud-file-url' },
isFileSource: {type: Boolean, attribute: 'file-sink' },
isFileSink: {type: Boolean, attribute: 'file-source' },
isFileSource: {type: Boolean, attribute: 'file-source' },
isFileSink: {type: Boolean, attribute: 'file-sink' },
};
}
......@@ -327,7 +327,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
}
saveFilesToClipboard(ev)
saveFilesToClipboardEvent(ev)
{
//save it
let data = {};
......@@ -348,6 +348,30 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
}
saveFilesToClipboard()
{
//save it
console.log("clipboard", this.clipboardFiles);
console.log("filesToSave", this.filesToSave);
let data = {};
let files = [];
if (this.clipboardFiles && this.clipboardFiles.files.length !== 0) {
files = files.concat(this.clipboardFiles.files);
files = files.concat(this.filesToSave);
} else {
files = files.concat(this.filesToSave);
}
console.log("files", files);
if (this.filesToSave && this.filesToSave.length !== 0) {
data = {"files": files};
this.sendSetPropertyEvent('clipboard-files', data);
const event = new CustomEvent("dbp-clipboard-file-picker-file-uploaded",
{ bubbles: true, composed: true });
this.dispatchEvent(event);
}
}
finishedSaveFilesToClipboard(ev) {
send({
"summary": i18n.t('clipboard.saved-files-title', {count: ev.detail.count}),
......@@ -386,6 +410,20 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
clearClipboard() {
/* this.tabulatorTable.deleteRow(this.tabulatorTable.getSelectedRows());
let data = [];
this.tabulatorTable.getRows().forEach(row =>
console.log("row.file", row.file) &&
data.push(row.file)
);
console.log("data", data);
//TODO Check if file is set then push data to clipboard and send notification
//TODO unterscheide zwischen alle files löschen und nur selected files löschen
//TODO find matomo error !!!!
//TODO filesink filesink error
*/
if(this.tabulatorTable && this.tabulatorTable.getSelectedData().length > 0) {
let data = {"files": this.clipboardFiles.files};
this.tabulatorTable.getSelectedData().forEach(toRemove =>
......@@ -421,7 +459,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
openFilesink() {
const fileSink = this._("#file-source");
if (fileSink) {
this._("#file-source").setAttribute("dialog-open", "");
this._("#file-source").setAttribute(^^"dialog-open", "");
}
}
......@@ -464,7 +502,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
text="${i18n.t('clipboard.upload-area-text')}"
button-label="${i18n.t('clipboard.upload-button-label')}"
show-clipboard
@dbp-file-source-file-selected="${this.saveFilesToClipboard}"
@dbp-file-source-file-selected="${this.saveFilesToClipboardEvent}"
@dbp-nextcloud-file-picker-number-files="${this.finishedSaveFilesToClipboard}"
@dbp-file-source-file-upload-finished="${this.finishedSaveFilesToClipboard}"
></dbp-file-source>
......@@ -485,26 +523,72 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
getClipboardSink() {
const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
let additionalButtons = this.showAdditionalButtons ? this.getAdditionalButtons() : "";
return html`
//todo header + table
<!-- Clipboard Footer -->
<div class="wrapper">
<div class="content">
<h3>${i18n.t('clipboard.sink-title')}</h3>
<p>${i18n.t('clipboard.sink-body')}<br><br></p>
<div class="warning-container">
<dbp-icon name="warning" class="warning-icon"></dbp-icon>
<p>${i18n.t('clipboard.warning')}</p>
</div>
<div class="container">
${additionalButtons}
<link rel="stylesheet" href="${tabulatorCss}">
<div class="table-wrapper">
<label class="button-container select-all-icon">
<input type="checkbox" id="select_all" name="select_all" value="select_all" @click="${() => {this.selectAllFiles();}}">
<span class="checkmark"></span>
</label>
<table id="clipboard-content-table" class="force-no-select"></table>
</div>
</div>
</div>
<div class="clipboard-footer">
<button class="button select-button is-primary" ?disabled="${this.clipboardSelectBtnDisabled}"
@click="${() => {this.sendClipboardFiles(this.tabulatorTable.getSelectedData());}}">${i18n.t('nextcloud-file-picker.select-files')}
<button class="button select-button is-primary" title="${i18n.t('clipboard.sink-btn', {count: this.filesToSave.length})}"
@click="${() => {this.saveFilesToClipboard();}}"> <dbp-icon class="nav-icon" name="clipboard"></dbp-icon> ${i18n.t('clipboard.sink-btn', {count: this.filesToSave.length})}
</button>
</div>
</div>
`;
}
getClipboardSource() {
const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
let additionalButtons = this.showAdditionalButtons ? this.getAdditionalButtons() : "";
return html`
//todo header + table
<!-- Clipboard Footer -->
<div class="wrapper">
<div class="content">
<h3>${i18n.t('clipboard.source-title')}</h3>
<p>${i18n.t('clipboard.source-body')}</p>
<div class="warning-container">
<dbp-icon name="warning" class="warning-icon"></dbp-icon>
<p>${i18n.t('clipboard.warning')}</p>
</div>
<div class="container">
${additionalButtons}
<link rel="stylesheet" href="${tabulatorCss}">
<div class="table-wrapper">
<label class="button-container select-all-icon">
<input type="checkbox" id="select_all" name="select_all" value="select_all" @click="${() => {this.selectAllFiles();}}">
<span class="checkmark"></span>
</label>
<table id="clipboard-content-table" class="force-no-select"></table>
</div>
</div>
</div>
<div class="clipboard-footer">
<button class="button select-button is-primary" ?disabled="${this.clipboardSelectBtnDisabled}"
@click="${() => {this.sendClipboardFiles(this.tabulatorTable.getSelectedData());}}">${i18n.t('nextcloud-file-picker.select-files')}
@click="${() => {this.sendClipboardFiles(this.tabulatorTable.getSelectedData());}}"> ${i18n.t('clipboard.source-btn')}
</button>
</div>
</div>
`;
}
......@@ -604,7 +688,28 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
.clipboard-footer {
align-self: end;
background-color: white;
width: 100%;
padding-top: 10px;
display: flex;
align-items: end;
flex-direction: column;
}
.wrapper{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.content{
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media only screen
......@@ -659,10 +764,6 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
margin-top: 5px;
}
.clipboard-footer {
padding-top: 10px;
align-self: center;
}
}
`;
......
packages/file-handling/src/dbp-file-handling-clipboard.js deleted 100644 → 0
+ 0
− 722
View file @ dd0896c8
import {i18n} 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 {Icon, MiniSpinner} from '@dbp-toolkit/common';
import * as commonStyles from '@dbp-toolkit/common/styles';
import * as fileHandlingStyles from './styles';
import Tabulator from "tabulator-tables";
import {humanFileSize} from "@dbp-toolkit/common/i18next";
import {classMap} from 'lit-html/directives/class-map.js';
import * as commonUtils from "@dbp-toolkit/common/utils";
import {name as pkgName} from "../package.json";
import {send} from "@dbp-toolkit/common/notification";
/**
* Clipboard web component
*/
export class FileHandlingClipboard extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
this.lang = 'de';
this.authUrl = '';
this.allowedMimeTypes = '*/*';
this.clipboardSource = false;
this.clipboardFiles = {files: ''};
this.clipboardSelectBtnDisabled = true;
this.clipboardSelectBtnDisabled = true;
this.tabulatorTable = null;
this.maxSelectedItems = true;
this._onReceiveBeforeUnload = this.onReceiveBeforeUnload.bind(this);
this.filesToSave = null;
this.numberOfSelectedFiles = 0;
this.nextcloudAuthUrl = '';
this.nextcloudWebDavUrl = '';
this.nextcloudName ='Nextcloud';
this.nextcloudPath = '';
this.nextcloudFileURL = '';
// To avoid a cyclic dependency
import('./file-sink').then(({ FileSink }) => this.defineScopedElement('dbp-file-sink', FileSink));
}
static get scopedElements() {
return {
'dbp-icon': Icon,
'dbp-mini-spinner': MiniSpinner,
};
}
/**
* See: https://lit-element.polymer-project.org/guide/properties#initialize
*/
static get properties() {
return {
...super.properties,
lang: { type: String },
authUrl: { type: String, attribute: 'auth-url' },
allowedMimeTypes: { type: String, attribute: 'allowed-mime-types' },
clipboardSelectBtnDisabled: { type: Boolean, attribute: true },
clipboardFiles: {type: Object, attribute: 'clipboard-files'},
clipboardSource: {type: Boolean, attribute: 'clipboard-source'},
filesToSave: {type: Object, attribute: 'files-to-save'},
numberOfSelectedFiles: {type: Number, attribute: false },
nextcloudAuthUrl: {type: String, attribute: 'nextcloud-auth-url'},
nextcloudWebDavUrl: {type: String, attribute: 'nextcloud-web-dav-url'},
nextcloudName: {type: String, attribute: 'nextcloud-name'},
nextcloudFileURL: {type: String, attribute: 'nextcloud-file-url'},
};
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
switch (propName) {
case "lang":
i18n.changeLanguage(this.lang);
break;
case "clipboardFiles":
this.generateClipboardTable();
break;
}
});
super.update(changedProperties);
}
disconnectedCallback() {
//We doesn't want to deregister this event, because we want to use this event over activities
//window.removeEventListener('beforeunload', this._onReceiveBeforeUnload);
super.disconnectedCallback();
}
connectedCallback() {
super.connectedCallback();
const that = this;
this.updateComplete.then(() => {
if (this.clipboardSource) {
// see: http://tabulator.info/docs/4.7
this.tabulatorTable = new Tabulator(this._("#clipboard-content-table"), {
layout: "fitColumns",
selectable: this.maxSelectedItems,
selectableRangeMode: "drag",
responsiveLayout: true,
placeholder: i18n.t('nextcloud-file-picker.no-data-type'),
resizableColumns: false,
columns: [
{
title: "",
field: "type",
align: "center",
headerSort: false,
width: 50,
responsive: 1,
formatter: (cell, formatterParams, onRendered) => {
const icon_tag = that.getScopedTagName("dbp-icon");
return `<${icon_tag} name="empty-file" class="nextcloud-picker-icon"></${icon_tag}>`;
}
},
{
title: i18n.t('nextcloud-file-picker.filename'),
responsive: 0,
widthGrow: 5,
minWidth: 150,
field: "name",
sorter: "alphanum",
formatter: (cell) => {
let data = cell.getRow().getData();
if (data.edit) {
cell.getElement().classList.add("fokus-edit");
}
return cell.getValue();
}
},
{
title: i18n.t('nextcloud-file-picker.size'),
responsive: 4,
widthGrow: 1,
minWidth: 50,
field: "size",
formatter: (cell, formatterParams, onRendered) => {
return cell.getRow().getData().type === "directory" ? "" : humanFileSize(cell.getValue());
}
},
{
title: i18n.t('nextcloud-file-picker.mime-type'),
responsive: 2,
widthGrow: 1,
minWidth: 20,
field: "type",
formatter: (cell, formatterParams, onRendered) => {
if (typeof cell.getValue() === 'undefined') {
return "";
}
const [, fileSubType] = cell.getValue().split('/');
return fileSubType;
}
},
{
title: i18n.t('nextcloud-file-picker.last-modified'),
responsive: 3,
widthGrow: 1,
minWidth: 150,
field: "lastModified",
sorter: (a, b, aRow, bRow, column, dir, sorterParams) => {
const a_timestamp = Date.parse(a);
const b_timestamp = Date.parse(b);
return a_timestamp - b_timestamp;
},
formatter: function (cell, formatterParams, onRendered) {
const timestamp = new Date(cell.getValue());
const year = timestamp.getFullYear();
const month = ("0" + (timestamp.getMonth() + 1)).slice(-2);
const date = ("0" + timestamp.getDate()).slice(-2);
const hours = ("0" + timestamp.getHours()).slice(-2);
const minutes = ("0" + timestamp.getMinutes()).slice(-2);
return date + "." + month + "." + year + " " + hours + ":" + minutes;
}
},
{title: "file", field: "file", visible: false}
],
initialSort: [
{column: "name", dir: "asc"},
{column: "type", dir: "asc"},
],
rowClick: (e, row) => {
this.showSelectAllButton = !(this.tabulatorTable !== null
&& this.tabulatorTable.getSelectedRows().length === this.tabulatorTable.getRows().filter(row => this.checkFileType(row.getData())).length);
this.numberOfSelectedFiles = this.tabulatorTable !== null ? this.tabulatorTable.getSelectedRows().length : 0;
if (this.tabulatorTable !== null
&& this.tabulatorTable.getSelectedRows().length === this.tabulatorTable.getRows().filter(row => this.checkFileType(row.getData())).length) {
this._("#select_all").checked = true;
} else {
this._("#select_all").checked = false;
}
},
rowSelectionChanged: (data, rows) => {
this.clipboardSelectBtnDisabled = !(this.tabulatorTable && this.tabulatorTable.getSelectedRows().length > 0);
}
});
}
});
if (!this.clipboardSource) {
if (!window.clipboardWarning) {
window.addEventListener('beforeunload', this._onReceiveBeforeUnload, false);
window.clipboardWarning = true;
}
}
}
/**
* Select or deselect all files from tabulator table
*
*/
selectAllFiles() {
let maxSelected = this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)).length;
let selected = this.tabulatorTable.getSelectedRows().length;
if (selected === maxSelected) {
this.tabulatorTable.getSelectedRows().forEach(row => row.deselect());
this.numberOfSelectedFiles = 0;
} else {
this.tabulatorTable.selectRow(this.tabulatorTable.getRows().filter(row => row.getData().type != 'directory' && this.checkFileType(row.getData(), this.allowedMimeTypes)));
this.numberOfSelectedFiles = maxSelected;
}
}
checkFileType(file) {
// check if file is allowed
const [fileMainType, fileSubType] = file.type.split('/');
const mimeTypes = this.allowedMimeTypes.split(',');
let deny = true;
mimeTypes.forEach((str) => {
const [mainType, subType] = str.split('/');
deny = deny && ((mainType !== '*' && mainType !== fileMainType) || (subType !== '*' && subType !== fileSubType));
});
if (deny) {
console.log(`mime type ${file.type} of file '${file.name}' is not compatible with ${this.allowedMimeTypes}`);
return false;
}
return true;
}
generateClipboardTable() {
if (this.clipboardFiles.files) {
let data = [];
for (let i = 0; i < this.clipboardFiles.files.length; i++) {
data[i] = {
name: this.clipboardFiles.files[i].name,
size: this.clipboardFiles.files[i].size,
type: this.clipboardFiles.files[i].type,
lastModified: this.clipboardFiles.files[i].lastModified,
file: this.clipboardFiles.files[i]
};
}
if (this.tabulatorTable !== null) {
this.tabulatorTable.clearData();
this.tabulatorTable.setData(data);
}
}
}
async sendClipboardFiles(files) {
if (files.length > 0) {
for (let i = 0; i < files.length; i ++) {
await this.sendFileEvent(files[i].file);
}
this.sendSetPropertyEvent(
'analytics-event',
{category: 'FileHandlingClipboard', action: 'LoadFilesFromClipboard', name: files.length});
}
this.tabulatorTable.deselectRow();
//this.closeDialog();
}
async sendFileEvent(file) {
const data = {"file": file, "data": file};
const event = new CustomEvent("dbp-clipboard-file-picker-file-downloaded",
{ "detail": data, bubbles: true, composed: true });
this.dispatchEvent(event);
}
/**
* Decides if the "beforeunload" event needs to be canceled
*
* @param event
*/
onReceiveBeforeUnload(event) {
// we don't need to stop if there are no signed files
if (this.clipboardFiles.files.length === 0) {
return;
}
// we need to handle custom events ourselves
if (event.target && event.target.activeElement && event.target.activeElement.nodeName) {
send({
"summary": i18n.t('clipboard.file-warning'),
"body": i18n.t('clipboard.file-warning-body', {count: this.clipboardFiles.files.length}),
"type": "warning",
"timeout": 5,
});
if (!event.isTrusted) {
// note that this only works with custom event since calls of "confirm" are ignored
// in the non-custom event, see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
const result = confirm(i18n.t('page-leaving-warn-dialogue'));
// don't stop the page leave if the user wants to leave
if (result) {
return;
}
}
// Cancel the event as stated by the standard
event.preventDefault();
// Chrome requires returnValue to be set
event.returnValue = '';
}
}
saveFilesToClipboard() {
// save it
let data = {};
if (this.filesToSave && this.filesToSave.length !== 0) {
data = {"files": this.filesToSave};
this.sendSetPropertyEvent('clipboard-files', data);
const event = new CustomEvent("dbp-clipboard-file-picker-file-uploaded",
{ bubbles: true, composed: true });
this.dispatchEvent(event);
send({
"summary": i18n.t('file-sink.save-to-clipboard-title'),
"body": i18n.t('file-sink.save-to-clipboard-body', {count: this.filesToSave.length}),
"type": "success",
"timeout": 5,
});
this.sendSetPropertyEvent(
'analytics-event',
{category: 'FileHandlingClipboard', action: 'SaveFilesToClipboard', name: this.filesToSave.length});
}
}
getClipboardFileList() {
let files = [];
for(let i = 0; i < this.clipboardFiles.files.length; i ++)
{
files[i] = html`
<div class="clipboard-list">
<div class="clipboard-list-name"><strong>${this.clipboardFiles.files[i].name}</strong></div>
<div class="clipboard-list-size">${humanFileSize(this.clipboardFiles.files[i].size)}</div>
</div>`;
}
return files;
}
/**
* Open Filesink for multiple files
*/
async openClipboardFileSink() {
this._("#file-sink-clipboard").files = Object.create(this.clipboardFiles.files);
console.log("------ this.clipboardFiles.files;", this.clipboardFiles.files);
this._("#file-sink-clipboard").openDialog();
}
static get styles() {
// language=css
return css`
${commonStyles.getGeneralCSS()}
${commonStyles.getButtonCSS()}
${commonStyles.getTextUtilities()}
${commonStyles.getModalDialogCSS()}
${commonStyles.getRadioAndCheckboxCss()}
${fileHandlingStyles.getFileHandlingCss()}
.clipboard-container {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--FUPadding, 20px);
width: 100%;
height: 100%;
position: relative;
}
.clipboard-container .wrapper {
overflow-y: auto;
text-align: center;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.clipboard-container .wrapper.table {
justify-content: start;
}
.clipboard-container .wrapper .inner {
overflow-y: auto;
text-align: center;
width: 100%;
}
.clipboard-footer {
align-self: end;
}
#select-all-wrapper {
text-align: right;
}
.clipboard-container {
display: flex;
flex-direction: column;
justify-content: center;
}
.clipboard-container.table {
justify-content: start;
}
.clipboard-container .inner {
overflow-y: scroll;
text-align: center;
width: 100%;
}
.warning-icon {
font-size: 2rem;
padding: 0 1rem;
padding-left: 0;
}
.clipboard-btn {
margin-bottom: 2rem;
}
.warning-container {
display: flex;
text-align: left;
margin: auto;
margin-top: 2rem;
margin-bottom: 2rem;
}
.clipboard-data {
text-align: left;
}
.clipboard-data h4 {
margin-top: 2rem;
margin-bottom: 1rem;
}
.clipboard-data p {
margin-top: 1rem;
margin-bottom: 1rem;
}
.clipboard-list {
padding: 1rem 0;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
}
.button-wrapper {
display: flex;
justify-content: space-between;
}
.border {
border-top: solid 1px #888;
}
.clipboard-list-name {
width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.checkmark{
height: 20px;
width:20px;
}
.button-container .checkmark::after{
left: 8px;
top: 3px;
width: 4px;
height: 11px;
}
.table-wrapper{
position: relative;
}
.select-all-icon{
position: absolute;
top: 17px;
left: 10px;
z-index: 100;
height: 40px;
}
.flex-container{
display: flex;
justify-content: space-between;
}
@media only screen
and (orientation: portrait)
and (max-device-width: 765px) {
.clipboard-container p, .clipboard-container h3 {
text-align: center;
}
.warning-container {
flex-direction: column;
align-items: center;
}
.warning-icon {
margin-bottom: 1rem;
padding: 0;
}
.clipboard-footer {
padding-top: 10px;
align-self: center;
}
.button-wrapper {
flex-direction: column;
}
.clipboard-container .inner {
overflow-y: auto;
}
.flex-container{
justify-content: space-between;
display: flex;
}
.btn-flex-container-mobile{
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.select-btn-wrapper{
width: 100%;
display: flex;
justify-content: end;
float: none;
}
.flex-container{
display: block;
}
.checkmark{
height: 30px;
width:30px;
}
.button-container .checkmark::after{
left: 11px;
top: 4px;
width: 8px;
height: 15px;
}
.select-all-icon{
top: 10px;
left: 10px;
}
.btn-flex-container-mobile{
flex-direction: column;
}
.btn-flex-container-mobile button:nth-child(2){
margin-top: 5px;
}
}
`;
}
render() {
const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
if (this.clipboardSource) {
return html`
<link rel="stylesheet" href="${tabulatorCss}">
<div class="block clipboard-container">
<div class="wrapper ${classMap({"table": this.clipboardFiles.files.length !== 0})}">
<div class="inner">
<h3>${i18n.t('file-source.clipboard-title')}</h3>
<p>${i18n.t('file-source.clipboard-body')}<br><br></p>
<p class="${classMap({"hidden": this.clipboardFiles.files.length !== 0})}">
${i18n.t('file-source.clipboard-no-files')}</p>
<div class="clipboard-table">
<div class="flex-container">
<div class="btn-flex-container-mobile">
<button @click="${() => { this.openFilesink(); }}"
class="button" title="${i18n.t('add-files')}">
<dbp-icon class="nav-icon" name="clipboard"></dbp-icon> ${i18n.t('add-files-btn')}
</button>
<button @click="${() => { this.clearClipboard(); }}"
class="button" title="${(this.numberOfSelectedFiles > 0) ? i18n.t('remove-count', {count: this.numberOfSelectedFiles}) : i18n.t('remove-all')}"
?disabled="${this.clipboardFiles.files.length === 0}">
${(this.numberOfSelectedFiles > 0) ? i18n.t('remove-count-btn', {count: this.numberOfSelectedFiles}) : i18n.t('remove-all-btn')}
</button>
</div>
<div class="btn-flex-container-mobile">
<button @click="${() => { this.saveFilesFromClipboard(); }}"
?disabled="${this.clipboardFiles.files.length === 0}"
class="button" title="${(this.numberOfSelectedFiles > 0) ? i18n.t('save-count', {count: this.numberOfSelectedFiles}) : i18n.t('save-all')}">
${(this.numberOfSelectedFiles > 0) ? i18n.t('save-count-btn', {count: this.numberOfSelectedFiles}) : i18n.t('save-all-btn')}
</button>
</div>
</div>
<dbp-file-sink id="file-sink-clipboard"
context="${(this.numberOfSelectedFiles > 0) ? i18n.t('save-count', {count: this.numberOfSelectedFiles}) : i18n.t('save-all')}"
filename="clipboard-documents.zip"
enabled-targets="local,nextcloud,clipboard"
show-clipboard
subscribe="nextcloud-auth-url:nextcloud-web-app-password-url,nextcloud-web-dav-url:nextcloud-webdav-url,nextcloud-name:nextcloud-name,nextcloud-file-url:nextcloud-file-url"
lang="${this.lang}"
></dbp-file-sink>
<div class="table-wrapper">
<label class="button-container select-all-icon">
<input type="checkbox" id="select_all" name="select_all" value="select_all" @click="${() => {this.selectAllFiles();}}">
<span class="checkmark"></span>
</label>
<table id="clipboard-content-table" class="force-no-select"></table>
</div>
</div>
</div>
</div>
<div class="clipboard-footer ${classMap({"hidden": this.clipboardFiles.files.length === 0})}">
<button class="button select-button is-primary" ?disabled="${this.clipboardSelectBtnDisabled}"
@click="${() => {
this.sendClipboardFiles(this.tabulatorTable.getSelectedData());
}}">${i18n.t('nextcloud-file-picker.select-files')}
</button>
</div>
</div>
`;
} else {
return html`
<div class="block clipboard-container ${classMap({"table": this.clipboardFiles && this.clipboardFiles.files.length !== 0})}">
<div class="inner">
<h3>${i18n.t('clipboard.save-to-clipboard-title')}</h3>
<p>${i18n.t('file-sink.save-to-clipboard-text')}</p>
<div class="warning-container">
<dbp-icon name="warning" class="warning-icon"></dbp-icon>
<p>${i18n.t('file-sink.save-to-clipboard-warning')}</p>
</div>
<!--
<div class="${classMap({"button-wrapper": this.clipboardFiles.files.length !== 0})}">
<button id="clipboard-download-button"
class="button is-right clipboard-btn ${classMap({"hidden": this.clipboardFiles.files.length === 0})}"
@click="${this.openClipboardFileSink}">
${i18n.t('clipboard.save-from-clipboard-btn')}
</button>
<button class="button is-primary clipboard-btn"
?disabled="${this.disabled}"
@click="${() => { this.saveFilesToClipboard(); }}">
${this.buttonLabel || i18n.t('file-sink.save-to-clipboard-btn', {count:this.filesToSave ? this.filesToSave.length : 0})}
</button>
</div>
<div class="border ${classMap({"hidden": this.clipboardFiles.files.length === 0})}">
<div class="clipboard-data ${classMap({"hidden": this.clipboardFiles.files.length === 0})}">
<h4>${i18n.t('file-sink.clipboard-files', {count: this.clipboardFiles.files.length})}</h4>
<dbp-file-sink id="file-sink-clipboard"
context="${i18n.t('clipboard.save-files-from-clipboard', {count: this.clipboardFiles ? this.clipboardFiles.files.length : 0})}"
filename="clipboard-documents.zip"
enabled-targets="local,nextcloud"
nextcloud-auth-url="${this.nextcloudAuthUrl}"
nextcloud-web-dav-url="${this.nextcloudWebDavUrl}"
nextcloud-name="${this.nextcloudName}"
nextcloud-file-url="${this.nextcloudFileURL}"
fullsize-modal="true"
lang="${this.lang}"
></dbp-file-sink>
<details>
<summary>Dateien anzeigen</summary>
<p>${i18n.t('file-sink.clipboard-files-overwrite')}</p>
${this.getClipboardFileList()}
</details>
</div>
-->
</div>
</div>
`;
}
}
}
packages/file-handling/src/file-sink.js
+ 4
− 4
View file @ 2822251e
......@@ -135,9 +135,9 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
if (this.files.length !== 0 && !this.isDialogOpen) {
this.openDialog();
if (this.enabledTargets.includes("clipboard")) {
const clipboardSink = this._("#clipboard-file-sink");
const clipboardSink = this._("#clipboard-file-picker");
if (clipboardSink) {
this._("#clipboard-file-sink").filesToSave = this.files;
this._("#clipboard-file-picker").filesToSave = [...this.files];
}
}
}
......@@ -237,12 +237,12 @@ export class FileSink extends ScopedElementsMixin(DBPLitElement) {
if (this.enabledTargets.includes('clipboard')) {
return html`
<dbp-clipboard
id="clipboard-file-sink"
id="clipboard-file-picker"
subscribe="clipboard-files:clipboard-files"
show-additional-buttons
file-sink
lang="${this.lang}"
auth-url="${this.nextcloudAuthUrl}"
allowed-mime-types="${this.allowedMimeTypes}"
nextcloud-auth-url="${this.nextcloudAuthUrl}"
nextcloud-web-dav-url="${this.nextcloudWebDavUrl}"
nextcloud-name="${this.nextcloudName}"
......
packages/file-handling/src/i18n/de/translation.json
+ 56
− 35
View file @ 2822251e
......@@ -17,10 +17,6 @@
"nav-local": "Lokaler Computer",
"no-usable-files-in-zip": "ZIP Datei enthält keine verwendbaren Dateien",
"no-usable-files-hint": "Laden Sie eine ZIP Datei mit Dateien von folgendem Typ hoch: ",
"clipboard-title": "Von der Zwischenablage auswählen",
"clipboard-body": "Hier können Sie zuvor temporär abgelegte Dateien auswählen.",
"clipboard-select-btn": "Auswählen",
"clipboard-no-files": "Aktuell befinden sich keine Dateien in der Zwischenablage.",
"clipboard": "Zwischenablage"
},
"file-sink": {
......@@ -33,16 +29,6 @@
"upload-success-title": "Erfolgreich hochgeladen",
"upload-success-body": "Sie haben {{count}} Datei erfolgreich in {{name}} hochgeladen.",
"upload-success-body_plural": "Sie haben {{count}} Dateien erfolgreich in {{name}} hochgeladen.",
"save-to-clipboard-title": "Erfolgreich abgelegt",
"save-to-clipboard-body": "Sie haben {{count}} Datei in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
"save-to-clipboard-body_plural": "Sie haben {{count}} Dateien in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
"save-to-clipboard-btn": "{{count}} Datei ablegen",
"save-to-clipboard-btn_plural": "{{count}} Dateien ablegen",
"save-to-clipboard-text": "Hier können Sie Dateien temporär ablegen.",
"save-to-clipboard-warning": "Vorsicht! Wenn Sie den Browser schließen, die Seite neu laden oder neue Dateien hinzufügen, wird die bestehende Zwischenablage automatisch verworfen!",
"clipboard-files": "Aktuell ist eine Datei in der Zwischenablage vorhanden",
"clipboard-files_plural": "Aktuell sind {{count}} Dateien in der Zwischenablage vorhanden",
"clipboard-files-overwrite": "Folgende Dateien werden verworfen, wenn Sie neue Dateien ins Zwischenablage legen:",
"clipboard": "Zwischenablage"
},
"nextcloud-file-picker": {
......@@ -99,14 +85,6 @@
"abort-message": "Vorgang wurde abgebrochen."
},
"clipboard": {
"file-warning": "Achtung!",
"file-warning-body": "Es befindet sich noch eine Datei in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
"file-warning-body_plural": "Es befinden sich noch {{count}} Dateien in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
"save-files-from-clipboard": "Eine Datei aus der Zwischenablage speichern",
"save-files-from-clipboard_plurafile-sinkl": "{{count}} Dateien aus der Zwischenablage speichern",
"save-from-clipboard": "Aktuellen Inhalt aus der Zwischenablage speichern:",
"save-from-clipboard-btn": "Zwischenablage sichern",
"save-to-clipboard-title": "Dateien in der Zwischenablage ablegen",
"add-files": "Dateien der Zwischenablage hinzufügen",
"add-files-btn": "Dateien hinzufügen",
"remove-all": "Alle Dateien aus der Zwischenablage entfernen.",
......@@ -117,18 +95,6 @@
"remove-count-btn_plural": "{{count}} Dateien entfernen",
"save-all": "Alle Dateien aus der Zwischenablage speichern",
"save-all-btn": "Alle sichern",
"upload-area-text": "Sie können in diesem Bereich Dokumente mit einer Maximalgröße von bis zu 32MB pro Dokument per Drag & Drop oder per Direktauswahl hochladen.",
"upload-button-label": "Dateien auswählen",
"clear-clipboard-title": "Zwischenablage geleert",
"clear-clipboard-body": "Die Zwischenablage wurde erfolgreich geleert.",
"clear-count-clipboard-title": "Datei entfernt",
"clear-count-clipboard-title_plural": "Dateien entfernt",
"clear-count-clipboard-body": "Eine Datei wurde erfolgreich aus der Zwischenablage entfernt.",
"clear-count-clipboard-body_plural": "{{count}} Dateien wurde erfolgreich aus der Zwischenablage entfernt.",
"saved-files-title": "Datei erfolgreich abgelegt",
"saved-files-title_plural": "Dateien erfolgreich abgelegt",
"saved-files-body": "Eine Datei wurde erfolgreich temporär in der Zwischenablage abgelegt und kann jetzt innerhalb dieser Applikation verwendet werden.",
"saved-files-body_plural": "{{count}} Dateien wurde erfolgreich temporär in der Zwischenablage abgelegt und können jetzt innerhalb dieser Applikation verwendet werden.",
"save-count-btn": "Datei speichern",
"save-count-btn_plural": "{{count}} Dateien speichern",
"save-count": "Eine Datei aus der Zwischenablage speichern",
......@@ -137,10 +103,65 @@
"file-size": "Größe",
"file-type": "Art",
"file-mod": "Geändert",
"no-data": "Aktuell befinden sich keine Dateien in der Zwischenablage.",
"saved-files-title": "Datei erfolgreich abgelegt",
"saved-files-title_plural": "Dateien erfolgreich abgelegt",
"saved-files-body": "Eine Datei wurde erfolgreich temporär in der Zwischenablage abgelegt und kann jetzt innerhalb dieser Applikation verwendet werden.",
"saved-files-body_plural": "{{count}} Dateien wurde erfolgreich temporär in der Zwischenablage abgelegt und können jetzt innerhalb dieser Applikation verwendet werden.",
"clear-clipboard-title": "Zwischenablage geleert",
"clear-clipboard-body": "Die Zwischenablage wurde erfolgreich geleert.",
"clear-count-clipboard-title": "Datei entfernt",
"clear-count-clipboard-title_plural": "Dateien entfernt",
"clear-count-clipboard-body": "Eine Datei wurde erfolgreich aus der Zwischenablage entfernt.",
"clear-count-clipboard-body_plural": "{{count}} Dateien wurde erfolgreich aus der Zwischenablage entfernt.",
"file-warning": "Achtung!",
"file-warning-body": "Es befindet sich noch eine Datei in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
"file-warning-body_plural": "Es befinden sich noch {{count}} Dateien in der Zwischenablage. Die Zwischenablage wird beim Verlassen der Seite verworfen.",
"upload-area-text": "Sie können in diesem Bereich Dokumente per Drag & Drop oder per Direktauswahl hochladen.",
"upload-button-label": "Dateien auswählen",
"warning": "Vorsicht! Wenn Sie den Browser schließen, die Seite neu laden oder neue Dateien hinzufügen, wird die bestehende Zwischenablage automatisch verworfen!",
"source-title": "Von der Zwischenablage auswählen",
"source-body": "Hier können Sie zuvor temporär abgelegte Dateien auswählen.",
"source-btn": "Dateien auswählen",
"sink-title": "Dateien in der Zwischenablage ablegen",
"sink-body": "Hier können Sie Dateien temporär in der Zwischenablage ablegen.",
"sink-btn": "{{count}} Datei ablegen",
"sink-btn_plural": "{{count}} Dateien ablegen"
},
"clipboard2": {
"save-files-from-clipboard": "Eine Datei aus der Zwischenablage speichern",
"save-files-from-clipboard_plurafile-sinkl": "{{count}} Dateien aus der Zwischenablage speichern",
"save-from-clipboard": "Aktuellen Inhalt aus der Zwischenablage speichern:",
"save-from-clipboard-btn": "Zwischenablage sichern",
"upload-area-text": "Sie können in diesem Bereich Dokumente mit einer Maximalgröße von bis zu 32MB pro Dokument per Drag & Drop oder per Direktauswahl hochladen.",
"upload-button-label": "Dateien auswählen",
"select-all": "Alle auswählen",
"select-all-title": "Alle verfügbaren Dateien in diesem Ordner auswählen",
"select-nothing": "Nichts auswählen",
"select-nothing-title": "Alle gewählten Dateien nicht mehr selektieren",
"no-data": "Keine Dateien vorhanden"
"success-save-to-clipboard-title": "Erfolgreich abgelegt",
"success-save-to-clipboard-body": "Sie haben {{count}} Datei in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
"success-save-to-clipboard-body_plural": "Sie haben {{count}} Dateien in der Zwischenablage temporär abgelegt. Vergessen Sie nicht diese dauerhaft zu speichern.",
"clipboard-files": "Aktuell ist eine Datei in der Zwischenablage vorhanden",
"clipboard-files_plural": "Aktuell sind {{count}} Dateien in der Zwischenablage vorhanden",
"clipboard-files-overwrite": "Folgende Dateien werden verworfen, wenn Sie neue Dateien ins Zwischenablage legen:",
"clipboard": "Zwischenablage",
"clipboard-no-files": "Aktuell befinden sich keine Dateien in der Zwischenablage."
}
}
packages/file-handling/src/i18n/en/translation.json
+ 1
− 1
View file @ 2822251e
......@@ -98,7 +98,7 @@
"abort": "Cancel process",
"abort-message": "The process was canceled."
},
"clipboard": {
"clipboard2": {
"file-warning": "Attention!",
"file-warning-body": "There is still a file on the clipboard. The clipboard is discarded when you exit the page.",
"file-warning-body_plural": "There are still {{count}} files on the clipboard. The clipboard is discarded when you exit the page.",
......
packages/file-handling/src/styles.js
+ 2
− 2
View file @ 2822251e
......@@ -83,7 +83,7 @@ export function getFileHandlingCss() {
Picker Styles
\\**************************/
#nextcloud-file-picker {
#nextcloud-file-picker, #clipboard-file-picker {
width: 100%;
height: 100%;
margin: var(--FUMargin, 0px);
......@@ -278,7 +278,7 @@ export function getFileHandlingCss() {
height: 20px;
}
#nextcloud-file-picker{
#nextcloud-file-picker, #clipboard-file-picker{
padding: 0px;
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment