Skip to content

Commit 5432e05

Browse files
author
Tim Berners-Lee
committed
Class icon square green border seems to be working
1 parent aaeca56 commit 5432e05

2 files changed

Lines changed: 73 additions & 33 deletions

File tree

‎src/style.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ module.exports = {
1212
textButtonStyle:
1313
'background-color: #fff; padding: 0.7em; border: .01em solid grey; border-radius:0.2em; font-size: 100%;', // 'background-color: #eef;
1414
// The width of the text field must bot be 100% or it switches to overlapping
15+
16+
iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',
17+
classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0; border: 0.1em solid green; padding: 0.2em; background-color: #efe;', // combine with buttonStyle
18+
1519
messageBodyStyle:
1620
'white-space: pre-wrap; width: 99%; font-size:100%; border: 0.07em solid #eee; border-radius:0.2em; padding: .3em 0.5em; margin: 0.1em;',
1721
pendingeditModifier: 'color: #bbb;',

‎src/widgets/buttons.js‎

Lines changed: 69 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -222,14 +222,12 @@ var tempSite = function (x) {
222222
}
223223
}
224224

225-
buttons.findImageByClass = function findImageByClass (x) {
226-
const kb = UI.store
227-
const ns = UI.ns
225+
/** Find an image for this thing as a classs
226+
*/
227+
buttons.findImageFromURI = function findImageFromURI (x) {
228228
const iconDir = UI.icons.iconBase
229-
const types = kb.findTypeURIs(x)
230-
if (ns.solid('AppProvider').uri in types) {
231-
return iconDir + 'noun_15177.svg' // App
232-
}
229+
230+
// Special cases from URI scheme:
233231
if (x.uri) {
234232
if (
235233
x.uri.split('/').length === 4 &&
@@ -253,21 +251,14 @@ buttons.findImageByClass = function findImageByClass (x) {
253251
// todo: pick up a possible favicon for the web page istelf from a link
254252
// was: return iconDir + 'noun_681601.svg' // document - under solid assumptions
255253
}
254+
return null
256255
}
257256

258-
ns.prov = $rdf.Namespace('http://www.w3.org/ns/prov#') // In case not yet there
259-
for (var k in buttons.iconForClass) {
260-
const pref = k.split(':')[0]
261-
const id = k.split(':')[1]
262-
const klass = ns[pref](id)
263-
if (klass.uri in types || klass.uri === x.uri) {
264-
// Allow full URI in new additions
265-
return $rdf.uri.join(buttons.iconForClass[k], UI.icons.iconBase)
266-
}
267-
}
268257
return iconDir + 'noun_10636_grey.svg' // Grey Circle - some thing
269258
}
270259

260+
/* Find something we have as explict image data for the thing
261+
*/
271262
buttons.findImage = thing => {
272263
const kb = UI.store
273264
const ns = UI.ns
@@ -285,18 +276,67 @@ buttons.findImage = thing => {
285276
return image ? image.uri : null
286277
}
287278

288-
// @@ Also add icons for *properties* like home, work, email, range, domain, comment,
279+
/** Do the best you can with the data available
280+
**
281+
** @return {Boolean} Are we happy with this icon?
282+
** Sets src AND STYLE of the image.
283+
*/
284+
buttons._trySetImage = function _trySetImage (element, thing, iconForClassMap) {
285+
const kb = UI.store
286+
287+
const explitImage = buttons.findImage(thing)
288+
if (explitImage) {
289+
element.setAttribute('src', explitImage)
290+
return true
291+
}
292+
// This is one of the classes we know about - the class itself?
293+
const typeIcon = iconForClassMap[thing.uri]
294+
if (typeIcon) {
295+
element.setAttribute('src', typeIcon)
296+
element.style = UI.style.classIconStyle
297+
// element.style.border = '0.1em solid green;'
298+
// element.style.backgroundColor = '#eeffee' // pale green
299+
return true
300+
}
301+
const schemeIcon = buttons.findImageFromURI(thing)
302+
if (schemeIcon) {
303+
element.setAttribute('src', schemeIcon)
304+
return true // happy with this -- don't look it up
305+
}
289306

290-
buttons.setImage = function (element, profile) {
307+
// Do we have a generic icon for something in any class its in?
308+
const types = kb.findTypeURIs(thing)
309+
for (var typeURI in types) {
310+
if (iconForClassMap[typeURI]) {
311+
element.setAttribute('src', iconForClassMap[typeURI])
312+
return false // maybe we can do better
313+
}
314+
}
315+
element.setAttribute('src', UI.icons.iconBase + 'noun_10636_grey.svg') // Grey Circle - some thing
316+
return false // we can do better
317+
}
318+
319+
// ToDo: Also add icons for *properties* like home, work, email, range, domain, comment,
320+
//
321+
322+
buttons.setImage = function (element, thing) { // 20191230a
291323
const kb = UI.store
292-
const uri = buttons.findImage(profile)
293-
element.setAttribute('src', uri || buttons.findImageByClass(profile))
294-
if (!uri && profile.uri) {
295-
kb.fetcher.nowOrWhenFetched(profile.doc(), undefined, () => {
296-
element.setAttribute(
297-
'src',
298-
buttons.findImage(profile) || buttons.findImageByClass(profile)
299-
)
324+
const ns = UI.ns
325+
326+
var iconForClassMap = {}
327+
for (var k in buttons.iconForClass) {
328+
const pref = k.split(':')[0]
329+
const id = k.split(':')[1]
330+
const klass = ns[pref](id)
331+
iconForClassMap[klass.uri] = $rdf.uri.join(buttons.iconForClass[k], UI.icons.iconBase)
332+
}
333+
334+
const happy = buttons._trySetImage(element, thing, iconForClassMap)
335+
if (!happy && thing.uri) {
336+
kb.fetcher.nowOrWhenFetched(thing.doc(), undefined, (ok) => {
337+
if (ok) {
338+
buttons._trySetImage(element, thing, iconForClassMap)
339+
}
300340
})
301341
}
302342
}
@@ -305,14 +345,15 @@ buttons.setImage = function (element, profile) {
305345
// See eg http://stackoverflow.com/questions/980855/inputting-a-default-image
306346
var faviconOrDefault = function (dom, x) {
307347
var image = dom.createElement('img')
348+
image.style = UI.style.iconStyle
308349
var isOrigin = function (x) {
309350
if (!x.uri) return false
310351
var parts = x.uri.split('/')
311352
return parts.length === 3 || (parts.length === 4 && parts[3] === '')
312353
}
313354
image.setAttribute(
314355
'src',
315-
UI.icons.iconBase + (isOrigin(x) ? 'noun_15177.svg' : 'noun_681601.svg')
356+
UI.icons.iconBase + (isOrigin(x) ? 'noun_15177.svg' : 'noun_681601.svg') // App symbol vs document
316357
)
317358
if (x.uri && x.uri.startsWith('https:') && x.uri.indexOf('#') < 0) {
318359
var res = dom.createElement('object') // favico with a fallback of a default image if no favicon
@@ -527,12 +568,7 @@ buttons.personTR = function (dom, pred, obj, options) {
527568
'style',
528569
'vertical-align: middle; width:2em; padding:0.5em; height: 4em;'
529570
)
530-
image.setAttribute(
531-
'style',
532-
'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;'
533-
)
534571
td1.appendChild(image)
535-
// buttons.setImage(image, obj)
536572

537573
buttons.setName(td2, obj)
538574
if (options.deleteFunction) {

0 commit comments

Comments
 (0)