Description

Adds the cursor in the window

Example

var canvas = CE.defines("canvas_id").
extend([Animation, Spritesheet, Window]).
ready(function() {
    canvas.Scene.call("MyScene");
});

canvas.Scene.new({
    name: "MyScene",
    materials: {
        images: {
            img_id: "border_window.png"
        }
    },
    ready: function(stage) {
       var box = canvas.Window.new(this, 500, 300, "img_id"),
        el, array_el, text;

        var array  = ["Text1", "Text2", "Text3"];

        for (var i=0 ; i < array.length ; i++) {
            el = this.createElement(480, 35);
            el.y = i * 35;
            el.attr('index', i);
            text = canvas.Text.new(this, array[i]); // Text extend
            text.style({
                size: "18px",
                color: "white"
            }).draw(el, 0, 10);
            array_el.push(el);
            box.getContent().append(el);
        }

        var cursor = this.createElement();
        cursor.fillStyle = "#7778AA";
        cursor.fillRect(-10, -10, 480, 30);
        cursor.opacity = .5;

        box.cursor.init(cursor, array_el);

        box.cursor.select(function(el) {
            console.log(el.attr('index'));
        });

        box.cursor.change(function(el) {

        });

        box.open(this.stage);
        this.stage.append(cursor);

        box.cursor.setIndex(0);
        box.cursor.enable(true);
    }
});

Methods

init

Initializes functionality cursors.

refresh

Refreshes the table containing the items that can be selected. Updated visual cursor

remove

Removes the cursor visually

assignKeys

Assigns keyboard events : Up, Bottom and Enter. Also assigns the click on elements for touch and mouse. Elements must, in this case, have values set for the width and height attributesr

getCurrentElement

Fetches the current element where the cursor is positioned

setIndex

Sets the index of the cursor on an element. The index starts at 0. The cursor is updated visually

update

The cursor is updated visually. If there is any item, the cursor is hidden

enable

Active cursor or not. If it is off, pressing Up, Bottom and Enter are reset. If it is enabled, the method `assignKeys` is called

change

Assigns a callback function when the cursor changes element

select

Assigns a callback when the element is selected (Enter key pressed)

Discussion