Permalink
Browse files

Implement vast improvements to animation logic, code cleanup and opti…

…mization, and incorporate jshintrc
  • Loading branch information...
1 parent 566631b commit 622abe6ca1ddbf71ecc89199a9a4ce96f04e44d7 @kelyvin committed Mar 6, 2016
View
@@ -0,0 +1,21 @@
+{
+ "node": true,
+ "esnext": true,
+ "bitwise": true,
+ "camelcase": true,
+ "curly": true,
+ "eqeqeq": true,
+ "immed": true,
+ "indent": 4,
+ "latedef": true,
+ "newcap": true,
+ "noarg": true,
+ "quotmark": "double",
+ "undef": true,
+ "unused": true,
+ "strict": true,
+ "predef": [
+ "$",
+ "CaffeineTheme"
+ ]
+}
Oops, something went wrong.
Oops, something went wrong.
@@ -1,22 +1,23 @@
-'use strict';
+"use strict";
$(function() {
var CaffeineTheme;
- return window.CaffeineTheme = CaffeineTheme = {
- version: '2.1.0',
+
+ window.CaffeineTheme = CaffeineTheme = {
+ version: "2.1.0",
search: {
container: function() {
- return $('#results');
+ return $("#results");
},
form: function(action) {
- return $('#search-container')[action]();
+ return $("#search-container")[action]();
}
},
context: function() {
var className;
- className = document.body.className.split(' ')[0].split('-')[0];
- if (className === '') {
- return 'error';
+ className = document.body.className.split(" ")[0].split("-")[0];
+ if (className === "") {
+ return "error";
} else {
return className;
}
@@ -30,13 +31,14 @@ $(function() {
readTime: function() {
var DateInDays;
DateInDays = function(selector, cb) {
+ /*jshint unused:vars*/
return $(selector).each(function() {
var postDate, postDateInDays, postDateNow;
postDate = $(this).html();
postDateNow = new Date(Date.now());
postDateInDays = Math.floor((postDateNow - new Date(postDate)) / 86400000);
if (postDateInDays === 0) {
- postDateInDays = 'today';
+ postDateInDays = "today";
} else if (postDateInDays === 1) {
postDateInDays = "yesterday";
} else {
@@ -51,19 +53,20 @@ $(function() {
});
});
};
- return DateInDays('.meta > time');
+
+ return new DateInDays(".meta > time");
},
device: function() {
var h, w;
w = window.innerWidth;
h = window.innerHeight;
if (w <= 480) {
- return 'mobile';
+ return "mobile";
}
if (w <= 1024) {
- return 'tablet';
+ return "tablet";
}
- return 'desktop';
+ return "desktop";
}
};
});
@@ -1,8 +1,8 @@
-'use strict';
+"use strict";
$(function() {
var openHash = "#open",
- _expand,
+ _expandCover,
_isOpen,
_isTagsOverlayOpen,
_toggleLocation,
@@ -14,13 +14,14 @@ $(function() {
$cover,
$tagsOverlay;
- $navHeader = $('#default-nav-header');
- $tagsButton = $('.tags-button');
- $homeButton = $navHeader.find('#home-button');
- $tagsOverlay = $('.tags-overlay');
+ $cover = $(".cover");
+ $navHeader = $("#default-nav-header");
+ $tagsButton = $(".tags-button");
+ $homeButton = $navHeader.find("#home-button");
+ $tagsOverlay = $(".tags-overlay");
- _expand = function() {
- $('main, .cover, .links > li, html').toggleClass('expanded');
+ _expandCover = function() {
+ $cover.toggleClass("expanded");
};
// Checks if the home page is currently opened
@@ -40,7 +41,7 @@ $(function() {
// Toggles the search/tags overlay
_toggleTagsOverlay = function() {
$tagsOverlay.toggleClass("show");
- $tagsButton.find('i').toggleClass("fa-search fa-close");
+ $tagsButton.find("i").toggleClass("fa-search fa-close");
};
// Checks if the search/tags overlay is visible
@@ -56,33 +57,33 @@ $(function() {
}
_toggleLocation();
- return _expand();
+ return _expandCover();
};
$tagsButton.click(function() {
_toggleTagsOverlay();
});
- $('.nav-blog > a').click(function(event) {
+ $(".nav-blog > a").click(function(event) {
var isOpen = _isOpen();
- if (CaffeineTheme.is('page', 'home')) {
+ if (CaffeineTheme.is("page", "home")) {
event.preventDefault();
location.hash = openHash;
// Only toggle the cover if it wasn't already open
if (!isOpen) {
- return _expand();
+ return _expandCover();
}
}
});
$homeButton.click(_defaultLogoNavEvent);
- $('.open-link').click(_defaultLogoNavEvent);
+ $(".open-link").click(_defaultLogoNavEvent);
- if (CaffeineTheme.is('page', 'home')) {
+ if (CaffeineTheme.is("page", "home")) {
if (!_isOpen()) {
- return _expand();
+ return _expandCover();
}
}
});
View
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
$(function() {
var $posts = $('.page-index ol.posts'),
@@ -9,20 +9,24 @@ $(function() {
el.dataset.page = CaffeineTheme.context();
el.dataset.device = CaffeineTheme.device();
CaffeineTheme.readTime();
- if (!CaffeineTheme.is('device', 'desktop')) {
+
+ if (!CaffeineTheme.is("device", "desktop")) {
FastClick.attach(el);
}
+
if (window.profile_title) {
- $('.profile-title').text(window.profile_title);
+ $(".profile-title").text(window.profile_title);
}
+
if (window.profile_resume) {
- $('#profile-resume').text(window.profile_resume);
+ $("#profile-resume").text(window.profile_resume);
}
- if (CaffeineTheme.is('page', 'post')) {
- $('main').readingTime({
- readingTimeTarget: '.reading-time > span'
+
+ if (CaffeineTheme.is("page", "post")) {
+ $("main").readingTime({
+ readingTimeTarget: ".reading-time > span"
});
- $('.content').fitVids();
+ $(".content").fitVids();
}
// Sets up masonry effects
@@ -32,12 +36,12 @@ $(function() {
percentPosition: true
});
} else {
- $posts.find(cardName).css('width', '100%');
+ $posts.find(cardName).css("width", "100%");
}
- $(window).load(function() {
- $('.cover').addClass('animated');
+ $posts.addClass("animated fade-in");
+ $(window).load(function() {
// Sets up scroll reveal effects
if (window.ScrollReveal && $(cardName).length > 0) {
window.sr = ScrollReveal();
@@ -1,7 +1,10 @@
.cover {
- height: $aside-height-collapsed;
- position: absolute;
+ position: fixed;
+ height: 100%;
width: 100%;
+ opacity: 0;
+ z-index: 0;
+ display: block;
text-align: center;
overflow: hidden;
background: center center no-repeat;
@@ -11,26 +14,18 @@
background-size: cover;
background-color: $primary-color;
- &.animated {
- transition: all $aside-animation-time $aside-animation;
- }
-
&.expanded {
- height: 100%;
+ opacity: 1;
z-index: 15;
- position: fixed;
-
- .profile {
- transform: translate3d(0, 0, 0);
- opacity: 100;
- }
.blog-header {
display: none;
}
}
- &.container {
+ .background-container {
+ height: 100%;
+ width: 100%;
font-weight: $font-weight-thin;
text-align: center;
color: $gray-lightest;
@@ -41,7 +36,7 @@
}
.blog-header {
- z-index: 2;
+ z-index: 3;
position: absolute;
width: 100%;
text-align: center;
@@ -83,30 +78,14 @@
@include shadow(2);
}
}
-
- transform: translate3d(0, -$aside-height-collapsed, 0);
- opacity: 0;
}
.call-to-action-container {
margin: 18px 0;
-}
-
-.navigation {
- .links {
- margin: 0;
- list-style: none;
-
- li {
- display: inline-block;
- line-height: 16px;
- border-left: 1px solid $slate-white;
- &:first-child {
- border: none;
- }
-
- &.expanded {
+ .navigation {
+ .links {
+ li {
display: inline-block;
margin: 0 5px;
border-radius: 20px;
@@ -132,6 +111,23 @@
@include btn-cover-with-border;
}
}
+ }
+ }
+}
+
+.navigation {
+ .links {
+ margin: 0;
+ list-style: none;
+
+ li {
+ display: inline-block;
+ line-height: 16px;
+ border-left: 1px solid $slate-white;
+
+ &:first-child {
+ border: none;
+ }
a {
display: block;
@@ -16,13 +16,13 @@
i {
position: relative;
font-size: 20px;
- transition: all $aside-animation-time;
color: $slate-white;
background: $primary-color;
border: 2px solid $slate-white;
border-radius: 50%;
padding: 12px;
@include shadow(2);
+ @extend .animated;
&:hover {
cursor: pointer;
@@ -46,7 +46,6 @@
&.nav-header-fixed {
position: fixed;
- transition: all $aside-animation-time;
}
&.mobile {
Oops, something went wrong.

0 comments on commit 622abe6

Please sign in to comment.