Tab Code Box

TabCodeBox offers ability to switch between code samples using tabs.

Usage Example

The following example demonstrates how to create a TabCodeBox. Simply instantiate the TabCodeBox class by passing a reference to the root element of code box. You can read more about elements of code box here. You can also provide additional options as a second parameter.

<div id="MyTabCodeBox">
    <pre data-cb-name="addition" data-cb-active><code>let x = 1;
let y = 2;

console.log("result: " + (x + y));</code></pre>
    <pre data-cb-name="connecting strings"><code>let string1 = "This is";
let string2 = " string.";

console.log(string1 + string2);</code></pre>

    <div data-cb-name="Image.png" data-cb-file="./img/Image.png"></div>
</div>

import { TabCodeBox } from "@jirkasa/code-box";

new TabCodeBox(document.getElementById("MyTabCodeBox"), {
    svgSpritePath: "./img/icon-sprite.svg",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download"
    }
});

let x = 1;
let y = 2;

console.log("result: " + (x + y));

let string1 = "This is";
let string2 = " string.";

console.log(string1 + string2);

If you want to create multiple tab code boxes, you can use the TabCodeBoxCreator. For more information, refer to the chapter on creators.

Options

TabCodeBox accepts the following options and all options from the base CodeBox class.

svgSpritePath : string

Default value: undefined

Specifies path to the SVG sprite that contains icons.

svgSpriteIcons : object

Default value: {}

Specifies names of the icons in the SVG sprite in a form of object with the following properties:

• codeFile - name of icon for code view tab button
• file - name of icon for file tab button
• download - name of icon that is displayed for tab button of downloadable file

// ...
svgSpriteIcons: {
    codeFile: "file",
    file: "file-2",
    download: "download"
}
// ...

Methods

TabCodeBox has the following methods. Most of these methods are also described in the chapter about the base CodeBox class. However, some of them have a return type that is a subclass of CodeBoxCodeView or CodeBoxFile - specifically, TabCodeBoxCodeView or TabCodeBoxFile. For clarity, these methods are also listed in this chapter.

appendTo

appendTo(element: HTMLElement): void

Appends code box to element.

Params

detach

detach(): void

Detaches code box from its parent element.

init

init(): void

Initializes code box if it hasn't been initialized yet. When lazy initialization is disabled, the code box is initialized immediately after it is created.

isInitialized

isInitialized(): boolean

Checks whether the code box is initialized.

Returns

addOnInitListener

addOnInitListener(callback: () => void): void

Registeres function to be called when code box is initialized.

Params

addCodeView

addCodeView(identifier: string, codeView: CodeView): boolean

Adds new code view to code box (copy of passed code view is made).

Params

Returns

getCodeViews

getCodeViews(): TabCodeBoxCodeView[]

Returns all code views of code box.

Returns

getCodeView

getCodeView(identifier: string): TabCodeBoxCodeView | null

Returns code view based on identifier.

Params

Returns

removeCodeView

removeCodeView(identifier: string): boolean

Removes code view from code box.

Params

Returns

removeAllCodeViews

removeAllCodeViews(): void

Removes all code views from code box.

changeCodeViewIdentifier

changeCodeViewIdentifier(identifier: string, newIdentifier: string): boolean

Changes identifier of code view in code box.

Params

Returns

getCodeViewButtonPosition

getCodeViewButtonPosition(identifier: string): number | null

Returns position of code view button.

Params

Returns

setCodeViewButtonPosition

setCodeViewButtonPosition(identifier: string, position: number): boolean

Changes position of code view button by swapping it with different code view or file button.

Params

Returns

setActiveCodeView

setActiveCodeView(identifier: string): boolean

Sets code view as active (displays it in code box).

Params

Returns

setNoActiveCodeView

setNoActiveCodeView(): void

Displays no code view in code box.

getActiveCodeView

getActiveCodeView(): TabCodeBoxCodeView | null

Returns currently active code view.

Returns

addFile

addFile(identifier: string, downloadLink: string | null): boolean

Adds new file to code box.

Params

Returns

getFiles

getFiles(): TabCodeBoxFile[]

Returns all files of code box.

Returns

getFile

getFile(identifier: string): TabCodeBoxFile | null

Returns file based on identifier.

Params

Returns

removeFile

removeFile(identifier: string): boolean

Removes file from code box.

Params

Returns

removeAllFiles

removeAllFiles(): void

Removes all files from code box.

changeFileIdentifier

changeFileIdentifier(identifier: string, newIdentifier: string): boolean

Changes identifier of file in code box.

Params

Returns

changeFileDownloadLink

changeFileDownloadLink(identifier: string, newDownloadLink: string | null): boolean

Changes download link of file.

Params

Returns

getFileButtonPosition

getFileButtonPosition(identifier: string): number | null

Returns position of file button.

Params

Returns

setFileButtonPosition

setFileButtonPosition(identifier: string, position: number): boolean

Changes position of file button by swapping it with different code view or file button.

Params

Returns

reset

reset(): void

Resets code box to its post-initialization state.

createMemento

createMemento(): CodeBoxMemento

Creates memento (saved state of code box).

Returns

applyMemento

applyMemento(memento: CodeBoxMemento): void

Applies memento (sets code box to the state defined by the provided memento).

Params