MDL-37012-master redesign the community finder search form

This commit is contained in:
Jerome Mouneyrac 2012-12-07 17:09:26 +08:00
parent 1918a2452e
commit 46b229f9a8
9 changed files with 366 additions and 68 deletions

View File

@ -142,7 +142,7 @@ $fromformdata['subject'] = optional_param('subject', 'all', PARAM_ALPHANUMEXT);
$fromformdata['audience'] = optional_param('audience', 'all', PARAM_ALPHANUMEXT);
$fromformdata['language'] = optional_param('language', current_language(), PARAM_ALPHANUMEXT);
$fromformdata['educationallevel'] = optional_param('educationallevel', 'all', PARAM_ALPHANUMEXT);
$fromformdata['downloadable'] = optional_param('downloadable', 0, PARAM_ALPHANUM);
$fromformdata['downloadable'] = optional_param('downloadable', 1, PARAM_ALPHANUM);
$fromformdata['orderby'] = optional_param('orderby', 'newest', PARAM_ALPHA);
$fromformdata['huburl'] = optional_param('huburl', HUB_MOODLEORGHUBURL, PARAM_URL);
$fromformdata['search'] = $search;

View File

@ -76,7 +76,7 @@ class community_hub_search_form extends moodleform {
if (isset($this->_customdata['downloadable'])) {
$downloadable = $this->_customdata['downloadable'];
} else {
$downloadable = 0;
$downloadable = 1;
}
if (isset($this->_customdata['orderby'])) {
$orderby = $this->_customdata['orderby'];
@ -135,60 +135,79 @@ class community_hub_search_form extends moodleform {
}
if (!empty($hubs)) {
//TODO: sort hubs by trusted/prioritize
//Public hub list
$options = array();
$firsthub = false;
$htmlhubs = array();
foreach ($hubs as $hub) {
$smalllogohtml = '';
if (array_key_exists('id', $hub)) {
// Retrieve hub logo + generate small logo
$params = array('hubid' => $hub['id'],
'filetype' => HUB_HUBSCREENSHOT_FILE_TYPE);
$imgurl = new moodle_url(HUB_HUBDIRECTORYURL .
"/local/hubdirectory/webservice/download.php", $params);
$ascreenshothtml = html_writer::empty_tag('img',
$imgsize = getimagesize($imgurl->out(false));
if ($imgsize[0] > 1) {
$ascreenshothtml = html_writer::empty_tag('img',
array('src' => $imgurl, 'alt' => $hub['name']));
$smalllogohtml = html_writer::empty_tag('img',
array('src' => $imgurl, 'alt' => $hub['name']
, 'height' => 30, 'width' => 40));
} else {
$ascreenshothtml = '';
}
$hubimage = html_writer::tag('div', $ascreenshothtml,
array('class' => 'hubimage'));
$hubdescription = html_writer::tag('a', $hub['name'],
array('class' => 'hublink clearfix', 'href' => $hub['url'],
'onclick' => 'this.target="_blank"'));
$hubdescription .= html_writer::tag('span', $ascreenshothtml,
array('class' => 'hubscreenshot'));
$hubdescriptiontext = html_writer::tag('span', format_text($hub['description'], FORMAT_PLAIN),
array('class' => 'hubdescription'));
// Statistics + trusted info
$hubstats = '';
if (isset($hub['enrollablecourses'])) { //check needed to avoid warnings for Moodle version < 2011081700
$additionaldesc = get_string('enrollablecourses', 'block_community') . ': ' . $hub['enrollablecourses'] . ' - ' .
get_string('downloadablecourses', 'block_community') . ': ' . $hub['downloadablecourses'];
$hubdescriptiontext .= html_writer::tag('span', $additionaldesc,
array('class' => 'hubadditionaldesc'));
$hubstats .= html_writer::tag('div', $additionaldesc,
array('class' => ''));
}
if ($hub['trusted']) {
$hubtrusted = get_string('hubtrusted', 'block_community');
$hubdescriptiontext .= html_writer::tag('span',
$hubtrusted . ' ' . $OUTPUT->doc_link('trusted_hubs'),
array('class' => 'trusted'));
$hubtrusted = get_string('hubtrusted', 'block_community');
$hubstats .= html_writer::tag('div', $hubtrusted . ' ' . $OUTPUT->doc_link('trusted_hubs'), array('class' => ''));
}
$hubdescriptiontext = html_writer::tag('span', $hubdescriptiontext,
array('class' => 'hubdescriptiontext'));
$hubstats = html_writer::tag('div', $hubstats, array('class' => 'hubstats'));
$hubdescription = html_writer::tag('span',
$hubdescription . $hubdescriptiontext,
array('class' => $hub['trusted'] ? 'hubtrusted' : 'hubnottrusted'));
// hub name link + hub description
$hubnamelink = html_writer::tag('a',
html_writer::tag('h2',$hub['name']),
array('class' => 'hubtitlelink', 'href' => $hub['url'],
'onclick' => 'this.target="_blank"'));
$hubdescriptiontext = html_writer::tag('div', format_text($hub['description'], FORMAT_PLAIN),
array('class' => 'hubdescription'));
$hubtext = html_writer::tag('div', $hubdescriptiontext . $hubstats,
array('class' => 'hubtext'));
$hubimgandtext = html_writer::tag('div', $hubimage . $hubtext,
array('class' => 'hubimgandtext'));
$hubfulldesc = html_writer::tag('div',
$hubnamelink . $hubimgandtext,
array('class' => 'hubmainhmtl'));
} else {
$hubdescription = html_writer::tag('a', $hub['name'],
array('class' => 'hublink hubtrusted', 'href' => $hub['url']));
$hubfulldesc = html_writer::tag('a', $hub['name'],
array('class' => '', 'href' => $hub['url']));
}
if (empty($firsthub)) {
$mform->addElement('radio', 'huburl', get_string('selecthub', 'block_community'),
$hubdescription, $hub['url']);
$mform->setDefault('huburl', $huburl);
$firsthub = true;
} else {
$mform->addElement('radio', 'huburl', '', $hubdescription, $hub['url']);
}
// Add hub to the hub items
$hubinfo = new stdClass();
$hubinfo->mainhtml = $hubfulldesc;
$hubinfo->rowhtml = html_writer::tag('div', $smalllogohtml ,
array('class' => 'hubsmalllogo')) . $hub['name'];
$hubitems[$hub['url']] = $hubinfo;
}
// Hub listing form element
$mform->addElement('listing','huburl', '', '', array('items' => $hubitems,
'showall' => get_string('showall', 'block_community'),
'hideall' => get_string('hideall', 'block_community')));
$mform->setDefault('huburl', $huburl);
//display enrol/download select box if the USER has the download capability on the course
if (has_capability('moodle/community:download',
context_course::instance($this->_customdata['courseid']))) {
@ -197,6 +216,8 @@ class community_hub_search_form extends moodleform {
$mform->addElement('select', 'downloadable', get_string('enroldownload', 'block_community'),
$options);
$mform->addHelpButton('downloadable', 'enroldownload', 'block_community');
$mform->setDefault('downloadable', $downloadable);
} else {
$mform->addElement('hidden', 'downloadable', 0);
}
@ -262,23 +283,30 @@ class community_hub_search_form extends moodleform {
collatorlib::asort($languages);
$languages = array_merge(array('all' => get_string('any')), $languages);
$mform->addElement('select', 'language', get_string('language'), $languages);
$mform->setDefault('language', $language);
$mform->addHelpButton('language', 'language', 'block_community');
$mform->addElement('radio', 'orderby', get_string('orderby', 'block_community'),
get_string('orderbynewest', 'block_community'), 'newest');
$mform->addElement('radio', 'orderby', null,
get_string('orderbyeldest', 'block_community'), 'eldest');
$mform->addElement('radio', 'orderby', null,
get_string('orderbyname', 'block_community'), 'fullname');
$mform->addElement('radio', 'orderby', null,
get_string('orderbypublisher', 'block_community'), 'publisher');
$mform->addElement('radio', 'orderby', null,
get_string('orderbyratingaverage', 'block_community'), 'ratingaverage');
$mform->addElement('select', 'orderby', get_string('orderby', 'block_community'),
array('newest' => get_string('orderbynewest', 'block_community'),
'eldest' => get_string('orderbyeldest', 'block_community'),
'fullname' => get_string('orderbyname', 'block_community'),
'publisher' => get_string('orderbypublisher', 'block_community'),
'ratingaverage' => get_string('orderbyratingaverage', 'block_community')));
$mform->setDefault('orderby', $orderby);
$mform->addHelpButton('orderby', 'orderby', 'block_community');
$mform->setType('orderby', PARAM_ALPHA);
$mform->addElement('text', 'search', get_string('keywords', 'block_community'));
$mform->setAdvanced('audience');
$mform->setAdvanced('educationallevel');
$mform->setAdvanced('subject');
$mform->setAdvanced('licence');
$mform->setAdvanced('language');
$mform->setAdvanced('orderby');
$mform->addElement('text', 'search', get_string('keywords', 'block_community'),
array('size' => 30));
$mform->addHelpButton('search', 'keywords', 'block_community');

View File

@ -49,7 +49,7 @@ $string['courses'] = 'Courses';
$string['coverage'] = 'Tags: {$a}';
$string['donotrestore'] = 'No';
$string['dorestore'] = 'Yes';
$string['download'] = 'Download';
$string['download'] = 'Install';
$string['downloadable'] = 'courses I can download';
$string['downloadablecourses'] = 'Downloadable courses';
$string['downloadconfirmed'] = 'The backup has been saved in your private files {$a}';
@ -68,6 +68,7 @@ $string['enrollablecourses'] = 'Enrollable courses';
$string['errorcourselisting'] = 'An error occurred when retrieving the course listing from the selected hub, please try again later. ({$a})';
$string['errorhublisting'] = 'An error occurred when retrieving the hub listing from Moodle.org, please try again later. ({$a})';
$string['fileinfo'] = 'Language: {$a->lang} - License: {$a->license} - Time updated: {$a->timeupdated}';
$string['hideall'] = 'Hide hubs';
$string['hub'] = 'hub';
$string['hubnottrusted'] = 'Not trusted';
$string['hubtrusted'] = 'This hub is trusted by Moodle.org';
@ -106,6 +107,7 @@ $string['searchcourse'] = 'Search for community course';
$string['selecthub'] = 'Select hub';
$string['selecthub_help'] = 'Select hub where to search the courses.';
$string['sites'] = 'Sites';
$string['showall'] = 'Show all hubs';
$string['subject'] = 'Subject';
$string['subject_help'] = 'To narrow your search to courses about a particular subject, choose one from this list.';
$string['userinfo'] = 'Creator: {$a->creatorname} - Publisher: {$a->publishername}';

View File

@ -2,30 +2,22 @@
/* HUB SELECTOR */
#page-blocks-community-communitycourse .hubscreenshot {float: left; }
#page-blocks-community-communitycourse .hubdescription {
color: #003333;
font-size: 95%;
display:block;
}
#page-blocks-community-communitycourse .hubdescriptiontext {margin-left:160px;display:block;}
#page-blocks-community-communitycourse .hubadditionaldesc {
color: #666666;
font-size: 90%;
display:block;
}
#page-blocks-community-communitycourse .hubtitlelink {color: #999; }
#page-blocks-community-communitycourse .hubsmalllogo {padding-right: 7px; float: left; }
#page-blocks-community-communitycourse .hubtext {display: block; width: 68%; padding-left: 165px;}
#page-blocks-community-communitycourse .hubimgandtext {display:table;}
#page-blocks-community-communitycourse .hubimage {float: left; display: block; width: 100px;}
#page-blocks-community-communitycourse .hubdescriptiontext {}
#page-blocks-community-communitycourse .hubstats {padding-top: 10px}
#page-blocks-community-communitycourse .hubadditionaldesc {color: #666666; font-size: 90%; display:block;}
#page-blocks-community-communitycourse .hubscreenshot {margin-right: 10px;}
#page-blocks-community-communitycourse .hubnottrusted {margin-left: 6px;}
#page-blocks-community-communitycourse .hubtrusted {display:inline;margin-left: 6px;}
#page-blocks-community-communitycourse .hubnottrusted {}
#page-blocks-community-communitycourse .hubtrusted {display:inline;}
#page-blocks-community-communitycourse .hubnottrusted {}
#page-blocks-community-communitycourse .trustedtr {background-color: #ffe1c3;}
#page-blocks-community-communitycourse .prioritisetr {background-color: #ffd4ff;}
#page-blocks-community-communitycourse .blockdescription {font-size: 80%; color: #555555;}
#page-blocks-community-communitycourse .trusted {
font-size: 90%;
color: #006633;
font-weight: normal;
font-style: italic;
}
#page-blocks-community-communitycourse .trusted {font-size: 90%; color: #006633; font-weight: normal; font-style: italic;}
/* COURSES RESULT */
#page-blocks-community-communitycourse .additionaldesc {font-size: 80%; color: #8B8989;}

146
lib/form/listing.php Normal file
View File

@ -0,0 +1,146 @@
<?php
// 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/>.
/**
* Listing form element
*
* Contains HTML class for a listing form element
*
* @package core_form
* @copyright 2012 Jerome Mouneyrac
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
require_once("HTML/QuickForm/button.php");
/**
* What is it:
* The listing element is a simple customizable "select" without the input type=select.
* One main div contains the "large" html of an item.
* A show/hide div shows a hidden div containing the list of all items.
* This list is composed by the "small" html of each item.
*
* How to use it:
* The options parameter is an arrau containing:
* - items => array of object: the key is the value of the form input
* $item->rowhtml => small html
* $item->mainhtml => large html
* - showall/hideall => string for the Show/Hide button
*
* How to customize it:
* You can change the css in core.css. For example if you remove float:left; from .formlistingrow,
* then the item list is not display as tabs but as rows.
*
* @package core_form
* @copyright 2012 Jerome Mouneyrac
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class MoodleQuickForm_listing extends HTML_QuickForm_input {
/** @var array items to display */
protected $items = array();
/** @var string language string for Show All */
protected $showall;
/** @var string language string for Hide */
protected $hideall;
/**
* Constructor
*
* @param string $elementName (optional) name of the listing
* @param string $elementLabel (optional) listing label
* @param array $attributes (optional) Either a typical HTML attribute string
* or an associative array
* @param array $options set of options to initalize listing
*/
function MoodleQuickForm_listing($elementName=null, $elementLabel=null, $attributes=null, $options=array()) {
$this->_type = 'listing';
if (!empty($options['items'])) {
$this->items = $options['items'];
}
if (!empty($options['showall'])) {
$this->showall = $options['showall'];
} else {
$this->showall = get_string('showall');
}
if (!empty($options['hideall'])) {
$this->hideall = $options['hideall'];
} else {
$this->hideall = get_string('hide');
}
parent::HTML_QuickForm_input($elementName, $elementLabel, $attributes);
}
/**
* Returns HTML for listing form element.
*
* @return string
*/
function toHtml() {
global $CFG, $PAGE;
$mainhtml = html_writer::tag('div', $this->items[$this->getValue()]->mainhtml,
array('id' => $this->getName().'_items_main', 'class' => 'formlistingmain'));
// Add the main div containing the selected item (+ the caption: "More items")
$html = html_writer::tag('div', $mainhtml .
html_writer::tag('div', $this->showall,
array('id' => $this->getName().'_items_caption', 'class' => 'formlistingmore')),
array('id'=>$this->getName().'_items', 'class' => 'formlisting hide'));
// Add collapsible region: all the items
$itemrows = '';
$html .= html_writer::tag('div', $itemrows,
array('id' => $this->getName().'_items_all', 'class' => 'formlistingall'));
// Add radio buttons for non javascript support
$radiobuttons = '';
foreach($this->items as $itemid => $item) {
$radioparams = array('name' => $this->getName(), 'value' => $itemid,
'id' => 'id_huburl_'.$itemid, 'class' => 'formlistinginputradio', 'type' => 'radio');
if ($itemid == $this->getValue()) {
$radioparams['checked'] = 'checked';
}
$radiobuttons .= html_writer::tag('div', html_writer::tag('input', '&nbsp;' .
html_writer::tag('div', $item->rowhtml, array('class' => 'formlistingradiocontent')), $radioparams),
array('class' => 'formlistingradio'));
;
}
// Container for the hidden hidden input which will contain the selected item
$html .= html_writer::tag('div', $radiobuttons,
array('id' => 'formlistinginputcontainer', 'class' => 'formlistinginputcontainer'));
$module = array('name'=>'form_listing', 'fullpath'=>'/lib/form/yui/listing/listing.js',
'requires'=>array('node', 'event', 'transition'));
$PAGE->requires->js_init_call('M.form_listing.init',
array(array('hiddeninputid' => $this->getAttribute('id'),
'elementid' => $this->getName().'_items',
'hideall' => $this->hideall,
'showall' => $this->showall,
'items' => $this->items,
'attributid' => $this->getAttribute('id'),
'inputname' => $this->getName(),
'currentvalue' => $this->getValue())), true, $module);
return $html;
}
}

66
lib/form/yui/listing/listing.js vendored Normal file
View File

@ -0,0 +1,66 @@
M.form_listing = {};
M.form_listing.Y = null;
M.form_listing.instances = [];
/**
* This fucntion is called for each listing on page.
*/
M.form_listing.init = function(Y, params) {
if (params && params.hiddeninputid && params.elementid) {
// Enable element that were hidden/displau for support of no-javascript
// Display the form
Y.one('#'+params.elementid).removeClass('hide');
// Replace the radio buttons by a hidden input
Y.one('#formlistinginputcontainer').setHTML('<input name='+params.inputname+' type=hidden id='+params.attributid+' value='+params.currentvalue+' />');
var caption = Y.one('#'+params.elementid+'_caption');
var allitems = Y.one('#'+params.elementid+'_all');
var selecteditem = Y.one('#'+params.elementid+'_main');
var hiddeninput = Y.one('#'+params.hiddeninputid);
// Do not display the listing by default
var show = 0;
allitems.hide();
// Refresh the main item + set the hidden input to its value
var selectItem = function(e) {
var index = this.get('id').replace(params.elementid+'_all_',"");;
hiddeninput.set('value', items[index]);
selecteditem.setHTML(params.items[items[index]].mainhtml)
}
// caption Onlick event to display/hide the listing
var onClick = function(e) {
if (!show) {
allitems.show(true);
show = 1;
caption.setHTML(params.hideall);
} else {
allitems.hide(true);
show = 0;
caption.setHTML(params.showall);
}
};
caption.on('click', onClick);
// Fill the item rows with html + add event
// PS: we need to save the items into a temporary "items[]" array because params.items keys could be
// url. This temporary items[] avoid not working calls like Y.one('#myitems_http:www.google.com').
var items = [];
var itemindex = 0;
for (itemid in params.items) {
items[itemindex] = itemid;
// Add the row
allitems.append("<div id="+params.elementid+'_all_'+itemindex+" class='formlistingrow'>" + params.items[itemid].rowhtml + "</div>");
// Add click event to the row
Y.one('#'+params.elementid+'_all_'+itemindex).on('click', selectItem);
itemindex = itemindex + 1;
}
}
};

View File

@ -2582,6 +2582,7 @@ MoodleQuickForm::registerElementType('group', "$CFG->libdir/form/group.php", 'Mo
MoodleQuickForm::registerElementType('header', "$CFG->libdir/form/header.php", 'MoodleQuickForm_header');
MoodleQuickForm::registerElementType('hidden', "$CFG->libdir/form/hidden.php", 'MoodleQuickForm_hidden');
MoodleQuickForm::registerElementType('htmleditor', "$CFG->libdir/form/htmleditor.php", 'MoodleQuickForm_htmleditor');
MoodleQuickForm::registerElementType('listing', "$CFG->libdir/form/listing.php", 'MoodleQuickForm_listing');
MoodleQuickForm::registerElementType('modgrade', "$CFG->libdir/form/modgrade.php", 'MoodleQuickForm_modgrade');
MoodleQuickForm::registerElementType('modvisible', "$CFG->libdir/form/modvisible.php", 'MoodleQuickForm_modvisible');
MoodleQuickForm::registerElementType('password', "$CFG->libdir/form/password.php", 'MoodleQuickForm_password');

View File

@ -95,7 +95,7 @@ M.util.CollapsibleRegion = function(Y, id, userpref, strtooltip) {
// Get the caption for the collapsible region
var caption = this.div.one('#'+id + '_caption');
console.log('#'+id + '_caption');
// Create a link
var a = Y.Node.create('<a href="#"></a>');
a.setAttribute('title', strtooltip);

View File

@ -1079,3 +1079,66 @@ html[dir=rtl] .configphp {direction:ltr;text-align:left;}
table.flexible .r0, table.generaltable .r0 {background-color: #F0F0F0;}
table.flexible .r1, table.generaltable .r1 {background-color: #FAFAFA;}
/* Form element: listing */
.formlistingradio {padding-bottom: 25px; padding-right: 10px;}
.formlistinginputradio {float: left;}
.formlistingmain {min-height: 225px;}
.formlistingradiocontent {}
.formlisting {
position: relative;
margin: 15px 0;
padding: 1px 19px 14px;
background-color: white;
border: 1px solid #DDD;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.formlistingmore {
position: absolute;
cursor: pointer;
bottom: -1px;
right: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: whiteSmoke;
border: 1px solid #DDD;
color: #9DA0A4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
.formlistingall {
margin: 15px 0;
padding: 0px 0px 0px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/*background-color: #F7F7F9;
borde*/r: 1px solid #E1E1E8;
}
.formlistingrow {
cursor: pointer;
border-bottom: 1px solid;
border-color: #E1E1E8;
border-left: 1px solid #E1E1E8;
border-right: 1px solid #E1E1E8;
background-color: #F7F7F9;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
padding: 6px;
top: 50%;
left: 50%;
min-height: 34px;
float:left;
width: 150px;
}
body.jsenabled .formlistingradio {
display: none;
}