About ToggleSetModel module

This module is a TypeScript version of a Customer's Canvas ToggleSet SDK. It consists of the following:

• ToggleSet model generated from protobuf file (located at ../proto)
• Basic compatibility tests (src/tests)

Usage

Serialization/deserialization

To serialize ToggleSet or ChoiceSet object instance the following instance methods exist:

• toBinary
• toJson
• toJsonString

To deserialize ToggleSet or ChoiceSet object the following static methods exist:

• fromBinary
• fromJson
• fromJsonString

Code samples

Deserialization:

// ToggleSet
// from binary representation (Uint8Array)
const toggleSet = ToggleSet.fromBinary(binaryData);

// from JSON object
const toggleSet = ToggleSet.fromJson(jsonObject);

// from JSON string
const toggleSet = ToggleSet.fromJsonString(jsonString);

// ChoiceSet
// from binary representation (Uint8Array)
const toggleSet = ToggleSet.fromBinary(binaryData);

// from JSON object
const toggleSet = ToggleSet.fromJson(jsonObject);

// from JSON string
const toggleSet = ToggleSet.fromJsonString(jsonString);

Serialization:

// ToggleSet
// to binary representation
const binaryData = toggleSet.toBinary();

// to JSON object
const jsonObject = toggleSet.toJson();

// to JSON string
const jsonString = toggleSet.toJsonString();

// ChoiceSet
// to binary representation
const binaryData = choiceSet.toBinary();

// to JSON object
const jsonObject = choiceSet.toJson();

// to JSON string
const jsonString = choiceSet.toJsonString();

Creating model objects in code

ToggleSet:

// Create ToggleSet
const toggleSet = new ToggleSet();
toggleSet.id = "toggle-set-id"
toggleSet.name = "toggle set name";

// Create Text Toggle
const textToggle = new Toggle();
textToggle.id = "toggle-0-text";
textToggle.name = "Text toggle";
textToggle.selector = ".text-item-class";
textToggle.params = {
    case: "textParams",
    value: new TextParams({
        allowCustom: true,
        items: [
            new TextItem({label: "Mr.", value: new TextValue({value: "<p><span>Mr.</span></p>"})}),
            new TextItem({label: "Mrs.", value: new TextValue({value: "<p><span>Mrs.</span></p>"})}),
        ]
    })} 

toggleSet.toggles.push(textToggle);

// Create Color Toggle
const colorToggle = new Toggle();
colorToggle.id = "toggle-1-color";
colorToggle.name = "Color toggle";
colorToggle.selector = ".color-item-class";
colorToggle.params = {
    case: "colorParams",
    value: new ColorParams({
        items: [
            new ColorItem({
                label: "Red", 
                previewColor: "rgb(255,0,0)",
                value: new ColorValue({
                    "fillColor": "rgb(255,0,0)",
                    "strokeColor": "rgb(128,0,0)"
                })
            }),
            new ColorItem({
                label: "Blue", 
                previewColor: "rgb(0,0,255)",
                value: new ColorValue({
                    "fillColor": "rgb(0,0,255)",
                    "strokeColor": "rgb(0,0,128)"
                })
            }),
        ]
    })} 

toggleSet.toggles.push(colorToggle);

// Create Visibility Toggle
const visibilityToggle = new Toggle();
visibilityToggle.id = "toggle-2-visibility";
visibilityToggle.name = "Visibility toggle";
visibilityToggle.selector = ".visibility-item-class";
visibilityToggle.params = {
    case: "visibilityParams",
    value: new VisibilityParams({label: "Visibility label"})
};

toggleSet.toggles.push(visibilityToggle);

// Create Font Toggle
const fontToggle = new Toggle();
fontToggle.id = "toggle-3-font";
fontToggle.name = "Font toggle";
fontToggle.selector = ".font-item-class";
fontToggle.params = {
    case: "fontParams",
    value: new FontParams({
        items: [
            new FontItem({
                label: "Arial",
                value: new FontValue({
                    postscriptName: "ArialMT",
                    size: 20
                })
            }),
            new FontItem({
                label: "Roboto",
                value: new FontValue({
                    postscriptName: "Roboto-Regular",
                    size: 16
                })
            })
        ]
    })
};

toggleSet.toggles.push(fontToggle);

ChoiceSet:

// Create ChoiceSet
const choiceSet = new ChoiceSet();

// Add Choice for the text toggle
const textToggleChoice = new ToggleChoice();
textToggleChoice.toggleId = "toggle-0-text"; // must correspond to the toggle in the ToggleSet
textToggleChoice.selector = ".text-item-class"
textToggleChoice.selectedOption = new Choice({
    option: {
        case: "textValue",
        value: new TextValue({value: "<p><span>Mrs.</span></p>"})
    }
});
choiceSet.choices.push(textToggleChoice);

// Add ToggleChoice for the color toggle
const colorToggleChoice = new ToggleChoice();
colorToggleChoice.toggleId = "toggle-1-color"; // must correspond to the toggle in the ToggleSet
colorToggleChoice.selector = ".color-item-class"
colorToggleChoice.selectedOption = new Choice({
    option: {
        case: "colorValue",
        value: new ColorValue({
            "fillColor": "rgb(0,0,255)",
            "strokeColor": "rgb(0,0,128)"
        })
    }
});
choiceSet.choices.push(colorToggleChoice);

// Add ToggleChoice for the visibility toggle
const visibilityToggleChoice = new ToggleChoice();
visibilityToggleChoice.toggleId = "toggle-2-visibility"; // must correspond to the toggle in the ToggleSet
visibilityToggleChoice.selector = ".visibility-item-class"
visibilityToggleChoice.selectedOption = new Choice({
    option: {
        case: "visibilityValue",
        value: new VisibilityValue({value: true})
    }
});
choiceSet.choices.push(visibilityToggleChoice);

// Add ToggleChoice for the font toggle
const fontToggleChoice = new ToggleChoice();
fontToggleChoice.toggleId = "toggle-3-font"; // must correspond to the toggle in the ToggleSet
fontToggleChoice.selector = ".font-item-class"
fontToggleChoice.selectedOption = new Choice({
    option: {
        case: "fontValue",
        value: new FontValue({
            postscriptName: "Roboto-Regular",
            size: 16
        })
    }
});
choiceSet.choices.push(fontToggleChoice);