added ability to specify parent element for scrolling

This commit is contained in:
Rudis Muiznieks 2020-05-10 12:02:17 -05:00
parent 826b0abe04
commit 5e1b125f80
4 changed files with 12 additions and 3 deletions

View File

@ -37,6 +37,7 @@ Your `playerOptions` should be an object with the following properties:
- `source`: Your story's ficdown code. Either store it right in the html document, or make an XHR to pull the story content in from an external file, and put its content here. - `source`: Your story's ficdown code. Either store it right in the html document, or make an XHR to pull the story content in from an external file, and put its content here.
- `id`: The id of a div on the page to inject the game into. For example if your html is `<div id='game'/>` then you would pass `game` here. - `id`: The id of a div on the page to inject the game into. For example if your html is `<div id='game'/>` then you would pass `game` here.
- `scroll` (optional): Set this to `true` if you want the player's full game history to remain on the screen and automatically scroll the page down whenever a new scene is added to the bottom. By default each scene will replace the previous one and the page will be scrolled to the top. - `scroll` (optional): Set this to `true` if you want the player's full game history to remain on the screen and automatically scroll the page down whenever a new scene is added to the bottom. By default each scene will replace the previous one and the page will be scrolled to the top.
- `scrollParent` (optional): The container to scroll. Used even if `scroll=false` to reset the page position to the top whenever a new scene is displayed. Defaults to the document or `body` element of the page.
- `html` (optional): Set this to true if your ficdown file contains raw html that you want rendered. By default html will not be rendered. - `html` (optional): Set this to true if your ficdown file contains raw html that you want rendered. By default html will not be rendered.
- `startText` (optional): Set this to override the link text that begins the game. - `startText` (optional): Set this to override the link text that begins the game.
- `endMarkdown` (optional): Set this to override the "game over" content that is displayed when the player reaches a scene with no more links to follow. Include an anchor with the href set to `restart()` if you want a link that will start the story over from the beginning. - `endMarkdown` (optional): Set this to override the "game over" content that is displayed when the player reaches a scene with no more links to follow. Include an anchor with the href set to `restart()` if you want a link that will start the story over from the beginning.

View File

@ -1,6 +1,6 @@
{ {
"name": "ficdown.js", "name": "ficdown.js",
"version": "2.0.3", "version": "2.0.4",
"description": "A parser and player for Interactive Fiction written in Ficdown", "description": "A parser and player for Interactive Fiction written in Ficdown",
"scripts": { "scripts": {
"build": "rm -rf ./build && tsc", "build": "rm -rf ./build && tsc",

View File

@ -2,6 +2,7 @@ export type PlayerOptions = {
source: string, // ficdown story source source: string, // ficdown story source
id: string, // id of div to inject game into id: string, // id of div to inject game into
scroll?: boolean, // continuous scroll mode scroll?: boolean, // continuous scroll mode
scrollParent?: string, // id of the parent container to scroll
html?: boolean, // allow html in story source html?: boolean, // allow html in story source
startText?: string, // custom link text to start game startText?: string, // custom link text to start game
endMarkdown?: string, // custom markdown when game ends endMarkdown?: string, // custom markdown when game ends

View File

@ -104,12 +104,19 @@ export class Player {
const scrollId = `move-${ this.moveCounter++ }`; const scrollId = `move-${ this.moveCounter++ }`;
this.container.append($('<span/>').attr('id', scrollId)); this.container.append($('<span/>').attr('id', scrollId));
this.container.append(newHtml); this.container.append(newHtml);
$([document.documentElement, document.body]).animate({ const scrollParent = this.options.scrollParent
? $(`#${ this.options.scrollParent }`)
: $([document.documentElement, document.body]);
scrollParent.animate({
scrollTop: $(`#${ scrollId }`).offset()!.top, scrollTop: $(`#${ scrollId }`).offset()!.top,
}, 1000); }, 1000);
} else { } else {
this.container.html(newHtml); this.container.html(newHtml);
window.scrollTo(0, 0); if (this.options.scrollParent) {
$(`#${ this.options.scrollParent }`)[0].scrollTop = 0;
} else {
window.scrollTo(0, 0);
}
} }
this.wireLinks(); this.wireLinks();
this.checkGameOver(); this.checkGameOver();