mirror of
https://github.com/moodle/moodle.git
synced 2025-03-14 04:30:15 +01:00
image gallery MDL-24773 replace external image gallery library calls with a new image gallery created in community block
This commit is contained in:
jerome mouneyrac
parent
b67aa230f3
commit
20e033bd34
@ -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'));
|
||||
}
|
||||
|
||||
@ -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));
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
167
blocks/community/yui/imagegallery/imagegallery.js
vendored
Normal file
167
blocks/community/yui/imagegallery/imagegallery.js
vendored
Normal file
@ -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('<div id="imagetitleoverlay" class="hiddenoverlay"></div>');
|
||||
objBody.append(overlaytitle);
|
||||
var overlay = Y.Node.create('<div id="imageoverlay" class="hiddenoverlay"></div>');
|
||||
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 (<tag id='image-X'>)
|
||||
for (var i=0;i<this.get('imageids').length;i++)
|
||||
{
|
||||
var imageid = this.get('imageids')[i];
|
||||
this.imageidnumbers[imageid] = this.get('imagenumbers')[i];
|
||||
Y.one('#image-'+imageid).on('click', this.show, this, imageid, 1);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
show : function (e, imageid, screennumber) {
|
||||
|
||||
if (this.imageloadingevent != null) {
|
||||
this.imageloadingevent.detach();
|
||||
}
|
||||
|
||||
var url = this.get('huburl') + "/local/hub/webservice/download.php?courseid="
|
||||
+ imageid + "&filetype=screenshot&imagewidth=original&screenshotnumber=" + screennumber;
|
||||
|
||||
/// set the mask
|
||||
if (this.get('maskNode')) {
|
||||
this.get('maskNode').remove();
|
||||
}
|
||||
var objBody = Y.one(document.body);
|
||||
var mask = Y.Node.create('<div id="ss-mask"><!-- --></div>');
|
||||
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 = "<div id=\"previousarrow\" class=\"imagearrow\">←</div>";
|
||||
var nextimagelink = "<div id=\"nextarrow\" class=\"imagearrow\">→</div>";
|
||||
|
||||
/// need to load the images in the overlay
|
||||
var overlay = Y.one('#imageoverlay');
|
||||
overlay.setContent('');
|
||||
|
||||
|
||||
overlay.append(Y.Node.create('<div style="text-align:center"><img id=\"imagetodisplay\" src="' + url
|
||||
+ '" style="max-height:' + maxheight + 'px;"></div>'));
|
||||
this.overlay.destroy();
|
||||
this.overlay = new M.core.dialogue({
|
||||
headerContent:previousimagelink + '<div id=\"imagenumber\" class=\"imagetitle\"> Image '
|
||||
+ screennumber + ' / ' + this.imageidnumbers[imageid] + ' </div>' + 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']
|
||||
});
|
||||
@ -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 {
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
@ -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)) {
|
||||
|
||||
@ -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;}
|
||||
@ -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;}
|
||||
Loading…
x
Reference in New Issue
Block a user