diff --git a/admin/registration/forms.php b/admin/registration/forms.php index af5357a5f39..6dbba8bfbc7 100644 --- a/admin/registration/forms.php +++ b/admin/registration/forms.php @@ -154,8 +154,10 @@ class hub_selector_form extends moodleform { $mform->addElement('static', 'or', '', get_string('orenterprivatehub', 'hub')); //Private hub - $mform->addElement('text', 'unlistedurl', get_string('privatehuburl', 'hub')); - $mform->addElement('text', 'password', get_string('password')); + $mform->addElement('text', 'unlistedurl', get_string('privatehuburl', 'hub'), + array('class' => 'registration_textfield')); + $mform->addElement('text', 'password', get_string('password'), + array('class' => 'registration_textfield')); $this->add_action_buttons(false, get_string('selecthub', 'hub')); } diff --git a/blocks/community/communitycourse.php b/blocks/community/communitycourse.php index 32c2681fe44..7206c3d31ab 100644 --- a/blocks/community/communitycourse.php +++ b/blocks/community/communitycourse.php @@ -215,16 +215,23 @@ if (!empty($errormessage)) { } //load javascript -$courseids = array(); +$commentedcourseids = array(); //result courses with comments only +$courseids = array(); //all result courses +$courseimagenumbers = array(); //number of screenshots of all courses (must be exact same order than $courseids) if (!empty($courses)) { foreach ($courses as $course) { if (!empty($course['comments'])) { - $courseids[] = $course['id']; + $commentedcourseids[] = $course['id']; } + $courseids[] = $course['id']; + $courseimagenumbers[] = $course['screenshots']; } } $PAGE->requires->yui_module('moodle-block_community-comments', 'M.blocks_community.init_comments', - array(array('commentids' => $courseids))); + array(array('commentids' => $commentedcourseids))); +$PAGE->requires->yui_module('moodle-block_community-imagegallery', 'M.blocks_community.init_imagegallery', + array(array('imageids' => $courseids, 'imagenumbers' => $courseimagenumbers, + 'huburl' => $huburl))); echo highlight($search, $renderer->course_list($courses, $huburl, $courseid)); diff --git a/blocks/community/renderer.php b/blocks/community/renderer.php index 7ce118deb9f..2ec75a96bc9 100644 --- a/blocks/community/renderer.php +++ b/blocks/community/renderer.php @@ -94,33 +94,21 @@ class block_community_renderer extends plugin_renderer_base { //create title html $coursename = html_writer::tag('h3', $course->fullname, array('class' => 'hubcoursetitle')); - $coursenamehtml = html_writer::tag('div', $coursename, array()); + $coursenamehtml = html_writer::tag('div', $coursename, + array('class' => 'hubcoursetitlepanel')); // create screenshots html $screenshothtml = ''; - if (!empty($course->screenshots)) { - $images = array(); $baseurl = new moodle_url($huburl . '/local/hub/webservice/download.php', array('courseid' => $course->id, 'filetype' => HUB_SCREENSHOT_FILE_TYPE)); - for ($i = 1; $i <= $course->screenshots; $i = $i + 1) { - $params['screenshotnumber'] = $i; - $images[] = array( - 'thumburl' => new moodle_url($baseurl, array('screenshotnumber' => $i)), - 'imageurl' => new moodle_url($baseurl, - array('screenshotnumber' => $i, 'imagewidth' => 'original')), - 'title' => $course->fullname, - 'alt' => $course->fullname - ); - } - $imagegallery = new image_gallery($images, $course->shortname); - $imagegallery->displayfirstimageonly = true; - $screenshothtml = $this->output->render($imagegallery); + $screenshothtml = html_writer::empty_tag('img', + array('src' => $baseurl, 'alt' => $course->fullname)); } $coursescreenshot = html_writer::tag('div', $screenshothtml, - array('class' => 'coursescreenshot')); - + array('class' => 'coursescreenshot', + 'id' => 'image-' . $course->id)); //create description html $deschtml = html_writer::tag('div', $course->description, diff --git a/blocks/community/styles.css b/blocks/community/styles.css index d5360b5d924..a1468b44ec3 100644 --- a/blocks/community/styles.css +++ b/blocks/community/styles.css @@ -21,7 +21,7 @@ /* COURSES RESULT */ #page-blocks-community-communitycourse .additionaldesc {font-size: 80%; color: #8B8989;} #page-blocks-community-communitycourse .comment-link {font-size: 80%; color: #555555;} -#page-blocks-community-communitycourse .coursescreenshot {text-align:center;} +#page-blocks-community-communitycourse .coursescreenshot {text-align:center;cursor: pointer;} #page-blocks-community-communitycourse .hubcourseinfo {margin-left: 15px;} #page-blocks-community-communitycourse .coursesitelink {} #page-blocks-community-communitycourse .pagingbar {text-align: center;} @@ -33,6 +33,7 @@ #page-blocks-community-communitycourse .hubcourserating { padding-top: 3px; font-size: 80%; color: #555555;} #page-blocks-community-communitycourse .coursedescription {width: 70%; float: left;} #page-blocks-community-communitycourse .fullhubcourse {margin-bottom: 20px;} +#page-blocks-community-communitycourse .hubcoursetitlepanel {margin-bottom: 6px;} #page-blocks-community-communitycourse .hubcourseresult { background:none repeat scroll 0 0 #FFFFFF; clear:both; @@ -153,3 +154,30 @@ #page-blocks-community-communitycourse .hubcourseoutcomes {} #page-blocks-community-communitycourse .nextlink {text-align: center;margin-top: 6px;} #page-blocks-community-communitycourse .textinfo {} + +#ss-mask { + z-index: 10; + position:fixed; + top:0; + left:0; + bottom:0; + right:0; + opacity:0.35; + filter:alpha(opacity:35); + background:#000; +} + +.hiddenoverlay { + display: none; + text-align: center; +} + +.imagearrow { + font-size: 120%; + display: inline; + cursor: pointer; +} +.imagetitle { + display: inline; + cursor: pointer; +} \ No newline at end of file diff --git a/blocks/community/yui/imagegallery/imagegallery.js b/blocks/community/yui/imagegallery/imagegallery.js new file mode 100644 index 00000000000..2a63b505885 --- /dev/null +++ b/blocks/community/yui/imagegallery/imagegallery.js @@ -0,0 +1,167 @@ +YUI.add('moodle-block_community-imagegallery', function(Y) { + + var IMAGEGALLERYNAME = 'blocks_community_imagegallery'; + + var IMAGEGALLERY = function() { + IMAGEGALLERY.superclass.constructor.apply(this, arguments); + }; + + Y.extend(IMAGEGALLERY, Y.Base, { + + event:null, + previousevent:null, + nextevent:null, + overlayevent:null, + overlay:null, //all the comment boxes + imageidnumbers: [], + imageloadingevent: null, + + initializer : function(params) { + + /// create the div for overlay + var objBody = Y.one(document.body); + var overlaytitle = Y.Node.create('
'); + objBody.append(overlaytitle); + var overlay = Y.Node.create('
'); + objBody.append(overlay); + + /// create the overlay + this.overlay = new M.core.dialogue({ + headerContent:Y.one('#imagetitleoverlay').get('innerHTML'), + bodyContent:Y.one('#imageoverlay').get('innerHTML'), + visible: false, //by default it is not displayed + lightbox : false, + zIndex:100 + }); + + this.overlay.render(); + this.overlay.hide(); + + //attach a show event on the image divs () + for (var i=0;i'); + objBody.prepend(mask); + this.set('maskNode', Y.one('#ss-mask')); + + var windowheight = e.target.get('winHeight'); + var windowwidth = e.target.get('winWidth'); + + var maxheight = windowheight - 150; + + //load the title + link to next image + var overlaytitle = Y.one('#imagetitleoverlay'); + var previousimagelink = "
"; + var nextimagelink = "
"; + + /// need to load the images in the overlay + var overlay = Y.one('#imageoverlay'); + overlay.setContent(''); + + + overlay.append(Y.Node.create('
')); + this.overlay.destroy(); + this.overlay = new M.core.dialogue({ + headerContent:previousimagelink + '
Image ' + + screennumber + ' / ' + this.imageidnumbers[imageid] + '
' + nextimagelink, + bodyContent:Y.one('#imageoverlay').get('innerHTML'), + visible: false, //by default it is not displayed + lightbox : false, + zIndex:100, + width: windowwidth - 100 + }); + this.overlay.render(); + this.overlay.show(); //show the overlay + this.overlay.set("centered", true); + + e.halt(); // we are going to attach a new 'hide overlay' event to the body, + // because javascript always propagate event to parent tag, + // we need to tell Yahoo to stop to call the event on parent tag + // otherwise the hide event will be call right away. + + this.imageloadingevent = Y.one('#imagetodisplay').on('load', function(e){ + this.overlay.set("centered", true) + }, this); + + var previousnumber = screennumber - 1; + var nextnumber = screennumber + 1; + if (previousnumber == 0) { + previousnumber = this.imageidnumbers[imageid]; + } + if (nextnumber > this.imageidnumbers[imageid]) { + nextnumber = 1; + } + + Y.one('#previousarrow').on('click', this.show, this, imageid, previousnumber); + Y.one('#nextarrow').on('click', this.show, this, imageid, nextnumber); + Y.one('#imagenumber').on('click', this.show, this, imageid, nextnumber); + + //we add a new event on the body in order to hide the overlay for the next click + this.event = Y.one(document.body).on('click', this.hide, this); + //we add a new event on the overlay in order to hide the overlay for the next click (touch device) + this.overlayevent = Y.one("#imageoverlay").on('click', this.hide, this); + + this.overlay.on('visibleChange',function(e){ + if(e.newVal == 0){ + this.get('maskNode').remove() + } + }, this); + }, + + hide : function (e) { + + // remove the mask + this.get('maskNode').remove(); + + this.overlay.hide(); //hide the overlay + if (this.event != null) { + this.event.detach(); //we need to detach the body hide event + //Note: it would work without but create js warning everytime + //we click on the body + } + if (this.overlayevent != null) { + this.overlayevent.detach(); //we need to detach the overlay hide event + //Note: it would work without but create js warning everytime + //we click on the body + } + } + + }, { + NAME : IMAGEGALLERYNAME, + ATTRS : { + imageids: {}, + imagenumbers: {}, + huburl: {} + } + }); + + M.blocks_community = M.blocks_community || {}; + M.blocks_community.init_imagegallery = function(params) { + return new IMAGEGALLERY(params); + } + +}, '@VERSION@', { + requires:['base','node','overlay', 'moodle-enrol-notification'] +}); \ No newline at end of file diff --git a/course/publish/forms.php b/course/publish/forms.php index 7c3a0f5e5cc..74a327286f6 100644 --- a/course/publish/forms.php +++ b/course/publish/forms.php @@ -99,6 +99,7 @@ class course_publication_form extends moodleform { $course = $this->_customdata['course']; $advertise = $this->_customdata['advertise']; $share = $this->_customdata['share']; + $page = $this->_customdata['page']; $site = get_site(); //hidden parameters @@ -153,6 +154,12 @@ class course_publication_form extends moodleform { $defaultcreatornotes = $publishedcourse['creatornotes']; $screenshotsnumber = $publishedcourse['screenshots']; $privacy = $publishedcourse['privacy']; + + $page->requires->yui_module('moodle-block_community-imagegallery', + 'M.blocks_community.init_imagegallery', + array(array('imageids' => array($hubcourseid), + 'imagenumbers' => array($screenshotsnumber), + 'huburl' => $huburl))); } else { $defaultfullname = $course->fullname; $defaultshortname = $course->shortname; @@ -199,7 +206,7 @@ class course_publication_form extends moodleform { $mform->addElement('hidden', 'share', $share); $mform->addElement('text', 'demourl', get_string('demourl', 'hub'), - array('class' => 'metadatatext')); + array('class' => 'metadatatext')); $mform->setType('demourl', PARAM_URL); $mform->setDefault('demourl', new moodle_url("/course/view.php?id=" . $course->id)); $mform->addHelpButton('demourl', 'demourl', 'hub'); @@ -333,20 +340,13 @@ class course_publication_form extends moodleform { if (!empty($screenshotsnumber)) { if (!empty($privacy)) { - $images = array(); - $baseurl = new moodle_url($huburl . '/local/hub/webservice/download.php', array('courseid' => $hubcourseid, 'filetype' => HUB_SCREENSHOT_FILE_TYPE)); - for ($i = 1; $i <= $screenshotsnumber; $i = $i + 1) { - $params['screenshotnumber'] = $i; - $images[] = array( - 'thumburl' => new moodle_url($baseurl, array('screenshotnumber' => $i)), - 'imageurl' => new moodle_url($baseurl, array('screenshotnumber' => $i, 'imagewidth' => 'original')), - 'title' => $defaultfullname, - 'alt' => $defaultfullname - ); - } - $imagegallery = new image_gallery($images, $defaultshortname); - $imagegallery->displayfirstimageonly = true; - $screenshothtml = $OUTPUT->render($imagegallery); + $baseurl = new moodle_url($huburl . '/local/hub/webservice/download.php', + array('courseid' => $hubcourseid, 'filetype' => HUB_SCREENSHOT_FILE_TYPE)); + $screenshothtml = html_writer::empty_tag('img', + array('src' => $baseurl, 'alt' => $defaultfullname)); + $screenshothtml = html_writer::tag('div', $screenshothtml, + array('class' => 'coursescreenshot', + 'id' => 'image-' . $hubcourseid)); } else { $screenshothtml = get_string('existingscreenshotnumber', 'hub', $screenshotsnumber); } @@ -380,4 +380,4 @@ class course_publication_form extends moodleform { } } -?> + diff --git a/course/publish/metadata.php b/course/publish/metadata.php index 4e34c0aced1..c5046022c3a 100644 --- a/course/publish/metadata.php +++ b/course/publish/metadata.php @@ -79,7 +79,7 @@ if (has_capability('moodle/course:publish', get_context_instance(CONTEXT_COURSE, $coursepublicationform = new course_publication_form('', array('huburl' => $huburl, 'hubname' => $hubname, 'sesskey' => sesskey(), 'course' => $course, 'advertise' => $advertise, 'share' => $share, - 'id' => $id)); + 'id' => $id, 'page' => $PAGE)); $fromform = $coursepublicationform->get_data(); if (!empty($fromform)) { diff --git a/theme/canvas/style/core.css b/theme/canvas/style/core.css index ee3602001f5..f431a468cdc 100644 --- a/theme/canvas/style/core.css +++ b/theme/canvas/style/core.css @@ -674,3 +674,6 @@ padding: 0 .path-enrol .enrolcohortbutton {float:left;} .path-enrol .enrolusersbutton.instance1, .path-enrol .enrolcohortbutton.instance1 {float:right;} + +/* Registration */ +#page-admin-registration-hubselector .registration_textfield {width: 400px;} \ No newline at end of file diff --git a/theme/standard/style/core.css b/theme/standard/style/core.css index 3e103d006e4..7bef837a81e 100644 --- a/theme/standard/style/core.css +++ b/theme/standard/style/core.css @@ -430,3 +430,6 @@ table#tag-management-list {margin: 10px auto;width: 80%;} .path-enrol .enrolusersbutton.instance1, .path-enrol .enrolcohortbutton.instance1, .path-enrol .assignuserrole.instance1 {float:right;} + +/* Registration */ +#page-admin-registration-hubselector .registration_textfield {width: 400px;} \ No newline at end of file