Add left and right arrow keys navigation (add new JS file, link it from media.html...
[mediagoblin.git] / mediagoblin / templates / mediagoblin / user_pages / media.html
index 760783a332cb59470e21fab5ca038d5b7983495b..0b9bb8086ea733df8fde8a1e592f972ae93eb2d1 100644 (file)
@@ -1,6 +1,6 @@
 {#
 # GNU MediaGoblin -- federated, autonomous media hosting
-# Copyright (C) 2011 MediaGoblin contributors.  See AUTHORS.
+# Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License as published by
 {% import "/mediagoblin/utils/wtforms.html" as wtforms_util %}
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
+{% block title %}{{ media.title }} — {{ super() }}{% endblock %}
+
+{% block mediagoblin_head %}
+<!--[if lte IE 8]><link rel="stylesheet"
+    href="{{ request.staticdirect('/extlib/leaflet/leaflet.ie.css') }}" /><![endif]-->
+  <script type="text/javascript"
+          src="{{ request.staticdirect('/js/comment_show.js') }}"></script>
+  <script type="text/javascript"
+          src="{{ request.staticdirect('/js/keyboard_navigation.js') }}"></script>
+
+  {% if app_config['geolocation_map_visible'] %}
+    <link rel="stylesheet"
+         href="{{ request.staticdirect('/extlib/leaflet/leaflet.css') }}" />
+
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/extlib/leaflet/leaflet.js') }}"></script>
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/geolocation-map.js') }}"></script>
+  {% endif %}
+{% endblock mediagoblin_head %}
+
 {% block mediagoblin_content %}
-  {% if media %}
-    <div class="grid_11 alpha">
-      <div class="media_image_container">
+  <div class="media_pane">
+    <div class="media_image_container">
+      {% block mediagoblin_media %}
         {% set display_media = request.app.public_store.file_url(
                  media.get_display_media(media.media_files)) %}
-
         {# if there's a medium file size, that means the medium size
          #  isn't the original... so link to the original!
          #}
-        {% if media['media_files'].has_key('medium') %}
+        {% if media.media_files.has_key('medium') %}
           <a href="{{ request.app.public_store.file_url(
-                        media['media_files']['original']) }}">
+                        media.media_files['original']) }}">
             <img class="media_image"
                  src="{{ display_media }}"
                  alt="Image for {{ media.title }}" />
                src="{{ display_media }}"
                alt="Image for {{ media.title }}" />
         {% endif %}
