.. _gateone-javascript: gateone.js ========== Gate One's JavaScript (`source `_) is made up of several modules (aka plugins), each pertaining to a specific type of activity. These modules are laid out like so: * `GateOne.Base`_ * `GateOne`_ * `GateOne.Utils`_ * `GateOne.Net`_ * `GateOne.Input`_ * `GateOne.Visual`_ * `GateOne.Terminal`_ * `GateOne.User`_ The properties and functions of each respective module are outlined below. GateOne.Base ------------ .. js:attribute:: GateOne.Base .. note:: Why is GateOne.Base before GateOne? Two reasons: 1) Because that's how it is laid out in the code. 2) The module-loading functions are all inside GateOne.Base. The Base module is mostly copied from `MochiKit `_ and consists of the following: .. js:function:: GateOne.Base.module(parent, name, version, deps) Creates a new *name* module in a *parent* namespace. This function will create a new empty module object with *NAME*, *VERSION*, *toString* and *__repr__* properties. It will also verify that all the strings in deps are defined in parent, or an error will be thrown. :param object parent: The parent module or namespace (object). :param name: A string representing the new module name. :param version: The version string for this module (e.g. "1.0"). :param deps: An array of module dependencies, as strings. The following example would create a new object named, "Net", attach it to the :js:data:`GateOne` object, at version "0.9", with :js:attr:`GateOne.Base` and :js:attr:`GateOne.Utils` as dependencies: .. code-block:: javascript > GateOne.Base.module(GateOne, 'Net', '1.0', ['Base', 'Utils']); > GateOne.Net.__repr__(); "[GateOne.Net 1.0]" > GateOne.Net.NAME; "GateOne.Net" .. js:function:: GateOne.Base.update(self, obj[, obj2,...]) Mutate self by replacing its key:value pairs with those from other object(s). Key:value pairs from later objects will overwrite those from earlier objects. If *self* is null, a new Object instance will be created and returned. .. warning:: This mutates *and* returns *self*. :param object self: The object you wish to mutate with *obj*. :param obj: Any given JavaScript object (e.g. {}). :returns: *self* The following example would mutate GateOne.Net with a new function, "someFunc()". .. code-block:: javascript > GateOne.Base.update(GateOne.Net, {someFunc: function(i) { return "someFunc() was just executed with " + i + "."; }}); > GateOne.Net.someFunc('1234'); "someFunc() was just executed with 1234." .. note:: In this example, if GateOne.Net.someFunc() already existed, it would be overridden. :js:func:`GateOne.Base.update` can be used to combine multiple sets of objects into one single object with latter objects taking precedence. Essentially, it's a way to emulate Python-style class mixins with JavaScript objects. GateOne ------- .. js:data:: GateOne GateOne is the base object for all of GateOne's client-side JavaScript. Besides the aforementioned modules (:js:attr:`~GateOne.Utils`, :js:attr:`~GateOne.Net`, :js:attr:`~GateOne.Input`, :js:attr:`~GateOne.Visual`, :js:attr:`~GateOne.Terminal`, and :js:attr:`~GateOne.User`), it contains the following properties, objects, and methods: .. _gateone-properties: Properties ^^^^^^^^^^ .. container:: collapseindex .. hlist:: * :js:attr:`GateOne.initialized` * :js:attr:`GateOne.prefs` * :js:attr:`GateOne.prefs.url` * :js:attr:`GateOne.prefs.fillContainer` * :js:attr:`GateOne.prefs.style` * :js:attr:`GateOne.prefs.goDiv` * :js:attr:`GateOne.prefs.scrollback` * :js:attr:`GateOne.prefs.rows` * :js:attr:`GateOne.prefs.cols` * :js:attr:`GateOne.prefs.prefix` * :js:attr:`GateOne.prefs.theme` * :js:attr:`GateOne.prefs.colors` * :js:attr:`GateOne.prefs.fontSize` * :js:attr:`GateOne.prefs.autoConnectURL` * :js:attr:`GateOne.prefs.embedded` * :js:attr:`GateOne.prefs.skipChecks` * :js:attr:`GateOne.prefs.showTitle` * :js:attr:`GateOne.prefs.showToolbar` * :js:attr:`GateOne.prefs.audibleBell` * :js:attr:`GateOne.prefs.bellSound` * :js:attr:`GateOne.prefs.bellSoundType` * :js:attr:`GateOne.prefs.disableTermTransitions` * :js:attr:`GateOne.prefs.colAdjust` * :js:attr:`GateOne.prefs.rowAdjust` * :js:attr:`GateOne.prefs.webWorker` * :js:attr:`GateOne.prefs.auth` * :js:attr:`GateOne.noSavePrefs` * :js:attr:`GateOne.savePrefsCallbacks` * :js:attr:`GateOne.terminals` * :js:attr:`GateOne.terminals[num].backspace` * :js:attr:`GateOne.terminals[num].columns` * :js:attr:`GateOne.terminals[num].created` * :js:attr:`GateOne.terminals[num].mode` * :js:attr:`GateOne.terminals[num].playbackFrames` * :js:attr:`GateOne.terminals[num].prevScreen` * :js:attr:`GateOne.terminals[num].rows` * :js:attr:`GateOne.terminals[num].screen` * :js:attr:`GateOne.terminals[num].scrollback` * :js:attr:`GateOne.terminals[num].scrollbackVisible` * :js:attr:`GateOne.terminals[num].sshConnectString` * :js:attr:`GateOne.terminals[num].title` * :js:attr:`GateOne.Icons` * :js:attr:`GateOne.loadedModules` * :js:attr:`GateOne.ws` .. note:: These are ordered by importance/usefulness. prefs """"" .. js:attribute:: GateOne.initialized :type: Boolean This gets set to ``true`` after :js:func:`GateOne.initialize` has completed all of its tasks. .. js:attribute:: GateOne.prefs :type: Object This is where all of Gate One's client-side preferences are kept. If the client changes them they will be saved in ``localStorage['prefs']``. Also, these settings can be passed to :js:func:`GateOne.init` as an object in the first argument like so: .. code-block:: javascript GateOne.init({fillContainer: false, style: {'width': '50em', 'height': '32em'}, theme: 'white'}); Each individual setting is outlined below: .. js:attribute:: GateOne.prefs.url :type: String .. code-block:: javascript GateOne.prefs.url = window.location.href; URL of the Gate One server. Gate One will open a `WebSocket `_ to this URL, converting 'http://' and 'https://' to 'ws://' and 'wss://'. .. js:attribute:: GateOne.prefs.fillContainer :type: Boolean .. code-block:: javascript GateOne.prefs.fillContainer = true; If set to true, :js:attr:`GateOne.prefs.goDiv` (e.g. ``#gateone``) will fill itself out to the full size of its parent element. .. js:attribute:: GateOne.prefs.style :type: Object .. code-block:: javascript GateOne.prefs.style = {}; An object that will be used to apply styles to :js:attr:`GateOne.prefs.goDiv` element (``#gateone`` by default). Example: .. code-block:: javascript GateOne.prefs.style = {'padding': '1em', 'margin': '0.5em'}; .. note:: ``width`` and ``height`` will be ignored if :js:attr:`GateOne.prefs.fillContainer` is true. .. js:attribute:: GateOne.prefs.goDiv :type: String .. code-block:: javascript GateOne.prefs.goDiv = '#gateone'; The element to place Gate One inside of. It can be any block element (or element set with ``display: block`` or ``display: inline-block``) on the page embedding Gate One. .. note:: To keep things simple it is recommended that a ``
`` be used (hence the name). .. js:attribute:: GateOne.prefs.scrollback :type: Integer .. code-block:: javascript GateOne.prefs.scrollback = 500; The default number of lines of scrollback that clients will be instructed to use. The higher the number the longer it will take for the browser to re-enable the scrollback buffer after the 3.5-second screen update timeout is reached. 500 lines should only take a few milliseconds even on a slow computer (very high resolutions notwithstanding). .. note:: Clients will still be able to change this value in the preferences panel even if you pass it to :js:func:`GateOne.init`. .. js:attribute:: GateOne.prefs.rows :type: Integer .. code-block:: javascript GateOne.prefs.rows = null; This will force the number of rows in the terminal. If null, Gate One will automatically figure out how many will fit within :js:attr:`GateOne.prefs.goDiv`. .. js:attribute:: GateOne.prefs.cols :type: Integer .. code-block:: javascript GateOne.prefs.cols = null; This will force the number of columns in the terminal. If null, Gate One will automatically figure out how many will fit within :js:attr:`GateOne.prefs.goDiv`. .. js:attribute:: GateOne.prefs.prefix :type: String .. code-block:: javascript GateOne.prefs.prefix = 'go_'; Instructs Gate One to prefix the 'id' of all elements it creates with this string (except :js:attr:`GateOne.prefs.goDiv` itself). You usually won't want to change this unless you're embedding Gate One into a page where a name conflict exists (e.g. you already have an element named ``#go_notice``). The Gate One server will be made aware of this setting when the client connects so it can apply it to all generated templates where necessary. .. js:attribute:: GateOne.prefs.theme :type: String .. code-block:: javascript GateOne.prefs.theme = 'black'; This sets the default CSS theme. Clients will still be able to change it in the preferences if they wish. .. js:attribute:: GateOne.prefs.colors :type: String .. code-block:: javascript GateOne.prefs.colors = 'default'; // 'gnome-terminal' is another text color scheme that comes with Gate One. This sets the CSS text color scheme. These are the colors that text *renditions* will use (i.e. when the terminal text is bold, red, etc). .. js:attribute:: GateOne.prefs.fontSize :type: String .. code-block:: javascript GateOne.prefs.fontSize = '100%'; // Alternatives: '1em', '12pt', '15px', etc. This sets the base font size for everything in :js:attr:`GateOne.prefs.goDiv` (e.g. #gateone). .. tip:: If you're embedding Gate One into something else this can be really useful for matching up Gate One's font size with the rest of your app. .. js:attribute:: GateOne.prefs.autoConnectURL :type: String .. code-block:: javascript GateOne.prefs.autoConnectURL = null; If the SSH plugin is installed, this setting can be used to ensure that whenever a client connects it will automatically connect to the given SSH URL. Here's an example where Gate One would auto-connect as a guest user to localhost (hypothetical terminal program demo): .. code-block:: javascript GateOne.prefs.autoConnectURL = 'ssh://guest:guest@localhost:22'; .. warning:: If you provide a password in the ssh:// URL clients will be able to see it. .. _embedded-mode: .. js:attribute:: GateOne.prefs.embedded :type: Boolean .. code-block:: javascript GateOne.prefs.embedded = false; This option tells Gate One (at the client) to run in embedded mode. In embedded mode there will be no toolbar, no side information panel, and new terminals will not be opened automatically. In essence, it just connects to the Gate One server, downloads additional JavaScript/CSS (plugins/themes), and calls each plugin's init() and postInit() functions (which may also behave differently in embedded mode). The point is to provide developers with the flexibility to control every aspect of Gate One's look and feel. In GateOne's 'tests' directory there is a walkthrough/tutorial of embedded mode called "hello_embedded". To run it simply execute ./hello_embedded.py and connect to https://localhost/ in your browser. .. note:: Why is the hello_embedded tutorial separate from this documentation? It needs to be run on a different address/port than the Gate One server itself in order to properly demonstrate how Gate One would be embedded "in the wild." Also note that the documentation you're reading is meant to be viewable offline (e.g. file:///path/to/the/docs in your browser) but web browsers don't allow `WebSocket `_ connections from documents loaded via file:// URLs. .. js:attribute:: GateOne.prefs.skipChecks :type: Boolean .. code-block:: javascript GateOne.prefs.skipChecks = false; If this is set to ``true`` Gate One will skip performing browser capabilities checks/alerts when :js:func:`GateOne.init` is called. .. js:attribute:: GateOne.prefs.showTitle :type: Boolean .. code-block:: javascript GateOne.prefs.showTitle = true; If this is set to ``false`` Gate One will not show the terminal title in the sidebar. .. js:attribute:: GateOne.prefs.showToolbar :type: Boolean .. code-block:: javascript GateOne.prefs.showToolbar = true; If this is set to ``false`` Gate One will not show the toolbar (no icons on the right). .. js:attribute:: GateOne.prefs.audibleBell :type: Boolean .. code-block:: javascript GateOne.prefs.audibleBell = true; If this is set to ``false`` Gate One will not play a sound when a bell is encountered in any given terminal. .. note:: A visual bell indiciator will still be displayed even if this is set to ``false``. .. js:attribute:: GateOne.prefs.bellSound :type: String .. code-block:: javascript GateOne.prefs.bellSound = "data:audio/ogg;base64,T2dnUwACAAAAAAAAA..."; Stores the user's chosen (or the default) bell sound as a data URI. .. note:: This is much more efficient than having to download this file from the server every time Gate One is loaded! .. js:attribute:: GateOne.prefs.bellSoundType :type: String .. code-block:: javascript GateOne.prefs.bellSound = "audio/ogg"; Stores the mimetype associated with :js:attr:`GateOne.prefs.bellSound`. .. js:attribute:: GateOne.prefs.disableTermTransitions :type: Boolean .. code-block:: javascript GateOne.prefs.disableTermTransitions = false; With this enabled Gate One won't use fancy CSS3 transitions when switching between open terminals. Such switching will be instantaneous (i.e. not smooth/pretty). .. js:attribute:: GateOne.prefs.colAdjust :type: Integer .. code-block:: javascript GateOne.prefs.colAdjust = 0; When the terminal size is calculated the number of columns will be decreased by this amount (e.g. to make room for an extra toolbar). .. js:attribute:: GateOne.prefs.rowAdjust :type: Integer .. code-block:: javascript GateOne.prefs.rowAdjust = 0; When the terminal size is calculated the number of rows will be decreased by this amount (e.g. to make room for the playback controls). .. js:attribute:: GateOne.prefs.webWorker :type: String .. code-block:: javascript GateOne.prefs.webWorker = "https://gateone.company.com/static/go_process.js"; This is the fallback path to Gate One's `Web Worker `_. You should only ever have to change this when embedding Gate One into another application *and* your Gate One server is listening on a different port than your app's web server. Otherwise Gate One will just use the `Web Worker `_ located at :js:attr:`GateOne.prefs.url`/static/go_process.js. .. js:attribute:: GateOne.prefs.auth :type: Object .. code-block:: javascript GateOne.prefs.auth = { // This is just an example--not a default 'api_key': 'MjkwYzc3MDI2MjhhNGZkNDg1MjJkODgyYjBmN2MyMTM4M', 'upn': 'joe@company.com', 'timestamp': 1323391717238, 'signature': , 'signature_method': 'HMAC-SHA1', 'api_version': '1.0' }; This is used to pre-authenticate users when Gate One is embedded into another application. It works like this: You enroll your app by creating an API key and secret via "./gateone.py --new_api_key". Then you use those generated values to sign the combined values of *upn*, *timestamp*, and *api_key* via HMAC-SHA1 using the secret that was created when you generated your API key. When Gate One sees these values it will verify them against the API keys/secrets it knows about and if everything lines up it will inherently trust the 'upn' (aka username) it has been given via this mechanism. This process allows parent applications (embedding Gate One) to authenticate a user just *once* instead of having users authenticate once for their own app and then once again for Gate One. .. note:: If your app doesn't authenticate users you can still embed Gate One using the default (anonymous) authentication method. In these instances there's no need to pass an 'auth' parameter to :js:func:`GateOne.init`. More information about API-based authentication can be found in the "Embedding Gate One" documentation. .. js:attribute:: GateOne.noSavePrefs :type: Object Properties in this object that match the names of objects in :js:attr:`GateOne.prefs` will get ignored when they are saved to localStorage. .. note:: **Plugin Authors:** If you want to have your own property in :js:attr:`GateOne.prefs` but it isn't a per-user setting, add your property here (e.g. ``GateOne.prefs['myPref'] = 'foo'; GateOne.noSavePrefs['myPref'] = null;``). Here's what this object contains by default: .. code-block:: javascript GateOne.noSavePrefs = { url: null, // These are all things that shouldn't be modified by the user. webWorker: null, fillContainer: null, style: null, goDiv: null, prefix: null, autoConnectURL: null, embedded: null, auth: null, showTitle: null, showToolbar: null, rowAdjust: null, colAdjust: null } .. js:attribute:: GateOne.savePrefsCallbacks :type: Array Functions placed in this array will be called immediately after :js:func:`GateOne.Utils.savePrefs` is called. This gives plugins the ability to save their own preferences (in their own way) when the user clicks the "Save" button in the preferences panel. .. js:attribute:: GateOne.terminals :type: Object Terminal-specific settings and information are stored within this object like so: .. code-block:: javascript GateOne.terminals[1] = { X11Title = "Gate One", backspace: String.fromCharCode(127), columns: 165, created: Date(), mode: "default", node:
,
                pasteNode: