index.haml

!!! 5
%html(lang='en')
  %head
    %meta(http-equiv='content-type' content='text/html;charset=utf-8')/

    %title jQuery-typing
    - version = '0.2.0'
    - version_h1 = 'v0.2'

    %link(rel='stylesheet' href='style.css' type='text/css')


    -#-----------
    -#  scripts
    -#-----------

    %script(src='jquery-1.4.2.min.js' type='text/javascript')
    %script(src='jquery.typing-#{version}.min.js' type='text/javascript')
    :javascript
      $(function () {
        // focus on first input if user can see it without scrolling
        var $input = $(':text').first();
        if ($input.offset().top + $input.height() < $(window).height()) {
          $input.focus();
        }

        // assign typing handlers
        $('tbody tr').each(function (i, tr) {
          var $tr = $(tr),
              $input = $tr.find(':input'),
              delay = $tr.find('.delay').text(),
              $inProgress = $tr.find('.in-progress'),
              $dot = $('<span class="bright">&#x25CF;</span>');

          $inProgress.empty();
          $dot.appendTo($inProgress);

          $input.typing({
            start: function () {$dot.removeClass('bright')},
            stop: function () {$dot.addClass('bright')},
            delay: delay
          });
        });
      });


  %body

    -#--------------------
    -#  Google Analytics
    -#--------------------

    :javascript
      var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-8752416-2']);
        _gaq.push(['_trackPageview']);
        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
        })();


    -#-----------------
    -#  GitHub ribbon
    -#-----------------

    <a href="http://github.com/narfdotpl/jquery-typing"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a>


    -#-----------
    -#  content
    -#-----------

    #content

      %h1
        jQuery-typing
        %span.version #{version_h1}

      %p Assign callbacks for started/stopped typing events.


      %h2 Usage
      :markdown

            $(':text').typing({
                start: function (event, $elem) {
                    $elem.css('background', '#fa0');
                },
                stop: function (event, $elem) {
                    $elem.css('background', '#f00');
                },
                delay: 400
            });

        `typing` command takes key-value object with `start`, `stop` and
        `delay` keys. They are all optional, so you can either pass only
        `start` callback, `stop` callback, `stop` callback and `delay` time,
        or everything.

        `delay` is amount of time the plugin waits for another keypress before
        judging that typing has stopped; it is expressed in milliseconds and
        defaults to 400. Regardless of `delay`'s value, the `stop` callback is
        called immediately when blur event occurs.

        Callbacks are passed two arguments: event that caused callback
        execution and jQuery object for matched element. Possible events are
        `keypress` or `keydown` for `start` callbacks and `keyup` or `blur`
        for `stop` callbacks.


      %h2 Demo
      %table
        %thead
          %tr
            %th type
            %th.wide element
            %th.wide typing in progress
            %th delay [ms]
        %tbody
          %tr
            %td text
            %td
              %input(type='text')
            %td.in-progress JavaScript disabled
            %td.delay 400
          %tr
            %td text
            %td
              %input(type='text')
            %td.in-progress JavaScript disabled
            %td.delay 1000
          %tr
            %td textarea
            %td
              %textarea(rows='3')
            %td.in-progress JavaScript disabled
            %td.delay 0


      %h2 Download
      :markdown
        Get production version from<br />
        <http://narf.pl/jquery-typing/jquery.typing-#{version}.min.js>

        For development version visit [GitHub][].

          [GitHub]: http://github.com/narfdotpl/jquery-typing


      %h2 Meta
      :markdown
        jQuery-typing is written by [Maciej Konieczny][].  This software is
        released into the [public domain][] and uses [semantic versioning][]
        for release numbering.

          [Maciej Konieczny]: http://narf.pl/
          [public domain]: http://unlicense.org/
          [semantic versioning]: http://semver.org/