.gitlab-ci.yml

@@ -52,7 +52,7 @@ publish:
     - ssh-keyscan -t rsa "${DEPLOY_HOST}" >> ~/.ssh/known_hosts
     # Deploy
     - cd toolkit-showcase
-    - dep deploy "${CI_ENVIRONMENT_NAME}"
+    - dep deploy --file ./../.gitlab-ci/deploy.php "${CI_ENVIRONMENT_NAME}"
     - echo "Deployed to ${CI_ENVIRONMENT_URL}"
     # Simple health check
     - curl --max-time 10 --retry 3 --output /dev/null --silent --show-error --fail --location "${CI_ENVIRONMENT_URL}"

toolkit-showcase/deploy.php → .gitlab-ci/deploy.php

@@ -23,7 +23,7 @@ set('rsync',[
     'timeout'      => 60,
 ]);
 
-set('rsync_src', __DIR__ . '/dist');
+set('rsync_src', __DIR__ . '/../toolkit-showcase/dist');
 set('rsync_dest','{{release_path}}');
 
 // Hosts

packages/app-shell/.gitignore

@@ -4,4 +4,5 @@ node_modules
 npm-debug.log
 .vscode
 .cert
-package-lock.json
\ No newline at end of file
+package-lock.json
+yarn.lock

packages/app-shell/.npmignore

@@ -3,3 +3,4 @@ node_modules
 npm-debug.log
 package-lock.json
 index.html
+yarn.lock

packages/app-shell/README.md

