karmaworld/templates/notes/note_detail.html

   1 {% extends "base.html" %}
   2 {% load url from future %}
   3 {% load compress %}
   4
   5 {% block title %}
   6   {{ note.name }}
   7 {% endblock %}
   8
   9 {% block pagestyle %}
  10   {% compress css %}
  11     <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
  12     <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/annotator.min.css" />
  13   {% endcompress %}
  14 {% endblock %}
  15
  16 {% block pagescripts %}
  17   <script type="text/javascript">
  18     var note_id = {{ note.id }};
  19     var note_thank_url = "{% url 'thank_note' note.id %}"
  20     var note_flag_url = "{% url 'flag_note' note.id %}"
  21     var edit_note_tags_url = "{% url 'edit_note_tags' note.id %}"
  22     var note_downloaded_url = "{% url 'downloaded_note' note.id %}"
  23     var note_contents_url = "{{ S3_URL }}{{ note.get_relative_s3_path }}"
  24     var pdfControls = {% if pdf_controls %} true {% else %} false {% endif %};
  25     var csrf_token = "{{ csrf_token }}";
  26     var annotator_js_url = "{{ STATIC_URL }}js/annotator-full.min.js";
  27     var annotator_css_url = "{{ STATIC_URL }}css/annotator.min.css";
  28     var setup_ajax_url = "{{ STATIC_URL }}js/setup-ajax.js";
  29     var note_edit_url = "{% url 'edit_note' note.id %}";
  30   </script>
  31   {% compress js %}
  32     <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
  33     <script src="{{ STATIC_URL }}js/note-detail.js" ></script>
  34     <script src="{{ STATIC_URL }}js/pxem.jQuery.js"></script>
  35     <script src="{{ STATIC_URL }}js/marked.js" ></script>
  36     <script src="{{ STATIC_URL }}js/annotator-full.min.js"></script>
  37   {% endcompress %}
  38   <script>
  39     $(function() {
  40       $(document).foundation('joyride', 'start');
  41     });
  42   </script>
  43 {% endblock %}
  44
  45 {% block raw_content %}
  46   <section id="note_content">
  47
  48     <div class="return-to-course show-for-large-up">
  49       <div class="row">
  50         <div class="small-12 columns">
  51           <a href="{{ note.course.get_absolute_url }}" class="inherit-color">
  52             <i class="fa fa-angle-double-left"></i> See all notes for {{ note.course.name }}
  53           </a>
  54         </div>
  55       </div>
  56     </div>
  57
  58     <div id="note_header">
  59
  60       <div class="row header-byline">
  61         <div class="small-12 columns">
  62           <strong>Lecture note for {{ note.course.name }} </strong>
  63           at
  64           {% if note.course.department.school %}
  65             {{ note.course.department.school.name }}
  66           {% else %}
  67             {{ note.course.school.name }}
  68           {% endif %}
  69           &nbsp;&nbsp;
  70           <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>
  71         </div>
  72       </div>
  73
  74       <div class="row museo700">
  75         <div class="small-12 columns header-title-row">
  76           <span class="header-title">{{ note.name }} </span>
  77           <span style="display: inline;">
  78             <span class="show-for-large-up">
  79               {% if user.is_authenticated %}
  80                 {% if already_thanked %}
  81                   <button id="thank-button-disabled" class="modify-button disabled opentip"
  82                           data-ot="You've already thanked this note"
  83                            {% include 'partial/opentip_settings.html' %}>
  84                     <i class="fa fa-thumbs-up"></i> Thank Note</button>
  85                 {% else %}
  86                   <button id="thank-button" class="modify-button"><i class="fa fa-thumbs-up"></i> Thank Note</button>
  87                   <button id="thank-button-disabled" class="modify-button disabled opentip hide"
  88                           data-ot="You've already thanked this note"
  89                            {% include 'partial/opentip_settings.html' %}>
  90                     <i class="fa fa-thumbs-up"></i> Thank Note</button>
  91                 {% endif %}
  92               {% else %}
  93                 <button id="thank-button-disabled" class="modify-button disabled opentip"
  94                           data-ot="Log in to thank this note"
  95                            {% include 'partial/opentip_settings.html' %}>
  96                     <i class="fa fa-thumbs-up"></i> Thank Note</button>
  97               {% endif %}
  98
  99               {% if user.is_authenticated %}
 100                 {% if already_flagged %}
 101                   <button id="flag-button-disabled" class="modify-button disabled opentip"
 102                           data-ot="You've already reported this note"
 103                            {% include 'partial/opentip_settings.html' %}>
 104                     <i class="fa fa-flag"></i> Report Note</button>
 105                 {% else %}
 106                   <button id="flag-button" class="modify-button"><i class="fa fa-flag"></i> Report Note</button>
 107                   <button id="flag-button-disabled" class="modify-button disabled opentip hide"
 108                           data-ot="You've already reported this note"
 109                            {% include 'partial/opentip_settings.html' %}>
 110                     <i class="fa fa-flag"></i> Report Note</button>
 111                 {% endif %}
 112               {% else %}
 113                 <button id="flag-button-disabled" class="modify-button disabled opentip"
 114                           data-ot="Log in to report this note"
 115                            {% include 'partial/opentip_settings.html' %}>
 116                     <i class="fa fa-flag"></i> Report Note</button>
 117               {% endif %}
 118
 119               {% if user.is_authenticated %}
 120                 <a href="{{ note.get_fp_url }}">
 121                   <button id="note-download-button" class="modify-button opentip"
 122                           data-ot="It costs 2 karma points to download a note"
 123                           {% include 'partial/opentip_settings.html' %}>
 124                     <i class="fa fa-download"></i> Download Note</button></a>
 125               {% else %}
 126                 <button id="note-download-button-disabled" class="modify-button disabled opentip"
 127                           data-ot="Log in to download this note"
 128                            {% include 'partial/opentip_settings.html' %}>
 129                   <i class="fa fa-download"></i> Download Note</button>
 130               {% endif %}
 131
 132               {% if user.get_profile.can_edit_items and note.user != user %}
 133                 <button id="edit-note-tags" class="modify-button" data-reveal-id="note-tag-dialog">
 134                   <i class="fa fa-pencil-square-o"></i> Edit Tags
 135                 </button>
 136               {% endif %}
 137
 138               {% if note.user == request.user %}
 139                 <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;
 140               {% endif %}
 141
 142               {% if note.license %}
 143                 {{ note.license.html|safe }} {% if note.upstream_link %}<a href="{{ note.upstream_link }}" target="_blank">{{ note.upstream_link|slice:":80" }}</a>{% endif %}
 144               {% endif %}
 145             </span>
 146           </span>
 147         </div>
 148       </div>
 149
 150       <div id="note-tags" class="row show-for-large-up">
 151         <div class="small-12 columns">
 152           <strong>Tags: </strong>
 153           <span class="tags">
 154             {% for tag in note.tags.all %}
 155               <span class="tag-span">
 156                 {{ tag.name }}{% if not forloop.last %}, {% endif %}
 157               </span>
 158             {% endfor %}
 159           </span>
 160         </div><!-- /note_tags -->
 161       </div>
 162
 163       <div id="note-tag-dialog" class="reveal-modal" data-reveal>
 164         <a class="close-reveal-modal">&#215;</a>
 165         <div class="row">
 166           <div class="small-12 columns">
 167             <h3>Edit this note's tags</h3>
 168             <input id="note_tags_input" type="text" value="{% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}">
 169             <button id="save_note_tags" type="submit" value="tags-form"><i class="fa fa-save"></i> Save</button>
 170           </div>
 171         </div>
 172       </div>
 173
 174       <div id="note-edit-dialog" class="reveal-modal" data-reveal>
 175         <a class="close-reveal-modal">&#215;</a>
 176         <div class="row">
 177           <div class="small-8 columns">
 178             <h3>Edit Your Note</h3>
 179           </div>
 180           <div class="small-4 columns text-right">
 181             <form method="POST" action="{% url 'note_delete' %}">
 182               {% csrf_token %}
 183               {{ note_delete_form }}
 184               <button id="delete-note-button" type="submit" class="scary"><i class="fa fa-trash-o"></i> Delete Note</button>
 185             </form>
 186           </div>
 187         </div>
 188         <div class="row">
 189           <form method="POST" action="{{ note.get_absolute_url }}">
 190             {% csrf_token %}
 191             <div class="small-12 large-6 columns">
 192               {% with note_edit_form.name as field %}
 193                 {{ field.errors|safe }}
 194                 <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
 195                 {{ field }}
 196                 <p>{{ field.help_text }}</p>
 197               {% endwith %}
 198             </div>
 199             <div class="small-12 large-6 columns">
 200               {% with note_edit_form.tags as field %}
 201                 {{ field.errors|safe }}
 202                 <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
 203                 {{ field }}
 204                 <p>{{ field.help_text }}</p>
 205               {% endwith %}
 206             </div>
 207             <div class="small-12 columns text-center">
 208               <button type="submit"><i class="fa fa-save"></i> Save</button>
 209             </div>
 210           </form>
 211         </div>
 212       </div>
 213
 214     </div><!-- /note header -->
 215
 216     <div class="row">
 217       <div id="tabs" class="small-12 columns">
 218         <dl class="tabs show-for-large-up">
 219           <dd id="note-tab-button" class="{% if show_note_container %}active{% endif %}">
 220             <a href="{{ note.get_absolute_url }}">Note</a>
 221           </dd>
 222           <dd id="keywords-tab-button" class="{% if show_keywords %}active{% endif %}">
 223             <a href="{{ note.get_absolute_keywords_url }}">Key Terms & Definitions</a>
 224           </dd>
 225         </dl>
 226         <div class="tabs-content">
 227         </div>
 228         {% if show_note_container %}
 229           <div id="note_container" class="">
 230             {% if pdf_controls %}
 231               <div id="zoom-buttons" class="row show-for-medium-up">
 232                 <div id="outline-btn-wrapper" class="small-1 columns hide show-for-medium-up">
 233                   <i id="outline-btn" class="zoom-button fa fa-bars fa-2x"></i>
 234                 </div>
 235                 <div class="small-4 columns">
 236                   <span>Jump to page:
 237                   <input id="scroll-to" type="text" style="width: 3em; display: inline" /></span>
 238                 </div>
 239                 <div class="small-2 small-centered columns center">
 240                   <i id="minus-btn" class="zoom-button fa fa-search-minus fa-2x"></i>
 241                   <i id="plus-btn" class="zoom-button fa fa-search-plus fa-2x"></i>
 242                 </div>
 243               </div>
 244             {% endif %}
 245
 246             <div class="row">
 247               <div class="small-12 small-centered columns medium-12 large-12 body_copy">
 248                 {% if note.static_html %}
 249                   <div id="note-content-wrapper" class="note-text">
 250                     {% if note.has_markdown %}
 251                       <span id="note-markdown" data-markdown="{{note.notemarkdown.markdown}}"></span>
 252                     {% else %}
 253                       <iframe style="border:none; width:100%; min-height: 1000px;"
 254                             id="noteframe"></iframe>
 255                       <noscript>
 256                         {{ note.text }}
 257                       </noscript>
 258                     {% endif %}
 259                   </div> <!-- .note-text -->
 260
 261                 {% else %} {# note.static_html #}
 262                   <div class="note-error">
 263                     This document's content is currently unavailable. Please try again later.
 264                   </div>
 265                 {% endif %} {# note.static_html #}
 266               </div><!-- /body_copy -->
 267             </div>
 268           </div><!-- /note_container -->
 269         {% endif %}
 270         {% if show_keywords %}
 271           <div id="keywords" class="content">
 272             <div class="row">
 273               <div class="small-12 columns">
 274                 <p>These key terms and definitions have been defined by KarmaNotes users.
 275                 You can edit them for accuracy and add more if you like.</p>
 276                 <p><button id="edit-keywords-button" class="museo700"><i class="fa fa-edit"></i> Edit Key Terms & Definitions</button></p>
 277                 <table id="keywords-data-table">
 278                   <thead>
 279                     <tr>
 280                       <td>Key Terms</td>
 281                       <td>Definitions</td>
 282                     </tr>
 283                   </thead>
 284                   {% for keyword in keywords %}
 285                     <tr>
 286                       <td>{{ keyword.word }}</td>
 287                       <td>{{ keyword.definition }}</td>
 288                     </tr>
 289                   {% endfor %}
 290                 </table>
 291
 292                 <form id="keyword-form" action="{{ note.get_absolute_keywords_url }}" method="post" class="hide">
 293                   {% csrf_token %}
 294                   {{ keyword_formset.management_form }}
 295                   <div class="hide" id="keyword-form-prototype">
 296                     <div class="row keyword-form-row">
 297                       <div class="small-12 large-4 columns">
 298                         {{ keyword_prototype_form.keyword }}
 299                       </div>
 300                       <div class="small-12 large-8 columns">
 301                         {{ keyword_prototype_form.definition }}
 302                         {{ keyword_prototype_form.id }}
 303                       </div>
 304                     </div>
 305                     <hr class="hide-for-large-up" />
 306                   </div>
 307                   <div id="keyword-form-rows">
 308                     {% for form_row in keyword_formset %}
 309                       <div class="row keyword-form-row" data-index="{{ forloop.counter0 }}">
 310                         <div class="small-12 large-4 columns">
 311                           {{ form_row.keyword }}
 312                         </div>
 313                         <div class="small-12 large-8 columns">
 314                           {{ form_row.definition }}
 315                           {{ form_row.id }}
 316                         </div>
 317                       </div>
 318                       <hr class="hide-for-large-up" />
 319                     {% endfor %}
 320                   </div>
 321                   <div class="row hide-for-medium-down">
 322                     <div class="small-12 columns">
 323                       <p class="keywords-hint">(Click <i class="fa fa-plus"></i> or press TAB in the last definition for another row)</p>
 324                     </div>
 325                   </div>
 326                   <div class="row">
 327                     <div class="small-2 columns">
 328                       <button type="submit" name="action" value="keyword-form">Save</button>
 329                     </div>
 330                     <div class="small-9 large-10 columns center">
 331                       <i id="add-row-btn" class="fa fa-plus fa-2x"></i>
 332                     </div>
 333                   </div>
 334                 </form>
 335               </div>
 336             </div>
 337           </div> <!-- keywords -->
 338         {% endif %}
 339       </div>
 340     </div>
 341
 342   </section><!--/note_content-->
 343
 344   <ol class="joyride-list" data-joyride
 345         data-options="cookie_monster: true; cookie_name: note_detail_joyride">
 346     <li data-id="note-content-wrapper" data-text="Awesome!" data-options="tip_location: top">
 347       <p>You can highlight important words or phrases in this note to add definitions for them.</p>
 348     </li>
 349     <li data-id="keywords-tab-button" data-text="Awesome!" data-options="tip_location: top">
 350       <p>Keywords you define will appear here, and you can define new ones here too.</p>
 351     </li>
 352   </ol>
 353
 354 {% endblock %}
 355
 356