diff options
Diffstat (limited to 'docs/glyphs/glyphs.js')
-rw-r--r-- | docs/glyphs/glyphs.js | 122 |
1 files changed, 96 insertions, 26 deletions
diff --git a/docs/glyphs/glyphs.js b/docs/glyphs/glyphs.js index d2212424b..fccd1bce8 100644 --- a/docs/glyphs/glyphs.js +++ b/docs/glyphs/glyphs.js @@ -3,8 +3,25 @@ var kSVGScale = 0.1 // how bmuch metrics are scaled in the SVGs var kGlyphSize = 346 // at kSVGScale. In sync with CSS and SVGs var kUPM = 2816 + +function pxround(n) { + return Math.round(n * 2) / 2 +} + +// forEachElement(selector, fun) +// forEachElement(parent, selector, fun) +function eachElement(parent, selector, fun) { + if (typeof selector == 'function') { + fun = selector + selector = parent + parent = document + } + Array.prototype.forEach.call(parent.querySelectorAll(selector), fun) +} + + if (!isMac) { - Array.prototype.forEach.call(document.querySelectorAll('kbd'), function(e) { + eachElement('kbd', function(e) { if (e.innerText == '\u2318') { e.innerText = 'Ctrl' } @@ -226,7 +243,9 @@ function updateLocation() { var h1 = document.querySelector('h1') if (queryString.g) { if (!glyphNameEl) { - glyphNameEl = document.createElement('span') + glyphNameEl = document.createElement('a') + glyphNameEl.href = '?g=' + encodeURIComponent(queryString.g) + wrapIntLink(glyphNameEl) glyphNameEl.className = 'glyph-name' } document.title = queryString.g + ' – ' + baseTitle @@ -260,8 +279,10 @@ window.onpopstate = function(ev) { } function navto(url) { - history.pushState({}, "Glyphs", url) - updateLocation() + if (location.href != url) { + history.pushState({}, "Glyphs", url) + updateLocation() + } window.scrollTo(0,0) } @@ -497,6 +518,8 @@ function renderSingleInfo(g) { var unicode = e.querySelector('.unicode') function configureUnicodeView(el, g) { + var a = el.querySelector('a') + a.href = "https://codepoints.net/U+" + fmthex(g.unicode, 4) setv(el, 'unicodeCodePoint', g.unicode ? 'U+' + fmthex(g.unicode, 4) : '–') setv(el, 'unicodeName', g.unicodeName || '') } @@ -553,35 +576,51 @@ function renderSingleInfo(g) { var cachedSVGDataURIs = {} -function getSvgDataURI(svg) { - var cached = cachedSVGDataURIs[svg.id] +function getSvgDataURI(svg, fill) { + if (!fill) { + fill = '' + } + var cached = cachedSVGDataURIs[svg.id + '-' + fill] if (!cached) { - cached = 'data:image/svg+xml,' + svg.outerHTML.replace(/[\r\n]+/g, '') - cachedSVGDataURIs[svg.id] = cached + var src = svg.outerHTML.replace(/[\r\n]+/g, '') + if (fill) { + src = src.replace(/<path /g, '<path fill="' + fill + '" ') + } + cached = 'data:image/svg+xml,' + src + cachedSVGDataURIs[svg.id + '-' + fill] = cached } return cached } -function pxround(n) { - return Math.round(n * 2) / 2 -} - function selectKerningPair(id, directly) { - Array.prototype.forEach.call( - document.querySelectorAll('.kernpair.selected'), - function(e) { - e.classList.remove('selected') - } - ) + // deselect existing + eachElement('.kernpair.selected', function(kernpair) { + eachElement(kernpair, '.g', function (glyph) { + var svgURI = getSvgDataURI(svgRepository[glyph.dataset.name]) + glyph.style.backgroundImage = "url('" + svgURI + "')" + }) + kernpair.classList.remove('selected') + }) + var el = document.getElementById(id) - if (el) { - el.classList.add('selected') - if (!directly) { - el.scrollIntoViewIfNeeded() - } + + if (!el) { + history.replaceState({}, '', location.search) + return } + + el.classList.add('selected') + eachElement(el, '.g', function (glyph) { + var svgURI = getSvgDataURI(svgRepository[glyph.dataset.name], 'white') + glyph.style.backgroundImage = "url('" + svgURI + "')" + }) + + if (!directly) { + el.scrollIntoViewIfNeeded() + } + history.replaceState({}, '', location.search + '#' + id) } @@ -632,7 +671,8 @@ function renderSingleKerning(g) { leftMargin = leftMargin * kSVGScale * lilScale rightMargin = rightMargin * kSVGScale * lilScale - el.className = side + el.dataset.name = glyphName + el.className = 'g ' + side el.style.backgroundImage = "url('" + svgURI + "')" el.style.backgroundSize = svgWidth + 'px ' + lilGlyphSize + 'px' el.style.width = svgWidth + 'px' @@ -653,7 +693,7 @@ function renderSingleKerning(g) { var otherSvg = svgRepository[glyphName] var pair = document.createElement('a') - pair.className = 'kernpair' + pair.className = 'kernpair ' + side pair.title = ( asLeftSide ? selfName + '/' + glyphName + ' ' + kerningValue : glyphName + '/' + selfName + ' ' + kerningValue @@ -701,6 +741,34 @@ function renderSingleKerning(g) { label.innerText = kerningValue kern.appendChild(label) + if (glyphName != selfName) { + var link = document.createElement('div') + link.className = 'link' + var linkA = document.createElement('a') + linkA.href = '?g=' + encodeURIComponent(glyphName) + linkA.title = 'View ' + glyphName + linkA.innerText = '\u2197' + linkA.tabIndex = -1 + wrapIntLink(linkA) + link.appendChild(linkA) + + var kLinkAWidth = 16 // sync with CSS .kernpair .link a + + if (asLeftSide) { + var rightMetrics = glyphMetrics.metrics[asLeftSide ? glyphName : selfName] + linkA.style.marginRight = pxround( + ((rightMetrics.advance / 2) * kSVGScale * lilScale) - (kLinkAWidth / 2) + ) + 'px' + } else { + linkA.style.marginLeft = pxround( + ((leftMetrics.advance / 2) * kSVGScale * lilScale) - (kLinkAWidth / 2) + ) + 'px' + } + + pair.appendChild(link) + } + + kerningList.appendChild(pair) }) @@ -710,7 +778,9 @@ function renderSingleKerning(g) { var selfLeft = mkpairGlyph(g.name, 'left', 0, thisSvgURI) var selfRight = mkpairGlyph(g.name, 'right', 0, thisSvgURI) - if (mkpairs(kerningAsLeft, g.name, selfLeft, 'left')) { + if (mkpairs(kerningAsLeft, g.name, selfLeft, 'left') && + kerningAsRightKeys.length != 0) + { var div = document.createElement('div') div.className = 'divider' kerningList.appendChild(div) |