Creators

Most of the time, you probably don't want to create each code box or code view manually. Instead, you can create them all at once using creators.

Code View Creator

CodeViewCreator is a component that allows you to create multiple code views at once. The following example demonstrates how it can be used. You simply create an instance of CodeViewCreator class and call its create method, passing in a selector to target the <pre> elements from which the code views should be created. If no options are provided as the second parameter to the create method, the default options will be used. These default options can be set by passing them to the constructor when creating an instance of CodeViewCreator.

<pre data-my-code-view><code>let x = 1;
let y = 2;

console.log("result: " + (x + y));</code></pre>

<br>

<pre data-my-code-view><code>let string1 = "This is";
let string2 = " string.";

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

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

const codeViewCreator = new CodeViewCreator();
codeViewCreator.create("[data-my-code-view]");

let x = 1;
let y = 2;

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

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

console.log(string1 + string2);

Assigning Identifiers

When you use the CodeViewCreator to create code views, you don’t have direct access to the created code views. However, you can assign identifiers to the <pre> elements using the data-cb-id attribute as shown in the following example. After calling the create method to generate the code views, you can retrieve a specific code view by using the getCreatedCodeViewById method.

<pre data-my-code-view data-cb-id="MyIdentifier"><code>let x = 1;
let y = 2;

console.log("result: " + (x + y));</code></pre>

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

const codeViewCreator = new CodeViewCreator();
codeViewCreator.create("[data-my-code-view]");

const codeView = codeViewCreator.getCreatedCodeViewById("MyIdentifier");
codeView.addHighlight("4");

let x = 1;
let y = 2;

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

Methods

CodeViewCreator has the following methods.

create

create(selector: string, codeViewOptions: CodeViewOptions = this.defaultCodeViewOptions): number

Creates code views based on the provided selector.

Params

Returns

getCreatedCodeViewById

getCreatedCodeViewById(id: string): CodeView | null

Returns created code view by id.

Params

Returns

getCreatedCodeViews

getCreatedCodeViews(): CodeViewCreatorEntry[]

Returns all created code views along with the dataset of their corresponding HTML <pre> elements.

Returns

getCreatedCodeViewsCount

getCreatedCodeViewsCount(): number

Returns the number of created code views.

Returns

Code Box Creators

If you want to create multiple code boxes at once, you can use creators. There is a specific creator class for each type of code box:

• TabCodeBoxCreator
• ProjectCodeBoxCreator
• VirtualCodeBoxCreator

All of these creator classes can accept default code box options as a parameter in the constructor, which will be used if no options are provided as the second parameter to the create method when creating code boxes.

Assigning Identifiers

All code box creator classes inherit from the generic CodeBoxCreator base class, which defines some common methods. One of these methods is getCreatedCodeBoxById, which allows you to retrieve a created code box by its identifier. These identifiers can be assigned to the root elements of code boxes using the data-cb-id attribute, as shown in the following example.

<div data-my-code-box data-cb-id="MyIdentifier">
    <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>

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

const codeBoxCreator = new TabCodeBoxCreator({
    svgSpritePath: "./img/icon-sprite.svg",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download"
    }
});
codeBoxCreator.create("[data-my-code-box]");

const codeBox = codeBoxCreator.getCreatedCodeBoxById("MyIdentifier");
codeBox.init();
codeBox.setActiveCodeView("connecting strings");

let x = 1;
let y = 2;

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

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

console.log(string1 + string2);

Tab Code Box Creator

TabCodeBoxCreator can be used to create TabCodeBoxes. The following example shows how to do it. Simply create an instance of the TabCodeBoxCreator class and call the create method, passing in a selector to target the elements from which the code boxes should be created.

<div data-my-code-box>
    <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>

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

const codeBoxCreator = new TabCodeBoxCreator({
    svgSpritePath: "./img/icon-sprite.svg",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download"
    }
});
codeBoxCreator.create("[data-my-code-box]");

let x = 1;
let y = 2;

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

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

console.log(string1 + string2);

Methods

TabCodeBoxCreator has the following methods.

create

create(selector: string, codeBoxOptions: TabCodeBoxOptions = this.defaultCodeBoxOptions): number

Creates code boxes based on the provided selector.

Params

Returns

getCreatedCodeBoxById

getCreatedCodeBoxById(id: string): TabCodeBox | null

Returns created code box by id.

Params

Returns

getCreatedCodeBoxes

getCreatedCodeBoxes(): CodeBoxCreatorEntry<TabCodeBox>[]

Returns all created code boxes along with the dataset of their root elements.

Returns

getCreatedCodeBoxesCount

