Skip to content

Commit 8c17c5b

Browse files
michielbdejongmichielbdejong
committed
imagesOf
1 parent b35df8c commit 8c17c5b

2 files changed

Lines changed: 70 additions & 16 deletions

File tree

‎examples/buttons/index.html‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,14 @@
66
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
77
<script>
88
const $ = document.querySelector.bind(document)
9+
function showSource(widgetName) {
10+
$(`#viewSource-${widgetName}`).innerHTML = $(`#script-${widgetName}`).innerText
11+
.replace(/&/g, "&amp;")
12+
.replace(/</g, "&lt;")
13+
.replace(/>/g, "&gt;")
14+
.replace(/"/g, "&quot;")
15+
.replace(/'/g, "&#039;")
16+
}
917
</script>
1018
</head>
1119
<body>
@@ -207,19 +215,21 @@ <h2 id="fileUploadButtonDiv"><a href="#fileUploadButtonDiv"><a href="#fileUpload
207215

208216
<h2 id="findImage"><a href="#findImage">findImage</a></h2>
209217
<script id="script-findImage">
210-
// FIXME: not sure why agentNode.sameTerm(UI.ns.foaf('Agent')) is false
211-
function displayFindImageResult(url) {
212-
const node = UI.rdf.namedNode(url)
218+
function displayFindImageResult(node) {
213219
const result = UI.widgets.findImage(node)
214220
const image = document.createElement('img')
215221
image.setAttribute('src', result)
216222
image.setAttribute('style', 'width: 100px; height: 100px;')
217223
$('#div-findImage').appendChild(image)
218224
}
219225
window.addEventListener('DOMContentLoaded', (event) => {
220-
const agentNode = UI.rdf.namedNode('https://example.com/#agent')
221-
UI.store.add(agentNode, UI.ns.rdf('type'), UI.ns.foaf('Agent'))
222-
displayFindImageResult(agentNode)
226+
displayFindImageResult(UI.ns.foaf('Agent'))
227+
displayFindImageResult(UI.ns.rdf('Resource'))
228+
229+
const michiel = UI.rdf.namedNode('https://michielbdejong.inrupt.net/profile/card#me')
230+
const michielPhoto = UI.rdf.namedNode('https://michielbdejong.com/img/me.jpg')
231+
UI.store.add(michiel, UI.ns.vcard('hasPhoto'), michielPhoto)
232+
displayFindImageResult(michiel)
223233
})
224234
</script>
225235
<pre id="viewSource-findImage"></pre><script>$('#viewSource-findImage').innerHTML = $('#script-findImage').innerText</script>
@@ -248,18 +258,30 @@ <h2 id="findImageFromURI"><a href="#findImageFromURI">findImageFromURI</a></h2>
248258
<h2 id="iconForClass"><a href="#iconForClass">iconForClass</a></h2>
249259
<script id="script-iconForClass">
250260
window.addEventListener('DOMContentLoaded', (event) => {
251-
// const result = UI.widgets.iconForClass()
252-
// $('#div-iconForClass').appendChild(document.createTextNode(result))
261+
const lines = []
262+
Object.keys(UI.widgets.iconForClass).map((key) => {
263+
lines.push(`<li><img src="${UI.icons.iconBase}${UI.widgets.iconForClass[key]}" style="width:20px;height:20px;"> ${key}</li>`)
264+
})
265+
$('#div-iconForClass').innerHTML = `<ul>${lines.join('')}</ul>`
253266
})
254267
</script>
255-
<pre id="viewSource-iconForClass"></pre><script>$('#viewSource-iconForClass').innerHTML = $('#script-iconForClass').innerText</script>
268+
<pre id="viewSource-iconForClass"></pre><script>showSource('iconForClass')</script>
256269
<div id="div-iconForClass"></div>
257270

258271
<h2 id="imagesOf"><a href="#imagesOf">imagesOf</a></h2>
259272
<script id="script-imagesOf">
260273
window.addEventListener('DOMContentLoaded', (event) => {
261-
// const result = UI.widgets.imagesOf()
262-
// $('#div-imagesOf').appendChild(document.createTextNode(result))
274+
const store = UI.rdf.graph()
275+
const tajMahal = UI.rdf.namedNode('http://dbpedia.org/page/Taj_Mahal')
276+
const tajMahalPhoto = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Taj_Mahal_%28Edited%29.jpeg/1200px-Taj_Mahal_%28Edited%29.jpeg'
277+
store.add(tajMahal, UI.ns.sioc('avatar'), tajMahalPhoto)
278+
const result = UI.widgets.imagesOf(tajMahal, store)
279+
result.map((imageUrl) => {
280+
const image = document.createElement('img')
281+
image.setAttribute('src', imageUrl)
282+
image.setAttribute('style', 'width: 100px; height: 100px;')
283+
$('#div-imagesOf').appendChild(image)
284+
})
263285
})
264286
</script>
265287
<pre id="viewSource-imagesOf"></pre><script>$('#viewSource-imagesOf').innerHTML = $('#script-imagesOf').innerText</script>

‎src/widgets/buttons.ts‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -187,19 +187,37 @@ function setName (element, x) {
187187
}
188188
}
189189

190-
// Set of suitable images
191-
function imagesOf (x, kb) {
190+
/**
191+
* Set of suitable images
192+
* See also [[findImage]]
193+
* @param x The thing for which we want to find an image
194+
* @param kb The RDF store to look in
195+
* @returns It goes looking for triples in `kb`,
196+
* `(subject: x), (predicate: see list below) (object: image-url)`
197+
* to find any image linked from the thing with one of the following
198+
* predicates (in order):
199+
* * ns.sioc('avatar')
200+
* * ns.foaf('img')
201+
* * ns.vcard('logo')
202+
* * ns.vcard('hasPhoto')
203+
* * ns.vcard('photo')
204+
* * ns.foaf('depiction')
205+
206+
*/
207+
function imagesOf (x: NamedNode, kb: IndexedFormula): any[] {
192208
var ns = UI.ns
193209
return kb
194210
.each(x, ns.sioc('avatar'))
195211
.concat(kb.each(x, ns.foaf('img')))
196212
.concat(kb.each(x, ns.vcard('logo')))
213+
.concat(kb.each(x, ns.vcard('hasPhoto')))
197214
.concat(kb.each(x, ns.vcard('photo')))
198215
.concat(kb.each(x, ns.foaf('depiction')))
199216
}
200-
// Best logo or avater or photo etc to represent someone or some group etc
201-
//
202217

218+
/**
219+
* Best logo or avatar or photo etc to represent someone or some group etc
220+
*/
203221
const iconForClass = {
204222
// Potentially extendable by other apps, panes, etc
205223
// Relative URIs to the iconBase
@@ -277,8 +295,22 @@ function findImageFromURI (x: NamedNode): string | null {
277295

278296
/**
279297
* Find something we have as explicit image data for the thing
298+
* See also [[imagesOf]]
299+
* @param thing The thing for which we want to find an image
300+
* @returns The URL of a globe icon if thing equals `ns.foaf('Agent')`
301+
* or `ns.rdf('Resource')`. Otherwise, it goes looking for
302+
* triples in `UI.store`,
303+
* `(subject: thing), (predicate: see list below) (object: image-url)`
304+
* to find any image linked from the thing with one of the following
305+
* predicates (in order):
306+
* * ns.sioc('avatar')
307+
* * ns.foaf('img')
308+
* * ns.vcard('logo')
309+
* * ns.vcard('hasPhoto')
310+
* * ns.vcard('photo')
311+
* * ns.foaf('depiction')
280312
*/
281-
function findImage (thing: NamedNode) {
313+
function findImage (thing: NamedNode): string {
282314
const kb = UI.store
283315
const ns = UI.ns
284316
const iconDir = UI.icons.iconBase

0 commit comments

Comments
 (0)