converted ajax views to dajaxice

7 files changed, 82 insertions, 115 deletions

diff --git a/static/website/css/main.css b/static/website/css/main.css
index 4b09e93..fddd0aa 100644
--- a/static/website/css/main.css
+++ b/static/website/css/main.css
@@ -21,7 +21,9 @@ body, html {
     width: 100%;
 }
 #topbar {
-    min-height: 50px;
+    height: 50px;
+    overflow: hidden;
+    margin-bottom: 10px;
     background: #4E3419;
     color: #ffffff;
     font-family: monospace;
@@ -44,7 +46,7 @@ body, html {
     margin-right: 15px;
 }
 #navlinks ul li {
-    margin: 15px 15px 15px 15px;
+    margin: 16px 15px 15px 15px;
     float: left;
 }
 #navlinks ul li a{
@@ -57,7 +59,7 @@ body, html {
     margin: 5px 0 0 0;
 }
 #selectors {
-    margin: 10px 0 0 15px;
+    margin: 0 15px 0 15px;
 }
 #selectors label {
     display: inline-block;
@@ -135,3 +137,7 @@ body, html {
     background: #ffffff;
     box-shadow: 0 0 10px #ffffff;
 }
+a.extra-link {
+    float: right;
+    color: #aaaaaa;
+}
diff --git a/static/website/js/cloud.js b/static/website/js/cloud.js
index 523cea0..7bd501c 100644
--- a/static/website/js/cloud.js
+++ b/static/website/js/cloud.js
@@ -1,4 +1,32 @@
 $(document).ready(function() {
+
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        lineWrapping: true,
+        theme: "default",
+        extraKeys: {
+           "F11": function(cm) {
+            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
+           },
+           "Esc": function(cm) {
+            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
+           }
+         }
+    });
+
+    var result = CodeMirror.fromTextArea(document.getElementById("result"), {
+        lineWrapping: true,
+        theme: "default",
+        extraKeys: {
+           "F11": function(cm) {
+            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
+           },
+           "Esc": function(cm) {
+            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
+           }
+         }
+    });
+
     /* Code Mirror Controls */
     $fullscreen_code = $("#fullscreen-code");
     $toggle_code = $("#toggle-code");
@@ -7,6 +35,7 @@ $(document).ready(function() {
         editor.setOption("fullScreen", !editor.getOption("fullScreen"));
         editor.focus();
     });
