]> git.0d.be Git - panikweb.git/commitdiff
add view to embed a sound in another site
authorFrédéric Péters <fpeters@0d.be>
Sat, 13 Jun 2015 09:40:45 +0000 (11:40 +0200)
committerFrédéric Péters <fpeters@0d.be>
Sat, 13 Jun 2015 09:40:45 +0000 (11:40 +0200)
panikweb/paniktags/templatetags/paniktags.py
panikweb/urls.py
panikweb/views.py
panikweb_templates/static/css/specifics.css
panikweb_templates/static/css/type.css
panikweb_templates/static/js/specifics.js
panikweb_templates/templates/base.html
panikweb_templates/templates/includes/audio.html
panikweb_templates/templates/soundfiles/dialog-embed.html [new file with mode: 0644]
panikweb_templates/templates/soundfiles/embed.html [new file with mode: 0644]

index 881623ae127b5ed30fc145e9ed73f5c35bdee720..81d15d74b2e0383696fcc75facef2131e17306b8 100644 (file)
@@ -26,11 +26,12 @@ def zip_lists(a, b):
     return zip(a, b)
 
 @register.inclusion_tag('includes/audio.html', takes_context=True)
-def audio(context, sound=None, display_fragment_name=False):
+def audio(context, sound=None, embed=False, display_fragment_name=False):
     return {
         'episode': context.get('episode'),
         'sound': sound,
         'display_fragment_name': display_fragment_name,
+        'embed': embed,
     }
 
 @register.inclusion_tag('listen/nav.html', takes_context=True)
index 1008afed23ec07d359e345fb7147861b78844d32..ef1e3eac1a00748ca25201ee2c6a27a5d8058b4e 100644 (file)
@@ -15,6 +15,11 @@ urlpatterns = patterns('',
     url(r'^emissions/$', 'panikweb.views.emissions', name='emissions'),
     url(r'^emissions/(?P<slug>[\w,-]+)/episodes/$', 'panikweb.views.emissionEpisodes', name='emissionEpisodes'),
     url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<slug>[\w,-]+)/$', 'panikweb.views.episode', name='episode-view'),
+    url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<slug>[\w,-]+)/$', 'panikweb.views.episode', name='episode-view'),
+    url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<episode_slug>[\w,-]+)/embed/(?P<pk>\d+)/$',
+        'panikweb.views.soundfile_embed', name='soundfile-embed-view'),
+    url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<episode_slug>[\w,-]+)/dlg-embed/(?P<pk>\d+)/$',
+        'panikweb.views.soundfile_dlg_embed', name='soundfile-dialog-embed-view'),
     url(r'^emissions/(?P<slug>[\w,-]+)/$', 'panikweb.views.emission', name='emission-view'),
     url(r'^ckeditor/', include('ckeditor.urls')),
     url(r'^emissions/archives$', 'panikweb.views.emissionsArchives', name='emissionsArchives'),
index 11b28edb1116875f88794ce29a2a807346d33b02..8167a507c82a90a4712a094fab7f6c7d7ce66808 100644 (file)
@@ -147,6 +147,39 @@ class EmissionEpisodesDetailView(DetailView, EmissionMixin):
         return context
 emissionEpisodes = EmissionEpisodesDetailView.as_view()
 
+
+class SoundFileEmbedView(DetailView):
+    model = SoundFile
+    template_name = 'soundfiles/embed.html'
+
+    def get_context_data(self, **kwargs):
+        context = super(SoundFileEmbedView, self).get_context_data(**kwargs)
+        if self.kwargs.get('episode_slug') != self.object.episode.slug:
+            raise Http404()
+        if self.kwargs.get('emission_slug') != self.object.episode.emission.slug:
+            raise Http404()
+        context['episode'] = self.object.episode
+        return context
+soundfile_embed = SoundFileEmbedView.as_view()
+
+
+class SoundFileDialogEmbedView(DetailView):
+    model = SoundFile
+    template_name = 'soundfiles/dialog-embed.html'
+
+    def get_context_data(self, **kwargs):
+        context = super(SoundFileDialogEmbedView, self).get_context_data(**kwargs)
+        if self.kwargs.get('episode_slug') != self.object.episode.slug:
+            raise Http404()
+        if self.kwargs.get('emission_slug') != self.object.episode.emission.slug:
+            raise Http404()
+        context['episode'] = self.object.episode
+        context['site_url'] = self.request.build_absolute_uri('/').strip('/')
+        return context
+soundfile_dlg_embed = SoundFileDialogEmbedView.as_view()
+
+
+
 class ProgramView(TemplateView):
     template_name = 'program.html'
 
index 519e0c6bc9625092d420e43f54b9aa2ef4a8551b..418a7192b01d4396a6e461816631c0bc033ea27d 100644 (file)
@@ -904,6 +904,14 @@ h1.top#frequence {
 .episode.resume .sound.right .icon-download{
        display:block;
 }
+
+.big.icon-pause,
+.big.icon-stop,
+.big.icon-share {
+       display: inline-block;
+       vertical-align: middle;
+}
+
 .episode.detail .logo.right{
        max-width:50%;
 }
@@ -1630,6 +1638,7 @@ div.gallery img {
        border: 1px solid #333;
 }
 
+div#dialog-background,
 div.gallery div.first {
        position: fixed;
        top: 0;
@@ -1731,3 +1740,69 @@ div.topikcellcontent h2 {
 .program-week img.smooth {
        padding-bottom: 0;
 }
+
+div#dialog-background {
+       display: flex;
+}
+div#dialog-embed {
+       position: relative;
+       background: white;
+       width: 50%;
+       margin: auto;
+       text-align: left;
+       padding: 1ex;
+}
+
+div#dialog-embed textarea {
+       width: 100%;
+       max-width: none;
+}
+
+div#dialog-embed #close-button {
+       position: absolute;
+       right: 1ex;
+}
+
+body#embed {
+       min-height: auto !important;
+       margin: 0;
+       background: white 0 10px no-repeat url(../img/logoPanikBW.png);
+}
+
+body#embed #Main {
+       background: transparent;
+}
+
+body#embed #Commons,
+body#embed #metaNav,
+body#embed #Footer,
+body#embed #userLog,
+body#embed #Player {
+       display: none;
+}
+
+body#embed #Changing {
+       float: none;
+       width: auto;
+}
+
+body#embed #Main > .wrapper {
+       padding: 0;
+}
+
+body#embed .logo {
+       padding-top: 4px;
+}
+
+body#embed ul.custom {
+       display: inline-block;
+       width: calc(100% - 70px);
+}
+
+body#embed ul.custom .soundfile-info {
+       padding: 1ex;
+}
+
+body#embed span.fragment-title {
+       font-weight: normal;
+}
index 789d851c2bd226e0e3073644a0f83f699cad1c1e..5a4e581af8f30bf0dcac756cfa7248950584ddc1 100644 (file)
@@ -86,9 +86,9 @@
        /*font-size:1.3em;*/
 }
 .resymbol{
-       vertical-align:middle !important;
-       display:inline-block !important;
-       font-family: 'Symbols' !important;
+       vertical-align: middle;
+       display: inline-block;
+       font-family: 'Symbols';
 }
 .resymbol.big, .icons.big{
        font-size:2em;
index 2ecc01c551c619d0b6a22922736241dc5ad553f4..d80db5189bad7acbdd4389eea4859ed4f7effd97 100644 (file)
@@ -355,6 +355,16 @@ $(function() {
                        }else if($(this).attr('data-player-action') == "playAudio"){
                                $localList.playlist("registerAudio",audio,doLog(audio.attr('title')+' will play soon.','ok'));
                                $localList.playlist("playSoundId", sound_id);
+                               if ($(this).parent().find('.icon-pause').length) {
+                                       $(this).hide();
+                                       $(this).parent().find('.icon-pause').show();
+                               }
+                       }else if ($(this).attr('data-player-action') == "pauseSounds") {
+                               if ($(this).parent().find('.icon-play-sign').length) {
+                                       $(this).hide();
+                                       $(this).parent().find('.icon-play-sign').show();
+                               }
+                               $localList.playlist($(this).attr('data-player-action'));
                        }else{
                                $localList.playlist($(this).attr('data-player-action'));
                        }
@@ -412,6 +422,16 @@ $(function() {
                        }
                });
 
+               $('[data-popup-href]').on('click', function() {
+                       $.ajax({
+                               url: $(this).data('popup-href'),
+                               success: function (html, textStatus, jqXhr) {
+                                       $(html).appendTo($('body'));
+                               }
+                       });
+                       return false;
+               });
+
                if ($('input#id_q').val() == '') {
                        $('input#id_q').focus();
                }
index 5a93abb3b3dcfc1af5d275e8ba71197fc22df695..7642e081c9bbb82fb00943c952c56da20683b669 100644 (file)
@@ -36,7 +36,7 @@
     {% block extrascripts %}{% endblock %}
 </head>
 
-<body id="{{sectionName}}" class="section-{{sectionName}}">
+<body {% block bodyattr %}id="{{sectionName}}" class="section-{{sectionName}}"{% endblock %}>
        <div id="All">
                {% block meta %}<div id="metaNav">{% metanav active=sectionName %}</div>{% endblock %}
                <div id="Commons" class="cf" >
index 342b716152bf9a454bb89ea982e35263886ac392..bd08c81003a2ef487bb6b1540bee80f5acfde169 100644 (file)
@@ -1,18 +1,27 @@
 {% load soundfiles paniktags %}
 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
        <div class="audio">
+               {% if not embed %}
                <button class="resymbol icon-plus-sign big"
                        title="Add to playlist" 
                        data-player-audio="Audio-{{ sound.file.url|slugify }}" 
                        data-player-action="registerAudio" 
                        id="addToPlaylist-{{ sound.file.url|slugify }}"
                        ></button>
+               {% endif %}
                <button class="resymbol icon-play-sign big"
                        title="Play" 
                        data-player-audio="Audio-{{ sound.file.url|slugify }}" 
                        data-player-action="playAudio" 
                        ></button>
-                       
+               {% if embed %}
+               <button class="icons icon-pause big"
+                       title="Pause"
+                       style="display: none;"
+                       data-player-audio="Audio-{{ sound.file.url|slugify }}" 
+                       data-player-action="pauseSounds" 
+                       ></button>
+               {% endif %}
                <button class="resymbol icon-download big"
                        title="Download file" 
                        onclick="$(this).next().toggleClass('hidden-download-links');return false;"
                        </a>
                        {% endif %}
                </div>
+               {% if not embed %}
+               <button class="icon-share icons big"
+                       title="Embed"
+                       data-popup-href="{% url 'soundfile-dialog-embed-view' emission_slug=sound.episode.emission.slug episode_slug=sound.episode.slug pk=sound.pk %}"
+                       ></button>
+               {% endif %}
        </div>
        {% if display_fragment_name %}
        <div class="fragment-name">
diff --git a/panikweb_templates/templates/soundfiles/dialog-embed.html b/panikweb_templates/templates/soundfiles/dialog-embed.html
new file mode 100644 (file)
index 0000000..68343b1
--- /dev/null
@@ -0,0 +1,15 @@
+{% load i18n %}
+<div id="dialog-background">
+<div id="dialog-embed">
+<button id="close-button" onclick="$(&quot;#dialog-background&quot;).remove();">x</button>
+        <h2>{% trans 'Embed '%}</h2>
+<p>
+Copier/coller le code ci-dessous :
+</p>
+
+        <textarea rows="4" onclick="$(this).select();">&lt;iframe height="80" width="100%" scrolling="no" frameborder="no" src="{{site_url}}{% url 'soundfile-embed-view' emission_slug=object.episode.emission.slug episode_slug=object.episode.slug pk=object.pk %}" &gt;&lt;/iframe&gt;</textarea>
+
+        <h3>Preview</h3>
+        <iframe height="80" width="100%" scrolling="no" frameborder="no" src="{% url 'soundfile-embed-view' emission_slug=object.episode.emission.slug episode_slug=object.episode.slug pk=object.pk %}"></iframe>
+</div>
+</div>
diff --git a/panikweb_templates/templates/soundfiles/embed.html b/panikweb_templates/templates/soundfiles/embed.html
new file mode 100644 (file)
index 0000000..a476583
--- /dev/null
@@ -0,0 +1,36 @@
+{% extends "base.html" %}
+{% load thumbnail paniktags static %}
+
+{% block bodyattr %}id="embed"{% endblock %}
+{% block title %}{{ episode.emission.title }}{% endblock %}
+
+{% block main %}
+
+<div class="wrapper extra-soundfiles soundcell">
+       <div class="logo">
+               {% if episode.image %}
+                       {% thumbnail episode.image "60x60" crop="50% 25%" as im %}
+                       <img width="60" height="60" src="{{im.url}}"/>
+                       {% endthumbnail %}
+               {% elif episode.emission.image %}
+                       {% thumbnail episode.emission.image "60x60" crop="50% 25%" as im %}
+                       <img width="60" height="60" src="{{im.url}}"/>
+                       {% endthumbnail %}
+               {% else %}
+                       <img class="smooth"  style="width:60px;" src="{% static "img/emission.png" %}"/>
+               {% endif %}
+       </div>
+<ul class="custom">
+<li>
+  <div class="soundfile-info"><strong>
+    <a target="_blank" href="{% url 'emission-view' slug=episode.emission.slug%}">{{ episode.emission.title }}</a> -
+    <a target="_blank" href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">{{ episode.title }}</a>
+    {% if object.fragment and object.title %}<span class="fragment-title">- {{ object.title }}</span>{% endif %}
+          </strong>
+  </div>
+  {% audio sound=object embed=True %}
+</li>
+</ul>
+</div>
+{% endblock %}
+