<template class="task-template">
  <section id="dialogs-section" class="section js-section u-category-native-ui">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-native-ui"></use></svg>
          Use system dialogs
        </h1>
        <h3>The <code>dialog</code> module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages.</h3>

        <p>This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interupting the visible elements in your page's renderer process.</p>

        <p>Open the <a href="http://electron.atom.io/docs/api/dialog/">full API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="open-file-demo-toggle" class="js-container-target demo-toggle-button">Open a File or Directory
          <div class="demo-meta u-avoid-clicks">Supports: Win, OS X, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="select-directory">View Demo</button>
            <span class="demo-response" id="selected-file"></span>
          </div>
          <p>In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/open-file.js"></pre></code>
          <h5>Main Process</h5>
          <pre><code data-path="main-process/native-ui/dialogs/open-file.js"></code></pre>

          <div class="demo-protip">
            <h2>ProTip</h2>
            <strong>The sheet-style dialog on OS X.</strong>
            <p>On OS X you can choose between a "sheet" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the <code>window</code> as the first argument in the dialog method.</p>
            <pre><code class="language-js">const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow


ipc.on('open-file-dialog-sheet', function (event) {
  const window = BrowserWindow.fromWebContents(event.sender)
  const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
})</code></pre>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="error-dialog-demo-toggle" class="js-container-target demo-toggle-button">Error Dialog
          <div class="demo-meta u-avoid-clicks">Supports: Win, OS X, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button id="error-dialog" class="demo-button">View Demo</button>
          </div>
          <p>In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the error dialog.</p>

          <p>You can use an error dialog before the app's <code>ready</code> event, which is useful for showing errors upon startup.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/error.js"></pre></code>
          <h5>Main Process</h5>
          <pre><code data-path="main-process/native-ui/dialogs/error.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="information-dialog-demo-toggle" class="js-container-target demo-toggle-button">Information Dialog
          <div class="demo-meta u-avoid-clicks">Supports: Win, OS X, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="information-dialog">View Demo</button>
            <span class="demo-response" id="info-selection"></span>
          </div>
          <p>In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the information dialog. Options may be provided for responses which can then be relayed back to the renderer process.</p>

          <p>Note: The <code>title</code> property is not displayed in OS X.</p>

          <p>An information dialog can contain an icon, your choice of buttons, title and message.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/information.js"></pre></code>
          <h5>Main Process</h5>
          <pre><code data-path="main-process/native-ui/dialogs/information.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="save-dialog-demo-toggle" class="js-container-target demo-toggle-button">Save Dialog
          <div class="demo-meta u-avoid-clicks">Supports: Win, OS X, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="save-dialog">View Demo</button>
            <span class="demo-response" id="file-saved"></span>
          </div>
          <p>In this demo, the <code>ipc</code> module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/save.js"></pre></code>
          <h5>Main Process</h5>
          <pre><code data-path="main-process/native-ui/dialogs/save.js"></code></pre>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/native-ui/dialogs/open-file')
      require('./renderer-process/native-ui/dialogs/error')
      require('./renderer-process/native-ui/dialogs/information')
      require('./renderer-process/native-ui/dialogs/save')
    </script>

  </section>
</template>