Commit 0d8d5731 authored by gijs's avatar gijs

Arrows in image gallery, transition for panel slide

parent d9ea5d8e
......@@ -262,6 +262,7 @@ h3 {
[data-panel] {
position: relative;
transition: left .2s;
}
[data-panel] .scroll-wrapper {
......@@ -301,6 +302,42 @@ h3 {
}
[data-container-panel-toggle] {
position: absolute;
height: 50px;
width: calc(50% - 2em);
bottom: 0;
z-index: 3;
color: white;
cursor: pointer;
transition: padding .2s;
}
/*
If there is a container unactive up in the tree hide the toggles
*/
[data-active="false"] [data-container-panel-toggle],
[data-container-panel-toggle][data-active="false"] {
display: none;
}
[data-container-panel-toggle] img {
width: 50px;
}
[data-container-panel-toggle="previous"] {
text-align: left;
left: 0px;
padding: 1em 0 0 2em;
}
[data-container-panel-toggle="next"] {
text-align: right;
right: 0;
padding: 1em 2em 0 0;
}
/** Page images ************* */
.page-images {
margin-top: 1em;
......
......@@ -344,6 +344,7 @@ div.social {
/* vertical-align: top; */
white-space: normal;
flex: 0 0 80vw;
transition: left .2s;
}
[data-panel] .scroll-wrapper {
......@@ -366,6 +367,7 @@ div.social {
[data-panel-position="right"] > .panel-toggle {
background: linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,.75) 75%);
}
/*
#detail-photo [data-panel-position="left"] > .panel-toggle {
......@@ -441,6 +443,41 @@ div.social {
}
[data-container-panel-toggle] {
position: absolute;
height: 50px;
width: calc(50% - 2em);
bottom: 0;
z-index: 3;
color: white;
cursor: pointer;
transition: padding .2s;
}
/*
If there is a container unactive up in the tree hide the toggles
*/
[data-active="false"] [data-container-panel-toggle],
[data-container-panel-toggle][data-active="false"] {
display: none;
}
[data-container-panel-toggle] img {
width: 50px;
}
[data-container-panel-toggle="previous"] {
text-align: left;
left: 0px;
padding: 1em 0 0 2em;
}
[data-container-panel-toggle="next"] {
text-align: right;
right: 0;
padding: 1em 2em 0 0;
}
.toggle {
display: none;
}
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg10587"
version="1.1"
viewBox="0 0 15.928489 6.375649"
height="6.375649mm"
width="15.928489mm">
<defs
id="defs10581" />
<metadata
id="metadata10584">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(274.81543,-33.764555)"
id="layer1">
<g
transform="matrix(-0.26458333,0,0,0.26458333,4895.449,-552.74502)"
id="g7361-3-9"
style="display:inline;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-miterlimit:4;stroke-dasharray:none">
<g
style="stroke-width:2px;vector-effect:non-scaling-stroke;stroke-miterlimit:4;stroke-dasharray:none"
id="g7357-5-7">
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 19512.702,2217.7379 c 3.398,2.6371 7.113,4.8661 11.039,6.6238 5.189,2.3233 10.748,3.8198 16.402,4.4159"
id="path7353-6-5" />
<path
id="path7355-2-4"
d="m 19512.702,2239.8173 c 3.398,-2.6371 7.113,-4.8661 11.039,-6.6238 5.189,-2.3233 10.748,-3.8198 16.402,-4.4159"
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 19540.143,2228.7776 h -59.188"
id="path7359-9-4" />
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg9335"
version="1.1"
viewBox="0 0 15.928489 6.375649"
height="6.375649mm"
width="15.928489mm">
<defs
id="defs9329" />
<metadata
id="metadata9332">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(194.68445,71.312825)"
id="layer1">
<g
transform="matrix(0.26458333,0,0,0.26458333,-5349.0204,-657.8224)"
id="g7361-3"
style="display:inline;stroke-width:3x;vector-effect:non-scaling-stroke;stroke-miterlimit:4;stroke-dasharray:none">
<g
style="stroke-width:2px;vector-effect:non-scaling-stroke;stroke-miterlimit:4;stroke-dasharray:none"
id="g7357-5">
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 19512.702,2217.7379 c 3.398,2.6371 7.113,4.8661 11.039,6.6238 5.189,2.3233 10.748,3.8198 16.402,4.4159"
id="path7353-6" />
<path
id="path7355-2"
d="m 19512.702,2239.8173 c 3.398,-2.6371 7.113,-4.8661 11.039,-6.6238 5.189,-2.3233 10.748,-3.8198 16.402,-4.4159"
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 19540.143,2228.7776 h -59.188"
id="path7359-9" />
</g>
</g>
</svg>
......@@ -12,6 +12,11 @@
}
}
function shiftContainer (container, shift) {
translateContainer(container, shift - getShift(container));
container.dataset.shift = shift;
}
function getSetRect (set) {
var left = Infinity, right = -Infinity;
......@@ -75,6 +80,17 @@
return 0;
}
function getShift(container) {
if ('shift' in container.dataset) {
var shift = parseInt(container.dataset.shift);
if (! isNaN(shift)) {
return shift;
}
}
return 0;
}
function getPanelByName(name) {
return document.querySelector('[data-panel="' + name + '"]');
}
......@@ -114,7 +130,6 @@
return null;
}
// Moves given panel into view
function showPanel(panel, force) {
var container = findPanelContainer(panel),
......@@ -131,11 +146,17 @@
}
}
var desired = (viewportRect.left - panelRect.left) + 0.5 * (viewportRect.width - panelRect.width),
lowerbound = viewportRect.right - contentRect.right,
upperbound = viewportRect.left - contentRect.left,
translation = Math.max(Math.min(desired, upperbound), lowerbound);
var shift = getShift(container),
desired = ((viewportRect.left - panelRect.left) + 0.5 * (viewportRect.width - panelRect.width)) + shift, //getShift(container),
lowerbound = (viewportRect.right - contentRect.right) + shift, // getShift(container),
upperbound = (viewportRect.left - contentRect.left) + shift, //getShift(container),
translation = Math.max(Math.min(desired, upperbound), lowerbound),
next = false,
nextLeft = Infinity;
previous = false;
previousLeft = -Infinity;
var panels = getPanels(container);
for (var i =0; i < panels.length; i++) {
if (panels[i] === panel || (set && set === panels[i].dataset.panelSet)) {
......@@ -143,10 +164,19 @@
}
else {
panels[i].dataset.active = 'false';
if (panels[i].getBoundingClientRect().left < panelRect.left) {
var candidateLeft = panels[i].getBoundingClientRect().left
if (candidateLeft < panelRect.left) {
panels[i].dataset.panelPosition = 'left';
if (candidateLeft > previousLeft) {
previous = panels[i];
previousLeft = candidateLeft;
}
} else {
panels[i].dataset.panelPosition = 'right';
if (candidateLeft < nextLeft) {
next = panels[i];
nextLeft = candidateLeft;
}
}
}
}
......@@ -154,6 +184,12 @@
translateContainer(container, translation);
container.dataset.activePanel = panel.dataset.panel;
if (shift !== 0) {
shiftContainer(container, 0);
}
setContainerPanelNavigation(container, previous, next);
var parentPanel = findPanel(container);
if (parentPanel && (parentPanel.active == true || force)) {
showPanel(parentPanel);
......@@ -250,9 +286,22 @@
containers = document.querySelectorAll('[data-panel-container]');
for (var c = 0; c < containers.length; c++) {
var panelToggles = containers[c].querySelectorAll('.panel-toggle, .panel-toggle-handle');
for (var i=0; i<panelToggles.length; i++) {
panelToggles[i].addEventListener('mousedown', startMove);
panelToggles[i].addEventListener('touchstart', startMove);
for (var i=0; i<panelToggles.length; i++) {
(function () {
var toggle = panelToggles[i],
container = findPanelContainer(toggle),
panel = findPanel(toggle);
toggle.addEventListener('mousedown', startMove);
toggle.addEventListener('touchstart', startMove);
toggle.addEventListener('mouseenter', function () {
if (panel.dataset.active !== 'true') {
shiftContainer(container, (panel.dataset.panelPosition === 'left') ? 30 : -30);
}
});
toggle.addEventListener('mouseleave', function () {
shiftContainer(container, 0);
});
})()
}
}
correctPanelsOnResize();
......@@ -278,6 +327,50 @@
}
}
}
function setContainerPanelNavigation (container, previous, next) {
var togglePrevious, toggleNext;
for (var i = 0; i < container.children.length; i++) {
var candidate = container.children[i];
if (candidate.dataset.containerPanelToggle) {
if (candidate.dataset.containerPanelToggle === 'previous') {
togglePrevious = candidate;
} else if (candidate.dataset.containerPanelToggle === 'next') {
toggleNext = candidate;
}
}
}
if (togglePrevious) {
if (previous) {
togglePrevious.onmouseenter = function () { shiftContainer(container, 30); };
togglePrevious.onmouseleave = function () { shiftContainer(container, 0); };
togglePrevious.onclick = function () { showPanel(previous) };
togglePrevious.dataset.active = "true";
} else {
togglePrevious.onmouseover = null;
togglePrevious.onmouseleave = null;
togglePrevious.onclick = null;
togglePrevious.dataset.active = "false";
}
}
if (toggleNext) {
if (next) {
toggleNext.onmouseenter = function () {
shiftContainer(container, -30); };
toggleNext.onmouseleave = function () {
shiftContainer(container, 0); };
toggleNext.onclick = function () { showPanel(next) };
toggleNext.dataset.active = "true";
} else {
toggleNext.onmouseover = null;
toggleNext.onmouseleave = null;
toggleNext.onclick = null;
toggleNext.dataset.active = "false";
}
}
}
initToggles();
initSwitches();
......
......@@ -89,6 +89,8 @@
<span>{% trans "click to see more" %}</span>
</div> -->
<section data-panel-container>
<section data-container-panel-toggle="previous"><img src="{% static 'contour/images/arrow-left-white.svg' %}"></section>
<section data-container-panel-toggle="next"><img src="{% static 'contour/images/arrow-right-white.svg' %}"></section>
{% for key, image in combined_images %}
<figure class="full" data-image-index="{{ key }}" data-panel="image-{{ key }}" >
<div class="panel-toggle">
......
......@@ -45,6 +45,8 @@
{% if images %}
<div class="images" data-panel="images" data-active-panel="image-0">
<section data-panel-container>
<section data-container-panel-toggle="previous"><img src="{% static 'contour/images/arrow-left-white.svg' %}"></section>
<section data-container-panel-toggle="next"><img src="{% static 'contour/images/arrow-right-white.svg' %}"></section>
{% for key, image in images %}
<figure data-panel="image-{{ key }}" data-image-index="{{ key }}">
<div class="panel-toggle">
......
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