forked from NorthwoodsSoftware/GoJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
232 lines (208 loc) · 8.27 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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software</title>
<meta name="description" content="GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other visual graph types." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-1506307-5', 'auto');
ga('send', 'pageview');
</script>
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<!-- custom CSS after bootstrap -->
<link href="../assets/css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.flex-container {
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin-top: 8px
}
.flex-item {
width: 220px;
-webkit-flex-grow: 1;
-webkit-flex-shrink: 1;
flex-grow: 1;
flex-shrink: 1;
}
</style>
</head>
<body>
<!-- non-fixed navbar -->
<nav class="navbar navbar-inverse navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<a id="toplogo" class="navbar-brand" href="../index.html">GoJS</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../index.html">Home</a></li>
<li><a href="../learn/index.html">Learn</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../intro/index.html">Intro</a></li>
<li><a href="../api/index.html">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="../download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid plr15" id="container">
<div class="row">
<div class="col-md-12">
<h1>GoJS Samples</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
Our samples demonstrate how to build several Diagram types and showcase specific features and layouts. You can use the HTML and JavaScript in these samples as the starting point for your application.
</p>
<p>
If you are done looking around and are ready to experiment with GoJS, <a href="../learn/index.html">read the getting started tutorial.</a>
</p>
</div>
<div class="col-md-6">
<p>
If you are looking for examples of a particular GoJS method or property, you can search the source code of all samples and extensions and documentation on GitHub:
</p>
<p>
<input id="searchInput" type="text" placeholder="setDataProperty" />
<a id="searchAnchor" href="https://github.com/NorthwoodsSoftware/GoJS/search?q=setDataProperty&type=Code" target="_blank" >
<span id="searchButton" class="btn btn-primary">Search source code</span>
</a>
</p>
<p>
<a href="https://www.nwoods.com/components/evalform.htm">Register with us for support during your evaluation.</a>
</p>
</div>
</div>
<div>
<div id="tagsDiv">
</div>
<div id="samplesDiv">
</div>
<div>
<h4><a href="all.html">Complete list of all samples</a></h4>
</div>
</div>
</div><!-- /.container -->
<p class="footer">
GoJS ® by Northwoods Software. Copyright © 1998-2019 <a href="https://www.nwoods.com" target="_blank">Northwoods Software</a> ®
</p>
<script src="indexList.js"></script>
<script src="../assets/js/jquery.min.js"></script>
<script async src="../assets/js/bootstrap.min.js"></script>
<script>
var searchInput = document.getElementById('searchInput');
var searchAnchor = document.getElementById('searchAnchor');
searchInput.addEventListener('input', function(e) {
var searchterm = searchInput.value;
if (searchterm === '') searchterm = "setDataProperty";
searchAnchor.href = "https://github.com/NorthwoodsSoftware/GoJS/search?q=" + searchterm + "\&type=Code";
});
searchInput.addEventListener('keydown', function(e) {
if (e.which === 13) searchAnchor.click();
});
var hash = null;
var selectedTag = "all";
buildTags();
$(document).ready(changeHash);
$(window).on('hashchange', changeHash);
function buildTags() {
var tagDiv = document.getElementById("tagsDiv");
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
var tagButton = document.createElement('button');
if (tag !== selectedTag) {
tagButton.className = "btn btn-primary btn-sm btn-tag";
} else {
tagButton.className = "btn btn-primary btn-sm btn-selected-tag";
}
tagButton.id = tag + "Btn";
tagButton.value = tag;
tagButton.innerHTML = tag;
tagButton.onclick = onTagClick;
tagDiv.appendChild(tagButton);
}
}
function onTagClick(e) {
this.blur(); // we want to be able to see the styles, so blur once we've clicked
if (selectedTag === this.value) return;
window.location.hash = "#" + this.value;
}
function changeHash() {
document.getElementById(selectedTag + "Btn").className = "btn btn-primary btn-sm btn-tag"; // clear current selected tag's style
hash = window.location.hash;
if (tags.indexOf(hash.substring(1)) < 0) {
selectedTag = "all";
} else {
selectedTag = hash.substring(1);
}
document.getElementById(selectedTag + "Btn").className = "btn btn-primary btn-sm btn-selected-tag"; // set new selected tag's style
buildSamples();
}
function buildSamples() {
var sampleListDiv = document.getElementById("samplesDiv");
sampleListDiv.className = "flex-container";
sampleListDiv.innerHTML = ""; // empty the div to start off
var filteredSamples = filterSamples();
if (filteredSamples.length === 0) return;
for (var i = 0; i < filteredSamples.length; i++) {
var sample = filteredSamples[i];
var samplediv = document.createElement('div');
samplediv.className = "flex-item";
var a = document.createElement('a');
a.href = sample[0] + '.html';
var img = document.createElement('img');
img.src = '../assets/images/screenshots/' + sample[3] + '.png';
img.width = 200;
img.height = 200;
img.className = "img-responsive img-thumbnail";
a.appendChild(img);
var title = document.createElement('h2');
title.textContent = sample[1];
a.appendChild(title);
var desc = document.createElement('p');
desc.textContent = sample[2];
samplediv.appendChild(a);
samplediv.appendChild(desc);
sampleListDiv.appendChild(samplediv);
}
}
function filterSamples() {
var filteredSamples = [];
for (var i = 0; i < arr.length; i++) {
var sample = arr[i];
if (selectedTag === "all" || sample[4].indexOf(selectedTag) >= 0) {
filteredSamples.push(sample);
}
}
return filteredSamples;
}
</script>
</body>
</html>