Difference between revisions of "Team:UCSC/new-testing"

Line 1: Line 1:
 
{{:Team:UCSC/Reset-Styles}}
 
{{:Team:UCSC/Reset-Styles}}
 
{{:Team:UCSC/new-testing.css}}
 
{{:Team:UCSC/new-testing.css}}
 +
 
<html lang="en">
 
<html lang="en">
 +
 
<head>
 
<head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <script>document.getElementsByTagName("html")[0].className += " js";</script>
 
   <script>document.getElementsByTagName("html")[0].className += " js";</script>
−
</head>
+
  <link rel="stylesheet" href="assets/css/style.css">
  
 +
</head>
 
<body>
 
<body>
 
<section class="cd-h-timeline js-cd-h-timeline margin-bottom-md">
 
<section class="cd-h-timeline js-cd-h-timeline margin-bottom-md">
Line 32: Line 35:
 
         </div> <!-- .cd-h-timeline__line -->
 
         </div> <!-- .cd-h-timeline__line -->
 
       </div> <!-- .cd-h-timeline__dates -->
 
       </div> <!-- .cd-h-timeline__dates -->
−
       
+
 
 
       <ul>
 
       <ul>
 
         <li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
 
         <li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
Line 45: Line 48:
 
             <h2 class="cd-h-timeline__event-title">Horizontal Timeline</h2>
 
             <h2 class="cd-h-timeline__event-title">Horizontal Timeline</h2>
 
             <em class="cd-h-timeline__event-date">January 16th, 2014</em>
 
             <em class="cd-h-timeline__event-date">January 16th, 2014</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 55: Line 58:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">February 28th, 2014</em>
 
             <em class="cd-h-timeline__event-date">February 28th, 2014</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 65: Line 68:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">March 20th, 2014</em>
 
             <em class="cd-h-timeline__event-date">March 20th, 2014</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 75: Line 78:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">May 20th, 2014</em>
 
             <em class="cd-h-timeline__event-date">May 20th, 2014</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 85: Line 88:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">July 9th, 2014</em>
 
             <em class="cd-h-timeline__event-date">July 9th, 2014</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 95: Line 98:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">August 30th, 2014</em>
 
             <em class="cd-h-timeline__event-date">August 30th, 2014</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 105: Line 108:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">September 15th, 2014</em>
 
             <em class="cd-h-timeline__event-date">September 15th, 2014</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 115: Line 118:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">November 1st, 2014</em>
 
             <em class="cd-h-timeline__event-date">November 1st, 2014</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 125: Line 128:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">December 10th, 2014</em>
 
             <em class="cd-h-timeline__event-date">December 10th, 2014</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 135: Line 138:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">January 29th, 2015</em>
 
             <em class="cd-h-timeline__event-date">January 29th, 2015</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 145: Line 148:
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 
             <em class="cd-h-timeline__event-date">March 3rd, 2015</em>
 
             <em class="cd-h-timeline__event-date">March 3rd, 2015</em>
−
             <p class="cd-h-timeline__event-description color-contrast-medium">  
+
             <p class="cd-h-timeline__event-description color-contrast-medium">
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 
             </p>
 
             </p>
Line 155: Line 158:
 
</body>
 
</body>
 
<script>
 
