Software Archive
Read-only legacy content
17061 Discussions

Disable pull to refresh default chrome

Timothée_G_
Beginner
870 Views

how to disable default pull to refresh by google in webview crosswalk?
They add in the last versions, is not a native behavior for web app (reload full app), furthermore the pull to refresh is handled internally if we create one.

I saw that in orders crosswalk lines, they did that, is it possible in the intelxdk.config.additions.xml?

<preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect"/>

 

https://code.google.com/p/chromium/issues/detail?id=456515

https://crosswalk-project.org/jira/browse/XWALK-3901

0 Kudos
1 Solution
PaulF_IntelCorp
Employee
870 Views

Here's a more generic implementation you can use:

// Function to disable "pull-to-refresh" effect present in some webviews.
// Especially Crosswalk 12 and above (Chromium 41+) runtimes.

// Adapted from this example: https://code.google.com/p/chromium/issues/detail?id=456515#c8
// Source: Copyright (c) 2015 by jdduke (http://jsbin.com/qofuwa/2/edit)
// Source: Released under the MIT license: http://jsbin.mit-license.org

// <input id="preventPullToRefresh"  type="checkbox">Prevent pull-to-refresh?</input>
// <input id="preventOverscrollGlow" type="checkbox">Prevent overscroll glow?</input>
// <input id="preventScroll"         type="checkbox">Prevent scroll?</input>

window.addEventListener('load', function() {
//  var preventPullToRefreshCheckbox  = document.getElementById('preventPullToRefresh') ;
//  var preventOverscrollGlowCheckbox = document.getElementById("preventOverscrollGlow") ;
//  var preventScrollCheckbox         = document.getElementById("preventScroll") ;

    var lastTouchY = 0 ;
    var maybePreventPullToRefresh = false ;

    // Pull-to-refresh will only trigger if the scroll begins when the
    // document's Y offset is zero.

    var touchstartHandler = function(e) {
        if( e.touches.length != 1 ) {
            return ;
        }
        lastTouchY = e.touches[0].clientY ;
        // maybePreventPullToRefresh = (preventPullToRefreshCheckbox.checked) && (window.pageYOffset == 0) ;
        maybePreventPullToRefresh = (window.pageYOffset == 0) ;
    }

    // To suppress pull-to-refresh it is sufficient to preventDefault the
    // first overscrolling touchmove.

    var touchmoveHandler = function(e) {
        var touchY = e.touches[0].clientY ;
        var touchYDelta = touchY - lastTouchY ;
        lastTouchY = touchY ;

        if (maybePreventPullToRefresh) {
            maybePreventPullToRefresh = false ;
            if (touchYDelta > 0) {
                e.preventDefault() ;
                // console.log("pull-to-refresh event detected") ;
                return ;
            }
        }

        // if (preventScrollCheckbox.checked) {
        //     e.preventDefault() ;
        //     return ;
        // }

        // if (preventOverscrollGlowCheckbox.checked) {
        //     if (window.pageYOffset == 0 && touchYDelta > 0) {
        //         e.preventDefault() ;
        //         return ;
        //     }
        // }
    }

    document.addEventListener('touchstart', touchstartHandler, false) ;
    document.addEventListener('touchmove', touchmoveHandler, false) ;
}) ;

 

View solution in original post

0 Kudos
9 Replies
David_B_12
Beginner
870 Views

+1.  I really need a solution to this issue too.  I'm in the process of evaluating whether native or html5 is the way to go for a major game and I just can't have these dumb refresh events happening.

 

 

0 Kudos
amir_b_
Beginner
870 Views

+1

0 Kudos
PaulF_IntelCorp
Employee
870 Views

It's not possible to pass Chromium commands to the build system, at this time. This is something that I've requested of the build system and am hoping to see implemented, but it isn't there, yet. I will add your names to the list of customer's needing this feature.

0 Kudos
PaulF_IntelCorp
Employee
870 Views

Thank you for that workaround!

0 Kudos
PaulF_IntelCorp
Employee
870 Views

Just an FYI -- I have tested a prelim feature that allows the addition of Chromium command-line options with the build. When it becomes available in the general build we'll include an announcement in the forum. There is still some work that needs to be done, so I am unable to provide a timeline.

0 Kudos
Timothée_G_
Beginner
870 Views

Nice

0 Kudos
PaulF_IntelCorp
Employee
871 Views

Here's a more generic implementation you can use:

// Function to disable "pull-to-refresh" effect present in some webviews.
// Especially Crosswalk 12 and above (Chromium 41+) runtimes.

// Adapted from this example: https://code.google.com/p/chromium/issues/detail?id=456515#c8
// Source: Copyright (c) 2015 by jdduke (http://jsbin.com/qofuwa/2/edit)
// Source: Released under the MIT license: http://jsbin.mit-license.org

// <input id="preventPullToRefresh"  type="checkbox">Prevent pull-to-refresh?</input>
// <input id="preventOverscrollGlow" type="checkbox">Prevent overscroll glow?</input>
// <input id="preventScroll"         type="checkbox">Prevent scroll?</input>

window.addEventListener('load', function() {
//  var preventPullToRefreshCheckbox  = document.getElementById('preventPullToRefresh') ;
//  var preventOverscrollGlowCheckbox = document.getElementById("preventOverscrollGlow") ;
//  var preventScrollCheckbox         = document.getElementById("preventScroll") ;

    var lastTouchY = 0 ;
    var maybePreventPullToRefresh = false ;

    // Pull-to-refresh will only trigger if the scroll begins when the
    // document's Y offset is zero.

    var touchstartHandler = function(e) {
        if( e.touches.length != 1 ) {
            return ;
        }
        lastTouchY = e.touches[0].clientY ;
        // maybePreventPullToRefresh = (preventPullToRefreshCheckbox.checked) && (window.pageYOffset == 0) ;
        maybePreventPullToRefresh = (window.pageYOffset == 0) ;
    }

    // To suppress pull-to-refresh it is sufficient to preventDefault the
    // first overscrolling touchmove.

    var touchmoveHandler = function(e) {
        var touchY = e.touches[0].clientY ;
        var touchYDelta = touchY - lastTouchY ;
        lastTouchY = touchY ;

        if (maybePreventPullToRefresh) {
            maybePreventPullToRefresh = false ;
            if (touchYDelta > 0) {
                e.preventDefault() ;
                // console.log("pull-to-refresh event detected") ;
                return ;
            }
        }

        // if (preventScrollCheckbox.checked) {
        //     e.preventDefault() ;
        //     return ;
        // }

        // if (preventOverscrollGlowCheckbox.checked) {
        //     if (window.pageYOffset == 0 && touchYDelta > 0) {
        //         e.preventDefault() ;
        //         return ;
        //     }
        // }
    }

    document.addEventListener('touchstart', touchstartHandler, false) ;
    document.addEventListener('touchmove', touchmoveHandler, false) ;
}) ;

 

0 Kudos
PaulF_IntelCorp
Employee
870 Views

There is now another solution for this problem, which is much simpler. See the very bottom of this doc page: https://software.intel.com/en-us/xdk/docs/adding-special-build-options-to-your-xdk-cordova-app-with-the-intelxdk-config-additions-xml-file

0 Kudos
Timothée_G_
Beginner
870 Views

Yeah I had seen this, it's great to be able to act on the commands chromium

0 Kudos
Reply