Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CLDR-17803 site: popup menu for subpages #4027

Merged
merged 3 commits into from
Sep 9, 2024
Merged

CLDR-17803 site: popup menu for subpages #4027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da215f4
CLDR-17803 site: popup menu for subpages
srl295 Sep 6, 2024
4d7bbd8
CLDR-17803 merge from main
srl295 Sep 6, 2024
3110117
CLDR-17803 site: run prettier, remove dead code
srl295 Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 70 additions & 48 deletions docs/site/assets/css/page.css
View file
Open in desktop
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
Open in desktop
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
Loading