diff options
| -rw-r--r-- | static/website/css/main.css | 5 | ||||
| -rw-r--r-- | static/website/js/cloud.js | 15 | ||||
| -rw-r--r-- | static/website/js/lightbox_me.js | 234 | ||||
| -rw-r--r-- | static/website/templates/ajax-execute.html | 4 | ||||
| -rw-r--r-- | static/website/templates/index.html | 8 | ||||
| -rw-r--r-- | website/helpers.py | 28 | ||||
| -rw-r--r-- | website/views.py | 16 |
7 files changed, 283 insertions, 27 deletions
diff --git a/static/website/css/main.css b/static/website/css/main.css index 8f95975..4b09e93 100644 --- a/static/website/css/main.css +++ b/static/website/css/main.css @@ -130,3 +130,8 @@ body, html { font-size: .6em; display: block; } +#lightbox-me-wrapper { + padding: 35px; + background: #ffffff; + box-shadow: 0 0 10px #ffffff; +} diff --git a/static/website/js/cloud.js b/static/website/js/cloud.js index 6b56606..0c01c62 100644 --- a/static/website/js/cloud.js +++ b/static/website/js/cloud.js @@ -99,6 +99,8 @@ $(document).ready(function() { }); /* Execute the code */ + $lightbox_wrapper = $("#lightbox-me-wrapper"); + $lightbox = $("#lightbox-me"); $("#execute").click(function() { var csrfmiddlewaretoken = $("[name='csrfmiddlewaretoken']").val(); var code = editor.getValue(); @@ -108,13 +110,22 @@ $(document).ready(function() { type: "POST", data: { csrfmiddlewaretoken: csrfmiddlewaretoken, - code: code + code: code, + example_id: $("#examples").val() }, dataType: "text", success: function(data) { $("body").css("cursor", "auto"); - result.setValue(data); + $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}); + } } }); }); + }); diff --git a/static/website/js/lightbox_me.js b/static/website/js/lightbox_me.js new file mode 100644 index 0000000..548e8eb --- /dev/null +++ b/static/website/js/lightbox_me.js @@ -0,0 +1,234 @@ +/* +* $ lightbox_me +* By: Buck Wilson +* Version : 2.4 +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + + +(function($) { + + $.fn.lightbox_me = function(options) { + + return this.each(function() { + + var + opts = $.extend({}, $.fn.lightbox_me.defaults, options), + $overlay = $(), + $self = $(this), + $iframe = $('<iframe id="foo" style="z-index: ' + (opts.zIndex + 1) + ';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>'); + + if (opts.showOverlay) { + //check if there's an existing overlay, if so, make subequent ones clear + var $currentOverlays = $(".js_lb_overlay:visible"); + if ($currentOverlays.length > 0){ + $overlay = $('<div class="lb_overlay_clear js_lb_overlay"/>'); + } else { + $overlay = $('<div class="' + opts.classPrefix + '_overlay js_lb_overlay"/>'); + } + } + + /*---------------------------------------------------- + DOM Building + ---------------------------------------------------- */ + $('body').append($self.hide()).append($overlay); + + + /*---------------------------------------------------- + Overlay CSS stuffs + ---------------------------------------------------- */ + + // set css of the overlay + if (opts.showOverlay) { + setOverlayHeight(); // pulled this into a function because it is called on window resize. + $overlay.css({ position: 'absolute', width: '100%', top: 0, left: 0, right: 0, bottom: 0, zIndex: (opts.zIndex + 2), display: 'none' }); + if (!$overlay.hasClass('lb_overlay_clear')){ + $overlay.css(opts.overlayCSS); + } + } + + /*---------------------------------------------------- + Animate it in. + ---------------------------------------------------- */ + // + if (opts.showOverlay) { + $overlay.fadeIn(opts.overlaySpeed, function() { + setSelfPosition(); + $self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); setSelfPosition(); opts.onLoad()}); + }); + } else { + setSelfPosition(); + $self[opts.appearEffect](opts.lightboxSpeed, function() { opts.onLoad()}); + } + + /*---------------------------------------------------- + Hide parent if parent specified (parentLightbox should be jquery reference to any parent lightbox) + ---------------------------------------------------- */ + if (opts.parentLightbox) { + opts.parentLightbox.fadeOut(200); + } + + + /*---------------------------------------------------- + Bind Events + ---------------------------------------------------- */ + + $(window).resize(setOverlayHeight) + .resize(setSelfPosition) + .scroll(setSelfPosition); + + $(window).bind('keyup.lightbox_me', observeKeyPress); + + if (opts.closeClick) { + $overlay.click(function(e) { closeLightbox(); e.preventDefault; }); + } + $self.delegate(opts.closeSelector, "click", function(e) { + closeLightbox(); e.preventDefault(); + }); + $self.bind('close', closeLightbox); + $self.bind('reposition', setSelfPosition); + + + + /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- + -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ + + + /*---------------------------------------------------- + Private Functions + ---------------------------------------------------- */ + + /* Remove or hide all elements */ + function closeLightbox() { + var s = $self[0].style; + if (opts.destroyOnClose) { + $self.add($overlay).remove(); + } else { + $self.add($overlay).hide(); + } + + //show the hidden parent lightbox + if (opts.parentLightbox) { + opts.parentLightbox.fadeIn(200); + } + if (opts.preventScroll) { + $('body').css('overflow', ''); + } + $iframe.remove(); + + // clean up events. + $self.undelegate(opts.closeSelector, "click"); + $self.unbind('close', closeLightbox); + $self.unbind('repositon', setSelfPosition); + + $(window).unbind('resize', setOverlayHeight); + $(window).unbind('resize', setSelfPosition); + $(window).unbind('scroll', setSelfPosition); + $(window).unbind('keyup.lightbox_me'); + opts.onClose(); + } + + + /* Function to bind to the window to observe the escape/enter key press */ + function observeKeyPress(e) { + if((e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which==0)) && opts.closeEsc) closeLightbox(); + } + + + /* Set the height of the overlay + : if the document height is taller than the window, then set the overlay height to the document height. + : otherwise, just set overlay height: 100% + */ + function setOverlayHeight() { + if ($(window).height() < $(document).height()) { + $overlay.css({height: $(document).height() + 'px'}); + $iframe.css({height: $(document).height() + 'px'}); + } else { + $overlay.css({height: '100%'}); + } + } + + + /* Set the position of the modal'd window ($self) + : if $self is taller than the window, then make it absolutely positioned + : otherwise fixed + */ + function setSelfPosition() { + var s = $self[0].style; + + // reset CSS so width is re-calculated for margin-left CSS + $self.css({left: '50%', marginLeft: ($self.outerWidth() / 2) * -1, zIndex: (opts.zIndex + 3) }); + + + /* we have to get a little fancy when dealing with height, because lightbox_me + is just so fancy. + */ + + // if the height of $self is bigger than the window and self isn't already position absolute + if (($self.height() + 80 >= $(window).height()) && ($self.css('position') != 'absolute')) { + + // we are going to make it positioned where the user can see it, but they can still scroll + // so the top offset is based on the user's scroll position. + var topOffset = $(document).scrollTop() + 40; + $self.css({position: 'absolute', top: topOffset + 'px', marginTop: 0}) + } else if ($self.height()+ 80 < $(window).height()) { + //if the height is less than the window height, then we're gonna make this thing position: fixed. + if (opts.centered) { + $self.css({ position: 'fixed', top: '50%', marginTop: ($self.outerHeight() / 2) * -1}) + } else { + $self.css({ position: 'fixed'}).css(opts.modalCSS); + } + if (opts.preventScroll) { + $('body').css('overflow', 'hidden'); + } + } + } + + }); + + + + }; + + $.fn.lightbox_me.defaults = { + + // animation + appearEffect: "fadeIn", + appearEase: "", + overlaySpeed: 250, + lightboxSpeed: 300, + + // close + closeSelector: ".close", + closeClick: true, + closeEsc: true, + + // behavior + destroyOnClose: false, + showOverlay: true, + parentLightbox: false, + preventScroll: false, + + // callbacks + onLoad: function() {}, + onClose: function() {}, + + // style + classPrefix: 'lb', + zIndex: 999, + centered: false, + modalCSS: {top: '40px'}, + overlayCSS: {background: 'black', opacity: .3} + } +})(jQuery); diff --git a/static/website/templates/ajax-execute.html b/static/website/templates/ajax-execute.html new file mode 100644 index 0000000..cb7ac66 --- /dev/null +++ b/static/website/templates/ajax-execute.html @@ -0,0 +1,4 @@ +<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 8caa608..bc06ea3 100644 --- a/static/website/templates/index.html +++ b/static/website/templates/index.html @@ -89,7 +89,7 @@ <textarea id="result"></textarea> </div> <!-- /#output --> <a id="bug" class="button">Report bug / Give Feedback</a> - + <div id="credits"> <small> Disclaimer: Scilab is a trademark of Inria @@ -103,12 +103,16 @@ </div> <!-- /#content-inner --> </div> <!-- /#content-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 '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 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, diff --git a/website/helpers.py b/website/helpers.py index eac7720..016f2fd 100644 --- a/website/helpers.py +++ b/website/helpers.py @@ -5,7 +5,7 @@ import subprocess from soc.settings import PROJECT_DIR -def scilab_run(code, token): +def scilab_run(code, token, example_id): #Check for system commands system_commands = re.compile( 'unix\(.*\)|unix_g\(.*\)|unix_w\(.*\)|unix_x\(.*\)|unix_s\(.*\)' @@ -20,24 +20,14 @@ def scilab_run(code, token): #Finding the plot and appending xs2jpg function p = re.compile(r'.*plot.*\(.*,.*,*\).*\n') + + plot_path = '' if p.search(code): plot_exists = True code = code + '\n' - temp = code - code = '' - start, end, count = 0, 0, 0 current_time = time.time() - plot_path = [] - for (count, match) in enumerate(p.finditer(temp)): - print "count==================",count - plot_path.append( - PROJECT_DIR + '/static/tmp/{0}.jpg'.format(int(current_time) + count) - ) - end = match.end() - code += temp[start:end] - code += 'xs2jpg(gcf(), "{0}");\n'.format(plot_path[-1]) - start = end - code += temp[end:] + plot_path = PROJECT_DIR + '/static/tmp/{0}.jpg'.format(str(current_time)) + code += 'xs2jpg(gcf(), "{0}");\n'.format(plot_path) #Check whether to load scimax / maxima if 'syms' in code or 'Syms' in code: @@ -59,7 +49,6 @@ def scilab_run(code, token): #getting stuck in the prompt in case of error cmd = 'printf "lines(0)\nexec(\'{0}\',2);\nquit();"'.format(file_path) cmd += ' | /home/cheese/scilab-5.4.1/bin/scilab-adv-cli -nw' - print cmd output = subprocess.Popen( cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True @@ -67,10 +56,13 @@ def scilab_run(code, token): #os.remove(file_path) output = trim(output) - return output + data = { + 'output': output, + 'plot_path': plot_path.replace(PROJECT_DIR, '') + } + return data def trim(output): #for future use output = re.sub(r'\n \n \n', '\n', output) - #print repr(output) return output diff --git a/website/views.py b/website/views.py index aba54a2..785337f 100644 --- a/website/views.py +++ b/website/views.py @@ -66,19 +66,25 @@ def ajax_code(request): if request.method == "POST": example_id = request.POST['example_id'] example = TextbookCompanionExampleFiles.objects.using('scilab')\ - .get(id=example_id) + .get(example_id=example_id, filetype='S') example_path = '/var/www/scilab_in/uploads/' + example.filepath + f = open(example_path) code = f.readlines() f.close() - - print code return HttpResponse(code) def ajax_execute(request): if request.method == "POST": code = request.POST['code'] + example_id = request.POST.get('example_id', None) token = request.POST['csrfmiddlewaretoken'] - result = scilab_run(code, token) - return HttpResponse(result) + data = scilab_run(code, token, example_id) + return render(request, 'website/templates/ajax-execute.html', data) + + + + + + |