forked from GitHub/gf-core
minibar: documentation and API work
This commit is contained in:
@@ -160,11 +160,13 @@ Some implementation details:
|
||||
<a href="minibar_translations.js">minibar_translations.js</a>.
|
||||
Some common auxiliary functions have also been moved to a separate file:
|
||||
<a href="minibar_support.js">minibar_support.js</a>.
|
||||
<li>[Added 2011-08-09] Added some <a href="minibar-api.html">Minibar API</a>
|
||||
documentation.
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<small class=modtime>
|
||||
<!-- hhmts start --> Last modified: Mon Aug 8 19:27:14 CEST 2011 <!-- hhmts end -->
|
||||
<!-- hhmts start --> Last modified: Thu Aug 11 17:07:13 CEST 2011 <!-- hhmts end -->
|
||||
</small>
|
||||
<address>
|
||||
<a href="http://www.cs.chalmers.se/~hallgren/">TH</a>
|
||||
|
||||
@@ -29,7 +29,7 @@ div.modtime { float: right; }
|
||||
<body>
|
||||
<h1>Minibar API</h1>
|
||||
|
||||
The minibar is structured as three object:
|
||||
The Minibar web app consists of the following objects:
|
||||
|
||||
<ul>
|
||||
<li><a href="#Minibar">Minibar</a>
|
||||
@@ -42,10 +42,10 @@ They are described below.
|
||||
<h2 id=Minibar>The Minibar object</h2>
|
||||
|
||||
<p>
|
||||
This is the complete Minibar web app. It is defined in
|
||||
This object implements the complete Minibar web app. It is defined in
|
||||
<a href="minibar.js">minibar.js</a>. It also uses the <code>Input</code>
|
||||
and <code>Translations</code> objects, and some auxiliary functions defined
|
||||
in <a href="minibar_support.js">minibar_support.js</a>
|
||||
and <code>Translations</code> objects described below, and some auxiliary
|
||||
functions defined in <a href="minibar_support.js">minibar_support.js</a>
|
||||
and <a href="support.js">support.js</a>, so to use it in an
|
||||
HTML file, you would normally include at least the following:
|
||||
|
||||
@@ -116,7 +116,7 @@ HTML file, you would normally include at least the following:
|
||||
|
||||
<h3>Constructor</h3>
|
||||
|
||||
<code>var input=new Input(server,options,translations)</code>
|
||||
<code>var input=new Input(server,translations,options)</code>
|
||||
|
||||
<ul>
|
||||
<li><code>server</code> is the PGF service object
|
||||
@@ -134,17 +134,22 @@ HTML file, you would normally include at least the following:
|
||||
</table>
|
||||
|
||||
<li><code>translations</code> is the object that is notified when the input
|
||||
has changed. In the minibar, this is the object that display translations.
|
||||
has changed. In the minibar, this is the object that display translations, but
|
||||
other apps might of course use the entered text for other purposes.
|
||||
The following methods will be called:
|
||||
<ul>
|
||||
<li><code>translations.clear()</code>
|
||||
<li><code>translations.clear()</code> is called when there no entered
|
||||
text.
|
||||
<li><code>translations.translateFrom({from:<var>conc</var>,input:<var>string</code>})</code>
|
||||
is called when the user has entered some text. The <code>from</code>
|
||||
property is the name of the concrete syntax and the <code>input</code>
|
||||
property is the entered text.
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<h3>Properties and user interface</h3>
|
||||
|
||||
The <code>input</code> object created by the <code>Input</code>constructor
|
||||
The <code>input</code> object created by the <code>Input</code> constructor
|
||||
contains two field that the caller should add to the user interface:
|
||||
<ul>
|
||||
<li><code>input.main</code> is the main user interface where the current
|
||||
@@ -221,7 +226,7 @@ should add to the user interface:
|
||||
<hr>
|
||||
<div class=modtime>
|
||||
<small class=modtime>
|
||||
HTML <!-- hhmts start --> Last modified: Tue Aug 9 17:55:19 CEST 2011 <!-- hhmts end -->
|
||||
HTML <!-- hhmts start --> Last modified: Thu Aug 11 17:14:37 CEST 2011 <!-- hhmts end -->
|
||||
</small>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -18,25 +18,21 @@ show_completions(complete_output)
|
||||
|
||||
// For backward compatibility:
|
||||
function start_minibar(server,opts,target) {
|
||||
return new Minibar(server,opts,target);
|
||||
if(target) opts.target=target;
|
||||
return new Minibar(server,opts);
|
||||
}
|
||||
|
||||
/* --- Main Minibar object -------------------------------------------------- */
|
||||
function Minibar(server,opts,target) {
|
||||
function Minibar(server,opts) {
|
||||
// Contructor, typically called when the HTML document is loaded
|
||||
|
||||
/* --- Configuration ---------------------------------------------------- */
|
||||
|
||||
// default values for options:
|
||||
this.options={
|
||||
show_abstract: false,
|
||||
show_trees: false,
|
||||
show_grouped_translations: true,
|
||||
delete_button_text: "⌫",
|
||||
default_source_language: null,
|
||||
target: "minibar",
|
||||
try_google: true,
|
||||
feedback_url: null,
|
||||
random_button: true,
|
||||
help_url: null
|
||||
}
|
||||
|
||||
@@ -45,14 +41,14 @@ function Minibar(server,opts,target) {
|
||||
|
||||
/* --- Creating the components of the minibar --------------------------- */
|
||||
this.translations=new Translations(server,this.options)
|
||||
this.input=new Input(server,this.options,this.translations)
|
||||
this.input=new Input(server,this.translations,this.options)
|
||||
|
||||
/* --- Creating user interface elements --------------------------------- */
|
||||
|
||||
this.menubar=empty("div");
|
||||
this.extra=div_id("extra");
|
||||
|
||||
this.minibar=element(target || "minibar");
|
||||
this.minibar=element(this.options.target);
|
||||
this.minibar.innerHTML="";
|
||||
with(this) {
|
||||
appendChildren(menubar,[input.menus,translations.menus,input.buttons])
|
||||
|
||||
@@ -1,11 +1,21 @@
|
||||
|
||||
/* --- Input object --------------------------------------------------------- */
|
||||
|
||||
function Input(server,options,translations) {
|
||||
// Input object constructor
|
||||
this.options=options;
|
||||
function Input(server,translations,opts) { // Input object constructor
|
||||
this.server=server;
|
||||
this.translations=translations;
|
||||
|
||||
// Default values for options:
|
||||
this.options={
|
||||
delete_button_text: "⌫",
|
||||
default_source_language: null,
|
||||
random_button: true,
|
||||
}
|
||||
|
||||
// Apply supplied options
|
||||
if(opts) for(var o in opts) this.options[o]=opts[o];
|
||||
|
||||
// User interface elements
|
||||
this.main=empty("div");
|
||||
this.menus=empty("span");
|
||||
this.buttons=empty("span");
|
||||
|
||||
@@ -22,4 +22,4 @@ var minibar_options= {
|
||||
//feedback_url: "feedback.html",
|
||||
try_google: true
|
||||
}
|
||||
var minibar=new Minibar(server,minibar_options,"minibar");
|
||||
var minibar=new Minibar(server,minibar_options);
|
||||
|
||||
@@ -1,8 +1,17 @@
|
||||
/* --- Translations object -------------------------------------------------- */
|
||||
|
||||
function Translations(server,options) {
|
||||
function Translations(server,opts) {
|
||||
this.server=server;
|
||||
this.options=options;
|
||||
|
||||
// Default values for options:
|
||||
this.options={
|
||||
show_abstract: false,
|
||||
show_trees: false,
|
||||
show_grouped_translations: true,
|
||||
}
|
||||
|
||||
// Apply supplied options
|
||||
if(opts) for(var o in opts) this.options[o]=opts[o];
|
||||
|
||||
this.main=empty("div");
|
||||
this.menus=empty("span");
|
||||
|
||||
Reference in New Issue
Block a user