webapp.html

   1 <html>
   2 <!--
   3 #     sm.html
   4 #     Copyright (C) 2006 - 2012 Joachim Breitner
   5 #
   6 #     This program is free software; you can redistribute it and/or modify
   7 #     it under the terms of the GNU General Public License as published by
   8 #     the Free Software Foundation; either version 2 of the License, or
   9 #     (at your option) any later version.
  10 #
  11 #     This program is distributed in the hope that it will be useful,
  12 #     but WITHOUT ANY WARRANTY; without even the implied warranty of
  13 #     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14 #     GNU General Public License for more details.
  15 #
  16 #     You should have received a copy of the GNU General Public License
  17 #     along with this program; if not, write to the Free Software
  18 #     Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301 USA
  19 -->
  20 <style type="text/css">
  21 #textarea {
  22         position:absolute;
  23         top:0px;
  24         left:0px;
  25         width:100%;
  26         height:100%;
  27         white-space:nowrap;
  28         font-family: sans;
  29         padding:0px;
  30         margin:0px;
  31         border:0px;
  32         text-align:center;
  33         overflow:hidden;
  34 }
  35
  36 #test {
  37         position:absolute;
  38         visibility:hidden;
  39         top:0px;
  40         left:0px;
  41         font-size:30px;
  42         white-space:pre;
  43         font-family: sans;
  44         border:0px;
  45         padding:0.1em;
  46         margin:0px;
  47 }
  48 a {
  49         text-decoration:none;
  50         color:black;
  51 }
  52
  53 #focusdummy {
  54         position:absolute;
  55         width:100%;
  56         top:0px;
  57         left:0px;
  58         background-color:aqua;
  59 }
  60 #focusdummy td {
  61         font-family: sans;
  62         font-size:20px;
  63         opacity:.5;
  64         padding:4px;
  65 }
  66
  67 </style>
  68 <script type="text/javascript">
  69 opacity = 100;
  70 timeout = null;
  71 function adjust() {
  72         ta = document.getElementById("textarea");
  73         test = document.getElementById("test");
  74
  75         test.innerHTML=ta.value;
  76         // Otherwise, the newline would not be counted.
  77         if (ta.value[ta.value.length-1] == "\n") {
  78                 test.innerHTML += '.';
  79         }
  80
  81         ratioX = (window.innerWidth) / test.offsetWidth;
  82         ratioY = (window.innerHeight) / test.offsetHeight;
  83         ratio = Math.min(ratioX,ratioY);
  84         fontSize = Math.floor(30 * ratio) + "px"
  85         ta.style.fontSize = fontSize;
  86         newHeight = Math.ceil(test.offsetHeight * ratio);
  87         //ta.style.height = newHeight + "px";
  88         //ta.style.top = Math.floor((window.innerHeight - newHeight)/2) + "px";
  89         ta.style.paddingTop = Math.floor((window.innerHeight - newHeight)/2) + "px";
  90         ta.style.paddingBottom = Math.floor((window.innerHeight - newHeight)/2) + "px";
  91         newWidth = Math.ceil(test.offsetWidth * ratio);
  92         //ta.style.width = newWidth + "px";
  93         ta.style.paddingLeft = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
  94         ta.style.paddingRight = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
  95
  96         //test.innerHTML = newHeight + " " + window.innerHeight + " " + fontSize;
  97
  98         href = window.location.hash = "#t=" + encodeURIComponent(ta.value);
  99 }
 100
 101 function init() {
 102         ta = document.getElementById("textarea");
 103         ta.focus();
 104
 105         var queryString = {};
 106         window.location.href.replace(
 107                 new RegExp("([^?=&;#]+)(=([^&;]*))", "g"),
 108                 function($0, $1, $2, $3) {queryString[$1] = decodeURIComponent($3); }
 109         );
 110         if (queryString['t']) {
 111                 ta.value = queryString['t'];
 112         }
 113         adjust();
 114 }
 115 function showFocusDummy() {
 116         window.clearTimeout(timeout);
 117         document.getElementById("focusdummy").style.display = "block";
 118 }
 119 function hideFocusDummy() {
 120         timeout = window.setTimeout(function () {
 121                 document.getElementById("focusdummy").style.display = "none";
 122         }, 200);
 123 }
 124 function clearText() {
 125         ta = document.getElementById("textarea");
 126         ta.value = '';
 127         ta.focus();
 128 }
 129
 130 </script>
 131 <body onload="init()" onresize="adjust()">
 132 <textarea id="textarea" onfocus="showFocusDummy()" onblur="hideFocusDummy()" onKeyUp="adjust()" onpaste="adjust()" oninput="adjust()">:-)</textarea>
 133 <span id="test"></span>
 134 <div id="focusdummy" >
 135 <table width="100%">
 136 <tr><td align="left" width="30%" align="left">
 137 <a href="http://sm.nomeata.de/" target="blank">screen message<br/>on the web</a>
 138 </td><td width="40%" align="center">
 139 <a href="#" onclick="return false">Hide Keyboard</a>
 140 </td><td width="30%" align="right">
 141 <a href="#" onclick="clearText(); return false;">Clear Text</a>
 142 </td></tr>
 143 </table>
 144 </div>
 145 </body>
 146 </html>