the shell config parameter <code>shell-view-id</code>. The <code>Shell</code> display model relies on a div to contain a 'view'. The

acts as the view-port, i.e. the visible portion of the shell content, while the view is appended to and

scrolled up as new content is added.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">$consolePanel</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#shell-panel&#39;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>We use <strong>jquery-ui</strong>'s <code>resizable</code> to let us drag the bottom edge of the console up and down.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$consolePanel</span><span class="p">.</span><span class="nx">resizable</span><span class="p">({</span> <span class="nx">handles</span><span class="o">:</span> <span class="s2">&quot;s&quot;</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>Wire up a the keypress handler. This will be used only for shell activation.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">keypress</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>If the shell is already active drop out of the keyhandler, since all keyhandling happens in <code>Readline</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span><span class="nx">shell</span><span class="p">.</span><span class="nx">isActive</span><span class="p">())</span> <span class="p">{</span>

<span class="k">return</span><span class="p">;</span>

<span class="p">}</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Mimicking <em>Quake</em>-style dropdown consoles, we activate and show on <code>~</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;activating shell&quot;</span><span class="p">);</span>

<span class="k">if</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">126</span><span class="p">)</span> <span class="p">{</span>

<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>

<span class="nx">shell</span><span class="p">.</span><span class="nx">activate</span><span class="p">();</span>

<span class="nx">$consolePanel</span><span class="p">.</span><span class="nx">slideDown</span><span class="p">();</span>

<span class="nx">$consolePanel</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>

<span class="p">}</span>

<span class="p">});</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>Whenever we get either a <code>EOT</code> (<code>Ctrl-D</code> on empty line) or a <code>Cancel</code> (<code>Ctrl-C</code>) signal from the shell,

we deactivate the shell and hide the console.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">hideAndDeactivate</span><span class="p">()</span> <span class="p">{</span>

<span class="nx">_console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;deactivating shell&quot;</span><span class="p">);</span>

<span class="nx">shell</span><span class="p">.</span><span class="nx">deactivate</span><span class="p">();</span>

<span class="nx">$consolePanel</span><span class="p">.</span><span class="nx">slideUp</span><span class="p">();</span>

<span class="nx">$consolePanel</span><span class="p">.</span><span class="nx">blur</span><span class="p">();</span>

<span class="p">}</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Attach our hide function to the EOT and Cancel events.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">shell</span><span class="p">.</span><span class="nx">onEOT</span><span class="p">(</span><span class="nx">hideAndDeactivate</span><span class="p">);</span>

<span class="nx">shell</span><span class="p">.</span><span class="nx">onCancel</span><span class="p">(</span><span class="nx">hideAndDeactivate</span><span class="p">);</span>

<span class="p">});</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>We attach the various objects we've created here to <code>Josh.Instance</code> purely so they can be inspected via a

<span class="p">};</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>This code builds our <em>fake</em> directory structure. Since most real applications of <code>Josh</code> would not keep their