Alien-GvaScript

 view release on metacpan or  search on metacpan

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

The event handler may use <code>event.index</code> to know the index of the
highlighted choice.</p>

    </div>
  </div>
  <div class="TN_node" id="onPing">
    <h3 class="TN_label">onPing</h3>
    <div class="TN_content">
      <p>This event is triggered when a choice in the list is "ping-ed", i.e.
either by clicking or by pressing the <code>RETURN</code> key.
Usually this means "select", but it is up to the event handler to decide
how to interpret the event.
The event handler may use <code>event.index</code> to know the index of the
ping-ed choice.</p>

    </div>
  </div>
  <div class="TN_node" id="onCancel">
    <h3 class="TN_label">onCancel</h3>
    <div class="TN_content">
      <p>This event is triggered when the user presses the <code>ESCAPE</code> key.</p>

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

<p>Notice the <b>btn-focus</b>, <b>btn-hover</b> and <b>flash</b> classnames that are used to style
the buttons in their different states.</p>
<pre>    /* IE fix: to the ridiculously wide buttons in IE */
    .gva-btn-container .btn {width:1pt;overflow:visible;}
    /* END: IE specific */
    
    .gva-actionsbar {background-color:#E8E8E8;border:1px solid #8c8c8c;border-width:1px 0px;height:25px;padding:4px 0 1px;}
    .gva-btn-container {display:inline;}
    .gva-btn-container .btn {margin:0 3px;font-size:12px;cursor:pointer;}
    .gva-btn-container .btn {
        font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
        background:none;
        border:none;
        cursor:pointer;
        padding:1px 2px;
        color:#000;
        background-color:transparent !important;
    }
    .gva-btn-container .btn {float:left;}
    .gva-btn-container.btn-focus .btn {color:#aa0000;}
    .gva-btn-container span {display:block;float:left;height:21px;}

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

  </div>
  <div class="TN_node" id="DESCRIPTION">
    <h2 class="TN_label">DESCRIPTION</h2>
    <div class="TN_content">
      <p>Paginated data is a set of data that can be divided into differnent pages. 
It is best described as a list of items that overflow one page and best presented in several pages.
The Paginator Object is used in this case to manage retrieval (through AJAX Requests) and handling (through an onSuccess handler).
It also will take care of creating the navigation links (first, prev, next, last) and rendering them into provided container.
Navigation links are used for an on demand <i>page flipping</i>.</p>
<p>Data will be requested using an HTTP call to a provided URL.
Data Index and Size are decided using <code>INDEX</code> and <code>STEP</code> parameters respectively. 
It is up to you to make use of these parameters to decide on the items to display.</p>
  <div class="TN_node" id="Pagination_Parameters">
    <h3 class="TN_label">Pagination Parameters</h3>
    <div class="TN_content">
      <p>The Paginator Object will manage the 2 request parameters</p>
<ul>
<li><a name="item__code_INDEX__code__start_index_of_items_to_retrieve"></a><b><code>INDEX</code> start index of items to retrieve</b>
</li>
<li><a name="item__code_STEP__code___number_if_items_to_include_per_page"></a><b><code>STEP</code>  number if items to include per page</b>
<p>These two parameters would help you in deciding which part of the dataset to return.</p>
</li>
</ul>

    </div>
  </div>
  <div class="TN_node" id="Navigation_Links">
    <h3 class="TN_label">Navigation Links</h3>
    <div class="TN_content">
      <p>Navigation links are the icons used to navigate through pages (page flipping). Along with icons, a 
text with start-to-end index of displayed records / number of total records is displayed.</p>

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

=head2 onHighlight

This event is triggered when a choice in the list is highlighted.
The event handler may use C<event.index> to know the index of the
highlighted choice.

=head2 onPing

This event is triggered when a choice in the list is "ping-ed", i.e.
either by clicking or by pressing the C<RETURN> key.
Usually this means "select", but it is up to the event handler to decide
how to interpret the event.
The event handler may use C<event.index> to know the index of the
ping-ed choice.


=head2 onCancel

This event is triggered when the user presses the C<ESCAPE> key.

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

the buttons in their different states.

    /* IE fix: to the ridiculously wide buttons in IE */
    .gva-btn-container .btn {width:1pt;overflow:visible;}
    /* END: IE specific */
    
    .gva-actionsbar {background-color:#E8E8E8;border:1px solid #8c8c8c;border-width:1px 0px;height:25px;padding:4px 0 1px;}
    .gva-btn-container {display:inline;}
    .gva-btn-container .btn {margin:0 3px;font-size:12px;cursor:pointer;}
    .gva-btn-container .btn {
        font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
        background:none;
        border:none;
        cursor:pointer;
        padding:1px 2px;
        color:#000;
        background-color:transparent !important;
    }
    .gva-btn-container .btn {float:left;}
    .gva-btn-container.btn-focus .btn {color:#aa0000;}
    .gva-btn-container span {display:block;float:left;height:21px;}

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

=head1 DESCRIPTION

Paginated data is a set of data that can be divided into differnent pages. 
It is best described as a list of items that overflow one page and best presented in several pages.
The Paginator Object is used in this case to manage retrieval (through AJAX Requests) and handling (through an onSuccess handler).
It also will take care of creating the navigation links (first, prev, next, last) and rendering them into provided container.
Navigation links are used for an on demand I<page flipping>.

Data will be requested using an HTTP call to a provided URL.
Data Index and Size are decided using C<INDEX> and C<STEP> parameters respectively. 
It is up to you to make use of these parameters to decide on the items to display.

=head2 Pagination Parameters

The Paginator Object will manage the 2 request parameters

=over 2

=item C<INDEX> start index of items to retrieve

=item C<STEP>  number if items to include per page

These two parameters would help you in deciding which part of the dataset to return.

=back

=head2 Navigation Links

Navigation links are the icons used to navigate through pages (page flipping). Along with icons, a 
text with start-to-end index of displayed records / number of total records is displayed.

=head3 HTML

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

/* CUSTOM BUTTONS */
.flash {background-color:red !important;}
.flash .btn {color:red !important}

.gva-actionsbar {background-color:#E8E8E8;border:1px solid #8c8c8c;border-width:1px 0px;height:25px;padding:4px 0 1px;}
.gva-btn-container {display:inline;}
.gva-btn-container .btn {margin:0 3px;font-size:12px;cursor:pointer;}
.gva-btn-container .btn {
    font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
    background:none;
    border:none;
    cursor:pointer;
    padding:1px 2px;
    color:#000;
    background-color:transparent !important;
}
.gva-btn-container .btn {float:left;}
.gva-btn-container.btn-focus .btn {color:#aa0000;}
.gva-btn-container span {display:block;float:left;height:21px;}

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

    };
    head.appendChild(script);

    // callback name should be unique
    id++;
  }
})();

//----------event.js
// array holding fired events that are pending to be executed
// useful for avoiding accidental double firing of events
// events in queue are unique per eventType&eventTarget
GvaScript.eventsQueue = Class.create();
Object.extend(GvaScript.eventsQueue, {
    _queue: $A([]),
    hasEvent: function(target, name) {
        return (typeof this._queue.find(function(e) {
            return (e.target == target && e.name == name);
        }) == 'object');
    },
    pushEvent: function(target, name) {

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

    // only consider doubleclicks on labels
    if(!(label = this.isLabel(target))) return;

    var event_stop_mode;

    // should_ping_on_dblclick was just set within _labelClicked
    if (this.should_ping_on_dblclick) {
      event_stop_mode = this.fireEvent("Ping", label.parentNode, this.rootElement);
    }

    // stop the event unless the ping_handler decided otherwise
    Event.detailedStop(event, event_stop_mode || Event.stopAll);
  },

  _treeMouseOverHandler: function(event) {
    var target = Event.element(event);
    if(target.nodeType != 1) return;

    if(label = this.isLabel(target)) {
      Element.addClassName(label, this.classes.mouse);
      Event.stop(event);

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

    var should_ping = (!is_first_click) || !this.options.noPingOnFirstClick;

    // do the ping if necessary
    var event_stop_mode;
    if (should_ping)
    event_stop_mode = this.fireEvent("Ping", node, this.rootElement);

    // avoid a second ping from the dblclick handler
    this.should_ping_on_dblclick = !should_ping;

    // stop the event unless the ping_handler decided otherwise
    Event.detailedStop(event, event_stop_mode || Event.stopAll);
  },

//-----------------------------------------------------
// Keyboard handlers
//-----------------------------------------------------
  _addTabbingBehaviour: function() {
    if (this.options.tabIndex < 0) return; // no tabbing

    var treeNavigator = this; // handlers will be closures on this

src/event.js  view on Meta::CPAN

// array holding fired events that are pending to be executed
// useful for avoiding accidental double firing of events
// events in queue are unique per eventType&eventTarget
GvaScript.eventsQueue = Class.create();
Object.extend(GvaScript.eventsQueue, {
    _queue: $A([]),
    hasEvent: function(target, name) {
        return (typeof this._queue.find(function(e) {
            return (e.target == target && e.name == name);
        }) == 'object');
    },
    pushEvent: function(target, name) {

src/treeNavigator.js  view on Meta::CPAN

    // only consider doubleclicks on labels
    if(!(label = this.isLabel(target))) return;

    var event_stop_mode;

    // should_ping_on_dblclick was just set within _labelClicked
    if (this.should_ping_on_dblclick) {
      event_stop_mode = this.fireEvent("Ping", label.parentNode, this.rootElement);
    }

    // stop the event unless the ping_handler decided otherwise
    Event.detailedStop(event, event_stop_mode || Event.stopAll);
  },

  _treeMouseOverHandler: function(event) {
    var target = Event.element(event);
    if(target.nodeType != 1) return;

    if(label = this.isLabel(target)) {
      Element.addClassName(label, this.classes.mouse);
      Event.stop(event);

src/treeNavigator.js  view on Meta::CPAN

    var should_ping = (!is_first_click) || !this.options.noPingOnFirstClick;

    // do the ping if necessary
    var event_stop_mode;
    if (should_ping)
    event_stop_mode = this.fireEvent("Ping", node, this.rootElement);

    // avoid a second ping from the dblclick handler
    this.should_ping_on_dblclick = !should_ping;

    // stop the event unless the ping_handler decided otherwise
    Event.detailedStop(event, event_stop_mode || Event.stopAll);
  },

//-----------------------------------------------------
// Keyboard handlers
//-----------------------------------------------------
  _addTabbingBehaviour: function() {
    if (this.options.tabIndex < 0) return; // no tabbing

    var treeNavigator = this; // handlers will be closures on this

test/images/GvaScript.css  view on Meta::CPAN

/* CUSTOM BUTTONS */
.flash {background-color:red !important;}
.flash .btn {color:red !important}

.gva-actionsbar {background-color:#E8E8E8;border:1px solid #8c8c8c;border-width:1px 0px;height:25px;padding:4px 0 1px;}
.gva-btn-container {display:inline;}
.gva-btn-container .btn {margin:0 3px;font-size:12px;cursor:pointer;}
.gva-btn-container .btn {
    font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
    background:none;
    border:none;
    cursor:pointer;
    padding:1px 2px;
    color:#000;
    background-color:transparent !important;
}
.gva-btn-container .btn {float:left;}
.gva-btn-container.btn-focus .btn {color:#aa0000;}
.gva-btn-container span {display:block;float:left;height:21px;}