Keyword cleanup redesign
authorCharles Connell <charles@connells.org>
Wed, 9 Apr 2014 23:53:49 +0000 (19:53 -0400)
committerCharles Connell <charles@connells.org>
Wed, 9 Apr 2014 23:53:49 +0000 (19:53 -0400)
karmaworld/apps/notes/views.py
karmaworld/assets/css/note_course_pages.css
karmaworld/assets/js/note-detail.js
karmaworld/templates/base.html
karmaworld/templates/notes/note_detail.html

index 8c62087dd7e7e445312336b3d8b241d1f4471d2a..ba02345986fe1e5768ddffb0f95205e05613a0d8 100644 (file)
@@ -38,15 +38,15 @@ class NoteDetailView(DetailView):
     context_object_name = u"note" # name passed to template
     keyword_form_class = formset_factory(KeywordForm)
 
-    def post(self, requests, *args, **kwargs):
-        formset = self.keyword_form_class(requests)
+    def post(self, request, *args, **kwargs):
+        formset = self.keyword_form_class(request.POST)
         if formset.is_valid():
             self.keyword_form_valid(formset)
             self.keyword_formset = self.keyword_form_class(initial=self.get_initial_keywords())
-            return super(NoteDetailView, self).post(requests, *args, **kwargs)
+            return super(NoteDetailView, self).get(request, *args, **kwargs)
         else:
             self.keyword_formset = formset
-            return super(NoteDetailView, self).post(requests, *args, **kwargs)
+            return super(NoteDetailView, self).get(request, *args, **kwargs)
 
     def get(self, request, *args, **kwargs):
         self.keyword_formset = self.keyword_form_class(initial=self.get_initial_keywords())
@@ -96,7 +96,7 @@ class NoteDetailView(DetailView):
             except (ValueError, ObjectDoesNotExist):
                 keyword_object = Keyword()
 
-            keyword_object.note = self.note
+            keyword_object.note = self.get_object()
             keyword_object.word = word
             keyword_object.definition = definition
             keyword_object.save()
@@ -115,7 +115,6 @@ class NoteSaveView(FormView, SingleObjectMixin):
         context = {
             'object': self.get_object(),
         }
-        print "get context for NoteSaveView"
         return super(NoteSaveView, self).get_context_data(**context)
 
     def get_success_url(self):
@@ -159,17 +158,13 @@ class NoteView(View):
         return view(request, *args, **kwargs)
 
     def post(self, request, *args, **kwargs):
-        view = NoteSaveView.as_view()
+        if request.POST['action'] == 'tags-form':
+            view = NoteSaveView.as_view()
+        else:
+            view = NoteDetailView.as_view()
         return view(request, *args, **kwargs)
 
 
-class RawNoteDetailView(DetailView):
-    """ Class-based view for the raw note html for iframes """
-    template_name = u'notes/note_raw.html'
-    context_object_name = u"note"
-    model = Note
-
-
 class NoteSearchView(ListView):
     template_name = 'notes/search_results.html'
 
index 1b0ab22f3fa719eb01fda3d3a285757b39a9f8f7..6524e1642f6ba042ba8121df3e671885462443ce 100644 (file)
@@ -105,4 +105,16 @@ div.header-title-row {
 
 .keyword-form-row textarea.definition {
   max-height: 75px;
+}
+
+#add-row-btn {
+  cursor: pointer;
+}
+
+.keywords-hint {
+  font-size: 0.8em;
+}
+
+.note-keyword-toggle {
+  margin: 0 0 10px 0;
 }
\ No newline at end of file
index b150f56b243f918166c4d9a4de3d5fbbdcc4d76f..cf6358b00d2868dd373b43542607bf91085a5ad8 100644 (file)
@@ -1,9 +1,8 @@
 
