mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
Commit realizando cambios en los roles de los usuarios
This commit is contained in:
Jaime Jimenez
48
httpdocs/themes/focus2/vendor/horizontal-timeline/css/reset.css
vendored
Normal file
48
httpdocs/themes/focus2/vendor/horizontal-timeline/css/reset.css
vendored
Normal file
@ -0,0 +1,48 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section, main {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
408
httpdocs/themes/focus2/vendor/horizontal-timeline/css/style.css
vendored
Normal file
408
httpdocs/themes/focus2/vendor/horizontal-timeline/css/style.css
vendored
Normal file
@ -0,0 +1,408 @@
|
||||
/* --------------------------------
|
||||
|
||||
Primary style
|
||||
|
||||
-------------------------------- */
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1.6rem;
|
||||
font-family: "Fira Sans", sans-serif;
|
||||
color: #383838;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #7b9d6f;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* --------------------------------
|
||||
|
||||
Main Components
|
||||
|
||||
-------------------------------- */
|
||||
.cd-horizontal-timeline {
|
||||
opacity: 0;
|
||||
margin: 2em auto;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.cd-horizontal-timeline::before {
|
||||
/* never visible - this is used in jQuery to check the current MQ */
|
||||
content: 'mobile';
|
||||
display: none;
|
||||
}
|
||||
.cd-horizontal-timeline.loaded {
|
||||
/* show the timeline after events position has been set (using JavaScript) */
|
||||
opacity: 1;
|
||||
}
|
||||
.cd-horizontal-timeline .timeline {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cd-horizontal-timeline .events-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin: 0 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
|
||||
/* these are used to create a shadow effect at the sides of the timeline */
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 20px;
|
||||
}
|
||||
.cd-horizontal-timeline .events-wrapper::before {
|
||||
left: 0;
|
||||
background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));
|
||||
background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
|
||||
}
|
||||
.cd-horizontal-timeline .events-wrapper::after {
|
||||
right: 0;
|
||||
background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
|
||||
background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
|
||||
}
|
||||
.cd-horizontal-timeline .events {
|
||||
/* this is the grey line/timeline */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 49px;
|
||||
height: 2px;
|
||||
/* width will be set using JavaScript */
|
||||
background: #dfdfdf;
|
||||
-webkit-transition: -webkit-transform 0.4s;
|
||||
-moz-transition: -moz-transform 0.4s;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.cd-horizontal-timeline .filling-line {
|
||||
/* this is used to create the green line filling the timeline */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #7b9d6f;
|
||||
-webkit-transform: scaleX(0);
|
||||
-moz-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
-o-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: left center;
|
||||
-moz-transform-origin: left center;
|
||||
-ms-transform-origin: left center;
|
||||
-o-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.cd-horizontal-timeline .events a {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
padding-bottom: 15px;
|
||||
color: #383838;
|
||||
/* fix bug on Safari - text flickering while timeline translates */
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.cd-horizontal-timeline .events a::after {
|
||||
/* this is used to create the event spot */
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
-o-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
bottom: -5px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #dfdfdf;
|
||||
background-color: #f8f8f8;
|
||||
-webkit-transition: background-color 0.3s, border-color 0.3s;
|
||||
-moz-transition: background-color 0.3s, border-color 0.3s;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
}
|
||||
.no-touch .cd-horizontal-timeline .events a:hover::after {
|
||||
background-color: #7b9d6f;
|
||||
border-color: #7b9d6f;
|
||||
}
|
||||
.cd-horizontal-timeline .events a.selected {
|
||||
pointer-events: none;
|
||||
}
|
||||
.cd-horizontal-timeline .events a.selected::after {
|
||||
background-color: #7b9d6f;
|
||||
border-color: #7b9d6f;
|
||||
}
|
||||
.cd-horizontal-timeline .events a.older-event::after {
|
||||
border-color: #7b9d6f;
|
||||
}
|
||||
@media only screen and (min-width: 1100px) {
|
||||
.cd-horizontal-timeline {
|
||||
margin: 6em auto;
|
||||
}
|
||||
.cd-horizontal-timeline::before {
|
||||
/* never visible - this is used in jQuery to check the current MQ */
|
||||
content: 'desktop';
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-navigation a {
|
||||
/* these are the left/right arrows to navigate the timeline */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #dfdfdf;
|
||||
/* replace text with an icon */
|
||||
overflow: hidden;
|
||||
color: transparent;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
-webkit-transition: border-color 0.3s;
|
||||
-moz-transition: border-color 0.3s;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.cd-timeline-navigation a::after {
|
||||
/* arrow icon */
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
-o-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
background: url(../img/cd-arrow.svg) no-repeat 0 0;
|
||||
}
|
||||
.cd-timeline-navigation a.prev {
|
||||
left: 0;
|
||||
-webkit-transform: translateY(-50%) rotate(180deg);
|
||||
-moz-transform: translateY(-50%) rotate(180deg);
|
||||
-ms-transform: translateY(-50%) rotate(180deg);
|
||||
-o-transform: translateY(-50%) rotate(180deg);
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
.cd-timeline-navigation a.next {
|
||||
right: 0;
|
||||
}
|
||||
.no-touch .cd-timeline-navigation a:hover {
|
||||
border-color: #7b9d6f;
|
||||
}
|
||||
.cd-timeline-navigation a.inactive {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.cd-timeline-navigation a.inactive::after {
|
||||
background-position: 0 -16px;
|
||||
}
|
||||
.no-touch .cd-timeline-navigation a.inactive:hover {
|
||||
border-color: #dfdfdf;
|
||||
}
|
||||
|
||||
.cd-horizontal-timeline .events-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
overflow: hidden;
|
||||
-webkit-transition: height 0.4s;
|
||||
-moz-transition: height 0.4s;
|
||||
transition: height 0.4s;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content li {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
-o-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
padding: 0 5%;
|
||||
opacity: 0;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
-moz-animation-duration: 0.4s;
|
||||
animation-duration: 0.4s;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-moz-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content li.selected {
|
||||
/* visible event content */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
-o-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
|
||||
-webkit-animation-name: cd-enter-right;
|
||||
-moz-animation-name: cd-enter-right;
|
||||
animation-name: cd-enter-right;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
|
||||
-webkit-animation-name: cd-enter-left;
|
||||
-moz-animation-name: cd-enter-left;
|
||||
animation-name: cd-enter-left;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
|
||||
-webkit-animation-direction: reverse;
|
||||
-moz-animation-direction: reverse;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content li > * {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content h2 {
|
||||
font-weight: bold;
|
||||
font-size: 2.6rem;
|
||||
font-family: "Playfair Display", serif;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content em {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content em::before {
|
||||
content: '- ';
|
||||
}
|
||||
.cd-horizontal-timeline .events-content p {
|
||||
font-size: 1.4rem;
|
||||
color: #959595;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.cd-horizontal-timeline .events-content h2 {
|
||||
font-size: 7rem;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content em {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.cd-horizontal-timeline .events-content p {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes cd-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes cd-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
@keyframes cd-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
-moz-transform: translateX(100%);
|
||||
-ms-transform: translateX(100%);
|
||||
-o-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
-moz-transform: translateX(0%);
|
||||
-ms-transform: translateX(0%);
|
||||
-o-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes cd-enter-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes cd-enter-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
@keyframes cd-enter-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
-o-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
-moz-transform: translateX(0%);
|
||||
-ms-transform: translateX(0%);
|
||||
-o-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
1
httpdocs/themes/focus2/vendor/horizontal-timeline/img/cd-arrow.svg
vendored
Normal file
1
httpdocs/themes/focus2/vendor/horizontal-timeline/img/cd-arrow.svg
vendored
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="32px" viewBox="0 0 16 32"><g transform="translate(0, 0)"><polygon fill="#7b9d6f" points="6,13.4 4.6,12 8.6,8 4.6,4 6,2.6 11.4,8 "/></g><g transform="translate(0, 16)"><polygon fill="#dfdfdf" points="6,13.4 4.6,12 8.6,8 4.6,4 6,2.6 11.4,8 "/></g></svg>
|
||||
|
After Width: | Height: | Size: 373 B |
258
httpdocs/themes/focus2/vendor/horizontal-timeline/js/main.js
vendored
Normal file
258
httpdocs/themes/focus2/vendor/horizontal-timeline/js/main.js
vendored
Normal file
@ -0,0 +1,258 @@
|
||||
(function() {
|
||||
// Horizontal Timeline - by CodyHouse.co
|
||||
var HorizontalTimeline = function(element) {
|
||||
this.element = element;
|
||||
this.datesContainer = this.element.getElementsByClassName('cd-h-timeline__dates')[0];
|
||||
this.line = this.datesContainer.getElementsByClassName('cd-h-timeline__line')[0]; // grey line in the top timeline section
|
||||
this.fillingLine = this.datesContainer.getElementsByClassName('cd-h-timeline__filling-line')[0]; // green filling line in the top timeline section
|
||||
this.date = this.line.getElementsByClassName('cd-h-timeline__date');
|
||||
this.selectedDate = this.line.getElementsByClassName('cd-h-timeline__date--selected')[0];
|
||||
this.dateValues = parseDate(this);
|
||||
this.minLapse = calcMinLapse(this);
|
||||
this.navigation = this.element.getElementsByClassName('cd-h-timeline__navigation');
|
||||
this.contentWrapper = this.element.getElementsByClassName('cd-h-timeline__events')[0];
|
||||
this.content = this.contentWrapper.getElementsByClassName('cd-h-timeline__event');
|
||||
|
||||
this.eventsMinDistance = 60; // min distance between two consecutive events (in px)
|
||||
this.eventsMaxDistance = 200; // max distance between two consecutive events (in px)
|
||||
this.translate = 0; // this will be used to store the translate value of this.line
|
||||
this.lineLength = 0; //total length of this.line
|
||||
|
||||
// store index of selected and previous selected dates
|
||||
this.oldDateIndex = Util.getIndexInArray(this.date, this.selectedDate);
|
||||
this.newDateIndex = this.oldDateIndex;
|
||||
|
||||
initTimeline(this);
|
||||
initEvents(this);
|
||||
};
|
||||
|
||||
function initTimeline(timeline) {
|
||||
// set dates left position
|
||||
var left = 0;
|
||||
for (var i = 0; i < timeline.dateValues.length; i++) {
|
||||
var j = (i == 0) ? 0 : i - 1;
|
||||
var distance = daydiff(timeline.dateValues[j], timeline.dateValues[i]),
|
||||
distanceNorm = (Math.round(distance/timeline.minLapse) + 2)*timeline.eventsMinDistance;
|
||||
|
||||
if(distanceNorm < timeline.eventsMinDistance) {
|
||||
distanceNorm = timeline.eventsMinDistance;
|
||||
} else if(distanceNorm > timeline.eventsMaxDistance) {
|
||||
distanceNorm = timeline.eventsMaxDistance;
|
||||
}
|
||||
left = left + distanceNorm;
|
||||
timeline.date[i].setAttribute('style', 'left:' + left+'px');
|
||||
}
|
||||
|
||||
// set line/filling line dimensions
|
||||
timeline.line.style.width = (left + timeline.eventsMinDistance)+'px';
|
||||
timeline.lineLength = left + timeline.eventsMinDistance;
|
||||
// reveal timeline
|
||||
Util.addClass(timeline.element, 'cd-h-timeline--loaded');
|
||||
selectNewDate(timeline, timeline.selectedDate);
|
||||
resetTimelinePosition(timeline, 'next');
|
||||
};
|
||||
|
||||
function initEvents(timeline) {
|
||||
var self = timeline;
|
||||
// click on arrow navigation
|
||||
self.navigation[0].addEventListener('click', function(event){
|
||||
event.preventDefault();
|
||||
translateTimeline(self, 'prev');
|
||||
});
|
||||
self.navigation[1].addEventListener('click', function(event){
|
||||
event.preventDefault();
|
||||
translateTimeline(self, 'next');
|
||||
});
|
||||
|
||||
//swipe on timeline
|
||||
new SwipeContent(self.datesContainer);
|
||||
self.datesContainer.addEventListener('swipeLeft', function(event){
|
||||
translateTimeline(self, 'next');
|
||||
});
|
||||
self.datesContainer.addEventListener('swipeRight', function(event){
|
||||
translateTimeline(self, 'prev');
|
||||
});
|
||||
|
||||
//select a new event
|
||||
for(var i = 0; i < self.date.length; i++) {
|
||||
(function(i){
|
||||
self.date[i].addEventListener('click', function(event){
|
||||
event.preventDefault();
|
||||
selectNewDate(self, event.target);
|
||||
});
|
||||
|
||||
self.content[i].addEventListener('animationend', function(event){
|
||||
if( i == self.newDateIndex && self.newDateIndex != self.oldDateIndex) resetAnimation(self);
|
||||
});
|
||||
})(i);
|
||||
}
|
||||
};
|
||||
|
||||
function updateFilling(timeline) { // update fillingLine scale value
|
||||
var dateStyle = window.getComputedStyle(timeline.selectedDate, null),
|
||||
left = dateStyle.getPropertyValue("left"),
|
||||
width = dateStyle.getPropertyValue("width");
|
||||
|
||||
left = Number(left.replace('px', '')) + Number(width.replace('px', ''))/2;
|
||||
timeline.fillingLine.style.transform = 'scaleX('+(left/timeline.lineLength)+')';
|
||||
};
|
||||
|
||||
function translateTimeline(timeline, direction) { // translate timeline (and date elements)
|
||||
var containerWidth = timeline.datesContainer.offsetWidth;
|
||||
if(direction) {
|
||||
timeline.translate = (direction == 'next') ? timeline.translate - containerWidth + timeline.eventsMinDistance : timeline.translate + containerWidth - timeline.eventsMinDistance;
|
||||
}
|
||||
if( 0 - timeline.translate > timeline.lineLength - containerWidth ) timeline.translate = containerWidth - timeline.lineLength;
|
||||
if( timeline.translate > 0 ) timeline.translate = 0;
|
||||
|
||||
timeline.line.style.transform = 'translateX('+timeline.translate+'px)';
|
||||
// update the navigation items status (toggle inactive class)
|
||||
(timeline.translate == 0 ) ? Util.addClass(timeline.navigation[0], 'cd-h-timeline__navigation--inactive') : Util.removeClass(timeline.navigation[0], 'cd-h-timeline__navigation--inactive');
|
||||
(timeline.translate == containerWidth - timeline.lineLength ) ? Util.addClass(timeline.navigation[1], 'cd-h-timeline__navigation--inactive') : Util.removeClass(timeline.navigation[1], 'cd-h-timeline__navigation--inactive');
|
||||
};
|
||||
|
||||
function selectNewDate(timeline, target) { // ned date has been selected -> update timeline
|
||||
timeline.newDateIndex = Util.getIndexInArray(timeline.date, target);
|
||||
timeline.oldDateIndex = Util.getIndexInArray(timeline.date, timeline.selectedDate);
|
||||
Util.removeClass(timeline.selectedDate, 'cd-h-timeline__date--selected');
|
||||
Util.addClass(timeline.date[timeline.newDateIndex], 'cd-h-timeline__date--selected');
|
||||
timeline.selectedDate = timeline.date[timeline.newDateIndex];
|
||||
updateOlderEvents(timeline);
|
||||
updateVisibleContent(timeline);
|
||||
updateFilling(timeline);
|
||||
};
|
||||
|
||||
function updateOlderEvents(timeline) { // update older events style
|
||||
for(var i = 0; i < timeline.date.length; i++) {
|
||||
(i < timeline.newDateIndex) ? Util.addClass(timeline.date[i], 'cd-h-timeline__date--older-event') : Util.removeClass(timeline.date[i], 'cd-h-timeline__date--older-event');
|
||||
}
|
||||
};
|
||||
|
||||
function updateVisibleContent(timeline) { // show content of new selected date
|
||||
if (timeline.newDateIndex > timeline.oldDateIndex) {
|
||||
var classEntering = 'cd-h-timeline__event--selected cd-h-timeline__event--enter-right',
|
||||
classLeaving = 'cd-h-timeline__event--leave-left';
|
||||
} else if(timeline.newDateIndex < timeline.oldDateIndex) {
|
||||
var classEntering = 'cd-h-timeline__event--selected cd-h-timeline__event--enter-left',
|
||||
classLeaving = 'cd-h-timeline__event--leave-right';
|
||||
} else {
|
||||
var classEntering = 'cd-h-timeline__event--selected',
|
||||
classLeaving = '';
|
||||
}
|
||||
|
||||
Util.addClass(timeline.content[timeline.newDateIndex], classEntering);
|
||||
if (timeline.newDateIndex != timeline.oldDateIndex) {
|
||||
Util.removeClass(timeline.content[timeline.oldDateIndex], 'cd-h-timeline__event--selected');
|
||||
Util.addClass(timeline.content[timeline.oldDateIndex], classLeaving);
|
||||
timeline.contentWrapper.style.height = timeline.content[timeline.newDateIndex].offsetHeight + 'px';
|
||||
}
|
||||
};
|
||||
|
||||
function resetAnimation(timeline) { // reset content classes when entering animation is over
|
||||
timeline.contentWrapper.style.height = null;
|
||||
Util.removeClass(timeline.content[timeline.newDateIndex], 'cd-h-timeline__event--enter-right cd-h-timeline__event--enter-left');
|
||||
Util.removeClass(timeline.content[timeline.oldDateIndex], 'cd-h-timeline__event--leave-right cd-h-timeline__event--leave-left');
|
||||
};
|
||||
|
||||
function keyNavigateTimeline(timeline, direction) { // navigate the timeline using the keyboard
|
||||
var newIndex = (direction == 'next') ? timeline.newDateIndex + 1 : timeline.newDateIndex - 1;
|
||||
if(newIndex < 0 || newIndex >= timeline.date.length) return;
|
||||
selectNewDate(timeline, timeline.date[newIndex]);
|
||||
resetTimelinePosition(timeline, direction);
|
||||
};
|
||||
|
||||
function resetTimelinePosition(timeline, direction) { //translate timeline according to new selected event position
|
||||
var eventStyle = window.getComputedStyle(timeline.selectedDate, null),
|
||||
eventLeft = Number(eventStyle.getPropertyValue('left').replace('px', '')),
|
||||
timelineWidth = timeline.datesContainer.offsetWidth;
|
||||
|
||||
if( (direction == 'next' && eventLeft >= timelineWidth - timeline.translate) || (direction == 'prev' && eventLeft <= - timeline.translate) ) {
|
||||
timeline.translate = timelineWidth/2 - eventLeft;
|
||||
translateTimeline(timeline, false);
|
||||
}
|
||||
};
|
||||
|
||||
function parseDate(timeline) { // get timestamp value for each date
|
||||
var dateArrays = [];
|
||||
for(var i = 0; i < timeline.date.length; i++) {
|
||||
var singleDate = timeline.date[i].getAttribute('data-date'),
|
||||
dateComp = singleDate.split('T');
|
||||
|
||||
if( dateComp.length > 1 ) { //both DD/MM/YEAR and time are provided
|
||||
var dayComp = dateComp[0].split('/'),
|
||||
timeComp = dateComp[1].split(':');
|
||||
} else if( dateComp[0].indexOf(':') >=0 ) { //only time is provide
|
||||
var dayComp = ["2000", "0", "0"],
|
||||
timeComp = dateComp[0].split(':');
|
||||
} else { //only DD/MM/YEAR
|
||||
var dayComp = dateComp[0].split('/'),
|
||||
timeComp = ["0", "0"];
|
||||
}
|
||||
var newDate = new Date(dayComp[2], dayComp[1]-1, dayComp[0], timeComp[0], timeComp[1]);
|
||||
dateArrays.push(newDate);
|
||||
}
|
||||
return dateArrays;
|
||||
};
|
||||
|
||||
function calcMinLapse(timeline) { // determine the minimum distance among events
|
||||
var dateDistances = [];
|
||||
for(var i = 1; i < timeline.dateValues.length; i++) {
|
||||
var distance = daydiff(timeline.dateValues[i-1], timeline.dateValues[i]);
|
||||
if(distance > 0) dateDistances.push(distance);
|
||||
}
|
||||
|
||||
return (dateDistances.length > 0 ) ? Math.min.apply(null, dateDistances) : 86400000;
|
||||
};
|
||||
|
||||
function daydiff(first, second) { // time distance between events
|
||||
return Math.round((second-first));
|
||||
};
|
||||
|
||||
window.HorizontalTimeline = HorizontalTimeline;
|
||||
|
||||
var horizontalTimeline = document.getElementsByClassName('js-cd-h-timeline'),
|
||||
horizontalTimelineTimelineArray = [];
|
||||
if(horizontalTimeline.length > 0) {
|
||||
for(var i = 0; i < horizontalTimeline.length; i++) {
|
||||
horizontalTimelineTimelineArray.push(new HorizontalTimeline(horizontalTimeline[i]));
|
||||
}
|
||||
// navigate the timeline when inside the viewport using the keyboard
|
||||
document.addEventListener('keydown', function(event){
|
||||
if( (event.keyCode && event.keyCode == 39) || ( event.key && event.key.toLowerCase() == 'arrowright') ) {
|
||||
updateHorizontalTimeline('next'); // move to next event
|
||||
} else if((event.keyCode && event.keyCode == 37) || ( event.key && event.key.toLowerCase() == 'arrowleft')) {
|
||||
updateHorizontalTimeline('prev'); // move to prev event
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function updateHorizontalTimeline(direction) {
|
||||
for(var i = 0; i < horizontalTimelineTimelineArray.length; i++) {
|
||||
if(elementInViewport(horizontalTimeline[i])) keyNavigateTimeline(horizontalTimelineTimelineArray[i], direction);
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
How to tell if a DOM element is visible in the current viewport?
|
||||
http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
|
||||
*/
|
||||
function elementInViewport(el) {
|
||||
var top = el.offsetTop;
|
||||
var left = el.offsetLeft;
|
||||
var width = el.offsetWidth;
|
||||
var height = el.offsetHeight;
|
||||
|
||||
while(el.offsetParent) {
|
||||
el = el.offsetParent;
|
||||
top += el.offsetTop;
|
||||
left += el.offsetLeft;
|
||||
}
|
||||
|
||||
return (
|
||||
top < (window.pageYOffset + window.innerHeight) &&
|
||||
left < (window.pageXOffset + window.innerWidth) &&
|
||||
(top + height) > window.pageYOffset &&
|
||||
(left + width) > window.pageXOffset
|
||||
);
|
||||
}
|
||||
}());
|
||||
129
httpdocs/themes/focus2/vendor/horizontal-timeline/js/swipe-content.js
vendored
Normal file
129
httpdocs/themes/focus2/vendor/horizontal-timeline/js/swipe-content.js
vendored
Normal file
@ -0,0 +1,129 @@
|
||||
(function() {
|
||||
// Swipe Content Plugin - by CodyHouse.co
|
||||
// https://codyhouse.co/ds/components/info/swipe-content
|
||||
var SwipeContent = function(element) {
|
||||
this.element = element;
|
||||
this.delta = [false, false];
|
||||
this.dragging = false;
|
||||
this.intervalId = false;
|
||||
initSwipeContent(this);
|
||||
};
|
||||
|
||||
function initSwipeContent(content) {
|
||||
content.element.addEventListener('mousedown', handleEvent.bind(content));
|
||||
content.element.addEventListener('touchstart', handleEvent.bind(content));
|
||||
};
|
||||
|
||||
function initDragging(content) {
|
||||
//add event listeners
|
||||
content.element.addEventListener('mousemove', handleEvent.bind(content));
|
||||
content.element.addEventListener('touchmove', handleEvent.bind(content));
|
||||
content.element.addEventListener('mouseup', handleEvent.bind(content));
|
||||
content.element.addEventListener('mouseleave', handleEvent.bind(content));
|
||||
content.element.addEventListener('touchend', handleEvent.bind(content));
|
||||
};
|
||||
|
||||
function cancelDragging(content) {
|
||||
//remove event listeners
|
||||
if(content.intervalId) {
|
||||
(!window.requestAnimationFrame) ? clearInterval(content.intervalId) : window.cancelAnimationFrame(content.intervalId);
|
||||
content.intervalId = false;
|
||||
}
|
||||
content.element.removeEventListener('mousemove', handleEvent.bind(content));
|
||||
content.element.removeEventListener('touchmove', handleEvent.bind(content));
|
||||
content.element.removeEventListener('mouseup', handleEvent.bind(content));
|
||||
content.element.removeEventListener('mouseleave', handleEvent.bind(content));
|
||||
content.element.removeEventListener('touchend', handleEvent.bind(content));
|
||||
};
|
||||
|
||||
function handleEvent(event) {
|
||||
switch(event.type) {
|
||||
case 'mousedown':
|
||||
case 'touchstart':
|
||||
startDrag(this, event);
|
||||
break;
|
||||
case 'mousemove':
|
||||
case 'touchmove':
|
||||
drag(this, event);
|
||||
break;
|
||||
case 'mouseup':
|
||||
case 'mouseleave':
|
||||
case 'touchend':
|
||||
endDrag(this, event);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function startDrag(content, event) {
|
||||
content.dragging = true;
|
||||
// listen to drag movements
|
||||
initDragging(content);
|
||||
content.delta = [parseInt(unify(event).clientX), parseInt(unify(event).clientY)];
|
||||
// emit drag start event
|
||||
emitSwipeEvents(content, 'dragStart', content.delta);
|
||||
};
|
||||
|
||||
function endDrag(content, event) {
|
||||
cancelDragging(content);
|
||||
// credits: https://css-tricks.com/simple-swipe-with-vanilla-javascript/
|
||||
var dx = parseInt(unify(event).clientX),
|
||||
dy = parseInt(unify(event).clientY);
|
||||
|
||||
// check if there was a left/right swipe
|
||||
if(content.delta && (content.delta[0] || content.delta[0] === 0)) {
|
||||
var s = Math.sign(dx - content.delta[0]);
|
||||
|
||||
if(Math.abs(dx - content.delta[0]) > 30) {
|
||||
(s < 0) ? emitSwipeEvents(content, 'swipeLeft', [dx, dy]) : emitSwipeEvents(content, 'swipeRight', [dx, dy]);
|
||||
}
|
||||
|
||||
content.delta[0] = false;
|
||||
}
|
||||
// check if there was a top/bottom swipe
|
||||
if(content.delta && (content.delta[1] || content.delta[1] === 0)) {
|
||||
var y = Math.sign(dy - content.delta[1]);
|
||||
|
||||
if(Math.abs(dy - content.delta[1]) > 30) {
|
||||
(y < 0) ? emitSwipeEvents(content, 'swipeUp', [dx, dy]) : emitSwipeEvents(content, 'swipeDown', [dx, dy]);
|
||||
}
|
||||
|
||||
content.delta[1] = false;
|
||||
}
|
||||
// emit drag end event
|
||||
emitSwipeEvents(content, 'dragEnd', [dx, dy]);
|
||||
content.dragging = false;
|
||||
};
|
||||
|
||||
function drag(content, event) {
|
||||
if(!content.dragging) return;
|
||||
// emit dragging event with coordinates
|
||||
(!window.requestAnimationFrame)
|
||||
? content.intervalId = setTimeout(function(){emitDrag.bind(content, event);}, 250)
|
||||
: content.intervalId = window.requestAnimationFrame(emitDrag.bind(content, event));
|
||||
};
|
||||
|
||||
function emitDrag(event) {
|
||||
emitSwipeEvents(this, 'dragging', [parseInt(unify(event).clientX), parseInt(unify(event).clientY)]);
|
||||
};
|
||||
|
||||
function unify(event) {
|
||||
// unify mouse and touch events
|
||||
return event.changedTouches ? event.changedTouches[0] : event;
|
||||
};
|
||||
|
||||
function emitSwipeEvents(content, eventName, detail) {
|
||||
// emit event with coordinates
|
||||
var event = new CustomEvent(eventName, {detail: {x: detail[0], y: detail[1]}});
|
||||
content.element.dispatchEvent(event);
|
||||
};
|
||||
|
||||
window.SwipeContent = SwipeContent;
|
||||
|
||||
//initialize the SwipeContent objects
|
||||
var swipe = document.getElementsByClassName('js-swipe-content');
|
||||
if( swipe.length > 0 ) {
|
||||
for( var i = 0; i < swipe.length; i++) {
|
||||
(function(i){new SwipeContent(swipe[i]);})(i);
|
||||
}
|
||||
}
|
||||
}());
|
||||
174
httpdocs/themes/focus2/vendor/horizontal-timeline/js/util.js
vendored
Normal file
174
httpdocs/themes/focus2/vendor/horizontal-timeline/js/util.js
vendored
Normal file
@ -0,0 +1,174 @@
|
||||
// Utility function
|
||||
function Util () {};
|
||||
|
||||
/*
|
||||
class manipulation functions
|
||||
*/
|
||||
Util.hasClass = function(el, className) {
|
||||
if (el.classList) return el.classList.contains(className);
|
||||
else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
|
||||
};
|
||||
|
||||
Util.addClass = function(el, className) {
|
||||
var classList = className.split(' ');
|
||||
if (el.classList) el.classList.add(classList[0]);
|
||||
else if (!Util.hasClass(el, classList[0])) el.className += " " + classList[0];
|
||||
if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' '));
|
||||
};
|
||||
|
||||
Util.removeClass = function(el, className) {
|
||||
var classList = className.split(' ');
|
||||
if (el.classList) el.classList.remove(classList[0]);
|
||||
else if(Util.hasClass(el, classList[0])) {
|
||||
var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
|
||||
el.className=el.className.replace(reg, ' ');
|
||||
}
|
||||
if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' '));
|
||||
};
|
||||
|
||||
Util.toggleClass = function(el, className, bool) {
|
||||
if(bool) Util.addClass(el, className);
|
||||
else Util.removeClass(el, className);
|
||||
};
|
||||
|
||||
Util.setAttributes = function(el, attrs) {
|
||||
for(var key in attrs) {
|
||||
el.setAttribute(key, attrs[key]);
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
DOM manipulation
|
||||
*/
|
||||
Util.getChildrenByClassName = function(el, className) {
|
||||
var children = el.children,
|
||||
childrenByClass = [];
|
||||
for (var i = 0; i < el.children.length; i++) {
|
||||
if (Util.hasClass(el.children[i], className)) childrenByClass.push(el.children[i]);
|
||||
}
|
||||
return childrenByClass;
|
||||
};
|
||||
|
||||
/*
|
||||
Animate height of an element
|
||||
*/
|
||||
Util.setHeight = function(start, to, element, duration, cb) {
|
||||
var change = to - start,
|
||||
currentTime = null;
|
||||
|
||||
var animateHeight = function(timestamp){
|
||||
if (!currentTime) currentTime = timestamp;
|
||||
var progress = timestamp - currentTime;
|
||||
var val = parseInt((progress/duration)*change + start);
|
||||
element.setAttribute("style", "height:"+val+"px;");
|
||||
if(progress < duration) {
|
||||
window.requestAnimationFrame(animateHeight);
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
};
|
||||
|
||||
//set the height of the element before starting animation -> fix bug on Safari
|
||||
element.setAttribute("style", "height:"+start+"px;");
|
||||
window.requestAnimationFrame(animateHeight);
|
||||
};
|
||||
|
||||
/*
|
||||
Smooth Scroll
|
||||
*/
|
||||
|
||||
Util.scrollTo = function(final, duration, cb) {
|
||||
var start = window.scrollY || document.documentElement.scrollTop,
|
||||
currentTime = null;
|
||||
|
||||
var animateScroll = function(timestamp){
|
||||
if (!currentTime) currentTime = timestamp;
|
||||
var progress = timestamp - currentTime;
|
||||
if(progress > duration) progress = duration;
|
||||
var val = Math.easeInOutQuad(progress, start, final-start, duration);
|
||||
window.scrollTo(0, val);
|
||||
if(progress < duration) {
|
||||
window.requestAnimationFrame(animateScroll);
|
||||
} else {
|
||||
cb && cb();
|
||||
}
|
||||
};
|
||||
|
||||
window.requestAnimationFrame(animateScroll);
|
||||
};
|
||||
|
||||
/*
|
||||
Focus utility classes
|
||||
*/
|
||||
|
||||
//Move focus to an element
|
||||
Util.moveFocus = function (element) {
|
||||
if( !element ) element = document.getElementsByTagName("body")[0];
|
||||
element.focus();
|
||||
if (document.activeElement !== element) {
|
||||
element.setAttribute('tabindex','-1');
|
||||
element.focus();
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Misc
|
||||
*/
|
||||
|
||||
Util.getIndexInArray = function(array, el) {
|
||||
return Array.prototype.indexOf.call(array, el);
|
||||
};
|
||||
|
||||
Util.cssSupports = function(property, value) {
|
||||
if('CSS' in window) {
|
||||
return CSS.supports(property, value);
|
||||
} else {
|
||||
var jsProperty = property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase();});
|
||||
return jsProperty in document.body.style;
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Polyfills
|
||||
*/
|
||||
//Closest() method
|
||||
if (!Element.prototype.matches) {
|
||||
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
|
||||
}
|
||||
|
||||
if (!Element.prototype.closest) {
|
||||
Element.prototype.closest = function(s) {
|
||||
var el = this;
|
||||
if (!document.documentElement.contains(el)) return null;
|
||||
do {
|
||||
if (el.matches(s)) return el;
|
||||
el = el.parentElement || el.parentNode;
|
||||
} while (el !== null && el.nodeType === 1);
|
||||
return null;
|
||||
};
|
||||
}
|
||||
|
||||
//Custom Event() constructor
|
||||
if ( typeof window.CustomEvent !== "function" ) {
|
||||
|
||||
function CustomEvent ( event, params ) {
|
||||
params = params || { bubbles: false, cancelable: false, detail: undefined };
|
||||
var evt = document.createEvent( 'CustomEvent' );
|
||||
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
|
||||
return evt;
|
||||
}
|
||||
|
||||
CustomEvent.prototype = window.Event.prototype;
|
||||
|
||||
window.CustomEvent = CustomEvent;
|
||||
}
|
||||
|
||||
/*
|
||||
Animation curves
|
||||
*/
|
||||
Math.easeInOutQuad = function (t, b, c, d) {
|
||||
t /= d/2;
|
||||
if (t < 1) return c/2*t*t + b;
|
||||
t--;
|
||||
return -c/2 * (t*(t-2) - 1) + b;
|
||||
};
|
||||
Reference in New Issue
Block a user