Adding nav and webp screenshots for demos
Glen Cheney
11 years ago
parent
3aa94d53f9
commit
7a962634d0
@ -0,0 +1,26 @@
|
||||
|
||||
<nav class="site-nav collapsed" id="nav" role="primary">
|
||||
<div class="js-tray site-nav__tray">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
{% for post in site.demos %}
|
||||
<div class="span3 figure-wrap">
|
||||
<a href="/{{ post.slug }}">
|
||||
<figure>
|
||||
<div class="keep-ratio four-three">
|
||||
<img src="{{ site.url }}/img/demos/{{ post.slug }}.webp" alt="{{ post.label }}" />
|
||||
</div>
|
||||
<figcaption>{{ post.label }}</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-nav__band">
|
||||
<div class="container-fluid">
|
||||
<button class="js-nav-toggle pull-right" data-close-label="Close Nav">Open Nav</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@ -0,0 +1,173 @@
|
||||
/**
|
||||
* @author Glen Cheney
|
||||
* Debounce plugin is included in shuffle
|
||||
*/
|
||||
|
||||
var Support = (function() {
|
||||
'use strict';
|
||||
|
||||
var self = {},
|
||||
|
||||
// some small (2x1 px) test images for each feature
|
||||
webpImages = {
|
||||
basic: 'data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==',
|
||||
lossless: 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA='
|
||||
};
|
||||
|
||||
self.webp = function( feature ) {
|
||||
var dfd = $.Deferred();
|
||||
|
||||
$('<img>')
|
||||
.on('load', function() {
|
||||
// the images should have these dimensions
|
||||
if ( this.width === 2 && this.height === 1 ) {
|
||||
dfd.resolve();
|
||||
} else {
|
||||
dfd.reject();
|
||||
}
|
||||
})
|
||||
|
||||
// Reject deferred on error
|
||||
.on('error', function() {
|
||||
dfd.reject();
|
||||
})
|
||||
|
||||
// Set the image src
|
||||
.attr('src', webpImages[ feature || 'basic' ]);
|
||||
|
||||
return dfd.promise();
|
||||
};
|
||||
|
||||
return self;
|
||||
}());
|
||||
|
||||
|
||||
var Polyfill = (function( $, Support ) {
|
||||
'use strict';
|
||||
|
||||
var init = function() {
|
||||
|
||||
// If the deferred object in webp is rejected, call the webp polyfill function
|
||||
Support.webp().fail( webp );
|
||||
},
|
||||
|
||||
webp = function() {
|
||||
$('img[src$=".webp"]').each(function() {
|
||||
this.src = this.src.replace('.webp', '.jpg');
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
init: init
|
||||
};
|
||||
}( jQuery, Support ));
|
||||
|
||||
|
||||
var NAV = (function( $ ) {
|
||||
'use strict';
|
||||
|
||||
function NavTray( element ) {
|
||||
this.$el = $( element );
|
||||
this.init();
|
||||
}
|
||||
|
||||
NavTray.prototype.init = function() {
|
||||
this
|
||||
.setVars()
|
||||
.listen();
|
||||
|
||||
setTimeout( $.proxy( this.saveHeight, this ), 0);
|
||||
};
|
||||
|
||||
NavTray.prototype.setVars = function() {
|
||||
var self = this;
|
||||
|
||||
self.isOpen = false;
|
||||
self.$window = $( window );
|
||||
self.$trigger = self.$el.find('.js-nav-toggle');
|
||||
self.$tray = self.$el.find('.js-tray');
|
||||
|
||||
self.$trigger.data( 'openLabel', self.$trigger.text() );
|
||||
|
||||
return self;
|
||||
};
|
||||
|
||||
NavTray.prototype.saveHeight = function() {
|
||||
var self = this,
|
||||
height = self.$tray.children().first().outerHeight();
|
||||
|
||||
self.collapseHeight = height;
|
||||
|
||||
return height;
|
||||
};
|
||||
|
||||
NavTray.prototype.listen = function() {
|
||||
var self = this;
|
||||
|
||||
self.$trigger.on( 'click', $.proxy( self.toggle, self ) );
|
||||
self.$window.on( 'resize', $.debounce( 250, $.proxy( self.onResize, self ) ) );
|
||||
|
||||
return self;
|
||||
};
|
||||
|
||||
NavTray.prototype.onResize = function() {
|
||||
var self = this;
|
||||
|
||||
self.saveHeight();
|
||||
};
|
||||
|
||||
NavTray.prototype.toggle = function() {
|
||||
var self = this;
|
||||
|
||||
self.toggleBtnText();
|
||||
|
||||
if ( self.isOpen ) {
|
||||
self.close();
|
||||
} else {
|
||||
self.open();
|
||||
}
|
||||
|
||||
return self;
|
||||
};
|
||||
|
||||
NavTray.prototype.open = function() {
|
||||
var self = this;
|
||||
|
||||
self.$el.removeClass('collapsed');
|
||||
self.$tray.css( 'height', self.collapseHeight );
|
||||
|
||||
self.isOpen = true;
|
||||
};
|
||||
|
||||
NavTray.prototype.close = function() {
|
||||
var self = this;
|
||||
|
||||
self.$el.addClass('collapsed');
|
||||
self.$tray.css( 'height', '' );
|
||||
|
||||
self.isOpen = false;
|
||||
};
|
||||
|
||||
|
||||
NavTray.prototype.toggleBtnText = function() {
|
||||
var self = this,
|
||||
key= self.isOpen ? 'openLabel' : 'closeLabel';
|
||||
|
||||
self.$trigger.text( self.$trigger.data( key ) );
|
||||
|
||||
return self;
|
||||
};
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
return new NavTray( document.getElementById('nav') );
|
||||
}
|
||||
};
|
||||
|
||||
}( jQuery ));
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
NAV.init();
|
||||
Polyfill.init();
|
||||
});
|
||||
Loading…
Reference in New Issue