2b9ddf9 · webring · git.iko.soy

git.iko.soy/webring

on master help sign in

fixed sidebar and navigation

2b9ddf9DYM7 years ago

links/main.css+5

compare with master

unifiedsplit

@@ -86,6 +86,11 @@ body #wiki { background: #ccc; color:#333; }

86body #wiki #entry { max-width: calc(100% - 230px); margin-bottom: 30px; line-height: 15px }

87body #wiki #entry a { text-decoration: underline; }

88body #wiki #sidebar { overflow-y: scroll; height: calc(100% - 15px); }

89+body #wiki #sidebar a { display: inline-block; width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 7px; }

90+body #wiki #sidebar li { line-height: 7px; }

91+body #wiki #sidebar li:before { display: none; }

92+body #wiki #sidebar a:before { content: '/'; }

93+body #wiki #sidebar a:after { content: attr(data-msgs) " msgs"; position: absolute; right: 20px; color:#555; }

89body #wiki ul.term { border-bottom: 0px; margin-bottom: 0px; padding-bottom: 0px}

94body #wiki ul.term { border-bottom: 0px; margin-bottom: 0px; padding-bottom: 0px}

90body #wiki ul.term li { margin-bottom: 5px }

95body #wiki ul.term li { margin-bottom: 5px }

91body #wiki ul.term li.name { margin-bottom: 5px }

96body #wiki ul.term li.name { margin-bottom: 5px }

scripts/wiki.js+24−8

@@ -45,20 +45,27 @@ function Wiki (sites) {

45 const html = `${this.templateTerm(this.loc, this.byName[this.loc])} ${this.templateRelated(this.loc)}`

46 this._entry.innerHTML = html

47 } else {

48− const html = `Unknown: ${this.loc}. Retun <a onclick='wiki.go("")'>home</a>, or try a <a onclick='wiki.go("${this.random()}")'>random page</a>.`

48+ const html = `Unknown: ${this.loc}. Retun <a href='#'>home</a>, or try a <a href='${this.random()}'>random page</a>.`

49 this._entry.innerHTML = html

50 }

51 } else {

52− const random = this.random()

53− this._entry.innerHTML = `Click a /topic to get started, or try a <a href='#${random.toUrl()}' onclick='wiki.go("${random}")'>random page</a>. The wiki contains ${Object.keys(this.byName).length} terms, in ${Object.keys(this.byCat).length} categories, by ${Object.keys(this.byAuthor).length} authors.`

52+ this._entry.innerHTML = `Click a /topic to get started, or try a <a href='#${this.random()}'>random page</a>. The wiki contains ${Object.keys(this.byName).length} terms, in ${Object.keys(this.byCat).length} categories, by ${Object.keys(this.byAuthor).length} authors.`

54 }

53 }

55 // Sidebar

54 // Sidebar

56− this._categories.innerHTML = Object.keys(this.byCat).reduce((acc, id) => { return this.byCat[id].length > 5 ? `${acc}<li onclick='wiki.go("${id}")' class='${wiki.at(id) ? 'selected' : ''}'>${id.substr(0, 20)} ${this.byCat[id].length}</li>` : acc }, `<li onclick='wiki.go("")' class='${wiki.at() ? 'selected' : ''}'>home ${Object.keys(this.byName).length}</li>`)

55+ this._categories.innerHTML = Object.keys(this.byCat).reduce((acc, id) =>

56+ { return this.byCat[id].length > 5

57+ ? `${acc}<li ${wiki.at(id) ? 'class="selected"' : ''}>

58+ <a href='#${id}' data-msgs='${this.byCat[id].length}'>${id}</a>

59+ </li>`

60+ : acc

61+ } , `<li ${wiki.at() ? 'class="selected"' : ''}>

62+ <a href='#' data-msgs='${Object.keys(this.byName).length}'>home</a>

63+ </li>`

64+ )

57 }

65 }

59− this.go = (q = window.location.hash.substr(1).replace(/\+/g, ' ').toUpperCase()) => {

67+ this.go = () => {

60− this.loc = q

61− window.location.hash = q.toUrl()

68+ this.loc = decodeURIComponent( window.location.hash.substr(1) ).toUpperCase()

62 this.refresh()

69 this.refresh()

63 }

70 }

@@ -81,7 +88,12 @@ function Wiki (sites) {

82 this.templateRelated = (name) => {

89 this.templateRelated = (name) => {

83 const relatedWords = this.related(name)

90 const relatedWords = this.related(name)

84− const html = `<ul class='col3'>${relatedWords.reduce((acc, item, id) => { return `${acc}<li onclick='wiki.go("${item.name}")' class='${wiki.at(item.name) ? 'selected' : ''}'>${item.name.toLowerCase()}</li>` }, '')}</ul>`

91+ const html = `<ul class='col3'>${relatedWords.reduce( (acc, item, id) =>

92+ { return `${acc}<li ${wiki.at(item.name) ? 'class="selected"' : ''}>

93+ <a href='#${item.name.toLowerCase()}'>${item.name.toLowerCase()}</a>

94+ </li>`

95+ }, '') }

96+ </ul>`

85 return html

97 return html

86 }

98 }

@@ -135,4 +147,8 @@ function Wiki (sites) {

135 }

147 }

136

148

137 String.prototype.toUrl = function () { return this.toLowerCase().replace(/ /g, '+').replace(/[^0-9a-z+:\-./~]/gi, '').trim() }

149 String.prototype.toUrl = function () { return this.toLowerCase().replace(/ /g, '+').replace(/[^0-9a-z+:\-./~]/gi, '').trim() }

150+

151+ window.onload = this.go

152+ window.onhashchange = this.go

138}

153}

154+