From 06e73e7cd1c99ce224ee594b1e11129bc9a4e422 Mon Sep 17 00:00:00 2001
From: Jayaram Pai
Date: Wed, 25 Dec 2013 03:23:55 +0530
Subject: code tested for Scilab 5.3.3

---
 static/website/css/main.css                 |   2 +
 static/website/js/cloud.js                  | 104 ++++++++++++++++++++++++++++
 static/website/js/placeholder.js            |  48 +++++++++++++
 static/website/templates/ajax-books.html    |   9 +++
 static/website/templates/ajax-chapters.html |   9 +++
 static/website/templates/ajax-examples.html |   9 +++
 static/website/templates/index.html         |  83 +++++++++++++---------
 7 files changed, 230 insertions(+), 34 deletions(-)
 create mode 100644 static/website/js/cloud.js
 create mode 100644 static/website/js/placeholder.js
 create mode 100644 static/website/templates/ajax-books.html
 create mode 100644 static/website/templates/ajax-chapters.html
 create mode 100644 static/website/templates/ajax-examples.html

(limited to 'static/website')

diff --git a/static/website/css/main.css b/static/website/css/main.css
index 802aa5f..8f95975 100644
--- a/static/website/css/main.css
+++ b/static/website/css/main.css
@@ -5,6 +5,8 @@
 select {
     display: inline;
     margin-bottom: 15px;
+    min-width: 220px;
+    width: auto;
 }
 .CodeMirror {
     height: 99%;
diff --git a/static/website/js/cloud.js b/static/website/js/cloud.js
new file mode 100644
index 0000000..1b64532
--- /dev/null
+++ b/static/website/js/cloud.js
@@ -0,0 +1,104 @@
+$(document).ready(function() {
+    /* Code Mirror Controls */
+    $fullscreen_code = $("#fullscreen-code");
+    $toggle_code = $("#toggle-code");
+
+    $fullscreen_code.click(function(e) {
+        editor.setOption("fullScreen", !editor.getOption("fullScreen"));
+        editor.focus();
+    });
+    $toggle_code.click(function() {
+        if(editor.getOption("theme") == "monokai") {
+            editor.setOption("theme", "default");
+        } else{
+            editor.setOption("theme", "monokai");
+        }
+    });
+
+    $fullscreen_result = $("#fullscreen-result");
+    $toggle_result = $("#toggle-result");
+
+    $fullscreen_result.click(function(e) {
+        result.setOption("fullScreen", !result.getOption("fullScreen"));
+        result.focus();
+    });
+    $toggle_result.click(function() {
+        if(result.getOption("theme") == "monokai") {
+            result.setOption("theme", "default");
+        } else{
+            result.setOption("theme", "monokai");
+        }
+    });
+
+    /* 
+     * Selectors function 
+     * Write the queries using live
+    */
+    $("#categories").change(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);
+            }
+        });
+    });
+
+    $(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);
+            }
+        });
+    });
+
+    $(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);
+            }
+        });
+    });
+
+    /* Execute the code */
+    $("#execute").click(function() {
+        var csrfmiddlewaretoken = $("[name='csrfmiddlewaretoken']").val();
+        var code = editor.getValue();
+        $.ajax({
+            url:"/ajax-execute/",
+            type: "POST",
+            data: {
+                csrfmiddlewaretoken: csrfmiddlewaretoken,
+                code: code
+            },
+            dataType: "text",
+            success: function(data) {
+                result.setValue(data);
+            }
+        });
+    });
+});
diff --git a/static/website/js/placeholder.js b/static/website/js/placeholder.js
new file mode 100644
index 0000000..748afe7
--- /dev/null
+++ b/static/website/js/placeholder.js
@@ -0,0 +1,48 @@
+(function() {
+  CodeMirror.defineOption("placeholder", "", function(cm, val, old) {
+    var prev = old && old != CodeMirror.Init;
+    if (val && !prev) {
+      cm.on("blur", onBlur);
+      cm.on("change", onChange);
+      onChange(cm);
+    } else if (!val && prev) {
+      cm.off("blur", onBlur);
+      cm.off("change", onChange);
+      clearPlaceholder(cm);
+      var wrapper = cm.getWrapperElement();
+      wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
+    }
+
+    if (val && !cm.hasFocus()) onBlur(cm);
+  });
+
+  function clearPlaceholder(cm) {
+    if (cm.state.placeholder) {
+      cm.state.placeholder.parentNode.removeChild(cm.state.placeholder);
+      cm.state.placeholder = null;
+    }
+  }
+  function setPlaceholder(cm) {
+    clearPlaceholder(cm);
+    var elt = cm.state.placeholder = document.createElement("pre");
+    elt.style.cssText = "height: 0; overflow: visible";
+    elt.className = "CodeMirror-placeholder";
+    elt.appendChild(document.createTextNode(cm.getOption("placeholder")));
+    cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
+  }
+
+  function onBlur(cm) {
+    if (isEmpty(cm)) setPlaceholder(cm);
+  }
+  function onChange(cm) {
+    var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
+    wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
+
+    if (empty) setPlaceholder(cm);
+    else clearPlaceholder(cm);
+  }
+
+  function isEmpty(cm) {
+    return (cm.lineCount() === 1) && (cm.getLine(0) === "");
+  }
+})();
diff --git a/static/website/templates/ajax-books.html b/static/website/templates/ajax-books.html
new file mode 100644
index 0000000..a7eba3e
--- /dev/null
+++ b/static/website/templates/ajax-books.html
@@ -0,0 +1,9 @@
+{% if books %}
+<label>Book: </label>
+<select id="books">
+    <option value="">Select Book</option>
+{% for book in books %}
+    <option value="{{ book.id }}">{{ book.book }}</option>
+{% endfor %}
+</select>
+{% endif %}
diff --git a/static/website/templates/ajax-chapters.html b/static/website/templates/ajax-chapters.html
new file mode 100644
index 0000000..e9ef640
--- /dev/null
+++ b/static/website/templates/ajax-chapters.html
@@ -0,0 +1,9 @@
+{% if chapters %}
+<label>Chapter: </label>
+<select id="chapters">
+    <option value="">Select Chapter</option>
+{% for chapter in chapters %}
+    <option value="{{ chapter.id }}">{{ chapter.number }} - {{ chapter.name }}</option>
+{% endfor %}
+</select>
+{% endif %}
diff --git a/static/website/templates/ajax-examples.html b/static/website/templates/ajax-examples.html
new file mode 100644
index 0000000..c69e5c7
--- /dev/null
+++ b/static/website/templates/ajax-examples.html
@@ -0,0 +1,9 @@
+{% if examples %}
+<label>Example: </label>
+<select id="examples">
+    <option value="">Select Example</option>
+{% for example in examples %}
+    <option value="{{ example.id }}">{{ example.number }} - {{ example.caption }}</option>
+{% endfor %}
+</select>
+{% endif %}
diff --git a/static/website/templates/index.html b/static/website/templates/index.html
index 85f0ce3..a4b200b 100644
--- a/static/website/templates/index.html
+++ b/static/website/templates/index.html
@@ -34,43 +34,59 @@
                 <div id="selectors">
                     <div id="category-wrapper">
                         <label>Category: </label>
