Skip to content

Ticket 25: Allow adding divs by user

Markus Liebelt edited this page Sep 21, 2016 · 2 revisions

See https://github.com/mliebelt/PgnViewerJS/issues/25 for details. The base idea is the following:

  • Change the API from pgnView = function(boardId, configuration) to something like pgnView = function({ "board": boardId, "moves": moveID}, configuration) or allow to use that as variant.
  • Render then the usual HTML, but remove the parts that are given in the call, and use instead those divs provided there.

I see the following steps that should be done then:

  1. Allow the variation in the API: boardID or map of divIDs
  2. Ensure that the divs that are given by the user are removed from the generated UI.
  3. Ensure that the given divs are remembered instead. (Current code is pretty ugly here, has to be changed.)

Analysis

Board Layout

The current layout stripped down looks like that:

<div id="board" style="width: 400px; float: left; margin-right: 10px" class="default whole">
  <div id="boardHeaders" class="default headers"></div>
  <div class="outerBoard">
    <div id="boardInner" class="default board">
        <div class="chessboard-63f37"></div>
        <div id="boardButton" class="default buttons"></div>
        <div id="editboardButton" class="default edit" style="display: none;"></div>
        <div id="outerpgnboardButton" class="default outerpgn" style="display: none;"></div>
        <div id="commentboardButton" class="default comment" style="display: none;"></div>
    </div>
    <div id="boardMoves" class="moves"></div>
    <div class="endBoard"></div>
</div>

So it is pretty complex at the moment, and depending on mode PgnViewerJS is started, the elements are styled with display: none, not removed from the structure. The reason may be that some code references the elements, and it was easier to style it in that way.