+
     $toggle_code.click(function() {
         if(editor.getOption("theme") == "monokai") {
             editor.setOption("theme", "default");
@@ -22,6 +51,7 @@ $(document).ready(function() {
         result.setOption("fullScreen", !result.getOption("fullScreen"));
         result.focus();
     });
+
     $toggle_result.click(function() {
         if(result.getOption("theme") == "monokai") {
             result.setOption("theme", "default");
@@ -32,101 +62,55 @@ $(document).ready(function() {
 
     /* 
      * Selectors function 
-     * Write the queries using live
+     * Write the queries using .on()
     */
-    $("#categories").change(function() {
+    $(document).on("change", "#categories", function() {
         $("#books-wrapper").html("");
         $("#chapters-wrapper").html("");
         $("#examples-wrapper").html("");
-
-        $.ajax({
-            url: "/ajax-books/",
-            type: "POST",
-            data: {
-                category_id: $(this).val()
-            },
-            dataType: "html",
-            success: function(data) {
-                $("#books-wrapper").html(data);
-            }
-        });
+        Dajaxice.website.books(Dajax.process, {category_id: $(this).val()});
     });
 
-    $(document).on("change", "#books", function(){
+    $(document).on("change", "#books", function() {
         $("#chapters-wrapper").html("");
         $("#examples-wrapper").html("");
-
-        $.ajax({
-            url: "/ajax-chapters/",
-            type: "POST",
-            data: {
-                book_id: $("#books").val()
-            },
-            dataType: "html",
-            success: function(data) {
-                $("#chapters-wrapper").html(data);
-            }
-        });
+        Dajaxice.website.chapters(Dajax.process, {book_id: $(this).val()});
     });
 
-    $(document).on("change", "#chapters", function(){
+    $(document).on("change", "#chapters", function() {
         $("#examples-wrapper").html("");
-        $.ajax({
-            url: "/ajax-examples/",
-            type: "POST",
-            data: {
-                chapter_id: $("#chapters").val()
-            },
-            dataType: "html",
-            success: function(data) {
-                $("#examples-wrapper").html(data);
-            }
-        });
+        Dajaxice.website.examples(Dajax.process, {chapter_id: $(this).val()});
     });
 
-    $(document).on("change", "#examples", function(){
-        $.ajax({
-            url: "/ajax-code/",
-            type: "POST",
-            data: {
-                example_id: $("#examples").val()
-            },
-            dataType: "html",
-            success: function(data) {
-                editor.setValue(data);
-            }
-        });
+    $(document).on("change", "#examples", function() {
+        Dajaxice.website.code(function(data) {
+            editor.setValue(data.code);
+        }, {example_id: $(this).val()});
     });
 
     /* Execute the code */
     $lightbox_wrapper  = $("#lightbox-me-wrapper");
     $lightbox = $("#lightbox-me");
-    $("#execute").click(function() {
-        var csrfmiddlewaretoken = $("[name='csrfmiddlewaretoken']").val();
-        var code = editor.getValue();
+    $(document).on("click", "#execute", function() {
         $("body").css("cursor", "wait");
-        $.ajax({
-            url:"/ajax-execute/",
-            type: "POST",
-            data: {
-                csrfmiddlewaretoken: csrfmiddlewaretoken,
-                code: code,
-                book_id: $("#books").val(),
-                chapter_id: $("#chapters").val(),
-                example_id: $("#examples").val()
-            },
-            dataType: "text",
-            success: function(data) {
-                $("body").css("cursor", "auto");
-                $data = $(data);
-                var output = $data.find("#output").html();
-                var plot = $data.find("#plot").html();
-                result.setValue(output);
-                if(plot) {
-                    $lightbox.html(plot);
-                    $lightbox_wrapper.lightbox_me({centered: true});
-                }
+        Dajaxice.website.execute(function(data) {
+            $("body").css("cursor", "auto");
+            result.setValue(data.output);
+            if(data.plot_path) {
+                $plot = $("<img>");
+                $plot.attr({
+                    src: data.plot_path,
+                    width: 400
+                });
+                $lightbox.html($plot);
+                $lightbox_wrapper.lightbox_me({centered: true});
             }
+        }, {
+            token: $("[name='csrfmiddlewaretoken']").val(),
+            code: editor.getValue(),
+            book_id: $("#books").val() || 0,
+            chapter_id: $("#chapters").val() || 0,
+            example_id: $("#examples").val() || 0
         });
     });
 });
diff --git a/static/website/templates/ajax-books.html b/static/website/templates/ajax-books.html
index a7eba3e..cf12559 100644
--- a/static/website/templates/ajax-books.html
+++ b/static/website/templates/ajax-books.html
@@ -3,7 +3,8 @@
 <select id="books">
     <option value="">Select Book</option>
 {% for book in books %}
-    <option value="{{ book.id }}">{{ book.book }}</option>
+    <option value="{{ book.id }}">{{ book.book }} (by {{ book.author }})</option>
 {% endfor %}
 </select>
 {% endif %}
+<a href="#" class="extra-link" id="download-book">Download Book</a>
diff --git a/static/website/templates/ajax-chapters.html b/static/website/templates/ajax-chapters.html
index e9ef640..5f39ba5 100644
--- a/static/website/templates/ajax-chapters.html
+++ b/static/website/templates/ajax-chapters.html
@@ -7,3 +7,4 @@
 {% endfor %}
 </select>
 {% endif %}
+<a href="#" class="extra-link" id="download-chapter">Download Chapter</a>
diff --git a/static/website/templates/ajax-examples.html b/static/website/templates/ajax-examples.html
index c69e5c7..f95bf7a 100644
--- a/static/website/templates/ajax-examples.html
+++ b/static/website/templates/ajax-examples.html
@@ -7,3 +7,4 @@
 {% endfor %}
 </select>
 {% endif %}
+<a href="#" class="extra-link" id="download-example">Download Example</a>
diff --git a/static/website/templates/ajax-execute.html b/static/website/templates/ajax-execute.html
deleted file mode 100644
index cb7ac66..0000000
--- a/static/website/templates/ajax-execute.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div>
-    <span id="output">{{ output }}</span>
-    <span id="plot">{% if plot_path %}<img src="{{ plot_path }}" style="width:400px;">{% endif %}</span>
-</div>
diff --git a/static/website/templates/index.html b/static/website/templates/index.html
index bc06ea3..50dee60 100644
--- a/static/website/templates/index.html
+++ b/static/website/templates/index.html
@@ -1,4 +1,5 @@
 {% load static %}
+{% load dajaxice_templatetags %}
 <html>
     <head>
         <title>Scilab on Cloud</title>
@@ -7,6 +8,7 @@
         <link href="{% static 'website/css/fullscreen.css'%}" rel="stylesheet"/>
         <link href="{% static 'website/css/monokai.css' %}" rel="stylesheet"/>
         <link href="{% static 'website/css/main.css' %}" rel="stylesheet"/>
+        {% dajaxice_js_import %}
     </head>
     <body>
         <div id="header-wrapper">
@@ -24,11 +26,11 @@
                             <li><a href="#">Contact Us</a></li>
                             <img id="scilab-logo" src="{% static 'website/images/scilab-logo.png'%}" width="100px">
                         </ul>
+                        <div class="clearfix"></div>
                     </div> <!-- /#navlinks -->
                 </div> <!-- /#topbar -->
             </div> <!-- /#header-inner -->
         </div> <!-- /#header-wrapper -->
-
         <div id="content-wrapper">
             <div id="content-inner">
                 <div id="selectors">
@@ -49,7 +51,8 @@
                             <option value="6">Signal Processing</option>
                             <option value="4">Thermodynamics</option>
                             <option value="13">Others</option>
-                        </select> 
+                        </select>
+                        <a href="#" class="extra-link" id="contributor">Contributor</a>
                     </div>
                     <div id="books-wrapper"></div>
                     <div id="chapters-wrapper"></div>
@@ -103,43 +106,18 @@
             </div> <!-- /#content-inner -->
         </div> <!-- /#content-wrapper -->
 
-        <div id="lightbox-me-wrapper">
-            <div id="lightbox-me"></div>
-        </div> <!-- /#lightbox-me-wrapper -->
+    <div id="lightbox-me-wrapper">
+        <div id="lightbox-me"></div>
+    </div> <!-- /#lightbox-me-wrapper -->
+
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="{% static '/static/dajax/jquery.dajax.core.js' %}"></script>
     <script src="{% static 'website/js/codemirror.js'%}"></script>
     <script src="{% static 'website/js/javascript.js'%}"></script>
     <script src="{% static 'website/js/fullscreen.js'%}"></script>
     <script src="{% static 'website/js/placeholder.js'%}"></script>
     <script src="{% static 'website/js/lightbox_me.js'%}"></script>
     <script src="{% static 'website/js/cloud.js'%}"></script>
-    <script>
-        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-            lineNumbers: true,
-            lineWrapping: true,
-            theme: "default",
-            extraKeys: {
-               "F11": function(cm) {
-                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
-               },
-               "Esc": function(cm) {
-                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
-               }
-             }
-        });
-        var result = CodeMirror.fromTextArea(document.getElementById("result"), {
-            lineWrapping: true,
-            theme: "default",
-            extraKeys: {
-               "F11": function(cm) {
-                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
-               },
-               "Esc": function(cm) {
-                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
-               }
-             }
-        });
-    </script>
     {% csrf_token %}
     </body>
 </html>