/
index.html
168 lines (145 loc) · 5.57 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>RFG Components Demo</h1>
<p>
Visit <a href="https://realfavicongenerator.net/api/web_components">RealFaviconGenerator Components page</a>
for more information.
</p>
<p>
For a live demo, use the <a href="https://realfavicongenerator.net/">Favicon generator</a>
and the <a href="https://realfavicongenerator.net/social">Social generator</a>.
</p>
<h2>Facebook</h2>
<div id="demo">
<div id="facebook-editor"></div>
<div id="facebook-form">
<div id="platforms"></div>
<div id="formats"></div>
<div>
<label>
Title
<input type="text" name="title">
</label>
</div>
<div>
<label>
Description
<input type="text" name="description">
</label>
</div>
<div>
<label>
URL
<input type="text" name="url">
</label>
</div>
<div>
<label>
Scale
<input type="range" name="scale" min="0" max="100">
</label>
</div>
<div>
<label>
Background color
<input type="color" name="background-color" value="#ffffff">
</label>
</div>
<button id="get-api-request">Get API Request</button>
<div id="api-request-container" style="display:none">
<p>
This request is to be run server-side. First you need to replace
<code class="api-key-placeholder"></code> with your actual API key.
Then, the request is ready to be sent to RealFaviconGenerator.
</p>
<div>
<code id="api-request"></code>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://realfavicongenerator.net/web-components/js/core.min.js"></script>
<script src="https://realfavicongenerator.net/web-components/js/facebook.min.js"></script>
<script>
// Create the editor
var fb = new RFGFacebook({
element: $('#facebook-editor'),
master_image_src: 'sky.jpg',
format: 'wide',
title: 'A sample title',
description: 'You should change this description',
url: 'http://example.com/some_page'
});
// Scale setting
fb.on('scaleChange', function(e, currentScale, minScale, maxScale) {
var range = $('input[name="scale"]');
currentScale = RFGComponent.transposeInterval(currentScale, minScale, maxScale,
range.attr('min'), range.attr('max'));
range.val(currentScale);
});
fb.render();
// As the editor might support more platforms in the future (iPad...),
// Better get them from the component itself
var platforms = fb.getAvailablePlatforms();
Object.keys(platforms).forEach(function(platform) {
$('#platforms').append('<label>'
+ '<input type="radio" name="platform" value="'
+ platform + '"'
+ ((platform == fb.getPlatform()) ? ' checked' : '')
+ '>' + platforms[platform]
+ '</label>');
});
$('#platforms').find('input[name="platform"]').change(function() {
var newPlatform = $('input[name="platform"]:checked').val();
fb.setPlatform(newPlatform);
});
// Although formats are fixed, the editor will evolve along with Facebook.
// Moreover, some formats might not be available when the input image
// has a low resolution. So better ask the component instead of hardcoding
// Wide/Tall/Square.
var formats = fb.getAvailableFormats();
Object.keys(formats).forEach(function(format) {
$('#formats').append('<label>'
+ '<input type="radio" name="format" value="'
+ format + '"'
+ ((format == fb.getFormat()) ? ' checked' : '')
+ '>' + formats[format]
+ '</label>');
});
$('#formats').find('input[name="format"]').change(function() {
var newFormat = $('input[name="format"]:checked').val();
fb.setFormat(newFormat);
});
// Other fields: title, etc.
$('input[name="title"]').on('input', function(val) {
fb.setTitle($('input[name="title"]').val());
});
$('input[name="description"]').on('input', function(val) {
fb.setDescription($('input[name="description"]').val());
});
$('input[name="url"]').on('input', function(val) {
fb.setUrl($('input[name="url"]').val());
});
var is = $('input[name="scale"]');
is.bind('propertychange change click keyup input paste', function() {
var range = $(this);
fb.setScale(range.val(), range.attr('min'), range.attr('max'));
});
$('input[name="background-color"]').on('input', function(val) {
fb.setBackgroundColor($('input[name="background-color"]').val());
});
$('#get-api-request').click(function() {
// Ask the component to generate the API request, ready to be sent to
// RealFaviconGenerator
var request = fb.getApiRequest();
$('#api-request-container .api-key-placeholder').html(RFGComponent.API_KEY_PLACEHOLDER);
$('#api-request').html(JSON.stringify(request));
$('#api-request-container').fadeIn();
});
</script>
</body>
</html>