[Feature Request] separate the generated divs / Move to markup

[LocutusOfPenguin]

Hi,

right now the JS file generate the other divs from the board-div (id). I would like to put the divs inside the markup so i can style their place myself. For example, i can give the IDs as parameter inside.

Jürgen

[mliebelt]

I don't understand your request. Just as some background: I use in the implementation chessboardjs at it is. I just wrap the div of the chessboard with some more divs.

Do you have example code that explains what you would like as an API? So some HTML code with embedded Javascript, that shows what a better API should look like.

[LocutusOfPenguin]

The code is so: give a ID of the board, and the program automatically (!!!) extend the dom with for example a move div. I want it this way: div id="board" /div alot of other html code div id="moves"/ /div

so, in my example i start your code with giving the ID's "board" & "moves". This allows me to stlye the output MYSELF.

An example y can find at "picochess" (but i hope this is clear enough) Jürgen

[mliebelt]

But how should the program (some Javascript code inside the HTML code) guess which one of the many divs in one that should be used to expand the board, the moves, the edit part, ...?

At the moment, I am able to have many (different) boards in different modes on the same HTML page (which is needed). So the only way to do it that way is to give the viewer (the Javascript part) the hint which elements are the ones that stand for board, moves, ...

I have to think about that, and try to come up with a complete example (HTML and Javascript) to show it.

Do you mean by your picochess reference the following? https://github.com/jromang/picochess/blob/master/web/picoweb/templates/board2.html

[LocutusOfPenguin]

giving its parameters at startup code (if y want, y can make the asked extra parameters extend the current way - if not given => generate the divs itself => this way, the program behaves same as now). Actually y only need to check if some IDs given, and then jump over the "generate div-in-dom code"

Yes, this is the code (board2.thml). But to test it out for YOU, y need to put all these code running. I hope y can understand it without checking out this project :-)

[rohandalvi]

@LocutusOfPenguin do you mean to say that you be allowed to have different div's for say the board itself and the moves pgn ?

Seems to me that the current implementation does not allow to specify a div id for moves explicitly. It would be nice to have this feature. Although I am not sure if it already exists. @mliebelt

[LocutusOfPenguin]

@rohandalvi yes, exactly. I know its not inside. But implementing it (as said in my last post), cant be too complex = Check the startup parameters, and jump over the dom-create-code for these div's.

For example here: http://mliebelt.github.io/PgnViewerJS/docu/examples2.html#1001 The JS code generate the moves div by itself, and its hard to style this (afterwards). Its also the same for the edit mode - here y should be able to provide more divIDs. Similar case. For the user only the startup call changes. If y dont want this, y can work with defaults (which means, the program api doesnt chage => program generate divs itself as now).

This would make this project more flexible!

[LocutusOfPenguin]

And for reference - here is a pict from our picochess webserver (generated from this board2.html). As y can see, we have the moves somewhere else :-) https://github.com/LocutusOfPenguin/picochess/blob/master/dgt/test/webserver73.jpg

[mliebelt]

The feature does not exist at the moment. I have understood what the benefit of that feature would be (thanks to @LocutusOfPenguin for the reference above, makes it more clear), and I have to think about a proper solution. The base idea would be:

• Allow a map of parts of the UI to IDs instead of the one ID at the moment.
• When a user uses that interface, he has to ensure that that part of the UI is provided as container (div) by the user.
• This would be at least useful for: headers, board, buttons, edit, comment, moves (of which only headers, board, buttons and moves are used in the pgnView mode)

So yes, it is a useful feature, and I will add it to the project (when I have the time to). Have to refactor the part that creates the UI, though.

[mliebelt]

The feature does not exist at the moment. I have understood what the benefit of that feature would be (thanks to @LocutusOfPenguin for the reference above, makes it more clear), and I have to think about a proper solution. The base idea would be:

• Allow a map of parts of the UI to IDs instead of the one ID at the moment.
• When a user uses that interface, he has to ensure that that part of the UI is provided as container (div) by the user.
• This would be at least useful for: headers, board, buttons, edit, comment, moves (of which only headers, board, buttons and moves are used in the pgnView mode)

See the wiki page I have added here. I want to document there some of the decisions, and perhaps problems. Just want to play a little bit with the possibilities of GitHub.

[mliebelt]

Provided a first version that works, see http://mliebelt.github.io/PgnViewerJS/docu/examples2.html#1217 for a small example how to use it. In the directory examples, there is the file ticket25.html that shows that in greater detail.

I would be glad to get some feedback to that implementation.

[LocutusOfPenguin]

Does it get a new version number? (my question is already a vote for it, ha)

[mliebelt]

I have just released version 0.9.3, I hope that is visible for you as well. Sometimes, you have to reload pages, because browsers cache very aggressive. Or do I not understand the question?

[LocutusOfPenguin]

Oh...okay, forget it please.

I will lateron try it out (busy with "voice" these days). But yr example looks already very good.

[mliebelt]

When retesting all tickets, I found this one to be broken (again). Not sure what to do about it, so I open the ticket again.