diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss index 2dea924c..c2fa6a77 100644 --- a/src/layout/css/style.scss +++ b/src/layout/css/style.scss @@ -141,6 +141,7 @@ div.image { margin-left: $spacing; overflow: hidden; width: $extra-media-width; + cursor: zoom-in; img { width: $extra-media-width; @@ -215,3 +216,28 @@ div.video { border-top: $triangle-width solid #999; } } + + +/*--------------------------- + * 4. Zoom in self-contained + *---------------------------*/ + +#large { + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + position: fixed; + margin: auto; + overflow: scroll; + cursor: zoom-out; + background: rgba(0,0,0,0.5) no-repeat center; + + img { + display: block; + margin-left: auto; + margin-right: auto; + } +} diff --git a/src/pytest_html/html_report.py b/src/pytest_html/html_report.py index 045c52c1..afa57e26 100644 --- a/src/pytest_html/html_report.py +++ b/src/pytest_html/html_report.py @@ -201,6 +201,9 @@ def _generate_report(self, session): body.extend(results) + if self.self_contained: + body.append(html.div(html.img(), id="large", onclick="zoomOut()")) + doc = html.html(head, body) unicode_doc = "\n{}".format(doc.unicode(indent=2)) diff --git a/src/pytest_html/resources/main.js b/src/pytest_html/resources/main.js index a2e49d37..7511c81d 100644 --- a/src/pytest_html/resources/main.js +++ b/src/pytest_html/resources/main.js @@ -111,6 +111,23 @@ function addCollapse() { }); } +function zoomIn(event) { + const large = find('#large'); + find('img', large).setAttribute('src', event.target.getAttribute('src')); + large.style.display = 'block'; + large.scrollTop = 0; +} + +function zoomOut() { // eslint-disable-line no-unused-vars + find('#large').style.display = 'none'; +} + +function addZoomIn() { + findAll('.image img').forEach(function(elem) { + elem.addEventListener('click', zoomIn); + }); +} + function getQueryParameter(name) { const match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); @@ -121,6 +138,8 @@ function init () { // eslint-disable-line no-unused-vars addCollapse(); + addZoomIn(); + showFilters(); sortColumn(find('.initial-sort')); diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css index 3edac88e..8c54c933 100644 --- a/src/pytest_html/resources/style.css +++ b/src/pytest_html/resources/style.css @@ -117,6 +117,7 @@ div.image { margin-left: 5px; overflow: hidden; width: 320px; + cursor: zoom-in; } div.image img { width: 320px; @@ -184,3 +185,26 @@ div.video video { /*finish triangle*/ border-top: 8px solid #999; } + +/*--------------------------- + * 4. Zoom in self-contained + *---------------------------*/ +#large { + display: none; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + position: fixed; + margin: auto; + overflow: scroll; + cursor: zoom-out; + background: rgba(0,0,0,0.5) no-repeat center; +} + +#large img { + display: block; + margin-left: auto; + margin-right: auto; +}