examples/controls.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Control Example</title>
    <!-- Load the required javascript files. -->
    <script src="../modules/jquery-1.12.4.js"></script>
    <script src="../modules/controls.js"></script>
    <script>
      // Initialize the controls when the document is ready.
      $(document).ready(function() {
        dlgInitControls();
      } );

      // In an extension these callbacks are defined on the Ruby side.
      // For the example we define these methods here.
      if (typeof sketchup === 'undefined') var sketchup = [];
      sketchup.ok = function() {
        alert('The SketchUp ok callback was called.');
      }
      sketchup.cancel = function() {
        alert('The SketchUp cancel callback was called.');
      }
      sketchup.foo = function() {
        alert('The SketchUp foo callback was called.');
      }
    </script>
  </head>
  <body>
    <p>
      <strong>SketchUp callbacks</strong> are assigned to elements with the
      class <code>dlg-callback-{action}</code> where <code>{action}</code> is
      the callback name defined in Ruby.
      If the callback method is missing a warning is logged.
    </p>
    <button class="dlg-callback-foo" data-access-key="f">Foo</button>
    <button class="dlg-callback-bar" data-access-key="b">Bar</button>
    <p>
      To have control over what data is passed in the callback, e.g. send form
      data, a custom JS call can be defined in the onclick attribute.
      When this is done, no callback will be automatically assigned based
      on class.
      For the ok, cancel, yes, no, close, and help controls it is however
      recommended to assign the corresponding class anyway, as it is also used
      to set up shortcuts.
    </p>
    <button class="dlg-callback-baz" data-access-key="z" onclick="alert('This JS code is defined in the onclick attribute.');">Baz</button>
    <p>
      An <strong>access key</strong> can be specified to the
      <code>data-access-key</code> attribute.
      The user can quickly trigger/focus a command by pressing Alt+{access key}.
      This can speed up the work flow for the user, especially when they used a
      keyboard shortcut, rather than a mouse click, to open the dialog in the
      first place.
      <a href="https://msdn.microsoft.com/en-us/library/windows/desktop/bb226831(v=vs.85).aspx">
      Microsoft developer guidelines for access keys</a>.
    </p>
    <label>Text:<input type="text" data-access-key="t" /></label><br />
    <label for="otherText">Other text:</label><input id="otherText" type="text" data-access-key="o" /><br />
    <label>Textarea:<br /><textarea data-access-key="a">Text</textarea></label><br />
    <label for="otherTextarea">Other textarea:<br /></label><textarea id="otherTextarea" data-access-key="r">Text</textarea><br />
    <label><input type="checkbox" name="1" data-access-key="c" />Checkbox 1</label><br />
    <input type="checkbox" name="2" id="ch" data-access-key="x" /><label for="ch">Checkbox 2</label><br />
    <p>
      If a label doesn't contain the specified access key a warning is logged.
    </p>
    <label>Label:<input type="text" data-access-key="q" value="access key 'q'" /></label><br />
    <p>
      Some controls are automatically assigned <strong>shortcuts</strong>.
      The following keys attempts to activate element with classes in the order
      given below:
    </p>
    <ul>
      <li>
        Enter -
        <code>dlg-default-action</code>
      <li>
        Esc -
        <code>dlg-callback-cancel</code>,
        <code>dlg-callback-no</code>,
        <code>dlg-callback-ok</code>,
        <code>dlg-callback-close</code>
      </li>
      <li>
        F1 -
        <code>dlg-callback-help</code>
      </li>
    </ul>
    <p>
      NOTE: If the element <code>dlg-callback-cancel</code> is missing, Esc
      will try activating controls that may represent an affirmative response.
      If there is a cancel button, make sure to give it the correct class, or
      Esc may lead to an action incidentally being carried out.
    </p>
    <p>
      Don't assign access keys to controls already have shortcuts.
      Such access keys are redundant.
      Exception: Use access keys for Yes and No controls (Y and N).
    </p>
    <p>
      In addition to defining shortcuts, the <code>dlg-default-action</code>
      class makes the command <strong>focused</strong> on page load. Use this
      class for default buttons, such as OK or Yes.
    </p>
    <button class="dlg-callback-ok dlg-default-action">OK</button>
    <button class="dlg-callback-cancel">Cancel</button>
    <p>
      Shortcuts works on links to, e.g. this
      <a class="dlg-callback-help" href="javascript:alert('Help article...');">help link triggered by F1</a>.
    </p>
  </body>
</html>