Skip to content

Commit

Permalink
Updated client side scripts
Browse files Browse the repository at this point in the history
  • Loading branch information
@briemens
briemens committed Aug 5, 2012
1 parent bd1a835 commit 5020700
Show file tree
Hide file tree
Showing 4 changed files with 334 additions and 10 deletions.
13 changes: 6 additions & 7 deletions crafity.navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
formData = undefined;
}

console.log("Ajax call", href);
//console.log("Ajax call", href);

crafity.ajax({
url: href,
Expand Down Expand Up @@ -110,9 +110,7 @@
var this$ = $(element)
, target = this$.attr("data-async-target")
, target$ = this$.nearest(target) || $(target);

console.log("target$", target$);


if (this$.hasClass('loading')) {
return false;
} else {
Expand All @@ -124,7 +122,7 @@
formData = undefined;
}

console.log("Ajax call", href);
//console.log("Ajax call", href);

//this$.removeClass('loaded').addClass('loading');
//this$.find(".loaded").toggleClass("loaded loading");
Expand Down Expand Up @@ -158,7 +156,7 @@
};

if (collapsables.length) {
console.log("Waiting for collapse!", collapsables, target$);
//console.log("Waiting for collapse!", collapsables, target$);
collapsables.each(function (index, collapsable) {
collapsable.addEventListener('webkitTransitionEnd',
function (event) {
Expand Down Expand Up @@ -296,7 +294,8 @@
, url = href.split("?")[0];

if (!this$.attr("data-async")) {
return !window.open(href, href.match(/^http|^https|^\/\//i) ? "_blank" : "_self");
// First make sure the A link is clicked (sometimes other click come through)
return true;
}

if (this$.attr("data-async") === "page") {
Expand Down
192 changes: 192 additions & 0 deletions crafity.responsive.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
(function (crafity, $) {
var responsive = crafity.responsive = crafity.responsive || {}
, html$ = $("html")
, stylesheets = $("link[href][media]")
, desktop = stylesheets.filter("[href*=desktop]")
, tabletLandscape = stylesheets.filter("[href*='tablet.landscape']")
, tabletPortrait = stylesheets.filter("[href*='tablet.portrait']")
, mobileLandscape = stylesheets.filter("[href*='mobile.landscape']");

if (window.isEmulator) {
html$.addClass("emulator");
return;
} else {
html$.addClass("no-emulator");
}
window.stylesheets = stylesheets;

var devices$ = $("<div class='crafity devices'><ul class='device list'></ul></div>")
, deviceList$ = devices$.find('.device.list');

deviceList$.append($("<li class='mobile portrait'>Mobile (P)</li>").click(function () {
if (window.isEmulator) { return; }
crafity.responsive.emulate('mobile', 'portrait');
}));
deviceList$.append($("<li class='mobile landscape'>Mobile (L)</li>").click(function () {
if (window.isEmulator) { return; }
crafity.responsive.emulate('mobile', 'landscape');
}));
deviceList$.append($("<li class='tablet portrait'>Tablet (P)</li>").click(function () {
if (window.isEmulator) { return; }
crafity.responsive.emulate('tablet', 'portrait');
}));
deviceList$.append($("<li class='tablet landscape'>Tablet (L)</li>").click(function () {
if (window.isEmulator) { return; }
crafity.responsive.emulate('tablet', 'landscape');
}));
deviceList$.append($("<li class='desktop'>Desktop</li>").click(function () {
if (window.isEmulator) { return; }
crafity.responsive.emulate('desktop');
}));
deviceList$.append($("<li class='auto'>Auto</li>").click(function () {
if (window.isEmulator) { return; }
crafity.responsive.emulate('auto');
}));

html$.
removeClass("mobile tablet portrait landscape desktop auto")
.addClass('auto');
$(window.document.body).append(devices$);

var emulationOverlay$;

responsive.emulate = function (device, orientation) {
html$.
removeClass("mobile tablet portrait landscape desktop auto");

var width, height;

if (device === "mobile" && orientation === "landscape") {
width = 480;
height = 268;
html$.addClass("mobile landscape");
// crafity.navigation.hashInfo.change({ "emulate": "mobile.landscape" });

} else if (device === "mobile") {
width = 320;
height = 416;
html$.addClass("mobile portrait");
// crafity.navigation.hashInfo.change({ "emulate": "mobile.portrait" });

} else if (device === "tablet" && orientation === "portrait") {
width = 768;
height = 928;
html$.addClass("tablet portrait");
// crafity.navigation.hashInfo.change({ "emulate": "tablet.portrait" });

} else if (device === "tablet") {
width = 1024;
height = 672;
html$.addClass("tablet landscape");
// crafity.navigation.hashInfo.change({ "emulate": "tablet.landscape" });

} else if (device === "desktop" || device === "auto") {
if (emulationOverlay$) {
// crafity.navigation.hashInfo.change({ "emulate": undefined });
html$.addClass("auto");
emulationOverlay$.remove();
emulationOverlay$ = undefined;
$(document.body).css('overflow', 'initial');
}
return;
}

if (emulationOverlay$) {
emulationOverlay$.find("iframe").css({ width: width, height: height });
} else {
emulationOverlay$ =
$("<div style='left: 0; top: 0; right: 0; bottom: 0; position: fixed;z-index: 1000;background: rgba(30, 30, 30, .8)'>" +
"<iframe src='" + window.location.href + "' style='display: block; height: " + height + "px; width: " + width + "px; margin: 50px auto;-webkit-box-shadow: 0 0 40px 10px rgba(30, 30, 30, .5);-moz-box-shadow: 0 0 40px 10px rgba(30, 30, 30, .5)' /></div>");
emulationOverlay$.click(function () {
responsive.emulate("auto");
});
$(document.body).css('overflow', 'hidden');
$(document.body).append(emulationOverlay$);
emulationOverlay$.find("iframe").get(0).contentWindow.isEmulator = true;

// console.log(emulationOverlay$.find("iframe").get(0).contentDocument);
// console.log($("html", emulationOverlay$.find("iframe").get(0).contentDocument));
// $("html", emulationOverlay$.find("iframe").get(0).contentDocument).addClass("emulator");
}

return;
html$
.removeClass("mobile tablet portrait landscape desktop auto")
.addClass("emulating");

if (device === "mobile" && orientation === "landscape") {
mobileLandscape.attr('href', mobileLandscape.attr('data-href') || mobileLandscape.attr('href'));

tabletPortrait.attr('data-href', tabletPortrait.attr('href') || tabletPortrait.attr('data-href'));
tabletPortrait.attr('href', null);

tabletLandscape.attr('data-href', tabletLandscape.attr('href') || tabletLandscape.attr('data-href'));
tabletLandscape.attr('href', null);

desktop.attr('data-href', desktop.attr('href') || desktop.attr('data-href'));
desktop.attr('href', null);

html$.addClass("mobile landscape");
crafity.navigation.hashInfo.change({ "emulate": "mobile.landscape" });
//window.location.hash = "emulate=mobile.landscape";

} else if (device === "mobile") {
mobileLandscape.attr('data-href', mobileLandscape.attr('href') || mobileLandscape.attr('data-href'));
mobileLandscape.attr('href', null);

tabletPortrait.attr('data-href', tabletPortrait.attr('href') || tabletPortrait.attr('data-href'));
tabletPortrait.attr('href', null);

tabletLandscape.attr('data-href', tabletLandscape.attr('href') || tabletLandscape.attr('data-href'));
tabletLandscape.attr('href', null);

desktop.attr('data-href', desktop.attr('href') || desktop.attr('data-href'));
desktop.attr('href', null);

html$.addClass("mobile portrait");
window.location.hash = "emulate=mobile.portrait";

} else if (device === "tablet" && orientation === "portrait") {
mobileLandscape.attr('href', mobileLandscape.attr('data-href') || mobileLandscape.attr('href'));
tabletPortrait.attr('href', tabletPortrait.attr('data-href') || tabletPortrait.attr('href'));

tabletLandscape.attr('data-href', tabletLandscape.attr('href') || tabletLandscape.attr('data-href'));
tabletLandscape.attr('href', null);

desktop.attr('data-href', desktop.attr('href') || desktop.attr('data-href'));
desktop.attr('href', null);

html$.addClass("tablet portrait");
window.location.hash = "emulate=tablet.portrait";

} else if (device === "tablet") {
mobileLandscape.attr('href', mobileLandscape.attr('data-href') || mobileLandscape.attr('href'));
tabletPortrait.attr('href', tabletPortrait.attr('data-href') || tabletPortrait.attr('href'));
tabletLandscape.attr('href', tabletLandscape.attr('data-href') || tabletLandscape.attr('href'));
desktop.attr('data-href', desktop.attr('href') || desktop.attr('data-href'));
desktop.attr('href', null);

html$.addClass("tablet landscape");
window.location.hash = "emulate=tablet.landscape";

} else if (device === "desktop" || device === "auto") {
mobileLandscape.attr('href', mobileLandscape.attr('data-href') || mobileLandscape.attr('href'));
tabletPortrait.attr('href', tabletPortrait.attr('data-href') || tabletPortrait.attr('href'));
tabletLandscape.attr('href', tabletLandscape.attr('data-href') || tabletLandscape.attr('href'));
desktop.attr('href', desktop.attr('data-href') || desktop.attr('href'));

html$
.addClass("" + device)
.removeClass("emulating");

window.location.hash = "";
}
};
//alert(window.innerWidth + " " + window.innerHeight);

if (window.location.hash.indexOf("#emulate=") > -1) {
var parts = window.location.hash.replace("#emulate=", "").split(".");
responsive.emulate.apply(this, parts);
}

}(window.crafity = window.crafity || {}, window.jQuery));
94 changes: 94 additions & 0 deletions crafity.sections.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,3 +214,97 @@
}());

}(window.crafity = window.crafity || {}, jQuery));

// * * * * * * * * * * * * * * * * * *
// Test code...
// * * * * * * * * * * * * * * * * * *

$(document).ready(function () {
// Variables
var hashInfo = crafity.navigation.hashInfo
, menuSection$ = $("#menu")
, menuSection;

if (menuSection$) {
menuSection = crafity.sections.create();
menuSection.url = "/";
menuSection.setInnerHtml(menuSection$.html());
crafity.sections.add(menuSection);
}

// Register on all the clicks on anchor elements
$("body").delegate("a", "click", function (e) {

// First make sure the A link is clicked (sometimes other click come through)
if (this.nodeName === 'A') {

if ($(this).hasClass("download") ||
$(this).hasClass("mail")) { return; }

// Get the href of the link
var href = this.getAttribute("href");

var base = window.location.href;
if (~base.lastIndexOf("#")) {
base = base.substring(0, base.lastIndexOf("#"));
}
if (~base.lastIndexOf("/")) {
base = base.substring(0, base.lastIndexOf("/") + 1);
}
href = href.replace(base, "");

// If the href is empty or
// is an external link then quit

if (href && (~href.indexOf("http://") || ~href.indexOf("https://"))) {
return;
}

// Change the href in the URL's hash
hashInfo.change({ href: href || "/" });

return false;
}
});
// subscribe on navigation hash changed
hashInfo.onChange.subscribe(function() {
// Get the section belonging to the url
var section = crafity.sections.getByUrl(hashInfo.values.href);

if (section) {
// If the section is found, then show it
section.show();

} else if (hashInfo.values.href && hashInfo.values.href !== "/") {

// If the section was not found and a section is requisted
// then create a new section...
crafity.sections.create(hashInfo.values.href, function(err, section) {
if (err) { throw err; }

// Add the section to the list of sections
crafity.sections.add(section);

// Subscribe to the close event of the section
section.onClosing.subscribe(function () {

var newSection = section.section$.prev();
if (!newSection || !newSection.attr("data-href")) { newSection = section.section$.next(); }
if (newSection && newSection.attr("data-href")) {
hashInfo.change({ href: newSection.attr("data-href") });
}

crafity.sections.remove(section);
return true;
});

// and add the new section to the screen
section.appendTo($("#container")).show();
});

}
});

$(window).trigger("hashchange");

});
Loading

0 comments on commit 5020700

Please sign in to comment.