<?xml version="1.0"?>
<!-- $Id: editgrid.xbl 69 2008-06-30 04:56:02Z x2iiinf $
    Copyright (c) 2004 Kurt M. Brown, x2ii.info.
    This file is subject to the terms and conditions of the GNU General Public
    License. See the file COPYING for more details.
-->
<xbl:bindings
    id="bs_editgrid"
    xmlns="http://www.mozilla.org/xbl"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:xbl="http://www.mozilla.org/xbl"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
 <xbl:binding id="b_editgrid">

  <xbl:resources>
    <xbl:stylesheet src="editgrid.css"/>
  </xbl:resources>

  <xbl:content>
   <xul:stack class="editgrid" flex="1">
     <html:table anonid="body" class="editgrid" flex="1"/>
     <xul:stack anonid="edit" flex="1"/>
   </xul:stack>
  </xbl:content>

  <xbl:implementation>
   <xbl:field name="onChange"/>
   <xbl:field name="highlightFirstCell">true</xbl:field>
   <xbl:constructor>
    <![CDATA[
        this.$body = xi.byAnonId(this, 'body');
        this.$edit = xi.byAnonId(this, 'edit');
        this.$edit.collapsed = true;
        this.$numRows = 0;
        this.$numCols = 0;
        this.$data = new xi.editgrid.Data();
        this.$rowNumByLabels = {};

        this.getTableCell = function() {
            return xi.byAnonId(this, this.$data.getAnonId());
        }
        this.setCell = function(isActive) {
            var td = this.getTableCell();
            if (td) {
                td.setAttribute('active', isActive);
                if (this.highlightFirstCell)
                    td.parentNode.setAttribute('active', isActive);
            }
        }
        this.editCell = function(charEvent) {
            xi.editgrid.editCell(
                this.$edit, this.getTableCell(), charEvent, this.$data.getCell()
            );
        }
        this.acceptEdit = function() {
            var self = this;
            xi.editgrid.acceptEdit(this.$edit);
            if (this.onChange)
                this.onChange(this, this.$data.rowNum, this.$data.colNum);
            function setFocus() {
                xi.fireMouseEvent('click', self);
            }
            this.focus();
            window.setTimeout(setFocus, 10);
        }
        this.cancelEdit = function() {
            this.focus();
            this.$edit.collapsed = true;
        }
    ]]>
   </xbl:constructor>

   <xbl:method name="init">
    <xbl:parameter name="numCols"/>
    <xbl:parameter name="readOnly"/>
    <xbl:body>
     <![CDATA[
        this.$body.removeAllChildren();
        this.$numRows = 0;
        this.$numCols = numCols;
        this.$readOnly = readOnly == true;
        if (readOnly)
            this.$edit.onkeypress = null;
     ]]>
    </xbl:body>
   </xbl:method>

   <xbl:method name="addTitleRow">
    <xbl:parameter name="value"/>
    <xbl:parameter name="style"/>
    <xbl:body>
     <![CDATA[
        if (!style)
            style = 'normal';
        var tr = this.$body.appendChild(xi.editgrid.createElementHtml('tr'));
        tr.setAttribute('class', 'title-' + style);
        var td = tr.appendChild(xi.editgrid.createElementHtml('td'));
        td.setAttribute('colspan', this.$numCols);
        td.setAttribute('align', 'center');
        if (value == '')
            value = '\xa0';
        xi.editgrid.writeLabel(td, value);
     ]]>
    </xbl:body>
   </xbl:method>

   <xbl:method name="addHeaderRow">
    <xbl:parameter name="values"/>
    <xbl:parameter name="style"/>
    <xbl:body>
     <![CDATA[
        if (!style)
            style = 'normal';
        var tr = this.$body.appendChild(xi.editgrid.createElementHtml('tr'));
        tr.setAttribute('class', 'header-' + style);
        for (var i = 0; i < values.length; ++i) {
            var th = tr.appendChild(xi.editgrid.createElementHtml('th'));
            xi.editgrid.writeLabel(th, values[i]);
        }
     ]]>
    </xbl:body>
   </xbl:method>

   <xbl:method name="addRow">
    <xbl:parameter name="cells"/>
    <xbl:parameter name="rowLabel"/>
    <xbl:parameter name="style"/>
    <xbl:body>
     <![CDATA[
        if (style)
            style = ' ' + style;
        else
            style = '';
        const rowNum = this.$numRows++;
        this.$data.pushRow(cells);
        var tr = this.$body.appendChild(xi.editgrid.createElementHtml('tr'));
        tr.setAttribute('class', 'data' + style);
        if (rowLabel)
            this.$rowNumByLabels[rowLabel] = rowNum;
        tr.setAttribute('anonid', rowNum);
        for (var i = 0; i < cells.length; ++i) {
            const cell = cells[i];
            var td = tr.appendChild(xi.editgrid.createElementHtml('td'));
            xi.editgrid.writeTableCell(td, cell);
            td.setAttribute('anonid', rowNum + '-' + i);
            if (cell.alignRight)
                td.setAttribute('class', 'right');
        }
        return rowNum;
     ]]>
    </xbl:body>
   </xbl:method>
   <xbl:method name="begin">
    <xbl:parameter name="rowNum"/>
    <xbl:parameter name="colNum"/>
    <xbl:body>
     <![CDATA[
        this.$data.rowNum = rowNum;
        this.$data.colNum = colNum;
        this.focus();
     ]]>
    </xbl:body>
   </xbl:method>
   <xbl:method name="getData">
    <xbl:body>
     <![CDATA[
        return this.$data;
     ]]>
    </xbl:body>
   </xbl:method>
   <xbl:method name="getRowNumByLabel">
    <xbl:parameter name="rowLabel"/>
    <xbl:body>
     <![CDATA[
        return this.$rowNumByLabels[rowLabel];
     ]]>
    </xbl:body>
   </xbl:method>
   <xbl:method name="getTableRow">
    <xbl:parameter name="rowAnonId"/>
    <xbl:body>
     <![CDATA[
        return xi.byAnonId(this, 'tr-' + anonId);
     ]]>
    </xbl:body>
   </xbl:method>
   <xbl:method name="writeTableCell">
    <xbl:parameter name="rowNum"/>
    <xbl:parameter name="colNum"/>
    <xbl:parameter name="value"/>
    <xbl:body>
     <![CDATA[
        var td = xi.byAnonId(this, rowNum + '-' + colNum);
        var cell = this.$data.getCell(rowNum, colNum);
        cell.value = value;
        xi.editgrid.writeTableCell(td, cell);
     ]]>
    </xbl:body>
   </xbl:method>
   <xbl:method name="print">
    <xbl:parameter name="xiPath"/>
    <xbl:body>
     <![CDATA[
        var printWin = window.open(xiPath + '/print.html');
        //var body = this.$body;
        var self = this;
        printWin.onload = function() {
            var doc = printWin.document;
            var head = doc.getElementsByTagName('head')[0];
            var link = head.appendChild(doc.createElement('link'));
            link.setAttribute('rel', 'stylesheet');
            link.setAttribute('type', 'text/css');
            link.setAttribute('href', 'editgrid-print.css');
            var body = doc.getElementsByTagName('body')[0];
            var div = body.appendChild(doc.createElement('div'));
            div.appendChild(doc.importNode(self.$body, true));
            printWin.print();
        }
     ]]>
    </xbl:body>
   </xbl:method>
  </xbl:implementation>

  <xbl:handlers>
    <xbl:handler event="focus">
      <![CDATA[
        if (this.$readOnly)
            return true;
        this.setCell(true);
        return false;
      ]]>
    </xbl:handler>
    <xbl:handler event="keypress" keycode="VK_UP">
      <![CDATA[
        if (!this.$edit.collapsed || this.$numRows == 0 || this.$readOnly)
            return true;
        const colNum = this.$data.colNum;
        for (var rowNum = this.$data.rowNum - 1; rowNum >= 0; --rowNum)
            if (!this.$data.getCell(rowNum, colNum).readOnly)
                break;
        if (rowNum >= 0) {
            this.setCell(false);
            this.$data.rowNum = rowNum;
            this.setCell(true);
            this.getTableCell().scrollIntoView(false);
        }
        return true;
      ]]>
    </xbl:handler>
    <xbl:handler event="keypress" keycode="VK_DOWN">
      <![CDATA[
        if (!this.$edit.collapsed || this.$numRows == 0 || this.$readOnly)
            return true;
        const colNum = this.$data.colNum;
        for (var rowNum = this.$data.rowNum + 1; rowNum < this.$numRows; ++rowNum)
            if (!this.$data.getCell(rowNum, colNum).readOnly)
                break;
        if (rowNum < this.$numRows) {
            this.setCell(false);
            this.$data.rowNum = rowNum;
            this.setCell(true);
            this.getTableCell().scrollIntoView(false);
        }
        return true;
      ]]>
    </xbl:handler>
    <xbl:handler event="keypress" keycode="VK_LEFT">
      <![CDATA[
        if (!this.$edit.collapsed || this.$numRows == 0 || this.$readOnly)
            return true;
        const rowNum = this.$data.rowNum;
        for (var colNum = this.$data.colNum - 1; colNum >= 0; --colNum)
            if (!this.$data.getCell(rowNum, colNum).readOnly)
                break;
        if (colNum >= 0) {
            this.setCell(false);
            this.$data.colNum = colNum;
            this.setCell(true);
        }
        return true;
      ]]>
    </xbl:handler>
    <xbl:handler event="keypress" keycode="VK_RIGHT">
      <![CDATA[
        if (!this.$edit.collapsed || this.$numRows == 0 || this.$readOnly)
            return true;
        const rowNum = this.$data.rowNum;
        for (var colNum = this.$data.colNum + 1; colNum < this.$numCols; ++colNum)
            if (!this.$data.getCell(rowNum, colNum).readOnly)
                break;
        if (colNum < this.$numCols) {
            this.setCell(false);
            this.$data.colNum = colNum;
            this.setCell(true);
        }
        return true;
      ]]>
    </xbl:handler>
    <xbl:handler event="keypress" keycode="VK_TAB">
      <![CDATA[
        if (this.$numRows == 0 || this.$readOnly)
            return true;
        if (!this.$edit.collapsed)
            this.acceptEdit();
        // TODO: add shift-tab
        const startRowNum = this.$data.rowNum;
        const startColNum = this.$data.colNum;
        var rowNum = startRowNum;
        var colNum = startColNum + 1;
        while (rowNum != startRowNum || colNum != startColNum) {
            if (!this.$data.getCell(rowNum, colNum).readOnly)
                break;
            if (colNum < this.$numCols - 1)
                ++colNum;
            else {
                colNum = 0;
                if (++rowNum > this.$numRows - 1)
                    rowNum = 0;
            }
        }
        if (rowNum != startRowNum || colNum != startColNum) {
            this.setCell(false);
            this.$data.rowNum = rowNum;
            this.$data.colNum = colNum;
            this.setCell(true);
            this.getTableCell().scrollIntoView(false);
        }
        return true;
      ]]>
    </xbl:handler>
    <xbl:handler event="keypress">
      <![CDATA[
        if (!this.$edit.collapsed) {
            const keyCode = event.keyCode;
            if (keyCode == event.DOM_VK_RETURN || keyCode == event.DOM_VK_TAB)
                this.acceptEdit();
            else if (keyCode == event.DOM_VK_ESCAPE)
                this.cancelEdit();
            return true;
        }
        else {
            if (this.$readOnly)
                return true;
            if (event.charCode || event.keyCode == 13) {
                event.cancelBubble = true;
                event.stopPropagation();
                this.editCell(event.charCode ? event : null);
            }
        }
        return false;
      ]]>
    </xbl:handler>
    <xbl:handler event="dblclick">
      <![CDATA[
        if (this.$readOnly)
            return true;
        const anonid = event.originalTarget.getAttribute('anonid');
        if (anonid == this.$data.getAnonId())
            this.editCell();
        return false;
      ]]>
    </xbl:handler>
    <xbl:handler event="click">
      <![CDATA[
        if (this.$readOnly)
            return true;
        var td = null;
        var elem = event.originalTarget;
        try {
            while (elem.tagName != 'td' && elem != this)
                elem = elem.parentNode;

            if (elem.tagName == 'td') {
                var anonid = elem.getAttribute('anonid');
                if (anonid) {
                    var rowcol = anonid.split('-');
                    var cell = this.$data.getCell(rowcol[0], rowcol[1]);
                    if (!cell.readOnly) {
                        this.setCell(false);
                        this.$data.rowNum = parseInt(rowcol[0], 10);
                        this.$data.colNum = parseInt(rowcol[1], 10);
                        this.setCell(true);
                    }
                }
            }
        }
        catch (e) {
            // some elements do not allow reading tagName
            xi.dprint('click exception', e);
        }
        if (this.$edit.collapsed)
            this.focus();
        else
            this.cancelEdit();
        return false;
      ]]>
    </xbl:handler>
  </xbl:handlers>

 </xbl:binding>
</xbl:bindings>