From 3e86408b903afa3c4478cd61e8a0cbcf2d7aa48e Mon Sep 17 00:00:00 2001 From: Markus Birth Date: Sat, 6 Jan 2018 20:11:47 +0100 Subject: [PATCH 1/3] Get main JavaScript out of page. Make it CoffeeScript. --- .gitignore | 2 + Makefile | 22 +++ assets/main.coffee | 25 ++++ index_main.php | 32 +---- package-lock.json | 342 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 6 files changed, 393 insertions(+), 31 deletions(-) create mode 100644 Makefile create mode 100644 assets/main.coffee create mode 100644 package-lock.json diff --git a/.gitignore b/.gitignore index 9c32455..7904443 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +/assets/*.js +/assets/*.map /data/ /node_modules/ /config.ini diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..2055c83 --- /dev/null +++ b/Makefile @@ -0,0 +1,22 @@ +CC=node_modules/.bin/coffee +ASSETDIR=assets + +SRC=$(wildcard $(ASSETDIR)/*.coffee) +BUILD=$(SRC:%.coffee=%.js) + +all: coffee + +# coffeescript files + +coffee: $(BUILD) + +$(ASSETDIR)/%.js: $(ASSETDIR)/%.coffee + $(CC) -m -c $< + +# cleanup + +.PHONY: clean +clean: + -rm $(BUILD) + + diff --git a/assets/main.coffee b/assets/main.coffee new file mode 100644 index 0000000..ae7a85e --- /dev/null +++ b/assets/main.coffee @@ -0,0 +1,25 @@ +window.mdc.autoInit() +window.tabBar = new mdc.tabs.MDCTabBar document.querySelector '#tab-bar' + +# Hide all panels but the selected one +activatePanel = (panelId) -> + allPanels = document.querySelectorAll '.panel' + for panel, i in allPanels + if panel.id is panelId + tabBar.activeTabIndex = i + panel.style.display = if panel.id is panelId then 'block' else 'none' + +# React to clicking the tabs +window.tabBar.listen 'MDCTabBar:change', (t) -> + nthChildIndex = t.detail.activeTabIndex + tabId = t.srcElement.id + tab = document.querySelector "##{tabId} .mdc-tab:nth-child(#{nthChildIndex + 1})" + panelId = tab.dataset.panel + activatePanel panelId + +# If specific tab/panel given in URL, e.g. #motion, switch to that +hash = location.hash +if hash.length > 1 + activatePanel 'family-' + hash.substring 1 +else + activatePanel 'family-keyone' diff --git a/index_main.php b/index_main.php index 560a487..649f423 100644 --- a/index_main.php +++ b/index_main.php @@ -91,36 +91,6 @@ foreach ($allVars as $family => $models) { ?> - + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0a7a8db --- /dev/null +++ b/package-lock.json @@ -0,0 +1,342 @@ +{ + "name": "tcl_update_db", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@material/animation": { + "version": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "integrity": "sha1-slKsPQtijnmnnwxAbXRw+1Y1KoA=" + }, + "@material/auto-init": { + "version": "https://registry.npmjs.org/@material/auto-init/-/auto-init-0.25.0.tgz", + "integrity": "sha1-ThvR49HKBf2TcTDdHxf1zi9FhKU=" + }, + "@material/base": { + "version": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "integrity": "sha1-iIph5bZYDjWmY4Sp+IIwkbT+fFU=" + }, + "@material/button": { + "version": "https://registry.npmjs.org/@material/button/-/button-0.27.0.tgz", + "integrity": "sha1-VG4YhzJAQ7Jgfs07pmGwKe9skJs=", + "requires": { + "@material/elevation": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/card": { + "version": "https://registry.npmjs.org/@material/card/-/card-0.27.0.tgz", + "integrity": "sha1-BRP+jyNDD66tsSYRdjEiqQGzqvc=", + "requires": { + "@material/elevation": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/checkbox": { + "version": "https://registry.npmjs.org/@material/checkbox/-/checkbox-0.27.0.tgz", + "integrity": "sha1-X7HiZGv/x5OCimFNLgAQ9SY8BQ0=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/selection-control": "https://registry.npmjs.org/@material/selection-control/-/selection-control-0.27.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz" + } + }, + "@material/dialog": { + "version": "https://registry.npmjs.org/@material/dialog/-/dialog-0.27.0.tgz", + "integrity": "sha1-tncC6WU+IKRGrB5H7Tp+LP0odS8=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/elevation": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.1.1.tgz", + "focus-trap": "https://registry.npmjs.org/focus-trap/-/focus-trap-2.4.2.tgz" + }, + "dependencies": { + "@material/typography": { + "version": "https://registry.npmjs.org/@material/typography/-/typography-0.1.1.tgz", + "integrity": "sha1-+y40N70yhNOen7kUhXZ63msr0ME=" + } + } + }, + "@material/drawer": { + "version": "https://registry.npmjs.org/@material/drawer/-/drawer-0.27.0.tgz", + "integrity": "sha1-I/5rZ2QHt+MapwaljrggmfR5rHY=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/elevation": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/elevation": { + "version": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "integrity": "sha1-qxsizcbQyEDiw4njNMOUZqg5fJs=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.4.0.tgz" + }, + "dependencies": { + "@material/theme": { + "version": "https://registry.npmjs.org/@material/theme/-/theme-0.4.0.tgz", + "integrity": "sha1-Cu8aAnm2XBWZBYT7i47KCVxzRkE=" + } + } + }, + "@material/fab": { + "version": "https://registry.npmjs.org/@material/fab/-/fab-0.27.0.tgz", + "integrity": "sha1-LuS0fUJIcx/mBl/LtkI8NuscX7M=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/elevation": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz" + } + }, + "@material/form-field": { + "version": "https://registry.npmjs.org/@material/form-field/-/form-field-0.27.0.tgz", + "integrity": "sha1-ijy4b0fSzHwq11h9GDQxQVP0Mas=", + "requires": { + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/selection-control": "https://registry.npmjs.org/@material/selection-control/-/selection-control-0.27.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/grid-list": { + "version": "https://registry.npmjs.org/@material/grid-list/-/grid-list-0.27.0.tgz", + "integrity": "sha1-0OrYlVWpp6/00/x8/2CiIatXdIM=", + "requires": { + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/icon-toggle": { + "version": "https://registry.npmjs.org/@material/icon-toggle/-/icon-toggle-0.27.0.tgz", + "integrity": "sha1-rAJM9LypmUfXSh/1vHYTSPPJSYE=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz" + } + }, + "@material/layout-grid": { + "version": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-0.24.0.tgz", + "integrity": "sha1-Ij13HXVdiHgHmY2W9ZluGCzrZA0=" + }, + "@material/linear-progress": { + "version": "https://registry.npmjs.org/@material/linear-progress/-/linear-progress-0.27.0.tgz", + "integrity": "sha1-BgffubV5oR4P5eqUCvN4QUX0XEA=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz" + } + }, + "@material/list": { + "version": "https://registry.npmjs.org/@material/list/-/list-0.27.0.tgz", + "integrity": "sha1-hCpslFtlrG9eTx3qVbEPAVrIsVw=", + "requires": { + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/menu": { + "version": "https://registry.npmjs.org/@material/menu/-/menu-0.27.0.tgz", + "integrity": "sha1-VtGrwTABOqzDO0DB1NK6jdClrjI=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/elevation": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/radio": { + "version": "https://registry.npmjs.org/@material/radio/-/radio-0.27.0.tgz", + "integrity": "sha1-w0KivzXsp7oM0lg+EOucoEbBpQw=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/selection-control": "https://registry.npmjs.org/@material/selection-control/-/selection-control-0.27.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz" + } + }, + "@material/ripple": { + "version": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "integrity": "sha1-F074I0NOUWYt7HtLqfHXvHkF15s=", + "requires": { + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz" + } + }, + "@material/rtl": { + "version": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "integrity": "sha1-JGLbFeLU4EFmZIVVnAKDgocrAfs=" + }, + "@material/select": { + "version": "https://registry.npmjs.org/@material/select/-/select-0.27.0.tgz", + "integrity": "sha1-QZt94OrSnv3+qQFTpew3sSoB0yg=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/list": "https://registry.npmjs.org/@material/list/-/list-0.27.0.tgz", + "@material/menu": "https://registry.npmjs.org/@material/menu/-/menu-0.27.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/selection-control": { + "version": "https://registry.npmjs.org/@material/selection-control/-/selection-control-0.27.0.tgz", + "integrity": "sha1-TffVbtidup0EHwFmYe+Bn3ocHwY=", + "requires": { + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz" + } + }, + "@material/slider": { + "version": "https://registry.npmjs.org/@material/slider/-/slider-0.27.0.tgz", + "integrity": "sha1-5iT7G51dMPJefXStg22ZlaLvqrw=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz" + } + }, + "@material/snackbar": { + "version": "https://registry.npmjs.org/@material/snackbar/-/snackbar-0.27.0.tgz", + "integrity": "sha1-CXIslfmlgDCCEBahGM2sutzGJm8=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/switch": { + "version": "https://registry.npmjs.org/@material/switch/-/switch-0.27.0.tgz", + "integrity": "sha1-6TkLcG0lIvAz4VQePE542pG9h4s=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/elevation": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz" + } + }, + "@material/tabs": { + "version": "https://registry.npmjs.org/@material/tabs/-/tabs-0.27.0.tgz", + "integrity": "sha1-2Iogc/lAdVsbcWWiKpG+RvABVwI=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/textfield": { + "version": "https://registry.npmjs.org/@material/textfield/-/textfield-0.27.0.tgz", + "integrity": "sha1-+8WElblmrgILBbtye7FPJuVC3k4=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/theme": { + "version": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "integrity": "sha1-Mv1yrd/sCb8i6D9m82p+u9wSNGE=" + }, + "@material/toolbar": { + "version": "https://registry.npmjs.org/@material/toolbar/-/toolbar-0.27.0.tgz", + "integrity": "sha1-X6YZIiXWBcSp9dXNLjuILX1Sy64=", + "requires": { + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/elevation": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "@material/typography": { + "version": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz", + "integrity": "sha1-+CjC0yFb/WbFgHJwm0JgxkElOQo=" + }, + "coffeescript": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-2.1.1.tgz", + "integrity": "sha512-Tl2z6/rNMqJ2LqWlVxLKwLF9FniwJpweonfSLCwhX8NFCEsGBcFIErtfKd8+t4XHDSYRshj9FXxPX53BT3lC9w==" + }, + "focus-trap": { + "version": "https://registry.npmjs.org/focus-trap/-/focus-trap-2.4.2.tgz", + "integrity": "sha1-ROocVanCLCtlKdzrveY5DrLuTIg=", + "requires": { + "tabbable": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.2.tgz" + } + }, + "material-components-web": { + "version": "https://registry.npmjs.org/material-components-web/-/material-components-web-0.27.0.tgz", + "integrity": "sha1-YFBV9wA8x4bZ6352xDkRG+81454=", + "requires": { + "@material/animation": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", + "@material/auto-init": "https://registry.npmjs.org/@material/auto-init/-/auto-init-0.25.0.tgz", + "@material/base": "https://registry.npmjs.org/@material/base/-/base-0.24.0.tgz", + "@material/button": "https://registry.npmjs.org/@material/button/-/button-0.27.0.tgz", + "@material/card": "https://registry.npmjs.org/@material/card/-/card-0.27.0.tgz", + "@material/checkbox": "https://registry.npmjs.org/@material/checkbox/-/checkbox-0.27.0.tgz", + "@material/dialog": "https://registry.npmjs.org/@material/dialog/-/dialog-0.27.0.tgz", + "@material/drawer": "https://registry.npmjs.org/@material/drawer/-/drawer-0.27.0.tgz", + "@material/elevation": "https://registry.npmjs.org/@material/elevation/-/elevation-0.25.0.tgz", + "@material/fab": "https://registry.npmjs.org/@material/fab/-/fab-0.27.0.tgz", + "@material/form-field": "https://registry.npmjs.org/@material/form-field/-/form-field-0.27.0.tgz", + "@material/grid-list": "https://registry.npmjs.org/@material/grid-list/-/grid-list-0.27.0.tgz", + "@material/icon-toggle": "https://registry.npmjs.org/@material/icon-toggle/-/icon-toggle-0.27.0.tgz", + "@material/layout-grid": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-0.24.0.tgz", + "@material/linear-progress": "https://registry.npmjs.org/@material/linear-progress/-/linear-progress-0.27.0.tgz", + "@material/list": "https://registry.npmjs.org/@material/list/-/list-0.27.0.tgz", + "@material/menu": "https://registry.npmjs.org/@material/menu/-/menu-0.27.0.tgz", + "@material/radio": "https://registry.npmjs.org/@material/radio/-/radio-0.27.0.tgz", + "@material/ripple": "https://registry.npmjs.org/@material/ripple/-/ripple-0.27.0.tgz", + "@material/rtl": "https://registry.npmjs.org/@material/rtl/-/rtl-0.1.8.tgz", + "@material/select": "https://registry.npmjs.org/@material/select/-/select-0.27.0.tgz", + "@material/selection-control": "https://registry.npmjs.org/@material/selection-control/-/selection-control-0.27.0.tgz", + "@material/slider": "https://registry.npmjs.org/@material/slider/-/slider-0.27.0.tgz", + "@material/snackbar": "https://registry.npmjs.org/@material/snackbar/-/snackbar-0.27.0.tgz", + "@material/switch": "https://registry.npmjs.org/@material/switch/-/switch-0.27.0.tgz", + "@material/tabs": "https://registry.npmjs.org/@material/tabs/-/tabs-0.27.0.tgz", + "@material/textfield": "https://registry.npmjs.org/@material/textfield/-/textfield-0.27.0.tgz", + "@material/theme": "https://registry.npmjs.org/@material/theme/-/theme-0.27.0.tgz", + "@material/toolbar": "https://registry.npmjs.org/@material/toolbar/-/toolbar-0.27.0.tgz", + "@material/typography": "https://registry.npmjs.org/@material/typography/-/typography-0.3.0.tgz" + } + }, + "tabbable": { + "version": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.2.tgz", + "integrity": "sha1-sXFoCupuCj6Sgf8jUy4uXeEcDZQ=" + } + } +} diff --git a/package.json b/package.json index e4fbe1d..a2480ea 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "url": "mbirth/tcl_update_db" }, "dependencies": { + "coffeescript": "^2.1.1", "material-components-web": "^0.27.0" } } From 61706d8651dace14aef8a54d53d17541bb3182db Mon Sep 17 00:00:00 2001 From: Markus Birth Date: Sat, 6 Jan 2018 21:33:54 +0100 Subject: [PATCH 2/3] Move script tags to top, run after DOM Ready. --- assets/main.coffee | 46 ++++++++++++++++++++++++---------------------- index_main.php | 4 ++-- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/assets/main.coffee b/assets/main.coffee index ae7a85e..985b0e5 100644 --- a/assets/main.coffee +++ b/assets/main.coffee @@ -1,25 +1,27 @@ -window.mdc.autoInit() -window.tabBar = new mdc.tabs.MDCTabBar document.querySelector '#tab-bar' +document.addEventListener 'DOMContentLoaded', (event) -> -# Hide all panels but the selected one -activatePanel = (panelId) -> - allPanels = document.querySelectorAll '.panel' - for panel, i in allPanels - if panel.id is panelId - tabBar.activeTabIndex = i - panel.style.display = if panel.id is panelId then 'block' else 'none' + window.mdc.autoInit() + window.tabBar = new mdc.tabs.MDCTabBar document.querySelector '#tab-bar' -# React to clicking the tabs -window.tabBar.listen 'MDCTabBar:change', (t) -> - nthChildIndex = t.detail.activeTabIndex - tabId = t.srcElement.id - tab = document.querySelector "##{tabId} .mdc-tab:nth-child(#{nthChildIndex + 1})" - panelId = tab.dataset.panel - activatePanel panelId + # Hide all panels but the selected one + activatePanel = (panelId) -> + allPanels = document.querySelectorAll '.panel' + for panel, i in allPanels + if panel.id is panelId + tabBar.activeTabIndex = i + panel.style.display = if panel.id is panelId then 'block' else 'none' -# If specific tab/panel given in URL, e.g. #motion, switch to that -hash = location.hash -if hash.length > 1 - activatePanel 'family-' + hash.substring 1 -else - activatePanel 'family-keyone' + # React to clicking the tabs + window.tabBar.listen 'MDCTabBar:change', (t) -> + nthChildIndex = t.detail.activeTabIndex + tabId = t.srcElement.id + tab = document.querySelector "##{tabId} .mdc-tab:nth-child(#{nthChildIndex + 1})" + panelId = tab.dataset.panel + activatePanel panelId + + # If specific tab/panel given in URL, e.g. #motion, switch to that + hash = location.hash + if hash.length > 1 + activatePanel 'family-' + hash.substring 1 + else + activatePanel 'family-keyone' diff --git a/index_main.php b/index_main.php index 649f423..4ff1487 100644 --- a/index_main.php +++ b/index_main.php @@ -5,6 +5,8 @@ + + $models) { } ?> - - From 29d65bed78718640a7c9a965866e2587b5f30c96 Mon Sep 17 00:00:00 2001 From: Markus Birth Date: Sun, 7 Jan 2018 00:55:45 +0100 Subject: [PATCH 3/3] Added a tooltip on hovering version numbers. Will show details soon. --- assets/main.coffee | 54 ++++++++++++++++++++++++++++++++++++++++++++++ assets/style.css | 15 +++++++++++-- index_main.php | 20 +++++++++++------ 3 files changed, 81 insertions(+), 8 deletions(-) diff --git a/assets/main.coffee b/assets/main.coffee index 985b0e5..d2b9a5a 100644 --- a/assets/main.coffee +++ b/assets/main.coffee @@ -25,3 +25,57 @@ document.addEventListener 'DOMContentLoaded', (event) -> activatePanel 'family-' + hash.substring 1 else activatePanel 'family-keyone' + + window.showTooltip = (event) -> + tt = document.querySelector('#tooltip') + tt_title = document.querySelector('#tooltip-title') + tt_text = document.querySelector('#tooltip-text') + + ref = event.target.parentNode.dataset.ref + ver = event.target.innerText + + tt_title.innerHTML = ver + tt_text.innerHTML = "for #{ref}" + + + # Show tooltip + tt.style.visibility = 'hidden' + tt.style.display = 'block' + positionTooltip event.clientX + window.scrollX, event.clientY + window.scrollY + tt.style.visibility = 'visible' + + window.positionTooltip = (mouseX, mouseY) -> + tooltip = document.querySelector '#tooltip' + + #pageHeight = document.documentElement.getBoundingClientRect().height + viewportBottom = document.documentElement.clientHeight + document.documentElement.scrollTop + viewportRight = document.documentElement.clientWidth + document.documentElement.scrollLeft + cursorOffset = 20 + tooltipHeight = tooltip.clientHeight + tooltipWidth = tooltip.clientWidth + + #console.log('Cursor: %o, Planned bottom: %o, Viewport bottom: %o', mouseY, mouseY+cursorOffset+tooltipHeight, viewportBottom) + + # Check if tooltip is outside bottom of document + if mouseY + cursorOffset + tooltipHeight >= viewportBottom + # show tooltip ABOVE cursor + tooltip.style.top = (mouseY - cursorOffset - tooltipHeight) + 'px' + else + # show tooltip below cursor + tooltip.style.top = (mouseY + cursorOffset) + 'px' + + if mouseX + cursorOffset + tooltipWidth >= viewportRight + # show tooltip LEFT of cursor + tooltip.style.left = (mouseX - cursorOffset - tooltipWidth) + 'px' + else + # show tooltip right of cursor + tooltip.style.left = (mouseX + cursorOffset) + 'px' + + versionitems = document.querySelectorAll '.version' + for vi in versionitems + vi.addEventListener 'mousemove', (event) -> + positionTooltip event.clientX + window.scrollX, event.clientY + window.scrollY + vi.addEventListener 'mouseover', (event) -> + showTooltip event + vi.addEventListener 'mouseout', (event) -> + document.querySelector('#tooltip').style.display = 'none' diff --git a/assets/style.css b/assets/style.css index 742bfe5..771c757 100644 --- a/assets/style.css +++ b/assets/style.css @@ -15,17 +15,28 @@ body { margin-top: 70px; } +#tooltip { + background-color: white; + z-index: 200; + position: absolute; + display: none; +} + +#tooltip h1 { + font-weight: bold; +} + table td+td { border-left: 1px dashed silver; text-align: center; } -td { +th, td { font-family: monospace; white-space: nowrap; } -td.ref { +th.ref { font-weight: bold; } diff --git a/index_main.php b/index_main.php index 4ff1487..f6718eb 100644 --- a/index_main.php +++ b/index_main.php @@ -64,22 +64,22 @@ foreach ($allVars as $family => $models) { $allVersions = $db->getAllVersionsForModel($model); echo ''; foreach ($variants as $ref => $name) { - echo ''; $refVersions = $db->getAllVersionsForRef($ref); $allOta = $db->getAllVersionsForRef($ref, $db::OTA_ONLY); foreach ($allVersions as $v) { if (in_array($v, $refVersions, true)) { - if (in_array($v, $allOta)) { - echo ''; - } else { - echo ''; + $moreClasses = ''; + if (!in_array($v, $allOta)) { + $moreClasses = ' fullonly mdc-theme--secondary-dark'; } + echo ''; } else { echo ''; } @@ -91,6 +91,14 @@ foreach ($allVars as $family => $models) { echo ''; } ?> +
+
+

Title

+
+
+ Contents here. +
+
'; + echo '
'; if (mb_strlen($name) > 0) { echo '' . $ref . ''; } else { echo $ref; } - echo ''; + echo '' . $v . '' . $v . '' . $v . '- - -