Search code examples
javascriptjqueryhtmlcodemirror

hint and fullscreen problems when codemirror is inside jquery layout

I am using codeMirror inside UI Layout Plug-in

Problems:

  1. when inside layout, CodeMirror: Full Screen Editing does not work. F-11 to zoom, esc to quit
  2. I tried full screen using jquery-fullscreen-plugin , seems to work fine but then autocomplete hint does not show up
  3. with jquery-fullscreen-plugin , i tried giving hint container (see code below), works fine in full screen, does not work when not in full screen. Menu appear offset from cursor position.

I would prefer to use jquery-fullscreen-plugin but I dont know how to handle offset in hint menu because of container option

Complete Code (save as .html)

<!doctype html>
<title>CodeMirror: Any Word Completion Demo</title>
<meta charset="utf-8" />
<!-- codemirror-plugin -->
<link rel=stylesheet href="https://codemirror.net/doc/docs.css">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://codemirror.net/addon/display/fullscreen.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/addon/hint/show-hint.js"></script>
<script src="https://codemirror.net/addon/hint/anyword-hint.js"></script>
<script src="https://codemirror.net/mode/shell/shell.js"></script>
<script src="https://codemirror.net/addon/display/fullscreen.js"></script>
<!-- layout.jquery-plugin -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://layout.jquery-dev.com/lib/css/layout-default-latest.css" />
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-ui-latest.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery.layout-1.3.0.rc30.80.js"></script>
<!-- jquery-fullscreen-plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-fullscreen-plugin/1.1.4/jquery.fullscreen-min.js"></script>
<!-- html -->
<div class="myDiv" style="height:800px">
  <div class="ui-layout-center">Center</div>
  <div class="ui-layout-north">North</div>
  <div class="ui-layout-south">South</div>
  <div class="ui-layout-east"> code Mirror
    <div id="main-container">
      <button id="fullscreenButton" type="button">Full-Screen</button>
      <textarea id="code" name="code">
        #!/bin/bash # clone the repository git clone http://github.com/garden/tree # generate HTTPS credentials cd tree openssl genrsa -aes256 -out https.key 1024 openssl req -new -nodes -key https.key -out https.csr openssl x509 -req -days 365 -in https.csr -signkey https.key -out https.crt cp https.key{,.orig} openssl rsa -in https.key.orig -out https.key # start the server in HTTPS mode cd web sudo node ../server.js 443 'yes' >> ../node.log & # here is how to stop the server for pid in `ps aux | grep 'node ../server.js' | awk '{print $2}'` ; do sudo kill -9 $pid 2> /dev/null done exit 0
      </textarea>
    </div>
  </div>
  <div class="ui-layout-west">West</div>
</div>
<!-- js -->
<script>
  //
  // setupCodeMirror
  function setupCodeMirror() {
    CodeMirror.commands.autocomplete = function(cm) {
      cm.showHint({
        hint: CodeMirror.hint.anyword,
        container: $("#main-container").get(0)
      });
    };
    //
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      mode: 'shell',
      theme: 'default',
      lineWrapping: true,
      lineNumbers: true,
      extraKeys: {
        "Ctrl-Space": "autocomplete",
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      }
    });
    $("#fullscreenButton").click(function(event) {
      $("#main-container").toggleFullScreen();
    });

  }
  // init layout
  $('.myDiv').layout({
    resizeWhileDragging: true,
    resizable: true,
    east: {
      size: 800
    },
    onload_end: function() {
      setupCodeMirror();
    }
  });
  //
</script>
</article>
Solution

  • As per my findings, built in cm.setOption("fullScreen", !cm.getOption("fullScreen")); will not work when inside jquery layout. However with jquery-fullscreen-plugin , see the solution below.

    Trick is set different showhint container before and after fullscreen event.

    var showHintContainer = document.body;
  // setupCodeMirror
  function setupCodeMirror() {
    CodeMirror.commands.autocomplete = function(cm) {
      cm.showHint({
        hint: CodeMirror.hint.anyword,
        container: showHintContainer
      });
    };
    //
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      mode: 'shell',
      theme: 'default',
      lineWrapping: true,
      lineNumbers: true,
      extraKeys: {
        "Ctrl-Space": "autocomplete"
      }
    });
    $("#fullscreenButton").click(function(event) {
      $("#main-container").toggleFullScreen();
    });
    $(document).bind("fullscreenchange", function() {
      var fullScreenState = $(document).fullScreen() ? 'on' : 'off';
      if (fullScreenState === 'on') {
        showHintContainer = $("#main-container").get(0);
      } else {
        showHintContainer = document.body;
      }
    });
  }
  // init layout
  $('.myDiv').layout({
    resizeWhileDragging: true,
    resizable: true,
    east: {
      size: 800
    },
    onload_end: function() {
      setupCodeMirror();
    }
  });