Skip to content

E
edx-platform
Commit 73205131 by Giulio Gratta
Options

Merge pull request #2362 from edx/giulio/image-modal-squash 

Image Modal CMS HTML Block subtype
parents b1e5bbb8 5e67612e
Showing with 321 additions and 0 deletions
cms/templates/unit.html
......@@ -4,6 +4,7 @@ from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
from xmodule.modulestore.django import loc_mapper
%>
<%namespace name='static' file='static_content.html'/>
<%namespace name="units" file="widgets/units.html" />
<%block name="title">${_("Individual Unit")}</%block>
<%block name="bodyclass">is-signedin course unit view-unit</%block>
......@@ -31,6 +32,10 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
});
});
</script>
<script type="text/template" id="image-modal-tpl">
<%static:include path="js/imageModal.underscore" />
</script>
</%block>
<%block name="content">
......@@ -207,5 +212,7 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
</div>
</div>
</div>
</%block>
common/lib/xmodule/xmodule/css/html/display.scss
......@@ -145,3 +145,148 @@ th {
background: #eee;
font-weight: bold;
}
// image modal
// --------------------
// modal - image zoom, fill window
.wrapper-modal-image {
.modal-ui-icon {
position: absolute;
display: block;
padding: 5px 7px;
cursor: pointer;
border-radius: 5px;
opacity: .9;
background: $white;
color: $black;
border: 2px solid $black;
.label {
font-weight: bold;
}
i {
font-style: normal;
}
}
.image-link {
position: relative;
display: block;
cursor: pointer;
.action-fullscreen {
display: none;
top: 10px;
left: 10px;
}
&:hover .action-fullscreen {
display: block;
}
}
.image-modal {
position: fixed;
top: 0;
left: 0;
display: none;
height: 100%;
width: 100%;
@extend %ui-depth5;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7);
.image-content {
position: relative;
top: 2.5%;
display: block;
height: 95%;
width: 95%;
margin: auto;
overflow: hidden;
.image-wrapper {
position: relative;
img {
position: relative;
display: block;
max-width: 100%;
max-height: 100%;
margin: auto;
cursor: default;
}
}
.action-close {
top: 10px;
right: 10px;
}
.image-controls {
position: absolute;
right: 10px;
bottom: 10px;
margin: 0;
padding: 0;
list-style: none;
.image-control {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
.modal-ui-icon {
position: relative;
&.action-zoom-in {
margin-right: 5px;
}
&.action-zoom-out {
margin-left: 5px;
}
&.is-disabled {
opacity: .5;
cursor: default;
}
}
}
}
}
&.image-is-fit-to-screen {
display: block;
// !important used here to override jQuery.
.image-content .image-wrapper {
top: 0 !important;
left: 0 !important;
width: auto !important;
height: auto !important;
img {
top: 0 !important;
left: 0 !important;
}
}
}
&.image-is-zoomed {
display: block;
.image-content .image-wrapper {
img {
max-width: none;
max-height: none;
margin: 0;
cursor: move;
}
}
}
}
}
\ No newline at end of file
common/lib/xmodule/xmodule/html_module.py
......@@ -44,6 +44,10 @@ class HtmlModule(HtmlFields, XModule):
resource_string(__name__, 'js/src/javascript_loader.coffee'),
resource_string(__name__, 'js/src/collapsible.coffee'),
resource_string(__name__, 'js/src/html/display.coffee')
],
'js': [
resource_string(__name__, 'js/src/html/imageModal.js'),
resource_string(__name__, 'js/common_static/js/vendor/draggabilly.pkgd.js')
]
}
js_module_name = "HTMLModule"
......
common/lib/xmodule/xmodule/js/src/html/imageModal.js 0 → 100644
$(function() {
// Set up on page load
$("a.modal-content").each(function() {
var smallImageObject = $(this).children();
var largeImageSRC = $(this).attr('href');
// if contents of zoomable link is image and large image link exists: setup modal
if (smallImageObject.is('img') && largeImageSRC) {
var data = {
"smallHTML": $(this).html(),
"largeALT": smallImageObject.attr('alt'),
"largeSRC": largeImageSRC
};
var html = _.template($("#image-modal-tpl").text(), data);
$(this).replaceWith(html);
}
});
$('.wrapper-modal-image .image-wrapper img').each(function() {
var draggie = new Draggabilly(this, {containment: true});
draggie.disable();
$(this).closest('.image-modal').data("draggie", draggie);
});
// Opening and closing image modal on clicks
$(".wrapper-modal-image .image-link").click(function() {
$(this).siblings(".image-modal").addClass('image-is-fit-to-screen');
$('body').css('overflow', 'hidden');
});
// variable to detect when modal is being "hovered".
// Done this way as jquery doesn't support the :hover psudo-selector as expected.
var imageModalImageHover = false;
$(".wrapper-modal-image .image-content img, .wrapper-modal-image .image-content .image-controls").hover(function() {
imageModalImageHover = true;
}, function() {
imageModalImageHover = false;
});
// prevent image control button links from scrolling
$(".modal-ui-icon").click(function(event) {
event.preventDefault();
});
//Define function to close modal
function closeModal(imageModal) {
imageModal.removeClass('image-is-fit-to-screen').removeClass('image-is-zoomed');
$(".wrapper-modal-image .image-content .image-controls .modal-ui-icon.action-zoom-in").removeClass('is-disabled');
$(".wrapper-modal-image .image-content .image-controls .modal-ui-icon.action-zoom-out").addClass('is-disabled');
var currentDraggie = imageModal.data("draggie");
currentDraggie.disable();
$('body').css('overflow', 'auto');
}
// Click outside of modal to close it.
$(".wrapper-modal-image .image-modal").click(function() {
if (!imageModalImageHover){
closeModal($(this));
}
});
// Click close icon to close modal.
$(".wrapper-modal-image .image-content .action-remove").click(function() {
closeModal($(this).closest(".image-modal"));
});
// zooming image in modal and allow it to be dragged
// Make sure it always starts zero position for below calcs to work
$(".wrapper-modal-image .image-content .image-controls .modal-ui-icon").click(function() {
if (!$(this).hasClass('is-disabled')) {
var mask = $(this).closest(".image-content");
var imageModal = $(this).closest(".image-modal");
var img = imageModal.find("img");
var currentDraggie = imageModal.data("draggie");
if ($(this).hasClass('action-zoom-in')) {
imageModal.removeClass('image-is-fit-to-screen').addClass('image-is-zoomed');
var imgWidth = img.width();
var imgHeight = img.height();
var imgContainerOffsetLeft = imgWidth - mask.width();
var imgContainerOffsetTop = imgHeight - mask.height();
var imgContainerWidth = imgWidth + imgContainerOffsetLeft;
var imgContainerHeight = imgHeight + imgContainerOffsetTop;
// Set the width and height of the image's container so that the dimensions are equal to the image dimensions + view area dimensions to limit dragging
// Set image container top and left to center image at load.
img.parent().css({
left: -imgContainerOffsetLeft,
top: -imgContainerOffsetTop,
width: imgContainerWidth,
height: imgContainerHeight
});
img.css({top: imgContainerOffsetTop / 2, left: imgContainerOffsetLeft / 2});
currentDraggie.enable();
} else if ($(this).hasClass('action-zoom-out')) {
imageModal.removeClass('image-is-zoomed').addClass('image-is-fit-to-screen');
currentDraggie.disable();
}
$(".wrapper-modal-image .image-content .image-controls .modal-ui-icon").toggleClass('is-disabled');
}
});
});
\ No newline at end of file
common/lib/xmodule/xmodule/templates/html/image_modal.yaml 0 → 100644
---
metadata:
display_name: Image Modal
data: |
<h2>Title of Unit (click image to zoom)</h2>
<a href="http://static.class.stanford.edu/stanford-hills-big.jpg" class="modal-content"><img alt="The Stanford Hills" src="http://static.class.stanford.edu/stanford-hills-small.jpg" /></a>
\ No newline at end of file
common/templates/js/imageModal.underscore 0 → 100644
<div class="wrapper-modal wrapper-modal-image">
<section class="image-link">
<%= smallHTML%>
<a href="#" class="modal-ui-icon action-fullscreen" role="button">
<span class="label">
<i class="icon-fullscreen icon-large"></i> <%= gettext("Fullscreen") %>
</span>
</a>
</section>
<section class="image-modal">
<section class="image-content">
<div class="image-wrapper">
<img alt="<%= largeALT %>, <%= gettext('Large') %>" src="<%= largeSRC %>" />
</div>
<a href="#" class="modal-ui-icon action-close" role="button">
<span class="label">
<i class="icon-remove icon-large"></i> <%= gettext("Close") %>
</span>
</a>
<ul class="image-controls">
<li class="image-control">
<a href="#" class="modal-ui-icon action-zoom-in" role="button">
<span class="label">
<i class="icon-zoom-in icon-large"></i> <%= gettext("Zoom In") %>
</span>
</a>
</li>
<li class="image-control">
<a href="#" class="modal-ui-icon action-zoom-out is-disabled" role="button">
<span class="label">
<i class="icon-zoom-out icon-large"></i> <%= gettext("Zoom Out") %>
</span>
</a>
</li>
</ul>
</section>
</section>
</div>
\ No newline at end of file
lms/templates/courseware/courseware.html
......@@ -167,6 +167,10 @@ ${page_title_breadcrumbs(course_name())}
</script>
% endif
<script type="text/template" id="image-modal-tpl">
<%static:include path="js/imageModal.underscore" />
</script>
${fragment.foot_html()}
</%block>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment