finished tabs, added timeline, added video button

jerrysdesign · Apr 10, 2018 · 7ee7fe0 · 7ee7fe0
1 parent 0d9a6dc
commit 7ee7fe0
Show file tree

Hide file tree

Showing 31 changed files with 11,182 additions and 707 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -160,12 +160,19 @@ gulp.task('copy-js', function() {
         .pipe(gulp.dest('./_site/assets/js/'));
 });
 
+// Copy fonts
+gulp.task('copy-fonts', function() {
+    //Cryptofont
+    gulp.src([nodepath + 'cryptofont/css/**/*']).pipe(gulp.dest('_site/assets/fonts/cryptofont/css/'));
+    gulp.src([nodepath + 'cryptofont/fonts/**/*']).pipe(gulp.dest('_site/assets/fonts/cryptofont/fonts/'));
+});
+
 //Copy images to production site
 gulp.task('copy-images', function() {
     gulp.src('images/**/*')
         .pipe(gulp.dest('./_site/assets/images/'));
 });
 
 gulp.task('init', ['setupBulma']);
-gulp.task('build', ['clean','copy','compile-js', 'copy-js', 'compile-sass', 'compile-scss', 'compile-html', 'copy-images']);
+gulp.task('build', ['clean','copy','compile-js', 'copy-js', 'compile-sass', 'compile-scss', 'compile-html', 'copy-fonts', 'copy-images']);
 gulp.task('default', ['server', 'watch']);
diff --git a/html/includes/scripts.html b/html/includes/scripts.html
@@ -3,4 +3,5 @@
 
 
 <script src="{{ root }}assets/js/timer.js"></script>
+<script src="{{ root }}assets/js/timeline.js"></script>
 <script src="{{ root }}assets/js/main.js"></script>
diff --git a/html/layouts/default.html b/html/layouts/default.html
@@ -9,14 +9,15 @@
         <title> Krypton :: {{title}}</title>
         <link rel="icon" type="image/png" href="assets/images/favicon.png" />
 
-        <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600" rel="stylesheet">
+        <!--link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600" rel="stylesheet"-->
         <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
 
         <!--Core CSS -->
         <link rel="stylesheet" href="{{root}}assets/css/bulma.css">
         <link rel="stylesheet" href="{{root}}assets/css/core.css">
         <!--Libraries-->
+        <link rel="stylesheet" href="{{root}}assets/fonts/cryptofont/css/cryptofont.min.css">
 
     </head>
     <body>

