@blockly/plugin-typed-variable-modal

A Blockly plugin that adds the ability to create a modal for creating typed variables.

Installation

npm install @blockly/plugin-typed-variable-modal --save

Usage

To add a Typed Variable Modal to your application you will have to create a custom dynamically populated flyout category. More information on custom flyouts can be found here.

Import

import * as Blockly from 'blockly';
import {TypedVariableModal} from '@blockly/plugin-typed-variable-modal';

or

<script src="https://unpkg.com/@blockly/plugin-typed-variable-modal"></script>

Setup

Create your workspace.

workspace = Blockly.inject('blocklyDiv', {
  toolbox: toolbox,
});

Add a custom category to your toolbox.

<category name="Colours" custom="CREATE_TYPED_VARIABLE"></category>

Define a callback to provide the category content.

const createFlyout = function (workspace) {
  let xmlList = [];
  // Add your button and give it a callback name.
  const button = document.createElement('button');
  button.setAttribute('text', 'Create Typed Variable');
  button.setAttribute('callbackKey', 'callbackName');

  xmlList.push(button);

  // This gets all the variables that the user creates and adds them to the
  // flyout.
  const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
  xmlList = xmlList.concat(blockList);
  return xmlList;
};

Register the callback for the toolbox category.

workspace.registerToolboxCategoryCallback(
  'CREATE_TYPED_VARIABLE',
  createFlyout,
);

Create your Typed Variable Modal using the workspace, callbackName for the button and your types.

const typedVarModal = new TypedVariableModal(workspace, 'callbackName', [
  ['PENGUIN', 'Penguin'],
  ['GIRAFFE', 'Giraffe'],
]);
typedVarModal.init();

Blockly Languages

We do not currently support translating the text in this plugin to different languages. However, if you would like to support multiple languages the different messages in the typed variable modal can be set by calling typedVarModal.setLocale(messages).

Messages that need to be translated for a Typed Variable Modal:

• TYPED_VAR_MODAL_CONFIRM_BUTTON (Default: "Ok"): The label for the confirmation button.
• TYPED_VAR_MODAL_VARIABLE_NAME_LABEL (Default: "Variable Name: "): The label in front of the variable input.
• TYPED_VAR_MODAL_TYPES_LABEL (Default: "Variable Types"): The label in front of the types.
• TYPED_VAR_MODAL_CANCEL_BUTTON (Default: "Cancel"): The label for the cancel button.
• TYPED_VAR_MODAL_TITLE (Default: "Create Typed Variable"): The modal title.
• TYPED_VAR_MODAL_INVALID_NAME (Default: "Name is not valid. Please choose a different name.") The message used when a user gives an invalid variable name. Name is invalid if it is the message used for renaming a variable, creating a variable, or an empty string.

API

• init: Create a typed variable modal and register it with the given button name.
• dispose: Dispose of the typed variable modal.
• show: Shows the modal and focus on the first focusable element.
• hide: Hide the modal.
• render: Create all the dom elements for the modal.
• setLocale: Change the language for the typed variable modal.

License

Apache 2.0