Verse by Verse Display

Verse by verse mode allows the user to select to view multiple book collections at the same time in a single pane. For each verse, the verse is displayed for the first book collection, then the second, and, if setup for three, the third. In SAB, this is configured in the Books section, at the top level, under the Layouts tab. The user can select whether verse by verse is available and, if it is, what the default book selections are for that mode.

This appears in the config.js file under Layouts: (I believe convertConfig is forcing enable to be false and needs to be changed). As far as I can see, the features is only used with the two pane view so it should always be empty for verse by verse.

    {
      "mode": "verse-by-verse",
      "enabled": false,
      "layoutCollections": [
        "CUKNVS",
        "ENGWEB"
      ],
      "features": {}
    }

When more than one layout mode is configured, the layout screen has an additional tab selection bar added to it. When the layout screen displays, it comes up with the tab for the currently selected mode active. The following example shows for all three modes selected, but if just single mode and verse by verse are configured, then the middle tab would not be present.

When the verse by verse tab is selected, then the layout screen that allows up to three book collection selections appears. This screen will always have at least two entries. The third collection dropdown should only be displayed if more than 2 book collections are configured in this app. Otherwise you would only see the first two dropdowns. The third dropdown may be empty, so all dashes is an option in the display window along with the remaining book collections. In each case, if the user selects a book collection that is already selected by one of the other entries, the other entry with that book collection is changed to the first unselected book collection.

It probably should be mentioned here how restricted book collections are handled. Issue #567 references that book collections may be restricted so that they may only appear along with other book collections. While the single pane view will filter out restricted book collections, all book collections should appear in all three slots in verse by verse mode.

When the verse is displayed, the verse number is displayed, then the text for the first book collection, followed by the text for the second followed by the text for the third.

Note that only the text for the first book collection is selectable (for bookmarks highlighting and notes). The markers for notes and bookmarks appear after the text for the first book collection.

Here is the HTML as it appears in the Android app. Note that the verse overall appears in a new block div with classes that appear to alternate between block1 and block2. The div with the primary book collection text is the same as what appears in the single pane class, so it should just be a case of reproducing what is there. If it is broken into sections for audio, then it still appears just as it did in the original single pane This is followed by a verse-by-verse-block class which contains a div with classes verse-by-verse-verse and verse-by-verse-1 with the text of the 2nd book collection. If a third collection is specified, then it is in a div with verse-by-verse-verse and verse-by-verse-2 class. These are not subdivided into sections since there is no audio associated with them.

Start with config.js under Layouts and the layout screen implementation described for the Books section, then compare the existing single-pane display with the verse-by-verse HTML structure and CSS classes in the issue. Done means the mode can be configured, selected, and displayed with two or three collections, including the stated selection, restriction, annotation, and audio behavior.