Alien-GvaScript

 view release on metacpan or  search on metacpan

doc/html/KeyMap.html  view on Meta::CPAN

specification is met. The keymap object as a whole can then be
registered as a usual HTML event handler associated to some DOM
element (most often the <i>document</i> element), and will dispatch key
events to appropriate handlers.</p>
<p>Key specifications look like <b>A</b> (key 'A'),
 <b>C_S_A</b> (control-shift-A), <b>A_DELETE</b> (alt-Delete).
They are formed from :</p>
<ul>
<li><a name="item_keynames"></a><b>keynames</b>
<p>For printable characters, the keyname is just that character; for special
editing keys such as backspace, arrow up, etc., names are taken 
from the following list of builtins :</p>
<pre>  BACKSPACE ESCAPE     TAB    RETURN LINEFEED SPACE 
  PAGE_UP   PAGE_DOWN  END    HOME 
  LEFT      UP         RIGHT  DOWN
  INSERT    DELETE     PAUSE  WINDOWS  PRINT_SCREEN
  CAPS_LOCK NUM_LOCK   SCROLL_LOCK
  F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12
  CTRL      SHIFT      ALT</pre>

</li>

doc/html/KeyMap.html  view on Meta::CPAN

    </div>
  </div>
  <div class="TN_node" id="rules">
    <h3 class="TN_label"><code>rules</code></h3>
    <div class="TN_content">
      <pre>  aKeyMap.rules.push(new_rules);
  
  aKeyMap.rules.pop();</pre>

<p>A DHTML application may need to temporarily change the key handlers (for 
example when switching from navigation mode to editing mode).
Therefore, a keymap object actually holds a <i>stack</i> of rules
and publishes this stack in its <code>rules</code> property.
Rules pushed on top of that stack will take precedence over 
pre-existing rules; conversely, popping from the stack
restores the keymap to its previous state.</p>

    </div>
  </div>
  <div class="TN_node" id="MapAllKeys">
    <h3 class="TN_label"><code>MapAllKeys</code></h3>

lib/Alien/GvaScript/KeyMap.pod  view on Meta::CPAN

Key specifications look like B<A> (key 'A'),
 B<C_S_A> (control-shift-A), B<A_DELETE> (alt-Delete).
They are formed from :

=over

=item keynames

For printable characters, the keyname is just that character; for special
editing keys such as backspace, arrow up, etc., names are taken 
from the following list of builtins :

  BACKSPACE ESCAPE     TAB    RETURN LINEFEED SPACE 
  PAGE_UP   PAGE_DOWN  END    HOME 
  LEFT      UP         RIGHT  DOWN
  INSERT    DELETE     PAUSE  WINDOWS  PRINT_SCREEN
  CAPS_LOCK NUM_LOCK   SCROLL_LOCK
  F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12
  CTRL      SHIFT      ALT

lib/Alien/GvaScript/KeyMap.pod  view on Meta::CPAN

stop paying attention to the Shift key for C<keypress> events.


=head2 C<rules>

  aKeyMap.rules.push(new_rules);
  
  aKeyMap.rules.pop();

A DHTML application may need to temporarily change the key handlers (for 
example when switching from navigation mode to editing mode).
Therefore, a keymap object actually holds a I<stack> of rules
and publishes this stack in its C<rules> property.
Rules pushed on top of that stack will take precedence over 
pre-existing rules; conversely, popping from the stack
restores the keymap to its previous state.


=head2 C<MapAllKeys>

  // grab all keys

lib/Alien/GvaScript/lib/GvaScript.js  view on Meta::CPAN

  // of same autocompleter but for different input element
  this._runningAjax = [];

  this.setdatasource(datasource);

  // prepare an initial keymap; will be registered at first
  // focus() event; then a second set of keymap rules is pushed/popped
  // whenever the choice list is visible
  var basicHandler = this._keyDownHandler.bindAsEventListener(this);
  var detectedKeys = /^(BACKSPACE|DELETE|KP_.*|.)$/;
                   // catch any single char, plus some editing keys
  var basicMap     = { DOWN: this._ArrowDownHandler.bindAsEventListener(this),
                       REGEX: [[null, detectedKeys, basicHandler]] };
  this.keymap = new GvaScript.KeyMap(basicMap);

  // prepare some stuff to be reused when binding to inputElements
  this.reuse = {
    onblur  : this._blurHandler.bindAsEventListener(this),
    onclick : this._clickHandler.bindAsEventListener(this)
  };
}

