added bootstrap modal, iframe.

2 files changed, 34 insertions, 13 deletions

diff --git a/custom.css b/custom.css
index f58f363..2ece19e 100644
--- a/custom.css
+++ b/custom.css
@@ -14,18 +14,12 @@ This will always be an empty file in IPython
 .question {
     position: absolute;
     top: 5%;
-    right: 5%;
+    right: 4%;
     display: inline;
-    width: 20px;
+    width: 30px;
     text-align: center;
     text-decoration: none;
-    background: #333333;
     color: #ffffff;
-    border: 1px solid #333333;
-    -webkit-border-radius: 5px;
-       -moz-border-radius: 5px;
-         -o-border-radius: 5px;
-            border-radius: 5px;
     -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
          -o-transition: all .5s ease-out;
@@ -36,3 +30,8 @@ This will always be an empty file in IPython
     background: #ffffff;
     color: #333333;
 }
+.comment-frame {
+    width: 100%;
+    height: 250px;
+    border: none;
+}
diff --git a/custom.js b/custom.js
index f308f40..ccd057a 100644
--- a/custom.js
+++ b/custom.js
@@ -104,14 +104,36 @@ $([IPython.events]).on('notebook_loaded.Notebook', function(){
         
         /* creating the link */
         var $link = $("<a>?</a>");
-        href = "http://example.com/?book={0}&chapter={1}&example={2}&page={3}";
-        href = href.format(book, chapter_number, example_no, page_no);
         $link.attr({
-            href: href,
-            target: "_blank",
-            class: "question"
+            href: "#",
+            class: "question",
+            "data-book": book,
+            "data-chapter": chapter_number,
+            "data-example": example_no,
+            "data-page": page_no,
         });
+        $link.html("<img src='https://cdn4.iconfinder.com/data/icons/iconsimple-freebies/128/talk_bubbles_1.png'>");
         $(this).prepend($link);
         count++;
     });
+
+    /* appending modal skeleton */
+    var $comment_modal = $("<div id='commentModal' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> <h3 id='myModalLabel'>Python TBC Comments</h3> </div> <div class='modal-body'> <p>One fine body…</p> </div></div>");
+    $("#site").append($comment_modal);
+
+    $(".question").on("click", function() {
+        $comment_frame = $("<iframe></iframe>");
+        var book = $(this).data("book");
+        var chapter = $(this).data("chapter");
+        var example = $(this).data("example");
+        var page = $(this).data("page");
+        var src = "http://localhost:8000/comments/get/?book={0}&chapter={1}&example={2}&page={3}";
+        src = src.format(book, chapter, example, page);
+        $comment_frame.attr({
+            class: "comment-frame",
+            src: src,
+        });
+        $comment_modal.find(".modal-body").html($comment_frame);
+        $comment_modal.modal("show");
+    });
 });