yasgui

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Docs | YASGUI</title> <link rel="icon" type="image/png" href="imgs/favicon.png"> <link href="doc.min.css" rel="stylesheet" type="text/css" /> <style> </style> </head> <body data-spy="scroll" data-target="#sidebarmenu"> <a href="https://github.com/YASGUI/YASGUI" target="_blank"><img style="z-index: 11111; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a> <div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <a class="navbar-brand" href="/">YASGUI</a> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="../">About</a></li> <li class="active"><a href="#">Documentation</a></li> <li><a target="_blank" href="http://laurensrietveld.nl">About me</a></li> </ul> </div> </div> </div> <div class="container" role="main"> <div class="row"> <div class="col-md-9"> <h1>Documentation</h1> YASGUI is a continuation of the <a href="http://legacy.yasgui.org" target="_blank">original</a> YASGUI library. It uses the JavaScript libraries <a href="http://yasqe.yasgui.org" target="_blank">YASQE</a> (a SPARQL Query Editor) and <a href="http://yasr.yasgui.org" target="_blank">YASR</a> (a SPARQL Resultset Visualizer). Below we desribe the functionality that the YASGUI library offers in addition to these other libraries. <div class="alert alert-info" role="alert">This page describes the <i>client</i> YASGUI library, and works perfectly fine by just including CSS and JS files in the browser. For more information about the YASGUI <i>server</i> and the extra functionality it brings, see the <a href="http://github.com/YASGUI/Server" target="_blank">GitHub YASGUI Server page</a>.</div> <h2 id="gettingStarted">Getting Started</h2> <p>Initialize YASGUI via its constructor, which return an instance we refer to as <code>yasgui</code> (lowercase). The constructor take as argument a config object. See the <a href="#config">configuration section</a> for more information on this object.</p> <div class="doc"> <code>YASGUI(parent: DOM-Element, settings: Object) → YASGUI instance: yasgui</code> <p>Main YASGUI constructor. Pass a DOM element as argument to append the editor to, and (optionally) pass along config settings</p> </div> <h3 id="gists">Examples</h3> <div id="gistContainer"> </div> <h2 id="api">API</h2> <h3 id="yasguiApi">YASGUI API</h3> API methods accessible via the <code>yasgui</code> instance <div class="doc"> <code>yasgui.store()</code> <p>Store the current yasgui settings in local storage</p> </div> <div class="doc"> <code>yasgui.history: array (default: [])</code> <p>The list of items in query history</p> </div> <div class="doc"> <code>yasgui.addTab(tabId:string (optional)) → addedTab: tab</code> <p>Add a new tab</p> </div> <div class="doc"> <code>current() -> tab</code> <p>Return the tab currently selected</p> </div> <div class="doc"> <code>yasgui.selectTab(tabId:string) → selectedTab: tab</code> <p>Select tab with tabId</p> </div> <div class="doc"> <code>yasgui.closeTab(tabId:string) → currentSelected: tab</code> <p>Close tab with tabId</p> </div> <h3 id="tabApi">Tab API</h3> The tab API exposes several values, the most important ones being the YASQE and YASR instances. <div class="doc"> <code>tab.yasqe</code> <p>Access to the YASQE api. For more information, see the <a href="http://yasqe.yasgui.org/doc" target="_blank">YASQE documentation</a></p> </div> <div class="doc"> <code>tab.yasr</code> <p>Access to the YASR api. For more information, see the <a href="http://yasr.yasgui.org/doc" target="_blank">YASR documentation</a></p> </div> <div class="doc"> <code>tab.setQuery: function(newQuery:string)</code> <p>A utility function to set the query manually. This can be used as such: <code>yasgui.current().setQuery('new query')</code></p> </div> <h2 id="events">Events</h2> YASGUI emits several events. For information on the possibilities of our event handler, see the <a href="https://nodejs.org/api/events.html" target="_blank">EventEmitter implementation documentation</a> of NodeJS <div class="doc"> <code>query (instance: yasgui, tab: tab)</code> <p>Fires when a query is executed</p> </div> <div class="doc"> <code>queryFinished (instance: yasgui, tab: tab)</code> <p>Fires when a query is finished</p> </div> <h2 id="config">Configuration</h2>     <h3 id="clientConfig">Client</h3> <p>This configuration object is accessible/changeable via <code>YASGUI.defaults</code> and <code>yasgui.options</code>, and you can pass these along when initializing YASGUI as well. To change settings to the <a href="http://yasqe.yasgui.org/doc" target="_blank">YASQE</a> and <a href="http://yasr.yasgui.org/doc" target="_blank">YASR</a> components used by YASGUI, you are best off changing the <code>YASGUI.YASQE.defaults</code> and <code>YASGUI.YASR.defaults</code> objects before initializing YASGUI</p> <div class="doc"> <code>persistencyPrefix: function → string</code> <p>YASGUI stores several options in HTML5 local storage, for persistency between browser sessions. To keep the local storage keys unique, set this prefix. By default the prefix is defined using the ID of the nearest parent (containing an ID, that is). To disable persistency alltogether, set this value to false.</p> </div> <div class="doc"> <code>allowYasqeResize: boolean (default: true)</code> <p>Allow resizing of the YASQE editor</p> </div> <div class="doc"> <code>endpoint: string (default: null)</code> <p>If unset, a new tab will take the endpoint selected in the last tab. If set, a new tab will always use this specific endpoint</p> </div> <div class="doc"> <code>catalogueEndpoints: array|function(instance:yasgui, callback)</code> <p>The endpoints used as suggestions in the endpoint autocompletion field. This value is either an array of objects (in the form <code>{endpoint: 'http://endpoint', title: 'some short title. optional.'}</code>), or a function that returns this array via a callback function. By default, it uses a static list crawled from the SPARQLES website (that at the time of writing did not publish their endpoints via API). </p> </div> <div class="doc"> <code>api: object</code> <p>YASGUI works completely client-side. To increase the functionality you can choose to run the YASGUI server as well. These settings specify the URLs of the backend YASGUI API. Setting these values to null, will disable their functionality. </div> <div class="doc" style="margin-left: 30px"> <code>corsProxy: string (default: null)</code> <p>The URL of the proxy, used to access <a href="http://enable-cors.org/" target="_blank">CORS disabled</a> endpoints</p> </div> <div class="doc" style="margin-left: 30px"> <code>collections: string (default: null)</code> <p>The URL of the collections API, used to manage query collections</p> </div> <div class="doc" style="margin-left: 30px"> <code>urlShortener: string (default: null)</code> <p>The URL via which to shorten URLs</p> </div> <div class="doc"> <code>tracker: object</code> <p>Object to which enables logging functionality. It currently supports <a href="http://www.google.com/analytics/" target="_blank">Google Analytics</a> as logging API.</p> </div> <div class="doc" style="margin-left: 30px"> <code>googleAnalyticsId: string (default: null)</code> <p>The Google Analytics ID. Set to <code>null</code> to disable logging</p> </div> <div class="doc" style="margin-left: 30px"> <code>askConsent: boolean (default: true)</code> <p>If tracking is enabled, present the user with a popup asking for consent. Options are: enable tracking, enable only for visits and disable tracking of queries/endpoints, and disable tracking altogether.</p> </div> <h3 id="serverConfig">Server</h3> To change the server configuration change the <code>./server/config.js</code> file. <br> <small>You'll also be able to change the client configuration via this file, by modifying values in the <code>client</code> object</small> <div class="doc"> <code>port: int (default: 4545)</code> <p>The port on which to run the API</p> </div> <div class="doc"> <code>db: object</code> <p>Database connection information. Used at the moment for storing the shortened URLs</p> </div> <div class="doc" style="margin-left: 30px"> <code>db.engine: string (default: tingodb)</code> <p>The database to use. Either the file-based tingodb, or your own deployment of mongodb (our code uses a single interface, enabling you to simply switch between both). Possible values: <code>tingodb</code> or <code>mongodb</code></p> </div> <div class="doc" style="margin-left: 30px"> <code>db.mongo: object</code> <p>The MongoDb configuration object</p> </div> <div class="doc" style="margin-left: 60px"> <code>db.mongodb.host: string (default: 127.0.0.1)</code> <p>Host of mongodb</p> </div> <div class="doc" style="margin-left: 60px"> <code>db.mongodb.port: int (default: 27017)</code> <p>Mongodb port</p> </div> <div class="doc" style="margin-left: 60px"> <code>db.mongodb.db: string (default: 'data')</code> <p>Default mongo database</p> </div> <div class="doc" style="margin-left: 60px"> <code>db.mongodb.opts: object</code> <p>Additional MongoDb options</p> </div> <div class="doc" style="margin-left: 90px"> <code>db.mongodb.opts.auto_reconnect: boolean (default: true)</code> <p>Auto-reconnect when connection is lost</p> </div> <div class="doc" style="margin-left: 90px"> <code>db.mongodb.opts.safe: boolean (default: true)</code> <p>Enabling this flag means the mongo driver returns information of the success/error of an insert/update/remove</p> </div> <div class="doc" style="margin-left: 30px"> <code>db.tingodb: object</code> <p>The TingoDb configuration object</p> </div> <div class="doc" style="margin-left: 60px"> <code>db.tingodb.path: string (default: './tingodb')</code> <p>Path of TingoDB database</p> </div> </div> <div class="col-md-3" id="sidebarmenu"> <div class="bs-docs-sidebar hidden-xs hidden-sm" data-spy="affix" data-offset-top="60"> <ul class="nav bs-docs-sidenav"> <li><a href="#gettingStarted">Getting Started</a> <ul id="gistsUl" class="nav"> <li><a href="#gists">Examples</a> </ul> </li> <li><a href="#api">API</a> <ul class="nav"> <li><a href="#yasguiApi">YASGUI API</a> <li><a href="#tabApi">Tab API</a> </ul> </li> <li><a href="#events">Events</a></li> <li><a href="#config">Configuration</a> <ul class="nav"> <li><a href="#clientConfig">Client</a> <li><a href="#serverConfig">Server</a> </ul> </li> </ul> </div> </div> </div> </div> <script src="doc.min.js"></script> </body> </html>