Adding screen detection scripts.

Adding screen detection scripts, and documentation for how it's supposed to work

Signed-off-by: thebestsophist <bernardy@enguin.com>

README.md

@@ -1,6 +1,6 @@
 # Symphony CMS + Compass + HTML5 Boilerplate + Media queries == Sexy
 
-Version: 2012.02.03a (http://enguindesign.com/journal/articles/2011/07/versioning-revisited/) 
+Version: 2012.02.04a (http://enguindesign.com/journal/articles/2011/07/versioning-revisited/) 
 
 HTML5 Boilerplate Version: 3.0.6
 
@@ -11,14 +11,16 @@ This is a revision of the basic Symphony CMS workspace to use Compass/SASS, the
 - Lots of Compass/SASS love.
 - Media query love using modernizr with respond.js
 - Responsive images using Modernizr.mq and jQuery .attr
+- Javascript for server-side optimizations
 - Customized typographic scale using rem with px-based fallback (http://modularscale.com/scale/?px1=16&px2=12&ra1=1.5&ra2=0).
 - Customized color scheme based on enguindesign.com (use these at your own peril).
 - Basic 6-column grid layouts for 48em and 60em screen widths.
 - Updated default page.xsl which you should link to in symphony/templates.
 
 ## Requirements
-- Compass (http://compass-style.org/)
-- Compass H5bp gem (https://github.com/sporkd/compass-h5bp)
+- Compass <http://compass-style.org/>
+- Compass H5bp gem <https://github.com/sporkd/compass-h5bp>
+- Screen Detection Extension <https://github.com/thebestsophist/Screen-Detection-Extension>
 
 ## Using this template
 After downloading this template, you can drop the whole thing into your Symphony folder. Alternatively, if you are using git. I prefer `git clone` this into its own folder and create a symlink to workspace/ (that way git doesn't get persnickety). Also, should remove `symphony/template` and replace it with a symlink to the `symphony-templates/` folder in this repository, this way you get the updated page.xsl template when creating new pages.
@@ -27,6 +29,8 @@ If you are new to Compass–or need a constant reminder like I do–all you have
 
 I have included mixins for two sets of grids: one set at 48em (768px) and a second set at 60em (960px). I've tried to keep it all documented, and if you want, it is pretty easy to change or update it yourself. I have also included javascript media queries to match the CSS media queries. There is also an example for using jQuery's .attr() method and Symphony's JIT Image Manipulation method for serving responsive images.
 
+To take full advantage of this workspace, you will also need the Screen Detection extension <https://github.com/thebestsophist/Screen-Detection-Extension> installed. This will allow you to use server-side optimizations for your media queries.
+
 Finally, I have not included anything for minimizing your javascript, feel free to do so yourself.
 
 ## Changes to HTML5 Boilerplate and Compass-H5bp

js/plugins.js

@@ -15,6 +15,38 @@ window.log = function(){
 (function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
 {console.log();return window.console;}catch(err){return window.console={};}})());
 
+// This requires jQuery to function properly
+// Sets window properties as cookies for server-side optimizations
 
+function getDevicePixelRatio() {
+	if(window.devicePixelRatio === undefined) return 1; // No pixel ratio available. Assume 1:1.
+	return window.devicePixelRatio;
+}
+
+function getWindowOrientation() {
+	if(window.orientation === undefined) return 0;
+	return window.orientation;
+}
+
+function getWindowProperties() {
+	document.cookie = "window-width=" + $(window).width() + "; path=/";
+	document.cookie = "window-height=" + $(window).height() + "; path=/";
+	document.cookie = 'screen-orientation=' + getWindowOrientation() + '; path=/';
+}
+
+function getScreenProperties() {
+	document.cookie = "screen-width=" + screen.width + "; path=/";
+	document.cookie = "screen-height=" + screen.height + "; path=/";
+	document.cookie = "pixel-density=" + getDevicePixelRatio() + "; path=/";
+
+}
+
+// Sets window properties as cookies for server-side optimizations
+$(document).ready(function(){
+	getWindowProperties();
+	getScreenProperties();
+});
+$(window).resize(getWindowProperties);
+$(screen).resize(getScreenProperties);
 // place any jQuery/helper plugins in here, instead of separate, slower script files.
 

js/script.js

@@ -38,4 +38,20 @@ if (Modernizr.mq('only screen and (min-width: 768px) and (max-width: 960px)')) {
 /* Anything > 60em */
 if (Modernizr.mq('only screen and min-width: 960px)')) {
 
+}
+
+
+/* High pixel density */
+if (window.devicePixelRatio >= 1.5) {
+
+}
+
+/* Portrait orientation */
+if (window.orientation == 0 || 180) {
+
+}
+
+/* Landscape orientation */
+if (window.orientation == 90 || 240) {
+
 }