-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
310 lines (304 loc) · 15.4 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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!doctype html>
<html>
<head>
<meta charset="UTF8">
<title>Refinry :: Sharpen your search</title>
<link type="text/css" rel="stylesheet" href="assets/css/materialize.min.css"
media="screen,projection">
<link type="text/css" rel="stylesheet" href="assets/css/material-icons.css"
media="screen,projection">
<link type="text/css" rel="stylesheet" href="assets/css/jquery-ui.min.css"
media="screen,projection">
<link type="text/css" rel="stylesheet" href="assets/css/rzslider.min.css"
media="screen,projection">
<link type="text/css" rel="stylesheet" href="assets/css/refinry.css"
media="screen,projection">
<link type="text/css" rel="stylesheet" href="assets/css/halfgrid.css"
media="screen,projection">
<link type="text/css" rel="stylesheet" href="assets/css/balloon.css">
<script type="text/javascript" src="assets/libs/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="assets/libs/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/libs/materialize.min.js"></script>
<script type="text/javascript" src="assets/libs/angular.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-filter.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-materialize.min.js"></script>
<script type="text/javascript" src="assets/libs/ng-videosharing-embed.min.js"></script>
<script type="text/javascript" src="assets/libs/moment.min.js"></script>
<script type="text/javascript" src="assets/libs/compromise.min.js"></script>
<script type="text/javascript" src="assets/libs/rzslider.min.js"></script>
<script type="text/javascript" src="assets/libs/quantities.js"></script>
<script type="text/javascript" src="assets/libs/elif.js"></script>
<script type="text/javascript" src="assets/js/commons.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/components/search/search.controller.js"></script>
<script type="text/javascript" src="app/components/search/search.filters.js"></script>
<script type="text/javascript" src="app/components/search/search.directives.js"></script>
<script type="text/javascript" src="app/components/search/cse-request.factory.js"></script>
<script type="text/javascript" src="app/components/search/cse-data.factory.js"></script>
<script type="text/javascript" src="app/components/search/data-cleaning.service.js"></script>
<script type="text/javascript" src="app/components/search/ner.service.js"></script>
<script type="text/javascript" src="app/components/search/facet-category.factory.js"></script>
<script type="text/javascript" src="app/components/search/facet-range.factory.js"></script>
<script type="text/javascript" src="app/components/search/breadcrumb.factory.js"></script>
<script type="text/javascript" src="app/components/search/filter.factory.js"></script>
<script type="text/javascript" src="app/components/search/vocab.constant.js"></script>
<script type="text/javascript" src="app/components/settings/profiles.constant.js"></script>
<script>
$(function(){
$.w = $(window);
$.w.on('resize', res);
res();
$('.search-bar').focus(fading);
});
function res() {
$('.side-bar').css('height',($.w.outerHeight()-25)+'px');
$('.search-facet-container').css('width', $('.side-bar').width()-20+'px');
}
function fading() {
$('#welcome-screen').fadeOut('slow');
}
</script>
</head>
<body class="grey lighten-4" ng-app="schemaorg">
<form class="search-container" ng-controller="searchController">
<!-- Logo -->
<div class="logo-container">
<a href="javascript:void(0)" data-activates="slide-out" data-sidenav="left"
data-menuwidth="200" data-closeonclick="true">
<div class="logo">[ { refinry } ]</div>
</a>
<div id="slide-out" class="side-nav">
<div class="logo">[ { refinry } ]</div>
<div class="app-version-info">v{{appVersion}}-{{profileName}}</div>
<div class="settings">
<span style="font-size:12pt;font-weight:bold;">Settings</span>
<ul>
<li>
<div class="setting-item"><label>Change profile:</label>
<select ng-model="profileName" material-select>
<option ng-repeat="profile in profiles"
value="{{profile.name}}">{{profile.label}}</option>
</select>
</div>
</li>
<li>
<div class="setting-item">
<label>Include non schema.org results:</label>
<div class="switch" style="margin-top:-10px;text-align:center;">
<label>
No
<input type="checkbox" ng-model="includeNonSchemaOrg">
<span class="lever"></span>
Yes
</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Search bar -->
<div class="input-field navbar-fixed" style="margin-top:0;">
<nav>
<input id="search-bar" class="valign center search-bar" type="search"
placeholder="Type a concept here..." ng-model="keyword" required
topic-autocomplete>
<i class="material-icons" style="padding-top:5px;">close</i>
<input type="submit" id="submit" value="Search" ng-click="doSearch(keyword)">
</nav>
</div>
<!-- Preloader -->
<div class="preloader progress" ng-show="searchInProgress" ng-cloak>
<div class="indeterminate"></div>
</div>
<!-- Main section -->
<div class="row">
<!-- Welcome overlay -->
<div id="welcome-screen" class="overlay">
<div class="overlay-content">
Welcome to<br><br>
<span style="font-size:34pt;">[ { refinry } ]</span>
<br><br><br>
A tool to explore the structured data on the Web exposed by
<a href="http://schema.org/">schema.org</a> content web pages.
(Tip: Add a hashtag after the keyword to preselect a topic)
<br><br>
Developed as part of the
<a href="https://metadatacenter.org/" target="_blank">CEDAR</a>
supplement project
<div class="view-code">
<img height="80" width="80" src="assets/img/github-icon.gif"><br>
<a href="https://github.com/metadatacenter/schemaorg-app" target="_blank">
View source on Github</a>
</div>
<div class="arrow"></div>
</div>
</div>
<!-- Empty space -->
<div class="col s0 m1 l1 xl1"></div>
<!-- Content area -->
<div class="col s12 m7 l8 xl8_05 content-area" ng-cloak>
<!-- Search result container -->
<div class="search-result-container" ng-if="dataLoaded">
<!-- Spelling correction -->
<div class="row white z-depth-1 spelling-correction" ng-if="spellingCorrection">
<span>Did you mean:
<span class="word-span">
<a href="javascript:void(0)" ng-value="spellingCorrection"
clickable-search target-text-input-id="search-bar">
{{spellingCorrection}}</a>
</span>
</span>
</div>
<!-- Related concepts -->
<div class="row white z-depth-1 related-concepts" ng-if="relatedConcepts.length > 0">
<span>Related concepts:
<span class="word-span" ng-repeat="relatedConcept in relatedConcepts">
<a href="javascript:void(0)" ng-value="relatedConcept"
clickable-search target-text-input-id="search-bar">
{{relatedConcept}}</a>
<i class="tiny material-icons">search</i>
</span>
</span>
</div>
<!-- Structured result -->
<div class="row search-result-richlist-container" ng-if="structuredSearchResults.length > 0">
<ul class="collapsible" data-collapsible="accordion">
<li ng-repeat="item in structuredSearchResults">
<div class="collapsible-header">
<div class="row narrower">
<div class="col s12 m12 l12 xl9 search-snippet">
<div class="thumbnail" ng-if="item.thumbnail">
<img class="circle thumbnail-img" ng-src="{{item.thumbnail}}">
</div>
<div>
<a class="truncate" href="{{item.url}}" target="_blank" url-breadcrumb></a>
<br><b>{{item.title | removeSeparator}}</b> - {{item.description}}
</div>
</div>
<div class="col s12 m12 l12 xl3 search-chips">
<div class="chip smaller" ng-repeat="topic in item.topics">{{topic}}</div>
</div>
</div>
</div>
<div class="collapsible-body narrower">
<div class="row narrower">
<div class="col s12 m12 l6 xl4 topic-card"
ng-repeat="(topic, object) in item.properties | groupBy: 'topic.instance'">
<ul class="collection with-header">
<li class="collection-header narrower">{{object[0].topic.label}}</li>
<li class="collection-item narrower" ng-repeat="property in object"
ng-if="property.type!='url+image' && property.type!='url+video'">
<label ng-init="limitText=300">{{property.label}}:</label>
<span ng-if="property.type=='numeric'">{{property.value | number}}</span>
<span ng-else-if="property.type=='url'">
<a href="{{property.value}}">{{property.value}}</a>
</span>
<span ng-else>
<span ng-show="{{property.value|isArray}}">
<ol class="browser-default">
<li ng-repeat="item in property.value track by $index">{{item}}</li>
</ol>
</span>
<span ng-show="{{property.value|isString}}">
{{property.value | limitTo:limitText}}{{(property.value).length > limitText ? '...' : ''}}
<a href="javascript:void(0)"
ng-hide="(property.value).length < limitText"
ng-click="limitText = (property.value).length + 1" ><i>show more</i>
</a>
</span>
</span>
<span ng-if="property.unit"> {{property.unit}}</span>
<a tooltipped style="cursor:pointer;" data-position="right" data-delay="50"
data-tooltip="{{property.originalValue}}" ng-if="property.hasWarning">
<i class="material-icons tiny yellow-text text-darken-2"> warning</i></a>
</li>
<li class="collection-item narrower" ng-repeat="property in object | filter:{ type:'url+image' }">
<label>{{property.label}}:</label>
<img materialboxed class="responsive-img fullscreen-img" data-caption="{{item.title}}"
ng-src={{property.value}}>
</li>
<li class="collection-item narrower" ng-repeat="property in object | filter:{ type:'url+video' }">
<label>{{property.label}}:</label>
<embed-video iframe-id="video-{{$index}}" player_id="video-{{$index}}"
ng-href="{{property.value}}"></embed-video>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Normal result -->
<div class="row search-result-list-container"
ng-if="nonStructuredSearchResults.length > 0 && includeNonSchemaOrg">
<ul class="search-result-list">
<li class="search-result-item" ng-repeat="item in nonStructuredSearchResults">
<span><a href="{{item.url}}" target="_blank">{{item.title}}</a><span><br>
<span class="green-text lighten-3">{{item.url}}</span><br>
<span>{{item.description}}</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Side-bar -->
<div class="col s12 m4 l3 xl2_05 side-bar" ng-cloak>
<!-- Search facet container -->
<div class="row search-facet-container" ng-if="breadcrumbs.length!=0">
<!-- Search topics -->
<div class="row search-topics">
<div style="float:left;">TOPICS: </div>
<div class="topic-type" ng-repeat="breadcrumb in breadcrumbs">
<a class="btn dropdown-button" href="#"
ng-attr-data-activates="dropdown-{{breadcrumb.topic.id}}" dropdown>
{{breadcrumb.topic.label}}<i class="material-icons right">arrow_drop_down</i></a>
<ul id="dropdown-{{breadcrumb.topic.id}}" class="dropdown-content">
<li ng-repeat="facet in breadcrumb.facets"><a href="#"
ng-click="onOpen(facet)">{{facet.label}}</a></li>
</ul>
</div>
</div>
<!-- Search facets -->
<div class="row search-facets" ng-if="filters.length!=0">
<!-- Category facets -->
<div class="z-depth-1" ng-repeat="facet in categoryFacets" ng-if="facet.visible">
<ul class="collection with-header">
<li class="collection-header narrower">
<div class="row" style="margin:0px;">
<div class="col s10">{{facet.label}}</div>
<div class="col s2"><span class="x" ng-click="onClose(facet)"></span></div>
</div>
</li>
<li class="collection-item narrower" ng-repeat="choice in facet.choices">
<input type="checkbox" id="checkbox-{{facet.id}}-{{$index}}"
ng-model="choice.selected" ng-change="onCheckboxChanged(facet)">
<label for="checkbox-{{facet.id}}-{{$index}}">{{choice.value}}</label>
</li>
</ul>
</div>
<!-- Range facets -->
<div class="z-depth-1" ng-repeat="facet in rangeFacets" ng-if="facet.visible">
<ul class="collection with-header">
<li class="collection-header narrower">
<div class="row" style="margin:0px;">
<div class="col s10">{{facet.label}}<label ng-if="facet.unit"> ({{facet.unit}})</label></div>
<div class="col s2"><span class="x" ng-click="onClose(facet)"></span></div>
</div>
</li>
<li class="collection-item narrower">
<rzslider rz-slider-model="facet.minValue"
rz-slider-high="facet.maxValue"
rz-slider-options="facet.options"></rzslider>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>