Added management buttons for an entry
- Editor is created/destroyed - Admin link working - Fixed some styling
This commit is contained in:
Felipe Martín
parent
cea42616df
commit
9d6302ead3
|
|
@ -34,6 +34,9 @@ article.blog-entry
|
|||
line-height: 140%
|
||||
padding-top: 15px
|
||||
|
||||
&.liveeditor
|
||||
outline: 0
|
||||
|
||||
img
|
||||
box-shadow: $sidebar-bg 0 0 4px
|
||||
max-width: 100%
|
||||
|
|
|
|||
|
|
@ -1,60 +1,115 @@
|
|||
{% extends "blog/layout.jinja" %}
|
||||
|
||||
{% block page_title %}
|
||||
{{ super() }} | {{ item.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 %}
|
||||
{% 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 %}
|
||||
<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.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.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.editor = new Pen(this.editorOptions);
|
||||
}
|
||||
|
||||
LiveEditCtrl.prototype.unloadEditor = function() {
|
||||
this.editor.destroy();
|
||||
}
|
||||
|
||||
window.LiveEditCtrl = new LiveEditCtrl(window);
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<article class="blog-entry {% if item.draft %}draft{% endif %}">
|
||||
<h1 class="entry-title">
|
||||
<a class="dark" href="#">{{ item.title }}</a>
|
||||
</h1>
|
||||
<article class="blog-entry {% if item.draft %}draft{% endif %}">
|
||||
<h1 class="entry-title">
|
||||
<a class="dark" href="#">{{ item.title }}</a>
|
||||
</h1>
|
||||
|
||||
<div class="info text-left">
|
||||
{% if request.user.is_superuser %}
|
||||
<div>
|
||||
<button class="pure-button button-small button-secondary">Live edit</button>
|
||||
<button class="pure-button button-small">Edit in admin</button>
|
||||
<button class="pure-button hidden">Save</button>
|
||||
</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 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>
|
||||
<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>
|
||||
{% 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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue