158 lines
5.9 KiB
Django/Jinja
158 lines
5.9 KiB
Django/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.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 javascript %}
|
|
{{ 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
|
|
}
|
|
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 %}
|
|
|
|
{% 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 %}
|
|
|
|
<i class="fa fa-comment"></i> <a href="{{ item.get_absolute_url() }}#disqus_thread">0 Comments</a>
|
|
{% endif %}
|
|
{% if item.tags.count() > 0 %}
|
|
|
|
<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 %}
|