Skip to content
Snippets Groups Projects
Commit f478842a authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

Initial commit

parent 146171f6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 364 additions and 0 deletions
packages/language-select/.gitignore 0 → 100644
+ 5
− 0
View file @ f478842a
dist
node_modules
.idea
npm-debug.log
package-lock.json
packages/language-select/.gitlab-ci.yml 0 → 100644
+ 20
− 0
View file @ f478842a
image: debian:buster
before_script:
- apt update
- apt install -y git
- "sed -i 's|git@gitlab.tugraz.at:VPU|../..|g' .gitmodules"
- git submodule sync
- git submodule update --init
stages:
- test
test:
stage: test
script:
- apt update
- apt install -y npm chromium
- npm install
- npm run build
- npm test
packages/language-select/README.md 0 → 100644
+ 21
− 0
View file @ f478842a
## VPU Language Select Web Component
[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/LanguageSelect)
## Local development
```bash
# get the source
git clone git@gitlab.tugraz.at:VPU/WebComponents/LanguageSelect.git
cd LanguageSelect
git submodule update --init
# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
npm install
# constantly build dist/bundle.js and run a local web-server on port 8002
npm run watch-local
# run tests
npm test
```
packages/language-select/assets/index.html 0 → 100644
+ 21
− 0
View file @ f478842a
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="bundle.js"></script>
<style>
body {
font-family: sans;
}
</style>
</head>
<body>
<vpu-language-select></vpu-language-select>
<br>
<br>
<br>
Current language: <vpu-language-select-demo></vpu-language-select-demo>
</body>
</html>
packages/language-select/i18next-scanner.config.js 0 → 100644
+ 15
− 0
View file @ f478842a
module.exports = {
input: [
'src/*.js',
],
output: './',
options: {
debug: false,
removeUnusedKeys: true,
lngs: ['en','de'],
resource: {
loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
savePath: 'src/i18n/{{lng}}/{{ns}}.json'
},
},
}
packages/language-select/karma.conf.js 0 → 100644
+ 23
− 0
View file @ f478842a
// Trick to use the auto-downloaded puppeteer chrome binary
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function(config) {
config.set({
basePath: 'dist',
frameworks: ['mocha', 'chai'],
files: [
'./bundle.js',
{pattern: './**/*', included: false, watched: true, served: true},
],
autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: false,
logLevel: config.LOG_ERROR
});
}
packages/language-select/package.json 0 → 100644
+ 43
− 0
View file @ f478842a
{
"name": "vpu-person-select",
"version": "1.0.0",
"main": "src/index.js",
"devDependencies": {
"karma": "^4.2.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^1.3.0",
"node-sass": "^4.12.0",
"puppeteer": "^1.15.0",
"mocha": "^6.2.0",
"chai": "^4.2.0",
"rollup": "^1.11.3",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-copy": "^2.0.1",
"rollup-plugin-node-resolve": "^4.2.3",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^4.0.4",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-multi-entry": "^2.1.0",
"i18next-scanner": "^2.10.2"
},
"dependencies": {
"i18next": "^17.0.3",
"lit-element": "^2.1.0"
},
"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": "npm run watch-local",
"watch-local": "rollup -c --watch",
"watch-dev": "rollup -c --watch --environment BUILD:development",
"test": "npm run build-test && karma start --singleRun"
}
}
packages/language-select/rollup.config.js 0 → 100644
+ 36
− 0
View file @ f478842a
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 replace from "rollup-plugin-replace";
import serve from 'rollup-plugin-serve';
import multiEntry from 'rollup-plugin-multi-entry';
const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
console.log("build: " + build);
export default {
input: (build != 'test') ? 'src/demo.js' : 'test/**/*.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
},
plugins: [
multiEntry(),
resolve(),
commonjs(),
json(),
replace({
"process.env.BUILD": '"' + build + '"',
}),
(build !== 'local' && build !== 'test') ? terser() : false,
copy({
targets: [
'assets/index.html',
],
outputFolder: 'dist'
}),
(process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
]
};
packages/language-select/src/demo.js 0 → 100644
+ 36
− 0
View file @ f478842a
import {html, LitElement} from 'lit-element';
import './language-select.js';
class LanguageSelectDemo extends LitElement {
constructor() {
super();
this.lang = 'de';
}
static get properties() {
return {
lang: {type: String},
};
}
handleChange(e) {
this.lang = e.detail.lang;
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('vpu-language-changed', this.handleChange.bind(this));
}
disconnectedCallback() {
windows.removeEventListener('vpu-language-changed', this.handleChange.bind(this));
super.disconnectedCallback();
}
render() {
return html`${this.lang}`;
}
}
customElements.define('vpu-language-select-demo', LanguageSelectDemo);
packages/language-select/src/i18n.js 0 → 100644
+ 29
− 0
View file @ f478842a
import i18next from 'i18next';
import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json';
const i18n = i18next.createInstance();
i18n.init({
lng: 'de',
fallbackLng: ['de'],
debug: false,
initImmediate: false, // Don't init async
resources: {
en: {translation: en},
de: {translation: de}
},
});
console.assert(i18n.isInitialized);
function dateTimeFormat(date, options) {
return new Intl.DateTimeFormat(i18n.languages, options).format(date);
}
function numberFormat(number, options) {
return new Intl.NumberFormat(i18n.languages, options).format(number);
}
export {i18n, dateTimeFormat, numberFormat};
packages/language-select/src/i18n/de/translation.json 0 → 100644
+ 4
− 0
View file @ f478842a
{
"de": "Deutsch",
"en": "Englisch"
}
packages/language-select/src/i18n/en/translation.json 0 → 100644
+ 4
− 0
View file @ f478842a
{
"de": "German",
"en": "English"
}
packages/language-select/src/index.js 0 → 100644
+ 1
− 0
View file @ f478842a
import './language-select.js';
packages/language-select/src/language-select.js 0 → 100644
+ 87
− 0
View file @ f478842a
import {html, css, LitElement} from 'lit-element';
import {i18n, dateTimeFormat, numberFormat} from './i18n.js';
/**
* Emits a vpu-language-changed event where event.detail.lang is the new selected language
*/
class LanguageSelect extends LitElement {
constructor() {
super();
this.lang = 'en';
this.languages = ['de', 'en'];
i18n.t('de');
i18n.t('en');
}
static get properties() {
return {
lang: {type: String},
languages: {type: Array},
};
}
static get styles() {
return css`
select {
background:
linear-gradient(45deg, transparent 50%, black 50%),
linear-gradient(135deg, black 50%, transparent 50%),
linear-gradient(to right, white, white);
background-position:
calc(100% - 21px) calc(1em + 2px),
calc(100% - 16px) calc(1em + 2px),
100% 0;
background-size:
5px 5px,
5px 5px,
2.5em 2.5em;
background-repeat: no-repeat;
border: 1px solid #000;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 0.5em;
border-radius: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance:none;
-moz-appearance:none;
}
`;
}
updated(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === 'lang') {
const event = new CustomEvent("vpu-language-changed", {
bubbles: true,
detail: {'lang': this.lang},
});
window.dispatchEvent(event);
i18n.changeLanguage(this.lang);
this.requestUpdate();
}
});
super.updated(changedProperties);
}
onSelectChange(e) {
this.lang = e.target.value;
}
render() {
return html`
<select @change=${this.onSelectChange}>
${this.languages.map(i => html`<option value="${i}" ?selected=${this.lang === i}>${i18n.t(i)}</option>`)}
</select>
`;
}
}
customElements.define('vpu-language-select', LanguageSelect);
packages/language-select/test/unit.js 0 → 100644
+ 19
− 0
View file @ f478842a
import '../src/language-select';
describe('vpu-language-select basics', () => {
let node;
beforeEach(async () => {
node = document.createElement('vpu-language-select');
document.body.appendChild(node);
await node.updateComplete;
});
afterEach(() => {
node.remove();
});
it('should render', () => {
expect(node).to.have.property('shadowRoot');
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment