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).

bt5/erp5_ace_editor/SkinTemplateItem/portal_skins/erp5_ace_editor/ace_editor_support.xml

@@ -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>

bt5/erp5_ace_editor/bt/revision

-1
\ No newline at end of file
+2
\ No newline at end of file