Go Results Highlighter

Installation

Using Unpkg CDN

Include following lines in your website:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/go-results-highlighter@latest/dist/browser.css">
<script src="//cdn.jsdelivr.net/npm/go-results-highlighter@latest/dist/browser.js"></script>

Using NPM

Download Go Results Highlighter using following command:

npm install go-results-highlighter

Then, the packages exposes following files:

go-results-highlighter - default behavior of the packages exposes GoResultsHighlighter function that can be manually attached to any table with results
go-results-highlighter/dist/browser.css - default highlighting styles that can be included in your page
go-results-highlighter/dist/browser.js - browser-specific, minified version, that will automatically bind highlighter to elements with data-go-results attribute

Downloading manually

Download the latest release from GitHub

Include go-results-highlighter.js and go-results-highlighter.css on your site.

Usage

There're several ways possible to use the Highlighter.

Let Go Results Highlighter use default settings (no additional JS code)

Add data-go-results attribute to table or pre tags which contain Go results.

Manually bind Go Results Highlighter to selected elements

Highlighter is served using Universal Module Definition, therefore can be used globally:

var highlighter = new GoResultsHighlighter(elementWithGoResults, optionalSettings);

If it detects globally accessible jQuery object, then it's also possible to call:

$(selectorOfElementWithGoResults).goResultsHighlighter(optionalSettings);

React

It's possible to use ref callback approach:

import attachHighlighter from 'go-results-highlighter'

function Table() {
  return (
    <table ref={(element) => attachHighlighter(element, optionalSettings)}>
      ...
    </table>
  );
}

Access to existing highlighter object

It is possible to get a highlighter instance bound to elements using goResultsHighlighter property, eg.

var highlighter = document.querySelector('[data-go-results]').goResultsHighlighter;

or in jQuery:

var highlighter = $('[data-go-results]').data('GoResultsHighlighter'); // or $('[data-go-results]').get().goResultsHighlighter;

Learn more about highlighter's interface

Configuration

Here's the table of available settings that can be overwritten.

Setting	Attribute	Default value	Description
`hovering`	`data-go-hovering`	`true`	Enables highlighting player and opponents on mouse move
`clicking`	`data-go-clickin`	`true`	Enables rearranging table rows when clicking a player
`startingRow`	`data-go-starting-row`	`0`	Makes highlighter skip rows below this value
`placeColumn`	`data-go-place-column`	`0`	Informs highlighter where to look for player's place
`roundsColumn`	`data-go-rounds-columns`	null	Informs highlighter which columns should contain game resutls, column indexes should be separated with coma e.g. `"5,6,7"`. If not set highlighter will search for results in all columns
`rowTags`	-	`"tr"`	Selector used by highlighter to divide results into player rows
`cellTags`	-	`"td,th"`	Selector used by highlighter as a single cell which `textContent` should be analyzed
`cellSeparator`	-	`"[\t ]+"`	Used to divide raw line into columns when building table from raw results
`joinNames`	-	`true`	Whether to join to consecutive cells after place column index into single cell when building table from raw results. The goals is to join Last name and First name columns into one column
`checkColumnsForResults`	-	`true`	Whether the highlighter should first try to find columns with Go results before parsing every row
`ignoreOutOfBoundsRows`	-	`false`	Whether it is allowed to have games with player that are not visible on the list (e.g. when table is paginated)
`results`	-	see below	Results map - `key` is a className and `value` is an RegExp string matching the result. The className is added to the row when highlighting
`results.won`	-	`"([0-9]+)\\+"`	className and RegExp for winning result
`results.lost`	-	`"([0-9]+)\\-"`	className and RegExp for losing result
`results.jigo`	-	`"([0-9]+)="`	className and RegExp for draw result
`results.unresolved`	-	`"([0-9]+)\\?"`	className and RegExp for scheduled or unresolved game
`prefixCls`	-	`"go-results-"`	Prefix added to every className
`rearrangedCls`	-	`"rearranged"`	className added when table is rearranged
`tableCls`	-	`"table"`	className added to element with enabled highlighter
`gameCls`	-	`"game"`	className of highlighted game call
`currentCls`	-	`"current"`	className of the row with highlighted player

If, for any reason, above settings will have to be changed after the initialization, please use configure method on the highlighter instance.

Go Results Highlighter API

Here's the list of available methods and properties to be provided by instance of the highlighter.

Methods

`highlight(player, [games=[], rearrange=false])`

Highlights row with the player and his/hers opponents.

The first argument can be either a number or an object (settings) with properties named as the arguments

Arguments:

player - or settings.player - either an object with settings or a number with player place. If null or player on this place is not found the table is reset to default state and any visual changes are reverted.
games - or settings.games - highlight games with provided opponents, by default no game is highlighted or all games if rows are rearranged (compact mode). Can be single number with opponent's place or a list of numbers (opponents)
rearrange - or settings.rearrange - if true it rearranges the rows with players so the opponents' rows are close to the the highlighted player

See example use cases

`opponents(playerPlace)`

Returns the array of opponents - theirs places (to be precise).

`configure(settings)`

Allows to modify the settings with which the highlighter was initialized.

`clearInlineStyles()`

Removes inline styles from player rows and theirs children. This method is called when using bookmarklet only.

See usage for details

Properties

`hovering`

Boolean value. Controls whether the rows should be highlighted when mouse is moving above the table. Note that it doesn't stop manual highlighting.

`rearranging`

Boolean value. Controls whether the rows can be rearranged on mouse click. Note that it doesn't stop manual rearranging.

`element`

Readonly. Holds the reference to the DOM element with results.

`isHighlighting`

Readonly boolean. Informs whether any player is highlighted.

`isRearranged`

Readonly boolean. Informs whether the rows of the result table are rearranged.

`player`

Readonly. Holds the place of currently highlighted player (or null if no one is highlighted).

`games`

Readonly array. Array with places of opponents for whom games against current player are highlighted.

`players`

Readonly number. Contains the number of total rows with players.

`configuration`

Readonly object. Holds current configuration of the highlighter.

Examples

Probably common use cases of the Go Results Highlighter.

Setup

<table id="go-results" data-go-results>
<!-- ... results ... -->
</table>

// grab the instance of highlighter from existing element (if that element had data-go-results attribute on page load)
var results = document.getElementById('go-results').goResultsHighlighter;

or

// create new highlighter
var results = new GoResultsHighlighter(document.getElementById('go-results'));

Highlight the player on the first place and all opponents:

results.highlight(1);

results.highlight({ player: 1 });

Show opponents of player on 3rd place and rearrange the table (dimming other rows)

results.highlight(3, true);

results.highlight({ player: 3, rarrange: true });

Highlight the player on 2nd place and mark his game with player on 3rd place

results.highlight(2, 3);

results.highlight({ player: 2, games: 3 });

Highlight the player on 3rd place and mark games with players 4 and 5, also rearrange the rows.

results.highlight(3, [4,5], true);

results.highlight({ player: 3, games: [4,5], rearrange: true });

Remove highlighting

results.highlight(null); // or any value that doesn't match any player

Get current highlighted player

var highlightedPlayer = results.player;

Get list of highlighted games

var highlightedGames = results.games;

Get opponents for player on 3rd place

var opponents = results.opponents(3);

Check if table is rearranged or highlighted

var isHighlighting = results.isHighlighting;
var isRearranged = results.isRearranged;

Go Results Highlighter3.0.4

by Artur Barcicki