@@ -27,12 +27,12 @@ You need Keycloak and other parts to be in place to really make full use of the
 Best take a look on examples like [index.html](https://gitlab.tugraz.at/dbp/esign/signature/-/blob/master/examples/dbp-signature/index.html)
 for more explanation.
 
-You need to set the `provider-root` attribute for the app-shell to "terminate" all provider events.
-If you don't want to set the app-shell as `provider-root` then you need to set the attributes `auth`,
-`requested-login-status` and `analytics-event` as attribute for the app-shell or in a `dbp-provider` above it.
-
 ## Attributes
 
+- `provider-root` (optional): You need to set the `provider-root` attribute for the app-shell to "terminate" all provider events
+  - If you don't want to set the app-shell as `provider-root` then you need to set the attributes `auth`,
+    `requested-login-status` and `analytics-event` as attribute for the app-shell or in a `dbp-provider` above it 
+  - example `<dbp-app-shell provider-root></dbp-app-shell>`
 - `lang` (optional, default: `de`): set to `de` or `en` for German or English
     - example `<dbp-app-shell lang="de"></dbp-app-shell>`
 - `src`: The path to a topic metadata file (json)

packages/app-shell/package.json

 {
   "name": "@dbp-toolkit/app-shell",
   "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/app-shell",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
   "repository": {

packages/app-shell/src/app-shell.js

@@ -66,6 +66,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
         this.matomoSiteId = -1;
 
         this._attrObserver = new MutationObserver(this.onAttributeObserved);
+        this._onShowActivityEvent = this._onShowActivityEvent.bind(this);
 
         this.auth = {};
     }
@@ -761,6 +762,10 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
         return elm;
     }
 
+    _onShowActivityEvent(e) {
+        this.switchComponent(e.detail.name);
+    }
+
     _onActivityAdded(element) {
         for(const key of this.topic.attributes || []) {
             let value = sessionStorage.getItem('dbp-attr-' + key);
@@ -769,10 +774,12 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             }
         }
         this._attrObserver.observe(element, {attributes: true, attributeFilter: this.topic.attributes});
+        element.addEventListener('dbp-show-activity', this._onShowActivityEvent);
     }
 
     _onActivityRemoved(element) {
         this._attrObserver.disconnect();
+        element.removeEventListener('dbp-show-activity', this._onShowActivityEvent);
     }
 
     track(action, message) {

packages/app-shell/src/dbp-app-shell-welcome.js

@@ -41,7 +41,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
             ${commonStyles.getGeneralCSS()}
 
             p { line-height: 1.8em }
-            .item {padding-top: 0.5em;}
+            .item { padding-top: 0.5em;}
             .description {
                 padding-left: 2em;
                 font-style: italic;
@@ -52,6 +52,23 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
             h2 a:hover {
                 color: #E4154B;
             }
+            
+            h2 a {
+                cursor: pointer;
+                text-decoration: none;
+            }
+
+            h2 a::after {
+                content: "\\00a0\\00a0\\00a0";
+                background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+                background-size: 60%;
+                background-repeat: no-repeat;
+                background-position: center center;
+                margin: 0 0 0 6px;
+                padding: 0 0 -0.75% 0px;
+                animation: 0.15s linkIconOut;
+                font-size: 100%;
+            }
         `;
     }
 

packages/common/assets/icons/information-circle.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="lni_lni-checkmark-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">
+<g>
+	<path d="M26,51C12.2,51,1.1,39.8,1.1,26S12.2,1.1,26,1.1S51,12.2,51,26S39.8,51,26,51z M26,3.9C13.8,3.9,3.9,13.8,3.9,26
+		S13.8,48.2,26,48.2s22.2-10,22.2-22.2S38.2,3.9,26,3.9z"/>
+</g>
+<g>
+	<circle cx="25.6" cy="12.4" r="2"/>
+	<path d="M29.6,39.8H27V19.5c0-1.2-0.9-2.1-2.1-2.1h-2.4c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h2.4c0.2,0,0.3,0.1,0.3,0.3v20.2
+		h-2.6c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h7.1c0.5,0,0.9-0.4,0.9-0.9S30.1,39.8,29.6,39.8z"/>
+</g>
+</svg>

packages/common/styles.js

@@ -1069,6 +1069,17 @@ export function getLinkCss() {
             animation: 0s linkIconIn;
             font-size: 103%;
         }
+
+        .int-link-internal{
+            transition: background-color 0.15s, color 0.15s;
+            border-bottom: 1px solid rgba(0,0,0,0.3);
+        }
+
+        .int-link-internal:hover{
+            background-color: black;
+            color: white;
+            text-decoration: underline;
+        }
     `;
 }
 

packages/data-table-view/package.json

@@ -37,7 +37,7 @@
     "@dbp-toolkit/auth": "^0.2.2",
     "@dbp-toolkit/common": "^0.2.2",
     "@open-wc/scoped-elements": "^1.3.3",
-    "datatables.net-buttons": "^1.6.1",
+    "datatables.net-buttons": "^2.0.0",
     "datatables.net-buttons-dt": "^2.0.0",
     "datatables.net-dt": "^1.10.20",
     "datatables.net-responsive": "^2.2.3",

packages/tooltip/.eslintignore

+/vendor/**
+/dist/**
+/*.js
\ No newline at end of file

packages/tooltip/.eslintrc.json

+{
+    "root": true,
+    "extends": "./../../eslint.common.json"
+}
\ No newline at end of file

packages/tooltip/.gitignore

+dist
+node_modules
+.idea
+npm-debug.log
+package-lock.json

packages/tooltip/.npmignore

+node_modules
+.idea
+npm-debug.log
+package-lock.json
+index.html

packages/tooltip/README.md

+# Tooltip Web Component
+
+The tooltip component provides an icon as an anker for a tooltip.
+There is a generic tooltip `<dbp-tooltip>` which supports any icon the app has bundled.
+Another info tooltip `<dbp-info-tooltip>` shows an embedded info icon (small letter i inside a circle) as a convenient
+shortcut. 
+
+## Install
+You can install this component via npm:
+
+```bash
+npm i @dbp-toolkit/tooltip
+```
+
+## Usage
+
+```html
+<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
+<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
+<script type="module" src="node_modules/@dbp-toolkit/tooltip/dist/dbp-tooltip.js"></script>
+```
+
+Or directly via CDN:
+
+```html
+<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
+<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
+<script type="module" src="https://unpkg.com/@dbp-toolkit/tooltip@0.0.1/dist/dbp-tooltip.js"></script>
+```
+
+## Attributes
+
+- `text-content`: Text to show as tooltip (default is 'text missing.' as a reminder!)
+- `icon-name`: (`<dbp-tooltip>` only, default is a skull) Name of the bundled icon (SVG) for `<dbp-icon>` 
+- `button-text`: (`<dbp-button-tooltip>` only, default is 'submit') Text on the button
+- `type`: (`<dbp-button-tooltip>` only, default is 'submit') Options are 'submit', 'reset', or any string
+- `form-id`: (`<dbp-button-tooltip>` only) Id of the from to submit, if omitted the next form in DOM hirachy will be used.
\ No newline at end of file

packages/tooltip/assets/index.html.ejs

+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script type="module" src="dbp-tooltip-demo.js"></script>
+</head>
+
+<body>
+
+<dbp-tooltip-demo lang="de" ></dbp-tooltip-demo>
+
+<p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p>
+</body>
+</html>