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