padewitte/PEP_TESTING_PAGE.html

## PEP_TESTING_PAGE.html
<!DOCTYPE html>
<!--
Inspired by :
    Created using JS Bin
    http://jsbin.com
    Copyright (c) 2015 by anonymous (http://jsbin.com/bojumofowa/1/edit)
    Released under the MIT license: http://jsbin.mit-license.org
Modified and destructured by P.A.DEWITTE
-->
<meta name="robots" content="noindex">
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/pep/0.4.0/pep.js"></script>

    <meta charset="utf-8">
    <title>Pointer Event Experience Vanillia</title>
    <style id="jsbin-css">

        #svg1, #svg2 {
            margin: 20px;
            background: white;
            border: 1px solid black;
            height: 200px;
            width: 80%;
        }
    </style>
</head>
<body>
<div id="button-bar">
    <button id="pointermove" type="button" onclick="chooseButton('pointermove');">pointermove</button>
    <button id="pointerdown" type="button" onclick="chooseButton('pointerdown');">pointerdown</button>
    <button id="pointerup" type="button" onclick="chooseButton('pointerup');">pointerup</button>
    <button id="pointerover" type="button" onclick="chooseButton('pointerover');">pointerover</button>
    <button id="pointerout" type="button" onclick="chooseButton('pointerout');">pointerout</button>
    <button id="pointerenter" type="button" onclick="chooseButton('pointerenter');">pointerenter</button>
    <button id="pointerleave" type="button" onclick="chooseButton('pointerleave');">pointerleave</button>
    <button id="pointercancel" type="button" onclick="chooseButton('pointercancel');">pointercancel</button>
</div>

<svg id="svg1" touch-action="none">
    <circle id="pointA" cx="10" cy="35" r="3"/>
</svg>


<svg id="svg2" touch-action="none">
    <circle id="pointA" cx="10" cy="35" r="3"/>
</svg>

<script id="jsbin-javascript">


    function drawSvg(where) {
        var xOffset = where.currentTarget.getBoundingClientRect().x;
        var yOffset = where.currentTarget.getBoundingClientRect().y;
        var xCorrected = where.pageX - xOffset;
        var yCorrected = where.pageY - yOffset;
        where.currentTarget.getElementById("pointA").setAttribute('cx', xCorrected);
        where.currentTarget.getElementById("pointA").setAttribute('cy', yCorrected);
        where.currentTarget.style.borderColor = getRandomColor();
    }

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    function chooseButton(eventType) {
        buttonList = document.getElementsByTagName('button');
        for (i = 0; i < buttonList.length; ++i) {
            buttonList[i].style.color = "black";
        }

        document.getElementById(eventType).style.color = "red";
        setEvents(eventType);
    }


    function setEvents(eventType) {
        console.trace("Changing event trace to " + eventType);
        var elementsToBind = ["svg1", "svg2"];
        elementsToBind.forEach(function (elementToBind) {
            var svgDoc = document.getElementById(elementToBind);
            //svgDoc.removeEventListener();

            var beahviour = function (inEvent) {
                drawSvg(inEvent);
            };
            if (svgDoc.lastEventRegister) {
                svgDoc.removeEventListener(svgDoc.lastEventRegister.eventType, svgDoc.lastEventRegister.beahviour);
            }
            svgDoc.lastEventRegister = {eventType: eventType, beahviour: beahviour};


            svgDoc.addEventListener(eventType, beahviour);
        })


    }
    setEvents("pointermove");
</script>
</body>
</html>
	<!DOCTYPE html>
	<!--
	Inspired by :
	Created using JS Bin
	http://jsbin.com
	Copyright (c) 2015 by anonymous (http://jsbin.com/bojumofowa/1/edit)
	Released under the MIT license: http://jsbin.mit-license.org
	Modified and destructured by P.A.DEWITTE
	-->
	<meta name="robots" content="noindex">
	<html>
	<head>
	<meta name="viewport" content="width=device-width">
	<script src="https://code.jquery.com/pep/0.4.0/pep.js"></script>

	<meta charset="utf-8">
	<title>Pointer Event Experience Vanillia</title>
	<style id="jsbin-css">

	#svg1, #svg2 {
	margin: 20px;
	background: white;
	border: 1px solid black;
	height: 200px;
	width: 80%;
	}
	</style>
	</head>
	<body>
	<div id="button-bar">
	<button id="pointermove" type="button" onclick="chooseButton('pointermove');">pointermove</button>
	<button id="pointerdown" type="button" onclick="chooseButton('pointerdown');">pointerdown</button>
	<button id="pointerup" type="button" onclick="chooseButton('pointerup');">pointerup</button>
	<button id="pointerover" type="button" onclick="chooseButton('pointerover');">pointerover</button>
	<button id="pointerout" type="button" onclick="chooseButton('pointerout');">pointerout</button>
	<button id="pointerenter" type="button" onclick="chooseButton('pointerenter');">pointerenter</button>
	<button id="pointerleave" type="button" onclick="chooseButton('pointerleave');">pointerleave</button>
	<button id="pointercancel" type="button" onclick="chooseButton('pointercancel');">pointercancel</button>
	</div>

	<svg id="svg1" touch-action="none">
	<circle id="pointA" cx="10" cy="35" r="3"/>
	</svg>


	<svg id="svg2" touch-action="none">
	<circle id="pointA" cx="10" cy="35" r="3"/>
	</svg>

	<script id="jsbin-javascript">


	function drawSvg(where) {
	var xOffset = where.currentTarget.getBoundingClientRect().x;
	var yOffset = where.currentTarget.getBoundingClientRect().y;
	var xCorrected = where.pageX - xOffset;
	var yCorrected = where.pageY - yOffset;
	where.currentTarget.getElementById("pointA").setAttribute('cx', xCorrected);
	where.currentTarget.getElementById("pointA").setAttribute('cy', yCorrected);
	where.currentTarget.style.borderColor = getRandomColor();
	}

	function getRandomColor() {
	var letters = '0123456789ABCDEF'.split('');
	var color = '#';
	for (var i = 0; i < 6; i++ ) {
	color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
	}

	function chooseButton(eventType) {
	buttonList = document.getElementsByTagName('button');
	for (i = 0; i < buttonList.length; ++i) {
	buttonList[i].style.color = "black";
	}

	document.getElementById(eventType).style.color = "red";
	setEvents(eventType);
	}


	function setEvents(eventType) {
	console.trace("Changing event trace to " + eventType);
	var elementsToBind = ["svg1", "svg2"];
	elementsToBind.forEach(function (elementToBind) {
	var svgDoc = document.getElementById(elementToBind);
	//svgDoc.removeEventListener();

	var beahviour = function (inEvent) {
	drawSvg(inEvent);
	};
	if (svgDoc.lastEventRegister) {
	svgDoc.removeEventListener(svgDoc.lastEventRegister.eventType, svgDoc.lastEventRegister.beahviour);
	}
	svgDoc.lastEventRegister = {eventType: eventType, beahviour: beahviour};


	svgDoc.addEventListener(eventType, beahviour);
	})


	}
	setEvents("pointermove");
	</script>
	</body>
	</html>