From 6f42052f66add1979bd2951c34998b1be29959c6 Mon Sep 17 00:00:00 2001
From: Zambom <erikzambom@hotmail.com>
Date: Thu, 22 Sep 2016 19:31:37 -0300
Subject: [PATCH] Passing javascript to external static file [Issue: #73]

---
 amadeus/settings.py                              |  4 ++++
 courses/templates/subject/form_view_teacher.html | 74 +++++---------------------------------------------------------------------
 forum/static/js/forum.js                         | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 forum/templates/forum_list.html                  |  2 +-
 forum/templates/post_list.html                   |  2 +-
 5 files changed, 65 insertions(+), 71 deletions(-)
 create mode 100644 forum/static/js/forum.js

diff --git a/amadeus/settings.py b/amadeus/settings.py
index 34afcfe..4053e2f 100644
--- a/amadeus/settings.py
+++ b/amadeus/settings.py
@@ -144,6 +144,10 @@ USE_TZ = True
 
 STATIC_URL = '/static/'
 
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, "static"),
+]
+
 # Files
 MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'uploads')
 MEDIA_URL = '/uploads/'
diff --git a/courses/templates/subject/form_view_teacher.html b/courses/templates/subject/form_view_teacher.html
index 71c0666..572d7c7 100644
--- a/courses/templates/subject/form_view_teacher.html
+++ b/courses/templates/subject/form_view_teacher.html
@@ -1,71 +1,7 @@
 {% load static i18n %}
 
 {% block javascript %}
-    <script type="text/javascript">
-        var baseUrl = '{% url "forum:index" %}';
-        var formUrl = '{% url "forum:create" %}';
-
-        function showForum(topic) {
-            $.ajax({
-                url: baseUrl, 
-                data: {'topic': topic},
-                success: function(data) {
-                    $(".forum_topics").html(data);
-                }
-            });
-
-            $('#forumModal').modal();
-        }
-
-        function getForm() {
-            $.ajax({
-                url: formUrl, 
-                success: function(data) {
-                    $(".forum_form").html(data);
-                }
-            });
-
-            $(".forum_form").show();
-        }
-
-        var postsUrl = '{% url "forum:posts" %}';
-        var formPostsUrl = '';
-
-        function showPosts(forum) {
-            if ($("#collapse" + forum).hasClass('in')) {
-                $("#collapse" + forum).collapse('hide');
-            } else {
-                $.ajax({
-                    url: postsUrl, 
-                    data: {'forum': forum},
-                    success: function(data) {
-                        $("#collapse" + forum).find(".well").html(data);
-                    }
-                });
-
-                $("#collapse" + forum).collapse('show');
-            }
-        }
-
-        var postsAnswerUrl = '{% url "forum:post_answers" %}';
-        var formPostsAnswersUrl = '';
-
-        function showPostsAnswers(post) {
-            if ($("#collapse" + post).hasClass('in')) {
-                $("#collapse" + post).collapse('hide');
-            } else {
-                $.ajax({
-                    url: postsAnswerUrl, 
-                    data: {'post': post},
-                    success: function(data) {
-                        $("#collapse" + post).find(".well").html(data);
-                    }
-                });
-
-                $("#collapse" + post).collapse('show');
-            }
-        }
-    </script>
+    <script type="text/javascript" src="{% static 'js/forum.js' %}"></script>
 {% endblock %}
 
 <div class="panel panel-default">
@@ -73,7 +9,7 @@
         <div class="panel-heading">
             <div class="row">
                 <div class="col-md-9 col-sm-9">
-                    <h3>{{topic}}</h3>
+                    <h3>{{ topic }}</h3>
                 </div>
                 <div class="col-md-3 col-sm-3">
                     <a href="{% url 'course:update_topic' topic.slug%}" class="btn">{% trans "edit" %}</a>
@@ -82,8 +18,8 @@
         </div>
     </a>
     <div class="panel-body">
-        <p>{{topic.description|linebreaks}}</p>
-        <a href="javascript:showForum('{{topic.slug}}')">Forum</a>
+        <p>{{ topic.description|linebreaks }}</p>
+        <a href="javascript:showForum('{% url 'forum:index' %}', '{{topic.slug}}')">Forum</a>
     </div>
 </div>
 
@@ -93,7 +29,7 @@
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title" id="myModalLabel">
-                    <button type="button" class="btn btn-primary btn-sm" onclick="getForm();"><i class="fa fa-plus"></i> {% trans 'Create Forum' %}</button>
+                    <button type="button" class="btn btn-primary btn-sm" onclick="getForm('{% url 'forum:create' %}');"><i class="fa fa-plus"></i> {% trans 'Create Forum' %}</button>
                 </h4>
             </div>
             <div class="modal-body">
diff --git a/forum/static/js/forum.js b/forum/static/js/forum.js
new file mode 100644
index 0000000..e816baf
--- /dev/null
+++ b/forum/static/js/forum.js
@@ -0,0 +1,54 @@
+function showForum(url, topic) {
+    $.ajax({
+        url: url, 
+        data: {'topic': topic},
+        success: function(data) {
+            $(".forum_topics").html(data);
+        }
+    });
+
+    $('#forumModal').modal();
+}
+
+function getForm(url) {
+    $.ajax({
+        url: url, 
+        success: function(data) {
+            $(".forum_form").html(data);
+        }
+    });
+
+    $(".forum_form").show();
+}
+
+function showPosts(url, forum) {
+    if ($("#collapse" + forum).hasClass('in')) {
+        $("#collapse" + forum).collapse('hide');
+    } else {
+        $.ajax({
+            url: url, 
+            data: {'forum': forum},
+            success: function(data) {
+                $("#collapse" + forum).find(".well").html(data);
+            }
+        });
+
+        $("#collapse" + forum).collapse('show');
+    }
+}
+
+function showPostsAnswers(url, post) {
+    if ($("#collapse" + post).hasClass('in')) {
+        $("#collapse" + post).collapse('hide');
+    } else {
+        $.ajax({
+            url: url, 
+            data: {'post': post},
+            success: function(data) {
+                $("#collapse" + post).find(".well").html(data);
+            }
+        });
+
+        $("#collapse" + post).collapse('show');
+    }
+}
\ No newline at end of file
diff --git a/forum/templates/forum_list.html b/forum/templates/forum_list.html
index ca50ee2..40fec35 100644
--- a/forum/templates/forum_list.html
+++ b/forum/templates/forum_list.html
@@ -2,7 +2,7 @@
 
 {% if foruns|length > 0 %}
     {% for forum in foruns %}
-        <a class="forum_collapse" role="button" href="javascript: showPosts('{{ forum.slug }}')" aria-expanded="false">
+        <a class="forum_collapse" role="button" href="javascript: showPosts('{% url 'forum:posts' %}', '{{ forum.slug }}')" aria-expanded="false">
             <div class="page-header">
                 <h1 id="timeline">{{ forum }}</h1>
                 <b>{% trans 'Description' %}: </b>{{ forum.description }}<p>
diff --git a/forum/templates/post_list.html b/forum/templates/post_list.html
index 28f8793..a226a02 100644
--- a/forum/templates/post_list.html
+++ b/forum/templates/post_list.html
@@ -4,7 +4,7 @@
     <ul class="timeline post">
         {% for post in posts %}
             <li>
-                <a class="post_collapse" role="button" href="javascript: showPostsAnswers('{{ post.id }}')" aria-expanded="false">
+                <a class="post_collapse" role="button" href="javascript: showPostsAnswers('{% url 'forum:post_answers' %}', '{{ post.id }}')" aria-expanded="false">
                     <div class="timeline-panel">
                         <div class="row">
                             <div class="col-xs-2 col-sm-2 col-md-2">
--
libgit2 0.21.2