sm.html

   1 <html>
   2 <!--
   3 #     sm.html
   4 #     Copyright (C) 2006 - 2010 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 <head>
  21 <title>Screen message</title>
  22 <style type="text/css">
  23 #textarea {
  24         position:absolute;
  25         top:0px;
  26         left:0px;
  27         width:100%;
  28         height:100%;
  29         font-family: sans;
  30         padding:0px;
  31         margin:0px;
  32         border:0px;
  33         text-align:center;
  34         overflow:hidden;
  35         resize:none;
  36         /*
  37         This used to be here. Not sure why, but eventually,
  38         it broke Firefox (newlines not wrapping lines)
  39         white-space:nowrap;
  40         */
  41 }
  42
  43 /* disable focus border at Chrome */
  44 #textarea:focus {
  45         outline: none;
  46 }
  47
  48 #test {
  49         position:absolute;
  50         visibility:hidden;
  51         top:0px;
  52         left:0px;
  53         font-size:30px;
  54         white-space:pre;
  55         font-family: sans;
  56         border:0px;
  57         padding:0.1em;
  58         margin:0px;
  59 }
  60 #about {
  61         position:absolute;
  62         width:20em;
  63         top:30px;
  64         right:30px;
  65         background-color:gray;
  66         padding:1em;
  67 }
  68
  69 </style>
  70 <script type="text/javascript">
  71 opacity = 100;
  72 function adjust() {
  73         ta = document.getElementById("textarea");
  74         test = document.getElementById("test");
  75
  76         test.textContent=ta.value;
  77         // Otherwise, the newline would not be counted.
  78         if (ta.value[ta.value.length-1] == "\n") {
  79                 test.innerHTML += '.';
  80         }
  81
  82         ratioX = (window.innerWidth) / test.offsetWidth;
  83         ratioY = (window.innerHeight) / test.offsetHeight;
  84         ratio = Math.min(ratioX,ratioY);
  85         fontSize = Math.floor(30 * ratio) + "px"
  86         ta.style.fontSize = fontSize;
  87         newHeight = Math.ceil(test.offsetHeight * ratio);
  88         //ta.style.height = newHeight + "px";
  89         //ta.style.top = Math.floor((window.innerHeight - newHeight)/2) + "px";
  90         ta.style.paddingTop = Math.floor((window.innerHeight - newHeight)/2) + "px";
  91         ta.style.paddingBottom = Math.floor((window.innerHeight - newHeight)/2) + "px";
  92         newWidth = Math.ceil(test.offsetWidth * ratio);
  93         //ta.style.width = newWidth + "px";
  94         ta.style.paddingLeft = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
  95         ta.style.paddingRight = Math.max(0,Math.floor((window.innerWidth - newWidth)/2)) + "px";
  96
  97         //test.innerHTML = newHeight + " " + window.innerHeight + " " + fontSize;
  98
  99         href =  "#t=" + encodeURIComponent(ta.value);
 100         if (ta.style.color) {
 101                 href +=  ";f=" + encodeURIComponent(ta.style.color);
 102         }
 103         if (ta.style.backgroundColor) {
 104                 href +=  ";b=" + encodeURIComponent(ta.style.backgroundColor);
 105         }
 106         window.location.hash = href;
 107 }
 108
 109 function showBox() {
 110         opacity = 100;
 111         window.clearTimeout(timeout);
 112         setOpacity();
 113 }
 114 function fadeOut() {
 115         opacity *= 0.985;
 116         if (opacity > 1) {
 117                 timeout = window.setTimeout("fadeOut()",20);
 118         } else {
 119                 opacity = 0;
 120         }
 121         setOpacity();
 122 }
 123 function setOpacity() {
 124         about = document.getElementById("about");
 125         about.style.opacity = opacity/100;
 126         about.style.filter = "alpha(opacity="+Math.round(opacity)+")";
 127 }
 128
 129 function parseHash() {
 130         ta = document.getElementById("textarea");
 131         ta.focus();
 132
 133         var queryString = {};
 134         window.location.href.replace(
 135                 new RegExp("([^?=&;#]+)(=([^&;]*))", "g"),
 136                 function($0, $1, $2, $3) {queryString[$1] = decodeURIComponent($3); }
 137         );
 138         if (queryString['t']) {
 139                 ta.value = queryString['t'];
 140         }
 141         if (queryString['f']) {
 142                 ta.style.color = queryString['f'];
 143         }
 144         if (queryString['b']) {
 145                 ta.style.backgroundColor = queryString['b'];
 146         }
 147         adjust();
 148         timeout = window.setTimeout("fadeOut();",1000);
 149         setOpacity();
 150 }
 151
 152 function init() {
 153         if (window.navigator.mozApps) {
 154                 document.getElementById("firefox").style.display = "block";
 155         }
 156         parseHash();
 157 }
 158 </script>
 159 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 160 <meta name="apple-mobile-web-app-capable" content="yes">
 161 <meta name="format-detection" content="telephone=no">
 162 </head>
 163 <body onload="init()" onhashchange="parseHash()" onresize="adjust()">
 164 <textarea id="textarea" onKeyUp="adjust()" onpaste="adjust()" oninput="adjust()">:-)</textarea>
 165 <span id="test"></span>
 166 <div id="about" onMouseOver="showBox()" onMouseOut="fadeOut()">
 167 <p>
 168 This is an online-version of the program <strong>screen-message</strong> for Linux.
 169 </p>
 170 <p id="firefox" style="display:none">
 171 You can <a href="#" onclick="window.navigator.mozApps.install('http://sm.nomeata.de/sm.webapp')">install it as a FireFox app</a>.
 172 </p>
 173 <p>
 174 For more information about the original program, see what <a href="http://debaday.debian.net/2007/07/18/screen-message-use-your-screen-to-communicate/">Deb-a-Day</a> writes about it. You can download it from <a href="http://packages.debian.org/sid/sm">Debian</a> or <a href="http://darcs.nomeata.de/screen-message/">fetch the sourcecode</a>.
 175 </p>
 176 <p>
 177 <strong>screen-message</strong> was created by <a href="http://www.joachim-breitner.de/">Joachim Breitner</a>.
 178 If you like it, then <a href="http://flattr.com/thing/330186/screen-message" target="_blank">flattr this</a>.
 179 </p>
 180 </div>
 181 </body>
 182 </html>