-      </div>
-
-      <h2 class="media_title">
-        {{ media.title }}
-      </h2>
-
-      <p class="media_uploader">
-        {% trans date=media.created.strftime("%Y-%m-%d"),
-                 user_url=request.urlgen(
-                   'mediagoblin.user_pages.user_home',
-                   user=media.uploader().username),
-                 username=media.uploader().username -%}
-          Uploaded on {{ date }} by <a href="{{ user_url }}">{{ username }}</a>
-        {%- endtrans %}
-      </p>
-
-      {% autoescape False %}
-        <p>{{ media.description_html }}</p>
-      {% endautoescape %}
-
-      <br />
-      <h3>{% trans %}Comments{% endtrans %}</h3>
-
-      <p>{% trans %}<a href="#comment_form">Post a comment</a>{% endtrans %}</p>
-
-      {% if comments %}
-        {% for comment in comments %}
-          {% set comment_author = comment.author() %}
-           {% if pagination.active_id == comment._id %}
-              <div class="comment_wrapper comment_active" id="comment-{{ comment['_id'] }}">
-               <a name="comment" id="comment"></a>
-            {% else %}
-              <div class="comment_wrapper" id="comment-{{ comment['_id'] }}">
-           {% endif %}
-
-            <div class="comment_content">
-              {% autoescape False %}
-                {{ comment.content_html }}
-              {% endautoescape %}
-            </div>
-
-            <div class="comment_author">&mdash; 
-              <a href="{{ request.urlgen('mediagoblin.user_pages.user_home',
-                            user = comment_author['username']) }}">
-                {{ comment_author['username'] }}</a>
-              {% trans %}at{% endtrans %} 
-              <a href="{{ request.urlgen('mediagoblin.user_pages.media_home.view_comment',
-                      comment = comment['_id'],
-                      user = media.uploader().username,
-                      media = media._id) }}#comment">
-                {{ comment.created.strftime("%Y-%m-%d %I:%M%p") }}
-              </a>
-            </div>
+      {% endblock %}
+    </div>
+    <h2 class="media_title">
+      {{ media.title }}
+    </h2>
+    {% autoescape False %}
+      <p>{{ media.description_html }}</p>
+    {% endautoescape %}       
+    <p class="media_specs">
+      {% trans date=media.created.strftime("%Y-%m-%d") -%}
+        Added on {{ date }}.
+      {%- endtrans %}
+      {% if request.user and
+            (media.uploader == request.user._id or 
+             request.user.is_admin) %}
+        {% set edit_url = request.urlgen('mediagoblin.edit.edit_media',
+                                   user= media.get_uploader.username,
+                                   media= media._id) %}
+        <a class="button_action" href="{{ edit_url }}">{% trans %}Edit{% endtrans %}</a>
+        {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete',
+                                   user= media.get_uploader.username,
+                                   media= media._id) %}
+        <a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a>
+      {% endif %}
+    </p>
+    {% if comments %}
+      <h3>
+        {% if comments.count()==1 %}
+          {% trans comment_count=comments.count() -%}{{ comment_count }} comment{%- endtrans %}
+        {% elif comments.count()>1 %}
+          {% trans comment_count=comments.count() -%}{{ comment_count }} comments{%- endtrans %}
+        {% else %}
+          {% trans %}No comments yet.{% endtrans %}
+        {% endif %}
+        <div class="right_align">
+          <a
+            {% if not request.user %}
+              href="{{ request.urlgen('mediagoblin.auth.login') }}"
+            {% endif %}
+            class="button_action" id="button_addcomment" title="Add a comment">
+            {% trans %}Add one{% endtrans %}
+          </a>
+        </div>
+      </h3>
+      {% if request.user %}
+        <form action="{{ request.urlgen('mediagoblin.user_pages.media_post_comment', 
+                                         user= media.get_uploader.username,
+                                         media=media._id) }}" method="POST" id="form_comment">
+          <p>
+            {% trans %}You can use <a href="http://daringfireball.net/projects/markdown/basics">Markdown</a> for formatting.{% endtrans %}
+          </p>
+          {{ wtforms_util.render_divs(comment_form) }}
+          <div class="form_submit_buttons">
+            <input type="submit" value="{% trans %}Add this comment{% endtrans %}" class="button_action" />
+              {{ csrf_token }}
+          </div>
+        </form>
+      {% endif %}
+      {% for comment in comments %}
+        {% set comment_author = comment.get_author %}
+               {% if pagination.active_id == comment._id %}
+            <div class="comment_wrapper comment_active" id="comment-{{ comment._id }}">
+                         <a name="comment" id="comment"></a>
+          {% else %}
+            <div class="comment_wrapper" id="comment-{{ comment._id }}">
+               {% endif %}
+          <div class="comment_content">
+            {% autoescape False %}
+              {{ comment.content_html }}
+            {% endautoescape %}
+            <img src="{{ request.staticdirect('/images/icon_comment.png') }}" />
+            <a href="{{ request.urlgen('mediagoblin.user_pages.user_home',
+                            user = comment_author.username) }}">
+              {{ comment_author.username }}
+            </a>
+            {% trans %}at{% endtrans %}
+            <a href="{{ request.urlgen('mediagoblin.user_pages.media_home.view_comment',
+                   comment = comment._id,
+                   user = media.get_uploader.username,
+                   media = media.slug_or_id) }}#comment">
+              {{ comment.created.strftime("%I:%M%p %Y-%m-%d") }}
+            </a>
           </div>
