mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-15 13:33:52 +02:00
Code Issues Projects Releases Wiki Activity

MDL-56171 javascript: Make searchableselector wrap autocomplete

Browse Source 
One less yui module.

Conflicts:
	lib/upgrade.txt
This commit is contained in:
Damyon Wiese 2016-07-13 22:51:35 +08:00
parent 577bd70d38
commit f7ed5cee30
4 changed files with 20 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
lib/form/searchableselector.js
View File

@ -1,121 +0,0 @@
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* javascript for a searchable select type element
*
* @package formlib
* @copyright 2009 Jerome Mouneyrac
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
selector = {
select: null,
input: null,
button: null,
goodbrowser: false,
alloptions: [],
filter_init: function(strsearch, selectinputid) {
selector.goodbrowser = !(' ' + document.body.className + ' ').match(/ ie | safari /);
// selector.id = selectinputid
selector.select = document.getElementById(selectinputid);
selector.button = document.getElementById('settingssubmit');
// Copy all selector options into a plain array. selector.select.options
// is linked live to the document, which causes problems in IE and Safari.
for (var i = 0; i < selector.select.options.length; i++) {
selector.alloptions[i] = selector.select.options[i];
}
// Create a div to hold the search UI.
var div = document.createElement('div');
div.id = 'searchui';
// Find the capability search input.
var input = document.createElement('input');
input.type = 'text';
input.id = selectinputid+'_search';
selector.input = input;
// Create a label for the search input.
var label = document.createElement('label');
label.htmlFor = input.id;
label.appendChild(document.createTextNode(strsearch + ' '));
// Tie it all together
div.appendChild(label);
div.appendChild(input);
selector.select.parentNode.insertBefore(div, selector.select);
input.addEventListener('keyup', selector.filter_change);
},
filter_change: function() {
var searchtext = selector.input.value.toLowerCase();
var found = false;
for (var i = 0; i < selector.alloptions.length; i++) {
var option = selector.alloptions[i];
if (option.text.toLowerCase().indexOf(searchtext) >= 0) {
// The option is matching the search text.
selector.set_visible(option, true);
found = true;
} else {
selector.set_visible(option, false);
}
}
if (found) {
// No error.
selector.input.className = "";
} else {
// The search didn't find any matching, color the search text in red.
selector.input.className = "error";
}
},
set_visible: function(element, visible) {
if (selector.goodbrowser) {
if (visible) {
element.style.display = 'block';
element.disabled = false;
} else {
element.style.display = 'none';
element.selected = false;
element.disabled = true;
}
} else {
// This is a deeply evil hack to make the filtering work in IE.
// IE ignores display: none; on select options, but wrapping the
// option in a span does seem to hide the option.
// Thanks http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
if (visible) {
if (element.parentNode.tagName.toLowerCase() === 'span') {
element.parentNode.parentNode.replaceChild(element, element.parentNode); // New, old.
}
element.disabled = false;
} else {
if (element.parentNode.tagName.toLowerCase() !== 'span') {
var span = document.createElement('span');
element.parentNode.replaceChild(span, element); // New, old.
span.appendChild(element);
span.style.display = 'none';
}
element.disabled = true;
element.selected = false;
}
}
}
};

62
lib/form/searchableselector.php
View File

@ -14,47 +14,41 @@
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* searchable select type element
* Searchable selector field (alias for autocomplete).
*
* Contains HTML class for a searchable select type element
* Allows auto-complete selector.
*
* @package core_form
* @copyright 2009 Jerome Mouneyrac <jerome@mouneyrac.com>
* @copyright 2015 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
require_once('select.php');
global $CFG;
require_once($CFG->libdir . '/form/autocomplete.php');
/**
* searchable select type element
* Form field type for selecting from a list of options.
*
* Display a select input with a search textfield input on the top
* The search textfield is created by the javascript file searchselector.js
* (so when javascript is not activated into the browser, the search field is not displayed)
* If ever the select can be reset/unselect/blank/nooption, you will have to add an option "noselected"
* and manage this special case when you get/set the form data (i.e. $mform->get_data()/$this->set_data($yourobject)).
* Allows auto-complete ajax searching.
*
* @package core_form
* @category form
* @copyright 2009 Jerome Mouneyrac
* @copyright 2015 Damyon Wiese <damyon@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class MoodleQuickForm_searchableselector extends MoodleQuickForm_select{
class MoodleQuickForm_searchableselector extends MoodleQuickForm_autocomplete {
/**
* Constructor
*
* @param string $elementName Select name attribute
* @param mixed $elementLabel Label(s) for the select
* @param array $options additional options.
* @param mixed $attributes Either a typical HTML attribute string or an associative array
* @param string $elementname Element name
* @param mixed $elementlabel Label(s) for an element
* @param array $options List of valid options for the select.
*/
public function __construct($elementName=null, $elementLabel=null, $options=null, $attributes=null) {
//set size default to 12
if (empty($attributes) || empty($attributes['size'])) {
$attributes['size'] = 12;
}
parent::__construct($elementName, $elementLabel, $options, $attributes);
public function __construct($elementname = null, $elementlabel = null, $options = array()) {
$options = ['' => get_string('noselection', 'form')];
parent::__construct($elementname, $elementlabel, $options);
}
/**
@ -66,26 +60,4 @@ class MoodleQuickForm_searchableselector extends MoodleQuickForm_select{
debugging('Use of class name as constructor is deprecated', DEBUG_DEVELOPER);
self::__construct($elementName, $elementLabel, $options, $attributes);
}
/**
* Returns the select element in HTML
*
* @return string
*/
function toHtml(){
global $OUTPUT;
if ($this->_hiddenLabel || $this->_flagFrozen) {
return parent::toHtml();
} else {
// Javascript for the search/selection fields
global $PAGE;
$PAGE->requires->js('/lib/form/searchableselector.js');
$PAGE->requires->js_function_call('selector.filter_init', array(get_string('search'),$this->getAttribute('id')));
$strHtml = '';
$strHtml .= parent::toHtml(); //the select input
return $strHtml;
}
}
}

3
lib/upgrade.txt
View File

@ -8,6 +8,9 @@ information provided here is intended especially for developers.
This is to allow the same markup to work in "clean" and "boost" themes alot of the time. It is also to allow user text
with bootstrap classes to keep working in the new theme. See MDL-56004 for the list of supported classes.
* MForms element 'submitlink' has been deprecated.
* Searchable selector form element is now a wrapper for autocomplete. A "No selection" option is automatically
added to the options list for best backwards compatibility - if you were manually adding a "no selection" option you will need
to remove it.
* Node.js versions >=4 are now required to run grunt.
* JQuery has been updated to 3.1.0. JQuery migrate plugins are no longer shipped - please read
https://jquery.com/upgrade-guide/3.0/ and update your javascript.

3
mod/quiz/override_form.php
View File

@ -164,9 +164,6 @@ class quiz_override_form extends moodleform {
}
unset($users);
if (count($userchoices) == 0) {
$userchoices[0] = get_string('none');
}
$mform->addElement('searchableselector', 'userid',
get_string('overrideuser', 'quiz'), $userchoices);
$mform->addRule('userid', get_string('required'), 'required', null, 'client');