getCreatedCodeBoxesCount(): number

Returns the number of created code boxes.

Returns

Project Code Box Creator

ProjectCodeBoxCreator can be used to create ProjectCodeBoxes. The following example shows how to do it. Simply create an instance of the ProjectCodeBoxCreator class and call the create method, passing in a selector to target the elements from which the code boxes should be created.

<div data-my-code-box data-cb-project-name="example-app">
    <pre data-cb-active data-cb-name="style.css" data-cb-folder="css" data-cb-active><code>h1 {
    font-size: 16px;
    color: red;
}</code></pre>
    <pre data-cb-name="main.js" data-cb-folder="js"><code>let x = 1;
let y = 2;

console.log("result: " + (x + y));</code></pre>
</div>

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

const codeBoxCreator = new ProjectCodeBoxCreator({
    minCodeViewLinesCount: 10,
    svgSpritePath: "./img/icon-sprite.svg",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download",
        panelOpenButton: "double-arrow-right",
        folderArrow: "arrow-right",
        folder: "folder",
        project: "inventory",
        package: "package"
    }
});
codeBoxCreator.create("[data-my-code-box]");

h1 {
    font-size: 16px;
    color: red;
}

let x = 1;
let y = 2;

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

Inheritance

As described here, project code boxes can inherit from other project code boxes. When using ProjectCodeBoxCreator to create code boxes, you can specify a parent code box by adding the data-cb-extends attribute to the root element of code box. Simply set the value of data-cb-extends attribute to match the data-cb-id attribute of the parent code box as shown in the following example.

<div data-my-code-box data-cb-id="1" data-cb-project-name="example-app">
    <pre data-cb-active data-cb-name="style.css" data-cb-folder="css" data-cb-active><code>h1 {
    font-size: 16px;
    color: red;
}</code></pre>
    <pre data-cb-name="main.js" data-cb-folder="js"><code>let x = 1;
let y = 2;

console.log("result: " + (x + y));</code></pre>
</div>

<br>

<div data-my-code-box data-cb-extends="1" data-cb-id="2">
    <pre data-cb-name="readme.txt" data-cb-active><code>This is an example app to show code box inheritance.</code></pre>
</div>

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

const codeBoxCreator = new ProjectCodeBoxCreator({
    minCodeViewLinesCount: 10,
    svgSpritePath: "./img/icon-sprite.svg",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download",
        panelOpenButton: "double-arrow-right",
        folderArrow: "arrow-right",
        folder: "folder",
        project: "inventory",
        package: "package"
    }
});
codeBoxCreator.create("[data-my-code-box]");

h1 {
    font-size: 16px;
    color: red;
}

let x = 1;
let y = 2;

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

This is an example app to show code box inheritance.

Methods

ProjectCodeBoxCreator has the following methods.

create

create(selector: string, codeBoxOptions: ProjectCodeBoxOptions = this.defaultCodeBoxOptions): number

Creates code boxes based on the provided selector.

Params

Returns

getCreatedCodeBoxById

getCreatedCodeBoxById(id: string): ProjectCodeBox | null

Returns created code box by id.

Params

Returns

getCreatedCodeBoxes

getCreatedCodeBoxes(): CodeBoxCreatorEntry<ProjectCodeBox>[]

Returns all created code boxes along with the dataset of their root elements.

Returns

getCreatedCodeBoxesCount

getCreatedCodeBoxesCount(): number

Returns the number of created code boxes.

Returns

Virtual Code Box Creator

VirtualCodeBoxCreator can be used to create VirtualCodeBoxes. The following example shows how to do it. Simply create an instance of the VirtualCodeBoxCreator class and call the create method, passing in a selector to target the elements from which the code boxes should be created.

<div data-my-code-box>
    <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>

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

const codeBoxCreator = new VirtualCodeBoxCreator();
codeBoxCreator.create("[data-my-code-box]");

let x = 1;
let y = 2;

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

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

console.log(string1 + string2);

Methods

VirtualCodeBoxCreator has the following methods.

create

create(selector: string, codeBoxOptions: CodeBoxOptions = this.defaultCodeBoxOptions): number

Creates code boxes based on the provided selector.

Params

Returns

getCreatedCodeBoxById

getCreatedCodeBoxById(id: string): VirtualCodeBox | null

Returns created code box by id.

Params

Returns

getCreatedCodeBoxes

getCreatedCodeBoxes(): CodeBoxCreatorEntry<VirtualCodeBox>[]

Returns all created code boxes along with the dataset of their root elements.

Returns

getCreatedCodeBoxesCount

getCreatedCodeBoxesCount(): number

Returns the number of created code boxes.

Returns