Skip to main content

pop-frame-title-standard.tmpl

This template produces the title link element that appears in the header/title bar of popup windows (popups and popovers).

Pathtemplate/include/pop-frame-title-standard.tmpl
LanguageHTML (JavaScript transclude template)
Lines6

Read this when Use this page when tracing the HTML/Pandoc templates and include fragments that shape rendered gwern.net pages around pop-frame-title-standard.tmpl.

Overview​

This template produces the title link element that appears in the header/title bar of popup windows (popups and popovers). 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 rendered client-side by the frontend JavaScript popup system: extracts.js (and extracts-content.js/extracts-annotations.js) call Transclude.fillTemplateNamed("pop-frame-title-standard", ...) to fill it. The .tmpl files under template/include/ are compiled into js/transclude-templates-GENERATED.js by build/build_unified_assets.php, ensuring 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 ("new" on desktop, "current" on mobile) for the tooltip
tabOrWindowStringText ("window" on desktop, "tab" on mobile) for the tooltip
linkTargetStringHTML target attribute (_blank on desktop, _self on mobile)

Output Structure​

The template generates a single anchor element:

<a
  class="popframe-title-link"
  href="[URL]"
  title="Open <[URL]> in [new/current] [window/tab]."
  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 [new/current] [window/tab]."
  • URL: The full destination URL is included for transparency
  • Which tab: Either "new" (desktop, with _blank) or "current" (mobile, with _self)
  • Tab or window: "window" on desktop, "tab" on mobile
  • 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/popover 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.); popFrameTitleLinkHref/popFrameTitle are supplied by the caller (e.g. Extracts.standardPopFrameTitleElementForTarget)
  • Device type: linkTarget, whichTab, and tabOrWindow come from Transclude.standardTemplateFillContext in transclude.js, which switches on GW.isMobile() (_self/"current"/"tab" on mobile, _blank/"new"/"window" on desktop)

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