Commit f758ef28 authored by Arnaud Fontaine's avatar Arnaud Fontaine

Add maximize and full-screen modes for Ace editor.

Full-screen mode is available only if the browser supports full-screen API
(Chromium >= 15 and Gecko >= 9.0 but enabled by default in Gecko >= 10.0).
parent d076553e
No related merge requests found
......@@ -69,6 +69,44 @@
.ace_line {\n
color: black !important;\n
}\n
\n
#maximize_message {\n
display: block !important;\n
position: absolute !important;\n
top: 0 !important;\n
right: 0px !important;\n
z-index: 4243 !important;\n
padding: 10px;\n
font-size: 16px;\n
font-weight: bold;\n
background-color: black;\n
color: white;\n
}\n
\n
.maximize {\n
display: block !important;\n
position: absolute !important;\n
top: 0 !important;\n
left: 0 !important;\n
z-index: 4242 !important;\n
overflow: auto !important;\n
}\n
\n
input.ace_editor_action_button {\n
padding: 2px;\n
margin-top: 5px;\n
margin-right: 5px;\n
}\n
\n
div:-webkit-full-screen {\n
width: 100% !important;\n
height: 100% !important;\n
}\n
\n
div:-moz-full-screen {\n
width: 100% !important;\n
height: 100% !important;\n
}\n
</style>\n
\n
<style type="text/css" tal:content="structure string:\n
......@@ -81,7 +119,7 @@
style="display: none;"></textarea>\n
\n
<div tal:attributes="id string:${container_div_id}"\n
style="width: 200px; height: 200px;\n
style="width: 200px; height: 400px;\n
border: 1px solid #97B0D1; background-color: white !important;">\n
<div style="position: relative !important; width: 100%; height: 100%;"\n
tal:content="content"\n
......@@ -93,39 +131,98 @@
<script type="text/javascript"\n
tal:attributes="src string:${portal_url}/ace/mode-python.js"></script>\n
<script type="text/javascript"\n
tal:define=\'fullscreen_button string:<input type="button" value="Fullscreen" onclick="switchToFullScreen()" class="ace_editor_action_button" />\'\n
tal:content="structure string:\n
window.onload = function() {\n
var container = $(\'#${container_div_id}\');\n
function set_container_size(event) {\n
width = $(window).innerWidth() - container.offset().left - 50;\n
if(width < 200)\n
width = 200;\n
container.width(width);\n
\n
height = $(window).innerHeight() - container.offset().top - 50;\n
if(height < 200)\n
height = 200;\n
container.height(height);\n
\n
if(event != null)\n
editor.resize();\n
ace_editor_container_div = null;\n
ace_editor = null;\n
\n
function switchToFullScreen(id) {\n
element = document.getElementById(\'${container_div_id}\');\n
if((document.fullScreenElement && document.fullScreenElement !== null) ||\n
(!document.mozFullScreen && !document.webkitIsFullScreen)) {\n
if (element.requestFullScreen) {\n
element.requestFullScreen();\n
}\n
else if (element.mozRequestFullScreen) {\n
element.mozRequestFullScreen();\n
}\n
else if (element.webkitRequestFullScreen) {\n
element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);\n
}\n
ace_editor.resize();\n
}\n
}\n
\n
set_container_size(null);\n
window.onresize = set_container_size;\n
function setContainerDivSize(event) {\n
width = $(window).innerWidth() - ace_editor_container_div.offset().left * 2 - 1;\n
if(width < 200)\n
width = 200;\n
ace_editor_container_div.width(width);\n
\n
height = $(window).innerHeight() - ace_editor_container_div.offset().top * 2 - 1;\n
if(height < 400)\n
height = 400;\n
ace_editor_container_div.height(height);\n
\n
if(event != null)\n
ace_editor.resize();\n
}\n
\n
var editor = ace.edit(\'${div_id}\');\n
editor.resize();\n
ace_editor_container_div_parent_before_maximized = null;\n
ace_editor_maximize_mode_message = $(\'<span id=&quot;maximize_message&quot;>Press ESC to leave maximize mode</span>\');\n
\n
function unmaximize(event) {\n
if(event.keyCode == 27) {\n
ace_editor_container_div.removeClass(\'maximize\');\n
ace_editor_container_div.prependTo(ace_editor_container_div_parent_before_maximized);\n
setContainerDivSize(event);\n
}\n
}\n
\n
function maximize() {\n
ace_editor_container_div_parent_before_maximized = ace_editor_container_div.parent();\n
\n
ace_editor_container_div.addClass(\'maximize\');\n
ace_editor_container_div.width($(window).width());\n
ace_editor_container_div.height($(window).height());\n
\n
body_element = $(\'body\');\n
\n
body_element.prepend(ace_editor_maximize_mode_message);\n
ace_editor_maximize_mode_message.css(\'opacity\', 1.0);\n
ace_editor_maximize_mode_message.animate({opacity: 0.25}, 1500,\n
function() { $(this).remove(); });\n
\n
ace_editor_container_div.prependTo(body_element);\n
$(document).keyup(unmaximize);\n
ace_editor.resize();\n
}\n
\n
window.onload = function() {\n
ace_editor_container_div = $(\'#${container_div_id}\');\n
setContainerDivSize(null);\n
window.onresize = setContainerDivSize;\n
\n
ace_editor = ace.edit(\'${div_id}\');\n
ace_editor.resize();\n
\n
var PythonMode = require(\'ace/mode/python\').Mode;\n
editor.getSession().setMode(new PythonMode());\n
ace_editor.getSession().setMode(new PythonMode());\n
\n
var textarea = $(\'#${id}\');\n
editor.getSession().on(\'change\', function() {\n
textarea.val(editor.getSession().getValue());\n
ace_editor.getSession().on(\'change\', function() {\n
textarea.val(ace_editor.getSession().getValue());\n
});\n
\n
if(typeof document.cancelFullScreen != \'undefined\' ||\n
(typeof document.mozFullScreenEnabled != \'undefined\' && document.mozFullScreenEnabled) ||\n
typeof document.webkitCancelFullScreen != \'undefined\')\n
$$(\'${fullscreen_button}\').insertAfter($$(\'input.ace_editor_action_button\'));\n
};">\n
</script>\n
\n
<input type="button" value="Maximize" onclick="maximize()"\n
class="ace_editor_action_button" />\n
</tal:block>
]]></unicode> </value>
......
1
\ No newline at end of file
2
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment