-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (97 loc) · 4.35 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
<!DOCTYPE html>
<html>
<meta property="og:title" content="Reddit-Embed Demo">
<meta property="og:description" content="Cleanly embed reddit comments anywhere!">
<meta property="og:image" content="https://raw.githubusercontent.com/AnirudhRahul/Reddit-Embed/master/preview.png">
<meta name="twitter:card" content="summary_large_image">
<title>Reddit-Embed Demo</title>
<!-- For the demo page only not used by red.js -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/red.css"/>
<!-- Main source file for Reddit-Embed -->
<script src ="dist/bundle.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/flatly/bootstrap.min.css" class="light-theme" disabled/>
<link rel="stylesheet" href="css/light-theme.css" class="light-theme" disabled/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css" class="dark-theme"/>
<link rel="stylesheet" href="css/dark-theme.css" class="dark-theme"/>
<script>
function load(){
red.embed(document.getElementById("url").value, document.getElementById("out"))
}
function setDefaults(){
try{
red.setDefaults(JSON.parse(document.getElementById("default-options").value))
load()
}
catch(e){
console.error(e)
alert(e)
}
}
darkTheme = true
function toggleTheme(){
const theme_to_disable = darkTheme? 'dark-theme' : 'light-theme'
const theme_to_enable = !darkTheme? 'dark-theme' : 'light-theme'
for(element of document.getElementsByClassName(theme_to_enable))
element.removeAttribute('disabled')
for(element of document.getElementsByClassName(theme_to_disable))
element.setAttribute('disabled', '')
darkTheme = !darkTheme
if(darkTheme){
document.getElementById('github-icon').src = 'GitHub-Mark-Light-64px.png'
}
else{
document.getElementById('github-icon').src = 'GitHub-Mark-64px.png'
}
}
</script>
<body class="m-2">
<div class="custom-control custom-switch" style="float:right;">
<input type="checkbox" class="custom-control-input" id="theme-toggle" onclick="toggleTheme()">
<label class="custom-control-label" for="theme-toggle">Toggle Theme</label>
</div>
<h2>Enter the url to preview:</h2>
<input type="text" onload="setup" class="form-control" value="reddit.com/r/wallpapers/comments/5xq6no/decided_to_combine_two_of_my_favorite_wallpapers/" id="url">
<div style="display: flex; align-items: center; flex-wrap: nowrap;" class="mt-2">
<button type="button" onClick="load()" class="btn btn-primary">Load json</button>
<button type="button" class="btn btn-primary ml-1" data-toggle="collapse" data-target="#settings">Settings</button>
<a class="ml-2" href="https://github.com/AnirudhRahul/Reddit-Embed/blob/master/test_links.md">More test posts here!</a>
</div>
<div class="collapse" id="settings">
<code style="font-size:30px;" class ="mt-3">red.setDefaults()</code>
<textarea class="form-control rounded-2" id="default-options" rows="18" style="max-width:700px; font-family:Courier;" spellcheck="false">
{
"show_loading_animation": true,
"post_title": false,
"post_author": false,
"show_post": true,
"show_post_title": true,
"show_post_header": true,
"show_post_body": true,
"show_comments_section": true,
"show_comments_section_header": true,
"ignore_sticky_comments": false,
"max_depth": -1,
"open_links_in_new_tab": true,
"padding_per_depth": 24,
"initial_padding": 4,
"improve_spoiler_links": true
}
</textarea>
<button type="button" class="btn btn-primary mt-2" onClick="setDefaults()"> Set defaults </button>
<button type="button" class="btn btn-primary ml-1 mt-2" data-toggle="collapse" data-target="#settings">Collapse</button>
</div>
<hr style="background: #3498db; margin-bottom:0; margin-top:0.7rem"/>
<a href="https://github.com/AnirudhRahul/Reddit-Embed" target="_blank">
<img src="GitHub-Mark-Light-64px.png" id="github-icon" style="position: fixed; bottom: 0.4rem; right: 0.35rem; width: 48px"/>
</a>
<div id="out" class="reddit-embed center"></div>
<script>
const params = new URLSearchParams(location.search);
if(params.has("post"))
document.getElementById("url").value = params.get("post")
load();
</script>
</body>
</html>