dev/js/src/hint.js

/**
 * Hint menu for Kalamar.
 * Based on menu object.
 *
 * @author Nils Diewald
 */
/*
 * TODO: List can be shown when prefix is like 'base/s=pcorenlp/'
 * TODO: Sometimes the drop-down box down vanish when list is shown
 * TODO: Create should expect an input text field
 * TODO: Embed only one single menu (not multiple)
 */
define([
  'hint/input',
  'hint/menu',
  'hint/contextanalyzer',
  'util'
], function (inputClass, 
	     menuClass, 
	     analyzerClass) {
  "use strict";

  /**
   * @define {regex} Regular expression for context
   */
  KorAP.context = KorAP.context ||
    "(?:^|[^-_a-zA-Z0-9])" +   // Anchor
    "((?:[-_a-zA-Z0-9]+?)\/" + // Foundry
    "(?:" +
    "(?:[-_a-zA-Z0-9]+?)=" +   // Layer
    "(?:"+
    "(?:[^:=\/ ]+?):|" +       // Key
    "(?:[^-=\/ ]+?)-" +        // Node
    ")?" +
    ")?" +
    ")$";
  KorAP.hintArray = KorAP.hintArray || {};

  /**
   * Return keycode based on event
   */

  // Initialize hint array

  /**
   * KorAP.Hint.create({
   *   inputField : node,
   *   context : context regex
   * });
   */
  return {

    // Some variables
    // _firstTry : true,
    active : false,

    /**
     * Create new hint helper.
     */
    create : function (param) {
      return Object.create(this)._init(param);
    },

    // Initialize hint helper
    _init : function (param) {
      param = param || {};

      // Holds all menus per prefix context
      this._menu = {};

      // Get input field
      var qfield = param["inputField"] || document.getElementById("q-field");
      if (!qfield)
	return null;

      this._inputField = inputClass.create(qfield);

      var inputFieldElement = this._inputField.element();

      var that = this;

      // Add event listener for key pressed down
      inputFieldElement.addEventListener(
	"keydown", function (e) {
	  var code = _codeFromEvent(e);
	  if (code === 40) {
	    that.show(false);
	    e.halt();
	  };
	}, false
      );

      this._inputField.container().addEventListener('click', function (e) {
	if (!this.classList.contains('active')) {
	  that.show(false);
	};
      });

      var _up = function (e) {
	var input = that._inputField;
	input.update();
      };

      // Move infobox
      inputFieldElement.addEventListener("keyup", _up);
      inputFieldElement.addEventListener("click", _up);

      // Set Analyzer for context
      this._analyzer = analyzerClass.create(
	param["context"] || KorAP.context
      );
      return this;
    },


    /**
     * Return the input field attached to the hint helper.
     */
    inputField : function () {
      return this._inputField;
    },


    /**
     * Altert at a specific character position.
     */
    charAlert : function (charPos, msg) {
      this._inputField.moveto(charPos);
      var c = this._inputField.container();
      c.classList.add('active');
      var error = c.appendChild(document.createElement('div'));
      error.classList.add('alert', 'hint');
      error.appendChild(document.createTextNode(msg));
    },

    /**
     * Return hint menu and probably init based on an action
     */
    menu : function (action) {

      if (this._menu[action] === undefined) {

	// No matching hint menu
	if (KorAP.hintArray[action] === undefined)
	  return;

	// Create matching hint menu
	this._menu[action] = menuClass.create(
	  this, action, KorAP.hintArray[action]
	);
      };

      // Return matching hint menu
      return this._menu[action];
    },

    /**
     * Get the correct menu based on the context
     */
    contextMenu : function (ifContext) {
      var context = this._inputField.context();
      if (context === undefined || context.length == 0)
	return ifContext ? undefined : this.menu("-");

      context = this._analyzer.test(context);
      if (context === undefined || context.length == 0)
	return ifContext ? undefined : this.menu("-");

      return this.menu(context);
    },


    /**
     * Show the menu.
     * Currently this means that multiple menus may be loaded
     * but not shown.
     */
    show : function (ifContext) {

      // Menu is already active
      if (this.active)
	return;

      // Get the menu
      var menu;
      if (menu = this.contextMenu(ifContext)) {
	var c = this._inputField.container();
	c.classList.add('active');
	c.appendChild(menu.element());
	menu.show();
	menu.focus();
	// Focus on input field
	// this.inputField.element.focus();
      };
    }
  };
});