Sebschlicht2 has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/342621 )
Change subject: clickable unit video thumb
......................................................................
clickable unit video thumb
In this change, thumbnails of videos are made clickable both when
a video is set and if not. This is made possible using the HTML tag
for links, providing the best usability for users.
Furthermore, video thumbnails have been made responsive.
Change-Id: Ibf797ca4d30ec42a3d8d08e4418da06a657a9be3
---
M includes/model/MoocItem.php
M includes/rendering/MoocLessonRenderer.php
M resources/js/ext.mooc.js
M resources/less/ext.mooc.less
4 files changed, 66 insertions(+), 39 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MOOC
refs/changes/21/342621/1
diff --git a/includes/model/MoocItem.php b/includes/model/MoocItem.php
index ef27070..fb3cb32 100644
--- a/includes/model/MoocItem.php
+++ b/includes/model/MoocItem.php
@@ -103,7 +103,14 @@
}
/**
- * @return boolean whether the item has children
+ * @return bool whether the item has a video
+ */
+ public function hasVideo() {
+ return isset( $this->video );
+ }
+
+ /**
+ * @return bool whether the item has children
*/
public function hasChildren() {
return !empty( $this->children );
diff --git a/includes/rendering/MoocLessonRenderer.php
b/includes/rendering/MoocLessonRenderer.php
index 8a23ac0..13f0555 100644
--- a/includes/rendering/MoocLessonRenderer.php
+++ b/includes/rendering/MoocLessonRenderer.php
@@ -57,48 +57,54 @@
*
* @param MoocItem $unit unit to add
*/
- protected function addChildUnit($unit) {
- $this->out->addHTML('<div class="child unit col-xs-12">');
+ protected function addChildUnit( $unit ) {
+ $this->out->addHTML( '<div class="child unit col-xs-12">' );
- $this->out->addHTML('<div class="left col-xs-12 col-sm-5">');
- // video thumbnail
- $this->out->addHTML('<div class="video-thumbnail">');
- if (isset($unit->video)) {
- // TODO re-calc max width
- $this->out->addWikiText('[[File:' . $unit->video .
'|frameless|300x170px|link=' . $unit->title . ']]');
- } else {
- // TODO make clickable without JS
- $this->out->addHTML('<span>' . $this->loadMessage('unit-no-video')
. '</span>');
+ // left column: clickable video thumbnail
+ $this->out->addHTML( '<div class="left col-xs-12 col-sm-5">' );
+ $videoThumbClasses = 'video-thumbnail';
+ if ( !$unit->hasVideo() ) {
+ $videoThumbClasses .= ' no-video';
}
- $this->out->addHTML('</div>');
- $this->out->addHTML('</div>');
- $this->parserOutput->addLink($unit->title);
+ $this->out->addHTML( "<a href='{$unit->title->getLinkURL()}'
class='$videoThumbClasses'>" );
+ if ( $unit->hasVideo() ) {
+ // TODO what is the max-width here? fine to use fixed width?
+ $this->out->addWikiText(
"[[File:$unit->video|frameless|300x170px|link=$unit->title]]" );
+ } else {
+ $this->out->addHTML( "<span>{$this->loadMessage( 'unit-no-video'
)}</span>" );
+ }
+ $this->out->addHTML( '</a>' );
+ $this->out->addHTML( '</div>' );
- $this->out->addHTML('<div class="col-xs-12 col-sm-7">');
+ // right column: links, clickable title, learning goals
+ $this->out->addHTML( '<div class="col-xs-12 col-sm-7">' );
// links
- $this->addChildLinkBar($unit);
+ $this->addChildLinkBar( $unit );
// title
- $this->out->addHTML('<div class="title">');
- $this->out->addWikiText('[[' . $unit->title . '|'.
$unit->title->getSubpageText() . ']]');
- $this->out->addHTML('</div>');
+ $this->out->addHTML( '<div class="title">' );
+ $this->out->addWikiText(
"[[$unit->title|{$unit->title->getSubpageText()}]]" );
+ $this->out->addHTML( '</div>' );
// learning goals
- $this->out->addHTML('<div class="learning-goals">');
- $learningGoals = $this->generateLearningGoalsWikiText($unit);
- if ($learningGoals != null) {
- $this->out->addWikiText($learningGoals);
+ $this->out->addHTML( '<div class="learning-goals">' );
+ $learningGoals = $this->generateLearningGoalsWikiText( $unit );
+ if ( $learningGoals !== null ) {
+ $this->out->addWikiText( $learningGoals );
} else {
- $this->out->addHTML($this->loadMessage('section-' .
'learning-goals' . '-empty-description'));
+ $this->out->addHTML( $this->loadMessage( 'section-' .
'learning-goals' . '-empty-description' ) );
}
- $this->out->addHTML('</div>');
+ $this->out->addHTML( '</div>' );
- // meta TODO add discussion meta data overlay
+ // meta TODO add discussion meta data overlay?
- $this->out->addHTML('</div>');
+ $this->out->addHTML( '</div>' );
- $this->out->addHTML('</div>');
+ $this->out->addHTML( '</div>' );
+
+ // register external link to unit
+ $this->parserOutput->addLink( $unit->title );
}
/**
diff --git a/resources/js/ext.mooc.js b/resources/js/ext.mooc.js
index 6e1ccf5..e0e9ee5 100644
--- a/resources/js/ext.mooc.js
+++ b/resources/js/ext.mooc.js
@@ -51,15 +51,10 @@
}
// make video a thumb
- var unitVideoThumbSrc = $unitVideo.attr( 'poster' );
- var $unitVideoThumbLink = $( '<a>', {
- 'href': getUnitLinkHref( $unit )
- } );
var $unitVideoThumb = $( '<img>', {
- 'src': unitVideoThumbSrc
+ 'src': $unitVideo.attr( 'poster' )
} );
- $unitVideoThumbLink.append( $unitVideoThumb );
- $unitVideo.replaceWith( $unitVideoThumbLink );
+ $unitVideo.replaceWith( $unitVideoThumb );
}
} );
@@ -373,7 +368,7 @@
$mwNavButton.attr( 'src', '/mediawiki-vagrant.png' );
$mwNavButton.on( 'click', mwNavigationButtonClicked );
//$mwNavButton.insertBefore( $mwNavigation );
- hideMwNavigation( $mwNavigation );
+ //hideMwNavigation( $mwNavigation );
function mwNavigationButtonClicked() {
if ( $mwNavigation.hasClass( 'hidden' ) ) {
diff --git a/resources/less/ext.mooc.less b/resources/less/ext.mooc.less
index 94dbec0..02e54a5 100644
--- a/resources/less/ext.mooc.less
+++ b/resources/less/ext.mooc.less
@@ -6,6 +6,7 @@
@import "elements.less";
// COLORS
+@cText: #000;
@cContentBg: #FFF;
@cSectionBg: #CCC;
@cNavigationBarBg: #FFF;
@@ -20,6 +21,14 @@
// DIMENSIONS
@hCollapsedSection: 200px; // warning: when altering this value, update
ext.mooc.js:hCollapsedSection as well
@hCollapsedSectionOverlay: 50px; // height of the 'Read more' overlay
+
+#mooc {
+ // make images responsive
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+}
#mooc-sections {
padding-bottom: 39px;
@@ -246,22 +255,32 @@
.left {
padding: 0;
}
+ // video thumbnail
.video-thumbnail {
- display: table;
+ display: block;
border: 1px solid @cSectionBorder;
max-width: 100%;
width: 300px;
height: 170px;
- cursor: pointer;
text-align: center;
.mediaContainer, video {
max-width: 100%;
}
+ }
+ // no video available
+ .no-video {
+ display: table;
span {
display: table-cell;
vertical-align: middle;
+ color: @cText;
}
}
+ a.video-thumbnail:hover,
+ a.video-thumbnail:focus {
+ color: @cText;
+ text-decoration: none;
+ }
.links {
a {
display: inline-block;
--
To view, visit https://gerrit.wikimedia.org/r/342621
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ibf797ca4d30ec42a3d8d08e4418da06a657a9be3
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MOOC
Gerrit-Branch: master
Gerrit-Owner: Sebschlicht2 <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