<script>
−
(function() {
+
  (function() {
 
   // Horizontal Timeline - by CodyHouse.co
 
   // Horizontal Timeline - by CodyHouse.co
 
   var HorizontalTimeline = function(element) {
 
   var HorizontalTimeline = function(element) {
Line 161: Line 164:
 
this.datesContainer = this.element.getElementsByClassName('cd-h-timeline__dates')[0];
 
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.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.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.date = this.line.getElementsByClassName('cd-h-timeline__date');
 
this.selectedDate = this.line.getElementsByClassName('cd-h-timeline__date--selected')[0];
 
this.selectedDate = this.line.getElementsByClassName('cd-h-timeline__date--selected')[0];
Line 169: Line 172:
 
this.contentWrapper = this.element.getElementsByClassName('cd-h-timeline__events')[0];
 
this.contentWrapper = this.element.getElementsByClassName('cd-h-timeline__events')[0];
 
this.content = this.contentWrapper.getElementsByClassName('cd-h-timeline__event');
 
this.content = this.contentWrapper.getElementsByClassName('cd-h-timeline__event');
−
+
 
 
this.eventsMinDistance = 60; // min distance between two consecutive events (in px)
 
this.eventsMinDistance = 60; // min distance between two consecutive events (in px)
 
this.eventsMaxDistance = 200; // max 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.translate = 0; // this will be used to store the translate value of this.line
 
this.lineLength = 0; //total length of this.line
 
this.lineLength = 0; //total length of this.line
−
+
 
 
// store index of selected and previous selected dates
 
// store index of selected and previous selected dates
 
this.oldDateIndex = Util.getIndexInArray(this.date, this.selectedDate);
 
this.oldDateIndex = Util.getIndexInArray(this.date, this.selectedDate);
Line 186: Line 189:
 
   // set dates left position
 
   // set dates left position
 
   var left = 0;
 
   var left = 0;
−
for (var i = 0; i < timeline.dateValues.length; i++) {  
+
for (var i = 0; i < timeline.dateValues.length; i++) {
 
var j = (i == 0) ? 0 : i - 1;
 
var j = (i == 0) ? 0 : i - 1;
 
    var distance = daydiff(timeline.dateValues[j], timeline.dateValues[i]),
 
    var distance = daydiff(timeline.dateValues[j], timeline.dateValues[i]),
 
    distanceNorm = (Math.round(distance/timeline.minLapse) + 2)*timeline.eventsMinDistance;
 
    distanceNorm = (Math.round(distance/timeline.minLapse) + 2)*timeline.eventsMinDistance;
−
+
 
 
    if(distanceNorm < timeline.eventsMinDistance) {
 
    if(distanceNorm < timeline.eventsMinDistance) {
 
    distanceNorm = timeline.eventsMinDistance;
 
    distanceNorm = timeline.eventsMinDistance;
Line 199: Line 202:
 
    timeline.date[i].setAttribute('style', 'left:' + left+'px');
 
    timeline.date[i].setAttribute('style', 'left:' + left+'px');
 
}
 
}
−
+
 
 
// set line/filling line dimensions
 
// set line/filling line dimensions
 
     timeline.line.style.width = (left + timeline.eventsMinDistance)+'px';
 
     timeline.line.style.width = (left + timeline.eventsMinDistance)+'px';
Line 249: Line 252:
 
left = dateStyle.getPropertyValue("left"),
 
left = dateStyle.getPropertyValue("left"),
 
width = dateStyle.getPropertyValue("width");
 
width = dateStyle.getPropertyValue("width");
−
+
 
 
left = Number(left.replace('px', '')) + Number(width.replace('px', ''))/2;
 
left = Number(left.replace('px', '')) + Number(width.replace('px', ''))/2;
 
timeline.fillingLine.style.transform = 'scaleX('+(left/timeline.lineLength)+')';
 
timeline.fillingLine.style.transform = 'scaleX('+(left/timeline.lineLength)+')';
Line 317: Line 320:
 
resetTimelinePosition(timeline, direction);
 
resetTimelinePosition(timeline, direction);
 
};
 
};
−
+
 
 
function resetTimelinePosition(timeline, direction) { //translate timeline according to new selected event position
 
function resetTimelinePosition(timeline, direction) { //translate timeline according to new selected event position
 
var eventStyle = window.getComputedStyle(timeline.selectedDate, null),
 
var eventStyle = window.getComputedStyle(timeline.selectedDate, null),
Line 334: Line 337:
 
var singleDate = timeline.date[i].getAttribute('data-date'),
 
var singleDate = timeline.date[i].getAttribute('data-date'),
 
dateComp = singleDate.split('T');
 
dateComp = singleDate.split('T');
−
+
 
 
if( dateComp.length > 1 ) { //both DD/MM/YEAR and time are provided
 
if( dateComp.length > 1 ) { //both DD/MM/YEAR and time are provided
 
var dayComp = dateComp[0].split('/'),
 
var dayComp = dateComp[0].split('/'),
Line 353: Line 356:
 
   function calcMinLapse(timeline) { // determine the minimum distance among events
 
   function calcMinLapse(timeline) { // determine the minimum distance among events
 
var dateDistances = [];
 
var dateDistances = [];
−
for(var i = 1; i < timeline.dateValues.length; i++) {  
+
for(var i = 1; i < timeline.dateValues.length; i++) {
 
    var distance = daydiff(timeline.dateValues[i-1], timeline.dateValues[i]);
 
    var distance = daydiff(timeline.dateValues[i-1], timeline.dateValues[i]);
 
    if(distance > 0) dateDistances.push(distance);
 
    if(distance > 0) dateDistances.push(distance);
Line 371: Line 374:
 
   if(horizontalTimeline.length > 0) {
 
   if(horizontalTimeline.length > 0) {
 
for(var i = 0; i < horizontalTimeline.length; i++) {
 
for(var i = 0; i < horizontalTimeline.length; i++) {
−
horizontalTimelineTimelineArray.push(new HorizontalTimeline(horizontalTimeline[i]));  
+
horizontalTimelineTimelineArray.push(new HorizontalTimeline(horizontalTimeline[i]));
 
}
 
}
 
// navigate the timeline when inside the viewport using the keyboard
 
// navigate the timeline when inside the viewport using the keyboard
Line 414: Line 417:
 
}());
 
}());
 
</script>
 
</script>
−
 
−
<script>
 
 
(function() {
 
(function() {
 
// Swipe Content Plugin - by CodyHouse.co
 
// Swipe Content Plugin - by CodyHouse.co
Line 484: Line 485:
 
cancelDragging(content);
 
cancelDragging(content);
 
// credits: https://css-tricks.com/simple-swipe-with-vanilla-javascript/
 
// credits: https://css-tricks.com/simple-swipe-with-vanilla-javascript/
−
var dx = parseInt(unify(event).clientX),  
+
var dx = parseInt(unify(event).clientX),
 
    dy = parseInt(unify(event).clientY);
 
    dy = parseInt(unify(event).clientY);
−
 
+
 
 
  // check if there was a left/right swipe
 
  // check if there was a left/right swipe
 
if(content.delta && (content.delta[0] || content.delta[0] === 0)) {
 
if(content.delta && (content.delta[0] || content.delta[0] === 0)) {
 
    var s = Math.sign(dx - content.delta[0]);
 
    var s = Math.sign(dx - content.delta[0]);
−
+
 
 
if(Math.abs(dx - content.delta[0]) > 30) {
 
if(Math.abs(dx - content.delta[0]) > 30) {
−
(s < 0) ? emitSwipeEvents(content, 'swipeLeft', [dx, dy]) : emitSwipeEvents(content, 'swipeRight', [dx, dy]);
+
(s < 0) ? emitSwipeEvents(content, 'swipeLeft', [dx, dy]) : emitSwipeEvents(content, 'swipeRight', [dx, dy]);
 
}
 
}
−
   
+
 
 
    content.delta[0] = false;
 
    content.delta[0] = false;
 
  }
 
  }
Line 515: Line 516:
 
if(!content.dragging) return;
 
if(!content.dragging) return;
 
// emit dragging event with coordinates
 
// emit dragging event with coordinates
−
(!window.requestAnimationFrame)  
+
(!window.requestAnimationFrame)
−
? content.intervalId = setTimeout(function(){emitDrag.bind(content, event);}, 250)  
+
? content.intervalId = setTimeout(function(){emitDrag.bind(content, event);}, 250)
 
: content.intervalId = window.requestAnimationFrame(emitDrag.bind(content, event));
 
: content.intervalId = window.requestAnimationFrame(emitDrag.bind(content, event));
 
};
 
};
Line 524: Line 525:
 
};
 
};
  
−
function unify(event) {  
+
function unify(event) {
 
// unify mouse and touch events
 
// unify mouse and touch events
−
return event.changedTouches ? event.changedTouches[0] : event;  
+
return event.changedTouches ? event.changedTouches[0] : event;
 
};
 
};
  
Line 536: Line 537:
  
 
window.SwipeContent = SwipeContent;
 
window.SwipeContent = SwipeContent;
−
+
 
 
//initialize the SwipeContent objects
 
//initialize the SwipeContent objects
 
var swipe = document.getElementsByClassName('js-swipe-content');
 
var swipe = document.getElementsByClassName('js-swipe-content');
Line 545: Line 546:
 
}
 
}
 
}());
 
}());
 +
<script>
 
</script>
 
</script>
  
 
<script>
 
<script>
−
// Utility function
+
  // Utility function
 
function Util () {};
 
function Util () {};
  
−
/*  
+
/*
 
class manipulation functions
 
class manipulation functions
 
*/
 
*/
Line 568: Line 570:
 
Util.removeClass = function(el, className) {
 
Util.removeClass = function(el, className) {
 
var classList = className.split(' ');
 
var classList = className.split(' ');
−
if (el.classList) el.classList.remove(classList[0]);
+
if (el.classList) el.classList.remove(classList[0]);
 
else if(Util.hasClass(el, classList[0])) {
 
else if(Util.hasClass(el, classList[0])) {
 
var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
 
var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
Line 587: Line 589:
 
};
 
};
  
−
/*  
+
/*
 
   DOM manipulation
 
   DOM manipulation
 
*/
 
*/
Line 599: Line 601:
 
};
 
};
  
−
/*  
+
/*
 
Animate height of an element
 
Animate height of an element
 
*/
 
*/
Line 606: Line 608:
 
    currentTime = null;
 
    currentTime = null;
  
−
   var animateHeight = function(timestamp){
+
   var animateHeight = function(timestamp){
−
     if (!currentTime) currentTime = timestamp;        
+
     if (!currentTime) currentTime = timestamp;
 
     var progress = timestamp - currentTime;
 
     var progress = timestamp - currentTime;
 
     var val = parseInt((progress/duration)*change + start);
 
     var val = parseInt((progress/duration)*change + start);
Line 617: Line 619:
 
     }
 
     }
 
   };
 
   };
−
 
+
 
 
   //set the height of the element before starting animation -> fix bug on Safari
 
   //set the height of the element before starting animation -> fix bug on Safari
 
   element.setAttribute("style", "height:"+start+"px;");
 
   element.setAttribute("style", "height:"+start+"px;");
Line 623: Line 625:
 
};
 
};
  
−
/*  
+
/*
 
Smooth Scroll
 
Smooth Scroll
 
*/
 
*/
Line 630: Line 632:
 
   var start = window.scrollY || document.documentElement.scrollTop,
 
   var start = window.scrollY || document.documentElement.scrollTop,
 
       currentTime = null;
 
       currentTime = null;
−
     
+
 
 
   var animateScroll = function(timestamp){
 
   var animateScroll = function(timestamp){
−
   if (!currentTime) currentTime = timestamp;      
+
   if (!currentTime) currentTime = timestamp;
 
     var progress = timestamp - currentTime;
 
     var progress = timestamp - currentTime;
 
     if(progress > duration) progress = duration;
 
     if(progress > duration) progress = duration;
Line 647: Line 649:
 
};
 
};
  
−
/*  
+
/*
 
   Focus utility classes
 
   Focus utility classes
 
*/
 
*/
Line 661: Line 663:
 
};
 
};
  
−
/*  
+
/*
 
   Misc
 
   Misc
 
*/
 
*/
Line 678: Line 680:
 
};
 
};
  
−
/*  
+
/*
 
Polyfills
 
Polyfills
 
*/
 
*/
Line 693: Line 695:
 
if (el.matches(s)) return el;
 
if (el.matches(s)) return el;
 
el = el.parentElement || el.parentNode;
 
el = el.parentElement || el.parentNode;
−
} while (el !== null && el.nodeType === 1);  
+
} while (el !== null && el.nodeType === 1);
 
return null;
 
return null;
 
};
 
};
Line 713: Line 715:
 
}
 
}
  
−
/*  
+
/*
 
Animation curves
 
Animation curves
 
*/
 
*/
Line 723: Line 725:
 
};
 
};
 
</script>
 
</script>
−
 
 
</html>
 
</html>

Revision as of 04:13, 14 October 2019


👈 Article & Download

  1. Bioethics
  2. B2DK
  3. Schools
  4. Rotary
  5. County Fair
  6. Tech Meetup
  7. CornUCopia

  1. Horizontal Timeline

    January 16th, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  2. Event title here

    February 28th, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  3. Event title here

    March 20th, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  4. Event title here

    May 20th, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  5. Event title here

    July 9th, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  6. Event title here

    August 30th, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  7. Event title here

    September 15th, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  8. Event title here

    November 1st, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  9. Event title here

    December 10th, 2014

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  10. Event title here

    January 29th, 2015

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  11. Event title here

    March 3rd, 2015

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

(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); } } }());