fyogametable/js/Button2D.js

Fyo Game Table API

var FYO = FYO || {};

(function () {
    'use strict';

    function Button2D(connector, options) {
        options = options || {};

        this.connector = connector;

        this.element = null;
        this.camera = null;
        this.scene = null;
        this.renderer = null;
        this.mouseX = 0; this.mouseY = 0;
        this.windowHalfX = window.innerWidth / 2;
        this.windowHalfY = window.innerHeight / 2;
        this.thumbObj = null;
        this.events = new FYO.EventManager();

        if (options.ondown) {
            this.events.on('down', options.ondown);
        }
        if (options.onup) {
            this.events.on('up', options.onup);
        }

        navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate || function () { };

        this.Init(options || { color: 0x222222 });
    }

    Button2D.prototype = {

        element: null,
        camera: null,
        scene: null,
        renderer: null,
        mouseX: 0, mouseY: 0,
        windowHalfX: window.innerWidth / 2,
        windowHalfY: window.innerHeight / 2,
        thumbObj: null,
        events: null,

        on: function (e, f) {
            return this.events.on(e, f);
        },

        remove: function (e, f) {
            return this.events.remove(e, f);
        },

        clear: function (e) {
            return this.events.clear(e);
        },

        Set: function (x, y, w, h) {
            this.positioner.Set(x, y, w, h);
            this.onWindowResize();
        },

        SetAlign: function (h, v) {
            this.positioner.align.horizontal = h;
            this.positioner.align.vertical = v;
        },

        Reposition: function (x, y, w, h) {
            this.onWindowResize(x, y, w, h);
        },

        Init: function (options) {
            var self = this;

            this.element = document.createElement('div');
            this.positioner = new FYO.Positioner(this.element);
            this.element.setAttribute('style', 'position: absolute; top: 0; left: 0; right: 100%; bottom: 0;');

            var containerParent = document.body;
            if (options.container) {
                containerParent = document.getElementById(options.container);
            }
            containerParent.appendChild(this.element);

            
            this.image = document.createElement('div');
            var style = 'background: url(\'' + (options.image || '/fyogametable/imgs/Red_A.png') + '\') no-repeat center center;';
            style += 'background-size: contain; width: 100%; height: 100%;'
            this.image.setAttribute('style', style);
            this.element.appendChild(this.image);

            this.element.addEventListener('mousemove', function (e) { self.onMouseMove(e); }, false);
            this.element.addEventListener('mousedown', function (e) { self.onMouseDown(e); }, false);
            this.element.addEventListener('mouseup', function (e) { self.onMouseUp(e); }, false);
            this.element.addEventListener('mouseleave', function (e) { self.onMouseLeave(e); }, false);
            this.element.addEventListener('touchmove', function (e) { self.onTouchMove(e); }, false);
            this.element.addEventListener('touchstart', function (e) { self.onTouchStart(e); }, false);
            this.element.addEventListener('touchend', function (e) { self.onTouchDone(e); }, false);
            //
            window.addEventListener('resize', function (e) { self.onWindowResize(e); }, false);
        },

        onWindowResize: function () {
            this.elementHalfX = this.element.clientWidth / 2;
            this.elementHalfY = this.element.clientHeight / 2;
        },
        onMouseMove: function (event) {
            event.preventDefault();
            this.mouseX = event.offsetX;
            this.mouseY = event.offsetY;
        },
        onMouseDown: function (event) {
            event.preventDefault();
            this.mouseDown = true;
            this.events.trigger('down', true);
        },
        onMouseUp: function (event) {
            event.preventDefault();
            this.mouseDown = false;
            this.events.trigger('up', true);
        },
        onMouseLeave: function (event) {
            event.preventDefault();
            this.mouseX = this.elementHalfX;
            this.mouseY = this.elementHalfY;
        },
        onTouchStart: function () {
            navigator.vibrate(10);
            this.mouseDown = true;
            this.events.trigger('down', true);
        },
        onTouchMove: function (event) {
            event.preventDefault();
            var rect = this.element.getBoundingClientRect();
            for (var i = 0; i < event.touches.length; i++) {
                // determine if touch is within rect
                var touch = event.touches[i];

                if (touch.pageX >= rect.left && touch.pageX <= rect.right && touch.pageY >= rect.top && touch.pageY <= rect.bottom) {
                    this.mouseX = touch.pageX - rect.left;
                    this.mouseY = touch.pageY - rect.top;
                }
            }
        },
        onTouchDone: function (event) {
            event.preventDefault();
            this.mouseX = this.elementHalfX;
            this.mouseY = this.elementHalfY;
            //navigator.vibrate(10);
            this.mouseDown = false;
            this.events.trigger('up', true);
        }
    };

    FYO.Button2D = Button2D;
})();