ICEmobile
  1. ICEmobile
  2. MOBI-647

Component Clicked state handling

    Details

    • Type: Improvement Improvement
    • Status: Open
    • Priority: Major Major
    • Resolution: Unresolved
    • Affects Version/s: 1.2 Final
    • Fix Version/s: 1.4 Beta
    • Component/s: Faces, Spring
    • Labels:
      None
    • Environment:
      n/a

      Description

      Component Clicked state handling

        Activity

        Hide
        Philip Breau added a comment - - edited

        Clickable regions will have the following states:

        unpressed: ui-btn-up-a
        pressed: ui-btn-down-a
        ****
        <mobi:commandButton>
        <mobi:accordion>
        <mobi:tabSet>
        <mobi:flipSwitch>
        <mobi:menuButton>

        Show
        Philip Breau added a comment - - edited Clickable regions will have the following states: unpressed: ui-btn-up-a pressed: ui-btn-down-a **** <mobi:commandButton> <mobi:accordion> <mobi:tabSet> <mobi:flipSwitch> <mobi:menuButton>
        Hide
        Philip Breau added a comment -

        One important thing that jquery mobile does is intelligently detect whether the click is a scrolling event or not. If it is, a timeout is used to prevent attaching a button depressed state when scrolling:

        $( document ).bind( {
        "vmousedown vmousecancel vmouseup vmouseover vmouseout focus blur scrollstart": function( event ) {
        var theme,
        $btn = $( closestEnabledButton( event.target ) ),
        isTouchEvent = event.originalEvent && /^touch/.test( event.originalEvent.type ),
        evt = event.type;

        if ( $btn.length ) {
        theme = $btn.attr( "data-" + $.mobile.ns + "theme" );

        if ( evt === "vmousedown" ) {
        if ( isTouchEvent ) {
        // Use a short delay to determine if the user is scrolling before highlighting
        hov = setTimeout( function()

        { $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme ); }

        , hoverDelay );
        } else

        { $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme ); }

        } else if ( evt === "vmousecancel" || evt === "vmouseup" )

        { $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme ); }

        else if ( evt === "vmouseover" || evt === "focus" ) {
        if ( isTouchEvent ) {
        // Use a short delay to determine if the user is scrolling before highlighting
        foc = setTimeout( function()

        { $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme ); }

        , hoverDelay );
        } else

        { $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme ); }

        } else if ( evt === "vmouseout" || evt === "blur" || evt === "scrollstart" ) {
        $btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
        if ( hov )

        { clearTimeout( hov ); }

        if ( foc )

        { clearTimeout( foc ); }

        }
        }
        },
        "focusin focus": function( event )

        { $( closestEnabledButton( event.target ) ).addClass( $.mobile.focusClass ); }

        ,
        "focusout blur": function( event )

        { $( closestEnabledButton( event.target ) ).removeClass( $.mobile.focusClass ); }

        });

        attachEvents = null;
        };

        Show
        Philip Breau added a comment - One important thing that jquery mobile does is intelligently detect whether the click is a scrolling event or not. If it is, a timeout is used to prevent attaching a button depressed state when scrolling: $( document ).bind( { "vmousedown vmousecancel vmouseup vmouseover vmouseout focus blur scrollstart": function( event ) { var theme, $btn = $( closestEnabledButton( event.target ) ), isTouchEvent = event.originalEvent && /^touch/.test( event.originalEvent.type ), evt = event.type; if ( $btn.length ) { theme = $btn.attr( "data-" + $.mobile.ns + "theme" ); if ( evt === "vmousedown" ) { if ( isTouchEvent ) { // Use a short delay to determine if the user is scrolling before highlighting hov = setTimeout( function() { $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme ); } , hoverDelay ); } else { $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme ); } } else if ( evt === "vmousecancel" || evt === "vmouseup" ) { $btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme ); } else if ( evt === "vmouseover" || evt === "focus" ) { if ( isTouchEvent ) { // Use a short delay to determine if the user is scrolling before highlighting foc = setTimeout( function() { $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme ); } , hoverDelay ); } else { $btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme ); } } else if ( evt === "vmouseout" || evt === "blur" || evt === "scrollstart" ) { $btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme ); if ( hov ) { clearTimeout( hov ); } if ( foc ) { clearTimeout( foc ); } } } }, "focusin focus": function( event ) { $( closestEnabledButton( event.target ) ).addClass( $.mobile.focusClass ); } , "focusout blur": function( event ) { $( closestEnabledButton( event.target ) ).removeClass( $.mobile.focusClass ); } }); attachEvents = null; };
        Hide
        Judy Guglielmin added a comment -

        Done on a component by component basis. Client side api will be tricky, but will be addressed in 1.4Beta.
        commendButton in JSP and JSF is complete with exception of the contentPane attribute (which will be replaced in 1.4Beta when contentStack client api is completed).

        Show
        Judy Guglielmin added a comment - Done on a component by component basis. Client side api will be tricky, but will be addressed in 1.4Beta. commendButton in JSP and JSF is complete with exception of the contentPane attribute (which will be replaced in 1.4Beta when contentStack client api is completed).

          People

          • Assignee:
            Steve Maryka
            Reporter:
            Philip Breau
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated: