[css-tv] Add obsoletion notice

xfq · web-flow · commit c631566ee7d0 · 2018-09-18T21:30:26.000+08:00
diff --git a/css-tv/Overview.html b/css-tv/Overview.html
@@ -34,8 +34,7 @@
     .del { text-decoration: line-through; }
     img.head { width:72px; height:48px }
   </style>
-  <link href="https://www.w3.org/StyleSheets/TR/W3C-WG-NOTE.css"
-   rel="stylesheet" type="text/css" /></head>
+  <link href="https://www.w3.org/StyleSheets/TR/W3C-RNOTE" rel="stylesheet"></head>
 
  <body>
   <div class="head"> <!--begin-logo-->
@@ -104,6 +103,7 @@ <h2 class="no-num no-toc">Abstract</h2>
   <p>This specification defines a subset of Cascading Style Sheets Level 2
    and CSS3 module: Color specifications tailored to the needs and
    constraints of TV devices.</p>
+  <p class="mtb"><strong>This profile is obsolete. Please see the latest <a href="https://www.w3.org/TR/CSS/">CSS Snapshot</a> for the specifications that make up CSS.</strong></p>
   <!-- **************************** -->
   <!--      STATUS of DOCUMENT      -->
   <!-- **************************** -->
@@ -2047,8 +2047,65 @@ <h2 class="no-num" id="section-references">Appendix A. Normative References</h2>
    <!---->
   </dl>
   <!--end-normative-->
- </body>
-</html>
+<script src="https://www.w3.org/scripts/TR/fixup.js"></script>
+<script>
+var ESCAPEKEY = 27;
+/* Deprecation warning */
+document.body.classList.add("outdated-spec");
+var node = document.createElement("p");
+node.classList.add("outdated-warning");
+node.tabIndex = -1;
+node.setAttribute("role", "dialog");
+node.setAttribute("aria-modal", "true");
+node.setAttribute("aria-labelledby", "outdatedWarning");
+
+var frag = document.createDocumentFragment();
+var heading = document.createElement("strong");
+heading.id = "outdatedWarning";
+heading.innerHTML = "Retired NOTE";
+frag.appendChild(heading);
+
+var warning = document.createElement("span");
+warning.innerText = "The CSS Working Group has discontinued work on this document.";
+frag.appendChild(warning);
+
+var button = document.createElement("button");
+var handler = makeClickHandler(node);
+button.addEventListener("click", handler);
+button.innerHTML = "&#9662; collapse";
+frag.appendChild(button);
+node.appendChild(frag);
+
+function makeClickHandler(node) {
+  var isOpen = true;
+  return function collapseWarning(event) {
+    var button = event.target;
+    isOpen = !isOpen;
+    node.classList.toggle("outdated-collapsed");
+    document.body.classList.toggle("outdated-spec");
+    button.innerText = (isOpen) ? '\u25BE collapse' : '\u25B4 expand';
+  }
+}
+
+document.body.appendChild(node);
+
+button.focus();
+window.onkeydown = function (event) {
+  var isCollapsed = node.classList.contains("outdated-collapsed");
+  if (event.keyCode === ESCAPEKEY && !isCollapsed) {
+    button.click();
+  }
+}
+
+document.addEventListener("focus", function(event) {
+  var isCollapsed = node.classList.contains("outdated-collapsed");
+  var containsTarget = node.contains(event.target);
+  if (!isCollapsed && !containsTarget) {
+    event.stopPropagation();
+    node.focus();
+  }
+}, true); // use capture to enable event delegation as focus doesn't bubble up
+</script></body></html>
 <!-- Keep this comment at the end of the file
 Local variables:
 mode: sgml
