[Summary view] [Print] [Text view]

   1  // This file is part of Moodle - http://moodle.org/
   2  //
   3  // Moodle is free software: you can redistribute it and/or modify
   4  // it under the terms of the GNU General Public License as published by
   5  // the Free Software Foundation, either version 3 of the License, or
   6  // (at your option) any later version.
   7  //
   8  // Moodle is distributed in the hope that it will be useful,
   9  // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11  // GNU General Public License for more details.
  12  //
  13  // You should have received a copy of the GNU General Public License
  14  // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15  
  16  /**
  17   * Search box.
  18   *
  19   * @module     core/search-input
  20   * @class      search-input
  21   * @package    core
  22   * @copyright  2016 David Monllao {@link http://www.davidmonllao.com}
  23   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  24   * @since      Moodle 3.1
  25   */
  26  define(['jquery'], function($) {
  27  
  28      /**
  29       * This search box div node.
  30       *
  31       * @private
  32       */
  33      var wrapper = null;
  34  
  35      /**
  36       * Toggles the form visibility.
  37       *
  38       * @param {Event} ev
  39       * @method toggleForm
  40       * @private
  41       */
  42      var toggleForm = function(ev) {
  43  
  44          if (wrapper.hasClass('expanded')) {
  45              hideForm();
  46          } else {
  47              showForm(ev);
  48          }
  49      };
  50  
  51      /**
  52       * Shows the form or submits it depending on the window size.
  53       *
  54       * @param {Event} ev
  55       * @method showForm
  56       * @private
  57       */
  58      var showForm = function(ev) {
  59  
  60          var windowWidth = $(document).width();
  61  
  62          // We are only interested in enter and space keys (accessibility).
  63          if (ev.type === 'keydown' && ev.keyCode !== 13 && ev.keyCode !== 32) {
  64              return;
  65          }
  66  
  67          if (windowWidth <= 767 && (ev.type === 'click' || ev.type === 'keydown')) {
  68              // Move to the search page when using small window sizes as the input requires too much space.
  69              submitForm();
  70              return;
  71          } else if (windowWidth <= 767) {
  72              // Ignore mousedown events in while using small window sizes.
  73              return;
  74          }
  75  
  76          if (ev.type === 'keydown') {
  77              // We don't want to submit the form unless the user hits enter.
  78              ev.preventDefault();
  79          }
  80  
  81          wrapper.addClass('expanded');
  82          wrapper.find('form').addClass('expanded');
  83          wrapper.find('input').focus();
  84      };
  85  
  86      /**
  87       * Hides the form.
  88       *
  89       * @method hideForm
  90       * @private
  91       */
  92      var hideForm = function() {
  93          wrapper.removeClass('expanded');
  94          wrapper.find('form').removeClass('expanded');
  95      };
  96  
  97      /**
  98       * Submits the form.
  99       *
 100       * @param {Event} ev
 101       * @method submitForm
 102       * @private
 103       */
 104      var submitForm = function() {
 105          wrapper.find('form').submit();
 106      };
 107  
 108      return /** @alias module:core/search-input */ {
 109          // Public variables and functions.
 110  
 111          /**
 112           * Assigns listeners to the requested select box.
 113           *
 114           * @method init
 115           * @param {Number} id The search wrapper div id
 116           */
 117          init: function(id) {
 118              wrapper = $('#' + id);
 119              wrapper.on('click mouseover keydown', 'div', toggleForm);
 120          }
 121      };
 122  });