bundles/org.eclipse.orion.client.ui/web/gcli/gcli/ui/display.js
function Display(options) {
  var doc = options.document || document;

  this.displayStyle = undefined;
  if (displayCss != null) {
    this.displayStyle = util.importCss(displayCss, doc, 'gcli-css-display');
  }

  // Configuring the document is complex because on the web side, there is an
  // active desire to have nothing to configure, where as when embedded in
  // Firefox there could be up to 4 documents, some of which can/should be
  // derived from some root element.
  // When a component uses a document to create elements for use under a known
  // root element, then we pass in the element (if we have looked it up
  // already) or an id/document

  this.commandOutputManager = options.commandOutputManager;
  if (this.commandOutputManager == null) {
    this.commandOutputManager = new CommandOutputManager();
  }

  this.requisition = new Requisition(options.environment || {}, doc,
                                     this.commandOutputManager);

  this.focusManager = new FocusManager(options, {
    document: doc,
    requisition: this.requisition
  });

  this.inputElement = find(doc, options.inputElement || null, 'gcli-input');
  this.inputter = new Inputter(options, {
    requisition: this.requisition,
    focusManager: this.focusManager,
    element: this.inputElement
  });

  // autoResize logic: we want Completer to keep the elements at the same
  // position if we created the completion element, but if someone else created
  // it, then it's their job.
  this.completeElement = insert(this.inputElement,
                         options.completeElement || null, 'gcli-row-complete');
  this.completer = new Completer(options, {
    requisition: this.requisition,
    inputter: this.inputter,
    autoResize: this.completeElement.gcliCreated,
    element: this.completeElement
  });

  this.prompt = new Prompt(options, {
    inputter: this.inputter,
    element: insert(this.inputElement,
                    options.promptElement || null, 'gcli-prompt')
  });

  this.element = find(doc, options.displayElement || null, 'gcli-display');
  this.element.classList.add('gcli-display');

  this.template = util.toDom(doc, displayHtml);
  this.elements = {};
  domtemplate.template(this.template, this.elements, { stack: 'display.html' });
  this.element.appendChild(this.template);

  this.tooltip = new Tooltip(options, {
    requisition: this.requisition,
    inputter: this.inputter,
    focusManager: this.focusManager,
    element: this.elements.tooltip,
    panelElement: this.elements.panel
  });

  this.inputter.tooltip = this.tooltip;

  this.outputElement = util.createElement(doc, 'div');
  this.outputElement.classList.add('gcli-output');
  this.outputList = new OutputTerminal(options, {
    requisition: this.requisition,
    element: this.outputElement
  });

  this.element.appendChild(this.outputElement);

  intro.maybeShowIntro(this.commandOutputManager, this.requisition);
}
function Display(options) {
  var doc = options.document || document;

  this.displayStyle = undefined;
  if (displayCss != null) {
    this.displayStyle = util.importCss(displayCss, doc, 'gcli-css-display');
  }

  // Configuring the document is complex because on the web side, there is an
  // active desire to have nothing to configure, where as when embedded in
  // Firefox there could be up to 4 documents, some of which can/should be
  // derived from some root element.
  // When a component uses a document to create elements for use under a known
  // root element, then we pass in the element (if we have looked it up
  // already) or an id/document

  this.commandOutputManager = options.commandOutputManager;
  if (this.commandOutputManager == null) {
    this.commandOutputManager = new CommandOutputManager();
  }

  this.requisition = new Requisition(options.environment || {}, doc,
                                     this.commandOutputManager);

  this.focusManager = new FocusManager(options, {
    document: doc,
    requisition: this.requisition
  });

  this.inputElement = find(doc, options.inputElement || null, 'gcli-input');
  this.inputter = new Inputter(options, {
    requisition: this.requisition,
    focusManager: this.focusManager,
    element: this.inputElement
  });

  // autoResize logic: we want Completer to keep the elements at the same
  // position if we created the completion element, but if someone else created
  // it, then it's their job.
  this.completeElement = insert(this.inputElement,
                         options.completeElement || null, 'gcli-row-complete');
  this.completer = new Completer(options, {
    requisition: this.requisition,
    inputter: this.inputter,
    autoResize: this.completeElement.gcliCreated,
    element: this.completeElement
  });

  this.prompt = new Prompt(options, {
    inputter: this.inputter,
    element: insert(this.inputElement,
                    options.promptElement || null, 'gcli-prompt')
  });

  this.element = find(doc, options.displayElement || null, 'gcli-display');
  this.element.classList.add('gcli-display');

  this.template = util.toDom(doc, displayHtml);
  this.elements = {};
  domtemplate.template(this.template, this.elements, { stack: 'display.html' });
  this.element.appendChild(this.template);

  this.tooltip = new Tooltip(options, {
    requisition: this.requisition,
    inputter: this.inputter,
    focusManager: this.focusManager,
    element: this.elements.tooltip,
    panelElement: this.elements.panel
  });

  this.inputter.tooltip = this.tooltip;

  this.outputElement = util.createElement(doc, 'div');
  this.outputElement.classList.add('gcli-output');
  this.outputList = new OutputTerminal(options, {
    requisition: this.requisition,
    element: this.outputElement
  });

  this.element.appendChild(this.outputElement);

  intro.maybeShowIntro(this.commandOutputManager, this.requisition);
}
function Display ( options ) { var doc = options . document || document ; this . displayStyle = undefined ; if ( displayCss != null ) { this . displayStyle = util . importCss ( displayCss , doc , 'gcli-css-display' ) ; } // Configuring the document is complex because on the web side, there is an // active desire to have nothing to configure, where as when embedded in // Firefox there could be up to 4 documents, some of which can/should be // derived from some root element. // When a component uses a document to create elements for use under a known // root element, then we pass in the element (if we have looked it up // already) or an id/document this . commandOutputManager = options . commandOutputManager ; if ( this . commandOutputManager == null ) { this . commandOutputManager = new CommandOutputManager ( ) ; } this . requisition = new Requisition ( options . environment || { } , doc , this . commandOutputManager ) ; this . focusManager = new FocusManager ( options , { document : doc , requisition : this . requisition } ) ; this . inputElement = find ( doc , options . inputElement || null , 'gcli-input' ) ; this . inputter = new Inputter ( options , { requisition : this . requisition , focusManager : this . focusManager , element : this . inputElement } ) ; // autoResize logic: we want Completer to keep the elements at the same // position if we created the completion element, but if someone else created // it, then it's their job. this . completeElement = insert ( this . inputElement , options . completeElement || null , 'gcli-row-complete' ) ; this . completer = new Completer ( options , { requisition : this . requisition , inputter : this . inputter , autoResize : this . completeElement . gcliCreated , element : this . completeElement } ) ; this . prompt = new Prompt ( options , { inputter : this . inputter , element : insert ( this . inputElement , options . promptElement || null , 'gcli-prompt' ) } ) ; this . element = find ( doc , options . displayElement || null , 'gcli-display' ) ; this . element . classList . add ( 'gcli-display' ) ; this . template = util . toDom ( doc , displayHtml ) ; this . elements = { } ; domtemplate . template ( this . template , this . elements , { stack : 'display.html' } ) ; this . element . appendChild ( this . template ) ; this . tooltip = new Tooltip ( options , { requisition : this . requisition , inputter : this . inputter , focusManager : this . focusManager , element : this . elements . tooltip , panelElement : this . elements . panel } ) ; this . inputter . tooltip = this . tooltip ; this . outputElement = util . createElement ( doc , 'div' ) ; this . outputElement . classList . add ( 'gcli-output' ) ; this . outputList = new OutputTerminal ( options , { requisition : this . requisition , element : this . outputElement } ) ; this . element . appendChild ( this . outputElement ) ; intro . maybeShowIntro ( this . commandOutputManager , this . requisition ) ; }
View is responsible for generating the web UI for GCLI.
@param options Object containing user customization properties.
See the documentation for the other components for more details.
Options supported directly include:
- document (default=document):
- environment (default={}):
- dontDecorate (default=false):
- inputElement (default=#gcli-input):
- completeElement (default=#gcli-row-complete):
- displayElement (default=#gcli-display):
- promptElement (default=#gcli-prompt):
- commandOutputManager (default=new CommandOutputManager):
View is responsible for generating the web UI for GCLI .