# PlainTextPanel.js

General discussion. Included by `PlainTextPanel`.

## class PlainTextPanel

### Members

`origWritable`
  Whether the text is writable or not.
`table`
  A Table.

### Methods

`new PlainTextPanel(origWritable)`
  Create one. The table is constructed from the div with ID `'textdiv'`.

## class Table

The Table displays a two-column array of texts. At the bottom is a "+" button.

### Event Handlers

`clickPlusButton(evt)`
  The table is evt.target.control. Calls `appendRow()` to create a new text, then calls `text.edit()`.

### Members

`editable`
  Whether this table is editable.
`elt`
  The HTML table element.
`ncols`
  The number of columns in the table. The first column contains the row numbers.
`panel`
  A back pointer to the panel.
`plusButton`
  The '+' button. It lies outside the HTML table element.

### Methods

`new Table(div, panel)`
  Create one. A Text instance is created for each cell (excluding the row-number column). Its `elt` is the first child of the cell (a P element). The P element and the cell itself both have a member `text` pointing back to the text. The '+' button is created, in the div but outside the table.
`insertText(ascii, i)`
  Inserts a new row in the table. Creates two texts (if translations are being shown); returns the target-language text.
`appendRow()`
  Creates a new row at the end of the table. Uses insertText().
`deleteRow(i)`
  Delete the i-th row.
`updateIndices(i)`
  This is called by insertText() and deleteRow(). It updates the row numbers and the `i` values for all texts, beginning with the i-th row.
`nextText(i, j)`
  Returns the next text following position (i,j). If j is the last column, goes to the first text in the next row. Returns null if (i,j) is the last text in the table.
`nextRowText(i)`
  Returns the first text in the following row, or null if i is the last row.

## class EditBox

The EditBox is a control for the box used to edit texts.

### Event Handlers

`onkeypress(evt)`
  Associated with the textarea element. Pressing `Enter` invokes the edit box's `commit()` method.
`onclickcommit(evt)`
  Associated with the commit button. Invokes the edit box's `commit()` method.
`onclickcancel(evt)`
  Associated with the cancel button. Invokes the edit box's `cancel()` method.

### Members

`textboxElt`
  Two HTML elements are created when the EditBox is created: a P element containing a textarea element. This is the textarea element.
`parElt`
  This is the P element.
`text`
  This is the text that is being editted, or null if the edit box is not currently displayed.

### Methods

`new EditBox()`
  Create one. Inside the P element is not only the textarea but also two buttons: a commit button and a cancel button.
`open(text)`
  If currently editting a text, call `commit()`. Set the `text` member to text. Replace the text.elt with my parElt. Focus on the textarea and put the cursor at the end.
`commit()`
  Take ascii from the textarea. If it is the same as the ascii of the text being editted, call `cancel()`. Otherwise call the text's `save()` method.
`cancel()`
  Just calls `close()`.
`close()`
  If a text is being editted, put its elt back in the place of my parElt. Set my `text` to null. If the text.status is `'new'`, call the text's `delete()` method. Put focus on the text's `next()` (`nextRow()`, in case of deletion), or the plus button, if there is no next.

## class Server

### Methods

`requestSave(text, ascii)`
  Send a save request to the server. Generates an edit_par() call. The op is `'insert'` if text has status `'new'`, and otherwise `'replace'`. When a response is received, it is passed to `text.finishSave()`
`requestDelete(text)`
  Submits an edit_par() call with op `'delete'`. When a response is received, it is passed to `text.finishDelete()`.

## class Text

Represents one cell of the matrix.

### Class members

`server`
  A Server.
`editbox`
  An EditBox.

### Event Handlers

`onclick(evt)`
  The text is evt.target.control. If it is an original text, call its `gotoIGT()` method. If it is a translation, call its `edit()` method.
`onkeypress(evt)`
  Called when focus is on this text and the user presses a key. The text is evt.target.control. If Enter is pressed, call its edit() method.

### Members

`table`
  A back-pointer to the table.
`elt`
  The P element displaying the contents of the text.
`ascii`
  The romanized version of the contents. (The version displayed in the elt is in Unicode.)
`i`
  The row index.
`j`
  0 if this is the original text, 1 for the translation. Note that this does not match the column number in the table, since the first column in the table contains row numbers.
`status`
  Either `'new'` or `'old'`. It is new if it has not yet been saved to disk. A row containing new texts can be deleted without notifying the server.
`buttonBar`
  A ButtonBar containing additional controls.

### Methods

`new Text(table, i, j, ascii, elt)`
  Create one. If elt is omitted, a new P element will be created (but not attached). This is the control for the elt, which is assigned Text.onclick and Text.onkeypress as handlers. The button bar elt is inserted as a new first child of elt (though it floats to the right).
`isEditable()`
  The text is editable if the panel is writable.
`isOrig()`
  Whether this is an original-language text, as opposed to a translation.
`gotoIGT()`
  Sets window.location to the IGT for this text.
`editAudio()`
  Sets window.location to the transcript for this text.
`edit()`
  Calls editbox.open() on this text.
`save(ascii)`
  Sends a save request to the server. The response will be passed to `finishSave()`.
`finishSave(ascii, unicode)`
  The text has been saved. Set the contents. Set status to `'old'`. Call `endEdit()`.
`endEdit()`
  If this text is currently being editted, call the editbox's `close()` method.
`setContents(ascii, unicode)`
  Ascii is stored in the text. The elt's textContent is set to unicode.
`insertBefore()`
  Insert a new row where this text is, moving this text down a row. Calls Table.insertText().
`delete()`
  If this text has status `'old'`, send a delete request to the server. The response will be passed to `finishDelete()`. If the status is `'new'`, just call `finishDelete()` immediately.
`finishDelete()`
  Call `endEdit()` and `Table.deleteRow()`.
`next()`
  Returns the next text to the right. If this text is at the end of the row, the first text in the next row. If this is the last text, returns null.
`nextRow()`
  Returns the first text in the next row, or null if there are no more rows.
`focus()`
  Put focus on the elt.

## class ButtonBar

### Event Handlers

`clickLittlePlus(evt)`
  The text is evt.target.control. Call its `insertBefore()` method.
`clickLittleEdit(evt)`
  The text is evt.target.contorl. Call its `edit()` method.
`clickLittleAudio(evt)`
  The text is evt.target.control. Call its `editAudio()` method.
`clickLittleX(evt)`
  The text is evt.target.control. Call its `delete()` method.
`clickLittleIgt(evt)`
  The text is evt.target.control. Call its `gotoIGT()` method.

### Members

`text`
  The text this button bar belongs to.
`elt`
  The HTML element representing the button bar.

### Methods

`new ButtonBar(text)`
  Create one. It contains four buttons: `'+'` for inserting a new row here, `'edit'` for editting this text, `'igt'` for going to the IGT, and `'X'` to delete this row.