Class: Ffau

Ffau (quietopt)

Class representing a Ffau instance, including all components.

Constructor

new Ffau (quietopt)

Initialise the Ffau instance in the document
Parameters:
Name Type Attributes Description
quiet Boolean <optional>
Set to true to prevent console.logs in the Ffau instance
Properties:
Name Type Description
quiet Boolean If `true`, no deliberate console.log/console.warns will occur
hasSettings Boolean | undefined Indicates whether the workspace has a settings menu attached
settingsOpen Boolean | undefined Indicates whether the settings menu is open
settings settingsItemsType | settingsCategoryType Indicates whether the workspace has a settings menu attached
settingsDiv HTMLDivElement | undefined The container of the settings menu (if it exists)
workspaceDiv HTMLDivElement | undefined The container of the workspace (if it has been created)
toolboxDiv HTMLDivElement | undefined The container of the toolbox (if it has been created)
ffauWorkspace Blockly.WorkspaceSvg | undefined The Blockly workspace SVG object (if it exists)
Source:

Members

editMode

Properties:
Type Description
boolean `true` is code/typing mode; false is block mode
Source:

Methods

(static) generateID (object, objectType) → {string}

Generate an ID for a Ffau component
Parameters:
Name Type Description
object HTMLElement The element to generate an ID for
objectType string The name of the component
Source:
Returns:
Type
string

addEvent (customFunctionopt, scopeopt, eventopt)

Add an event listener to Blockly or Ace to generate a preview and code
Parameters:
Name Type Attributes Default Description
customFunction function | Array <optional>
a function to execute at the end of the change event. Gets passed the scope as a parameter. Can also be given [function, a], where `a` is an array of arguments to pass to the function (after the first argument, the scope)
scope string <optional>
blockly whether to apply the event to "blockly" or "ace"
event string <optional>
the name of the event (e.g "change") to trigger the callback on - required if `scope === "ace"`, is ignored otherwise
Source:

addSettings (settings, autoCloseopt)

Add the settings popout to the Blockly container
Parameters:
Name Type Attributes Description
settings settingsItemsType | settingsCategoryType
autoClose number <optional>
0 means no auto-close, 1 means auto-close if focus shifts to elsewhere in editor, 2 means auto-close if focus shifts outside of editor, and 2 means to auto-close if focus leaves settings menu.
Source:
Example
ffau.addSettings([
     {
            name: "theme",
            label: "Theme",
            type: "dropdown",
            options: [
                ["Panda", "panda"],
                ["Dark", "dark"],
                ["Light", "light"]
            ],
            callback: (value) => {
                ffau.setTheme(value); // Set the theme for the Ffau editor
            }
        },
     {
            name: "ace_theme",
            label: "Editor theme",
            type: "dropdown",
            default: "1",
            options: [
                ["Light", "0"],
                ["Dark", "1"]
            ],
            callback: (value) => {         // Set the theme for the Ace editor
                if (value === "0") {
                    ffau.editor.setOptions({
                        theme: "ace/theme/dawn"
                    });
                } else {
                    ffau.editor.setOptions({
                        theme: "ace/theme/tomorrow_night"
                    });
                }
            }
        },
     {
            name: "font_size",
            label: "Ace font size",
            type: "numeric",
            default: "16",
            callback: (value) => {         // Set Ace editor font size/demonstrate numeric input
                ffau.editor.setOptions({
                    fontSize: value
                });
            }
        }],
     1 // Set loose auto-closing (auto-close settings menu if focus is shifted to elsewhere in editor)
     );

clearWorkspace (trashItemsopt)

Clears all blocks from the workspace without further confirmation
Parameters:
Name Type Attributes Default Description
trashItems boolean <optional>
true Whether to move deleted items to the trashcan storage. Default
Source:

closeSettingsMenu (forceopt)

Close the settings dialogue (if it exists)
Parameters:
Name Type Attributes Default Description
force boolean <optional>
false Force the animation or not - if false, if the window is already closed nothing will happen. Otherwise, the animation will play assuming the window was open.
Source:

codeToXML (code) → {string}

Converts the code string into a Blockly XML string
Parameters:
Name Type Description
code string the HTML source code string
Source:
Returns:
- the Blockly XML
Type
string

downloadXML (fileNameopt) → {string}

Downloads a txt file containing the XML data of the project, which can be used to save it locally.
Parameters:
Name Type Attributes Default Description
fileName string <optional>
ffau-export.txt The name of the txt file
Source:
Returns:
- The XML data as a string
Type
string

generateCode () → {string}

Return HTML code in string format
Source:
Returns:
Type
string

generateXML () → {string}

Return the XML block code in string format
Source:
Returns:
Type
string

isFfauTheme (className, appendPrefix) → {boolean}

Checks if a theme name is a valid Ffau theme, using the CSS-based checking mechanics automatically added by `dist/compile_styles.py`.
Parameters:
Name Type Description
className string The name of the theme
appendPrefix boolean Specifies the format of the theme name: if true, then a theme in a format like `panda` or `dark` is expected. If false, a full classname, like `blocklyThemePanda` or `blocklyThemeDark` is expected.
Source:
Returns:
- Whether or not the input refers to a real Ffau theme.
Type
boolean

openSettingsMenu (forceopt)

Open the settings dialogue (if it exists)
Parameters:
Name Type Attributes Default Description
force boolean <optional>
false Force the animation or not - if false, if the window is already open nothing will happen. Otherwise, the animation will play assuming the window was closed.
Source:

removeSettings () → {boolean}

Removes the settings menu, or returns false if settings menu does not exist.
Source:
Returns:
success
Type
boolean

renderBlockly (frame, toolbox, theme, settingsopt, optionsopt) → {*}

Inject the blockly editor (should be called first)
Parameters:
Name Type Attributes Description
frame HTMLElement The frame to put the editor in
toolbox HTMLElement The XML toolbox
theme string The name of the theme to initiate Blockly with.
settings settingsItemsType | settingsCategoryType <optional>
options object <optional>
Custom options for the Blockly editor. Ffau will apply some default options if this is not specified.
Source:
Returns:
Type
*

renderCode (ace, frame, aceThemeopt, readOnlyopt) → {object}

Render the code preview
Parameters:
Name Type Attributes Default Description
ace object The imported ace variable from the Ace library
frame HTMLElement The frame to put the editor in
aceTheme string <optional>
ace/theme/textmate The theme to use for Ace
readOnly boolean <optional>
Should the editor be read only?
Source:
Returns:
- The editor object (you can call functions on this to customise Ace)
Type
object

renderPreview (frame) → {HTMLElement}

Render the iframe preview
Parameters:
Name Type Description
frame HTMLElement The frame to put the preview in
Source:
Returns:
- The generated iframe
Type
HTMLElement

renderToolbox (parent, id, categoriesopt, blocksopt)

Renders the toolbox given a set of blocks or categories
Parameters:
Name Type Attributes Description
parent HTMLElement
id string
categories Array.<FfauCategory> <optional>
blocks 'all' | Array.<string> <optional>
Source:

setTheme (theme)

Set the theme of the Ffau
Parameters:
Name Type Description
theme ffauTheme the name of the theme
Source:

setXML (xmlString)

Set the Blockly workspace to a specified XML string
Parameters:
Name Type Description
xmlString string The XML string to use
Source:

toggleEditMode ()

Toggle boolean value of ffau.editMode
Source:

updateSettings (updaters)

Manually changes the value of a setting in the settings menu
Parameters:
Name Type Description
updaters object `settingName: newSettingValue` format
Source: