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
Commits on Source (13)
import {html, LitElement, css} from 'lit-element';
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
import {until} from 'lit-html/directives/until.js';
// import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
// import {until} from 'lit-html/directives/until.js';
import * as commonUtils from '../utils.js';
import {name as pkgName} from './../package.json';
// Use in case the icon fails to load
const errorIcon = `
<svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g>
<path d="M38.2,98.7c-1.1,0-2.2-0.6-2.8-1.6c-0.5-0.8-0.6-1.8-0.3-2.6l8.9-37.8H24.5c-1.2,0-2.2-0.6-2.8-1.5c-0.6-1-0.7-2.2-0.1-3.2
l0.2-0.3L54.9,3.1c0.9-1.6,2.3-1.8,2.8-1.8c1.1,0,2.2,0.6,2.8,1.6c0.5,0.8,0.6,1.7,0.3,2.6l-6.9,30.4L75.6,36
c1.1,0,2.2,0.6,2.8,1.5c0.6,1,0.7,2.2,0.1,3.2l-0.2,0.3L40.8,97.4l-0.2,0.2C40.3,97.9,39.5,98.7,38.2,98.7z M28.6,51.2h18.1
c1.8,0,3.2,1.5,3.2,3.4v0.3l-6.8,29l28.2-42.4l-20.3-0.1c-1.8,0-3.2-1.5-3.2-3.4v-0.3l5-21.9L28.6,51.2z M75.5,41.5
C75.5,41.5,75.5,41.5,75.5,41.5L75.5,41.5z M51.1,35.9L51.1,35.9C51.2,35.9,51.1,35.9,51.1,35.9z"/>
</g>
</svg>
`;
function getCSSVariable(name) {
let value = window.getComputedStyle(document.documentElement).getPropertyValue(name);
if (!value) {
return null;
}
return value.replaceAll('"', '').replaceAll('\'', '').trim();
}
// // Use in case the icon fails to load
// const errorIcon = `
// <svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
// viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
// <g>
// <path d="M38.2,98.7c-1.1,0-2.2-0.6-2.8-1.6c-0.5-0.8-0.6-1.8-0.3-2.6l8.9-37.8H24.5c-1.2,0-2.2-0.6-2.8-1.5c-0.6-1-0.7-2.2-0.1-3.2
// l0.2-0.3L54.9,3.1c0.9-1.6,2.3-1.8,2.8-1.8c1.1,0,2.2,0.6,2.8,1.6c0.5,0.8,0.6,1.7,0.3,2.6l-6.9,30.4L75.6,36
// c1.1,0,2.2,0.6,2.8,1.5c0.6,1,0.7,2.2,0.1,3.2l-0.2,0.3L40.8,97.4l-0.2,0.2C40.3,97.9,39.5,98.7,38.2,98.7z M28.6,51.2h18.1
// c1.8,0,3.2,1.5,3.2,3.4v0.3l-6.8,29l28.2-42.4l-20.3-0.1c-1.8,0-3.2-1.5-3.2-3.4v-0.3l5-21.9L28.6,51.2z M75.5,41.5
// C75.5,41.5,75.5,41.5,75.5,41.5L75.5,41.5z M51.1,35.9L51.1,35.9C51.2,35.9,51.1,35.9,51.1,35.9z"/>
// </g>
// </svg>
// `;
// function getCSSVariable(name) {
// let value = window.getComputedStyle(document.documentElement).getPropertyValue(name);
//
// if (!value) {
// return null;
// }
//
// return value.replaceAll('"', '').replaceAll('\'', '').trim();
// }
export function getIconSVGURL(name) {
const varName = '--dbp-override-icon-' + name;
const cssVarValue = getCSSVariable(varName);
const iconBasePath = getCSSVariable('--dbp-icon-base-path');
// console.log("varName", varName);
// console.log("cssVarValue", cssVarValue);
// console.log("iconBasePath", iconBasePath);
// check if we want to override the icon
if (cssVarValue) {
let path = cssVarValue;
// try to take care of relative paths
if (!path.startsWith('/') && !path.startsWith('http://') && !path.startsWith('https://') && iconBasePath) {
path = iconBasePath + path;
}
// console.log("path", path);
return path;
}
// const varName = '--dbp-override-icon-' + name;
// const cssVarValue = getCSSVariable(varName);
// const iconBasePath = getCSSVariable('--dbp-icon-base-path');
// // console.log("varName", varName);
// // console.log("cssVarValue", cssVarValue);
// // console.log("iconBasePath", iconBasePath);
//
// // check if we want to override the icon
// if (cssVarValue) {
// let path = cssVarValue;
//
// // try to take care of relative paths
// if (!path.startsWith('/') && !path.startsWith('http://') && !path.startsWith('https://') && iconBasePath) {
// path = iconBasePath + path;
// }
//
// // console.log("path", path);
//
// return path;
// }
return commonUtils.getAssetURL(pkgName, 'icons/' + encodeURI(name) + '.svg');
}
......@@ -71,38 +71,38 @@ export function getIconCSS(name) {
`;
}
async function getSVGTextElement(name) {
const iconURL = getIconSVGURL(name);
// console.log("iconURL: " + iconURL);
const response = await fetch(iconURL);
if (!response.ok) {
return unsafeHTML(errorIcon);
}
let text = await response.text();
if (text.indexOf('<svg') === -1) {
return unsafeHTML(errorIcon);
}
text = text.slice(text.indexOf('<svg'));
return unsafeHTML(text);
}
const iconCache = {};
/**
* Avoid lots of requests in case an icon is used multiple times on the same page.
*
* @param {string} name
*/
async function getSVGTextElementCached(name) {
if (iconCache[name] === undefined) {
let promise = getSVGTextElement(name);
iconCache[name] = promise;
return promise;
} else {
return iconCache[name];
}
}
// async function getSVGTextElement(name) {
// const iconURL = getIconSVGURL(name);
// // console.log("iconURL: " + iconURL);
//
// const response = await fetch(iconURL);
// if (!response.ok) {
// return unsafeHTML(errorIcon);
// }
// let text = await response.text();
// if (text.indexOf('<svg') === -1) {
// return unsafeHTML(errorIcon);
// }
// text = text.slice(text.indexOf('<svg'));
// return unsafeHTML(text);
// }
// const iconCache = {};
// /**
// * Avoid lots of requests in case an icon is used multiple times on the same page.
// *
// * @param {string} name
// */
// async function getSVGTextElementCached(name) {
// if (iconCache[name] === undefined) {
// let promise = getSVGTextElement(name);
// iconCache[name] = promise;
// return promise;
// } else {
// return iconCache[name];
// }
// }
/**
* For icon names see https://lineicons.com
......@@ -121,40 +121,45 @@ export class Icon extends LitElement {
}
static get styles() {
// language=css
return css`
:host {
display: inline-block;
height: 1em;
width: 1em;
top: .125em;
position: relative;
}
svg {
#svg {
height: 100%;
<!-- background-image: url(/dist/icons/nextcloud.svg);-->
<!-- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='black'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");-->
<!-- background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.6 81.74'%3E%3Cg%3E%3Cpath d='M89.8,22.7a28.51,28.51,0,0,0-16.9-9.1,27.84,27.84,0,0,0-14.8-12A24,24,0,0,0,48.9,0,28.36,28.36,0,0,0,20.6,27.4,22.42,22.42,0,0,0,13,70.11v-6.3A16.7,16.7,0,0,1,5.5,50a17,17,0,0,1,17-17h3.6V28.5A23,23,0,0,1,49,5.6a19.75,19.75,0,0,1,7.2,1.2h.1A22.48,22.48,0,0,1,68.9,17.5l.6,1.3,1.4.2a23.07,23.07,0,0,1,14.9,7.5,23.85,23.85,0,0,1-1.23,33.74v7A29.56,29.56,0,0,0,89.8,22.7Z'/%3E%3Cg%3E%3Cpath d='M16.39,71.61H36.65V51.36H16.39Z' style='fill: %23e4154b'/%3E%3Cpath d='M38.67,71.61H58.93V51.36H38.67Z' style='fill: %23e4154b'/%3E%3Cpath d='M61,71.61H81.21V51.36H61Z' style='fill: %23e4154b'/%3E%3Cpath d='M26.52,81.74H46.78V61.49H26.52Z' style='fill: %23e4154b'/%3E%3Cpath d='M50.83,61.49H71.08V41.23H50.83Z' style='fill: %23e4154b'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-->
<!-- mask-image: url(/dist/icons/nextcloud.svg);-->
<!-- content: url(/dist/icons/nextcloud.svg);-->
}
<!-- #svg {-->
<!-- content: url(/dist/icons/nextcloud.svg);-->
<!-- content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='black'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");-->
<!-- content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.6 81.74'%3E%3Cg%3E%3Cpath d='M89.8,22.7a28.51,28.51,0,0,0-16.9-9.1,27.84,27.84,0,0,0-14.8-12A24,24,0,0,0,48.9,0,28.36,28.36,0,0,0,20.6,27.4,22.42,22.42,0,0,0,13,70.11v-6.3A16.7,16.7,0,0,1,5.5,50a17,17,0,0,1,17-17h3.6V28.5A23,23,0,0,1,49,5.6a19.75,19.75,0,0,1,7.2,1.2h.1A22.48,22.48,0,0,1,68.9,17.5l.6,1.3,1.4.2a23.07,23.07,0,0,1,14.9,7.5,23.85,23.85,0,0,1-1.23,33.74v7A29.56,29.56,0,0,0,89.8,22.7Z'/%3E%3Cg%3E%3Cpath d='M16.39,71.61H36.65V51.36H16.39Z' style='fill: %23e4154b'/%3E%3Cpath d='M38.67,71.61H58.93V51.36H38.67Z' style='fill: %23e4154b'/%3E%3Cpath d='M61,71.61H81.21V51.36H61Z' style='fill: %23e4154b'/%3E%3Cpath d='M26.52,81.74H46.78V61.49H26.52Z' style='fill: %23e4154b'/%3E%3Cpath d='M50.83,61.49H71.08V41.23H50.83Z' style='fill: %23e4154b'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-->
<!-- }-->
svg * {
fill: currentColor;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
`;
}
render() {
let svg = getSVGTextElementCached(this.name);
const iconURL = getIconSVGURL(this.name);
const iconPart = this.name.trim().replaceAll(" ", "");
// console.log("iconURL", iconURL);
// console.log("iconPart", iconPart);
return html`
${until(svg)}
<!-- <div id="svg"></div> -->
<style>
#svg {
/*background-image: var(--dbp-override-icon-${iconPart}, url(${iconURL}));*/
-webkit-mask-image: var(--dbp-override-icon-${iconPart}, url(${iconURL}));
mask-image: var(--dbp-override-icon-${iconPart}, url(${iconURL}));
}
</style>
<div id="svg"></div>
`;
}
}
\ No newline at end of file
......@@ -7,8 +7,7 @@ import * as fileHandlingStyles from '@dbp-toolkit/file-handling/src/styles';
import {Icon} from '@dbp-toolkit/common';
import Tabulator from "tabulator-tables";
import {humanFileSize} from "@dbp-toolkit/common/i18next";
import {FileSink} from "@dbp-toolkit/file-handling/src/file-sink";
import {FileSource} from "@dbp-toolkit/file-handling/src/file-source";
import {name as pkgName} from "@dbp-toolkit/file-handling/package.json";
import {send} from "@dbp-toolkit/common/notification";
import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
......@@ -35,13 +34,16 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
this.isFileSource = false;
this.isFileSink = false;
// To avoid a cyclic dependency
import('./file-sink').then(({ FileSink }) => this.defineScopedElement('dbp-file-sink', FileSink));
import('./file-source').then(({ FileSource }) => this.defineScopedElement('dbp-file-source', FileSource));
}
static get scopedElements() {
return {
'dbp-icon': Icon,
'dbp-file-sink': FileSink,
'dbp-file-source': FileSource,
};
}
......@@ -206,6 +208,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
window.clipboardWarning = true;
}
}
disconnectedCallback() {
......@@ -235,6 +238,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
checkFileType(file) {
// check if file is allowed
const [fileMainType, fileSubType] = file.type.split('/');
const mimeTypes = this.allowedMimeTypes.split(',');
......@@ -253,6 +257,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
generateClipboardTable() {
if (this.clipboardFiles.files) {
let data = [];
for (let i = 0; i < this.clipboardFiles.files.length; i++){
......@@ -279,15 +284,22 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
await this.sendFileEvent(files[i].file);
}
this.tabulatorTable.deselectRow();
send({
"summary": i18n.t('clipboard.saved-files-title', {count: files.length}),
"body": i18n.t('clipboard.saved-files-body', {count: files.length}),
"type": "success",
"timeout": 5,
});
}
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);
}
......@@ -297,6 +309,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
* @param event
*/
onReceiveBeforeUnload(event){
// we don't need to stop if there are no signed files
if (this.clipboardFiles.files.length === 0) {
return;
......@@ -351,8 +364,6 @@ 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) {
......@@ -361,13 +372,18 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
} 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);
send({
"summary": i18n.t('clipboard.saved-files-title', {count: this.filesToSave.length}),
"body": i18n.t('clipboard.saved-files-body', {count: this.filesToSave.length}),
"type": "success",
"timeout": 5,
});
}
}
......@@ -410,37 +426,24 @@ 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 =>
data.files = data.files.filter(file => toRemove.name !== file.name)
if (this.tabulatorTable && this.tabulatorTable.getSelectedData().length > 0) {
let count = this.tabulatorTable.getSelectedData().length;
this.tabulatorTable.deleteRow(this.tabulatorTable.getSelectedRows());
let data = {"files": []};
this.tabulatorTable.getRows().forEach(row =>
data.files.push( row.getData().file )
);
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('clipboard.clear-count-clipboard-title', {count: this.tabulatorTable.getSelectedData().length}),
"body": i18n.t('clipboard.clear-count-clipboard-body', {count: this.tabulatorTable.getSelectedData().length}),
"summary": i18n.t('clipboard.clear-count-clipboard-title', {count: count}),
"body": i18n.t('clipboard.clear-count-clipboard-body', {count: count}),
"type": "success",
"timeout": 5,
});
this.numberOfSelectedFiles = 0;
} else {
let data = {"files": []};
this.sendSetPropertyEvent('clipboard-files', data);
......@@ -456,20 +459,23 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
}
openFilesink() {
const fileSink = this._("#file-source");
if (fileSink) {
openFilesource() {
const fileSource = this._("#file-source");
if (fileSource) {
this._("#file-source").setAttribute("dialog-open", "");
}
}
getAdditionalButtons() {
//TODO
// FIX closing modal dialog when deleting or adding files in modal dialogue
// FIX missing nextcloud in second hierarchy
getAdditionalButtons() {
return html`
<div class="flex-container">
<div class="btn-flex-container-mobile">
<button @click="${() => { this.openFilesink(); }}"
<button @click="${() => { this.openFilesource(); }}"
class="button" title="${i18n.t('clipboard.add-files')}">
<dbp-icon class="nav-icon" name="clipboard"></dbp-icon> ${i18n.t('clipboard.add-files-btn')}
</button>
......@@ -524,7 +530,6 @@ 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`
<div class="wrapper">
......@@ -560,7 +565,6 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
getClipboardSource() {
const tabulatorCss = commonUtils.getAssetURL(pkgName, 'tabulator-tables/css/tabulator.min.css');
let additionalButtons = this.showAdditionalButtons ? this.getAdditionalButtons() : "";
return html`
<div class="wrapper">
......
......@@ -1034,13 +1034,18 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.nextcloud-logo{
width: 80px;
height: 95px;
justify-self: end;
transition: all 0.5s ease;
margin: auto;
}
.nextcloud-logo-icon{
.nextcloud-logo-image{
height: 100%;
width: 100%;
background-image: var(--dbp-override-image-nextcloud, url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M69.3,86.1l-46.1,0C11,85.9,1.1,75.9,1.1,63.7c0-11.8,9.1-21.4,20.6-22.4c0.5-15.2,13-27.4,28.3-27.4 c3.4,0,6.6,0.5,9.2,1.6c6.2,2.1,11.4,6.4,14.8,12c6.5,1,12.7,4.3,16.9,9.1c5,5.5,7.8,12.6,7.8,19.9C98.8,72.8,85.6,86.1,69.3,86.1z M23.6,80.6h45.7c13.3,0,24-10.8,24-24c0-6-2.3-11.8-6.4-16.2c-3.7-4.2-9.1-6.9-14.9-7.5l-1.4-0.2L70,31.4 c-2.8-5.1-7.2-8.9-12.6-10.7l-0.1,0c-2-0.8-4.5-1.2-7.2-1.2c-12.6,0-22.9,10.3-22.9,22.9v4.5h-3.6c-9.3,0-17,7.6-17,17 C6.6,73,14.3,80.6,23.6,80.6z'/%3E%3C/g%3E%3C/svg%3E%0A"));
background-repeat: no-repeat;
background-position: center;
}
.nextcloud-logo-sm{
......@@ -1431,7 +1436,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
<link rel="stylesheet" href="${tabulatorCss}">
<div class="nextcloud-intro ${classMap({hidden: this.isPickerActive})}">
<div class="nextcloud-logo ${classMap({"nextcloud-logo-sm": this.isPickerActive})}">
<dbp-icon name="nextcloud" class="nextcloud-logo-icon"></dbp-icon>
<div class="nextcloud-logo-image"></div>
</div>
<div class="block text-center ${classMap({hidden: this.isPickerActive})}">
<h2 class="m-inherit">
......
......@@ -117,7 +117,8 @@ export class MatomoElement extends DBPLitElement {
// track errors
window.addEventListener('error', function(e) {
that.pushEvent(['trackEvent', 'Error', e.error.message + '\n' + e.error.stack]);
that.pushEvent(['trackEvent', 'Error', e.error ?
e.error.message + '\n' + e.error.stack : e.message]);
});
window.addEventListener('unhandledrejection', function(e) {
......
This diff is collapsed.