IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Merge branch 'master' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib

Browse Source
This commit is contained in:
Uwe Oestermeier 2019-07-05 09:18:13 +02:00
commit a3f7eb0b3c
9 changed files with 131 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore Normal file
View File

@ -0,0 +1,2 @@
dist/*
doc/out/*

35
.eslintrc.json Normal file
View File

@ -0,0 +1,35 @@
{
"parserOptions": {
"ecmaVersion": 10,
"sourceType": "module",
"ecmaFeatures": {
"impliedStrict": true
}
},
"plugins": [
"mocha"
],
"env": {
"browser": true,
"es6": true,
"node": true,
"jquery": true
},
"globals": {
"PIXI": false,
"TweenLite": false,
"TweenMax": false,
"TimelineLite": false,
"TimelineMax": false,
"SystemJS": false
},
"extends": "eslint:recommended",
"rules": {
"semi": ["error", "never"],
"quotes": ["warn", "single", {"allowTemplateLiterals": true}],
"no-console": "warn",
"no-unused-vars": ["warn", {"argsIgnorePattern": "^(e|event|points|ended)$"}],
"indent": ["warn", 4, {"SwitchCase": 1}],
"mocha/no-exclusive-tests": "error"
}
}

1
.gitignore vendored
View File

@ -79,3 +79,4 @@ typings/
# own
*.code-workspace
.history/
.vscode/

3
.stylelintignore Normal file
View File

@ -0,0 +1,3 @@
dist/*
doc/*
lib/*

11
.stylelintrc.json Normal file
View File

@ -0,0 +1,11 @@
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 4,
"selector-list-comma-newline-after": "never-multi-line",
"no-eol-whitespace": [true, {
"ignore": ["empty-lines"]
}]
},
"ignoreFiles": []
}

48
css/doctest.css
View File

@ -1,12 +1,11 @@
html
{
padding: 0px;
font-size: 16px;
background: white;
font-family: Arial,sans-serif;
color: #000;
max-width: 932px;
margin:0 auto;
html {
padding: 0;
font-size: 16px;
background: white;
font-family: Arial, sans-serif;
color: #000;
max-width: 932px;
margin: 0 auto;
}
.grayBorder {
@ -24,10 +23,10 @@ html
}
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
@ -44,28 +43,27 @@ canvas {
margin-left: 8px;
}
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
position: relative;
height: 0;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
padding-bottom: 75%;
}
.intrinsic-container iframe {
position: absolute;
border: 0;
top:0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
border: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

32
css/flipeffect.css
View File

@ -1,6 +1,5 @@
.flipWrapper
{
.flipWrapper {
position: absolute;
top: 0;
left: 0;
@ -16,7 +15,8 @@
width: 100%;
height: 100%;
/*** See: https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image ***/
/*** See: https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image ***/
/* -webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
@ -24,21 +24,21 @@
user-drag: none; */
}
.flipFace{
.flipFace {
box-shadow: 2px 2px 10px #000;
visibility: hidden;
}
.front{
.front {
width: 100%;
height: 100%;
position:absolute;
background-color:#333;
position: absolute;
background-color: #333;
}
.back{
background-color:#333;
position:absolute;
.back {
background-color: #333;
position: absolute;
border: 8px solid white;
}
@ -48,8 +48,8 @@
width: 44px;
height: 44px;
padding: 4px;
right: 0px;
top: 0px;
right: 0;
top: 0;
}
.infoBtn {
@ -58,8 +58,8 @@
width: 44px;
height: 44px;
padding: 4px;
right: 0px;
bottom: 0px;
right: 0;
bottom: 0;
}
.backBtn {
@ -68,6 +68,6 @@
width: 44px;
height: 44px;
padding: 4px;
right: 0px;
bottom: 0px;
right: 0;
bottom: 0;
}

86
css/index.css
View File

@ -1,19 +1,18 @@
html {
height: 100%;
width: 100%;
margin: 0px;
margin: 0;
}
body
{
margin: 0px;
padding: 0px;
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
font-size: 22pt;
-webkit-tap-highlight-color: #ccc;
background-color: #DDD;
background-color: #ddd;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
@ -22,24 +21,22 @@ body
user-select: none;
-webkit-hyphens: auto;
hyphens: auto;
/* https://davidwalsh.name/font-smoothing */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h3
{
h3 {
color: white;
padding: 4px;
margin: 2px;
background-color: rgba(0, 0, 15, .5);
background-color: rgba(0, 0, 15, 0.5);
}
a { text-decoration: none; }
div.wrapper
{
div.wrapper {
overflow: hidden;
width: 100%;
height: 100%;
@ -49,29 +46,32 @@ div.wrapper
/* Color animation from https://www.tjvantoll.com/2012/02/20/css3-color-animations/ */
@-webkit-keyframes color_change {
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: red; }
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: red; }
}
@-moz-keyframes color_change {
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: red; }
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: red; }
}
@-ms-keyframes color_change {
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: red; }
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: red; }
}
@-o-keyframes color_change {
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: red; }
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: red; }
}
@keyframes color_change {
from { background-color:rgba(0, 0, 0, 0); }
to { background-color: red; }
from { background-color: rgba(0, 0, 0, 0); }
to { background-color: red; }
}
/*** CSS taken from https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db#.7v7fshos5 ***/
.thumbnail
{
.thumbnail {
position: relative;
-ms-zoom: 0.25;
-moz-transform: scale(0.25);
@ -82,9 +82,7 @@ div.wrapper
-webkit-transform-origin: 0 0;
}
.thumbnail:after
{
.thumbnail::after {
content: "";
display: block;
position: absolute;
@ -95,11 +93,14 @@ div.wrapper
jamesfuthey blog. Otherwise touches would go through on iPad. ***/
}
.thumbnail iframe
{
iframe {
pointer-events: none;
}
.thumbnail iframe {
width: 1024px;
height: 624px;
-webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
animation-delay: 3s;
-webkit-animation: color_change 1s infinite alternate;
-moz-animation: color_change 1s infinite alternate;
@ -108,22 +109,20 @@ div.wrapper
animation: color_change 1s infinite alternate;
}
.thumbnail-container
{
.thumbnail-container {
width: calc(1024px * 0.25);
height: calc(624px * 0.25);
display: inline-block;
overflow: hidden;
position: relative;
box-shadow: 2px 2px 10px #000;
color: #DDD;
color: #ddd;
}
div.preview
{
div.preview {
display: inline-block;
margin: 22px;
padding: 0px;
padding: 0;
color: #333;
font-size: 12pt;
text-align: center;
@ -131,8 +130,7 @@ div.preview
height: 196px;
}
div.title
{
div.title {
padding-top: 8px;
width: 256px;
height: 20px;
@ -140,10 +138,9 @@ div.title
overflow: hidden;
}
.container
{
margin: 0px;
padding: 0px;
.container {
margin: 0;
padding: 0;
border: 2pt #000;
min-height: 100%;
min-width: 100%;
@ -156,12 +153,7 @@ div.title
align-content: flex-end;
}
iframe {
pointer-events: none;
}
/** See https://github.com/electron/electron/issues/4420 */
::selection {
background: transparent;
}

2
rollup.config.js
View File

@ -19,4 +19,4 @@ export default [{
watch: {
clearScreen: false
}
}];
}]