Last active
March 26, 2018 20:08
-
-
Save Dinir/5ab7575160ca2e11302a14807dd1652e to your computer and use it in GitHub Desktop.
Little 2-line text view to use as a stream title in a stream layout
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title>Stream Title Display</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| font-size: 14pt; | |
| } | |
| #titleTexts { | |
| padding-top: 0; | |
| overflow: hidden; | |
| } | |
| #titleTexts input { | |
| display: block; | |
| background: transparent; | |
| padding: 0; | |
| border: 0; | |
| line-height: 1em; | |
| width: 100%; | |
| font-family: "Fira Code"; | |
| text-shadow: | |
| -1px -1px 0 black, | |
| 1px -1px 0 black, | |
| -1px 1px 0 black, | |
| 1px 1px 0 black; | |
| } | |
| #titleTexts input#title { | |
| color: #65849f; | |
| font-weight: bold; | |
| } | |
| #titleTexts input#object { | |
| color: #496072; | |
| font-family: "Fira Code Retina"; | |
| } | |
| /* pixel-level position adjustments */ | |
| #titleTexts { padding-top: 3px; } | |
| #titleTexts input { line-height: 1.2em; } | |
| #titleTexts input#title { font-size: 14pt; } | |
| #titleTexts input#object { font-size: 11pt; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="titleTexts"> | |
| <input id="title" type="text" placeholder="placeholder title"> | |
| <input id="object" type="text" placeholder="placeholder object"> | |
| </div> | |
| <script> | |
| var inputArray = [ | |
| document.getElementById('title'), | |
| document.getElementById('object') | |
| ]; | |
| class InputFocus { | |
| constructor(elems, keycode) { | |
| this.elems = elems; | |
| this.keycode = keycode; | |
| this.currentFocus = 0; | |
| this.elementAmount = elems.length; | |
| } | |
| cycleIndex() { | |
| this.currentFocus = | |
| (this.currentFocus + 1) % this.elementAmount; | |
| } | |
| cycle(keydownEvent) { | |
| if(keydownEvent.which === this.keycode) { | |
| this.cycleIndex(); | |
| this.elems[this.currentFocus].focus(); | |
| } | |
| } | |
| setIndex(focusEvent) { | |
| this.currentFocus = this.elems.indexOf(focusEvent.target); | |
| } | |
| } | |
| var titleFocus = new InputFocus(inputArray, 13); | |
| inputArray.forEach(function(input) { | |
| input.addEventListener('keydown', titleFocus.cycle.bind(titleFocus)); | |
| input.addEventListener('focus', titleFocus.setIndex.bind(titleFocus)); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview on CodePen