Difference between revisions of "Widget:CodeExplorer"
From Coder Merlin
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
Parameters: | Parameters: | ||
;userName: The current user's username | ;userName: string: The current user's username | ||
;pageName: string: The name of the page from which the widget is invoked | |||
;codeExplorerGroupID: string: The code explorer group. If empty, the submit button will be disabled. | |||
;uniqueID: integer: id for editor, must be unique per page | ;uniqueID: integer: id for editor, must be unique per page | ||
;width: integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (full width) | ;width: integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (full width) | ||
| Line 15: | Line 17: | ||
{{#widget:CodeExplorer | {{#widget:CodeExplorer | ||
|userName=john-williams | |userName=john-williams | ||
|pageName=Boolean algebra | |||
|codeExplorerGroupID=WTRS-8527 | |||
|uniqueID=10 | |uniqueID=10 | ||
|width=null | |width=null | ||
| Line 51: | Line 55: | ||
} | } | ||
); | ); | ||
// Set size | |||
codeEditor<!--{$uniqueID|validate:int}-->.setSize("<!--{$width}-->", "<!--{$height}-->"); | codeEditor<!--{$uniqueID|validate:int}-->.setSize("<!--{$width}-->", "<!--{$height}-->"); | ||
// Determine if submit button is enabled, if not, disable | |||
var isSubmitEnabled = '<!--{$codeExplorerGroupID|strip}-->'.length > 0; | |||
if (isSubmitEnabled) { | |||
var submitButton = $("#codeEditorSubmitButton<!--{$uniqueID|validate:int}-->"); | |||
submitButton.prop("value", "Submit to <!--{$codeExplorerGroupID|strip}-->"); | |||
} else { | |||
var submitButton = $("#codeEditorSubmitButton<!--{$uniqueID|validate:int}-->"); | |||
submitButton.attr("disabled", true); | |||
submitButton.css("background-color", "gray"); | |||
} | |||
// Attach handler to form | // Attach handler to form | ||
$("#codeEditorForm<!--{$uniqueID|validate:int}-->").submit(function(event) { | $("#codeEditorForm<!--{$uniqueID|validate:int}-->").submit(function(event) { | ||
| Line 113: | Line 129: | ||
// Re-enable buttons | // Re-enable buttons | ||
executeButton.attr("disabled", false); | executeButton.attr("disabled", false); | ||
executeButton.css("background-color", executeButtonBackgroundColor); | executeButton.css("background-color", executeButtonBackgroundColor); | ||
submitButton.css("background-color", submitButtonBackgroundColor); | if (isSubmitEnabled) { | ||
submitButton.attr("disabled", false); | |||
submitButton.css("background-color", submitButtonBackgroundColor); | |||
} | |||
}); | }); | ||
}); | }); | ||
| Line 123: | Line 141: | ||
<div class="merlin-code-explorer-control-panel"> | <div class="merlin-code-explorer-control-panel"> | ||
<input id="codeEditorExecuteButton<!--{$uniqueID|validate:int}-->" class="merlin-code-explorer-execute-button" onclick="this.form.submitter = 'execute';" type="submit" value="Run" /> | <input id="codeEditorExecuteButton<!--{$uniqueID|validate:int}-->" class="merlin-code-explorer-execute-button" onclick="this.form.submitter = 'execute';" type="submit" value="Run" /> | ||
<input id="codeEditorSubmitButton<!--{$uniqueID|validate:int}-->" class="merlin-code-explorer-submit-button" onclick="this.form.submitter = 'submit';" type="submit" value="Submit" /> | <input id="codeEditorSubmitButton<!--{$uniqueID|validate:int}-->" class="merlin-code-explorer-submit-button" onclick="this.form.submitter = 'submit';" type="submit" value="Submit"/> | ||
</div> | </div> | ||
<div id="codeEditorCombinedOutput<!--{$uniqueID|validate:int}-->" class="merlin-code-explorer-combined-output"></div> | <div id="codeEditorCombinedOutput<!--{$uniqueID|validate:int}-->" class="merlin-code-explorer-combined-output"></div> | ||
Revision as of 10:57, 20 July 2021
Parameters:
- userName
- string: The current user's username
- pageName
- string: The name of the page from which the widget is invoked
- codeExplorerGroupID
- string: The code explorer group. If empty, the submit button will be disabled.
- uniqueID
- integer: id for editor, must be unique per page
- width
- integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (full width)
- height
- integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (~10 lines)
- lineNumbers
- boolean: true to display line numbers
- theme
- string: name of theme (which must be loaded via css)
- readOnly
- boolean: true if editing should be disabled
- mode
- string: language for highlighting (which must be loaded via js)
- initialCode
- string: initial code to place in editor
Example:
{{#widget:CodeExplorer
|userName=john-williams
|pageName=Boolean algebra
|codeExplorerGroupID=WTRS-8527
|uniqueID=10
|width=null
|height=null
|lineNumbers=true
|theme=vibrant-ink
|readOnly=false
|mode=swift
|initialCode=func sayHello() {
print("Hello, World!")
}
}}
