Add support for ads in browser console output

Proof of concept for text display from a separate json file, all array items of key 'hi' are printed to the browser console.

Add support for ads in browser console output
dc2c2ff1 · Neuber, Eugen Ramon · ad1723e0 · dc2c2ff1 · dc2c2ff1 · dc2c2ff1
Commit dc2c2ff1 authored 3 years ago by Neuber, Eugen Ramon
--- a/package-lock.json
+++ b/package-lock.json
--- a/packages/tooltip/.eslintignore
+++ b/packages/tooltip/.eslintignore
+/vendor/**
+/dist/**
+/*.js
\ No newline at end of file
--- a/packages/tooltip/.eslintrc.json
+++ b/packages/tooltip/.eslintrc.json
+{
+    "root": true,
+    "extends": "./../../eslint.common.json"
+}
\ No newline at end of file
--- a/packages/tooltip/.gitignore
+++ b/packages/tooltip/.gitignore
+dist
+node_modules
+.idea
+npm-debug.log
+package-lock.json
--- a/packages/tooltip/.npmignore
+++ b/packages/tooltip/.npmignore
+node_modules
+.idea
+npm-debug.log
+package-lock.json
+index.html
--- a/packages/tooltip/LICENSE
+++ b/packages/tooltip/LICENSE
--- a/packages/tooltip/README.md
+++ b/packages/tooltip/README.md
+# Tooltip Web Component
+You can install this component via npm:
+```bash
+npm i @dbp-toolkit/tooltip
+```
+## Usage
+```html
+<dbp-tooltip></dbp-tooltip>
+<script type="module" src="node_modules/@dbp-toolkit/tooltip/dist/dbp-tooltip.js"></script>
+```
+Or directly via CDN:
+```html
+<dbp-tooltip></dbp-tooltip>
+<script type="module" src="https://unpkg.com/@dbp-toolkit/tooltip@0.0.1/dist/dbp-tooltip.js"></script>
+```
+## Attributes
--- a/packages/tooltip/assets/index.html.ejs
+++ b/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>
--- a/packages/tooltip/i18next-scanner.config.js
+++ b/packages/tooltip/i18next-scanner.config.js
+module.exports = {
+    input: [
+        'src/*.js',
+    ],
+    output: './',
+    options: {
+        debug: false,
+        removeUnusedKeys: true,
+        func: {list: ['i18n.t', '_i18n.t']},
+        lngs: ['en','de'],
+        resource: {
+            loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
+            savePath: 'src/i18n/{{lng}}/{{ns}}.json'
+        },
+    },
+}
--- a/packages/tooltip/karma.conf.js
+++ b/packages/tooltip/karma.conf.js
+module.exports = require('../../karma.common.conf.js');
--- a/packages/tooltip/package.json
+++ b/packages/tooltip/package.json
+{
+  "name": "@dbp-toolkit/tooltip",
+  "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/tooltip",
+  "version": "0.0.1",
+  "main": "src/index.js",
+  "license": "LGPL-2.1-or-later",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
+    "directory": "packages/tooltip"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@esm-bundle/chai": "^4.2.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-url": "^6.0.0",
+    "eslint": "^7.3.1",
+    "eslint-plugin-jsdoc": "^36.0.0",
+    "i18next-scanner": "^3.0.0",
+    "karma": "^6.0.0",
+    "karma-chrome-launcher": "^3.0.0",
+    "karma-firefox-launcher": "^2.1.0",
+    "karma-mocha": "^2.0.1",
+    "mocha": "^9.0.0",
+    "rollup": "^2.33.3",
+    "rollup-plugin-copy": "^3.1.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "dependencies": {
+    "@dbp-toolkit/auth": "^0.2.2",
+    "@dbp-toolkit/common": "^0.2.2",
+    "@open-wc/scoped-elements": "^1.3.3",
+    "lit-element": "^2.4.0",
+    "tippy.js": "^6.3.1"
+  },
+  "scripts": {
+    "clean": "rm dist/*",
+    "build": "npm run build-local",
+    "build-local": "rollup -c",
+    "build-dev": "rollup -c --environment BUILD:development",
+    "build-prod": "rollup -c --environment BUILD:production",
+    "build-demo": "rollup -c --environment BUILD:demo",
+    "build-test": "rollup -c --environment BUILD:test",
+    "i18next": "i18next-scanner",
+    "watch": "rollup -c --watch",
+    "watch-local": "yarn run watch",
+    "watch-dev": "rollup -c --watch --environment BUILD:development",
+    "test": "rollup -c --environment BUILD:test && karma start --singleRun",
+    "lint": "eslint ."
+  }
+}
--- a/packages/tooltip/rollup.config.js
+++ b/packages/tooltip/rollup.config.js
+import glob from 'glob';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import copy from 'rollup-plugin-copy';
+import {terser} from "rollup-plugin-terser";
+import json from '@rollup/plugin-json';
+import serve from 'rollup-plugin-serve';
+import url from "@rollup/plugin-url";
+import del from 'rollup-plugin-delete';
+import emitEJS from 'rollup-plugin-emit-ejs'
+import {getPackagePath, getDistPath} from '../../rollup.utils.js';
+const pkg = require('./package.json');
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+function getBuildInfo() {
+    const child_process = require('child_process');
+    const url = require('url');
+    let remote = child_process.execSync('git config --get remote.origin.url').toString().trim();
+    let commit = child_process.execSync('git rev-parse --short HEAD').toString().trim();
+    let parsed = url.parse(remote);
+    // convert git urls
+    if (parsed.protocol === null) {
+        parsed = url.parse('git://' + remote.replace(":", "/"));
+        parsed.protocol = 'https:';
+    }
+    let newPath = parsed.path.slice(0, parsed.path.lastIndexOf('.'));
+    let newUrl = parsed.protocol + '//' + parsed.host + newPath + '/commit/' + commit;
+    return {
+        info: commit,
+        url: newUrl,
+        time: new Date().toISOString(),
+        env: build
+    }
+}
+export default (async () => {
+    return {
+        input: (build != 'test') ? ['src/dbp-tooltip.js', 'src/dbp-tooltip-demo.js'] : glob.sync('test/**/*.js'),
+        output: {
+            dir: 'dist',
+            entryFileNames: '[name].js',
+            chunkFileNames: 'shared/[name].[hash].[format].js',
+            format: 'esm',
+            sourcemap: true
+        },
+        plugins: [
+            del({
+                targets: 'dist/*'
+            }),
+            emitEJS({
+                src: 'assets',
+                include: ['**/*.ejs', '**/.*.ejs'],
+                data: {
+                    getUrl: (p) => {
+                        return url.resolve(basePath, p);
+                    },
+                    getPrivateUrl: (p) => {
+                        return url.resolve(`${basePath}local/${pkg.name}/`, p);
+                    },
+                    name: pkg.name,
+                    environment: build,
+                    buildInfo: getBuildInfo()
+                }
+            }),
+            resolve(),
+            commonjs(),
+            url({
+                limit: 0,
+                include: [
+                    await getPackagePath('select2', '**/*.css'),
+                ],
+                emitFiles: true,
+                fileName: 'shared/[name].[hash][extname]'
+            }),
+            json(),
+            (build !== 'local' && build !== 'test') ? terser() : false,
+            copy({
+                targets: [
+                    {src: 'assets/index.html', dest: 'dist'},
+                    {src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'), dest: 'dist/' + await getDistPath('@dbp-toolkit/common', 'icons')},
+                    {src: 'assets/favicon.ico', dest:'dist'},
+                ],
+            }),
+            (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
+        ]
+    };
+})();
--- a/packages/tooltip/src/dbp-tooltip-demo.js
+++ b/packages/tooltip/src/dbp-tooltip-demo.js
+import {createInstance} from './i18n.js';
+import {css, html} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import * as commonUtils from '@dbp-toolkit/common/utils';
+import * as commonStyles from '@dbp-toolkit/common/styles';
+import {TooltipElement} from './tooltip';
+import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
+export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
+    constructor() {
+        super();
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
+    }
+    static get scopedElements() {
+        return {
+            'dbp-tooltip': TooltipElement,
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            lang: { type: String },
+        };
+    }
+    update(changedProperties) {
+         changedProperties.forEach((oldValue, propName) => {
+            if (propName === "lang") {
+                this._i18n.changeLanguage(this.lang);
+            }
+        });
+        super.update(changedProperties);
+    }
+    static get styles() {
+        // language=css
+        return [
+            commonStyles.getThemeCSS(),
+            commonStyles.getGeneralCSS(),
+            css`
+            h1.title {margin-bottom: 1em;}
+            div.container {margin-bottom: 1.5em; padding-left:20px;}
+            `
+        ];
+    }
+    render() {
+        return html`
+            <section class="section">
+                <div class="container">
+                    <h1 class="title">Tooltip-Demo</h1>
+                </div>
+                <div class="container">
+                    <dbp-tooltip></dbp-tooltip>
+                </div>
+            </section>
+        `;
+    }
+}
+commonUtils.defineCustomElement('dbp-tooltip-demo', TooltipDemo);
--- a/packages/tooltip/src/dbp-tooltip.js
+++ b/packages/tooltip/src/dbp-tooltip.js
+import * as commonUtils from '@dbp-toolkit/common/utils';
+import {TooltipElement} from './tooltip';
+commonUtils.defineCustomElement('dbp-tooltip', TooltipElement);
--- a/packages/tooltip/src/i18n.js
+++ b/packages/tooltip/src/i18n.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 function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
\ No newline at end of file
--- a/packages/tooltip/src/i18n/de/translation.json
+++ b/packages/tooltip/src/i18n/de/translation.json
+{}
--- a/packages/tooltip/src/i18n/en/translation.json
+++ b/packages/tooltip/src/i18n/en/translation.json
+{}
--- a/packages/tooltip/src/index.js
+++ b/packages/tooltip/src/index.js
+import {Tooltip} from './tooltip.js';
+export {Tooltip};
\ No newline at end of file
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
+import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
+import tippy from 'tippy.js';
+//import 'tippy.js/dist/tippy.css';
+console.dir(tippy);
+export class TooltipElement extends DBPLitElement {
+    constructor() {
+        super();
+        this.gitInfo = '';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            gitInfo: { type: String, attribute: 'git-info' },
+        };
+    }
+    render() {
+        // tippy('#myButton', {
+        //     content: "I'm a Tippy tooltip!",
+        // });
+        return html`
+        <div>
+            <button id="myButton">My Button</button>
+        </div>
+        `;
+    }
+}