Build mobile apps with simple HTML, CSS, and JS components. http://goratchet.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

167 lines
4.8 KiB

12 years ago
$(function() {
var doc;
11 years ago
var device;
var platformToggle;
12 years ago
var windowWidth;
var windowHeight;
var pageHeight;
var contentPadding;
var footerHeight;
var componentsList;
var navComponentLinks;
var contentSection;
var currentActive;
var topCache;
var eventListeners;
var initialize = function () {
currentActive = 0;
topCache = [];
win = $(window);
doc = $(document);
bod = $(document.body)
device = device || $('.device');
navComponentLinks = $('.docs-nav');
componentsList = $('.components-list');
componentLinks = $('.component-example a');
contentSection = $('.component');
topCache = contentSection.map(function () { return $(this).offset().top })
windowHeight = $(window).height() / 3
pageHeight = $(document).height();
contentPadding = parseInt($('.docs-content').css('padding-bottom'));
footerHeight = $('.docs-footer').outerHeight(false);
// Device placment
device.initialLeft = device.offset().left;
device.initialTop = device.initialTop || device.offset().top;
device.dockingOffset = ($(window).height() - device.height())/2;
12 years ago
checkDesktopContent();
calculateScroll();
if (!eventListeners) addEventListeners();
}
var addEventListeners = function () {
eventListeners = true;
11 years ago
device.on('click', function (e) {
12 years ago
e.preventDefault();
});
// navComponentLinks.click(function(e) {
// e.stopPropagation();
// e.preventDefault();
// componentsList.toggleClass('active');
// })
12 years ago
doc.on('click', function () {
componentsList.removeClass('active');
})
// Platform switcher
$('.platform-switch').on('click', function () {
var components = $('.docs-components');
var platform = $(this).attr('data-platform');
// Set platform
if (components.hasClass('platform-ios')) {
components.removeClass('platform-ios');
components.addClass(platform);
} else if (components.hasClass('platform-android')) {
components.removeClass('platform-android');
components.addClass(platform);
} else {
components.addClass(platform);
}
// Deal with selected states
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
});
12 years ago
win.on('scroll', calculateScroll);
win.on('scroll', calculateToggle);
12 years ago
}
var checkDesktopContent = function () {
windowWidth = $(window).width();
if (windowWidth <= 768) {
var content = $('.content')
if (content.length > 1) {
$(content[0]).remove()
}
}
}
var calculateScroll = function() {
// if small screen don't worry about this
if (windowWidth <= 768) return
// Save scrollTop value
var contentSectionItem;
var currentTop = win.scrollTop();
if((device.initialTop - currentTop) <= device.dockingOffset) {
11 years ago
device[0].className = "device device-fixed";
device.css({top: device.dockingOffset})
} else {
11 years ago
device[0].className = "device"
device[0].setAttribute('style','')
12 years ago
}
11 years ago
// Injection of components into device
12 years ago
for (var l = contentSection.length; l--;) {
if ((topCache[l] - currentTop) < windowHeight) {
if (currentActive == l) return;
currentActive = l;
bod.find('.component.active').removeClass('active');
contentSectionItem = $(contentSection[l])
contentSectionItem.addClass('active')
if(contentSectionItem.attr('id')) {
11 years ago
device.attr("id", contentSectionItem.attr('id') + "InDevice");
12 years ago
} else {
11 years ago
device.attr("id", "")
12 years ago
}
if (!contentSectionItem.hasClass('informational')) {
updateContent(contentSectionItem.find('.highlight .html').text())
12 years ago
}
break
}
}
function updateContent(content) {
$('#iwindow').html(content);
}
}
// Platform toggle
var initializeToggle = function () {
platformToggle = $('.platform-toggle');
// Toggle placment
toggleTop = platformToggle.offset().top;
toggleHeight = platformToggle.outerHeight();
calculateToggle();
}
var calculateToggle = function () {
var currentTop = win.scrollTop();
console.log('yep');
if(currentTop >= toggleTop) {
platformToggle.addClass('fixed');
$('.docs-components').css('padding-top', toggleHeight);
} else if (currentTop <= $('.docs-header').outerHeight()) {
platformToggle.removeClass('fixed');
$('.docs-components').css('padding-top', 0);
}
}
12 years ago
$(window).on('load resize', initialize);
$(window).on('load', initializeToggle);
11 years ago
$(window).on('load', function () { new FingerBlast('.device-content'); });
});