├── LICENSE
├── README.md
├── list.json
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Dave Winer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #### What this is
 2 | 
 3 | A new version of the software used in the <a href="http://listicle.io/cluetrain/">Cluetrain listicle</a>, generalized so that it is fully specified in a JSON file. It can be used for lots of listicles, including ones that you write. 
 4 | 
 5 | <a href="http://scripting.com/2015/01/13/listicleOListicle.html">Dave Winer</a>
 6 | 
 7 | #### How it works
 8 | 
 9 | There's a <a href="https://github.com/scripting/listicle/blob/master/list.json">JSON file</a> that configures the app. It must be in the same folder as the index.html file and it must be named list.json.
10 | 
11 | When the page loads, it reads the JSON file, and shows you the first item in the list. If you click the right arrow, you go to the next item, click the left arrow you go to the previous one. The Home icon takes you to the first item. 
12 | 
13 | If you click on the label you get a permalink for the item. If you click the twitter icon at the top of the page you get a dialog that sets up a tweet with the content of the item you're looking at. 
14 | 
15 | Click on the Info icon to see the About box.
16 | 
17 | #### Updates
18 | 
19 | v0.52 -- 1/14/15 by DW -- Made a change to how prefs are stored in localStorage, so you can have more than one listicle on a domain without having their prefs collide.
20 | 
21 | v0.51 -- 1/13/15 by DW -- you can now include Emojis in listicle items using the <a href="http://www.emoji-cheat-sheet.com/">Emoji cheat sheet</a> codes. <a href="http://listicle.io/demo/?clue=10">Example</a>.
22 | 
23 | #### Demo
24 | 
25 | Here's the <a href="http://listicle.io/demo/">demo listicle</a>. 
26 | 
27 | 