src/autoCompleter.js  view on Meta::CPAN

  // of same autocompleter but for different input element
  this._runningAjax = [];

  this.setdatasource(datasource);

  // prepare an initial keymap; will be registered at first
  // focus() event; then a second set of keymap rules is pushed/popped
  // whenever the choice list is visible
  var basicHandler = this._keyDownHandler.bindAsEventListener(this);
  var detectedKeys = /^(BACKSPACE|DELETE|KP_.*|.)$/;
                   // catch any single char, plus some editing keys
  var basicMap     = { DOWN: this._ArrowDownHandler.bindAsEventListener(this),
                       REGEX: [[null, detectedKeys, basicHandler]] };
  this.keymap = new GvaScript.KeyMap(basicMap);

  // prepare some stuff to be reused when binding to inputElements
  this.reuse = {
    onblur  : this._blurHandler.bindAsEventListener(this),
    onclick : this._clickHandler.bindAsEventListener(this)
  };
}

test/functional/form/form.gvascript.css  view on Meta::CPAN

  float: left;
  background-color: #ddd;
  border-right: 1px dashed #aaa;
  color: #aaa;
  height: 100%;
  margin-right: 5px;
  padding: 0 2px;
  font-weight: bold;
}
form {width:800px;border:1px solid #aaa;padding:4px;margin:0 auto;background-color:#f5f5f5;}
form.form-edited {border-color:green;}
form.form-error {border-color:red;}
div.header, div.authors {
  float:left; width:50%;
}

label {
  display: block;
  padding: 2px;
  color: #aaa;
  font-weight: bold;

test/functional/form/form.gvascript.html  view on Meta::CPAN

     * Declaring Form Global Responders
     */
  GvaScript.Form.Responders.register({
    onInit: function(gva_form) {
      gva_form.valid = new Validation(gva_form.formElt, {onSubmit:false});
      log('Form <em>[Late]</em> onInit: validation module attached')
    },

    onChange: function(gva_form, event) {
      log('Form <em>[Late]</em> onChange');
      gva_form.formElt.addClassName('form-edited');
      gva_form.formElt.removeClassName('form-error');
      
      setInfoMessage('form updated ... make sure to save.');
    },

    onBeforeSubmit: function(gva_form) {
      log('Form <em>[Late]</em> onBeforeSubmit: hides form message and resets its classnames');
      gva_form.formElt.removeClassName('form-edited');
      gva_form.formElt.removeClassName('form-error');
      hideMessage();
    },

    onAfterSubmit: function(gva_form) {
      log('Form <em>[Late]</em> onAfterSubmit: display success message');
      setInfoMessage('thank you!'); 
    },

    onDataValidationError: function(gva_form, msg) {
      log('Form <em>[Late]</em> onDataValidationError: form submission failed on the client-side. set form-error classname and display error message');
      gva_form.formElt.addClassName('form-error'); 
      gva_form.formElt.removeClassName('form-edited'); 
      setErrorMessage(msg);
    },

    onSubmitFailure: function(gva_form, msg) {
      log('Form <em>[Late]</em> onSubmitFailure: form submission failed on server-side. set form-error classname and display error message');
      gva_form.formElt.addClassName('form-error'); 
      gva_form.formElt.removeClassName('form-edited'); 
      setErrorMessage(msg);
    },

    onBeforeDestroy: function(gva_form) {
      gva_form.valid = null;
      log('Form <em>[Late]</em> onBeforeDestroy : validation module detached');
    }

  });

  GvaScript.Form.EarlyResponders.register({
    onBeforeSubmit: function(gva_form) {
      log('Form <em>[Early]</em> onBeforeSubmit: checks for form changes then runs fields validation');

      if(!gva_form.formElt.hasClassName('form-edited')) {
        alert('nothing change - skip trip to server');
        return false;
      }
      else {
        if (gva_form.valid.validate()) return true;
        else {
          gva_form.fire('DataValidationError', 'Some fields failed to validate!');
          return false;
        }
      }