Skip to content

Commit

Permalink
CLDR-17803 site: popup menu for subpages (unicode-org#4027)
Browse files Browse the repository at this point in the history
  • Loading branch information
@srl295 @haytenf
srl295 authored and haytenf committed Sep 17, 2024
1 parent 204bada commit ed107a8
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 76 deletions.
118 changes: 70 additions & 48 deletions docs/site/assets/css/page.css
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,142 @@
/* mirror of div.body */
section.body {
margin: 3em;
margin: 3em;
}

header {
width: "100%";
background-color: #5555ff;
border-bottom: 0.5em solid #EEEEFE;
padding: 0.5em;
width: "100%";
background-color: #5555ff;
border-bottom: 0.5em solid #eeeefe;
padding: 0.5em;
}

header div.navparent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

header .navparent a.icon {
display: table-cell;
margin-top: 40;
header .navparent a.icon {
display: table-cell;
margin-top: 40;
}

header .navparent > div {
display: table-cell;
display: table-cell;
}

header .title {
display: table-cell;
color: yellow;
font-size: 1.5em;
display: table-cell;
color: yellow;
font-size: 1.5em;
}

header .nav, header .nav > div {
display: inline;
header .nav,
header .nav > div {
display: inline;
}

header .nav a {
color: white;
color: white;
}

header .nav ul b {
color: gray;
color: gray;
}

.title ul.subpages {
display: none;
}

.title:hover ul.subpages {
display: block;
}

header .nav .crumb {
color: white;
margin: .5em;
color: white;
margin: 0.5em;
}

header .nav ul {
display: inline-flexbox;
width: 90%;
display: inline;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
background-color: navy;
padding: 0.5em;
}

header .nav ul li {
display: inline-flex;
padding: .5em;
margin: 0;
display: block;
padding: 0.5em;
font-size: medium;
margin: 0;
}

header .message {
color: lightblue;
display: list-item;
color: lightblue;
display: list-item;
}

footer {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-top: 0.5em solid #eeeefe;
font-size: smaller;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-top: 0.5em solid #eeeefe;
font-size: smaller;
}


/* copied from tr35.css */

.markdown-alert {
border-left: 0.25em;
padding-left: .5em;
border-left-style: solid;
border-left: 0.25em;
padding-left: 0.5em;
border-left-style: solid;
}

.markdown-alert-title {
font-weight: bold;
font-weight: bold;
}

.markdown-alert-title svg {
margin-right: .5em;
margin-right: 0.5em;
}

.markdown-alert-note {
border-color: blue;
border-color: blue;
}

.markdown-alert-note .markdown-alert-title {
color: blue;
color: blue;
}

.markdown-alert-important {
border-color: blueviolet;
border-color: blueviolet;
}

.markdown-alert-important .markdown-alert-title {
color: blueviolet;
color: blueviolet;
}

/* unusable header and stuff from old Sites. */
svg.K4B8Y, div.Xb9hP, div.hBW7Hb, div.WIdY2d, span.Lw7GHd, svg.K4B8Y, path.MrYMx, path.K4B8Y, span.Ce1Y1c, svg.hmuWb, svg.wFCWne {
display: none;
svg.K4B8Y,
div.Xb9hP,
div.hBW7Hb,
div.WIdY2d,
span.Lw7GHd,
svg.K4B8Y,
path.MrYMx,
path.K4B8Y,
span.Ce1Y1c,
svg.hmuWb,
svg.wFCWne {
display: none;
}

header#atViewHeader {
display: none !important;
display: none !important;
}

div > header {
display: none !important;
display: none !important;
}
62 changes: 34 additions & 28 deletions docs/site/assets/js/cldrsite.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ const { ref } = Vue;

// site management

let myPath = window.location.pathname.slice(1) || "index.html"
let myPath = window.location.pathname.slice(1) || "index.html";
if (!/\.html/.test(myPath)) {
myPath = `${myPath}.html`; // cloudflare likes to drop the .html
myPath = `${myPath}.html`; // cloudflare likes to drop the .html
}

/** replace a/b/c.md with a/b */
Expand Down Expand Up @@ -143,18 +143,19 @@ const app = Vue.createApp(
if (!this.tree?.value) return [];
let dirForPage = this.ourDir;
if (this.tree.value.allIndexes.indexOf(this.mdPath) != -1) {
const dirPages = Object.entries(this.tree?.value?.allDirs)
.filter(([k, {index}]) => index == this.mdPath)[0];
if (dirPages) {
// our page is an index -so, show the subpages instead of the siblings.
dirForPage = dirPages[0]; // the adjusted index
} else {
return []; // no sibling pages;
}
const dirPages = Object.entries(this.tree?.value?.allDirs).filter(
([k, { index }]) => index == this.mdPath
)[0];
if (dirPages) {
// our page is an index -so, show the subpages instead of the siblings.
dirForPage = dirPages[0]; // the adjusted index
} else {
return []; // no sibling pages
return []; // no sibling pages;
}
let thePages = this.tree?.value?.allDirs[dirForPage].pages ?? [];
} else {
return []; // no sibling pages
}
let thePages = this.tree?.value?.allDirs[dirForPage].pages ?? [];
if (dirForPage === "") {
thePages = [...thePages, ...this.tree?.value?.allDirs["index"].pages];
}
Expand All @@ -167,48 +168,51 @@ const app = Vue.createApp(
title: this.tree.value.title[path] ?? path,
}))
.sort((a, b) => c.compare(a.title, b.title))
.filter(({html}) => html != t.path); // skip showing the index page in the subpage list
.filter(({ html }) => html != t.path); // skip showing the index page in the subpage list
},
ancestorPages() {
const pages = [];
// if we are not loaded, or if we're at the root, then exit
if (!this.tree?.value || !this.path || this.path == 'index.html') return pages;
if (!this.tree?.value || !this.path || this.path == "index.html")
return pages;
// traverse
let path = this.path;
do {
// calculate the immediate ancestor
const pathMd = html2md(path);
const dir = path2dir(path);
const nextIndex = this.tree.value.allDirs[dir].index || 'index.md'; // falls back to top
const nextIndex = this.tree.value.allDirs[dir].index || "index.md"; // falls back to top
const nextIndexHtml = md2html(nextIndex);
const nextIndexTitle = this.tree.value.title[nextIndex];
// prepend
pages.push({
href: '/'+nextIndexHtml,
href: "/" + nextIndexHtml,
title: nextIndexTitle,
});
if (nextIndexHtml == path) {
console.error('Loop detected from ' + this.path);
path = 'index.html'; // exit
console.error("Loop detected from " + this.path);
path = "index.html"; // exit
}
path = nextIndexHtml;
} while(path && path != 'index.html'); // we iterate over 'path', so html
} while (path && path != "index.html"); // we iterate over 'path', so html
pages.reverse();
return pages;
}
},
},
template: `<div>
<div class='status' v-if="status">{{ status }}</div>
<div class='status' v-if="!tree">Loading…</div>
template: `
<div>
<div class='status' v-if="status">{{ status }}</div>
<div class='status' v-if="!tree">Loading…</div>
<a class="icon" href="http://www.unicode.org/"> <img border="0"
src="/assets/img/logo60s2.gif" alt="[Unicode]" width="34"
height="33"></a>&nbsp;&nbsp;
<span class="ancestor" v-for="ancestor of ancestorPages" :key="ancestor.href">
<a class="uplink" v-bind:href="ancestor.href">{{ ancestor.title }}</a><span class="crumb">❱</span>
</span>
<span class="title"> {{ ourTitle }} </span>
<span class="ancestor" v-for="ancestor of ancestorPages" :key="ancestor.href">
<a class="uplink" v-bind:href="ancestor.href">{{ ancestor.title }}</a><span class="crumb">❱</span>
</span>
<div v-if="!siblingPages || !siblingPages.length" class="title"> {{ ourTitle }} </div>
<div v-else class="title"><span class="hamburger">≡</span>
{{ ourTitle }}
<ul class="subpages">
<li v-for="subpage of siblingPages" :key="subpage.path">
<span v-if="path == subpage.html">
Expand All @@ -219,6 +223,8 @@ const app = Vue.createApp(
</a>
</li>
</ul>
</div>
</div>`,
},
{
Expand Down

0 comments on commit ed107a8

Please sign in to comment.