diff --git a/html/pages/index.html b/html/pages/index.html
diff --git a/images/icons/chevron-left.svg b/images/icons/chevron-left.svg
diff --git a/images/icons/chevron-right.svg b/images/icons/chevron-right.svg
diff --git a/images/icons/ico/blockchain.svg b/images/icons/ico/blockchain.svg
diff --git a/images/icons/ico/coins.svg b/images/icons/ico/coins.svg
diff --git a/images/icons/ico/community.svg b/images/icons/ico/community.svg
diff --git a/images/icons/ico/development.svg b/images/icons/ico/development.svg
diff --git a/images/icons/ico/ico-2.svg b/images/icons/ico/ico-2.svg
diff --git a/images/icons/ico/ico.svg b/images/icons/ico/ico.svg
diff --git a/images/icons/ico/platform-launch.svg b/images/icons/ico/platform-launch.svg
diff --git a/images/icons/ico/presale.svg b/images/icons/ico/presale.svg
diff --git a/images/icons/ico/security.svg b/images/icons/ico/security.svg
diff --git a/images/icons/ico/wallet.svg b/images/icons/ico/wallet.svg
diff --git a/images/icons/play.svg b/images/icons/play.svg
diff --git a/images/illustrations/bounty.svg b/images/illustrations/bounty.svg
diff --git a/images/illustrations/charts.svg b/images/illustrations/charts.svg
diff --git a/images/illustrations/tokens.svg b/images/illustrations/tokens.svg
diff --git a/js/timeline.js b/js/timeline.js
@@ -0,0 +1,282 @@
+jQuery(document).ready(function($){
+
+    "use strict";
+
+    var timelines = $('.krypton-timeline'),
+        eventsMinDistance = 60;
+
+    (timelines.length > 0) && initTimeline(timelines);
+
+    function initTimeline(timelines) {
+        timelines.each(function(){
+            var timeline = $(this),
+                timelineComponents = {};
+            //cache timeline components 
+            timelineComponents['timelineWrapper'] = timeline.find('.events-wrapper');
+            timelineComponents['eventsWrapper'] = timelineComponents['timelineWrapper'].children('.events');
+            timelineComponents['fillingLine'] = timelineComponents['eventsWrapper'].children('.filling-line');
+            timelineComponents['timelineEvents'] = timelineComponents['eventsWrapper'].find('a');
+            timelineComponents['timelineDates'] = parseDate(timelineComponents['timelineEvents']);
+            timelineComponents['eventsMinLapse'] = minLapse(timelineComponents['timelineDates']);
+            timelineComponents['timelineNavigation'] = timeline.find('.timeline-navigation');
+            timelineComponents['eventsContent'] = timeline.children('.events-content');
+
+            //assign a left postion to the single events along the timeline
+            setDatePosition(timelineComponents, eventsMinDistance);
+            //assign a width to the timeline
+            var timelineTotWidth = setTimelineWidth(timelineComponents, eventsMinDistance);
+            //the timeline has been initialize - show it
+            timeline.addClass('loaded');
+
+            //detect click on the next arrow
+            timelineComponents['timelineNavigation'].on('click', '.next', function(event){
+                event.preventDefault();
+                updateSlide(timelineComponents, timelineTotWidth, 'next');
+            });
+            //detect click on the prev arrow
+            timelineComponents['timelineNavigation'].on('click', '.prev', function(event){
+                event.preventDefault();
+                updateSlide(timelineComponents, timelineTotWidth, 'prev');
+            });
+            //detect click on the a single event - show new event content
+            timelineComponents['eventsWrapper'].on('click', 'a', function(event){
+                event.preventDefault();
+                timelineComponents['timelineEvents'].removeClass('selected');
+                $(this).addClass('selected');
+                updateOlderEvents($(this));
+                updateFilling($(this), timelineComponents['fillingLine'], timelineTotWidth);
+                updateVisibleContent($(this), timelineComponents['eventsContent']);
+            });
+
+            //on swipe, show next/prev event content
+            timelineComponents['eventsContent'].on('swipeleft', function(){
+                var mq = checkMQ();
+                ( mq == 'mobile' ) && showNewContent(timelineComponents, timelineTotWidth, 'next');
+            });
+            timelineComponents['eventsContent'].on('swiperight', function(){
+                var mq = checkMQ();
+                ( mq == 'mobile' ) && showNewContent(timelineComponents, timelineTotWidth, 'prev');
+            });
+
+            //keyboard navigation
+            $(document).keyup(function(event){
+                if(event.which=='37' && elementInViewport(timeline.get(0)) ) {
+                    showNewContent(timelineComponents, timelineTotWidth, 'prev');
+                } else if( event.which=='39' && elementInViewport(timeline.get(0))) {
+                    showNewContent(timelineComponents, timelineTotWidth, 'next');
+                }
+            });
+        });
+    }
+
+    function updateSlide(timelineComponents, timelineTotWidth, string) {
+        //retrieve translateX value of timelineComponents['eventsWrapper']
+        var translateValue = getTranslateValue(timelineComponents['eventsWrapper']),
+            wrapperWidth = Number(timelineComponents['timelineWrapper'].css('width').replace('px', ''));
+        //translate the timeline to the left('next')/right('prev') 
+        (string == 'next') 
+            ? translateTimeline(timelineComponents, translateValue - wrapperWidth + eventsMinDistance, wrapperWidth - timelineTotWidth)
+        : translateTimeline(timelineComponents, translateValue + wrapperWidth - eventsMinDistance);
+    }
+
+    function showNewContent(timelineComponents, timelineTotWidth, string) {
+        //go from one event to the next/previous one
+        var visibleContent =  timelineComponents['eventsContent'].find('.selected'),
+            newContent = ( string == 'next' ) ? visibleContent.next() : visibleContent.prev();
+
+        if ( newContent.length > 0 ) { //if there's a next/prev event - show it
+            var selectedDate = timelineComponents['eventsWrapper'].find('.selected'),
+                newEvent = ( string == 'next' ) ? selectedDate.parent('li').next('li').children('a') : selectedDate.parent('li').prev('li').children('a');
+
+            updateFilling(newEvent, timelineComponents['fillingLine'], timelineTotWidth);
+            updateVisibleContent(newEvent, timelineComponents['eventsContent']);
+            newEvent.addClass('selected');
+            selectedDate.removeClass('selected');
+            updateOlderEvents(newEvent);
+            updateTimelinePosition(string, newEvent, timelineComponents, timelineTotWidth);
+        }
+    }
+
+    function updateTimelinePosition(string, event, timelineComponents, timelineTotWidth) {
+        //translate timeline to the left/right according to the position of the selected event
+        var eventStyle = window.getComputedStyle(event.get(0), null),
+            eventLeft = Number(eventStyle.getPropertyValue("left").replace('px', '')),
+            timelineWidth = Number(timelineComponents['timelineWrapper'].css('width').replace('px', '')),
+            timelineTotWidth = Number(timelineComponents['eventsWrapper'].css('width').replace('px', ''));
+        var timelineTranslate = getTranslateValue(timelineComponents['eventsWrapper']);
+
+        if( (string == 'next' && eventLeft > timelineWidth - timelineTranslate) || (string == 'prev' && eventLeft < - timelineTranslate) ) {
+            translateTimeline(timelineComponents, - eventLeft + timelineWidth/2, timelineWidth - timelineTotWidth);
+        }
+    }
+
+    function translateTimeline(timelineComponents, value, totWidth) {
+        var eventsWrapper = timelineComponents['eventsWrapper'].get(0);
+        value = (value > 0) ? 0 : value; //only negative translate value
+        value = ( !(typeof totWidth === 'undefined') &&  value < totWidth ) ? totWidth : value; //do not translate more than timeline width
+        setTransformValue(eventsWrapper, 'translateX', value+'px');
+        //update navigation arrows visibility
+        (value == 0 ) ? timelineComponents['timelineNavigation'].find('.prev').addClass('inactive') : timelineComponents['timelineNavigation'].find('.prev').removeClass('inactive');
+        (value == totWidth ) ? timelineComponents['timelineNavigation'].find('.next').addClass('inactive') : timelineComponents['timelineNavigation'].find('.next').removeClass('inactive');
+    }
+
+    function updateFilling(selectedEvent, filling, totWidth) {
+        //change .filling-line length according to the selected event
+        var eventStyle = window.getComputedStyle(selectedEvent.get(0), null),
+            eventLeft = eventStyle.getPropertyValue("left"),
+            eventWidth = eventStyle.getPropertyValue("width");
+        eventLeft = Number(eventLeft.replace('px', '')) + Number(eventWidth.replace('px', ''))/2;
+        var scaleValue = eventLeft/totWidth;
+        setTransformValue(filling.get(0), 'scaleX', scaleValue);
+    }
+
+    function setDatePosition(timelineComponents, min) {
+        var i;
+        for (i = 0; i < timelineComponents['timelineDates'].length; i++) { 
+            var distance = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][i]),
+                distanceNorm = Math.round(distance/timelineComponents['eventsMinLapse']) + 2;
+            timelineComponents['timelineEvents'].eq(i).css('left', distanceNorm*min+'px');
+        }
+    }
+
+    function setTimelineWidth(timelineComponents, width) {
+        var timeSpan = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][timelineComponents['timelineDates'].length-1]),
+            timeSpanNorm = timeSpan/timelineComponents['eventsMinLapse'],
+            timeSpanNorm = Math.round(timeSpanNorm) + 4,
+            totalWidth = timeSpanNorm*width;
+        timelineComponents['eventsWrapper'].css('width', totalWidth+'px');
+        updateFilling(timelineComponents['timelineEvents'].eq(0), timelineComponents['fillingLine'], totalWidth);
+
+        return totalWidth;
+    }
+
+    function updateVisibleContent(event, eventsContent) {
+        var eventDate = event.data('date'),
+            visibleContent = eventsContent.find('.selected'),
+            selectedContent = eventsContent.find('[data-date="'+ eventDate +'"]'),
+            selectedContentHeight = selectedContent.height();
+
+        if (selectedContent.index() > visibleContent.index()) {
+            var classEnetering = 'selected enter-right',
+                classLeaving = 'leave-left';
+        } else {
+            var classEnetering = 'selected enter-left',
+                classLeaving = 'leave-right';
+        }
+
+        selectedContent.attr('class', classEnetering);
+        visibleContent.attr('class', classLeaving).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
+            visibleContent.removeClass('leave-right leave-left');
+            selectedContent.removeClass('enter-left enter-right');
+        });
+        eventsContent.css('height', selectedContentHeight+'px');
+    }
+
+    function updateOlderEvents(event) {
+        event.parent('li').prevAll('li').children('a').addClass('older-event').end().end().nextAll('li').children('a').removeClass('older-event');
+    }
+
+    function getTranslateValue(timeline) {
+        var timelineStyle = window.getComputedStyle(timeline.get(0), null),
+            timelineTranslate = timelineStyle.getPropertyValue("-webkit-transform") ||
+            timelineStyle.getPropertyValue("-moz-transform") ||
+            timelineStyle.getPropertyValue("-ms-transform") ||
+            timelineStyle.getPropertyValue("-o-transform") ||
+            timelineStyle.getPropertyValue("transform");
+
+        if( timelineTranslate.indexOf('(') >=0 ) {
+            var timelineTranslate = timelineTranslate.split('(')[1];
+            timelineTranslate = timelineTranslate.split(')')[0];
+            timelineTranslate = timelineTranslate.split(',');
+            var translateValue = timelineTranslate[4];
+        } else {
+            var translateValue = 0;
+        }
+
+        return Number(translateValue);
+    }
+
+    function setTransformValue(element, property, value) {
+        element.style["-webkit-transform"] = property+"("+value+")";
+        element.style["-moz-transform"] = property+"("+value+")";
+        element.style["-ms-transform"] = property+"("+value+")";
+        element.style["-o-transform"] = property+"("+value+")";
+        element.style["transform"] = property+"("+value+")";
+    }
+
+    //based on http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascript
+    function parseDate(events) {
+        var dateArrays = [];
+        events.each(function(){
+            var dateComp = $(this).data('date').split('/'),
+                newDate = new Date(dateComp[2], dateComp[1]-1, dateComp[0]);
+            dateArrays.push(newDate);
+        });
+        return dateArrays;
+    }
+
+    function parseDate2(events) {
+        var dateArrays = [];
+        events.each(function(){
+            var singleDate = $(this),
+                dateComp = singleDate.data('date').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 daydiff(first, second) {
+        return Math.round((second-first));
+    }
+
+    function minLapse(dates) {
+        //determine the minimum distance among events
+        var i;
+        var dateDistances = [];
+        for (i = 1; i < dates.length; i++) { 
+            var distance = daydiff(dates[i-1], dates[i]);
+            dateDistances.push(distance);
+        }
+        return Math.min.apply(null, dateDistances);
+    }
+
+    /*
+		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
+        );
+    }
+
+    function checkMQ() {
+        //check if mobile or desktop device
+        return window.getComputedStyle(document.querySelector('.krypton-timeline'), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "");
+    }
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,8 @@
   "private": true,
   "dependencies": {
     "bulma": "^0.6.2",
-    "jquery": "2.2.4",
-    "feather-icons": "^4.7.0"
+    "cryptofont": "^0.1.1",
+    "feather-icons": "^4.7.0",
+    "jquery": "2.2.4"
   }
 }
diff --git a/scss/core.scss b/scss/core.scss
@@ -21,5 +21,6 @@ TABLE OF CONTENTS
 @import 'partials/layout';
 @import 'partials/features';
 @import 'partials/buttons';
+@import 'partials/timeline';
 @import 'partials/pageloader';
 @import 'partials/animations';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,4 +3,5 @@


		<script src="{{ root }}assets/js/timer.js"></script>
		<script src="{{ root }}assets/js/timeline.js"></script>
		<script src="{{ root }}assets/js/main.js"></script>