Skip to main content

pop-frame-title-standard.tmpl

Path: template/include/pop-frame-title-standard.tmpl | Language: HTML5/Pandoc | Lines: ~5

Template for rendering the title bar of popup frames in the gwern.net popup system.

Overview​

This template produces the title link element that appears in the header/title bar of popup windows (popups and popins). It's a minimal template that creates a single anchor element linking to the popup's source content, with appropriate accessibility attributes and target behavior.

The template is part of gwern.net's sophisticated popup windowing system, which displays link content in floating frames without navigating away from the current page. The popup frame title serves as both a label for the popup content and a clickable link that allows users to open the full source page in a new tab or window.

This layout is generated by the frontend JavaScript popup system (popups.js and extracts.js) and rendered using the template engine to ensure consistent structure and accessibility attributes across all popup types (local content, annotations, links, etc.).

Template Variables​

VariableTypeDescription
popFrameTitleLinkHrefURLThe target URL for the title link (source of popup content)
popFrameTitleHTMLThe title text/content to display in the popup header
whichTabStringText description ("a new" or "this") for accessibility
tabOrWindowStringText ("tab" or "window") for accessibility tooltip
linkTargetStringHTML target attribute (_blank for new tab, _self for same window)

Output Structure​

The template generates a single anchor element:

<a
  class="popframe-title-link"
  href="[URL]"
  title="Open <[URL]> in [a new/this] [tab/window]."
  target="[_blank|_self]"
    >[Title Text]</a>

Key structural features:

  • Single anchor element: The entire template output is one <a> tag
  • Consistent class: Always uses popframe-title-link for styling/scripting hooks
  • Accessibility title: The title attribute provides clear description of link behavior
  • Configurable target: Can open in new tab (_blank) or same window (_self)
  • Template variable interpolation: Uses <{variable}> syntax for all dynamic content

Title Attribute Construction​

The title attribute is dynamically constructed for accessibility:

"Open <[URL]> in [a new/this] [tab/window]."
  • URL: The full destination URL is included for transparency
  • Which tab: Either "a new" (for _blank) or "this" (for _self)
  • Tab or window: Describes opening mechanism based on user's browser settings
  • Period: Sentence ends with period for proper screen reader parsing

This provides clear information to users about what will happen when they click the link, particularly important for keyboard navigation and screen reader users.

Integration with Popup System​

This template is used by:

  1. popups.js: Constructs popup frame HTML including title bar
  2. extracts.js: Coordinates popup/popin rendering and determines title content
  3. Content loaders: Various content type handlers that populate popFrameTitle variable

The popup system fills in the template variables based on:

  • Content type: Determines what the title should be (page title, link text, etc.)
  • User preferences: Sets linkTarget based on settings or content type
  • Context: Chooses whichTab/tabOrWindow text based on target setting

Styling and Behavior​

The popframe-title-link class enables:

  • CSS styling: Positioned in popup title bar, styled as header element
  • JavaScript hooks: Click handlers for popup management (may prevent default and focus existing popup)
  • Responsive layout: Title bar adapts to popup width
  • Interaction states: Hover, focus, and active states for accessibility

See Also​