Make the help dialog draggable and resizable using jQuery UI

hydra-server/app/src/menu.js

@@ -1,29 +1,28 @@
 const repl = require('./repl.js')
 
-
 class Menu {
   constructor (obj) {
     this.sketches = obj.sketches
     this.editor = obj.editor
     this.hydra = obj.hydra
 
-    // variables related to popup window
-    this.closeButton = document.getElementById("close-icon")
+    jQuery("#modal").draggable();
+    jQuery("#modal").resizable({});
+
+    this.helpButton = document.getElementById("help-icon")
     this.clearButton =  document.getElementById("clear-icon")
     this.shareButton =  document.getElementById("share-icon")
     this.shuffleButton = document.getElementById("shuffle-icon")
+
+    this.closeButton = document.getElementById("close-icon")
+
     this.editorText = document.getElementsByClassName('CodeMirror-scroll')[0]
 
     this.shuffleButton.onclick = this.shuffleSketches.bind(this)
     this.shareButton.onclick = this.shareSketch.bind(this)
     this.clearButton.onclick = this.clearAll.bind(this)
-    this.closeButton.onclick = () => {
-      if(!this.isClosed) {
-        this.closeModal()
-      } else {
-        this.openModal()
-      }
-    }
+    this.helpButton.onclick = this.openModal.bind(this)
+    this.closeButton.onclick = this.closeModal.bind(this)
 
     this.isClosed = false
     this.closeModal()
@@ -69,19 +68,13 @@ class Menu {
   }
 
   closeModal () {
-    document.getElementById("info-container").className = "hidden"
-    this.closeButton.className = "fas fa-question-circle icon"
-    this.shareButton.classList.remove('hidden')
-    this.clearButton.classList.remove('hidden')
+    document.getElementById("modal").className = "hidden"
     this.editorText.style.opacity = 1
     this.isClosed = true
   }
 
   openModal () {
-    document.getElementById("info-container").className = ""
-    this.closeButton.className = "fas fa-times icon"
-    this.shareButton.classList.add('hidden')
-    this.clearButton.classList.add('hidden')
+    document.getElementById("modal").className = ""
     this.editorText.style.opacity = 0.0
     this.isClosed = false
   }

hydra-server/public/bundle.js

@@ -565,30 +565,29 @@ module.exports = {
 },{}],7:[function(require,module,exports){
 const repl = require('./repl.js')
 
-
 class Menu {
   constructor (obj) {
     this.sketches = obj.sketches
     this.editor = obj.editor
     this.hydra = obj.hydra
 
-    // variables related to popup window
-    this.closeButton = document.getElementById("close-icon")
+    jQuery("#modal").draggable();
+    jQuery("#modal").resizable({});
+
+    this.helpButton = document.getElementById("help-icon")
     this.clearButton =  document.getElementById("clear-icon")
     this.shareButton =  document.getElementById("share-icon")
     this.shuffleButton = document.getElementById("shuffle-icon")
+
+    this.closeButton = document.getElementById("close-icon")
+
     this.editorText = document.getElementsByClassName('CodeMirror-scroll')[0]
 
     this.shuffleButton.onclick = this.shuffleSketches.bind(this)
     this.shareButton.onclick = this.shareSketch.bind(this)
     this.clearButton.onclick = this.clearAll.bind(this)
-    this.closeButton.onclick = () => {
-      if(!this.isClosed) {
-        this.closeModal()
-      } else {
-        this.openModal()
-      }
-    }
+    this.helpButton.onclick = this.openModal.bind(this)
+    this.closeButton.onclick = this.closeModal.bind(this)
 
     this.isClosed = false
     this.closeModal()
@@ -634,19 +633,13 @@ class Menu {
   }
 
   closeModal () {
-    document.getElementById("info-container").className = "hidden"
-    this.closeButton.className = "fas fa-question-circle icon"
-    this.shareButton.classList.remove('hidden')
-    this.clearButton.classList.remove('hidden')
+    document.getElementById("modal").className = "hidden"
     this.editorText.style.opacity = 1
     this.isClosed = true
   }
 
   openModal () {
-    document.getElementById("info-container").className = ""
-    this.closeButton.className = "fas fa-times icon"
-    this.shareButton.classList.add('hidden')
-    this.clearButton.classList.add('hidden')
+    document.getElementById("modal").className = ""
     this.editorText.style.opacity = 0.0
     this.isClosed = false
   }

hydra-server/public/css/modal.css

@@ -2,39 +2,41 @@
   background-color: #f00;
 }*/
 
-#info-container {
+#menu-container {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
-  height: 100%;
+  height: 40px;
+  padding: 0px;
+
   z-index: 80;
   display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
-   justify-content: center;
+   justify-content: right;
 
    -webkit-transition: height 1s;
  -moz-transition: height 1s;
  -o-transition: height 1s;
  transition: height 1s;
-}
-
-#info-container.hidden {
-  height: 40px;
-  padding: 0px;
-  pointer-events: none;
 
 }
 
 #modal {
+  position: fixed;
+  z-index: 90;
+
+  top: 15%;
+  left: 15%;
+
   width: 70%;
   height: 70%;
-  min-width: 800px;
-  min-height: 300px;
+  min-width: 400px;
+  min-height: 200px;
   background: rgba(0, 0, 0, 1);
   border: 1px solid white;
   padding: 0px;
@@ -55,6 +57,12 @@
 transition: width 1s;
 }
 
+#modal.hidden {
+  pointer-events: none;
+  height: 40px;
+  display: none;
+}
+
 @media (max-width: 768px) {
   #modal {
     width: 100%;

hydra-server/public/index.html

@@ -3,6 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <title>&lt; hydra &gt;</title>
+  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
+  <script src="./js/jquery-ui.min.js"></script>
   <script src="./bundle.js"></script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,6 +17,7 @@
  <meta name="twitter:image" content="https://cdn.glitch.com/9c3a06ab-0731-42ca-a1a3-3a249825d08f%2FScreen%20Shot%202018-06-24%20at%204.47.49%20PM.png?1531889983803">
  <meta name="twitter:card" content="summary_large_image">
  <link href="https://fonts.googleapis.com/css?family=Chivo:300,400,700" rel="stylesheet">
+  <link rel="stylesheet" href="./css/jquery-ui.min.css">
   <link rel="stylesheet" href="./css/fontawesome.css">
   <link rel="stylesheet" href="./css/codemirror.css">
   <link rel="stylesheet" href="./css/tomorrow-night-eighties.css">
@@ -32,42 +35,40 @@
     <canvas id="audio-canvas">
     </canvas>
   </div>
-  <div id="info-container" class="hidden">
-    <div id="modal">
-      <div id="modal-header">
-        <div><!--<i class="fas fa-bars icon"></i>--></div>
-        <div>
-          <i id="share-icon" title="upload to gallery" class="fas fa-upload icon" aria-hidden="true"></i>
-          <i id="clear-icon" title="clear all" class="fa fa-trash icon" aria-hidden="true"></i>
-          <i id="shuffle-icon" title="show random sketch" class="fas fa-random icon" aria-hidden="true"></i>
-          <i id="close-icon" class="fas fa-question-circle icon" aria-hidden="true"></i>
-        </div>
-      </div>
-      <div id="modal-body">
-        <div id="modal-content">
-          <h1> hydra</h1>
-          <h3> live coding networked visuals </h3>
-            <br> ///////////////////////////////////////////////////////////<br>
-            <h4> Hydra is a platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer.</h4>
-          <h4> To get started: <ol>
-              <li>Close this window </li>
-                <li>Change some numbers </li>
-                <li>Type Ctrl + Shift + Enter </li>
-              </ol>
-          </h4>
+  <div id="menu-container">
+    <i id="share-icon" title="upload to gallery" class="fas fa-upload icon" aria-hidden="true"></i>
+    <i id="clear-icon" title="clear all" class="fa fa-trash icon" aria-hidden="true"></i>
+    <i id="shuffle-icon" title="show random sketch" class="fas fa-random icon" aria-hidden="true"></i>
+    <i id="help-icon" class="fas fa-question-circle icon" aria-hidden="true"></i>
+  </div>
+  <div id="modal" class="hidden">
+    <div id="modal-header">
+      <i id="close-icon" class="fas fa-times icon" aria-hidden="true"></i>
+    </div>
+    <div id="modal-body">
+      <div id="modal-content">
+        <h1> hydra</h1>
+        <h3> live coding networked visuals </h3>
+          <br> ///////////////////////////////////////////////////////////<br>
+          <h4> Hydra is a platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer.</h4>
+        <h4> To get started: <ol>
+            <li>Close this window </li>
+              <li>Change some numbers </li>
+              <li>Type Ctrl + Shift + Enter </li>
+            </ol>
+        </h4>
 
-          <p> ///////////////////////////////////////////////////////////<br><br><br>Built using WebRTC (peer-to-peer web streaming) and WegGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions. </p>
-          <p>Features: <ul>
-          <li>Written in javascript and compatible with other javascript libraries</li>
-          <li>Available as a platform as well as a set of standalone modules </li>
-          <li>Cross-platform and requires no installation (runs in the browser)</li>
-          <li>Also available as a package for live coding from within atom text editor</li>
-          <li>Experimental and forever evolving !! </li>
-          </ul>
-          <p> For more information and instructions, see <a href="https://github.com/ojack/hydra" target="_blank">the documentation on github</a> or <a href="https://talk.lurk.org/channel/hydra" target="_blank">join the forum.</a></p><br>
-          <p class="align-right"> Created by <a class="olivia" href="https://twitter.com/_ojack_" target="_blank">olivia.</a> </p>
-          <br><br>Special thanks to the community of contributors: Alvaro O'Byrne, Alexandra Cardenas, Daniel Pinheiro, Débora Falleiros Gonzales, Guy John, Lisa Parra, Nelson Vera, Rafael Puyana, Rodrigo Velasco, Sebastian Avila, Will Humphreys, Yancy Way, Zach Krall.</span></p>
-        </div>
+        <p> ///////////////////////////////////////////////////////////<br><br><br>Built using WebRTC (peer-to-peer web streaming) and WegGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions. </p>
+        <p>Features: <ul>
+        <li>Written in javascript and compatible with other javascript libraries</li>
+        <li>Available as a platform as well as a set of standalone modules </li>
+        <li>Cross-platform and requires no installation (runs in the browser)</li>
+        <li>Also available as a package for live coding from within atom text editor</li>
+        <li>Experimental and forever evolving !! </li>
+        </ul>
+        <p> For more information and instructions, see <a href="https://github.com/ojack/hydra" target="_blank">the documentation on github</a> or <a href="https://talk.lurk.org/channel/hydra" target="_blank">join the forum.</a></p><br>
+        <p class="align-right"> Created by <a class="olivia" href="https://twitter.com/_ojack_" target="_blank">olivia.</a> </p>
+        <br><br>Special thanks to the community of contributors: Alvaro O'Byrne, Alexandra Cardenas, Daniel Pinheiro, Débora Falleiros Gonzales, Guy John, Lisa Parra, Nelson Vera, Rafael Puyana, Rodrigo Velasco, Sebastian Avila, Will Humphreys, Yancy Way, Zach Krall.</span></p>
       </div>
     </div>
   </div>