gistfile1.mustache

{% extends "docs/base.html" %}

{% load markup doc_tags compress %}

{% block title %}{{topic}} · {{article}}{% endblock %}

{% block js %}
{{block.super}}
{% compress js %}
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    var aside_height = $(".aside").height();
    if(aside_height+300>=$(".article").height()) {
      return false;
    }
    var org_aside_top = $(".aside").offset().top;
    var foot_top = $(".footer").offset().top;
    var org_aside_bottom = org_aside_top + aside_height + 80;
    var ypos = 0;
    var t = $(".wrapper-inner").offset().top;
    $(window).scroll(function(){
      
      var aside_top = $(".aside").offset().top;
      var aside_parent_top = aside_top - t;
      var aside_bottom = aside_top + aside_height + 80;
      var aside_parent_bottom = aside_parent_top + aside_height + 80;

      if ($(window).scrollTop()==0) {
        $(".aside").removeAttr("style").removeClass("fixed-top fixed-bottom");
        return true;
      }

      // if scrolling up
      if (ypos>$(window).scrollTop()) {
        
        ypos = $(window).scrollTop();
        var sbottom = ypos + $(window).height();

        if (sbottom<=org_aside_bottom) {
          $(".aside").removeAttr("style").removeClass("fixed-top fixed-bottom");
          return true;
        }
        
        $(".aside").removeClass("fixed-top fixed-bottom").css({
          "position":"absolute",
          "top":aside_parent_top+"px",
          "right":"0px"
        });

        if (aside_height>$(window).height()) {
          if (ypos<=aside_top) {
            $(".aside").removeAttr("style").removeClass("fixed-bottom fixed-top").addClass("fixed-top");
          }
        } else {
          if (sbottom<=aside_bottom) {
            $(".aside").removeAttr("style").removeClass("fixed-top").addClass("fixed-bottom");
          }
        }
        
        
      } else {
        ypos = $(window).scrollTop();
        var sbottom = ypos + $(window).height();
        
        if (ypos<=org_aside_top) {
          $(".aside").removeAttr("style").removeClass("fixed-top fixed-bottom");
          return true;
        }
        
        // if the top of the window is scrolled past the aside top
        $(".aside").removeClass("fixed-top fixed-bottom").css({
          "position":"absolute",
          "top":aside_parent_top+"px",
          "right":"0px"
        });

        
        if (aside_height>$(window).height()) {
          if (sbottom>=aside_bottom) {
            if(aside_bottom>=foot_top) {
              // if the top of the window is scrolled past the aside top
              $(".aside").removeClass("fixed-top fixed-bottom").css({
                "position":"absolute",
                "top":(foot_top - aside_height - org_aside_top - 80)+"px",
                "right":"0px"
              });
            } else {
              $(".aside").removeAttr("style").removeClass("fixed-top fixed-bottom").addClass("fixed-bottom");
            }
          }
        } else {
          if (ypos>=aside_top) {
            if(aside_bottom>=foot_top) {
              // if the top of the window is scrolled past the aside top
              $(".aside").removeClass("fixed-top fixed-bottom").css({
                "position":"absolute",
                "top":(foot_top - aside_height - org_aside_top - 80)+"px",
                "right":"0px"
              });
            } else {
              $(".aside").removeAttr("style").removeClass("fixed-top fixed-bottom").addClass("fixed-top");
            }
          }
          
        }
        
      }

    });
  });
</script>
{% endcompress %}
{% endblock %}

{% block content %}
<div class="aside">
  <ul class="toc">
    <li>
      <div id="{{topic.slug}}" class="topic {% ifequal forloop.counter 3 %}last-topic{% endifequal %}">
      <h2 class="topic-title"><a href="{% url docs-topic topic.slug %}">{{topic}}</a></h2>
      <ul class="toc-articles">
        {% for article in topic.articles %}
        {% if user|can_see:article %}
        <li class="toc-article">
          <h3 class="article-title">
              <a href="{% url docs-article topic.slug article.slug %}">{{article}}</a>
          </h3>
          <ul class="toc-sections">
            {% for section in article.sections %}
            {% if user|can_see:section %}
            <li class="toc-section">
                <a href="{% url docs-article topic.slug article.slug %}#{{section.slug}}">{{section}}</a>
            </li>
            {% endif %}
            {% endfor %}
          </ul>
        </li>
        {% endif %}
        {% endfor %}
      </ul>
      <span class="tlp"></span>
      <span class="trp"></span>
      <span class="blp"></span>
      <span class="brp"></span>
      </div>
    </li>
  </ul>
  {% with user|next_article:article as next %}
  {% if next %}
  <a href="{% url docs-article topic.slug next.slug %}" class="next-section">
    <span class="label">Next Section...</span>
    <span class="article-title">{{next}}</span>
    <span class="tlp"></span>
    <span class="trp"></span>
    <span class="blp"></span>
    <span class="brp"></span>
  </a>
  {% endif %}
  {% endwith %}
</div>
<div class="article {{topic.slug}}">
  <h2>
    <a href="{% url docs-article topic.slug article.slug %}">{{article}}</a>
    <span class="tlp"></span>
    <span class="trp"></span>
  </h2>
  <div class="shadow">
    <div class="section">
      <span class="tlp"></span>
      <span class="trp"></span>
      {% for section in sections %}
      <div class="section-title">
         <h3 id="{{section.slug}}">
             <a href="{% url docs-article topic.slug article.slug %}#{{section.slug}}">{{section}}</a>
         </h3>
      </div>
      <div class="content {% if forloop.last %}last-content{% endif %}">
        {{ section.content|markdown|safe }}
        {% if user.is_staff %}
        <p><a href="{% url admin:docs_section_change section.id %}">Edit this Section</a></p>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  <div class="article-foot">
    <span class="tlp"></span>
    <span class="trp"></span>
    <span class="blp"></span>
    <span class="brp"></span>
  </div>
</div>
{% endblock %}