Search code examples
javascripthtmlgoogle-mapsappframework

Disable page scrolling and allow Google Maps scrolling in Appframework 2.1 with enabled af.scrolling plugin

I tried this solutions: Disable page scroll but allow Google map scroll

but it only works if I completely leave the plugin library of appframework out of my application. If I add plugins I can prevent scrolling with

style="overflow:hidden"

but I can't move the map in mashup. Here is an example

http://jsbin.com/mediqelo/1/edit?html,output

Remove 

<script src="https://raw.githubusercontent.com/01org/appframework/master/build/af.plugins.min.js"></script>

works but is not option for me. Is there a trick to use google maps in actual appframework while using the plugin library?

Solution

  • After creating an issue and a short discussion with a developer I got the problem. (https://github.com/01org/appframework/issues/699)

    1) The appframework.ui.min.js includes a lot of plugins but not the af.desktopBrowsers plugin. Scrolling won't work in desktop Browsers without adding this plugin. This plugin freezes the Google Map mashup. It seems that the developer don't see a problem with this because Chrome is not a target platfrom (I am also not worried about it).

    2) In Windows Phone 8 the af.desktopBrowsers is needed (strange) because of mapping mspointer events to touch events. But on this platform Google Map works with af.desktopBrowsers (yippie!).

    The appframework kitchen sink app has a small snippet to load the af.deskopBrowser if needed:

    if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
    var script = document.createElement("script");
    script.src = "plugins/af.desktopBrowsers.js";
    var tag = $("head").append(script);
}