Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Require.js issue
/*
* Copyright (c) 2012-2013, Syrp. All rights reserved.
*
* Author / Designer - Cam O'Connell
* behance.net/camoconnell
* Feb 2013
*
*/
define([ 'require'
,'jquery'
,'raphael'
,'plugins'
,'models/svg'
,'utils'
,'scroll'
,'resize'
],function(require) {
var $ = require('jquery'),
Raphael = require('raphael'),
plugins = require('plugins'),
svg = require('models/svg'),
utils = require('utils'),
scroll = require('scroll'),
resize = require('resize');
App = {
// Live or Local
environment : WP.ENVIRONMENT,
// Backbone
Models : {}, // Data
Collections : {}, // Groups of data
Views : {}, // Pages / Posts
Router : {}, // Url handling
Controller : {}, // Manages App
// Wordpress
url : WP.URL,
themeurl : WP.THEME_URL,
ajaxurl : WP.AJAX_URL,
nonce : WP.NONCE,
pages : [],
posts : [],
// Selectors
el : {
win : $(window),
doc : $(document),
body : $("body"),
},
// Device detection
smart : {
device : ( WP.DEVICE === 'true' ) ? true : false,
tablet : ( WP.TABLET === 'true' ) ? true : false,
phone : ( WP.MOBILE === 'true' ) ? true : false
},
// Screen properties
screen : {
width : null,
height : null
},
utils : {},
// misc
misc : {
lazylinedata : svg.get('lazyline')
}
};
var NMF = function () {
var $logo = $('.logo-wrap'),
$header = $('header'),
$headerInner = $('header .inner'),
$footer = $('footer'),
$footerSocial = $('footer .footer-social'),
$journal = $('#journal');
/*
* Header
*/
var header = (function(){
var init = function(){
buildIcons();
events();
};
var events = function(){
menu();
}
var menu = function(){
var scope, id;
/* events */
var onClick = function(){
scope = $(this),
id = scope.data('id');
App.pages.update( id );
return false;
},
onMouseOver = function(){
scope = $(this),
href = scope.attr('href');
if( App.smart.device || href !== '#contact' ) return;
footer.onMouseOver();
},
onMouseOut = function(){
scope = $(this),
href = scope.attr('href');
if( App.smart.device || href !== '#contact' ) return;
footer.onMouseOut();
}
$("a[href^='http://" + top.location.host.toString() + "']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/'])").on('click', onClick ).on('mouseover', onMouseOver ).on('mouseout', onMouseOut );
$("a[href='#contact']").on('click', function(){
footer.update();
return false;
}).on('mouseover', onMouseOver ).on('mouseout', onMouseOut );
}
var buildIcons = function(){
var menuIcons = [
{ 'id' : '#menu-item-32',
'override' : 'icon-home'},
{ 'id' : '#menu-item-29',
'override' : 'icon-about'},
{ 'id' : '#menu-item-28',
'override' : 'icon-journal'},
{ 'id' : '#menu-item-30',
'override' : 'icon-goodwords'},
{ 'id' : '#menu-item-31',
'override' : 'icon-prices'},
{ 'id' : '#menu-item-33',
'override' : 'icon-sayhi'}
];
var d = 0;
$.each(menuIcons, function( i , v ){
$(this.id).lazylinepainter({
'svgData' : App.misc.lazylinedata,
'strokeWidth':1.5,
'strokeColor':'#fefbf1',
'overrideKey':this.override,
'width':'auto',
'delay':d,
'onComplete' : function(){
if( i == (menuIcons.length-1) ) {
dressing();
}
}
}).lazylinepainter( App.misc.applyline );
d += 1000;
});
function dressing(){
var dressingData = {
containers : [
$("#right-motif"),
$("#left-motif")
],
motifs : [
"dressing-up-jump",
"dressing-down-jump",
"dressing-down-scribble",
"dressing-up-zag",
"dressing-down-zag"
]
};
var motifAr;
function returnMotif() {
var newMotif = dressingData.motifs[Math.floor(Math.random()*dressingData.motifs.length)];
return newMotif;
}
$.each(dressingData.containers, function( i , v ){
var newMotif = returnMotif();
v.lazylinepainter({
'svgData' : App.misc.lazylinedata,
'strokeWidth':1.5,
'width':'100%',
'strokeColor':'#fefbf2',
'overrideKey' : returnMotif()
}).lazylinepainter('paint');
});
function getRandomArbitary (min, max) {
return Math.random() * (max - min) + min;
}
var mTop = 0,
heightUnit = App.screen.height / 10;
$('.dressing .lazy-line').each(function(){
if( mTop == 0)
mTop = getRandomArbitary ( heightUnit*2, heightUnit*8 );
else if( mTop < heightUnit*5 )
mTop = getRandomArbitary ( heightUnit*4, heightUnit*8 );
else if( mTop >= heightUnit*5 )
mTop = getRandomArbitary ( heightUnit*2 , heightUnit*5 );
$(this).css({'margin-top' : mTop+'px' });
});
}
}
// Public Scroll method
var onscroll = function (scrollTop, scrollDirection) {
};
var onresize = function () {}
var onload = function(){
}
return {
onscroll : onscroll,
onresize : onresize,
onload : onload,
init : init
}
})();
/*
* Footer
*/
var footer = (function(){
var state = 'closed';
var init = function(){
$('footer input').on('focus', function(){
$(this).animateBG(150, 0, 1500);
});
$(".footer-social h1").lettering();
}
var update = function(){
var pos,
contentOpacity;
if( state === 'closed' ){
pos = 120;
state = 'open';
contentOpacity = 0;
} else {
pos = App.screen.height+15
state = 'closed';
contentOpacity = 1;
}
$('.current-page .content-wrap').animate({'opacity': contentOpacity });
$footer.animate({'top': pos},500,function(){
var overflow = ( state === 'closed' ) ? 'hidden' : 'visible';
$('body, html').css({'overflow':overflow});
});
};
var onscroll = function (scrollTop, scrollDirection) {};
var onresize = function () {
var pos = ( state === 'closed' ) ? App.screen.height+15 : 100;
$footer.css({'top': pos});
}
var onload = function(){ }
var onMouseOver = function(){
if( state === 'open' ) return;
$('.footer-top').animateBG(92, 0, 1500);
$footer.animate({'top': App.screen.height+10}, 400);
}
var onMouseOut = function(){
if( state === 'open' ) return;
$footer.animate({'top': App.screen.height+15}, 400);
}
return {
onscroll : onscroll,
onresize : onresize,
onload : onload,
init : init,
update : update,
onMouseOver : onMouseOver,
onMouseOut : onMouseOut
}
})();
/*
Journal
*/
var journal = (function(){
// Private vars
var category = 'news',
loaded = {
posts: false
},
numOfPosts = 3,
curNumOfPosts,
d = 0; // delay
var init = function(){
// Public Load Posts method
loaded.posts = false;
$.ajax({
type: "post",
url: App.ajaxurl,
data: ({
action: 'request_handler',
id: 'posts',
cat_name: category,
num_of_posts: numOfPosts,
ajaxCustomNonce: App.nonce
}),
success: function (data) {
$('#posts-wrap').append(data);
// $('.post-vid').fitVids();
$('#posts-wrap').animate({
'opacity': 1
}, 300);
$('#posts-wrap ul li .post-inner ').each(function () {
$(this).delay(d).animate({
'opacity': 1
}, 300, function () {});
d += 150;
});
loaded.posts = true;
}
}); // ajax
}
// Public Scroll method
var onscroll = function (scrollTop, scrollDirection) {
};
var onresize = function () {}
var onload = function(){
}
return {
onscroll : onscroll,
onresize : onresize,
onload : onload,
init : init
}
})();
/*
Intro
*/
var home = (function(){
var init = function(){
svg.build('logo');
$("#intro h1").lettering();
$("#logo-border").lazylinepainter({
'svgData' : App.misc.lazylinedata,
'strokeWidth':1.5,
'strokeColor':'#fefbf2'
}).lazylinepainter('stamp');
$("#logo-squiggle").lazylinepainter({
'svgData' : App.misc.lazylinedata,
'strokeWidth':1.5,
'strokeColor':'#fefbf2'
}).lazylinepainter(App.misc.applyline);
// Share social widgets
if ( App.smart.device ) {
$('#sharebox').click(function () {
loadSocialBtns();
});
} else {
$('#sharebox').mouseover(function () {
loadSocialBtns();
});
}
var loadSocialBtns = function () {
var $target = $('.proper');
Socialite.load($target); // async from socialite.js
$('.button').fadeOut(300, function(){
$target.fadeIn(400);
});
};
}
// Public Scroll method
var onscroll = function (scrollTop, scrollDirection) {
};
var onresize = function () {}
var onload = function(){
}
return {
onscroll : onscroll,
onresize : onresize,
onload : onload,
init : init
}
})();
var init = function () {
header.init();
footer.init();
home.init();
//journal.init();
}
var onload = function () {
header.onload();
footer.onload();
home.onload();
}
// Public Scroll method
var onscroll = function (scrollTop, scrollDirection) {
//header.onscroll(scrollTop, scrollDirection);
//footer.onscroll(scrollTop, scrollDirection);
};
// Public Resize method
var onresize = function () {
$('article#content > section .inner').css({ 'height' : App.screen.height });
footer.onresize( App.screen.width , App.screen.height );
}
return { onscroll : onscroll, onresize : onresize, init : init, onload : onload }
};
var nmf;
function setup() {
// we want to animate SVG fill and stroke properties
$.Color.hook( "fill stroke" );
$('article#content > section').addClass('current-page');
//console.log(resize);
resize.update();
// aplly either paint or stamp according to device used
App.misc.applyline = ( App.smart.device ) ? 'stamp' : 'paint';
$.ajax({
type: "post",
url: App.url+'?json=get_page_index',
success: function ( data ) {
$.each( data.pages , function(){
App.pages.push({
title : this.title,
slug : this.slug,
id : this.id,
acf : this.acf,
linkColour : this.acf.link_colour
})
})
setupBb();
}
});
}
App.el.doc.ready( setup );
App.el.win.load(function () {
//nmf.onload();
});
function setupBb(){
nmf = new NMF;
nmf.init();
console.log(scroll);
scroll.add({ 'callback': nmf.onscroll });
resize.add({ 'callback': nmf.onresize });
scroll.update();
resize.update();
App.el.win.resize( resize.update() );
if( !App.smart.device ) App.el.win.scroll( scroll.update() );
// window.template = function(id){
// return _.template( $('#' id).html());
// };
// Page Model
App.Models.Page = Backbone.Model.extend({
defaults : {
title : 'none',
slug : 'none',
id : 0,
acf : '',
content : 'none',
loaded : false ,
linkColour : '#fefbf1' // default to white
}
});
// Define Collection with Model defaults
App.Collections.Pages = Backbone.Collection.extend({ model: App.Models.Page });
// View for all people
App.Views.Pages = Backbone.View.extend({
initialize: function(){
this._pageViews = {}; // view cache for further reuse
this.render();
this.setupPt();
},
update: function( id ){
this._pageViews[ id ].update();
},
render: function(){
var context = this;
this.collection.each( function(page){
var pageView = new App.Views.Page({ model: page });
this._pageViews[page.get('id')] = pageView;
this.listenTo( pageView, 'transition' , this.nextPage );
$('article#content').append( pageView.el );
}, this );
},
// CSS Page transitions
setupPt : function(){
this.transitions = [
{ "outClass" : 'pt-page-moveToTopFade',
"inClass" : 'pt-page-moveFromBottomFade'
},
{ "outClass" : 'pt-page-moveToBottomFade',
"inClass" : 'pt-page-moveFromTopFade'
},
{ "outClass" : 'pt-page-moveToLeftEasing pt-page-ontop',
"inClass" : 'pt-page-moveFromRight'
},
{ "outClass" : 'pt-page-moveToRightEasing pt-page-ontop',
"inClass" : 'pt-page-moveFromLeft'
},
{ "outClass" : 'pt-page-moveToTopEasing pt-page-ontop',
"inClass" : 'pt-page-moveFromBottom'
},
{ "outClass" : 'pt-page-moveToBottomEasing pt-page-ontop',
"inClass" : 'pt-page-moveFromTop'
},
{ "outClass" : 'pt-page-scaleDown',
"inClass" : 'pt-page-moveFromRight pt-page-ontop'
},
{ "outClass" : 'pt-page-scaleDown',
"inClass" : 'pt-page-scaleUpDown pt-page-delay300'
},
{ "outClass" : 'pt-page-moveToLeft pt-page-ontop',
"inClass" : 'pt-page-scaleUp'
},
{ "outClass" : 'pt-page-moveToBottom pt-page-ontop',
"inClass" : 'pt-page-scaleUp'
},
{ "outClass" : 'pt-page-scaleDownCenter',
"inClass" : 'pt-page-scaleUpCenter pt-page-delay400'
},
{ "outClass" : 'pt-page-rotateBottomSideFirst',
"inClass" : 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop'
},
{ "outClass" : 'pt-page-flipOutRight',
"inClass" : 'pt-page-flipInLeft pt-page-delay500'
}
]
this.isAnimating = false;
this.endCurrPage = false;
this.endNextPage = false;
this.animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
};
// animation end event name
this.animEndEventName = this.animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
// support css animations
this.support = Modernizr.cssanimations;
},
nextPage : function( event ) {
if( this.isAnimating ) return false;
this.isAnimating = true;
var $currPage = $('.current-page');
var $nextPage = event.$el.addClass( 'current-page' ),
outClass = this.transitions[ Math.floor(Math.random() * this.transitions.length) ].outClass,
inClass = this.transitions[ Math.floor(Math.random() * this.transitions.length) ].inClass;
$currPage.addClass( outClass ).on( this.animEndEventName, function() {
$currPage.off( this.animEndEventName );
this.endCurrPage = true;
if( this.endNextPage )
this.onEndAnimation( $currPage, $nextPage );
} );
$nextPage.addClass( inClass ).on( this.animEndEventName, function() {
$nextPage.off( this.animEndEventName );
this.endNextPage = true;
if( this.endCurrPage )
this.onEndAnimation( $currPage, $nextPage );
} );
if( !this.support ) {
this.onEndAnimation( $currPage, $nextPage );
}
},
onEndAnimation : function( $outpage, $inpage ) {
this.endCurrPage = false;
this.endNextPage = false;
this.resetPage( $outpage, $inpage );
this.isAnimating = false;
},
resetPage : function( $outpage, $inpage ) {
$outpage.attr( 'class', 'page' );
$inpage.attr( 'class', 'page current-page' );
}
});
// The View for a Page
App.Views.Page = Backbone.View.extend({
tagName: 'section',
attributes: {
class: "page background"
},
initialize: function(){
this.$el.attr('id', this.model.get('slug') );
_.bindAll(this);
// Render on content change
this.listenTo( this.model , 'change:content' , this.render );
},
update: function(){
var loaded = this.model.get('loaded');
if( !loaded )
this.loadPage( this.refresh );
else
this.refresh()
return this;
},
render: function(){
this.$el.html( this.model.get( 'content' ) )
},
refresh : function(){
$('#menu-nmf-menu svg path').animate({'stroke':this.model.get('linkColour')},1500);
$('#menu-nmf-menu a').animate({'color':this.model.get('linkColour')},1500);
this.trigger('transition', this);
this.saveUrl();
},
saveUrl : function(){
var slug = this.model.get( 'slug' );
Backbone.history.navigate( ( slug === 'sample-page' ) ? '' : slug );
},
onscroll : function (scrollTop, scrollDirection) { },
onresize : function () { },
onload : function(){ },
loadPage : function( callback ){
var url = App.url + '/' + this.model.get('slug'),
model = this.model,
context = this;
$.get( url , function( data ) {
var response = $(data);
response = response.find('section > .inner');
model.set( 'content', response );
model.set( 'loaded' , true );
var backgroundUrl = model.get('acf').background;
context.$el.css({ 'background' : 'url('+backgroundUrl+') no-repeat center center fixed' });
// $('<img/>').attr('src', backgroundUrl).load(function() {
// context.$el.css('background-image', 'url('+backgroundUrl+') no-repeat center center fixed');
//
if (typeof callback === "function")
callback();
//});
});
}
});
App.Router = Backbone.Router.extend({
routes: {
'' : 'index',
"/post/:id": "showPage",
'!/category/:slug/:id/:page/' : 'category',
'!/404/' : 'error'
},
initialize: function(options){
this.controller = options.controller;
},
showPage: function(id){
this.controller.update(id);
},
index: function(){
this.controller.update(11);
},
show: function(id){
console.log("Show route has been called.. with id equals : "+id);
return false;
}
});
var pagesCollection = new App.Collections.Pages( App.pages );
App.pages = new App.Views.Pages({ collection: pagesCollection });
var router = new App.Router({controller: App.pages});
var rootPath = ( App.environment === 'Local' ) ? '/nickmorrisonfitness/' : '';
console.log(rootPath);
Backbone.history.start({pushState:true, root:rootPath, silent: true});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.