fmartingr.com-legacy/fmartingrcom/themes/v1/templates/blog/entry.jinja

{% extends "blog/layout.jinja" %}

{% block page_title %}
  {{ super() }} | {{ item.title }}
{% endblock %}

{% block submenu %}
  {% if item.status() == 'Published' %}
    {% if page.number > 1 %}
      <a href="{{ url('blog:list') }}?page={{ page.number }}" class="button prev-page pull-left gap">
    {% else %}
        <a href="{{ url('blog:list') }}" class="button prev-page pull-left gap">
    {% endif %}
    <i class="fa fa-angle-double-left"></i> Go back
        </a>
  {% endif %}
{% endblock %}

{% block content %}
  <article class="blog-entry {% if item.draft %}draft{% endif %}"
           {% if request.user.is_superuser %}data-liveedit-url="{{ item.get_absolute_url() }}edit/"{% endif %}>
    <h1 class="entry-title">
      <a class="dark" href="#">{{ item.title }}</a>
    </h1>

    <div class="info text-left">
      {% if request.user.is_superuser %}
        <div class="pull-right">
          <a class="pure-button button-small button-secondary" data-button="live-edit">Live edit</a>
          <a class="pure-button button-small" href="{{ url('admin:blog_entry_change', item.pk) }}">Edit in admin</a>
          <a class="pure-button hidden" data-button="save">Save</a>
        </div>
      {% endif %}
      <i class="fa fa-calendar"></i>
      <time datetime="{{ item.date }}"
            pubdate=""
            data-updated="true">{{ item.date|dt('%B %e, %Y') }}</time>
      {% if config.disqus_shortname and config.enable_comments %}
        &nbsp;
        <i class="fa fa-comment"></i> <a href="{{ item.get_absolute_url() }}#disqus_thread">0 Comments</a>
      {% endif %}
      {% if item.tags.count() > 0 %}
        &nbsp;
        <i class="fa fa-tag"></i> {{ item.tags.all()|join(', ') }}
      {% endif %}
    </div>
    <div class="content">{{ item.content|safe }}</div>
    <div class="clearfix"></div>
    {% if config.show_share_buttons %}
      <div class="share">
        <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ item.title }} - {{ config.base_url }}{{ item.get_absolute_url() }}" data-via="{{ config.twitter_username }}" data-size="large">Tweet</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      </div>
      <div class="clearfix"></div>
    {% endif %}
    {% if config.disqus_shortname and config.enable_comments %}
      <hr class="big" />
      <div class="comments" id="disqus_thread"></div>
    {% endif %}
  </article>
{% endblock %}

{% block endbody %}
  {{ super() }}
  <script type="text/javascript">
   (function() {
       var LiveEditCtrl = function(window) {
           this.UI = {
               'liveEditButton': document.querySelector('.blog-entry [data-button="live-edit"]'),
               'saveButton': document.querySelector('.blog-entry [data-button="save"]'),
               'entryContent': document.querySelector('.blog-entry .content')
           }
           this.endpoints = {
               'liveEdit': document.querySelector('.blog-entry').getAttribute('data-liveedit-url')
           }
           this.editorOptions = {
               'class': 'liveeditor',
               'editor': this.UI.entryContent
           }
           this.initialize();
       }

       LiveEditCtrl.prototype.initialize = function() {
           var _this = this;
           // Ensure save button is hidden
           this.UI.saveButton.classList.add('hidden');
           // Add handler for live edit button
           this.UI.liveEditButton.addEventListener('click', function(event){
               _this.loadEditor();
               _this.hideButton('liveEdit');
               _this.showButton('save');
           });
           this.UI.saveButton.addEventListener('click', function(event){
               _this.save(function(success){
                   _this.unloadEditor();
                   _this.hideButton('save');
                   _this.showButton('liveEdit');
               });
           });
       }

       LiveEditCtrl.prototype.hideButton = function(btn) {
           this.UI[btn + 'Button'].classList.add('hidden');
       }

       LiveEditCtrl.prototype.showButton = function(btn) {
           this.UI[btn + 'Button'].classList.remove('hidden');
       }

       LiveEditCtrl.prototype.loadEditor = function() {
           this._lastSavedContent = this.UI.entryContent.innerHTML
           this.editor = new Pen(this.editorOptions);
           this.startAutoSave();
       }

       LiveEditCtrl.prototype.unloadEditor = function() {
           this.editor.destroy();
           this.stopAutoSave();
       }

       LiveEditCtrl.prototype.save = function(callback) {
           var _this = this,
               r = new XMLHttpRequest();

           r.open("POST", this.endpoints.liveEdit, true);
           r.onreadystatechange = function () {
               if (r.readyState != 4 || r.status != 200) {
                   _this._lastSavedContent = _this.UI.entryContent.innerHTML;
                   if (callback) return callback(true, r.status);
               }
           };
           data = {
               'content': this.UI.entryContent.innerHTML,
               'markdown': this.editor.toMd()
           }
           r.send(JSON.stringify(data));
       }

       LiveEditCtrl.prototype.startAutoSave = function() {
           var _this = this;
           this._autoSaveInterval = setInterval(function(){
               if (_this._lastSavedContent != _this.UI.entryContent.innerHTML) {
                   console.log('Auto saved');
                   _this.save();
               } else {
                   console.log('Not autosaving because content is the same')
               }
           }, 10000);
       }

       LiveEditCtrl.prototype.stopAutoSave = function() {
           clearInterval(this._autoSaveInterval);
       }

       window.LiveEditCtrl = new LiveEditCtrl(window);
   })();
  </script>
{% endblock %}