Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

localStorage, etc #1

Merged
merged 12 commits into from over 2 years ago

2 participants

Greg V Skud
Greg V

added localStorage saving/restoring, removed unused jQuery UI dependency, added chrome frame for IE6 and other small nice things :-)

Skud
Owner
Greg V

I didn't disable the warning! It should say something about getting a modern browser when there's no localStorage. But looks like it doesn't…

Greg V

Just checked in Firefox 3.5 – typeof localStorage returns object, but saving/restoring doesn't work…
It saves, but doesn't restore. Trying to fix now

Greg V

It turns out localStorage in Firefox isn't persistent with file:// – everything's fine on a server.

Greg V

Everything's fine now :-)

Skud
Owner

Looking great, thanks!

Skud Skud merged commit 97962d2 into from
Skud Skud closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
8  README → README.md
Source Rendered
... ...
@@ -1,7 +1,6 @@
1  
-ABOUT
2  
-------------------------------------------------------------------------------
  1
+# ABOUT
3 2
 
4  
-This is the source code for http://writtenkitten.net/, provided for the
  3
+This is the source code for <http://writtenkitten.net/>, provided for the
5 4
 interest of anyone who'd like to know how it works, or adapt it for their own
6 5
 use.
7 6
 
@@ -11,8 +10,7 @@ awesome me might consider it.
11 10
 
12 11
 -- Skud and Emily
13 12
 
14  
-LICENSE
15  
-------------------------------------------------------------------------------
  13
+# LICENSE
16 14
 
17 15
 Copyright (c) 2011 Alex "Skud" Bayley and Emily Turner
18 16
 All rights reserved.
349  index.html
... ...
@@ -1,24 +1,27 @@
1  
-<html>
  1
+<!doctype html>
  2
+<html lang="en">
2 3
 <head>
3 4
 <title>Written? Kitten!</title>
4  
-<script src="http://code.jquery.com/jquery-latest.js"></script>
5  
-<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
6  
-<link type="text/css" href="css/themename/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />	
7  
-<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
8  
-<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
9  
-
  5
+<meta charset="utf-8" />
  6
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7
+<link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css" />
  8
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
10 9
 <style type="text/css">
