tilomitra · October 5, 2012 08:07
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
  <head>
    <style>

      html {
        font-family: sans-serif;
        color: #333;
      }
      #circle, #square {
        width:100px;
        height:100px;
        position:absolute;
      }
      #circle {
        border-radius:100px;
        background: #3071A6;
        top:10px;
        left:10px;
        border:5px solid #81BBEB;
      }
      #square {
        background: #DB4E46;
        top:10px;
        left:150px;
        border:5px solid #F78E88;
      }
      .black {
        background: black !important;
      }
      #log {
        float:left;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        width:100%;
        top:450px;
        overflow-x: scroll;
      }
      button {
        margin-top: 100px;
      }
    </style>
  </head>
  <body class="yui3-skin-sam">

    <div id="circle"></div>
    <div id="square"></div>
    <button id="attachGestures">Attach Gestures</button>
    <button id="detachGestures" disabled=true>Detach Gestures</button>

    <ul id="log" unselectable="on">

    </ul>

    <script src="../../../../build/yui/yui.js"></script>
    <script>
      YUI({
        filter:'raw',
        useBrowserConsole: true
      }).use('event-gestures', 'console', 'transition', function(Y) {
        //new Y.Console().render();
        Y.log(Y.Event._GESTURE_MAP.start);


        var circle = Y.one("#circle");
        var square = Y.one("#square");
        var cAnim = {
          easing: 'ease-in-out'
        };
        var sAnim = {
          easing: 'ease-in'
        };

        var handles = {
            START_HANDLE: undefined,
            MOVE_HANDLE: undefined,
            END_HANDLE: undefined
        };


        circle.on("MSPointerDown", function(e) {
          Y.log('circle pointer down');
        });

        circle.on('flick', function(e) {
          e.preventDefault();
          if (e.flick.axis === 'x') {
            cAnim.left = parseInt(circle.getStyle('left').replace('px', ''), 10) + e.flick.distance + 'px';
          }
          else if (e.flick.axis === 'y') {
            cAnim.top = parseInt(circle.getStyle('top').replace('px', ''), 10) + e.flick.distance + 'px';
          }
          cAnim.duration = e.flick.time/800;

          circle.transition(cAnim);
          Y.log('Flicked');
        });


        var DEFAULT_MS_TOUCH_ACTION = square._node.style.msTouchAction;

        Y.one("#attachGestures").on('click', function (e) {


            window.setTimeout(function () {
                square._node.style.msTouchAction = DEFAULT_MS_TOUCH_ACTION;
            }, 0);

            document.addEventListener("MSPointerOver", function(e) {
                //DEFAULT_MS_TOUCH_ACTION = square._node.style.msTouchAction;
                square._node.style.msTouchAction = "none";
                Y.log(square._node.style.msTouchAction);
            }, true);


            handles.START_HANDLE = square.on('gesturemovestart', function(e) {

              //e.preventDefault();
              square.addClass('black');
              Y.log('Square pointer down...');

              return false;
            });

            handles.MOVE_HANDLE = square.on('gesturemove', function(e) {
              //e.preventDefault();
              sAnim.top = e.pageY - 50 + 'px';
              sAnim.left = e.pageX - 50 +'px';
              sAnim.duration = 0.05;
              Y.log('moving');
              square.transition(sAnim);

              return false;
            });

            handles.END_HANDLE = square.on('gesturemoveend', function(e) {
              //e.preventDefault();
              Y.log('end');
              square.removeClass("black");
              square._node.style.msTouchAction = DEFAULT_MS_TOUCH_ACTION;
              Y.log(square._node.style.msTouchAction);

              return false;
            });

            Y.one("#detachGestures").set('disabled', false);
            this.set('disabled', true);

        });

        Y.one("#detachGestures").on('click', function (e) {
            Y.Object.each(handles, function (v, k, o) {
                v.detach();
                Y.log("Detaching " + k);
            });


            Y.one("#attachGestures").set('disabled', false);
            this.set('disabled', true);
        });


      });


    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>

	html {
	font-family: sans-serif;
	color: #333;
	}
	#circle, #square {
	width:100px;
	height:100px;
	position:absolute;
	}
	#circle {
	border-radius:100px;
	background: #3071A6;
	top:10px;
	left:10px;
	border:5px solid #81BBEB;
	}
	#square {
	background: #DB4E46;
	top:10px;
	left:150px;
	border:5px solid #F78E88;
	}
	.black {
	background: black !important;
	}
	#log {
	float:left;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width:100%;
	top:450px;
	overflow-x: scroll;
	}
	button {
	margin-top: 100px;
	}
	</style>
	</head>
	<body class="yui3-skin-sam">

	<div id="circle"></div>
	<div id="square"></div>
	<button id="attachGestures">Attach Gestures</button>
	<button id="detachGestures" disabled=true>Detach Gestures</button>

	<ul id="log" unselectable="on">

	</ul>

	<script src="../../../../build/yui/yui.js"></script>
	<script>
	YUI({
	filter:'raw',
	useBrowserConsole: true
	}).use('event-gestures', 'console', 'transition', function(Y) {
	//new Y.Console().render();
	Y.log(Y.Event._GESTURE_MAP.start);


	var circle = Y.one("#circle");
	var square = Y.one("#square");
	var cAnim = {
	easing: 'ease-in-out'
	};
	var sAnim = {
	easing: 'ease-in'
	};

	var handles = {
	START_HANDLE: undefined,
	MOVE_HANDLE: undefined,
	END_HANDLE: undefined
	};


	circle.on("MSPointerDown", function(e) {
	Y.log('circle pointer down');
	});

	circle.on('flick', function(e) {
	e.preventDefault();
	if (e.flick.axis === 'x') {
	cAnim.left = parseInt(circle.getStyle('left').replace('px', ''), 10) + e.flick.distance + 'px';
	}
	else if (e.flick.axis === 'y') {
	cAnim.top = parseInt(circle.getStyle('top').replace('px', ''), 10) + e.flick.distance + 'px';
	}
	cAnim.duration = e.flick.time/800;

	circle.transition(cAnim);
	Y.log('Flicked');
	});


	var DEFAULT_MS_TOUCH_ACTION = square._node.style.msTouchAction;

	Y.one("#attachGestures").on('click', function (e) {


	window.setTimeout(function () {
	square._node.style.msTouchAction = DEFAULT_MS_TOUCH_ACTION;
	}, 0);

	document.addEventListener("MSPointerOver", function(e) {
	//DEFAULT_MS_TOUCH_ACTION = square._node.style.msTouchAction;
	square._node.style.msTouchAction = "none";
	Y.log(square._node.style.msTouchAction);
	}, true);


	handles.START_HANDLE = square.on('gesturemovestart', function(e) {

	//e.preventDefault();
	square.addClass('black');
	Y.log('Square pointer down...');

	return false;
	});

	handles.MOVE_HANDLE = square.on('gesturemove', function(e) {
	//e.preventDefault();
	sAnim.top = e.pageY - 50 + 'px';
	sAnim.left = e.pageX - 50 +'px';
	sAnim.duration = 0.05;
	Y.log('moving');
	square.transition(sAnim);

	return false;
	});

	handles.END_HANDLE = square.on('gesturemoveend', function(e) {
	//e.preventDefault();
	Y.log('end');
	square.removeClass("black");
	square._node.style.msTouchAction = DEFAULT_MS_TOUCH_ACTION;
	Y.log(square._node.style.msTouchAction);

	return false;
	});

	Y.one("#detachGestures").set('disabled', false);
	this.set('disabled', true);

	});

	Y.one("#detachGestures").on('click', function (e) {
	Y.Object.each(handles, function (v, k, o) {
	v.detach();
	Y.log("Detaching " + k);
	});


	Y.one("#attachGestures").set('disabled', false);
	this.set('disabled', true);
	});


	});


	</script>
	</body>
	</html>