This is an automated email from the ASF dual-hosted git repository. desruisseaux pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/sis-site.git
commit 96eb2fb4a9583cff058752063162545a34f0a469 Author: Martin Desruisseaux <[email protected]> AuthorDate: Fri May 13 18:56:16 2022 +0200 Table Of Content (TOC) highlights the viewed item in the main document. --- source/developer-guide/index.html | 3 +- .../fr/developer-guide/annexes/geoapi/Modules.html | 2 +- source/fr/developer-guide/index.html | 3 +- static/book/book.css | 92 +++++++++------------- static/book/toc.js | 31 ++++++++ 5 files changed, 75 insertions(+), 56 deletions(-) diff --git a/source/developer-guide/index.html b/source/developer-guide/index.html index d310cacd..14474e39 100644 --- a/source/developer-guide/index.html +++ b/source/developer-guide/index.html @@ -28,9 +28,10 @@ <title>Introduction to Apache SIS</title> <meta charset="UTF-8"/> <link rel="stylesheet" type="text/css" href="../book.css"/> + <script src="../toc.js">/* highlighter */</script> </head> <body> - <nav class="toc"> + <nav> <p>Table of content</p> <!-- TOC --> </nav> diff --git a/source/fr/developer-guide/annexes/geoapi/Modules.html b/source/fr/developer-guide/annexes/geoapi/Modules.html index 1bce5f30..4f5d9a73 100644 --- a/source/fr/developer-guide/annexes/geoapi/Modules.html +++ b/source/fr/developer-guide/annexes/geoapi/Modules.html @@ -60,7 +60,7 @@ d’où la nécessité de les copier. Les branches de développement de Apache <abbr>SIS</abbr> dépendent de ce module, mais cette dépendance est transformée en une dépendance vers le module <code>geoapi</code> - standard au moment de fusionner les branches avec la branch principale. + standard au moment de fusionner les branches avec la branche principale. </p></li> <li><p> <b><code>geoapi-conformance</code></b> — contient diff --git a/source/fr/developer-guide/index.html b/source/fr/developer-guide/index.html index 009d559d..db409317 100644 --- a/source/fr/developer-guide/index.html +++ b/source/fr/developer-guide/index.html @@ -28,9 +28,10 @@ <title>Introduction à Apache SIS</title> <meta charset="UTF-8"/> <link rel="stylesheet" type="text/css" href="../book.css"/> + <script src="../toc.js">/* highlighter */</script> </head> <body> - <nav class="toc"> + <nav> <p>Table des matières</p> <!-- TOC --> </nav> diff --git a/static/book/book.css b/static/book/book.css index a570fb1b..ede97015 100644 --- a/static/book/book.css +++ b/static/book/book.css @@ -1,91 +1,77 @@ /* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Licensed to the Apache Software Foundation (ASF) + * under one or more contributor license agreements. */ /* * Table of content, to be shown on the left side. - * main{left} should be at least equal to nav.toc{width}. + * main{left} should be at least equal to nav{width}. * We use <p> element for the "Table of content" title instead than <h1> * because we don't want those textes to be inserted in the auto-generated TOC. */ nav { - font-family: sans-serif; - line-height: 100%; - color: #006699; -} - -nav.toc { - background-color: #f7f8f9; - position: absolute; - overflow: auto; - top: 0; - bottom: 0; - left: 0; - max-width: 80%; - width: 20em; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 450px; + white-space: nowrap; + overflow: auto; + font-family: sans-serif; + font-size: smaller; + color: #1a5276; + background-color: #f8f9f9; + border-right: #cacfd2 1px solid; } main { - left: 20em; - right: 0; + position: fixed; + left: 450px; top: 0; + right: 0; bottom: 0; - position: fixed; overflow: auto; } nav a { + display: block; text-decoration: none; font-family: sans-serif; - font-size: small; - color: #006699; + color: #5d6d7e; + transition: all 50ms ease-in-out; } +nav a:focus, nav a:hover { + color: #154360; text-decoration: underline; } nav p { - font-size: large; - font-weight: bold; - margin-top: 9px; - margin-bottom: 6px; - margin-left: 6px; -} - -/* - * Table of content items. Note that fragments of TOC are repeated at the beginning - * of each chapter in the main body. Those fragments have a slightly different layout. - */ -ul.toc { - list-style-type: square; - margin-bottom: 30px; - padding-left: 21px; + font-size: large; + font-weight: bold; + padding-left: 15px; + padding-bottom: 4px; + margin-bottom: 6px; + border-bottom: #2471a3 1px solid; } -ul.toc ul { - list-style-type: square; - padding-left: 21px; +nav ul { + list-style-type: none; + padding-left: 15px; } -nav.toc ul.toc li { +nav ul li { margin-top: 3px; margin-bottom: 3px; } +nav li.active > a { + color: #154360; + font-weight: bolder; +} + /* * For the main body, we put a margin for almost everything except the elements to be centered. */ diff --git a/static/book/toc.js b/static/book/toc.js new file mode 100644 index 00000000..dcb76062 --- /dev/null +++ b/static/book/toc.js @@ -0,0 +1,31 @@ +/* + * Licensed to the Apache Software Foundation (ASF) + * under one or more contributor license agreements. + */ +window.addEventListener('DOMContentLoaded', () => { + + var lastVisibleId = null; + + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + const id = entry.target.getAttribute('id'); + if (entry.intersectionRatio > 0) { + if (lastVisibleId !== null) { + document.querySelector(`nav li a[href="#${lastVisibleId}"]`).parentElement.classList.remove('active'); + } + lastVisibleId = id; + var item = document.querySelector(`nav li a[href="#${id}"]`).parentElement; + item.classList.add('active'); + const bounds = item.getBoundingClientRect(); + if (bounds.top < 0 || bounds.bottom > window.innerHeight - 2) { + item.scrollIntoView(); + } + } + }); + }); + + // Track headers that have an `id` applied. + document.querySelectorAll(':is(h1,h2,h3,h4)[id]').forEach((section) => { + observer.observe(section); + }); +});
