manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

It works now, but needs a lot more polish; also, must convert all

Browse source 
layouts.
This commit is contained in:
Manuel Friedli 2019-05-05 03:41:01 +02:00
parent 933a3c92f5
commit 57d074d5fe
12 changed files with 194 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
dist/bundle.js vendored
View file

File diff suppressed because one or more lines are too long

29
index.html
View file

@ -21,18 +21,27 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-title" content="Bärneruhr"/>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="dist/uhr.min.css"/>
<link rel="stylesheet" type="text/css" href="dist/uhr-black.min.css" data-class="black" data-name="Schwarz"/>
<link rel="stylesheet" type="text/css" href="dist/uhr-white.min.css" data-class="white" data-name="Weiss"/>
<link rel="stylesheet" type="text/css" href="dist/uhr-red.min.css" data-class="red" data-name="Rot"/>
<link rel="stylesheet" type="text/css" href="dist/uhr-yellow.min.css" data-class="yellow" data-name="Gelb"/>
<link rel="stylesheet" type="text/css" href="dist/uhr-green.min.css" data-class="green" data-name="Grün"/>
<link rel="stylesheet" type="text/css" href="dist/uhr-blue.min.css" data-class="blue" data-name="Blau"/>
<link rel="stylesheet" type="text/css" href="dist/uhr-pink.min.css" data-class="pink" data-name="Pink"/>
<link rel="stylesheet" type="text/css" href="css/uhr.css"/>
<link rel="stylesheet" type="text/css" href="css/uhr-black.css" data-class="black" data-name="Schwarz"/>
<link rel="stylesheet" type="text/css" href="css/uhr-white.css" data-class="white" data-name="Weiss"/>
<link rel="stylesheet" type="text/css" href="css/uhr-red.css" data-class="red" data-name="Rot"/>
<link rel="stylesheet" type="text/css" href="css/uhr-yellow.css" data-class="yellow" data-name="Gelb"/>
<link rel="stylesheet" type="text/css" href="css/uhr-green.css" data-class="green" data-name="Grün"/>
<link rel="stylesheet" type="text/css" href="css/uhr-blue.css" data-class="blue" data-name="Blau"/>
<link rel="stylesheet" type="text/css" href="css/uhr-pink.css" data-class="pink" data-name="Pink"/>
<link rel="shortcut icon" type="image/png" href="resources/favicon.png"/>
<link rel="apple-touch-icon-precomposed" href="resources/apple-touch-icon-precomposed.png"/>
<script type="text/javascript" src="dist/libs.min.js"></script>
<script type="text/javascript" src="dist/jquery.uhr.complete.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<script type="text/javascript" src="dist/bundle.js"></script>
<!--<script type="text/javascript" src="dist/libs.min.js"></script>-->
<!--<script type="text/javascript" src="dist/jquery.uhr.complete.min.js"></script>-->
<script type="text/javascript">
function go(url) {
window.location = url;

41
info/index.html
View file

@ -18,13 +18,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<title>Die Zeit im Wort - Informationen</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="../dist/uhr.min.css"/>
<link rel="stylesheet" type="text/css" href="../dist/uhr-black.min.css" data-class="black"/>
<link rel="stylesheet" type="text/css" href="../dist/uhr-red.min.css" data-class="red"/>
<link rel="stylesheet" type="text/css" href="../css/uhr.css"/>
<link rel="stylesheet" type="text/css" href="../css/uhr-black.css" data-class="black"/>
<link rel="stylesheet" type="text/css" href="../css/uhr-red.css" data-class="red"/>
<link rel="stylesheet" type="text/css" href="info.css"/>
<link rel="shortcut icon" type="image/png" href="../resources/favicon.png"/>
<script type="text/javascript" src="../dist/libs.min.js"></script>
<script type="text/javascript" src="../dist/jquery.uhr.base.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<script type="text/javascript" src="../dist/bundle.js"></script>
<!--<script type="text/javascript" src="../dist/jquery.uhr.base.min.js"></script>-->
<script type="text/javascript">
function go(url) {
window.location = url;
@ -95,13 +103,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei,
dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/>
<code>&lt;link rel="stylesheet" type="text/css" href="dist/uhr.min.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-black.min.css" data-class="black" data-name="Schwarz" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-white.min.css" data-class="white" data-name="Weiss" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-red.min.css" data-class="red" data-name="Rot" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-yellow.min.css" data-class="yellow" data-name="Gelb" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-green.min.css" data-class="green" data-name="Grün" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-blue.min.css" data-class="blue" data-name="Blau" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-pink.min.css" data-class="pink" data-name="Pink" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-black.min.css" data-class="black"
data-name="Schwarz" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-white.min.css" data-class="white"
data-name="Weiss" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-red.min.css" data-class="red" data-name="Rot"
/&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-yellow.min.css" data-class="yellow"
data-name="Gelb" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-green.min.css" data-class="green"
data-name="Grün" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-blue.min.css" data-class="blue"
data-name="Blau" /&gt;
&lt;link rel="stylesheet" type="text/css" href="dist/uhr-pink.min.css" data-class="pink"
data-name="Pink" /&gt;
&lt;script type="text/javascript" src="dist/libs.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dist/jquery.uhr.complete.min.js"&gt;&lt;/script&gt;</code>
</p>
@ -207,7 +222,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<br/>Default: <code>'100%'</code></dd>
</dl>
<script type="text/javascript">
(function($) {
(function ($) {
$('#uhr1').uhr({
width: '200px',
language: 'de_CH',

14
package-lock.json generated
View file

@ -22,6 +22,12 @@
"@types/jquery": "*"
}
},
"@types/js-cookie": {
"version": "2.2.2",
"resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/@types/js-cookie/-/js-cookie-2.2.2.tgz",
"integrity": "sha1-hOiEjhTURBhybOtS3Yh8e/5F1ng=",
"dev": true
},
"@types/sizzle": {
"version": "2.3.2",
"resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/@types/sizzle/-/sizzle-2.3.2.tgz",
@ -3783,10 +3789,10 @@
"resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/jquery-ui/-/jquery-ui-1.12.1.tgz",
"integrity": "sha1-vLQEXI3QU5wTS8FIjN0+dop6nlE="
},
"jquery.cookie": {
"version": "1.4.1",
"resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/jquery.cookie/-/jquery.cookie-1.4.1.tgz",
"integrity": "sha1-1j3OIJ6raR/mMxbbCMqeR+D5OFs="
"js-cookie": {
"version": "2.2.0",
"resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/js-cookie/-/js-cookie-2.2.0.tgz",
"integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
},
"js-yaml": {
"version": "3.13.1",

3
package.json
View file

@ -28,11 +28,12 @@
"dependencies": {
"jquery": "3.4.1",
"jquery-ui": "1.12.1",
"jquery.cookie": "1.4.1"
"js-cookie": "2.2.0"
},
"devDependencies": {
"@types/jquery": "3.3.29",
"@types/jqueryui": "1.12.7",
"@types/js-cookie": "2.2.2",
"chai": "4.2.0",
"grunt": "1.0.4",
"grunt-cli": "1.3.2",

10
src/domain/globals.ts
View file

@ -52,19 +52,23 @@ export class Globals {
}
static registerLayout(layout: Layout): void {
const available = Globals.layouts.some(element => {
const available = !Globals.layouts.some(element => {
if (layout.code === element.code) {
console.error(
`Error: Language code '${layout.code}' cannot be registered for layout '${layout.prettyName}'
because it is already registered for layout '${element.prettyName}'!`
);
return false;
}
console.log("globals.ts", "REJECTING LAYOUT", layout.code, Globals.layouts);
return true;
}
return false;
}
);
if (available) {
console.log("globals.ts", "registering layout", layout.code, layout);
Globals.layouts.push(layout);
} else {
console.log("globals.ts", "NOT registering layout", layout.code, layout);
}
}

2
src/index.ts
View file

@ -19,12 +19,14 @@ import {Uhr} from "./uhr";
import {WidgetPrototype} from "./widget/widget-prototype";
import {Layout} from "./domain/layout";
import {Layout_de_CH} from "./layout/layout-de_ch";
import {Layout_de_CH_genau} from "./layout/layout-de_ch_genau";
// First things first: discover included themes and register them
autodetectThemes();
// Now register some layouts
Globals.registerLayout(Layout_de_CH);
Globals.registerLayout(Layout_de_CH_genau);
$.widget("fritteli.uhr", {
"options": {

15
src/layout/layout-de_ch.ts
View file

@ -16,13 +16,13 @@
import {Layout, WordDefinition} from "../domain/layout";
const es_isch: WordDefinition = {1: [1, 2, 4, 5, 6, 7]};
const ab = {4: [1, 2]};
const vor = {3: [9, 10, 11]};
const haubi = {4: [4, 5, 6, 7, 8]};
const fuef = {1: [9, 10, 11]};
const zae = {2: [9, 10, 11]};
const viertu = {2: [1, 2, 3, 4, 5, 6]};
const zwaenzg = {3: [1, 2, 3, 4, 5, 6]};
const ab: WordDefinition = {4: [1, 2]};
const vor: WordDefinition = {3: [9, 10, 11]};
const haubi: WordDefinition = {4: [4, 5, 6, 7, 8]};
const fuef: WordDefinition = {1: [9, 10, 11]};
const zae: WordDefinition = {2: [9, 10, 11]};
const viertu: WordDefinition = {2: [1, 2, 3, 4, 5, 6]};
const zwaenzg: WordDefinition = {3: [1, 2, 3, 4, 5, 6]};
export const Layout_de_CH: Layout = {
code: 'de_CH',
@ -64,7 +64,6 @@ export const Layout_de_CH: Layout = {
"45,46,47,48,49": [viertu, vor],
"50,51,52,53,54": [zae, vor],
"55,56,57,58,59": [fuef, vor]
},
permanent: es_isch,
prettyName: 'Bärndütsch',

73
src/layout/layout-de_ch_genau.ts Normal file
View file

@ -0,0 +1,73 @@
/*
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import {Layout, WordDefinition} from "../domain/layout";
const es_isch: WordDefinition = {1: [1, 2, 4, 5, 6, 7]};
const genau: WordDefinition = {3: [7, 8, 9, 10, 11]};
const ab: WordDefinition = {4: [4, 5]};
const vor: WordDefinition = {4: [1, 2, 3]};
const haubi: WordDefinition = {4: [7, 8, 9, 10, 11]};
const fuef: WordDefinition = {1: [9, 10, 11]};
const zae: WordDefinition = {2: [9, 10, 11]};
const viertu: WordDefinition = {2: [1, 2, 3, 4, 5, 6]};
const zwaenzg: WordDefinition = {3: [1, 2, 3, 4, 5, 6]};
export const Layout_de_CH_genau: Layout = {
code: 'de_CH_genau',
hours: {
'0,12': {10: [1, 2, 3, 4, 5, 6]},
'1,13': {5: [1, 2, 3]},
'2,14': {5: [4, 5, 6, 7]},
'3,15': {5: [9, 10, 11]},
'4,16': {6: [1, 2, 3, 4, 5]},
'5,17': {6: [6, 7, 8, 9]},
'6,18': {7: [1, 2, 3, 4, 5, 6]},
'7,19': {7: [7, 8, 9, 10, 11]},
'8,20': {8: [1, 2, 3, 4, 5]},
'9,21': {8: [6, 7, 8, 9]},
'10,22': {9: [1, 2, 3, 4]},
'11,23': {9: [8, 9, 10, 11]}
},
letters: [
'ESKISCHAFÜF',
'VIERTUBFZÄÄ',
'ZWÄNZGGENAU',
'VORABOHAUBI',
'EISZWÖISDRÜ',
'VIERIFÜFIQT',
'SÄCHSISIBNI',
'ACHTINÜNIEL',
'ZÄNIERBEUFI',
'ZWÖUFINAUHR'
],
minutes: {
"0": genau,
"5,6,7,8,9": [fuef, ab],
"10,11,12,13,14": [zae, ab],
"15,16,17,18,19": [viertu, ab],
"20,21,22,23,24": [zwaenzg, ab],
"25,26,27,28,29": [fuef, vor, haubi],
"30,31,32,33,34": haubi,
"35,36,37,38,39": [fuef, ab, haubi],
"40,41,42,43,44": [zwaenzg, vor],
"45,46,47,48,49": [viertu, vor],
"50,51,52,53,54": [zae, vor],
"55,56,57,58,59": [fuef, vor]
},
permanent: es_isch,
prettyName: 'Bärndütsch (genau)',
version: 2
};

2
src/renderer.ts
View file

@ -244,6 +244,7 @@ class UhrRendererV2Delegate {
}
this.parseTimeDefinition(letters, 'minute', this.layout.minutes);
this.parseTimeDefinition(letters, 'hour', this.layout.hours);
console.log("renderer.ts", "parsed layout", this.layout.code, this.layout, letters);
return letters;
};
@ -294,6 +295,7 @@ export class UhrRenderer {
if (this.layout.version === 2) {
const delegate: UhrRendererV2Delegate = new UhrRendererV2Delegate(this.layout);
const parsedLayout: Letter[][] = delegate.parse();
console.log("renderer.ts", "got parsed layout", parsedLayout);
Object.defineProperty(this.layout, "parsed", {
"value": parsedLayout,
"writable": false,

34
src/uhr.ts
View file

@ -17,6 +17,7 @@ import {WidgetPrototype} from "./widget/widget-prototype";
import {Globals} from "./domain/globals";
import {UhrRenderer} from "./renderer";
import {EMPTY_LAYOUT, Layout} from "./domain/layout";
import * as Cookies from "js-cookie";
export class Uhr {
@ -176,17 +177,13 @@ export class Uhr {
}
const closebutton = $(`<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel${this.widgetInstance.uuid}"></a>`);
//FIXME deprecated?!
closebutton.on('click', function () {
$(`#uhr-controlpanel${this.uuid}`).hide('fast');
}.bind(this.widgetInstance));
closebutton.on('click', () => $(`#uhr-controlpanel${this.widgetInstance.uuid}`).hide('fast'));
content.append(closebutton);
e.after(controlpanel);
controlpanel.hide();
const configlink = $(`<a class="uhr-configlink" id="uhr-configlink${this.widgetInstance.uuid}"></a>`);
// FIXME deprecated!?
configlink.on('click', function () {
this.toggleConfigScreen();
}.bind(this));
configlink.on('click', () => this.toggleConfigScreen());
e.after(configlink);
}
};
@ -296,7 +293,7 @@ export class Uhr {
}
private getCookie(cookieName: string): string {
return $.cookie(cookieName + this.widgetInstance.uuid);
return Cookies.get(cookieName + this.widgetInstance.uuid);
}
private setCookie(cookieName: string, cookieValue: string): void {
@ -306,7 +303,7 @@ export class Uhr {
} else {
options = {expires: 365};
}
$.cookie(cookieName + this.widgetInstance.uuid, cookieValue, options);
Cookies.set(cookieName + this.widgetInstance.uuid, cookieValue, options);
}
private update(): void {
@ -383,6 +380,10 @@ export class Uhr {
return hour;
};
private toggleConfigScreen() {
$(`#uhr-controlpanel${this.widgetInstance.uuid}`).toggle('fast');
};
private parseHash(): void {
let hash: string = window.location.hash;
if (hash !== undefined && hash.charAt(0) === '#') {
@ -428,20 +429,3 @@ export class Uhr {
return EMPTY_LAYOUT;
};
}
declare function $(selector: any): JQuery;
declare namespace $ {
const cookie: Cookie;
interface Cookie {
// read all cookies
(): { [name: string]: string }
// read named cookie
(cookieName: string): string;
// set cookie with optional options
(cookieName: string, cookieValue: string, cookieOptions?: any): string;
}
}

3
webpack.config.js
View file

@ -6,7 +6,8 @@ const path = require('path');
module.exports = {
entry: [
'./src/index.ts'
'./src/index.ts',
'./node_modules/jquery/dist/jquery.js'
],
devtool: "inline-source-map",
module: {