Documentation
YASHE extends the CodeMirror Library. For a complete overview of the functionality they offer (such as event hooks), check out the CodeMirror Documentation. Below we elaborate on the functionality YASHE offers (in addition to the CodeMiror API).Note: Where CodeMirror provides
CodeMirror
in the global namespace, we provide YASHE
.
Getting Started
Initialize YASHE via its constructor, or via the command fromTextArea
. Both return in instance of YASHE, from now on referred to as yashe
(lowercase). Both function take as argument a config object. See the section on defaults for more information on this config object.
YASHE(parent: DOM-Element, settings: Object) → YASHE instance: yashe
Main YASHE constructor. Pass a DOM element as argument to append the editor to, and (optionally) pass along config settings (see the YASHE.defaults object below, as well as the regular CodeMirror documentation, for more information on configurability)
YASHE.fromTextArea(textArea: DOM element, config: Object) → YASHE instance: yashe
Initialize YASHE from an existing text area (see CodeMirror for more info)
Examples
API
API methods accessible via theyashe
instance
yashe.setValue(query: String)
Set query value in editor (see also)
yashe.getValue() → query: String
Get query value from editor (see also)
yashe.query(function|object)
Execute query. Pass a callback function, or a configuration object (see the sparql settings in the configuration object for possible values) I.e., you can change the query configuration by either changing the default settings, changing the settings of this document, or by passing query settings to this function
yashe.getQueryMode() → string:
Fetch the query mode: 'query' or 'update'
yashe.getQueryType() → string:
Fetch the query type (e.g. SELECT, ASK, DESCRIBE, CONSTRUCT etc)
yashe.getPrefixesFromQuery() → object:
Fetch defined prefixes from query string
yashe.addPrefixes(prefixes: object)
Add prefixes to the query. The prefixes are defined as {"rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#"}
yashe.removePrefixes(prefixes: object)
Remove prefixes from query. The prefixes are defined as {"rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#"}
yashe.setSize(width: Number|string, height: Number|string)
Set size. Use null value to leave width or height unchanged. To resize the editor to fit its content, see http://codemirror.net/demo/resize.html
yashe.enableCompleter(completerName: String)
Enable an autocompleter with this name. Only makes sense if you've programatically disabled this completer before, as a plugin is automatically enabled when registering it (see this function)
yashe.disableCompleter(completerName: String)
Disable an autocompleter with this name.
yashe.storeBulkCompletions(type: String)
Store bulk completions in memory as trie, and in localstorage as well (if enabled). The argument should be a key from the autocompletion settings
yashe.setBackdrop(show: boolean)
Hide or show gray backdrop
yashe.collapsePrefixes(collapse: boolean)
Collapsing prefixes if there are any. Use false to expand them.
Statics
Static functions YASHEYASHE.registerAutocompleter(name: String, autocompleter: function)
Register an autocompleter in YASHE. This automatically enables the completer as well
YASHE.consumeShareLink(doc: yashe, urlArgs: object)
Consume the share link, by parsing the document URL for possible yashe arguments, and setting the appropriate values in the YASHE doc
YASHE.createShareLink(doc: yashe) → object:
Create a share link
YASHE.determineId(doc: yashe)
Determine unique ID of the YASHE object. Useful when several objects are loaded on the same page, and all have 'persistency' enabled. Currently, the ID is determined by selecting the nearest parent in the DOM with an ID set
YASHE.fetchFromLov(doc: yashe, partialToken: Object, type: "properties" | "classes", callback: Function)
Fetch property and class autocompletions the Linked Open Vocabulary services. Issues an async autocompletion call
YASHE.fetchFromPrefixCc(doc: yashe)
Fetch prefixes from prefix.cc, and store in the YASHE object
YASHE.getAcceptHeader(doc: yashe)
Get accept header for this particular query. Get JSON for regular queries, and text/plain for update queries
YASHE.getAllVariableNames(doc: yashe, token: Object) → variableNames: Array
Fetch all the used variables names from this query
YASHE.getCompleteToken(doc: yashe, token: Object, cursor: Object) → token: Object
When typing a query, this query is sometimes syntactically invalid, causing the current tokens to be incorrect This causes problem for autocompletion. http://bla might result in two tokens: http:// and bla. We'll want to combine these
YASHE.hideCompletionNotification(doc: yashe, autocompletionType: String)
Hide completion notification
YASHE.showCompletionNotification(doc: yashe, autocompletionType: String)
Show notification
Configuration
This configuration object is accessible/changeable viaYASHE.defaults
and yashe.options
, and you can pass these along when initializing YASHE as well.
Other than the configuration we describe here, check the CodeMirror documentation for even more options you can set, such as disabling line numbers, or changing keyboard shortcut keys.
Defaults
value: String (default: "SELECT * WHERE {\n ?sub ?pred ?obj .\n} \nLIMIT 10")
Query string
autocompleters: array (default: ["prefixes", "properties", "classes", "variables"])
The list of enabled autocompletion plugins (See this section on how to write your own)
syntaxErrorCheck: boolean (default: true)
Whether to validate the SPARQL syntax
collapsePrefixesOnLoad: boolean (default: false)
Collapse prefixes on page load
backdrop: boolean|integer (default: false)
Enable a gray backdrop on the YASHE instance when a query is being executed. Setting the value to an integer will influence the 'hide' and 'show' animation of the backdrop (set to zero to disable animation)
extraKeys: object
Extra shortcut keys. Check the CodeMirror manual on how to add your own
Note: To avoid colissions with other browser shortcuts, these shortcuts only work when the YASHE editor is selected (has 'focus').
The list of shortcuts provided by YASHE:
[Ctrl|Cmd]-Space
: Trigger Autocompletion[Ctrl|Cmd]-D
and[Ctrl|Cmd]-D
: Delete current/selected line(s)[Ctrl|Cmd]-/
: Comment or uncomment current/selected line(s)[Ctrl|Cmd]-Alt-Down
: Copy line down[Ctrl|Cmd]-Alt-Up
: Copy line up[Ctrl|Cmd]-Shift-F
: Auto-format/indent selected lines[Ctrl|Cmd]-]
: Indent current/selected line(s) more[Ctrl|Cmd]-[
: Indent current/selected line(s) less[Ctrl|Cmd]-S
: Save current query in local storage[Ctrl|Cmd]-Enter
: Execute QueryF11
: Set query editor full-screen (or leave full-screen)Esc
: Leave full-screen
createShareLink: function (default: YASHE.createShareLink)
Show a button with which users can create a link to this query. Set this value to null to disable this functionality. By default, this feature is enabled, and only the query value is appended to the link. This function should return an object which is parseable by jQuery.param
createShortLink: function(string:url, function:callback) (default: null)
Allow users to create a short-link, for the URL generated in the previous function. The callback takes as argument a possible error string, and the shortened URL
consumeShareLink: function (default: YASHE.consumeShareLink)
The callback for consuming the arguments of the current URL
persistent: function|string
Change persistency settings for the YASHE query value. Setting the values
to null, will disable persistancy: nothing is stored between browser
sessions. Setting the values to a string (or a function which returns a
string), will store the query in localstorage using the specified string.
By default, the ID is dynamically generated using the YASHE.determineId
function, to avoid collissions when using multiple YASHE instances on one
page
sparql: object
Settings for querying sparql endpoints
showQueryButton: boolean (default: false)
Show a query button. You don't like it? Then disable this setting, and create your button which calls the query() function of the yashe document
endpoint: String|function (default: "http://dbpedia.org/sparql")
Endpoint to query
requestMethod: String|function (default: "POST")
Request method via which to access the SPARQL endpoint
acceptHeaderSelect: String|function (default: "application/sparql-results+json,*/*;q=0.9")
Accept header for regular SELECT
queries
acceptHeaderGraph: String|function (default: "text/turtle,*/*;q=0.9")
Accept header for queries returning a graph (e.g. CONSTRUCT
)
acceptHeaderUpdate: String|function (default: "text/plain,*/*;q=0.9")
Accept header for update queries
namedGraphs: array (default: [])
Named graphs to query.
defaultGraphs: array (default: [])
Default graphs to query.
args: array (default: [])
Additional request arguments. Add them in the form: {name: "name", value: "value"}
headers: array (default: {})
Additional request headers
getQueryForAjax: function(doc: yashe) → string (default: null)
Modify the query before it is send via ajax request.
queryName: string | function(doc: yashe) → string
A SPARQL query string is usually send with ?query=
is the payload for SELECT
queries, and ?update=
for update queries. By default, YASHE changes this behaviour dynamically depending on the query type.
This setting enables you to change this behaviour, by e.g. always sending queries with a ?query=
in the payload, even for update queries.
callbacks: object
Set of ajax callbacks
beforeSend: function (default: null)
See jQuery.ajax for more information
complete: function (default: null)
See jQuery.ajax for more information
error: function (default: null)
See jQuery.ajax for more information
success: function (default: null)
See jQuery.ajax for more information
Writing an Autocompletion Plugin
To register an autocompletion, one needs to execute theYASHE.registerAutocompleter
function.
Below, we describe the autocompletion function in more detail, and the object it should return.
constructor(doc: yashe) → configurationObject: Object
Autocompleter constructor, which should return the object described below
get: function|array
Required
Get the autocompletions. Either a function which returns an array, or an actual array. The array should be in the form ["<completionsString1>", "<completionsString2>"].
If used as a function, the parameters it receives are
token: object
If 'bulk' loading is disabled, use this token to return the appropriate list of suggestions forcallback: function
If 'async' is enabled, return the suggestions by passing it on to this callback
isValidCompletionPosition: function() → boolean
Required
Check whether the cursor is in a proper position for this autocompletion.
preProcessToken: function(token: object|string) → token: object
Optional
Preprocesses the codemirror token before matching it with the autocompletions list. Use this for e.g. autocompleting prefixed resources when your autocompletion list contains only full-length URIs E.g., foaf:name -> http://xmlns.com/foaf/0.1/name
postProcessToken: function(token: object|string, suggestion: string) → string
Optional
Postprocesses the autocompletion suggestion. Use this for e.g. returning a prefixed URI based on a full-length URI suggestion E.g., http://xmlns.com/foaf/0.1/name -> foaf:name
async: boolean
Required
Specifies that the get function is asynchronous
bulk: boolean
Required
Use bulk loading of completions: all completions are retrieved onLoad using the get() function. Alternatively, disable bulk loading, to call the get() function whenever a token needs autocompletion (in which case the completion token is passed on to the get() function). whenever you have an autocompletion list that is static, and that easily fits in memory, we advice you to enable bulk for performance reasons (especially because the autocompletions are stored in a trie)
autoShow: boolean
Optional
Auto-show the autocompletion dialog. Disabling this requires the user to press [ctrl|cmd]-space to summon the dialog. Note: this only works when completions are not fetched asynchronously
persistent: string|function
Optional
Automatically store autocompletions in localstorage. This is
particularly useful when the get() function is an expensive ajax
call. Autocompletions are stored for a period of a month. Set
this property to null to disable persistency. Otherwise, set a string value (or a function
returning a string val), returning the key in which to store the
data.
Note: this feature only works when completions are
loaded in memory (i.e. bulk
: true)
validPosition: function
Optional
Fires when a codemirror change occurs in a position where we can show this particular type of autocompletion
invalidPosition: function
Optional
Fires when a codemirror change occurs in a position where we can not show this particular type of autocompletion
Configuring Autocompletion Plugins
To modify how autocompletion plugins work, you can simply overwrite the settings and/or function that are explained in the section above. To e.g. modify theautoShow
setting for the prefix autocompleter, set `YASHE.Autocompleters.prefixes.autoShow = false` before you initialize YASHE.
Some plugins may come with extra configuration options such as the prefix autocompleter, that allows you to change the url from where the prefix json is fetched:
YASHE.Autocompleters.prefixes.fetchFrom: string (default: //prefix.cc/popular/all.file.json)
Where to fetch the prefix json from. Change this when you'd like to host the json yourself. This might be useful when you run YASHE on an `https` site, considering that prefix.cc currently does not support `https`