Require authentication to set keywords, fixes #365
[oweals/karmaworld.git] / karmaworld / templates / notes / note_detail.html
index 785d5359e6c7139b63afc0e2c9e1f6e95061a890..0cb7f8aa8a71569fd4feadbba82a7a60bac194c7 100644 (file)
@@ -1,13 +1,16 @@
 {% extends "base.html" %}
 {% load url from future %}
+{% load compress %}
 
 {% block title %}
   {{ note.name }}
 {% endblock %}
 
 {% block pagestyle %}
-  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
-  <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/annotator.min.css" />
+  {% compress css %}
+    <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
+    <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/annotator.min.css" />
+  {% endcompress %}
 {% endblock %}
 
 {% block pagescripts %}
     var annotator_js_url = "{{ STATIC_URL }}js/annotator-full.min.js";
     var annotator_css_url = "{{ STATIC_URL }}css/annotator.min.css";
     var setup_ajax_url = "{{ STATIC_URL }}js/setup-ajax.js";
-    var empty_js = "{{ STATIC_URL }}js/empty.js";
+    var note_edit_url = "{% url 'edit_note' note.id %}";
+    var user_authenticated = {% if user.is_authenticated %}true{% else %}false{% endif %};
   </script>
-  <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
-{% endblock %}
-
-{% block bodyscripts %}
-  <script src="{{ STATIC_URL }}js/note-detail.js" ></script>
-  <script src="{{ STATIC_URL }}js/pxem.jQuery.js"></script>
-  <script src="{{ STATIC_URL }}js/marked.js" ></script>
-  <script src="{{ STATIC_URL }}js/annotator-full.min.js"></script>
-  <script src="{{ STATIC_URL }}js/jquery.cookie.js"></script>
+  {% compress js %}
+    <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
+    <script src="{{ STATIC_URL }}js/note-detail.js" ></script>
+    <script src="{{ STATIC_URL }}js/pxem.jQuery.js"></script>
+    <script src="{{ STATIC_URL }}js/marked.js" ></script>
+    <script src="{{ STATIC_URL }}js/annotator-full.min.js"></script>
+  {% endcompress %}
   <script>
-    $(function() {
-      $(document).foundation('joyride', 'start');
-    });
+    {% if show_note_container %}
+      $(function() {
+        $(document).foundation('joyride', 'start');
+        initNoteContentPage();
+      });
+    {% endif %}
+
+    {% if show_keywords %}
+      $(function() {
+        initNoteKeywordsPage();
+      });
+    {% endif %}
   </script>
 {% endblock %}
 
@@ -47,7 +58,7 @@
     <div class="return-to-course show-for-large-up">
       <div class="row">
         <div class="small-12 columns">
-          <a href="{{ note.course.get_absolute_url }}">
+          <a href="{{ note.course.get_absolute_url }}" class="inherit-color">
             <i class="fa fa-angle-double-left"></i> See all notes for {{ note.course.name }}
           </a>
         </div>
@@ -66,7 +77,7 @@
             {{ note.course.school.name }}
           {% endif %}
           &nbsp;&nbsp;
-          <span style="display: inline;"><span class="show-for-large-up"><i class="fa fa-thumbs-up"></i> <span id="thank-number">{{ note.thanks }}</span> Thanks</span></span>
+          <span style="display: inline;"><span class="show-for-large-up"><i class="fa fa-thumbs-up"></i> <span id="thank-number">{{ note.thanks }}</span> Thank{{ note.thanks|pluralize }}</span></span>
         </div>
       </div>
 
                   <button id="flag-button-disabled" class="modify-button disabled opentip"
                           data-ot="You've already reported this note"
                            {% include 'partial/opentip_settings.html' %}>
-                    <i class="fa fa-thumbs-up"></i> Report Note</button>
+                    <i class="fa fa-flag"></i> Report Note</button>
                 {% else %}
-                  <button id="flag-button" class="modify-button"><i class="fa fa-thumbs-up"></i> Report Note</button>
+                  <button id="flag-button" class="modify-button"><i class="fa fa-flag"></i> Report Note</button>
                   <button id="flag-button-disabled" class="modify-button disabled opentip hide"
                           data-ot="You've already reported this note"
                            {% include 'partial/opentip_settings.html' %}>
