Skip to content
Snippets Groups Projects
Verified Commit 3125bf9e authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: move viewer to content folder

parent 3a652de8
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 1745 additions and 1277 deletions
development/issues/closed/217.html
+ 83
− 71
View file @ 3125bf9e
......@@ -28,6 +28,7 @@
ID:
<div data-monster-replace="path:data.id"></div>
<div data-monster-replace="path:data.name"></div>
<div data-monster-replace="path:data.field4"></div>
</monster-dataset>
......@@ -54,6 +55,17 @@
data-monster-attributes="value path:data.field3"
data-monster-bind="path:data.field3">
<label for="field3">field id</label>
<monster-select id="field4"
data-monster-option-type="checkbox"
data-monster-attributes="value path:data.field4"
data-monster-bind="path:data.field4">
<div data-monster-value="a">a</div>
<div data-monster-value="b">b</div>
<div data-monster-value="c">c</div>
<div data-monster-value="d">d</div>
</monster-select>
</monster-field-set>
<monster-field-set data-monster-option-labels-title="">
......
development/issues/closed/217.mjs
+ 6
− 0
View file @ 3125bf9e
......@@ -22,6 +22,12 @@ import {domReady} from "../../../source/dom/ready.mjs";
domReady.then(() => {
const element = document.getElementById("field4");
console.log(element);
setTimeout(() => {
element.value = "x";
},100);
element.value = "x";
});
......
development/issues/open/289.html 0 → 100644
+ 101
− 0
View file @ 3125bf9e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>function for tags in datatable #289</title>
<script src="./289.mjs" type="module"></script>
</head>
<body>
<h1>function for tags in datatable #289</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/289">Issue #289</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<main>
<monster-host><monster-config-manager></monster-config-manager></monster-host>
<monster-notify data-monster-option-orientation="bottom right"></monster-notify>
<monster-monitor-attribute-errors
data-monster-option-features-notifyUser="false"
></monster-monitor-attribute-errors>
<h2>Control with DOM datasource</h2>
<monster-datasource-rest id="ds277"
data-monster-option-features-autoInit="true"
data-monster-option-write-url="/issue-274.json"
data-monster-option-read-url="/issue-274.json?limit=5&page=${page}&q=${query}&order=${order}"
data-monster-option-filter-id="ds277-filter"
data-monster-option-features-filter="true"
></monster-datasource-rest>
<monster-datatable data-monster-datasource-selector="#ds277" id="dt277"
data-monster-option-datasource-orderdelimiter="::">
<monster-collapse id="filter-collapse" data-monster-role="filter-collapse">
<div class="flex">
<monster-tabs style="width: 100%"
data-monster-option-features-opendelay="500"
data-monster-option-classes-navigation="monster-theme-background-inherit"
data-monster-option-classes-button="monster-theme-background-inherit" id="filtertabs">
<div data-monster-button-label="Filter" data-monster-state="active" class="active">
<monster-datatable-filter id="ds277-filter" slot="filter"
data-monster-option-storedconfig-selector="#filtertabs">
<label data-monster-label="ID" id="id"
data-monster-template="${value | call:range:id}">
ID
<monster-filter-range></monster-filter-range>
</label>
<label data-monster-label="Fullname" id="fullname"
data-monster-template="${value}">
ID
<monster-filter-input></monster-filter-input>
</label>
</monster-datatable-filter>
</div>
</monster-tabs>
</div>
</monster-collapse>
<div slot="bar" class="monster-button-group">
<monster-embedded-pagination data-monster-datasource-selector="#ds277"></monster-embedded-pagination>
<monster-datasource-status
data-monster-option-datasource-selector="#ds277"></monster-datasource-status>
<monster-datatable-filter-button data-monster-reference="#filter-collapse"
data-monster-role="filter-button">Filter
</monster-datatable-filter-button>
</div>
<template id="dt277-row">
<div data-monster-order-template="${field}=${direction}" data-monster-sortable="id" data-monster-grid-template="3rem" data-monster-mode="fixed" data-monster-head="id" data-monster-replace="path:dt277-row.id"></div>
<div data-monster-grid-template="2rem" data-monster-mode="fixed" data-monster-features="select"></div>
<div data-monster-head="username" data-monster-replace="path:dt277-row.username"></div>
<div data-monster-head="email" data-monster-replace="path:dt277-row.email"></div>
<div data-monster-sortable="full_name" data-monster-head="full_name" data-monster-replace="path:dt277-row.full_name"></div>
<div data-monster-head="age" data-monster-replace="path:dt277-row.age"></div>
<div data-monster-head="country" data-monster-replace="path:dt277-row.country"></div>
<div data-monster-head="registered_date" data-monster-replace="path:dt277-row.registered_date"></div>
<div data-monster-head="status" data-monster-replace="path:dt277-row.status | call:badge-column"></div>
</template>
</monster-datatable>
</main>
</main>
</body>
</html>
development/issues/open/289.mjs 0 → 100644
+ 54
− 0
View file @ 3125bf9e
/**
* @file development/issues/open/289.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/289
* @description function for tags in datatable
* @issue 289
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/datatable/datasource/rest.mjs";
import "../../../source/components/datatable/datasource/dom.mjs";
import "../../../source/components/datatable/dataset.mjs";
import "../../../source/components/datatable/status.mjs";
import "../../../source/components/datatable/change-button.mjs";
import "../../../source/components/datatable/save-button.mjs";
import "../../../source/components/datatable/pagination.mjs";
import "../../../source/components/datatable/embedded-pagination.mjs";
import "../../../source/components/datatable/filter.mjs";
import "../../../source/components/form/button.mjs";
import "../../../source/components/form/form.mjs";
import "../../../source/components/form/field-set.mjs";
import "../../../source/components/form/button-bar.mjs";
import "../../../source/components/form/toggle-switch.mjs";
import "../../../source/components/form/context-help.mjs";
import "../../../source/components/form/context-error.mjs";
import "../../../source/components/form/input-group.mjs";
import "../../../source/components/datatable/filter/input.mjs";
import "../../../source/components/datatable/filter/date-range.mjs";
import "../../../source/components/datatable/filter/range.mjs";
import "../../../source/components/layout/tabs.mjs";
import "../../../source/components/datatable/datatable.mjs";
import "../../../source/components/notify/monitor-attribute-errors.mjs";
//const actionButton = document.getElementById("action-button-1")
const datatable = document.getElementById("dt277");
const eventHandler = function () {
const selected = datatable.getSelectedRows();
// if (selected.length === 0) {
// actionButton.style.visibility = "hidden";
// } else {
// actionButton.style.visibility = "visible";
// }
console.log("issue 227 selected: "+selected.join(", "));
}
datatable.addEventListener("monster-datatable-selection-changed", eventHandler);
development/mock/issue-217.js
+ 4
− 2
View file @ 3125bf9e
......@@ -4,13 +4,15 @@ const json =
"id": 1000,
"field1": "dataset 1, value field 1",
"field2": "dataset 1, value field 2",
"field3": "dataset 1, value field 3"
"field3": "dataset 1, value field 3",
"field4": "a,c,d"
},
"1": {
"id": 1001,
"field1": "dataset 2, value field 1",
"field2": "dataset 2, value field 2",
"field3": "dataset 2, value field 3"
"field3": "dataset 2, value field 3",
"field4": "a,b"
}
}`;
......
development/templates/vite.config.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -88,7 +88,7 @@ export default defineConfig({
},
server: {
port: 8443,
port: 8440,
host: "localhost.alvine.dev",
https: {
key: "${LOCALHOST_CERTS_DIR}/localhost.alvine.dev.key",
......
source/components/accessibility/locale-picker.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -75,7 +75,7 @@ const detectedLanguagesSymbol = Symbol("detectedLanguages");
* @example /examples/components/accessibility/locale-picker-simple Simple example
* @example /examples/components/accessibility/locale-picker-reset Reset Selection
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/276.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/276.html
*
* @since 3.97.0
* @copyright schukai GmbH
......
source/components/content/viewer.mjs 0 → 100644
+ 289
− 0
View file @ 3125bf9e
/**
* Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
* Node module: @schukai/monster
*
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
* The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
*
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact schukai GmbH.
*
* SPDX-License-Identifier: AGPL-3.0
*/
import {
assembleMethodSymbol,
CustomElement,
registerCustomElement,
} from "../../dom/customelement.mjs";
import "../notify/notify.mjs";
import { ViewerStyleSheet } from "./stylesheet/viewer.mjs";
import { instanceSymbol } from "../../constants.mjs";
import { isString } from "../../types/is.mjs";
import { getGlobal } from "../../types/global.mjs";
export { Viewer };
/**
* @private
* @type {symbol}
*/
const viewerElementSymbol = Symbol("viewerElement");
/**
* The Viewer component is used to show a PDF, HTML or Image.
*
* @fragments /fragments/components/content/viewer
*
* @example /examples/components/content/pdf-viewer with a PDF
* @example /examples/components/content/image-viewer with an image
* @example /examples/components/content/html-viewer with HTML content
*
* @copyright schukai GmbH
* @summary A simple viewer component for PDF, HTML and images.
*/
class Viewer extends CustomElement {
/**
* This method is called by the `instanceof` operator.
* @return {symbol}
*/
static get [instanceSymbol]() {
return Symbol.for("@schukai/monster/components/content/viewer@@instance");
}
/**
* To set the options via the HTML tag, the attribute `data-monster-options` must be used.
* @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
*
* The individual configuration values can be found in the table.
*
* @property {Object} templates Template definitions
* @property {string} templates.main Main template
* @property {Object} classes Css classes
* @property {Object} features Feature definitions
*/
get defaults() {
return Object.assign({}, super.defaults, {
templates: {
main: getTemplate(),
},
content: "<slot></slot>",
classes: {
viewer: "",
},
features: {},
});
}
/**
*
* @param {string} content
* @returns {Viewer}
*/
setContent(content) {
this.setOption("content", content);
return this;
}
/**
*
* @param {Blob|URL|string} data
* @param {boolean} navigation
* @param {boolean} toolbar
* @param {boolean} scrollbar
*/
setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
const hashes =
"#toolbar=" +
(toolbar ? "1" : "0") +
"&navpanes=" +
(navigation ? "1" : "0") +
"&scrollbar=" +
(scrollbar ? "1" : "0");
let pdfContent = "";
if (isBlob(data)) {
pdfContent = URL.createObjectURL(data);
pdfContent += hashes;
} else if (isURL(data)) {
pdfContent = data;
// check if the url already contains the hashes
if (pdfContent.indexOf("#") === -1) {
pdfContent += hashes;
}
} else if (isString(data)) {
//URL.createObjectURL(data);
const blobObj = new Blob([atob(data)], { type: "application/pdf" });
const url = window.URL.createObjectURL(blobObj);
pdfContent = data;
} else {
throw new Error("Blob or URL expected");
}
const html =
'<object data="' +
pdfContent +
'" width="100%" height="100%" type="application/pdf"></object>';
this.setContent(html);
}
/**
*
* @param {Blob|URL|string} data
*/
setImage(data) {
if (isBlob(data)) {
data = URL.createObjectURL(data);
} else if (isURL(data)) {
// nothing to do
} else if (isString(data)) {
// nothing to do
} else {
throw new Error("Blob or URL expected");
}
const html = '<img src="' + data + '" alt="image" />';
this.setContent(html);
}
/**
*
* if the data is a string, it is interpreted as HTML.
* if the data is an url, the HTML is loaded from the url and set as content.
* if the data is an HTMLElement, the outerHTML is used as content.
*
* @param {HTMLElement|URL|string|Blob} data
*/
setHTML(data) {
if (data instanceof Blob) {
blobToText(data)
.then((html) => {
this.setHTML(html);
})
.catch((error) => {
throw new Error(error);
});
return;
} else if (data instanceof HTMLElement) {
data = data.outerHTML;
} else if (isString(data)) {
// nothing to do
} else if (isURL(data)) {
// fetch element
getGlobal()
.fetch(data)
.then((response) => {
return response.text();
})
.then((html) => {
this.setHTML(html);
})
.catch((error) => {
throw new Error(error);
});
} else {
throw new Error("HTMLElement or string expected");
}
this.setContent(data);
}
/**
*
* @return {Viewer}
*/
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
initControlReferences.call(this);
initEventHandler.call(this);
}
/**
*
* @return {string}
*/
static getTag() {
return "monster-viewer";
}
/**
* @return {CSSStyleSheet[]}
*/
static getCSSStyleSheet() {
return [ViewerStyleSheet];
}
}
/**
* @private
* @param variable
* @return {boolean}
*/
function isURL(variable) {
try {
new URL(variable);
return true;
} catch (error) {
return false;
}
}
/**
* @private
* @param variable
* @return {boolean}
*/
function isBlob(variable) {
return variable instanceof Blob;
}
/**
* @private
* @param blob
* @return {Promise<unknown>}
*/
function blobToText(blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsText(blob);
});
}
/**
* @private
* @return {Select}
* @throws {Error} no shadow-root is defined
*/
function initControlReferences() {
if (!this.shadowRoot) {
throw new Error("no shadow-root is defined");
}
this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
}
/**
* @private
*/
function initEventHandler() {
return this;
}
/**
* @private
* @return {string}
*/
function getTemplate() {
// language=HTML
return `
<div id="viewer" data-monster-role="viewer" part="viewer" data-monster-replace="path:content" data-monster-attributes="class path:classes.viewer">
</div>`;
}
registerCustomElement(Viewer);
source/components/datatable/change-button.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -53,7 +53,7 @@ const overlayLinkedElementSymbol = Symbol("overlayLinkedElement");
*
* @example /examples/components/datatable/change-button-simple Simple change button
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/274.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/274.html
*
* @copyright schukai GmbH
* @summary The Status component is used to show the current status of a datasource.
......
source/components/datatable/dataset.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -50,7 +50,7 @@ export { DataSet };
* @example /examples/components/datatable/dataset-dom Dom dataset
* @example /examples/components/datatable/dataset-rest Rest dataset
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/272.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/272.html
*
* @copyright schukai GmbH
* @summary A dataset component that can be used to show the data of a data source
......
source/components/datatable/datasource.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -36,7 +36,7 @@ const dataSourceSymbol = Symbol.for(
*
* @example /examples/components/datatable/datasource
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/272.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/272.html
*
* @copyright schukai GmbH
* @summary A generic datasource
......
source/components/datatable/datasource/rest.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -70,7 +70,7 @@ const filterObserverSymbol = Symbol("filterObserver");
* @example /examples/components/datatable/datasource-rest-auto-init Auto init
* @example /examples/components/datatable/datasource-rest-do-fetch Rest datasource with fetch
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/272.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/272.html
*
* @copyright schukai GmbH
* @summary A rest api datasource for the datatable or other components
......
source/components/datatable/datatable.mjs
+ 1196
− 1192
View file @ 3125bf9e
......@@ -17,7 +17,7 @@ import {
assembleMethodSymbol,
CustomElement,
registerCustomElement,
getSlottedElements,
getSlottedElements, updaterTransformerMethodsSymbol,
} from "../../dom/customelement.mjs";
import {
findTargetElementFromEvent,
......@@ -68,7 +68,6 @@ import "./columnbar.mjs";
import "./filter-button.mjs";
import {
findElementWithSelectorUpwards,
getDocument,
getWindow,
} from "../../dom/util.mjs";
......@@ -139,7 +138,8 @@ const resizeObserverSymbol = Symbol("resizeObserver");
* @example /examples/components/datatable/order-by Sort data
* @example /examples/components/datatable/select-rows Select rows
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/277.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/277.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/289.html
*
* @copyright schukai GmbH
* @summary A beautiful and highly customizable data table. It can be used to display data from a data source.
......@@ -816,8 +816,10 @@ function initEventHandler() {
getWindow()
.navigator.clipboard.writeText(text)
.then(
() => {},
(err) => {},
() => {
},
(err) => {
},
);
}
}
......@@ -879,8 +881,10 @@ function initEventHandler() {
getWindow()
.navigator.clipboard.writeText(text)
.then(
() => {},
(err) => {},
() => {
},
(err) => {
},
);
}
}
......
source/components/datatable/filter.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -157,7 +157,7 @@ const hashChangeSymbol = Symbol("hashChange");
* @example /examples/components/datatable/filter-advanced Advanced filter
* @example /examples/components/datatable/filter-store Store filter
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/272.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/272.html
*
* @copyright schukai GmbH
* @summary The Filter component is used to show and handle the filter values.
......
source/components/datatable/save-button.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -67,7 +67,7 @@ const badgeElementSymbol = Symbol("badgeElement");
*
* @example /examples/components/datatable/save-button-simple Simple example
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/274.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/274.html
*
* @copyright schukai GmbH
* @summary This is a save button component that can be used to save changes to a datasource.
......
source/components/datatable/status.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -52,7 +52,7 @@ const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
*
* @example /examples/components/datatable/datasource-status-simple Simple dataset status
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/274.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/274.html
*
* @copyright schukai GmbH
* @summary The Status component is used to show the current status of a datasource.
......
source/components/form/action-button.mjs
+ 1
− 1
View file @ 3125bf9e
......@@ -48,7 +48,7 @@ const containerElementSymbol = Symbol("containerElement");
*
* @example /examples/components/form/action-button
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/264.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/264.html
*
* @since 3.32.0
* @copyright schukai GmbH
......
source/components/form/button.mjs
+ 2
− 2
View file @ 3125bf9e
......@@ -48,8 +48,8 @@ export const buttonElementSymbol = Symbol("buttonElement");
* @example /examples/components/form/button-simple Simple Button
* @example /examples/components/form/button-with-click-event Button with event
*
* @issue https://localhost.alvine.dev:8443/development/issues/closed/282.html
* @issue https://localhost.alvine.dev:8443/development/issues/closed/283.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/282.html
* @issue https://localhost.alvine.dev:8440/development/issues/closed/283.html
*
* @copyright schukai GmbH
* @summary A beautiful button that can make your life easier and also looks good.
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment