dev/js/src/hint.js

/**
 * Hint menu for Kalamar.
 * Based on menu object.
 *
 * @author Nils Diewald
 */
/*
 * TODO: Check for cnx/syn=
 * 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)
 *       By holding the current menu in _active
 * TODO: show() should accept a context field (especially for no-context fields,
 *       like fragments)
 * TODO: Improve context analyzer from hint!
 * TODO: Marked annotations should be addable to "fragments"
 */
define([
  'hint/input',
  'hint/menu',
  'hint/contextanalyzer',
  'hint/alert',
  'util'
], function (inputClass, 
             menuClass,
             analyzerClass,
             alertClass) {
  "use strict";

  /**
   * 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   = {};
      this._alert  = alertClass.create();
      this._active = null;

      // No annotation helper available
      if (!KorAP.annotationHelper) {
        console.log("No annotationhelper defined");
        return;
      };
      
      /**
       * @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
        ")?" +
        ")?" +
        ")$";

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

      // Create input field
      this._inputField = inputClass.create(qfield);

      var inputFieldElement = this._inputField.element();

      var c = this._inputField.container();

      // create alert
      c.appendChild(this._alert.element());

      var that = this;

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

      var _down = function (e) {
        var code = _codeFromEvent(e);
        if (code === 40) {
          this.show(false);
          e.halt();
        };
      };
      
      // Move infobox
      inputFieldElement.addEventListener("keyup", this.update.bind(this));
      inputFieldElement.addEventListener("click", this.update.bind(this));

      // Add event listener for key pressed down
      inputFieldElement.addEventListener(
        "keydown", _down.bind(this), false
      );

      // Add touch events
      inputFieldElement.addEventListener(
        'touchstart',
        this._touch.bind(this),
        false
      );
      inputFieldElement.addEventListener(
        'touchend',
        this._touch.bind(this),
        false
      );
      inputFieldElement.addEventListener(
        'touchmove',
        this._touch.bind(this),
        false
      );

      // 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.
     */
    alert : function (charPos, msg) {

      if (arguments.length === 0)
        return this._alert;

      // Do not alert if already alerted!
      if (this._alert.active)
        return false;

      // Move to the correct position
      this._inputField.moveto(charPos);

      // Set container to active (aka hide the hint helper button)

      this._alert.show(msg);
      this.active(this._alert);
      return true;
    },
    
    _unshowAlert : function () {
      this._alert.hide();
      this.active(null);
    },

    update : function () {
      this._inputField.update();
      if (this._alert.hide())
        this.active(null);
    },


    /**
     * Return hint menu and probably init based on an action
     */
    menu : function (action) {
      if (this._menu[action] === undefined) {

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

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

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

    /**
     * Get the correct menu based on the context
     */
    contextMenu : function (ifContext) {
      
      // Get context (aka left text)
      var context = this._inputField.context();

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

      // Get context (aka left text matching regex)
      context = this._analyzer.test(context);

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

      return this.menu(context) || (ifContext ? undefined : this.menu('-'));
    },

    /**
     * Activate a certain menu.
     * If a menu is passed, the menu will be activated.
     * If null is passed, the active menu will be deactivated.
     * If nothing is passed, returns the active menu.
     */
    active : function (obj) {

      // A menu or null was passed
      if (arguments.length === 1) {
        var c = this._inputField.container();

        // Make the menu active
        if (obj !== null) {
          c.classList.add('active');
          this._active = obj;
        }

        // Make the menu inactive
        else {
          c.classList.remove('active');
          this._active = null;
        }
      };

      // Return
      return this._active;
    },


    /**
     * Show the menu.
     * Remove all old menus.
     *
     * @param {boolean} Boolean value to indicate if context
     *        is necessary (true) or if the main context should
     *        be shown if context fails.
     *        
     */
    show : function (ifContext) {

      // Remove the active object
      this._unshow();
      
      // Get the menu
      var menu;
      if (menu = this.contextMenu(ifContext)) {
        this.active(menu);

        var c = this._inputField.container();        
        c.appendChild(menu.element());

        menu.show();
        menu.focus();
        // Focus on input field
        // this.inputField.element.focus();
      }
      else {
        this._inputField.element().focus();
      };
    },
    
    // This will get the context of the field
    getContext : function () {},

    /**
     * Deactivate the current menu and focus on the input field.
     */
    unshow_old : function () {
      this.active(null);
      this.inputField().element().focus();
    },

    /**
     * Deactivate the current menu and focus on the input field.
     */
    unshow : function () {
      this._unshow();
      this._inputField.element().focus();
    },


    // Catch touch events
    _touch : function (e) {

      if (e.type === 'touchstart') {
        var t = e.touches[0];
        this._lastTouch = t.clientY;
      }
      else if (e.type === 'touchend') {
        this._lastTouch = undefined;
      }
      else if (e.type == 'touchmove') {
        var t = e.touches[0];
        if ((this._lastTouch + 10) < t.clientY) {
          this.show();
          this._lastTouch = undefined;
        };
        e.halt();
      }
    },

    
    _unshow : function () {
      if (this.active() !== null) {
        // var act = this.active();

        // This does not work for alert currently!
        //if (act._type !== 'alert') {
        if (!this._alert.active) {

          // This does not work for webkit!
          var c = this._inputField.container();
          c.removeChild(this._active.element());
        }
        else {
          this._unshowAlert();
        };
        
        // this._active.hide();
        this.active(null);
      };
    }
  };
});