document.html

{% extends "wiki/base.html" %}
{% block title %}{{ page_title(document.title + seo_parent_title) }}{% endblock %}

{% from "wiki/includes/document_macros.html" import build_document_crumbs, get_document_quick_links, get_document_subnav, document_watch, contributor_links with context %}
{% from "wiki/includes/buttons.html" import get_document_buttons with context %}
{% from "wiki/includes/approvals.html" import get_approvals_html with context %}

{% if fallback_reason == 'no_translation' %}
  {% set help_link = url('wiki.translate', document_path=document.slug, locale=document.locale)|urlparams(tolocale=request.LANGUAGE_CODE) %}
{% elif fallback_reason == 'translation_not_approved' %}
  {% set help_link = url('wiki.translate', document_path=document.parent.slug, locale=document.parent.locale)|urlparams(tolocale=request.LANGUAGE_CODE) %}
{% endif %}

{% set is_logged_in = request.user.is_authenticated() %}
{% set doc_abs_url = document.get_absolute_url() %}
{% set canonical = doc_abs_url | absolutify %}

{% set current_revision = document.current_revision %}
{% if (is_logged_in and current_revision) and (current_revision.needs_technical_review or current_revision.needs_editorial_review) %}
  {% set approvals_html = get_approvals_html(document, request.user) %}
{% endif %}

{% set nearest_zone = document.nearest_zone %}
{% set is_zone = nearest_zone %}
{% set is_zone_root = document.is_zone_root %}

{% set show_left = zone_subnav_html or quick_links_html or approvals_html %}

{% set buttons = get_document_buttons(document, help_link, other_translations) %}
{% set crumbs = build_document_crumbs(document) %}


{% set content_class = 'column-all' %}
{% if show_left %}
  {% set content_class = 'column-main' %}
{% endif %}

{% block robots_value %}
  {%- if document.is_experiment or fallback_reason or not document_html -%}
    noindex, nofollow
  {%- else -%}
    {{ super() }}
  {%- endif -%}
{% endblock %}

{% block bodyclass %}document {% if is_zone %}zone{% endif %} {% if is_zone_root %}zone-landing{% endif %}{% endblock %}
{% block body_attributes %}data-slug="{{ document.slug }}" contextmenu="edit-history-menu" data-search-url="{{ search_url }}"{% endblock body_attributes %}

{% block main_content_id %}document-main{% endblock %}

{% block site_css %}
    {{ super() }}
    {% if nearest_zone %}
      {% if nearest_zone.css_slug %}
        {% stylesheet 'zone-' + nearest_zone.css_slug %}
      {% else %}
        {% stylesheet 'zones' %}
      {% endif %}
    {% endif %}
{% endblock %}

{% block extrahead %}
  <link rel="dns-prefetch" href="https://interactive-examples.mdn.mozilla.net" pr="0.75" />
  <link rel="preconnect" href="https://interactive-examples.mdn.mozilla.net" pr="0.75" />

  <link rel="preload" href="https://interactive-examples.mdn.mozilla.net/js/codemirror-5-31-0.js" as="script" />
  <link rel="preload" href="https://interactive-examples.mdn.mozilla.net/js/editor-js.js" as="script" />

  <link rel="alternate" type="application/json" href="{{ url('wiki.json_slug', document.slug) | absolutify }}">
  <link rel="canonical" href="{{ canonical }}" >

  {% if other_translations %}
    {% for translation in other_translations %}
      <link rel="alternate" hreflang="{{ translation.locale }}" href="{{ translation.get_absolute_url() | absolutify }}" title="{{ translation.title }}">
    {% endfor %}
  {% endif %}

  <!-- document-specific social tags -->
  <meta property="og:title" content="{{ document.title }}">
  <meta property="og:url" content="{{ canonical }}">
  <meta name="twitter:url" content="{{ canonical }}">
  <meta name="twitter:title" content="{{ document.title }}">
  {% if seo_summary %}
  <meta property="og:description" content="{{ seo_summary }}">
  <meta name="description" content="{{ seo_summary }}">
  <meta name="twitter:description" content="{{ seo_summary }}">
  {% endif %}
{% endblock %}

{% block lang_switcher %}
  {% if (document.is_localizable or document.parent) and other_translations %}
    <form class="languages go" method="get" action="{{ wiki_url('Web') }}">
      <label for="language">{{ _('Other languages:') }}</label>
      <select id="language" class="wiki-l10n" name="next" dir="ltr">
        <option title="{{ get_locale_localized(document.locale) }}" data-locale="{{ document.locale }}" value="{{ doc_abs_url }}" selected>
          {{ document.language }} ({{ document.locale }})
        </option>
        {% for translation in other_translations %}
          <option title="{{ get_locale_localized(translation.locale) }}" data-locale="{{ document.locale }}" value="{{ translation.get_absolute_url() }}">
            {{ translation.language }} ({{ translation.locale }})
          </option>
        {%- endfor %}
      </select>
      <noscript><button type="submit">{{ _('Go') }}</button></noscript>
    </form>
  {% endif %}
{% endblock %}

