index.in.html

﻿<!DOCTYPE html>
<html lang="en" style="overflow-y: hidden;">

  <head>
    <meta charset="utf-8">
    <title>Grace Editor</title>
    <link rel="stylesheet" href="style/layout.css">
    <link rel="stylesheet" type="text/css" href="node_modules/sweetalert/dist/sweetalert.css">

    <script src="js/minigrace.js" type="text/javascript"></script>
    <script src="js/gracelib.js" type="text/javascript"></script>
    <script src="js/debugger.js" type="text/javascript"></script>
    <script src="js/collectionsPrelude.js" type="text/javascript"></script>
    <script src="js/standardGrace.js" type="text/javascript"></script>
    <script src="js/importStandardGrace.js" type="text/javascript"></script>
    <script src="js/dom.js" type="text/javascript"></script>
    <script src="js/gtk.js" type="text/javascript"></script>
    <script src="js/compiler.js" type="text/javascript"></script>
    <script src="js/lexer.js" type="text/javascript"></script>
    <script src="js/identifierKinds.js" type="text/javascript"></script>
    <script src="js/ast.js" type="text/javascript"></script>
    <script src="js/parser.js" type="text/javascript"></script>
    <script src="js/genjs.js" type="text/javascript"></script>
    <script src="js/buildinfo.js" type="text/javascript"></script>
    <script src="js/identifierresolution.js" type="text/javascript"></script>
    <script src="js/fastDict.js" type="text/javascript"></script>
    <script src="js/unixFilePath.js" type="text/javascript"></script>
    <script src="js/xmodule.js" type="text/javascript"></script>
    <script src="js/unicodedata.js" type="text/javascript"></script>
    <script src="js/errormessages.js" type="text/javascript"></script>
    <script src="js/timer.js" type="text/javascript"></script>
    <script src="node_modules/sweetalert/dist/sweetalert.min.js"></script>

    <!-- Dynamically-populated by tools/includeJSLibraries based on the Makefile
    variable ALL_LIBRARY_MODULES.  The next line is the key for the script! -->
    <!-- JAVASCRIPT_SRC_FILES -->

    <script src="scripts/setup.js"></script>
    <script src="https://code.createjs.com/createjs-2015.05.21.min.js" type="text/javascript"></script>
    <script src="https:/cdn.rawgit.com/goldfire/CanvasInput/master/CanvasInput.min.js" type="text/javascript"></script>
    <script src="js/createJsGraphicsWrapper.js" type="text/javascript"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script>
      createjs.Sound.registerSounds(
        [
          {id:"note1", src:"note1.mp3"},
          {id:"note2", src:"note2.mp3"},
          {id:"note3", src:"note3.mp3"},
          {id:"note4", src:"note4.mp3"},
          {id:"note5", src:"note5.mp3"},
          {id:"note6", src:"note6.mp3"},
          {id:"note7", src:"note7.mp3"},
          {id:"note8", src:"note8.mp3"},
          {id:"bicycle_bell", src:"bicycle_bell.wav"},
          {id:"shutter", src:"shutter.wav"},
          {id:"snap", src:"snap.wav"},
          {id:"whoosh", src:"whoosh.wav"}
        ],
        "res/");
    </script>
  </head>

  <body class="horizontal">
  <!-- Script Below: suppresses the backspace (8) from
     invoking standard browser functionality to navigate back to previous page-->
  <script>
    $(document).on("keydown", function (event) {
      if (event.which === 8 && !$(event.target).is("input, textarea")) {
        event.preventDefault();
      }
    });
  </script>

    <nav id="left-sidebar" class="vertical no-select fill-height">
      <div id="files-view" class="fill sidebar-view">
        <header id="file-header" class="header horizontal">
          <div id="upload" class="button">
            <div class="icon">&#8623;</div>
            <div class="label">Upload</div>
          </div>
          <div class="fill">Files</div>
          <!-- i/o api used by gracelib.js io_module-->
          <div id="add-file-io-api" style="display: none;"></div>
          <div id="remove-file-io-api" style="display: none;"></div>
          <div id="new-file" class="UIicons">
            <img src="style/NewFileIcon.png" alt="New File" style="height: 24px; width: 24px;"/>
          </div>
          <div id="new-dir" class="UIicons">
            <img src="style/NewFolderIcon.png" alt="New Folder" style="height: 22px; width: 26px;"/>
          </div>
        </header>
        <input id="upload-input" type="file" multiple>
        <ul id="file-tree" class="fill body"  oncontextmenu="return false;"></ul>
      </div>

      <div id="settings-view" class="hidden fill sidebar-view">
        <header class="header horizontal">
          <div class="fill">Settings</div>
        </header>
        <div class="body">
          <table id="controls">
            <tbody>
              <tr>
                <td>
                  <label for="theme">Theme</label>
                </td>
                <td>
                  <select id="theme" size="1">
                    <optgroup label="Bright">
                      <option value="ace/theme/chrome">Chrome</option>
                      <option value="ace/theme/clouds">Clouds</option>
                      <option value="ace/theme/crimson_editor">Crimson Editor</option>
                      <option value="ace/theme/dawn">Dawn</option>
                      <option value="ace/theme/dreamweaver">Dreamweaver</option>
                      <option value="ace/theme/eclipse">Eclipse</option>
                      <option value="ace/theme/github">GitHub</option>
                      <option value="ace/theme/solarized_light">Solarized Light</option>
                      <option value="ace/theme/textmate">TextMate</option>
                      <option value="ace/theme/tomorrow">Tomorrow</option>
                      <option value="ace/theme/xcode">XCode</option>
                      <option value="ace/theme/kuroir">Kuroir</option>
                      <option value="ace/theme/katzenmilch">KatzenMilch</option>
                    </optgroup>
                    <optgroup label="Dark">
                      <option value="ace/theme/ambiance">Ambiance</option>
                      <option value="ace/theme/chaos">Chaos</option>
                      <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
                      <option value="ace/theme/cobalt">Cobalt</option>
                      <option value="ace/theme/idle_fingers">idle Fingers</option>
                      <option value="ace/theme/kr_theme">krTheme</option>
                      <option value="ace/theme/merbivore">Merbivore</option>
                      <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
                      <option value="ace/theme/mono_industrial">Mono Industrial</option>
                      <option value="ace/theme/monokai">Monokai</option>
                      <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
                      <option value="ace/theme/solarized_dark">Solarized Dark</option>
                      <option value="ace/theme/terminal">Terminal</option>
                      <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
                      <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
                      <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
                      <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
                      <option value="ace/theme/twilight">Twilight</option>
                      <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
                    </optgroup>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <label for="fontsize">Font size</label>
                </td>
                <td>
                  <select id="fontsize" size="1">
                    <option value="10px">10px</option>
                    <option value="11px">11px</option>
                    <option value="12px" selected="selected">12px</option>
                    <option value="13px">13px</option>
                    <option value="14px">14px</option>
                    <option value="16px">16px</option>
                    <option value="18px">18px</option>
                    <option value="20px">20px</option>
                    <option value="24px">24px</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <label for="tabsize">Tab size</label>
                </td>
                <td>
                  <select id="tabsize" size="1">
                    <option value="2">2</option>
                    <option value="4" selected="selected">4</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <label for="folding">Code folding</label>
                </td>
                <td>
                  <select id="folding" size="1">
                    <option value="manual">Off</option>
                    <option value="markbegin" selected="selected">On</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <label for="soft-wrap">Soft wrap</label>
                </td>
                <td>
                  <select id="soft-wrap" size="1">
                    <option value="off" selected="selected">Off</option>
                    <option value="80">80</option>
                    <option value="free">Edge</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <label for="highlight-active">Highlight active line</label>
                </td>
                <td>
                  <input type="checkbox" name="highlight-active" id="highlight-active" checked="">
                </td>
              </tr>
              <tr>
                <td>
                  <label for="show-hidden">Show invisibles</label>
                </td>
                <td>
                  <input type="checkbox" name="show-hidden" id="show-hidden" checked="">
                </td>
              </tr>
              <tr>
                <td>
                  <label for="display-indent-guides">Show indent guides</label>
                </td><td>
                  <input type="checkbox" name="display-indent-guides" id="display-indent-guides" checked="">
                </td>
              </tr>
              <tr>
                <td>
                  <label for="show-gutter">Show gutter</label>
                </td>
                <td>
                  <input type="checkbox" id="show-gutter" checked="">
                </td>
              </tr>
              <td>
                  <label for="auto-pair">Auto-pair quotes & brackets</label>
                </td>
                <td>
                  <input type="checkbox" id="auto-pair" checked="">
                </td>
              </td>
            </tbody>
          </table>
          <div id="versionBackground">
            <div id="version" class="version">
              Grace Compiler Version (put here by function at end of compiler.js)
            </div>
            <div class="version">
              IDE vIDE--VERSION, commit LAST--GIT--COMMIT
            </div>
          </div>
        </div>
      </div>

      <div id="refactor-view" class="hidden fill sidebar-view">
        <header class="header horizontal">
          <div class="fill">Utilities</div>
        </header>
        <div class="body">
          <div id="refactor-reindent" class="button refactor-sidebar" value="files">
            <span class="icon">&#x21b3;</span>
            <span class="label">Reindent File</span>
          </div>
          <div id="remove-unicode" class="button refactor-sidebar" value="files">
            <span class="icon">&#9100;</span>
            <span class="label">Replace Unicode</span>
          </div>
          <div id="download-all-files" class="button refactor-sidebar" value="files">
            <span class="icon">↯</span>
            <span class="label">Download All Files</span>
          </div>
        </div>
      </div>

      <div class="fill sidebar-buttons">
        <input type="search" id="search-bar" name="search-bar" placeholder="Filter..." autocomplete="on">
        <div id="filler-div" class="hidden" value="filler">
        </div>
        <div id="show-files" class="button hidden" value="files">
          <span class="icon">&#8801;</span>
          <span class="label">Files</span>
        </div>
        <div id="show-settings" class="button" value="settings">
          <span class="icon">&#x2699;</span>
          <span class="label">Settings</span>
        </div>
        <div id="show-refactor" class="button" value="refactor">
          <span class="icon">&#8596;</span>
          <span class="label">Utilities</span>
        </div>
      </div>
    </nav>

    <div id="left-sidebar-resize" class="no-select">
      <div id="left-sidebar-hide-reveal" class="no-select">
        <b>&#x276c;</b>
      </div>
    </div>

    <div id="grace-view" class="view horizontal fill fill-height hidden">
      <section class="open-file vertical fill no-select">
        <header class="header horizontal">
          <a class="download button" download="new-file.grace">
            <span class="icon">&#8623;</span>
            <span class="label">Download</span>
          </a>
          <div class="fill">
            <div class="file-name"></div>
            <input class="file-name-input">
          </div>
          <div class="button">
            <a id="help-div" href="http://web.cecs.pdx.edu/~grace/doc/" target="_blank">
              <span id="help" class="label">Help?</span></a>
          </div>
          <div class="search button">
            <span class="label">Search</span>
            <span class="icon">&#x26B2;</span>
          </div>
          <div class="delete button">
            <span class="label">Delete</span>
            <span class="icon">&#8855;</span>
          </div>
        </header>
        <div class="editor fill fill-height"></div>
      </section>

      <section class="feedback fill vertical">
        <div class="compilation no-select">
          <header class="header horizontal waiting">
            <div id="output-hide-reveal" class="no-select">
              <div id="output-hide-reveal-icon">
                <b>&#x276c;</b>
              </div>
            </div>
            <div class="run button fill" id="runButton">
              <span class="label">Run</span>
              <span class="icon">&#9654;</span>
            </div>
            <div class="build fill button">
              <span class="label">Run</span>
              <span class="icon">&#9654;</span>
            </div>
            <div class="wait fill">
              <span class="label">Building</span><span class="dots">...</span>
            </div>
            <div class="stop button fill">
              <span class="label">Stop</span>
              <span class="icon">&#9632;</span>
            </div>
          </header>
        </div>

        <pre id="output-view" class="output fill"></pre>
      </section>
    </div>

    <div id="image-view" class="view horizontal fill fill-height hidden">
      <header class="custom-header header horizontal">
        <div class="fill">
          <div class="file-name media-file">File Name</div>
          <input class="file-name-input media-file" style="display: none;">
        </div>
        <div class="file-delete delete button">
          <span class="label">Delete</span>
          <span class="icon">⊗</span>
        </div>
      </header>
      <div id="image-wrap">
        <img id="image-display" src="" width="700" height="550" alt="Image file">
      </div>
    </div>

    <div id="audio-view" class="view horizontal fill fill-height hidden">
      <header class="custom-header header horizontal">
        <div class="fill">
          <div class="file-name media-file">File Name</div>
          <input class="file-name-input media-file" style="display: none;">
        </div>
        <div class="file-delete delete button">
          <span class="label">Delete</span>
          <span class="icon">⊗</span>
        </div>
      </header>
      <div id="audio-wrap">
        <audio controls id="audio-display">
          <source src="scripts/plink.wav" type="audio/wav">
          Your browser does not support the audio element.
        </audio>
        </div>
    </div>

  <div id="graphics-view" class="no-select">
    <section>
      <canvas id="graphics" width="300" height="500"></canvas>
    </section>
  </div>

    <div id="minigrace-dump">
      <input id="debugtoggle" type="checkbox">
    </div>
    <nav class="context-menu no-select" oncontextmenu="return false;">
      <ul class="menu-items" oncontextmenu="return false;">
        <li class="menu-item">
          <a href="#" id="deleteSelected" class="menu-link">
            <i class="item-delete"></i> Delete
          </a>
        </li>
        <li class="menu-item">
          <a href="#" id="renameSelected" class="menu-link">
            <i class="item-rename"></i> Rename
          </a>
        </li>
        <li class="menu-item">
          <a href="#" id="downloadFolder" class="menu-link">
            <i class="item-rename"></i> Download
          </a>
        </li>
      </ul>
    </nav>
  </body>

</html>