tutorial.html

{% extends "v2-base.html" %}
{% load i18n %}
{% load toc from templatefilters %}

{% get_current_language as LANGUAGE_CODE %}

{% block headauthor %}{{ tut.author.given_name }} {{ tut.author.family_name }} - {{ tut.author.email }}{% endblock %}
{% block headtitle %}{{ tut.title|safe }}{% if tut.subtitle %}: {{tut.subtitle|safe}}{% endif %}{% endblock %}

{% block body %}

  <section class="title">

    {% if redirect_from_locale %}
    <section class="redirect_notification error-block" lang="{{ redirect_from_locale.lang }}">
      <p>{{ redirect_from_locale.msg }}</p>
    </section>
    {% endif %}

    <section class="title-text container">
      {% if tut %}
      <h1>{{ tut.title|safe }}</h1>
      {% if tut.subtitle %}<h2>{{tut.subtitle|safe}}</h2>{% endif %}
      {% elif page_title %}
      <h1>{{ page_title }}</h1>
      {% endif %}

      <a href="/{{LANGUAGE_CODE}}/" class="watermark">HTML5 Rocks</a>
    </section>
  </section>

  <article class="content-wrapper{% if hide_toc != None %} wide{% endif %}">

    <section class="container">

      {% if hide_toc == None %}

      <div class="article-meta" id="article-meta">
        <nav class="toc">
          <h1>{% trans "Table of Contents" %}</h1>

          {% toc %}
        </nav>

        <aside class="localizations">
          <h1>{% trans "Localizations" %}</h1>
          <ul>
            {% if localizations %}
              {% for l in localizations %}
              <li><a href="{{ l.path }}">{{ l.lang }}</a></li>
              {% endfor %}
              <li><a href="https://github.com/html5rocks/www.html5rocks.com/blob/master/CONTRIBUTING.md">Contribute another</a></li>
            {% else %}
              <li><a href="https://github.com/html5rocks/www.html5rocks.com/blob/master/CONTRIBUTING.md">Contribute one</a></li>
            {% endif %}
          </ul>
        </aside>
      </div>
      {% endif %}

      <div class="content" id="article-content">

        <section class="byline">

          <div class="byline-content">
            {% if tut %}
            <section class="author-images">
              <a href="/profiles/#{{ tut.author.key.name }}">
                <img src="/static/images/profiles/{{ tut.author.key.name }}.png" itemprop="photo" alt="{{ tut.author.given_name }} {{ tut.author.family_name }}" title="{{ tut.author.given_name }} {{ tut.author.family_name }}">
              </a>

              {% if tut.second_author %}
                <a href="/profiles/#{{ tut.second_author.key.name }}">
                  <img src="/static/images/profiles/{{ tut.second_author.key.name }}.png" itemprop="photo" alt="{{ tut.second_author.given_name }} {{ tut.second_author.family_name }}" title="{{ tut.second_author.given_name }} {{ tut.second_author.family_name }}">
                </a>
              {% endif %}
            </section>

            <section class="meta">
              <div class="authors">
                <strong>{% trans "By" %}</strong> <a href="/profiles/#{{ tut.author.key.name }}">{{ tut.author.given_name }} {{ tut.author.family_name }}</a>
                {% if tut.second_author %}
                  and <a href="/profiles/#{{ tut.second_author.key.name }}">{{ tut.second_author.given_name }} {{ tut.second_author.family_name }}</a>
                {% endif %}
              </div>

              {% block translator %}{% endblock %}

              <div class="date">
                <time pubdate><strong>{% blocktrans %}Published{% endblocktrans %}:</strong> {{ tut.publication_date|date:"F jS, Y"}}</time>
                {% if tut.update_date %}
                <time class="updated"><strong>{% blocktrans %}Updated{% endblocktrans %}:</strong> {{ tut.update_date|date:"F jS, Y"}}</time>{% endif %}
                <span><strong>Comments:</strong> <a href="#disqus_thread" class="load-comments" data-disqus-identifier="{{ disqus_url }}">0</a></span>
              </div>

              <div id="notcompatible" class="hidden">
                Your browser may not support the functionality in this article.
              </div>
            </section>
            <div class="clear"></div>

            {% endif %}
          </div>
        </section>

        {% block content %}{% endblock %}
      </div>
    </section>
  </article>

  {% if tut %}
  <section class="disqus pattern-bg-lighter">

    <div id="disqus" class="container">

      <h2>{% trans "Comments" %}</h2>

      <div id="disqus_thread">

        <a href="#disqus_thread" class="load-comments" data-disqus-identifier="{{ disqus_url }}">0</a>

      </div>
    </div>

    <noscript>
      <p class="center">
        <strong>
          <a href="https://disqus.com/?ref_noscript">{% trans "Please enable JavaScript to view the comments powered by Disqus." %}</a>
        </strong>
      </p>
    </noscript>

    <script>

      var disqus_shortname = 'html5rocks';
      var disqus_identifier = '{{disqus_url}}';
      var disqus_url = '{{disqus_url}}';
      var disqus_developer = {% if not prod %}1{% else %}0{% endif %};

      var disqus_config = function () {
        var funky_language_code_mapping = {
          'de': 'de_inf',
          'es': 'es_ES',
          'pt': 'pt_EU',
          'sr': 'sr_CYRL',
          'sv': 'sv_SE',
          'zh': 'zh_HANT'
        };
        this.language = funky_language_code_mapping['{{LANGUAGE_CODE}}'] ||
                        '{{LANGUAGE_CODE}}';

        this.callbacks.onReady = [ function () {
                                      try {
                                        ga('send', 'event', 'View comments');
                                      } catch(err){}
                                   } ];
        this.callbacks.onNewComment = [ function (comment) {
                                          try {
                                            ga('send', 'event', 'Commented');
                                          } catch(err){}
                                        } ];
      };

      window.addEventListener('load', function(e) {

        var c = document.createElement('script');
        c.type = 'text/javascript';
        c.src = 'https://' + disqus_shortname + '.disqus.com/count.js';
        c.async = true;

        var s = document.getElementsByTagName('script')[0], sp = s.parentNode;
        sp.insertBefore(c, s);

        if (window.location.hash === '#disqus_thread')
          loadComments();

      }, false);

      var disqus_loaded = false;
      function loadComments() {

        if (disqus_loaded)
          return;

        disqus_loaded = true;

        ga('send', 'event', 'Interactions', 'Comments', 'Comments Loaded');

        var s = document.getElementsByTagName('script')[0], sp = s.parentNode;
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;

        var disqusContainer = document.getElementById('disqus');
        disqusContainer.classList.add('active');

        dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
        sp.insertBefore(dsq, s);
      }

      function outgoing(url) {
        try {
          ga('send', 'event', 'Outbound Links' , url);
        } catch(err){}
      }
      // Open external links (also that don't have a target defined) in a new tab.
      var externLinks = document.querySelectorAll('article.tutorial a[href^="http"]:not([target])');
      for(var i = 0, a; a = externLinks[i]; ++i) {
        a.target = '_blank';
        a.addEventListener('click', new Function('outgoing(' + '"' + a.href.replace(/.*?:\/\//g, "") + '"' + ');'));
      }

      var loadCommentsButtons = document.querySelectorAll('.load-comments');
      for(var l = 0; l < loadCommentsButtons.length; l++)
        loadCommentsButtons[l].addEventListener('click', loadComments);

    </script>
  </section>
  {% else %}
  <div class="padder"></div>
  {% endif %}

  <footer>
    <div class="container">

      {% if tut %}
        <h1>{% trans "Next steps" %}</h2>

        {% block relatedreading %}{% endblock %}

        <aside class="panel share">
          <h2>{% trans "Share" %}</h2>
          <style>
            aside.share.native .android { display: inline-block !important;
            background-image: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_share_white_36px.svg) !important;
            background-size: 48px 48px !important;
             background-position: 0, 0 !important; }
          </style>
          <a href="https://twitter.com/share?url={{ disqus_url }}&text={{ tut.title }}&lang={{ LANGUAGE_CODE }}&via=ChromiumDev&related=ChromiumDev" class="android" style="display: none;">Share</a>
          <a href="https://twitter.com/share?url={{ disqus_url }}&text={{ tut.title }}&lang={{ LANGUAGE_CODE }}&via=ChromiumDev&related=ChromiumDev" class="twitter" target="_blank">Twitter</a>
          <a href="https://www.facebook.com/sharer/sharer.php?u={{ disqus_url}}" class="facebook" target="_blank">Facebook</a>
          <a href="https://plus.google.com/share?url={{ disqus_url }}" class="gplus" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Google+</a>
        </aside>

        <aside class="panel rss">
          <h2>{% trans "Subscribe" %}</h2>
          <p>{% blocktrans %}Enjoyed this article? Grab the <a href="http://feeds.feedburner.com/html5rocks">RSS feed</a> and stay up-to-date.{% endblocktrans %}</p>
        </aside>

      {% endif %}

      <p class="licensing">
      {% blocktrans %}
        Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>, the content of this page is licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>, and code samples are licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>.
      {% endblocktrans %}
      </p>

    </div>
  </footer>

  <script>
    window.isCompatible = function() {
      {% block iscompatible %}
      return null;
      {% endblock %}
    };
    
    if(navigator.share !== undefined) {
    document.addEventListener('DOMContentLoaded', e => {
      var shareBox = document.querySelector('aside.share');
      if(shareBox !== undefined) { shareBox.classList.toggle('native'); }
      
      var shareBtn = document.querySelector('aside.share a.android');
      shareBtn.addEventListener('click', clickEvent => {
        clickEvent.preventDefault();
        const title = "{{tut.title}}";
        const url = "{{disqus_url}}";
        navigator.share({title: title, text: url, url: url})
          .then(() => console.log('Successful share'),
           error => console.log('Error sharing:', error));
      });
    });
}

    if (isCompatible() === false) {
      document.getElementById('notcompatible').className = '';
    }

    function _prettyPrint() {
      if (typeof customPrettyPrintLanguage != 'undefined') {
        customPrettyPrintLanguage();
      }
      prettyPrint();
    }
  </script>
  <script async src="/static/js/prettify.min.js" onload="_prettyPrint()"></script>
  <!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MB3LRF');</script>
<!-- End Google Tag Manager -->

{% endblock %}