11  
-
12  
-body {
13  
-  background:url(kittenbg.gif) repeat #6AAFDA;
  10
+body {  background: url(kittenbg.gif) repeat #6AAFDA }
  11
+::-moz-selection {
  12
+  background: #6AAFDA;
  13
+  color: #fff;
  14
+}
  15
+::selection {
  16
+  background: #6AAFDA;
  17
+  color: #fff;
14 18
 }
15  
-
16 19
 .wrapper {
17  
-  margin:50px auto;
18  
-  background-color:#fff;
19  
-  width:1000px;
20  
-  padding:1em 2em 2em 2em;
21  
-  border:1px solid #5896bc;
  20
+  margin: 50px auto;
  21
+  background-color: #fff;
  22
+  width: 1000px;
  23
+  padding: 1em 2em 2em 2em;
  24
+  border: 1px solid #5896bc;
22 25
   -webkit-border-radius: 20px;
23 26
   -moz-border-radius: 20px;
24 27
   border-radius: 20px;
@@ -26,110 +29,88 @@
26 29
   -moz-box-shadow: 0px 0px 5px 2px #5896bc;
27 30
   box-shadow: 0px 0px 5px 2px #5896bc;
28 31
 }
29  
-
  32
+img {
  33
+  border: 0;
  34
+  -ms-interpolation-mode: bicubic;
  35
+  vertical-align: middle;
  36
+  max-width: 100%;
  37
+}
30 38
 textarea {
31  
-  width:580px;
32  
-  height:400px;
  39
+  width: 580px;
  40
+  height: 400px;
  41
+  overflow: auto;
  42
+  vertical-align: top;
  43
+  resize: vertical;
33 44
 }
34  
-
35 45
 h1 {
36  
-  font-size:3em;
37  
-  margin:0;
  46
+  font-size: 3em;
  47
+  margin: 0;
38 48
 }
39  
-
40 49
 h2 {
41  
-  font-size:1.7em;
42  
-  margin:0; 
  50
+  font-size: 1.7em;
  51
+  margin: 0;
43 52
 }
44  
-
45 53
 a, a:visited {
46  
-  color:#5896bc;
47  
-  text-decoration:none;
48  
-  cursor:pointer;
49  
-}
50  
-
51  
-a:hover {
52  
-  color:#305c78;
  54
+  color: #5896bc;
  55
+  text-decoration: none;
  56
+  cursor: pointer;
53 57
 }
54  
-
55  
-p {
56  
-  font-size:.9em;
57  
-}
58  
-
  58
+a:hover {  color: #305c78 }
  59
+a:focus {  outline: thin dotted; }
  60
+a:hover, a:active {  outline: 0; }
  61
+p {  font-size: .9em }
59 62
 h1, .controls, h2, .hide {
60 63
   font-family: 'Indie Flower', cursive;
61  
-  font-weight:normal;
  64
+  font-weight: normal;
62 65
 }
63  
-
64 66
 .hide {
65  
-  font-size:1.2em;
66  
-  cursor:pointer;
  67
+  font-size: 1.2em;
  68
+  cursor: pointer;
67 69
 }
68  
-
69  
-#warning {
70  
-  background-color:#f7f8c3;
71  
-  border:1px solid #f7ce6d;
72  
-  padding:1em 1em 0 1em;
  70
+.warning {
  71
+  background-color: #f7f8c3;
  72
+  border: 1px solid #f7ce6d;
  73
+  padding: 1em 1em 0 1em;
73 74
   -webkit-border-radius: 5px;
74 75
   -moz-border-radius: 5px;
75 76
   border-radius: 5px;
76 77
 }
77  
-
78  
-#warning h2 {
79  
-  font-size:2em;
  78
+.warning h2 {  font-size: 2em }
  79
+.warning a {
  80
+  font-size: 1.5em;
  81
+  color: #000;
  82
+  cursor: pointer;
80 83
 }
81  
-
82  
-#warning a {
83  
-  font-size:1.5em;
84  
-  color:#000;
85  
-  cursor:pointer;
86  
-}
87  
-
88 84
 .hidelink {
89  
-  text-align:right;
90  
-  padding-right:1em;
91  
-}
92  
-
93  
-#displayWords, #about, #kittenCredit, #warning  {
94  
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
95  
-  font-weight:200;
  85
+  text-align: right;
  86
+  padding-right: 1em;
96 87
 }
97  
-
98  
-.meta {
99  
-  padding-left:2em;
  88
+#displayWords, #about, #kittenCredit, .warning {
  89
+  font-family: "Helvetica Neue", sans-serif;
  90
+  font-weight: 200;
100 91
 }
101  
-
102  
-div#kittenFrame {
103  
-	float: right;
104  
-	height: 400px;
105  
-	width: 400px;
106  
-	background-position: center;
107  
-	background-repeat: no-repeat;
  92
+.meta {  padding-left: 2em }
  93
+#kittenFrame {
  94
+  float: right;
  95
+  height: 400px;
  96
+  width: 400px;
  97
+  background-position: center;
  98
+  background-repeat: no-repeat;
108 99
 }
109  
-
110  
-img#nextKitten {
111  
-	display: none; 
112  
-}
113  
-
  100
+#nextKitten {  display: none }
114 101
 #kittenCredit {
115  
-	color: #999;
116  
-	width:100%;
117  
-	font-size:.8em;
118  
-	margin-top:420px;
119  
-  text-align:right;
120  
-}
121  
-
122  
-#about {
123  
-  margin:0 2em;
  102
+  color: #999;
  103
+  width: 100%;
  104
+  font-size: .8em;
  105
+  margin-top: 420px;
  106
+  text-align: right;
124 107
 }
125  
-
  108
+#about {  margin: 0 2em }
126 109
 </style>
127 110
 
128 111
 <!--[if IE ]>
129 112
 <style type="text/css">
130  
-textarea {
131  
-width:500px;
132  
-}
  113
+textarea { width:500px }
133 114
 </style>
134 115
 <![endif]-->
135 116
 
@@ -139,82 +120,85 @@
139 120
 var kittens_earned = 0;
140 121
 var kittens_shown = 0;
141 122
 var warning_shown = false;
  123
+var warning;
  124
+if (typeof localStorage == "undefined") warning = "#warning-no-ls"
  125
+else warning = "#warning-ls";
142 126
 
143 127
 var next_kitten = {
144  
-	img_url: '',
145  
-	page_url: '',
146  
-	alt: ''
  128
+  img_url: '',
  129
+  page_url: '',
  130
+  alt: ''
147 131
 };
148 132
 
149 133
 function word_count(text, wc) {
150  
-	if (current_word_count >= 10 && warning_shown == false) {
151  
-		show_warning();
152  
-	}
153  
-    text = text.replace(/^\s*|\s*$/g,''); //removes whitespace from front and end
154  
-    text = text.replace(/\s+/g,' '); // collapse multiple consecutive spaces
155  
-    var words = text.split(" ");
156  
-    wc.value = words.length;
157  
-	current_word_count = wc.value = words.length;
158  
-	current_word_count = document.getElementById('displayWords').innerHTML = words.length;
159  
-	kittens_earned = current_word_count / words_for_reward;
160  
-	if (kittens_earned >= kittens_shown+1) {
161  
-		show_kitten();
162  
-	}
  134
+  if (typeof localStorage != "undefined") localStorage.text = text;
  135
+  if (current_word_count >= 10 && warning_shown == false) {
  136
+    show_warning();
  137
+  }
  138
+  text = text.replace(/^\s*|\s*$/g,''); //removes whitespace from front and end
  139
+  text = text.replace(/\s+/g,' '); // collapse multiple consecutive spaces
  140
+  var words = text.split(" ");
  141
+  wc.value = words.length;
  142
+  current_word_count = wc.value = words.length;
  143
+  $("#displayWords").html(wc.value);
  144
+  kittens_earned = current_word_count / words_for_reward;
  145
+  if (kittens_earned >= kittens_shown+1) {
  146
+    show_kitten();
  147
+  }
163 148
 }
164 149
 
165 150
 function show_warning() {
166  
-	$("#warning").fadeIn('slow');
  151
+  $(warning).fadeIn("slow");
167 152
 }
168 153
 
169 154
 function hide_warning(immediate) {
170  
-	if (immediate == true) {
171  
-		$("#warning").hide();
172  
-	} else {
173  
-		$("#warning").fadeOut('slow');
174  
-	}
175  
-	warning_shown = true;
  155
+  if (immediate == true) {
  156
+    $(warning).hide();
  157
+  } else {
  158
+    $(warning).fadeOut("slow");
  159
+  }
  160
+  warning_shown = true;
176 161
 }
177 162
 
178 163
 function show_kitten() {
179  
-	hide_warning("immediate");
180  
-	kittens_shown++;
181  
-	document.getElementById('kittenFrame').style.backgroundImage = "url(" + next_kitten.img_url + ")";
182  
-	document.getElementById('kittenCredit').innerHTML = "<a href='" + next_kitten.page_url + "'>" + next_kitten.alt + "</a>";
183  
-	fetch_next_kitten();
  164
+//  console.log("show");
  165
+  hide_warning(true);
  166
+  kittens_shown++;
  167
+  $("#kittenFrame").css("background-image", "url(" + next_kitten.img_url + ")");
  168
+  $("#kittenCredit").html("<a href='" + next_kitten.page_url + "'>" + next_kitten.alt + "</a>");
  169
+  fetch_next_kitten();
184 170
 }
185 171
 
