Template:18PlusDisclaimer: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 <templatestyles src="Template:18PlusDisclaimer/styles.css" />
-<!-- the overlay itself -->
 {{#tag:html|
-   <div id="ageDisclaimerOverlay" class="age-overlay" style="display:none">
+   <div id="ageDisclaimerOverlay" class="age-overlay" role="dialog" aria-modal="true" aria-labelledby="ageDisclaimerTitle" aria-describedby="ageDisclaimerDesc">
-     <div class="age-blur"></div>
+     <div class="age-blur" aria-hidden="true"></div>
-     <div class="age-popup slide-down">
+     <div class="age-popup" tabindex="-1">
-       <h2>You must be 18+ to view this content</h2>
+       <h2 id="ageDisclaimerTitle">You must be 18+ to view this content</h2>
-       <p>This page may contain content intended for mature audiences only.<br>Please confirm that you are 18 years of age or older.</p>
+       <p id="ageDisclaimerDesc">
+        This page may contain content intended for mature audiences only.<br>
+        Please confirm that you are 18 years of age or older.
+      </p>
        <div class="btn-group">
-         <button id="acceptDisclaimer">I am 18 or older</button>
+         <button id="acceptDisclaimer" type="button">I am 18 or older</button>
-         <button id="declineDisclaimer">Leave this page</button>
+         <button id="declineDisclaimer" type="button">Leave this page</button>
        </div>
      </div>
    </div>
-}}
-<!-- the behavior, loaded safely as JS -->
+  <script>
-{{#tag:script|
+   (function() {
-   (function($, mw) {
+     // cookie helpers
-     // once mw.user and mw.util are available…
+    function setCookie(name, value, days) {
-     mw.loader.using(['mediawiki.user', 'mediawiki.util']).then(function() {
+      const expires = new Date(Date.now() + days * 864e5).toUTCString();
-       var overlay          = $('#ageDisclaimerOverlay'),
+      document.cookie = name + "=" + encodeURIComponent(value) + "; expires=" + expires + "; path=/";
-          popup            = overlay.find('.age-popup'),
+     }
-          isAnon           = mw.user.isAnon(),
+    function getCookie(name) {
-          cookieConfirmed  = document.cookie.split('; ').some(function(c){ return c.trim()==='ageConfirmed=true'; });
+      const match = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]*)'));
+      return match ? decodeURIComponent(match[1]) : null;
+    }
+    document.addEventListener("DOMContentLoaded", function() {
+       const overlay = document.getElementById("ageDisclaimerOverlay");
+      const popup   = overlay.querySelector(".age-popup");
+      const body    = document.body;
+      const accept  = document.getElementById("acceptDisclaimer");
+      const decline = document.getElementById("declineDisclaimer");
-       // show to everyone on first visit, and force-show again for logged‑in users
+       // show overlay if not yet confirmed
-       if (!cookieConfirmed || !isAnon) {
+       if (!getCookie("ageConfirmed")) {
-         overlay.css('display','flex');
+         overlay.classList.add("active");
-         $('body').css('overflow','hidden');
+         body.style.overflow = "hidden";
-         // trigger slide‑in
+         popup.focus();
-        requestAnimationFrame(function(){ popup.addClass('slide-active'); });
        }
-       $('#acceptDisclaimer').on('click', function() {
+       accept.addEventListener("click", function() {
-         // set 30‑day cookie
+         setCookie("ageConfirmed", "true", 30);
-        document.cookie = 'ageConfirmed=true;max-age=' + (30*24*60*60) + ';path=/';
+         overlay.classList.remove("active");
-         overlay.hide();
+         body.style.overflow = "";
-         $('body').css('overflow','');
        });
-       $('#declineDisclaimer').on('click', function() {
+       decline.addEventListener("click", function() {
-         window.location.href = mw.util.getUrl('Main_Page');
+        // redirect to Main_Page via mw.config
+        const url = mw.config.get("wgServer") + mw.config.get("wgArticlePath").replace("$1","Main_Page");
+         window.location.href = url;
+      });
+      // keep focus inside popup
+      document.addEventListener("focusin", function(e) {
+        if (overlay.classList.contains("active") && !overlay.contains(e.target)) {
+          e.stopPropagation();
+          popup.focus();
+        }
        });
      });
-   })(jQuery, mw);
+   })();
-| type="text/javascript" }}
+  </script>
+}}

Revision as of 11:07, 19 April 2025