stacked-layout.js

var viewModule = require("ui/core/view");
var gestures = require("ui/gestures");
var observable = require("data/observable");

var pageData = new observable.Observable();
var page;
var quad;

exports.loaded = function(args) {
    page = args.object;
    pageData.set("c1", false);
    pageData.set("c2", false);
    pageData.set("c3", false);
    pageData.set("c4", false);

    quadrants = new Array();
    quad = viewModule.getViewById(page, "main-layout");

    pageData.set("parentWidth", quad.getMeasuredWidth());
    pageData.set("parentHeight", quad.getMeasuredHeight());

    page.bindingContext = pageData;
    quad.on(gestures.GestureTypes.touch, function (args) {
        if(args.action == "down") {
            var widePercent = args.getX() / quad.getMeasuredWidth();
            var heightPercent =  args.getY() / quad.getMeasuredHeight();

            // Top Right
            if(widePercent > .5) {
                if(heightPercent < .5) {
                    pageData.set("c1", !pageData.get("c1"));
                }
            }

            // Top Left
            if(widePercent <= .5) {
                if(heightPercent < .5) {
                    pageData.set("c2", !pageData.get("c2"));
                }
            }

            // Bottom Right
            if (widePercent > .5) {
                if (heightPercent > .5) {
                    pageData.set("c3", !pageData.get("c3"));
                }
            }

            // Bottom Left
            if (widePercent <= .5) {
                if (heightPercent > .5) {
                    pageData.set("c4", !pageData.get("c4"));
                }
            }
        }
    });
}