www.gusucode.com > 200套html5精品模板1_50 > 200套html5精品模板1_50/038/default/core/js/mylibs/responsive.js

    
/* Copyright (c) 2011 Ernesto Mendez <der-design.com> */

(function($) {

var wrap, _window, footerClear, accordionSlider, piecemaker, overlayDescs, portfolioSpecial;

$(document).ready(function() {

	wrap = $('#wrap'),
	_window = $(window);
	accordionSlider = $('#slider.accordion');
	piecemaker = $('#slider.piecemaker, object#slider');
	footerClear = $('footer[role=contentinfo] .column + .clear');
	overlayDescs = $('.frame .overlay-desc').each(function() { this.data = {self: $(this)}; });
	portfolioSpecial = $('#portfolio .column-grid.special');

	mobile_ui();
	responsive_events();

	if ( Rising.ie.is_ie() ) { $('.frame img').wrap('<div class="frame-inner"></div>'); }

});

function mobile_ui() {

	// Add Mobile navigation
	var nav = $('header nav[role=navigation]'),
		select = $('<select id="mobile-navigation"></select>'),
		navUl = nav.find('> ul'),
		navItems = navUl.find('> li'),
		menuItems = [];

	if ( Rising.ie.is(8) ) {
		// For some reason optgroups don't work on IE8
		var html = '',
			link, links = navUl.find('a');
		links.each(function(i) {
			link = $(links[i]);
			html += _.sprintf('<option value="%s">%s</option>', link.attr('href'), link.html());
		});
	} else {
		var html = navUl.html()
			.replace(/(alt|title|class|id)(\s+)?\=(\s+)?(\'|\")(.*?)(\'|\")/g, '')
			.replace(/href/g, 'value')
			.replace(/<(\/)?ul>/g,'<$1optgroup>')
			.replace(/<li(\s)?>(\s+)?<a|<a/g, '<option')
			.replace(/(<\/a\>)?<\/li>/g, '</option>')
			.replace(/<\/a>/g,'')
			.replace(/[ ]+/g,' ');
	}

	select.html(html).change(function() { window.location = $(this).attr('value'); });
	select.find('optgroup').attr('label', '- menu -').append('<option value="#"></option>');
	var active = navUl.find('> li.current-menu-item > a, > li.current_page_item > a').attr('href');
	select.find('option').each(function() {
		var self = $(this);
		if ( self.attr('value') == active ) {
			self.attr('selected', 'true');
			return false;
		}
	});

	nav.before(select);

	// Replace common-scroller-controls with mobile controls
	var scrollerControls = $('#home ul.common-scroller-controls'),
		mobileControls = '<ul class="mobile-scroller-controls"><li class="prev"></li><li class="next"></li></ul>';
	scrollerControls.before(mobileControls)

	mobileControls = $('#home ul.mobile-scroller-controls').data('rel', 0);

	$('#home ul.mobile-scroller-controls li').each(function() {
		this.data = {self: $(this)};
		this.data.incr = this.data.self.hasClass('next') ? 1 : -1;
		this.data.parent = this.data.self.parent();
		this.data.parent.data('busy', false);
		this.data.grid = this.data.parent.siblings('.scroller').find('.column-grid');
		this.data.total = this.data.grid.children('.entry').length;
	}).click(function() {
		with (this.data) {
			if ( parent.data('busy') ) return; else parent.data('busy', true);
			var offset, totalScrolls, w = wrap.width();

			switch (w) {
				case 420:
					offset = 21;
					totalScrolls = total;
					break;
				case 708:
					offset = 30;
					totalScrolls = Math.ceil(total/2.0);
					break;
			}

			if ( w != parent.data('cw') ) parent.data('rel', 0); // Reset rel value if screen size has changed

			var rel = Rising.cycle(incr, parent.data('rel'), totalScrolls);

			grid.stop().animate({marginLeft: -(rel*w)-(rel*offset)+'px'}, 750, 'easeInOutExpo', function() { parent.data('busy', false); });
			parent.data('rel', rel);
			parent.data('cw', w);
		}
	});

	// Add placeholder images for mobile devices
	$('#portfolio-one article').each(function(i) {
		var images = Rising.sliderData[i];
		if ( images.length ) {
			$(this).find('aside.slider').append(_.sprintf('<img class="placeholder" width="420" src="%s" />', images[0]));
		}
	});

	// Portfolio Special Column adjustments
	var column, AllColumns = portfolioSpecial.find('.column');
	portfolioSpecial.data('Allcolumns', AllColumns)
	AllColumns.each(function(i) {
		column = $(AllColumns[i]);
		column.attr('id', 'col-'+i);
		column.find('.entry').attr('rel', i);
	});

}

function responsive_events() {

	var homepageGrids = $('#home section .column-grid'),
		homepageControls = $('#home ul.common-scroller-controls li:first-child');


	var w, cw = wrap.width();
	_window.resize(function() {

		w = wrap.width();

		adjustHeader();

		if ( w == cw ) return; // Layout hasn't changed, do nothing...

		adjustOverlayDescs();
		adjustPortfolio();
		adjustFooter();

		adjustAccordionSlider();
		adjustPiecemaker();

		if ( homepageGrids.length ) {
			homepageGrids.css('marginLeft', 0); // Reset position of column grid
			homepageControls.addClass('active').siblings('.active').removeClass('active');
		}

		cw = w; // update current width

	});

	adjustHeader();
	adjustOverlayDescs();
	adjustPortfolio();
	adjustFooter();

}

function adjustHeader() {
	if ( body.width() >= 1008 ) wrap.css('overflow', 'visible'); else wrap.css('overflow', 'hidden');
}

function adjustAccordionSlider() {
	if ( accordionSlider.width() != accordionSlider.data('width') ) {
		var slides = accordionSlider.find('ul.slides');
		slides.html('');
		Rising.slideshow();
	}

}

function adjustPiecemaker() {
	if ( piecemaker.length ) {
		Rising.slider.reload();
	}
}

function adjustOverlayDescs() {
	if ( Rising.isMobile480() ) {
		overlayDescs.each(function() { this.data.self.css('bottom', '0'); });
	} else if ( Rising.isMobile768() || Rising.isDesktop() ) {
		overlayDescs.each(function() { this.data.self.css('bottom', -(this.data.self.height()+13)+'px'); })
	}
}

function adjustPortfolio() {
	if ( portfolioSpecial.length == 0 ) return;
	if ( Rising.isMobile768() ) {
		$('#col-1, #col-2, #col-3').hide().children().appendTo('#col-0');
		$('#col-0').children(':nth-child(2n)').after('<li class="clear"></li>');
	} else if ( Rising.isDesktop() ) {
		$('#col-1, #col-2, #col-3').show();
		$('#col-0 li.entry[rel=1]').appendTo('#col-1');
		$('#col-0 li.entry[rel=2]').appendTo('#col-2');
		$('#col-0 li.entry[rel=3]').appendTo('#col-3');
		$('#col-0 li.clear').remove();
	}
}

function adjustFooter() {
	if ( Rising.isDesktop() ) footerClear.hide();
	else if ( Rising.isMobile768() ) footerClear.show();
	else if ( Rising.isMobile480() ) footerClear.show();
}

})(jQuery)