lib/amd/src/search-input.js

   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 });