diff options
| -rw-r--r-- | custom.css | 15 | ||||
| -rw-r--r-- | custom.js | 32 |
2 files changed, 34 insertions, 13 deletions
@@ -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; +} @@ -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"); + }); }); |