actions & action button automatic generation; 'play' & 'listen' button on diffusions work

This commit is contained in:
bkfox
2016-07-07 01:18:39 +02:00
parent 8ff67fe68a
commit e971f3f0b5
11 changed files with 247 additions and 160 deletions

View File

@ -265,7 +265,7 @@ class List(Section):
message_empty = _('nothing')
paginate_by = 4
fields = [ 'date', 'time', 'image', 'title', 'content', 'info' ]
fields = [ 'date', 'time', 'image', 'title', 'content', 'info', 'actions' ]
image_size = '64x64'
truncate = 16

View File

@ -1,3 +1,77 @@
/// Actions manager
/// This class is used to register actions and to execute them when it is
/// triggered by the user.
var Actions = {
registry: {},
/// Add an handler for a given action
register: function(id, symbol, title, handler) {
this.registry[id] = {
symbol: symbol,
title: title,
handler: handler,
}
},
/// Init an existing action HTML element
init_action: function(item, action_id, data, url) {
var action = this.registry[action_id];
if(!action)
return;
item.title = action.title;
item.innerHTML = (action.symbol || '') + '<label>' +
action.title + '</label>';
item.data = data;
item.className = 'action';
if(url)
item.href = url;
item.setAttribute('action', action_id);
item.addEventListener('click', Actions.run, true);
},
/// Add an action to the given item
add_action: function(item, action_id, data, url) {
var actions = item.querySelector('.actions');
if(actions && actions.querySelector('[action="' + action_id + '"]'))
return;
var item = document.createElement('a');
this.init_action(item, action_id, data, url);
actions.appendChild(item);
},
/// Run an action from the given event -- ! this can be undefined
run: function(event) {
var item = event.target;
var action = item.hasAttribute('action') &&
item.getAttribute('action');
if(!action)
return;
event.preventDefault();
event.stopImmediatePropagation();
action = Actions.registry[action];
if(!action)
return
data = item.data || item.dataset;
action.handler(data, item);
return true;
},
};
document.addEventListener('DOMContentLoaded', function(event) {
var items = document.querySelectorAll('.action[action]');
for(var i = 0; i < items.length; i++) {
var item = items[i];
var action_id = item.getAttribute('action');
var data = item.dataset;
Actions.init_action(item, action_id, data);
}
}, false);
/// Small utility used to make XMLHttpRequests, and map results on objects.

View File

@ -4,63 +4,72 @@
{% with object|downcast as object %}
<li {% if object.css_class %}class="{{ object.css_class }}"{% endif %}
{% for k, v in object.attrs.items %}
{{ k }} = "{{ v|addslashes }}"
{% endfor %} >
{% if object.url %}
{% for k, v in object.attrs.items %}
{{ k }} = "{{ v|addslashes }}"
{% endfor %} >
{% if object.url %}
<a class="url" href="{{ object.url }}">
{% endif %}
{% if 'image' in list.fields and object.image %}
<img class="image" src="{% thumbnail object.image list.image_size crop %}">
{% endif %}
{% endif %}
{% if 'image' in list.fields and object.image %}
<img class="image" src="{% thumbnail object.image list.image_size crop %}">
{% endif %}
<div class="body">
{% if 'title' in list.fields and object.title %}
<h2 class="title">{{ object.title }}</h2>
{% endif %}
<div class="body">
{% if 'title' in list.fields and object.title %}
<h2 class="title">{{ object.title }}</h2>
{% endif %}
{% if 'content' in list.fields and object.content %}
<div class="content">
{% if list.truncate %}
{{ object.content|striptags|truncatewords:list.truncate }}
{% else %}
{{ object.content|striptags }}
{% endif %}
</div>
{% endif %}
</div>
{% if 'content' in list.fields and object.content %}
<div class="content">
{% if list.truncate %}
{{ object.content|striptags|truncatewords:list.truncate }}
{% else %}
{{ object.content|striptags }}
{% endif %}
</div>
{% endif %}
</div>
<div class="meta">
{% if object.date and 'date' in list.fields or 'time' in list.fields %}
<time datetime="{{ object.date }}">
{% if 'date' in list.fields %}
<span class="date">
{{ object.date|date:'D. d F' }}
</span>
{% endif %}
{% if 'time' in list.fields %}
<span class="time">
{{ object.date|date:'H:i' }}
</span>
{% endif %}
</time>
{% endif %}
{% if object.author and 'author' in list.fields %}
<span class="author">
{{ object.author }}
</span>
{% endif %}
<div class="meta">
{% if object.date and 'date' in list.fields or 'time' in list.fields %}
<time datetime="{{ object.date }}">
{% if 'date' in list.fields %}
<span class="date">
{{ object.date|date:'D. d F' }}
</span>
{% endif %}
{% if 'time' in list.fields %}
<span class="time">
{{ object.date|date:'H:i' }}
</span>
{% endif %}
</time>
{% endif %}
{% if object.author and 'author' in list.fields %}
<span class="author">
{{ object.author }}
</span>
{% endif %}
{% if object.info and 'info' in list.fields %}
<span class="info">
{{ object.info }}
</span>
{% endif %}
</div>
{% if object.info and 'info' in list.fields %}
<span class="info">
{{ object.info }}
</span>
{% endif %}
</div>
{% if object.url %}
</a>
{% endif %}
{% if object.actions and 'actions' in list.fields %}
<div class="actions">
{% for action_id,action_data in object.actions.items %}
<a class="action" action="{{action_id}}"
{% for k,v in action_data.items %}data-{{ k }}="{{ v }}"{% endfor %}></a>
{% endfor %}
</div>
{% endif %}
{% if object.url %}
</a>
{% endif %}
</li>
{% endwith %}

View File

@ -168,7 +168,6 @@ class PostListView(BaseView, ListView):
self.list = sections.List(
truncate = 32,
paginate_by = 0,
fields = ['date', 'time', 'image', 'title', 'content'],
)
else:
self.list = self.list(paginate_by = 0)