-
-
-function rescalePdf(viewer, frameWidth) {
+function rescalePdf(viewer) {
   var scaleBase = 750;
   var outlineWidth = 250;
+  var frameWidth = parseInt($('#tabs-content')[0].clientWidth);
   var pdfWidth = frameWidth;
 
   if ($(viewer.sidebar).hasClass('opened')){
@@ -14,8 +13,7 @@ function rescalePdf(viewer, frameWidth) {
   viewer.rescale(newPdfScale);
 }
 
-function setupPdfViewer(noteframe) {
-  var pdfViewer = noteframe.pdf2htmlEX.defaultViewer;
+function setupPdfViewer(noteframe, pdfViewer) {
 
   $('#plus-btn').click(function (){
     pdfViewer.rescale(1.20, true, [0,0]);
@@ -38,7 +36,7 @@ function setupPdfViewer(noteframe) {
   $('#outline-btn').click(function() {
     $(pdfViewer.sidebar).toggleClass('opened');
     // rescale the PDF to fit the available space
-    rescalePdf(pdfViewer, parseInt(noteframe.frameElement.clientWidth));
+    rescalePdf(pdfViewer);
   });
 
   $('#scroll-to').change(function() {
@@ -47,7 +45,7 @@ function setupPdfViewer(noteframe) {
   });
 
   // rescale the PDF to fit the available space
-  rescalePdf(pdfViewer, parseInt(noteframe.frameElement.clientWidth));
+  rescalePdf(pdfViewer);
 }
 
 function writeNoteFrame(contents) {
@@ -249,9 +247,11 @@ $(function() {
                   } \
                 }); })";
                 injectScript(js, noteframe);
+
                 if (pdfControls == true) {
+                  var pdfViewer = noteframe.pdf2htmlEX.defaultViewer;
                   $(noteframe.document).ready(function() {
-                    setupPdfViewer(noteframe);
+                    setupPdfViewer(noteframe, pdfViewer);
                   });
                 }
               });
index 109b6a8d5607571224ff5069f426d299bbf341c8..52b25b9b5ebf3a78f533f78fe435b355a7cf6dae 100644 (file)
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/global.css">
 
   <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
-  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
-  <script type="text/javascript" src="//use.typekit.net/pnc8diw.js"></script>
-  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
-
 
   <!-- block pagescripts -->
   {% block pagescripts %}
@@ -49,6 +45,9 @@
   {% include 'footer.html' %}
   <!-- end include footer-->
 
+  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
+  <script type="text/javascript" src="//use.typekit.net/pnc8diw.js"></script>
+  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   <script src="{{ STATIC_URL }}js/opentip-jquery-excanvas.min.js"></script>
   <script src="{{ STATIC_URL }}js/foundation.min.js"></script>
   <script>
index 785d5359e6c7139b63afc0e2c9e1f6e95061a890..e30c27bcda01c3c96917ab7ca25b7f98db4e5d15 100644 (file)
           <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>
+            <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 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 %}
+            {{ 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>
       {% endif %}
 
     <div class="row">
       <div id="tabs" class="small-12 columns">
-        <dl class="tabs show-for-large-up" data-tab>
+        <dl class="tabs show-for-large-up" data-tab data-options="deep_linking: true; scroll_to_content: false">
           <dd class="active"><a href="#note_container">Note</a></dd>
-          <dd><a href="#keywords">Keywords</a></dd>
+          <dd id="keywords-tab-button"><a href="#keywords">Keywords</a></dd>
         </dl>
-        <div class="tabs-content">
+        <div id="tabs-content" class="tabs-content">
           <div id="note_container" class="content active">
             {% if pdf_controls %}
               <div id="zoom-buttons" class="row 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 id="keywords" class="content">
             <div class="row">
               <div class="small-12 columns">
-                <form id="keyword-form" action="{% url 'keyword_edit' note.slug %}" method="post">
+                <form id="keyword-form" action="{{ note.get_absolute_url }}#keywords" method="post">
                   {% 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 class="small-10 large-11 columns center">
-                      <button type="submit" name="action">Save</button>
+                  </div>
+                  <div class="row">
+                    <div class="small-2 columns">
+                      <button type="submit" name="action" value="keyword-form">Save</button>
+                    </div>
+                    <div class="small-9 large-10 columns center">
+                      <i id="add-row-btn" class="fa fa-plus fa-2x"></i>
                     </div>
                   </div>
                 </form>
 
   <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 %}