-                    <i class="fa fa-thumbs-up"></i> Report Note</button>
+                    <i class="fa fa-flag"></i> Report Note</button>
                 {% endif %}
               {% else %}
                 <button id="flag-button-disabled" class="modify-button disabled opentip"
                           data-ot="Log in to report this note"
                            {% include 'partial/opentip_settings.html' %}>
-                    <i class="fa fa-thumbs-up"></i> Report Note</button>
+                    <i class="fa fa-flag"></i> Report Note</button>
               {% endif %}
 
               {% if user.is_authenticated %}
                   <i class="fa fa-download"></i> Download Note</button>
               {% endif %}
 
-              {% if user.get_profile.can_edit_items %}
+              {% if user.get_profile.can_edit_items and note.user != user %}
                 <button id="edit-note-tags" class="modify-button" data-reveal-id="note-tag-dialog">
                   <i class="fa fa-pencil-square-o"></i> Edit Tags
                 </button>
               {% endif %}
+
+              {% if note.user == request.user %}
+                <button id="edit-button" data-reveal-id="note-edit-dialog" class="modify-button"> <i class="fa fa-edit"></i> Edit This Note</button>&nbsp;&nbsp;
+              {% endif %}
+
+              {% if note.license %}
+                {{ note.license.html|safe }} {% if note.upstream_link %}<a href="{{ note.upstream_link }}" target="_blank">{{ note.upstream_link|slice:":80" }}</a>{% endif %}
+              {% endif %}
             </span>
           </span>
         </div>
           <strong>Tags: </strong>
           <span class="tags">
             {% for tag in note.tags.all %}
-              <span class="tag-span">{{ tag.name }}</span>
+              <span class="tag-span">
+                {{ tag.name }}{% if not forloop.last %}, {% endif %}
+              </span>
             {% endfor %}
           </span>
         </div><!-- /note_tags -->
         <a class="close-reveal-modal">&#215;</a>
         <div class="row">
           <div class="small-12 columns">
-            <p>Edit this note's tags:
-            <input id="note_tags_input" type="text" value="{% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}"></p>
-            <button id="save_note_tags" type=button><i class="fa fa-save"></i> Save</button>
+            <h3>Edit this note's tags</h3>
+            <input id="note_tags_input" type="text" value="{% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}">
+            <button id="save_note_tags" type="submit" value="tags-form"><i class="fa fa-save"></i> Save</button>
           </div>
         </div>
       </div>
 
-      {% if note.license %}
+      <div id="note-edit-dialog" class="reveal-modal" data-reveal>
+        <a class="close-reveal-modal">&#215;</a>
         <div class="row">
-          <div id="note_pedigree" class="twelve columns activity_details_status">
-            {{ note.license.html|safe }} {% if note.upstream_link %}<a href="{{note.upstream_link}}" target="_blank">{{ note.upstream_link|slice:":80" }}</a>{% endif %}
-          </div><!-- /note_pedigree -->
+          <div class="small-8 columns">
+            <h3>Edit Your Note</h3>
+          </div>
+          <div class="small-4 columns text-right">
+            <form method="POST" action="{% url 'note_delete' %}">
+              {% csrf_token %}
+              {{ note_delete_form }}
+              <button id="delete-note-button" type="submit" class="scary"><i class="fa fa-trash-o"></i> Delete Note</button>
+            </form>
+          </div>
+        </div>
+        <div class="row">
+          <form method="POST" action="{{ note.get_absolute_url }}">
+            {% csrf_token %}
+            <div class="small-12 large-6 columns">
+              {% with note_edit_form.name as field %}
+                {{ field.errors|safe }}
+                <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
+                {{ field }}
+                <p>{{ field.help_text }}</p>
+              {% endwith %}
+            </div>
+            <div class="small-12 large-6 columns">
+              {% with note_edit_form.tags as field %}
+                {{ field.errors|safe }}
+                <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
+                {{ field }}
+                <p>{{ field.help_text }}</p>
+              {% endwith %}
+            </div>
+            <div class="small-12 columns text-center">
+              <button type="submit"><i class="fa fa-save"></i> Save</button>
+            </div>
+          </form>
         </div>
-      {% endif %}
+      </div>
 
     </div><!-- /note header -->
 
     <div class="row">
       <div id="tabs" class="small-12 columns">
