Add floating help panel (#115)

Author: microbit-sam

editor.html

@@ -193,9 +193,10 @@ <h2><i class="fa fa-unlock-alt"></i> <strong>{{ title }}</strong></h2>
                 </a>
                 <div class="helpsupport_container">
                     <div class="helpsupport_lhs">
-                        <div class="helpsupport"><a id="docs-link" title="View the documentation for MicroPython" href="https://microbit-micropython.readthedocs.io/" target="_blank">Documentation</a></div>
-                        <div class="helpsupport"><a id="help-link" title="Open help for this editor in a new tab" href="help.html" target="_blank" >Help</a></div>
-                        <div class="helpsupport"><a title="Get support for your micro:bit in a new tab" href="https://support.microbit.org/support/home" target="_blank">Support</a></div>
+                        <div class="helpsupport"><a id="docs-link" class="action" title="View the documentation for MicroPython" href="https://microbit-micropython.readthedocs.io/" target="_blank">Documentation</a></div>
+                        <div class="helpsupport"><a id="help-link" class="action" title="Open help for this editor in a new tab" href="help.html" target="_blank" >Help</a></div>
+                        <div class="helpsupport"><a id="support-link" class="action" title="Get support for your micro:bit in a new tab" href="https://support.microbit.org/support/home" target="_blank">Support</a></div>
+                        <div class="helpsupport hidden" id="known-issues"><a id="issues-link" class="action" title="View open issues for the Python Editor in GitHub" href="https://github.com/bbcmicrobit/PythonEditor/issues" target="_blank">Issue Tracker</a></div>
                     </div>
                     <div class="helpsupport_rhs">
                         <div class="helpsupport">Editor Version: <script>document.write(EDITOR_VERSION);</script></div>

python-main.js

@@ -345,6 +345,7 @@ function web_editor(config) {
         // If configured as experimental update editor background to indicate it
         if(config.flags.experimental) {
             EDITOR.ACE.renderer.scroller.style.backgroundImage = "url('static/img/experimental.png')";
+            $("#known-issues").removeClass('hidden');
         }
         // Configure the zoom related buttons.
         $("#zoom-in").click(function (e) {
@@ -693,14 +694,45 @@ function web_editor(config) {
         $("#command-share").click(function () {
             doShare();
         });
-        $("#command-help").click(function () {
+
+        function formatHelpPanel(){
+            if($(".helpsupport_container").offset().left !== $("#command-help").offset().left && $(window).width() > 620){
+                $(".helpsupport_container").css("top", $("#command-help").offset().top + $("#toolbox").height() + 10);
+                $(".helpsupport_container").css("left", $("#command-help").offset().left);
+            }
+            else if($(window).width() < 620){
+                $(".helpsupport_container").css("left", $("#command-help").offset().left - 200);
+                $(".helpsupport_container").css("top", $("#command-help").offset().top + $("#toolbox").height() + 10);
+            }
+        };
+
+        $("#command-help").click(function (e) {
+            // Show help
+            formatHelpPanel();
+            // Toggle visibility
             if($(".helpsupport_container").css("display") == "none"){
                 $(".helpsupport_container").css("display", "flex");
+                $(".helpsupport_container").css("display", "-ms-flexbox"); // IE10 support
             } else {
                 $(".helpsupport_container").css("display", "none");
             }
+
+            // Stop immediate closure
+            e.stopImmediatePropagation();
+        });
+
+        window.addEventListener('resize', function(){
+            if($(".helpsupport_container").is(":visible")){
+            formatHelpPanel();
+            }
+        });
+
+        // Add document click listener
+        document.body.addEventListener('click',function(event) {
+            // Close helpsupport if the click isn't on a descendent of #command-help
+            if($(event.target).closest('.helpsupport_container').length == 0 || $(event.target).prop("tagName").toLowerCase() === 'a')
+                $(".helpsupport_container").css("display", "none");
         });
-        $(".helpsupport_container").hide();
     }
 
     // Extracts the query string and turns it into an object of key/value

static/css/style.css

@@ -456,9 +456,13 @@ div.load-form {
 }
 
 .helpsupport_container {
+        position: absolute;
         margin: auto auto auto auto;
         display: none;
         padding-right: 1em;
+        z-index: 999;
+        background-color: #f2f2f2;
+        border-radius: 0.5rem;
 }
 
 .helpsupport {