--------------------------------------------------------------------------------
/list.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"title": "Listicles are fun!",
 3 | 	"link": "http://scripting.com/2015/01/13/listicleOListicle.html",
 4 | 	"about": "This is a demo listicle. Just playing around. Dave",
 5 | 	"urlBackgroundImage": "http://upload.wikimedia.org/wikipedia/commons/f/fa/Walt_Whitman_-_George_Collins_Cox.jpg",
 6 | 	"opacityBackground": "0.4",
 7 | 	"itemLabel": "Idea",
 8 | 	"author": {
 9 | 		"name": "Dave Winer",
10 | 		"email": "dave.winer@gmail.com",
11 | 		"web": "http://scripting.com/"
12 | 		},
13 | 	"items": [
14 | 		"This is a test.",
15 | 		"For the next sixty seconds.",
16 | 		"This station will conduct a test.",
17 | 		"Of the listicle broadcast system.",
18 | 		"<a href=\"https://github.com/scripting/listicle\">https://github.com/scripting/listicle</a>",
19 | 		"Had this been an actual listicle.",
20 | 		"You would have been inspired.",
21 | 		":-)",
22 | 		"PS: Doesn't Walt Whitman <a href=\"https://www.google.com/search?q=Walt+Whitman&safe=off&es_sm=119&source=lnms&tbm=isch&sa=X&ei=Z521VK-uFdWAsQToqYGwAg&ved=0CAgQ_AUoAQ&biw=1320&bih=1063\" target=\"_blank\">look</a> <i>great</i> as the background image of a listicle?",
23 | 		"PPS: I just added the ability to use <a href=\"http://www.emoji-cheat-sheet.com/\">Emoji cheat sheet</a> codes in listicle entries.<br><br>So here's a nice :kiss: for you!<br><br><i>Coooooool!</i>",
24 | 		"PPPS: Andy Seidl <a href=\"http://scripting.com/2015/01/13/listicleOListicle.html#comment-1791298902\" target=\"_blank\">noticed</a> that the saved prefs for two  listicles on the same domain will collide. So I made a change that saves the prefs based on the URL of the listicle. Thanks for the clue Andy! :-)"
25 | 		]
26 | 	}
27 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 	<head>
  3 | 		<title>listicle.io</title>  
  4 | 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | 		
  7 | 		<script src="http://fargo.io/code/jquery-1.9.1.min.js"></script>
  8 | 		<link href="http://fargo.io/code/bootstrap.css" rel="stylesheet">
  9 | 		<script src="http://fargo.io/code/bootstrap.min.js"></script>
 10 | 		<link rel="stylesheet" href="http://fargo.io/code/fontAwesome/css/font-awesome.min.css"/>
 11 | 		<link href="http://fargo.io/code/ubuntuFont.css" rel="stylesheet" type="text/css">
 12 | 		<script src="http://fargo.io/code/node/shared/utils.js"></script>
 13 | 		<script src="http://fargo.io/code/node/shared/alertdialog.js"></script>
 14 | 		<script src="http://fargo.io/code/shared/beep.js"></script>
 15 | 		<script src="http://fargo.io/code/shared/emojify.js"></script>
 16 | 		
 17 | 		<script>
 18 | 			var appConsts = {
 19 | 				domain: "listicle.io",
 20 | 				version: "0.52"
 21 | 				};
 22 | 			var appPrefs = {
 23 | 				ixCurrentClue: 1 //1-based index into the clues array
 24 | 				};
 25 | 			
 26 | 			var jsonUrl = "list.json";
 27 | 			var theData; 
 28 | 			
 29 | 			function restorePrefs () {
 30 | 				console.log ("restorePrefs: " + localStorage.listiclePrefsForAll);
 31 | 				if (localStorage.listiclePrefsForAll != undefined) {
 32 | 					var allPrefs = JSON.parse (localStorage.listiclePrefsForAll);
 33 | 					if (allPrefs [window.location.href] != undefined) {
 34 | 						appPrefs = JSON.parse (allPrefs [window.location.href]);
 35 | 						}
 36 | 					}
 37 | 				else {
 38 | 					if (localStorage.listiclePrefs != undefined) {
 39 | 						console.log ("restorePrefs: " + localStorage.listiclePrefs);
 40 | 						appPrefs = JSON.parse (localStorage.listiclePrefs);
 41 | 						}
 42 | 					}
 43 | 				}
 44 | 			function savePrefs () {
 45 | 				var allPrefs;
 46 | 				if (localStorage.listiclePrefsForAll != undefined) {
 47 | 					allPrefs = JSON.parse (localStorage.listiclePrefsForAll);
 48 | 					}
 49 | 				else {
 50 | 					allPrefs = new Object ();
 51 | 					}
 52 | 				allPrefs [window.location.href] = JSON.stringify (appPrefs); //no formatting
 53 | 				localStorage.listiclePrefsForAll = jsonStringify (allPrefs);
 54 | 				console.log ("savePrefs: " + localStorage.listiclePrefsForAll);
 55 | 				
 56 | 				}
 57 | 			function updateArrows () {
 58 | 				var normalcolor = "white", disabledcolor = "gray";
 59 | 				var leftarrowcolor, rightarrowcolor;
 60 | 				
 61 | 				if (appPrefs.ixCurrentClue == 1) {
 62 | 					leftarrowcolor = disabledcolor;
 63 | 					}
 64 | 				else {
 65 | 					leftarrowcolor = normalcolor;
 66 | 					}
 67 | 				
 68 | 				if (appPrefs.ixCurrentClue == theData.items.length) {
 69 | 					rightarrowcolor = disabledcolor;
 70 | 					}
 71 | 				else {
 72 | 					rightarrowcolor = normalcolor;
 73 | 					}
 74 | 				
 75 | 				$("#idLeftArrow").css ("color", leftarrowcolor);
 76 | 				$("#idRightArrow").css ("color", rightarrowcolor);
 77 | 				}
 78 | 			function showClue (ix) { //ix is 1-based
 79 | 				//keep ix in bounds -- 1/6/15 by DW
 80 | 					if (ix < 1) {
 81 | 						ix = 1;
 82 | 						}
 83 | 					if (ix > theData.items.length) {
 84 | 						ix = theData.items.length;
 85 | 						}
 86 | 				var permalink = "?clue=" + ix, cluetext = emojiProcess (theData.items [ix - 1]);
 87 | 				$("#idClueLink").html ("<a href=\"" + permalink + "\">" + theData.itemLabel + " #" + ix + ":</a>");
 88 | 				$("#idListicleText").html (cluetext);
 89 | 				appPrefs.ixCurrentClue = ix;
 90 | 				updateArrows ();
 91 | 				savePrefs ();
 92 | 				}
 93 | 			function twitterIconClick () {
 94 | 				
 95 | 				var url = window.location.href;
 96 | 				if (stringContains (url, "?")) {
 97 | 					url = stringNthField (url, "?", 1);
 98 | 					}
 99 | 				url += "?clue=" + appPrefs.ixCurrentClue;
100 | 				
101 | 				var cluetext = stripMarkup (theData.items [appPrefs.ixCurrentClue - 1]);
102 | 				var text = encodeURIComponent (theData.itemLabel + " #" + appPrefs.ixCurrentClue + ": " + cluetext + " " + url);
103 | 				window.open ("https://twitter.com/intent/tweet?text=" + text, "_blank", "left=200,top=300,location=no,height=350,width=600,scrollbars=no,status=no");
104 | 				}
105 | 			function prevClue () {
106 | 				if (appPrefs.ixCurrentClue > 1) {
107 | 					showClue (appPrefs.ixCurrentClue - 1);
108 | 					}
109 | 				else {
110 | 					speakerBeep ();
111 | 					}
112 | 				}
113 | 			function nextClue () {
114 | 				if (appPrefs.ixCurrentClue < theData.items.length) {
115 | 					showClue (appPrefs.ixCurrentClue + 1);
116 | 					}
117 | 				else {
118 | 					speakerBeep ();
119 | 					}
120 | 				}
121 | 			function infoIconClick () {
122 | 				alertDialog (theData.about);
123 | 				}
124 | 			function homeIconClick () {
125 | 				showClue (1);
126 | 				}
127 | 			function everySecond () {
128 | 				}
129 | 			function startup () {
130 | 				console.log ("startup");
131 | 				$("#idVersionNumber").html ("v" + appConsts.version);
132 | 				restorePrefs ();
133 | 				readHttpFile (jsonUrl, function (s) {
134 | 					theData = JSON.parse (s);
135 | 					
136 | 					console.log ("startup: " + theData.items.length + " items in theData.items.");
137 | 					
138 | 					var ixclue = appPrefs.ixCurrentClue;
139 | 					var clueparam = getURLParameter ("clue");
140 | 					if (clueparam != "null") {
141 | 						ixclue = Number (clueparam);
142 | 						if (ixclue < 1) {
143 | 							ixclue = 1;
144 | 							}
145 | 						if (ixclue > theData.items.length) {
146 | 							ixclue = theData.items.length;
147 | 							}
148 | 						}
149 | 					showClue (ixclue);
150 | 					
151 | 					$("#idBackgroundImage").css ("background-image", "url(" + theData.urlBackgroundImage + ")");
152 | 					
153 | 					if (theData.opacityBackground != undefined) {
154 | 						$("#idOverlay").css ("opacity", theData.opacityBackground);
155 | 						}
156 | 					
157 | 					
158 | 					var rtlink = "<span class=\"spInfoLink\"><a onclick=\"twitterIconClick ()\" title=\"Send this clue to your Twitter followers.\"><i class=\"fa fa-twitter\"></i></a></span>"
159 | 					var infolink = "<span class=\"spInfoLink\"><a onclick=\"infoIconClick ()\"><i class=\"fa fa-info-circle\"></i></a></span>";
160 | 					var homelink = "<span class=\"spHomeLink\"><a onclick=\"homeIconClick ()\"><i class=\"fa fa-home\"></i></a></span>";
161 | 					var titlelink =  "<a href=\"" + theData.link + "\" target=\"_blank\">" + theData.title + "</a>"
162 | 					
163 | 					if (theData.author.name != undefined) {
164 | 						titlelink = theData.author.name + ": " + titlelink;
165 | 						}
166 | 					
167 | 					$("#idTitle").html (homelink + titlelink + infolink + rtlink);
168 | 					$("body").keyup (function (ev) {
169 | 						switch (ev.which) {
170 | 							case 37: //left arrow
171 | 								prevClue ();
172 | 								break;
173 | 							case 39: //right arrow
174 | 								nextClue ();
175 | 								break;
176 | 							}
177 | 						});
178 | 					self.setInterval (function () {everySecond ()}, 1000); 
179 | 					});
180 | 				}
181 | 			</script>
182 | 		<style>
183 | 			body {
184 | 				font-family: Ubuntu;
185 | 				font-size: 18px;
186 | 				background-color: whitesmoke;
187 | 				}
188 | 			.divTextContainer {
189 | 				padding: 0;
190 | 				}
191 | 			.divBackgroundImage {
192 | 				position: absolute;
193 | 				width: 100%;
194 | 				height: 100%;
195 | 				margin-left: 0;
196 | 				margin-top: 0;
197 | 				border-top: 1px solid silver;
198 | 				z-index: 10;
199 | 				
200 | 				-webkit-background-size: cover;
201 | 				-moz-background-size: cover;
202 | 				-o-background-size: cover;
203 | 				background-size: cover;
204 | 				background-position: center;
205 | 				background-repeat: no-repeat;
206 | 				}
207 | 			.divOverlay {
208 | 				position: absolute;
209 | 				width: 100%;
210 | 				height: 100%;
211 | 				margin-left: 0;
212 | 				margin-top: 0;
213 | 				z-index: 20;
214 | 				background-color: black;
215 | 				opacity: 0.5;
216 | 				}
217 | 			.divListicleBody {
218 | 				position: relative;
219 | 				
220 | 				width: 60%;
221 | 				margin-left: auto;
222 | 				margin-right: auto;
223 | 				
224 | 				z-index: 30;
225 | 				}
226 | 			.divListicleControls {
227 | 				margin-top: 20px;
228 | 				font-size: 18px;
229 | 				}
230 | 			.divListicleControls a {
231 | 				color: white;
232 | 				cursor: pointer;
233 | 				}
234 | 			.divArrow {
235 | 				font-size: 24px;
236 | 				}
237 | 			.divTitle {
238 | 				color: white;
239 | 				font-size: 16px;
240 | 				}
241 | 			.divListicleText {
242 | 				font-size: 42px;
243 | 				color: white;
244 | 				text-shadow: 1px 1px black;
245 | 				line-height: 110%;
246 | 				
247 | 				padding-bottom: 10%;
248 | 				}
249 | 			.divListicleText a {
250 | 				color: white;
251 | 				}
252 | 			.divClueLink {
253 | 				font-size: 24px;
254 | 				margin-bottom: 10px;
255 | 				}
256 | 			.divClueLink a {
257 | 				color: white;
258 | 				cursor: pointer;
259 | 				text-decoration: none;
260 | 				text-shadow: 1px 1px black;
261 | 				}
262 | 			
263 | 			.divFooter {
264 | 				color: silver;
265 | 				font-size: 14px;
266 | 				height: 6em;
267 | 				padding-left: 5em;
268 | 				padding-right: 5em;
269 | 				position: fixed;
270 | 				bottom: 0;
271 | 				margin-left: auto;
272 | 				margin-right: auto;
273 | 				z-index: 30;
274 | 				}
275 | 			.divFooter a {
276 | 				cursor: pointer;
277 | 				color: silver;
278 | 				}
279 | 			
280 | 			.divClueAndText {
281 | 				margin-top: 20%;
282 | 				}
283 | 			.spInfoLink {
284 | 				margin-left: .5em;
285 | 				}
286 | 			.spHomeLink {
287 | 				margin-right: .5em;
288 | 				}
289 | 			.divVersionNumber {
290 | 				color: silver;
291 | 				font-size: 14px;
292 | 				height: 2em;
293 | 				padding-right: 1em;
294 | 				position: fixed;
295 | 				bottom: 0;
296 | 				margin-left: 95%;
297 | 				z-index: 30;
298 | 				}
299 | 			
300 | 			</style>
301 | 		<style> /* styles for phone */
302 | 			@media only screen 
303 | 			and (min-device-width : 320px) 
304 | 			and (max-device-width : 480px) {
305 | 				.divListicleBody {
306 | 					width: 95%;
307 | 					}
308 | 				.divClueLink {
309 | 					font-size: 16px;
310 | 					text-shadow: none;
311 | 					}
312 | 				.divListicleText {
313 | 					font-size: 22px;
314 | 					text-shadow: none;
315 | 					}
316 | 				.divClueAndText {
317 | 					width: 80%;
318 | 					margin-left: auto;
319 | 					margin-right: auto;
320 | 					line-height: 105%;
321 | 					margin-top: 15%;
322 | 					}
323 | 				.divListicleControls {
324 | 					margin-top: 10px;
325 | 					font-size: 16px;
326 | 					}
327 | 				.divFooter {
328 | 					padding-left: 1em;
329 | 					padding-right: 1em;
330 | 					font-size: 12px;
331 | 					line-height: 100%;
332 | 					}
333 | 				}
334 | 			</style>
335 | 		</head>
336 | 	<body>
337 | 		<div class="divVersionNumber" id="idVersionNumber">
338 | 			</div>
339 | 		<div class="divTextContainer" id="idTextContainer">
340 | 			<div class="divBackgroundImage" id="idBackgroundImage">
341 | 				<div class="divOverlay" id="idOverlay"></div>
342 | 				<div class="divListicleBody">
343 | 					<div class="divListicleControls">
344 | 						<div class="divArrow" style="float: right;"><a onclick="nextClue ()"><i class="fa fa-arrow-right" id="idRightArrow"></i></a></div>
345 | 						<div class="divArrow" style="float: left;"><a onclick="prevClue ()"><i class="fa fa-arrow-left" id="idLeftArrow"></i></a></div>
346 | 						<center><div class="divTitle" id="idTitle"></div></center>
347 | 						<div class="divArrows">
348 | 							</div>
349 | 						</div>
350 | 					
351 | 					<div class="divClueAndText">
352 | 						<div class="divClueLink" id="idClueLink">
353 | 							</div>
354 | 						<div class="divListicleText" id="idListicleText">
355 | 							</div>
356 | 						</div>
357 | 					
358 | 					</div>
359 | 				</div>
360 | 			</div>
361 | 		<script>
362 | 			$(document).ready (function () {
363 | 				startup ();
364 | 				});
365 | 			</script>
366 | 		</body>
367 | 	</html>
368 | 


--------------------------------------------------------------------------------