code UI Component

Ben Tiedt — Fri, 15 Jan 2021 21:44:57 GMT

Current Revision posted to API Documentation by Ben Tiedt on 01/15/2021 21:44:57

jQuery.telligent.evolution.ui.components.code

[[ui JavaScript API Module|UI Component]] which enables a body of text to be rendered and optionally editable with syntax highlighting supporting a variety of programming languages using [[evolutionCodeEditor jQuery Plugin|evolutionCodeEditor]]. The default implementation uses the [[evolutionCodeEditor jQuery Plugin|evolutionCodeEditor plugin]]. [[ui JavaScript API Module|Overrides can be provided]] at the theme level. When the element is a textarea, it is automatically made editable, and throttled change events are raised on the textarea element, after which its value contains updated content from the syntax highlighter.

Options

Data made available to instances of the component:

mode: Syntax highlighting mode. Options include actionscript, applescript, batchfile, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, dockerfile, erlang, golang, html, java, javascript, json, jsp, latex, less, lisp, lua, makefile, markdown, nix, objectivec, ocaml, pascal, perl, pgsql, php, powershell, praat, python, rhtml, ruby, rust, sass, scala, sql, sqlserver, text, typescript, velocity, xml, xquery, yaml
- default: text
theme: Highlighting theme. Options include light and dark
- default: light
minlines: When provided, the editor will have a minimum line height
- default: null
maxlines: When provided, the editor will have a maximum line height. This also triggers auto-resizing, up to maxLines. Scrolling is used beyond maxLines.
- default: null
readonly: Whether or not the text is made editable.
- default: false when the container is a textarea, true when it is not (pre or div)
gutter: Whether or not to show line numbers and other left-aligned elements
- default: true
wordwrap: Whether or not to wrap long lines
- default: false
enablefullscreen: Whether or not to enable full screen
- default: true
sourcecomparison: When provided, uses a diff view
- default: null

Example

Non-editable example using ui-code.

<pre class="ui-code" data-maxlines="20" data-mode="javascript" data-theme="dark">
function sayHello(name) {
    alert('Hello, ' + name + '!');
}

sayHello('Alice');
</pre>

Editable example using ui-code. The `textarea` is automatically updated on changes to the editor, and `change` events are triggered on the `textarea`.

<textarea class="ui-code" data-maxlines="20" data-mode="javascript" data-theme="dark">
function sayHello(name) {
    alert('Hello, ' + name + '!');
}

sayHello('Alice');
</textarea>

Default Implementation

For reference purposes or as the basis for an override:

$.telligent.evolution.ui.components.code = {
    setup: function() { },
    add: function(elm, options) {
        var codeOptions = {};

        if(options.mode) {
            codeOptions.mode = options.mode;
        }

        if(options.theme !== undef) {
            codeOptions.theme = options.theme;
        }

        if(options.minlines !== undef) {
            codeOptions.minLines = parseInt(options.minlines, 10)
        }

        if(options.maxlines !== undef) {
            codeOptions.maxLines = parseInt(options.maxlines, 10)
        }

        if(options.readonly) {
            codeOptions.readOnly = options.readonly === 'true' ? true : false;
        }

        if(options.gutter) {
            codeOptions.gutter = options.gutter === 'true' ? true : false;
        }

        if(options.wordwrap) {
            codeOptions.wordWrap = options.wordwrap === 'true' ? true : false;
        }

        if(options.sourcecomparison) {
            codeOptions.sourceComparison = sourceComparison;
        }

        $(elm).evolutionCodeEditor(codeOptions);
    }
};

code UI Component

code UI Component

jQuery.telligent.evolution.ui.components.code

Options

See also

Example

Non-editable example using ui-code.

Editable example using ui-code. The textarea is automatically updated on changes to the editor, and change events are triggered on the textarea.

Default Implementation

Editable example using ui-code. The `textarea` is automatically updated on changes to the editor, and `change` events are triggered on the `textarea`.