Annotations in PDFs
[oweals/karmaworld.git] / karmaworld / templates / notes / note_detail.html
1 {% extends "base.html" %}
2 {% load url from future %}
3
4 {% block title %}
5   {{ note.name }}
6 {% endblock %}
7
8 {% block pagestyle %}
9   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
10   <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/annotator.min.css" />
11 {% endblock %}
12
13 {% block pagescripts %}
14   <script type="text/javascript">
15     var note_id = {{ note.id }};
16     var note_thank_url = "{% url 'thank_note' note.id %}"
17     var note_flag_url = "{% url 'flag_note' note.id %}"
18     var edit_note_tags_url = "{% url 'edit_note_tags' note.id %}"
19     var note_downloaded_url = "{% url 'downloaded_note' note.id %}"
20     var note_contents_url = "{{ S3_URL }}{{ note.get_relative_s3_path }}"
21     var pdfControls = {% if pdf_controls %} true {% else %} false {% endif %};
22     var csrf_token = "{{ csrf_token }}";
23     var annotator_js_url = "{{ STATIC_URL }}js/annotator-full.min.js";
24     var annotator_css_url = "{{ STATIC_URL }}css/annotator.min.css";
25     var setup_ajax_url = "{{ STATIC_URL }}js/setup-ajax.js";
26     var empty_js = "{{ STATIC_URL }}js/empty.js";
27   </script>
28   <script src="{{ STATIC_URL }}js/setup-ajax.js"></script>
29 {% endblock %}
30
31 {% block bodyscripts %}
32   <script src="{{ STATIC_URL }}js/note-detail.js" ></script>
33   <script src="{{ STATIC_URL }}js/pxem.jQuery.js"></script>
34   <script src="{{ STATIC_URL }}js/marked.js" ></script>
35   <script src="{{ STATIC_URL }}js/annotator-full.min.js"></script>
36   <script src="{{ STATIC_URL }}js/jquery.cookie.js"></script>
37   <script>
38     $(function() {
39       $(document).foundation('joyride', 'start');
40     });
41   </script>
42 {% endblock %}
43
44 {% block raw_content %}
45   <section id="note_content">
46
47     <div class="return-to-course show-for-large-up">
48       <div class="row">
49         <div class="small-12 columns">
50           <a href="{{ note.course.get_absolute_url }}">
51             <i class="fa fa-angle-double-left"></i> See all notes for {{ note.course.name }}
52           </a>
53         </div>
54       </div>
55     </div>
56
57     <div id="note_header">
58
59       <div class="row header-byline">
60         <div class="small-12 columns">
61           <strong>Lecture note for {{ note.course.name }} </strong>
62           at
63           {% if note.course.department.school %}
64             {{ note.course.department.school.name }}
65           {% else %}
66             {{ note.course.school.name }}
67           {% endif %}
68           &nbsp;&nbsp;
69           <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>
70         </div>
71       </div>
72
73       <div class="row museo700">
74         <div class="small-12 columns header-title-row">
75           <span class="header-title">{{ note.name }} </span>
76           <span style="display: inline;">
77             <span class="show-for-large-up">
78               {% if user.is_authenticated %}
79                 {% if already_thanked %}
80                   <button id="thank-button-disabled" class="modify-button disabled opentip"
81                           data-ot="You've already thanked this note"
82                            {% include 'partial/opentip_settings.html' %}>
83                     <i class="fa fa-thumbs-up"></i> Thank Note</button>
84                 {% else %}
85                   <button id="thank-button" class="modify-button"><i class="fa fa-thumbs-up"></i> Thank Note</button>
86                   <button id="thank-button-disabled" class="modify-button disabled opentip hide"
87                           data-ot="You've already thanked this note"
88                            {% include 'partial/opentip_settings.html' %}>
89                     <i class="fa fa-thumbs-up"></i> Thank Note</button>
90                 {% endif %}
91               {% else %}
92                 <button id="thank-button-disabled" class="modify-button disabled opentip"
93                           data-ot="Log in to thank this note"
94                            {% include 'partial/opentip_settings.html' %}>
95                     <i class="fa fa-thumbs-up"></i> Thank Note</button>
96               {% endif %}
97
98               {% if user.is_authenticated %}
99                 {% if already_flagged %}
100                   <button id="flag-button-disabled" class="modify-button disabled opentip"
101                           data-ot="You've already reported this note"
102                            {% include 'partial/opentip_settings.html' %}>
103                     <i class="fa fa-thumbs-up"></i> Report Note</button>
104                 {% else %}
105                   <button id="flag-button" class="modify-button"><i class="fa fa-thumbs-up"></i> Report Note</button>
106                   <button id="flag-button-disabled" class="modify-button disabled opentip hide"
107                           data-ot="You've already reported this note"
108                            {% include 'partial/opentip_settings.html' %}>
109                     <i class="fa fa-thumbs-up"></i> Report Note</button>
110                 {% endif %}
111               {% else %}
112                 <button id="flag-button-disabled" class="modify-button disabled opentip"
113                           data-ot="Log in to report this note"
114                            {% include 'partial/opentip_settings.html' %}>
115                     <i class="fa fa-thumbs-up"></i> Report Note</button>
116               {% endif %}
117
118               {% if user.is_authenticated %}
119                 <a href="{{ note.get_fp_url }}">
120                   <button id="note-download-button" class="modify-button opentip"
121                           data-ot="It costs 2 karma points to download a note"
122                           {% include 'partial/opentip_settings.html' %}>
123                     <i class="fa fa-download"></i> Download Note</button></a>
124               {% else %}
125                 <button id="note-download-button-disabled" class="modify-button disabled opentip"
126                           data-ot="Log in to download this note"
127                            {% include 'partial/opentip_settings.html' %}>
128                   <i class="fa fa-download"></i> Download Note</button>
129               {% endif %}
130
131               {% if user.get_profile.can_edit_items %}
132                 <button id="edit-note-tags" class="modify-button" data-reveal-id="note-tag-dialog">
133                   <i class="fa fa-pencil-square-o"></i> Edit Tags
134                 </button>
135               {% endif %}
136             </span>
137           </span>
138         </div>
139       </div>
140
141       <div id="note-tags" class="row show-for-large-up">
142         <div class="small-12 columns">
143           <strong>Tags: </strong>
144           <span class="tags">
145             {% for tag in note.tags.all %}
146               <span class="tag-span">{{ tag.name }}</span>
147             {% endfor %}
148           </span>
149         </div><!-- /note_tags -->
150       </div>
151
152       <div id="note-tag-dialog" class="reveal-modal" data-reveal>
153         <a class="close-reveal-modal">&#215;</a>
154         <div class="row">
155           <div class="small-12 columns">
156             <p>Edit this note's tags:
157             <input id="note_tags_input" type="text" value="{% for tag in note.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}"></p>
158             <button id="save_note_tags" type=button><i class="fa fa-save"></i> Save</button>
159           </div>
160         </div>
161       </div>
162
163       {% if note.license %}
164         <div class="row">
165           <div id="note_pedigree" class="twelve columns activity_details_status">
166             {{ note.license.html|safe }} {% if note.upstream_link %}<a href="{{note.upstream_link}}" target="_blank">{{ note.upstream_link|slice:":80" }}</a>{% endif %}
167           </div><!-- /note_pedigree -->
168         </div>
169       {% endif %}
170
171     </div><!-- /note header -->
172
173     <div class="row">
174       <div id="tabs" class="small-12 columns">
175         <dl class="tabs show-for-large-up" data-tab>
176           <dd class="active"><a href="#note_container">Note</a></dd>
177         </dl>
178         <div class="tabs-content">
179           <div id="note_container" class="content active">
180             {% if pdf_controls %}
181               <div id="zoom-buttons" class="row show-for-medium-up">
182                 <div id="outline-btn-wrapper" class="small-1 columns hide show-for-medium-up">
183                   <i id="outline-btn" class="zoom-button fa fa-bars fa-2x"></i>
184                 </div>
185                 <div class="small-4 columns">
186                   <span>Jump to page:
187                   <input id="scroll-to" type="text" style="width: 3em; display: inline" /></span>
188                 </div>
189                 <div class="small-2 small-centered columns center">
190                   <i id="minus-btn" class="zoom-button fa fa-search-minus fa-2x"></i>
191                   <i id="plus-btn" class="zoom-button fa fa-search-plus fa-2x"></i>
192                 </div>
193               </div>
194             {% endif %}
195
196             <div class="row">
197               <div class="small-12 small-centered columns medium-12 large-12 body_copy">
198                 {% if note.static_html %}
199                   <div class="note-text">
200                     {% if note.has_markdown %}
201                       <span id="note-markdown" data-markdown="{{note.notemarkdown.markdown}}"></span>
202                     {% else %}
203                       <iframe style="border:none; width:100%; min-height: 1000px;"
204                             id="noteframe"></iframe>
205                       <noscript>
206                         {{ note.text }}
207                       </noscript>
208                     {% endif %}
209                   </div> <!-- .note-text -->
210
211                 {% else %} {# note.static_html #}
212                   <div class="note-error">
213                     This document's content is currently unavailable. Please try again later.
214                   </div>
215                 {% endif %} {# note.static_html #}
216               </div><!-- /body_copy -->
217             </div>
218           </div>
219         </div><!-- /note_container -->
220       </div>
221     </div>
222
223   </section><!--/note_content-->
224
225   <ol class="joyride-list" data-joyride
226         data-options="cookie_monster: true; cookie_name: note_detail_joyride">
227     <li data-id="note-markdown" data-text="Awesome!" data-options="tip_location: top">
228       <p>You can highlight important words or phrases in this note to add definitions for them.</p>
229     </li>
230   </ol>
231
232 {% endblock %}
233
234