{% block document_head %}
  <!-- heading -->
  <div id="wiki-document-head" class="document-head">
    <div class="center">
      <!-- action buttons -->
      <div class="document-actions">
        {{ buttons }}
      </div>

      <div class="document-title">
        {% if is_zone_root %}
          <!-- zone image -->
          <span class="zone-parent"></span>
        {% elif is_zone %}
          <!-- zone image, link to zone root -->
          <a class="zone-parent" href="{{ nearest_zone.document.get_absolute_url() }}">{{ nearest_zone.document.title }}</a>
        {% endif %}

        <h1>{{ document.title }}</h1>
      </div>
    </div>
  </div>
  {% if toc_html %}
  <div id="toc" class="toc">
    <div class="center">
      <div class="toc-head">{{ _("Jump to:") }}</div>
        <ol class="toc-links">
          {{ toc_html|safe }}
        </ol>
    </div>
  </div>
  {% endif %}
{% endblock%}

{% block content %}

    <div class="wiki-main-content" {% if not is_zone %}id="document-main"{% endif %}><div class="center">
      <!-- start the main content container -->
        <div id="wiki-column-container" class="{% if show_left %}wiki-left-present{% else %}wiki-left-closed wiki-left-none{% endif %}">

          <!-- content row with three strips -->
          <div class="column-container column-container-reverse">

            <!-- center: main article content -->
            <div id="wiki-content" class="{{ content_class }} wiki-column text-content">

              {% if settings.MAINTENANCE_MODE and render_raw_fallback %}
                <div id="doc-render-raw-fallback" class="warning">
                {% trans url='/maintenance-mode/' %}
                  This document has not yet been rendered, and cannot be
                  rendered while MDN is in <a href="{{ url }}">maintenance
                  mode</a>. Please check back when maintenance has concluded.
                {% endtrans %}
                </div>
              {% endif %}

              {% if is_logged_in and document_html %}
                {% if render_raw_fallback %}
                  <div id="doc-render-raw-fallback" class="warning">
                  {% trans url=doc_abs_url %}
                    This document is being rendered for the first time by the system.
                    Please <a href="{{ url }}">reload this page</a> in a few minutes
                    to see full content.
                  {% endtrans %}
                  </div>
                {% elif document.is_rendering_in_progress %}
                  <div id="doc-rendering-in-progress" class="warning">
                  {% trans url=doc_abs_url, started_at=document.render_started_at %}
                    An update to this document
                    <abbr title="{{ started_at }}">is currently in progress</abbr>.
                    If the content below seems stale or if something is missing,
                    please <a href="{{ url }}">reload this page</a> in a few minutes.
                  {% endtrans %}
                  </div>
                {% elif document.is_rendering_scheduled and not kumascript_errors %}
                  <div id="doc-rendering-scheduled" class="warning">
                  {% trans url=doc_abs_url, scheduled_at=document.render_scheduled_at %}
                    An update to this document
                    <abbr title="{{ scheduled_at }}">has been scheduled</abbr>.
                    If the content below seems stale or if something is missing,
                    please <a href="{{ url }}">reload this page</a> in a few minutes.
                  {% endtrans %}
                  </div>
                {% endif %}
              {% endif %}
              {% if document.is_experiment %}
                <div id="doc-experiment" class="warning">
                  {{ _("This is an experimental page.") }}
                </div>
              {% endif %}

              {% if kumascript_errors %}
                {% include 'wiki/includes/kumascript_errors.html' %}
              {% endif %}

              {% if document.parent_id and document.current_revision %}
                {% if document.current_revision.localization_in_progress %}
                  {% if not settings.MAINTENANCE_MODE and document.current_revision.translation_age >= 10 %}
                    <div class="overheadIndicator translationInProgress"><p>{% trans translate_url=document.get_edit_url() %}
                      This translation is incomplete. Please help <a href="{{ translate_url }}">translate this article</a> from English.
                    {% endtrans %}</p></div>
                  {% else %}
                    <div class="overheadIndicator translationInProgress"><p>
                      {{ _('This translation is in progress.') }}
                    </p></div>
                  {% endif %}
                {% endif %}
              {% endif %}
              {% if not settings.MAINTENANCE_MODE and fallback_reason %}
                <div id="doc-pending-fallback" class="warning">
                  <p><bdi>{% trans help_link=help_link, locale=settings.LOCALES[request.LANGUAGE_CODE].native, parent_language=document.language %}
                    Our volunteers haven't translated this article into <bdi>{{ locale }}</bdi> yet.
                    <a href="{{ help_link }}" rel="nofollow">Join us and help get the job done!</a><br>
                    You can also read the article in <a href="{{ doc_abs_url }}">{{ parent_language }}</a>.
                  {% endtrans %}</bdi></p>
                </div>
              {% endif %}

              <!-- just the article content -->
              <article id="wikiArticle">
                {% if not fallback_reason %}
                  {% if not document_html %}
                    {{ _("This article doesn't have any content yet.") }}
                  {% else %}
                    {{ body_html|safe }}
                  {% endif %}
                {% elif fallback_reason == 'no_translation' %}
                  {{ body_html|safe }}
                {% elif fallback_reason == 'translation_not_approved' %}
                  {{ document.parent.html|safe }}
                {% else %}
                  {{ _("This article doesn't have approved content yet.") }}
                {% endif %}
              </article>

              <!-- contributors -->
              <div class="wiki-block contributors">
                <h2 class="offscreen">{{ _('Document Tags and Contributors') }}</h2>
                {% set tags = document.all_tags_name %}
                {% include "wiki/includes/document_tag.html" %}

                {% if has_contributors %}
                  <div class="contributors-sub">
                    <i aria-hidden="true" class="icon-group icon-fw"></i>&nbsp;<strong>{{ _('Contributors to this page:') }}</strong> {{ contributor_links(contributors) }}
                  </div>
                {% endif %}

                {% if current_revision.creator %}
                  <div class="contributors-sub">
                    <i aria-hidden="true" class="icon-clock-o icon-fw"></i>&nbsp;<strong>{{ _('Last updated by:') }}</strong>
                    <a href="{{ current_revision.creator.get_absolute_url() }}"
                       {%- if not current_revision.creator.is_active %} rel="nofollow"{% endif -%}
                       >{{ current_revision.creator }}</a>,
                    {{ datetimeformat(current_revision.created, format='datetime') }}
                  </div>
                {% endif %}
              </div>
            </div>

            {% if show_left %}
              <!-- quick links and zone subnav strip -->
              <div id="wiki-left" class="column-strip wiki-column">

                {% if not is_zone_root %}
                  <!-- crumbs -->
                  {{ crumbs }}
                {% endif %}

                {% if zone_subnav_html %}
                  <!-- zone subnav -->
                  {{ get_document_subnav(zone_subnav_html) }}
                {% endif %}

                {% if quick_links_html %}
                  <!-- quick links -->
                  {{ get_document_quick_links(quick_links_html) }}
                {% endif %}

                <!-- approvals -->
                {% if approvals_html %}
                  {{ approvals_html }}
                {% endif %}

              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div> <!-- ends "main-content" -->

    {% if settings.NEWSLETTER and settings.NEWSLETTER_ARTICLE %}
      <div class="newsletter-box">
        {% include "includes/newsletter.html" %}
      </div>
    {% endif %}

  <menu type="context" id="edit-history-menu">
    <menuitem data-action="{{ document.get_edit_url() }}" label="{{_('Edit page')}}"></menuitem>
    <menuitem data-action="{{ url('wiki.document_revisions', document.slug) }}" label="{{_('View page history')}}"></menuitem>
  </menu>
{% endblock %}

{% block js %}

  {% if waffle.flag('section_edit') %}
    <script>
        (function($) {
            $('#wikiArticle').children('h2[id]').each(function() {
                var id = $(this).attr('id');
                var href = '{{ document.get_edit_url() }}#' + id;

                $('<a>').attr({
                    href: href,
                    'class': 'button section-edit only-icon',
                    'rel': 'nofollow, noindex'
                })
                .append($('<i aria-hidden="true" class="icon-pencil"></i>'))
                .append($('<span>'))
                .find('span')
                .text(gettext('Edit'))
                .end()
                .on('click', function(e) {
                    e.preventDefault();

                    mdn.analytics.trackEvent({
                        category: 'Section Edit',
                        action: id
                    }, function() {
                        window.location = href;
                    });
                })
                .appendTo(this);
            });
        })(jQuery);
    </script>
  {% endif %}

  {% if waffle.flag('sg_task_completion') %}
    {% javascript 'task-completion' %}
  {% endif %}

  {% if settings.NEWSLETTER and settings.NEWSLETTER_ARTICLE %}
    {% javascript 'newsletter' %}
  {% endif %}

{% endblock %}