CLDR-17934 user-visible sitemap

- add a popup site map
unicode-org · Sep 13, 2024 · 39e62fb · 39e62fb
1 parent 45e1059
commit 39e62fb
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 20 deletions.
diff --git a/docs/site/assets/css/page.css b/docs/site/assets/css/page.css
@@ -40,21 +40,50 @@ header .nav a.uplink {
   color: white;
 }
 
-header .nav div.subpages {
+div.showmap {
+  position: absolute;
+  right: 1em;
+  color: white;
+}
+
+div.showmap:hover {
+  text-decoration: underline;
+  color: white;
+}
+
+header .nav div.subpages,
+div.sitemap {
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
   background-color: white;
-  position: absolute;
+  position: fixed;
   color: black;
   padding: 0.5em;
 }
 
-div.subpages .hamburger {
-  left: 1em;
+div.submap {
+  margin-left: 1em;
+  border-left: 1px solid gray;
+  padding-left: 0.5em;
+}
+
+div.subpages > .hamburger,
+div.sitemap .hamburger {
+  position: absolute;
+  right: 1em;
   top: 1em;
   color: darkslateblue;
 }
 
+div.sitemap {
+  height: 90%;
+}
+
+div.sitemap > div.submap {
+  height: 95%;
+  overflow-y: scroll;
+}
+
 .subpages .hamburger:hover {
   color: gray;
 }

diff --git a/docs/site/assets/js/cldrsite.js b/docs/site/assets/js/cldrsite.js
@@ -51,20 +51,122 @@ async function siteData() {
   return j;
 }
 
+const AncestorPages = {
+  props: ["ancestorPages"],
+  setup() {},
+  template: `
+       <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>
+`,
+};
+
+const SubPagesPopup = {
+  props: {
+    children: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["hide"], // when user clicks hide
+  setup() {},
+  methods: {
+    hide() {
+      this.$emit("hide");
+    },
+  },
+  template: `
+          <div class="subpages">
+          <span class="hamburger" @click="hide()">✕</span>
+          <ul class="subpages" >
+              <li v-for="subpage of children" :key="subpage.path">
+                  <a v-bind:href="subpage.href">
+                      {{ subpage.title }}
+                       <span class="hamburger" v-if="subpage.children">❱</span>
+                  </a>
+              </li>
+          </ul>
+        </div>
+`,
+};
+
+const SubMap = {
+  name: "SubMap",
+  props: {
+    usermap: {
+      type: Object,
+      required: true,
+    },
+    path: String,
+  },
+  setup() {},
+  computed: {
+    title() {
+      return this.usermap[this.path].title;
+    },
+    children() {
+      return this.usermap[this.path].children || [];
+    },
+    href() {
+      return path2url(this.path);
+    },
+  },
+  template: `
+    <div class="submap">
+      <a v-bind:href="href" v-bind:title="path">{{title}}</a>
+      <SubMap v-for="child in children" :key="child" :usermap="usermap" :path="child" />
+    </div>
+  `,
+};
+
+const SiteMap = {
+  props: {
+    tree: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    SubMap,
+  },
+  emits: ["hide"],
+  setup() {},
+  methods: {
+    hide() {
+      this.$emit("hide");
+    },
+  },
+  template: `
+    <div class="sitemap">
+          <span class="hamburger" @click="hide()">✕</span>
+          <b>Site Map</b><hr/>
+          <SubMap :usermap="tree.value.usermap" path="index"/>
+    </div>
+  `,
+};
+
 const app = Vue.createApp(
   {
+    components: {
+      AncestorPages,
+      SubPagesPopup,
+      SiteMap,
+    },
     setup(props) {
       // the tree.json data
       const tree = ref({});
       // loading status for tree.json
       const status = ref(null);
       // is the popup menu shown?
       const popup = ref(false);
+      // is the site map shown?
+      const showmap = ref(false);
 
       return {
         tree,
         status,
         popup,
+        showmap,
       };
     },
     mounted() {
@@ -157,27 +259,19 @@ const app = Vue.createApp(
 					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>
+       <AncestorPages :ancestorPages="ancestorPages"/>
+
        <div v-if="!children || !children.length" class="title"> {{ ourTitle }} </div>
-       <div v-else class="title"  @mouseover="popup = true"><span class="hamburger" @click="popup = !popup">≡</span>
-            {{ ourTitle }}
 
-        <div class="subpages" v-if="popup">
-          <span class="hamburger" @click="popup=false">✕</span>
-          <ul class="subpages" >
-              <li v-for="subpage of children" :key="subpage.path">
-                  <a v-bind:href="subpage.href">
-                      {{ subpage.title }}
-                       <span class="hamburger" v-if="subpage.children">❱</span>
-                  </a>
-              </li>
-          </ul>
-        </div>
+       <div v-else class="title"  @mouseover="popup = true"><span class="hamburger" @click="showmap=false,popup = !popup">≡</span>
+
+            {{ ourTitle }}
 
+        <SubPagesPopup v-if="popup && !showmap" @hide="popup = false" :children="children"/>
 
       </div>
+        <div class="showmap" v-if="!showmap" @click="popup=false,showmap = true">Site Map</div>
+        <SiteMap v-if="tree && showmap" :tree="tree" @hide="showmap = popup = false"  />
 
     </div>`,
   },