-                        <select><option>Select Category</option></select> 
-                    </div>
-                    <div id="book-wrapper">
-                        <label>Book: </label>
-                        <select><option>Select Book</option></select> 
-                    </div>
-                    <div id="chapter-wrapper">
-                        <label>Chapter: </label>
-                        <select><option>Select Chapter</option></select> 
-                    </div>
-                    <div id="example-wrapper">
-                        <label>Example: </label>
-                        <select><option>Select Example</option></select> 
+                        <select id="categories">
+                            <option value="">Select Category</option>
+                            <option value="10">Analog Electronics</option>
+                            <option value="3">Chemical Engineering</option>
+                            <option value="12">Computer Programming</option>
+                            <option value="2">Control Theory &amp; Control Systems</option>
+                            <option value="7">Digital Communications</option>
+                            <option value="11">Digital Electronics</option>
+                            <option value="8">Electrical Technology</option>
+                            <option value="1">Fluid Mechanics</option>
+                            <option value="9">Mathematics &amp; Pure Science</option>
+                            <option value="5">Mechanical Engineering</option>
+                            <option value="6">Signal Processing</option>
+                            <option value="4">Thermodynamics</option>
+                            <option value="13">Others</option>
+                        </select> 
                     </div>
+                    <div id="books-wrapper"></div>
+                    <div id="chapters-wrapper"></div>
+                    <div id="examples-wrapper"></div>
                 </div>
                 <div id="content">
                     <div id="input">
                         <label>
                             Scilab Code 
                             <span id="controls">
-                                <a href="#" id="toggle">
+                                <a href="#" id="toggle-code">
                                     <img src="{% static 'website/images/icon-toggle.png'%}">
                                 </a>
-                                <a href="#" id="fullscreen">
+                                <a href="#" id="fullscreen-code">
                                     <img src="{% static 'website/images/icon-fullscreen.png'%}">
                                 </a>
                             </span> <!-- /#controls -->
                         </label>
                         <form>
-                            <textarea id="code"></textarea>
+                            <textarea id="code" placeholder="Write a new code or select existing from above category..."></textarea>
                         </form>
                     </div><!-- /#input -->
                     <a id="execute" class="button">Execute</a>
 
                     <div id="output">
-                        <label>Result</label>
-                        <textarea></textarea>
+                        <label>
+                            Result
+                            <span id="controls">
+                                <a href="#" id="toggle-result">
+                                    <img src="{% static 'website/images/icon-toggle.png'%}">
+                                </a>
+                                <a href="#" id="fullscreen-result">
+                                    <img src="{% static 'website/images/icon-fullscreen.png'%}">
+                                </a>
+                            </span> <!-- /#controls -->
+                        </label>
+                        <textarea id="result"></textarea>
                     </div> <!-- /#output -->
                     <a id="bug" class="button">Report bug / Give Feedback</a>
 
@@ -88,9 +104,11 @@
         </div> <!-- /#content-wrapper -->
 
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="{% static 'website/js/cloud.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>
         var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
             lineNumbers: true,
@@ -105,23 +123,20 @@
                }
              }
         });
-
-        $(document).ready(function() {
-            $fullscreen = $("#fullscreen");
-            $toggle = $("#toggle");
-
-            $fullscreen.click(function(e) {
-                editor.setOption("fullScreen", !editor.getOption("fullScreen"));
-                editor.focus();
-            });
-            $toggle.click(function() {
-                if(editor.getOption("theme") == "monokai") {
-                    editor.setOption("theme", "default");
-                } else{
-                    editor.setOption("theme", "monokai");
-                }
-            });
+        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>
-- 
cgit