-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
86 lines (73 loc) · 4.04 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Font Awesome Icon Finder Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="src/fontawesomeiconfinder.css">
<script async src="https://ackee.robdavis.dev/tracker.js" data-ackee-server="https://ackee.robdavis.dev" data-ackee-domain-id="ea81c29b-25a1-42a7-afa2-853fc975f7bd"></script>
<!-- Using Bulma.io for some quick and easy stlying -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script type="text/javascript" src="dist/fontawesomeiconfinder.faifnode.js"></script>
<script type="text/javascript" src="dist/fontawesomeiconfinder.trie.js"></script>
<script type="text/javascript" src="dist/fontawesomeiconfinder.manager.js"></script>
<style>
.log {
word-break: break-all;
}
</style>
</head>
<body style="margin: 1rem;">
<div class="columns">
<div class="column is-one-third">
<div class="box has-background-dark">
<input name="search" class="iconSearch input" type="text" placeholder="Icon Search">
</div>
<div class="box has-background-dark has-text-light">
<div id="log" class="log"></div>
</div>
</div>
<div class="column is-two-thirds">
<div id="container" class="icons">
<div class="result" style="height: 100%; overflow-y: auto;"></div>
</div>
</div>
</div>
<!-- Icons and Search -->
<script type="text/javascript">
function fireWhenReady(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
fireWhenReady(function() {
// hijack console.log
console.log = function(message) {
var div = document.createElement('div');
var log = document.getElementById("log");
div.innerHTML = message;
log.prepend(div);
log.scrollTop = log.scrollHeight;
};
console.log('<b>Welcome to the Font Awesome Icon Finder Demo. This console will log out information about the search performance. To get started, type something in the serarch field and notice how the icons are filterd. If you press enter the search is performed on the entire word, not just refined on the last letter you typed. Click on one of the icons to see it\'s data printed to the log. It is this data which will be persisted to the umbraco database</b>');
const url = 'https://raw.githubusercontent.com/RobbieLD/FontAwesomeIconFinder/master/src/icons.json';
// Create the manager
const container = document.getElementById('container');
const manager = new Manager(container);
// Hook up the key event
document.getElementsByClassName('iconSearch')[0].addEventListener('keyup', function(e) {
manager.handleKeyUp(e);
});
console.log('Starting icon loading from ' + url);
// Setup the controls
manager.setup(function(value) {
// If you want some code to be called when an icon is clicked here's where you'd put it.
}, url);
});
</script>
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>
</body>
</html>