User:PerfektesChaos/js/jsonDebug

JavaScript gadget – show JSON analysis live within the current wiki page.

This is heading for wiki pages with embedded active JSON code. Especially WP:TemplateData requires that on template documentation.

Purpose
Syntax problems in JSON code will be located, and the resulting source code after all transclusions will be shown in the top region of the page. Hidden JSON code will become visible and receives syntax highlighting, and the first error (if any) will be emphasized.

Usage
Include the following lines into your common.js, global.js etc.:
 * The first statement is loading a smaller “scout” script which will check circumstances whether the main gadget would be appropriate.
 * The second statement sends a request for the Template namespace that JSON code is expected within some of those pages.
 * That can be done at any time as often as desired.
 * The argument for namespace might be a namespace number or the generic or localized namespace number. An Array of such specifications is also possible.
 * Pages of such namespaces will be inspected and the main gadget will be loaded.

Behaviour
If elements were detected each will be equipped with a button.

On button click a box will be inserted in the top region of the page.
 * The box will contain JSON source code.
 * The source code area may be enlarged vertically.
 * If a syntax error could be found in JSON source code, details of the first error will be shown in a yellow box on top of the source code, and that line is focussed and marked.
 * In the top right corner of the inserted box there is a small button with an X which will hide the box. Any JSON element button will open it again for the related source code.
 * The first time it might take a few seconds, but the syntactical elements of the source code will be displayed in colour scheme.

API
Experienced users may execute the following statement:

There  is a   which will be called as soon as the gadget has been loaded.
 * The function is called with one argument:
 * is an application
 * It might be inspected and will tell some version information.
 * There is also a  at   which takes one argument: JSON source code, which will be analyzed and shown on top of the current wiki page.

Triggering
The wiki page is supposed to contain valid or invalid JSON code units. They might be hidden or visible.

If detected, a button will be inserted just before the code element. The example shows a typical situation the gadget is designed for: The terminating  after   is missing. An unspecified error message has been issued. The errorneous JSON code is available but hidden.

The task is identified by: A button will be inserted just before the element.
 * 1)   has been assigned to the element.
 * 2) The element is a   or.
 * 3) The element contains the JSON code.

All source code edits of pages with a content model containing  (case insensitive) will get the button.

More selectors for buttons may be communicated with the following statement: Here  is an   with optional components:
 * – Array with names of classes
 * – Array with names of tags, which are to be considered in addition to  and.

Credits

 * The parser has been taken from |circlecell/jsonlint-mod/blob/master/lib/jsonlint.js circlecell/jsonlint-mod @GitHub
 * Some ideas have been inspired by jsonlint.com forms.
 * Syntax highlighting is done on the fly by mw:Extension:CodeMirror from codemirror.net.

Internationalization
Not really required for gadget itself now.

Suggestions on foreign languages may be offered, as well as a translation of this page.

Codes
A test page tells how to check for proper functionality.

de:User:PerfektesChaos/js/jsonDebug