-        {% endfor %}
-
-    {% if request.user %}
-      <a name="comment_form"></a>
-      <form action="{{ request.urlgen('mediagoblin.user_pages.media_post_comment', 
-                                       user= media.uploader().username,
-                                       media=media._id) }}" method="POST">
-        {{ wtforms_util.render_divs(comment_form) }}
-        <div class="form_submit_buttons">
-          <input type="submit" value="{% trans %}Post comment!{% endtrans %}" class="button" />
-            {{ csrf_token }}
         </div>
-      </form>
+      {% endfor %}
+      {{ render_pagination(request, pagination,
+                 media.url_for_self(request.urlgen)) }}
     {% endif %}
-
-        {{ render_pagination(request, pagination, 
-             request.urlgen('mediagoblin.user_pages.media_home',
-             user = media.uploader().username,
-             media = media._id)) }}
-      </div>
+  </div>
+  <div class="media_sidebar">
+    {% trans user_url=request.urlgen(
+                'mediagoblin.user_pages.user_home',
+                user=media.get_uploader.username),
+                username=media.get_uploader.username -%}
+      <p>❖ Browsing media by <a href="{{ user_url }}">{{ username }}</a></p>
+    {%- endtrans %}  
+    {% include "mediagoblin/utils/prev_next.html" %}
+    {% if media.attachment_files|count %}
+      <h3>Attachments</h3>
+      <ul>
+        {% for attachment in media.attachment_files %}
+          <li>
+            <a href="{{ request.app.public_store.file_url(attachment.filepath) }}">
+              {{ attachment.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    {% if app_config['allow_attachments']
+          and request.user
+          and (media.uploader == request.user._id
+               or request.user.is_admin) %}
+      <p>
+        <a href="{{ request.urlgen('mediagoblin.edit.attachments',
+                      user=media.get_uploader.username,
+                      media=media._id) }}">Add attachment</a>
+      </p>
+    {% endif %}
+    {% if media.tags %}
+      {% include "mediagoblin/utils/tags.html" %}
     {% endif %}
 
-    <div class="grid_5 omega">
-      {% include "mediagoblin/utils/prev_next.html" %}
-
-      {% if media['uploader'] == request.user['_id'] or 
-                                 request.user['is_admin'] %}
-        <h3>Temporary button holder</h3>
-        <p>
-          {% set edit_url = request.urlgen('mediagoblin.edit.edit_media',
-                                     user= media.uploader().username,
-                                     media= media._id) %}
-          <a href="{{ edit_url }}"
-             ><img src="{{ request.staticdirect('/images/icon_edit.png') }}"
-                   class="media_icon" /></a>
-          <a href="{{ edit_url }}">{% trans %}edit{% endtrans %}</a>
-        </p>
-        <p>
-          {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete',
-                                     user= media.uploader().username,
-                                     media= media._id) %}
-          <a href="{{ delete_url }}"
-             ><img src="{{ request.staticdirect('/images/icon_delete.png') }}"
-               class="media_icon" /></a>
-          <a href="{{ delete_url }}">{% trans %}delete{% endtrans %}</a>
-        </p>
-      {% endif %}
-
-      {% if media.attachment_files|count %}
-        <h3>Attachments</h3>
-        <ul>
-          {% for attachment in media.attachment_files %}
-            <li>
-              <a href="{{ request.app.public_store.file_url(attachment.filepath) }}">
-                {{ attachment.name }}
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
+    {% include "mediagoblin/utils/license.html" %}
 
-      {% if app_config['allow_attachments']
-            and (media['uploader'] == request.user['_id']
-                 or request.user['is_admin']) %}
-        <p>
-          <a href="{{ request.urlgen('mediagoblin.edit.attachments',
-                        user=media.uploader().username,
-                        media=media._id) }}">Add attachment</a>
-        </p>
-      {% endif %}
+    {% include "mediagoblin/utils/geolocation_map.html" %}
 
-      {% if media.tags %}
-        {% include "mediagoblin/utils/tags.html" %}
-      {% endif %}
-    </div>
-  {% else %}
-    <p>{% trans %}Sorry, no such media found.{% endtrans %}<p/>
-  {% endif %}
+    {% include "mediagoblin/utils/exif.html" %}
+  </div>
 {% endblock %}