186 172
 function fetch_next_kitten() {
187  
-	if (tmp = getParameterByName("search")) {
188  
-		search = tmp;
189  
-		document.getElementById("titleKitten").innerHTML = "<strike>Kitten!</strike>";
190  
-		document.getElementById("titleSearch").innerHTML = "&nbsp;" + search + "!";
191  
-	} else {
192  
-		search = "kitten,cute"
193  
-	}
194  
-	
195  
-	var flickr_url = "http://api.flickr.com/services/rest/?format=json&sort=interestingness-desc&method=flickr.photos.search&license=4&extras=owner_name&tags=" + search + "&tag_mode=all&api_key=5dfc80756edad8d0566cf40f0909324e&jsoncallback=?";
196  
-	
197  
-	$.getJSON(flickr_url, function(data){
198  
-		if (data.stat == "ok") {
199  
-			var i = Math.random();
200  
-			i = i * 100;
201  
-			i = Math.ceil(i);
202  
-			photo = data.photos.photo[i];
203  
-			next_kitten.img_url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_z.jpg";
204  
-			next_kitten.page_url = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
205  
-			next_kitten.alt = photo.title + " by " + photo.ownername + " (under CC-BY)";
206  
-			document.getElementById('nextKitten').src = next_kitten.img_url;
207  
-		}
208  
-	});
  173
+  if (tmp = getParameterByName("search")) {
  174
+    search = tmp;
  175
+    $("#titleKitten").html("<strike>Kitten!</strike>");
  176
+    $("#titleSearch").html("&nbsp);" + search + "!");
  177
+  } else {
  178
+    search = "kitten,cute";
  179
+  }
  180
+
  181
+  var flickr_url = "http://api.flickr.com/services/rest/?format=json&sort=interestingness-desc&method=flickr.photos.search&license=4&extras=owner_name&tags=" + search + "&tag_mode=all&api_key=5dfc80756edad8d0566cf40f0909324e&jsoncallback=?";
  182
+
  183
+  $.getJSON(flickr_url, function(data) {
  184
+    if (data.stat == "ok") {
  185
+      var i = Math.ceil(Math.random() * 100);
  186
+      var photo = data.photos.photo[i];
  187
+      next_kitten.img_url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_z.jpg";
  188
+      next_kitten.page_url = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
  189
+      next_kitten.alt = photo.title + " by " + photo.ownername + " (under CC-BY)";
  190
+      $("#nextKitten").attr("src", next_kitten.img_url);
  191
+    }
  192
+  });
209 193
 }
210 194
 
211 195
 function change_reward(howmany) {
212  
-	console.log("rewarding every " + howmany)
213  
-	words_for_reward = howmany;
214  
-	kittens_earned = current_word_count / howmany;
215  
-	kittens_shown = parseInt(kittens_earned);
216  
-	console.log("kittens_earned = " + kittens_earned);
217  
-	console.log("kittens_shown = " + kittens_shown);
  196
+//  console.log("rewarding every " + howmany);
  197
+    words_for_reward = howmany;
  198
+    kittens_earned = current_word_count / howmany;
  199
+    kittens_shown = parseInt(kittens_earned);
  200
+//  console.log("kittens_earned = " + kittens_earned);
  201
+//  console.log("kittens_shown = " + kittens_shown);
218 202
 }
219 203
 
220 204
 function getParameterByName(name) {
@@ -222,35 +206,34 @@
222 206
   var regexS = "[\\?&]" + name + "=([^&#]*)";
223 207
   var regex = new RegExp(regexS);
224 208
   var results = regex.exec(window.location.href);
225  
-  if(results == null)
  209
+  if (results == null)
226 210
     return "";
227 211
   else
228 212
     return decodeURIComponent(results[1].replace(/\+/g, " "));
229 213
 }
230  
-</script>
231  
-
232  
-<script type="text/javascript">
233  
-  var _gaq = _gaq || [];
234  
-  _gaq.push(['_setAccount', 'UA-26983491-1']);
235  
-  _gaq.push(['_trackPageview']);
236 214
 
237  
-  (function() {
238  
-    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
239  
-    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
240  
-    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
241  
-  })();
  215
+function restore_text() {
  216
+  if (typeof localStorage != "undefined") $("#writearea").attr("value", localStorage.text).keyup();
  217
+}
242 218
 </script>
243  
-
244 219
 </head>
245  
-<body onLoad="fetch_next_kitten()">
  220
+<body onLoad="fetch_next_kitten(); restore_text()">
246 221
 <div class="wrapper">
247 222
 <a name="top"></a>
248 223
 <h1>Written? <span id="titleKitten">Kitten!</span><span id="titleSearch"></span></h1>
249 224
 <div id="kittenFrame">
250  
-	<div id="warning" style="display:none">
251  
-		<h2>Warning!</h2> 
252  
-		<p>We don't save your work for you! You'll need to regularly copy and paste your text into a word processor or other application to save it permanently.</p>
253  
-		<p class="hidelink"><a class="hide" onClick="hide_warning()">OK, got it!</a></p>
  225
+	<div id="warning-no-ls" class="warning" style="display:none">
  226
+		<h2>Warning!</h2>
  227
+		<p>We don&apos;t save your work for you! You&apos;ll need to regularly copy and paste your text into a word processor or other application to save it permanently.</p>
  228
+    <p>If you want your work saved, get a modern browser like <a href="https://www.google.com/chrome/">Chrome</a>, <a href="http://www.apple.com/safari/">Safari</a>,
  229
+      <a href="http://www.mozilla.org/firefox/">Firefox</a> or <a href="http://www.opera.com/">Opera</a>.</p>
  230
+		<p class="hidelink"><a href="#" class="hide" onClick="hide_warning()">OK, got it!</a></p>
  231
+  </div>
  232
+  <div id="warning-ls" class="warning" style="display:none">
  233
+		<h2>Warning!</h2>
  234
+		<p>Don&apos;t worry about losing your work &mdash; it&apos;s saved locally in your browser. Thanks for using a modern browser, by the way :-)</p>
  235
+    <p>We can't take responsibility for lost work, though, so you might want to copy and paste your work to an external document every so often, just in case.</p>
  236
+		<p class="hidelink"><a href="#" class="hide" onClick="hide_warning()">OK, got it!</a></p>
254 237
 	</div>
255 238
 	<div id="kittenCredit"></div>
256 239
 </div>
@@ -260,37 +243,49 @@
260 243
 	<textarea id="writearea" cols="80" rows="30" onKeyUp="word_count(this.value, hidden_count)"></textarea>
261 244
 </form>
262 245
 <form class="controls">
263  
-  
264 246
 	<span class="meta">
265 247
 	  Fresh kitten every <select id="howmany" onChange="change_reward(this.value)">
266 248
 		<option value="100">100</option>
267 249
 		<option value="200">200</option>
268 250
 		<option value="500">500</option>
269 251
 		<option value="1000">1000</option>
270  
-		</select> words 
  252
+		</select> words
271 253
 	</span>
272 254
 	<span class="meta">
273 255
 	Current word count: <span id="displayWords">0</span>
274 256
 	</span>
275 257
 	<span class="meta">
276  
-	  <a onClick="$('#about').slideDown()">About</a>
  258
+	  <a href="#" onClick="$('#about').slideDown()">About</a>
277 259
 	</span>
278 260
 </form>
279 261
 
280 262
 <div id="about" style="display:none">
281 263
 	<h2>About</h2>
282  
-	<p>
283  
-Written Kitten was created by <a href="http://twitter.com/Skud">Skud</a> and <a href="http://twitter.com/aquaprofundanet">Emily</a>.  
284  
-We like positive reinforcement, so we decided to make something a bit like <a href="http://writeordie.com">writeordie</a> but 
285  
-cuter and fuzzier. 
  264
+  <p>
  265
+Written Kitten was created by <a href="http://twitter.com/Skud" rel="author">Skud</a>, <a href="http://twitter.com/aquaprofundanet" rel="author">Emily</a> and <a href="https://github.com/Skud/writtenkitten/contributors" rel="author">contributors</a>.
  266
+We like positive reinforcement, so we decided to make something a bit like <a href="http://writeordie.com">writeordie</a> but
  267
+cuter and fuzzier.
286 268
 
287  
-Images are randomly selected from Flickr's "most interesting" photos matching the tags "kitten" and "cute".
  269
+Images are randomly selected from Flickr&apos;s &ldquo;most interesting&rdquo; photos matching the tags &ldquo;kitten&rdquo; and &ldquo;cute&rdquo;.
288 270
 
289 271
 Enjoy!
290 272
 	</p>
291  
-	<p><a class="hide" onClick="$('#about').slideUp()">Hide</a></p>
  273
+	<p><a href="#" class="hide" onClick="$('#about').slideUp()">Hide</a></p>
292 274
 	<img src="" id="nextKitten"/>
293 275
 </div>
294  
-
  276
+<script>
  277
+  var _gaq = _gaq || [];
  278
+  _gaq.push(['_setAccount', 'UA-26983491-1']);
  279
+  _gaq.push(['_trackPageview']);
  280
+  (function() {
  281
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  282
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  283
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  284
+  })();
  285
+</script>
  286
+<!--[if lt IE 7 ]>
  287
+  <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
  288
+  <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  289
+<![endif]-->
295 290
 </body>
296  
-</html>
  291
+</html>
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.