Add autopermalink toggle feature for HTML rendering

js/pretext_add_on.js

@@ -113,8 +113,44 @@ window.addEventListener("DOMContentLoaded", function() {
             copyPermalink(link);
         });
     });
+
+    if (typeof ptx_default_settings !== 'undefined' && ptx_default_settings.permalink_button) {
+        initPermalinkToggle();
+    }
 });
 
+function setPermalinkVisibility(visible) {
+    document.documentElement.classList.toggle('ptx-permalinks-hidden', !visible);
+}
+
+function initPermalinkToggle() {
+    const stored = localStorage.getItem('ptx_permalink_visible');
+    const initiallyVisible = stored === 'true';
+
+    setPermalinkVisibility(initiallyVisible);
+
+    const btn = document.getElementById('permalink-toggle-button');
+    if (!btn) return;
+
+    let permalinksVisible = initiallyVisible;
+    const enableLabel = btn.dataset.enableLabel;
+    const disableLabel = btn.dataset.disableLabel;
+    const initialLabel = initiallyVisible ? disableLabel : enableLabel;
+    btn.setAttribute('aria-label', initialLabel);
+    btn.title = initialLabel;
+    btn.querySelector('.icon').textContent = initiallyVisible ? 'link_off' : 'link';
+
+    btn.addEventListener('click', function() {
+        permalinksVisible = !permalinksVisible;
+        setPermalinkVisibility(permalinksVisible);
+        const label = permalinksVisible ? disableLabel : enableLabel;
+        btn.setAttribute('aria-label', label);
+        btn.title = label;
+        btn.querySelector('.icon').textContent = permalinksVisible ? 'link_off' : 'link';
+        localStorage.setItem('ptx_permalink_visible', String(permalinksVisible));
+    });
+}
+
 
 window.addEventListener("load",function(event) {
 

xsl/localizations/en-US.xml

@@ -333,6 +333,9 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <!-- The indicated portion will be localized.  "heading" might be   -->
     <!-- replaced by "description" if that is easier to translate.      -->
     <localization string-id='permalink-tooltip'>Copy heading and permalink for</localization>
+    <!-- Permalink toggle button in navbar -->
+    <localization string-id='permalink-enable'>Enable Permalinks</localization>
+    <localization string-id='permalink-disable'>Disable Permalinks</localization>
     <!-- Sage Cell evaluate button      -->
     <!-- eg, "Evaluate (Maxima)"        -->
     <!-- 2017-05-14: 'code' is obsolete -->

xsl/pretext-html.xsl

@@ -12102,6 +12102,36 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </button>
 </xsl:template>
 
+<xsl:template name="permalink-toggle-button">
+    <xsl:variable name="enable-label">
+        <xsl:apply-templates select="." mode="type-name">
+            <xsl:with-param name="string-id" select="'permalink-enable'"/>
+        </xsl:apply-templates>
+    </xsl:variable>
+    <xsl:variable name="disable-label">
+        <xsl:apply-templates select="." mode="type-name">
+            <xsl:with-param name="string-id" select="'permalink-disable'"/>
+        </xsl:apply-templates>
+    </xsl:variable>
+    <button id="permalink-toggle-button" class="permalink-toggle-button button">
+        <xsl:attribute name="title">
+            <xsl:value-of select="$enable-label"/>
+        </xsl:attribute>
+        <xsl:attribute name="aria-label">
+            <xsl:value-of select="$enable-label"/>
+        </xsl:attribute>
+        <xsl:attribute name="data-enable-label">
+            <xsl:value-of select="$enable-label"/>
+        </xsl:attribute>
+        <xsl:attribute name="data-disable-label">
+            <xsl:value-of select="$disable-label"/>
+        </xsl:attribute>
+        <xsl:call-template name="insert-symbol">
+            <xsl:with-param name="name" select="'link'"/>
+        </xsl:call-template>
+    </button>
+</xsl:template>
+
 <xsl:template name="embed-button">
     <button id="embed-button" class="embed-button button" title="Embed this page">
         <xsl:call-template name="insert-symbol">
@@ -12350,6 +12380,9 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
         <xsl:if test="$b-theme-has-darkmode">
             <xsl:call-template name="light-dark-button" />
         </xsl:if>
+        <xsl:if test="$b-has-permalink-button">
+            <xsl:call-template name="permalink-toggle-button" />
+        </xsl:if>
     </span>
 </xsl:template>
 
@@ -13865,9 +13898,27 @@ TODO:
 <xsl:template name="pretext-js">
     <xsl:choose>
         <xsl:when test="not($b-debug-react)">
+            <!-- Hide permalinks before JS runs when permalink button is enabled -->
+            <xsl:if test="$b-has-permalink-button">
+                <style>html.ptx-permalinks-hidden div.autopermalink { display: none; }</style>
+                <script>if (localStorage.getItem('ptx_permalink_visible') !== 'true') { document.documentElement.classList.add('ptx-permalinks-hidden'); }</script>
+            </xsl:if>
             <!-- condition first on toc present? -->
             <script src="{$html.js.dir}/jquery.min.js"></script>
             <script src="{$html.js.dir}/pretext.js"></script>
+            <script>
+                <xsl:text>var ptx_default_settings = {&#xa;</xsl:text>
+                <xsl:text>    permalink_button: </xsl:text>
+                <xsl:choose>
+                    <xsl:when test="$b-has-permalink-button">
+                        <xsl:text>true</xsl:text>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        <xsl:text>false</xsl:text>
+                    </xsl:otherwise>
+                </xsl:choose>
+                <xsl:text>&#xa;};</xsl:text>
+            </script>
             <script src="{$html.js.dir}/pretext_add_on.js?x=1"></script>
         </xsl:when>
         <xsl:when test="$b-debug-react-local">

xsl/publisher-variables.xsl

@@ -2779,6 +2779,8 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
 </xsl:variable>
 <xsl:variable name="b-has-embed-button" select="$embed-button = 'yes'"/>
 
+<xsl:variable name="b-has-permalink-button" select="boolean($publication/html/permalink-button)"/>
+
 
 <!--                            -->
 <!-- HTML Banner options        -->