-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
82 lines (81 loc) · 2.72 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
<!DOCTYPE html>
<html>
<head>
<title>InfoCards.js</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/infocards.css"/>
<script src="js/infocards.js"></script>
</head>
<body>
<h1>Infocards.js : The nice way to get information</h1>
<h2>Description</h2>
<p>infocards.js is a customizable JS plugin which allows you to get related information about a specified query. It is powered by the awesome DuckDuckGo api, which respects your privacy.</p>
<h2>Usage</h2>
<pre>new InfoCard(options)</pre>
<h3>options</h3>
<h4>query</h4>
<p>The query you wish to get information about. <b>Required</b></p>
<h4>container</h4>
<p>The DOM element where you wish to insert the info card. <b>Required</b></p>
<h4>classNames</h4>
<p>Class names you wish to apply to differents DOM elements.</p>
<p>Supported values :</p>
<ul>
<li>category-item</li>
<li>card</li>
<li>tabs</li>
</ul>
<p>Usage :</p>
<pre>
classNames: {
category-item: "card",
tabs: "tabs"
}
</pre>
<h4>appReferName</h4>
<p>App name to append behind API URL for DuckDuckGo's purpose.</p>
<h4>horizontalScrolling</h4>
<p>Enables horizontal scrolling support using the mousewheel for some elements.</p>
<p>Supported values :</p>
<ul>
<li><b>false</b> (default) : Disables horizontal scrolling</li>
<li><b>true</b> : Enables horizontal scrolling</li>
<li><b>"string"</b> : Enables horizontal scrolling for selectors specified inside the string</li>
</ul>
<h4>onHeadingClick</h4>
<p>Function to call when a heading (title or topic title) is clicked.</p>
<h4>onEmpty(container)</h4>
<p>Function called when no results are found.</p>
<h4>onError(errorCode)</h4>
<p>Function called when an error occurs.</p>
<h5>errorCode</h5>
<ul>
<li><b>0</b>: 404 error</li>
<li><b>1</b>: Unimplemented</li>
</ul>
<h2>Example</h2>
<p>
<input type="text" placeholder="Find information about..." id="demo-input"></input>
</p>
<div id="demo-result"></div>
<pre><script style="display:block;">
window.onload = function() {
var infocard = null;
document.querySelector("#demo-input").addEventListener("change", function() {
if(infocard != null) {
infocard.destroy();
}
infocard = new InfoCard({
query: this.value,
container: document.querySelector("#demo-result"),
horizontalScrolling: ".InfoCard-category",
appReferName: "infocardjs-demo",
onEmpty: function(container) {
container.innerHTML = "No results found."
}
});
}, false);
};
</script></pre>
</body>
</html>