forked from imathis/adn-timeline
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (106 loc) · 4.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>ADN Timeline JS by Brandon Mathis (@imathis)</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="./javascripts/lib/jquery.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="./javascripts/adn-timeline.js"></script>
<link href='./stylesheets/demo.css' media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
(function(){
parseVal = function(str) {
str = str.trim()
if (str.match(/^true$/i)) return true
if (str.match(/^false$/i)) return false
if (str.match(/^\d+$/)) return parseFloat(str)
return str
}
parseInputs = function(str) {
// Convert urlencoded form data to options hash
str = $('.configuration').serialize()
options = str.split('&').
map(function(s) { return s.split("=") }).
reduce(function(p, s) { return p[s[0]] = parseVal(s[1]), p }, {})
if (isNaN(options.count)) return alert('count must be a number')
// Parse text input to set hashtag or username
options.name = decodeURIComponent(options.name)
if (options.name.match(/#/)) options.hashtag = options.name.replace('#', '')
else options.username = options.name.replace('@','')
delete options.name
return options
}
getDemoDiv = function (options) {
div = $('<div>')
for (var key in options) {
if (options.hasOwnProperty(key)) {
div.attr('data-'+key, options[key]);
}
}
return $('<div>').append(div).html()
}
fetchTimeline = function() {
var titleLink = $('<a>')
options = parseInputs(),
demoDiv = getDemoDiv(options)
options.render = function(opts, data) {
opts.el.html('')
if (opts.hashtag) titleLink.attr('href', 'https://alpha.app.net/hashtags/'+opts.hashtag).html('#'+opts.hashtag)
else titleLink.attr('href', 'https://alpha.app.net/'+opts.username).html('@'+opts.username)
$('#title').html('').append([titleLink, " on App.net"])
AdnTimeline.render(opts, data)
}
options.callback = function(){
text = "<script type=\"text/javascript\">\n $(document).ready(function(){\n AdnTimeline.init();\n });\n<\/script>\n\n"
text += demoDiv
$('.live-docs').text(text)
}
AdnTimeline.init(options)
}
$(document).ready(function(){
fetchTimeline();
$('input[type=checkbox]').on('change', function(e){
fetchTimeline();
e.preventDefault();
});
$('form').on('keypress', function(e){
if (e.which == 13) {
fetchTimeline();
e.preventDefault();
}
});
$('[data-try]').on('click', function(e){
$('input[name=name]').val($(e.target).data('try'));
fetchTimeline();
e.preventDefault();
});
})
})(this)
</script>
</head>
<body> <form class='configuration'>
<form class='configuration'>
<input type=text name=name placeholder="@user or #hashtag" value=@imathis>
<input type=text name=count placeholder=count value=5>
<span><input id=avatars type=checkbox name=avatars value=true checked=checked> <label for=avatars>avatars</label></span>
<span><input id=replies type=checkbox name=replies value=true> <label for=replies>replies</label></span>
<span><input id=reposts type=checkbox name=reposts value=true> <label for=reposts>reposts</label></span>
</form>
<p class='try'>
Maybe try <a href='#' data-try='@dalton'>@dalton</a> or <a href='#' data-try='#adn'>#adn</a>.
</p>
<h1 id="title"></h1>
<div class='adn-timeline'></div>
<header>
<h2>Live Docs</h2>
<p>Using ADN-Timeline is simple.</p>
</header>
<pre class='live-docs'></pre>
<footer>
<p>Check out the <a href="https://github.com/imathis/adn-timeline/">source on Github</a>.</p>
</footer>
</body>
</html>