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) |
Members
editMode
Properties:
Type | Description |
---|---|
boolean | `true` is code/typing mode; false is block mode |
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 |
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 |
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. |
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 |
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. |
codeToXML (code) → {string}
Converts the code string into a Blockly XML string
Parameters:
Name | Type | Description |
---|---|---|
code
|
string | the HTML source code string |
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 |
Returns:
- The XML data as a string
- Type
- string
generateCode () → {string}
Return HTML code in string format
Returns:
- Type
- string
generateXML () → {string}
Return the XML block code in string format
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. |
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. |
removeSettings () → {boolean}
Removes the settings menu, or returns false if settings menu does not exist.
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. |
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? |
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 |
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> |
setTheme (theme)
Set the theme of the Ffau
Parameters:
Name | Type | Description |
---|---|---|
theme
|
ffauTheme | the name of the theme |
setXML (xmlString)
Set the Blockly workspace to a specified XML string
Parameters:
Name | Type | Description |
---|---|---|
xmlString
|
string | The XML string to use |
toggleEditMode ()
Toggle boolean value of ffau.editMode
updateSettings (updaters)
Manually changes the value of a setting in the settings menu
Parameters:
Name | Type | Description |
---|---|---|
updaters
|
object | `settingName: newSettingValue` format |