-        <dl class="tabs show-for-large-up" data-tab>
-          <dd class="active"><a href="#note_container">Note</a></dd>
-          <dd><a href="#keywords">Keywords</a></dd>
+        <dl class="tabs">
+          <dd id="note-tab-button" class="{% if show_note_container %}active{% endif %}">
+            <a href="{{ note.get_absolute_url }}">Note</a>
+          </dd>
+          <dd id="keywords-tab-button" class="{% if show_keywords %}active{% endif %}">
+            <a href="{{ note.get_absolute_keywords_url }}">Key Terms & Definitions</a>
+          </dd>
         </dl>
         <div class="tabs-content">
-          <div id="note_container" class="content active">
+        </div>
+        {% if show_note_container %}
+          <div id="note_container" class="">
             {% if pdf_controls %}
               <div id="zoom-buttons" class="row show-for-medium-up">
                 <div id="outline-btn-wrapper" class="small-1 columns hide show-for-medium-up">
             <div class="row">
               <div class="small-12 small-centered columns medium-12 large-12 body_copy">
                 {% if note.static_html %}
-                  <div class="note-text">
+                  <div id="note-content-wrapper" class="note-text">
                     {% if note.has_markdown %}
                       <span id="note-markdown" data-markdown="{{note.notemarkdown.markdown}}"></span>
                     {% else %}
               </div><!-- /body_copy -->
             </div>
           </div><!-- /note_container -->
-
+        {% endif %}
+        {% if show_keywords %}
           <div id="keywords" class="content">
             <div class="row">
               <div class="small-12 columns">
-                <form id="keyword-form" action="{% url 'keyword_edit' note.slug %}" method="post">
+                {% if user.is_authenticated %}
+                  <p id="keyword-intro">These key terms and definitions have been defined by KarmaNotes users.
+                  You can edit them for accuracy and add more if you like.</p>
+                  <p><button id="edit-keywords-button" class="museo700"><i class="fa fa-edit"></i> Edit Key Terms & Definitions</button></p>
+                {% else %}
+                  <p id="keyword-intro">These key terms and definitions have been defined by KarmaNotes users.</p>
+                {% endif %}
+                <table id="keywords-data-table">
+                  <thead>
+                    <tr>
+                      <td>Key Terms</td>
+                      <td>Definitions</td>
+                    </tr>
+                  </thead>
+                  {% for keyword in keywords %}
+                    <tr>
+                      <td>{{ keyword.word }}</td>
+                      <td>{{ keyword.definition }}</td>
+                    </tr>
+                  {% endfor %}
+                </table>
+
+                <form id="keyword-form" action="{{ note.get_absolute_keywords_url }}" method="post" class="hide">
                   {% csrf_token %}
                   {{ keyword_formset.management_form }}
                   <div class="hide" id="keyword-form-prototype">
                       <hr class="hide-for-large-up" />
                     {% endfor %}
                   </div>
-                  <div id="row">
-                    <div class="small-1 columns">
-                      <i id="add-row-btn" class="fa fa-plus fa-2x"></i>
+                  <div class="row hide-for-medium-down">
+                    <div class="small-12 columns">
+                      <p class="keywords-hint">(Click <i class="fa fa-plus"></i> or press TAB in the last definition for another row)</p>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="small-2 columns">
+                      <button type="submit" name="action" value="keyword-form">Save</button>
                     </div>
-                    <div class="small-10 large-11 columns center">
-                      <button type="submit" name="action">Save</button>
+                    <div class="small-9 large-10 columns center">
+                      <i id="add-row-btn" class="fa fa-plus fa-2x"></i>
                     </div>
                   </div>
                 </form>
               </div>
             </div>
-          </div>
-        </div>
+          </div> <!-- keywords -->
+        {% endif %}
       </div>
     </div>
 
 
   <ol class="joyride-list" data-joyride
         data-options="cookie_monster: true; cookie_name: note_detail_joyride">
-    <li data-id="note-markdown" data-text="Awesome!" data-options="tip_location: top">
+    <li data-id="note-content-wrapper" data-text="Awesome!" data-options="tip_location: top">
       <p>You can highlight important words or phrases in this note to add definitions for them.</p>
     </li>
+    <li data-id="keywords-tab-button" data-text="Awesome!" data-options="tip_location: top">
+      <p>Keywords you define will appear here, and you can define new ones here too.</p>
+    </li>
   </ol>
 
 {% endblock %}