From 44998f9142bc6dbe0758c6bb5fb6f70287803211 Mon Sep 17 00:00:00 2001
From: Khanh Le <khanhlh@gmail.com>
Date: Wed, 23 Apr 2014 17:38:16 +0700
Subject: [PATCH] Allow javascript get some less variables value

Push grid variables into body data for javascript use. Example, get
small screen size value by jQuery ('body').data('screen-sm');
---
 source/plg_system_t3/base-bs3/js/script.js | 23 +++++++++++++++++++++
 source/plg_system_t3/base-bs3/less/t3.less | 11 +++++++++-
 source/plg_system_t3/base/js/script.js     | 24 ++++++++++++++++++++++
 source/plg_system_t3/base/less/t3.less     |  9 ++++++++
 4 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/source/plg_system_t3/base-bs3/js/script.js b/source/plg_system_t3/base-bs3/js/script.js
index 7933d0b63b..cce456de3c 100644
--- a/source/plg_system_t3/base-bs3/js/script.js
+++ b/source/plg_system_t3/base-bs3/js/script.js
@@ -13,6 +13,29 @@
 
 !function($){
 
+	// Detect grid-float-breakpoint value and put to $(body) data
+	$(document).ready(function(){
+		var fromClass = 'body-data-holder',
+				prop = 'content',
+				$inspector = $('<div>').css('display', 'none').addClass(fromClass).appendTo($('body'));
+				
+    try {
+			var attrs = window.getComputedStyle(
+					$inspector[0], ':before'
+				).getPropertyValue(prop),
+				matches = attrs.match(/([\da-z\-]+)/gi),
+				data = {};
+				if (matches && matches.length) {
+					for (var i=0; i<matches.length; i++) {
+						data[matches[i++]] = i<matches.length ? matches[i] : null;
+					}
+				}
+				$('body').data (data);
+    } finally {
+        $inspector.remove(); // and remove from DOM
+    }
+	});
+	
 	//detect transform (https://github.com/cubiq/)
 	(function(){
 		$.support.t3transform = (function () {
diff --git a/source/plg_system_t3/base-bs3/less/t3.less b/source/plg_system_t3/base-bs3/less/t3.less
index 54dfe3d9fa..652337c23f 100644
--- a/source/plg_system_t3/base-bs3/less/t3.less
+++ b/source/plg_system_t3/base-bs3/less/t3.less
@@ -117,4 +117,13 @@
     overflow: hidden;
     display: block;
   }  
-}
\ No newline at end of file
+}
+
+
+// for interact with javascript
+// ---------------------------------------------------------------------------
+// place holder class to detect the grid variables value in javascript
+.body-data-holder:before {
+	display: none;
+	content: "grid-float-breakpoint:@{grid-float-breakpoint} screen-xs:@{screen-xs} screen-sm:@{screen-sm} screen-md:@{screen-md} screen-lg:@{screen-lg}";
+}	
\ No newline at end of file
diff --git a/source/plg_system_t3/base/js/script.js b/source/plg_system_t3/base/js/script.js
index 51ded4ddff..f7de47cc60 100644
--- a/source/plg_system_t3/base/js/script.js
+++ b/source/plg_system_t3/base/js/script.js
@@ -13,6 +13,30 @@
 
 !function($){
 
+	// Detect grid-float-breakpoint value and put to $(body) data
+	$(document).ready(function(){
+		var fromClass = 'body-data-holder',
+				prop = 'content',
+				$inspector = $('<div>').css('display', 'none').addClass(fromClass).appendTo($('body'));
+				
+    try {
+			var attrs = window.getComputedStyle(
+					$inspector[0], ':before'
+				).getPropertyValue(prop),
+				matches = attrs.match(/([\da-z\-]+)/gi),
+				data = {};
+				if (matches && matches.length) {
+					for (var i=0; i<matches.length; i++) {
+						data[matches[i++]] = i<matches.length ? matches[i] : null;
+					}
+				}
+				$('body').data (data);
+    } finally {
+        $inspector.remove(); // and remove from DOM
+    }
+	});
+	
+	
 	//detect transform (https://github.com/cubiq/)
 	$.support.t3transform = (function () {
 		var style = document.createElement('div').style,
diff --git a/source/plg_system_t3/base/less/t3.less b/source/plg_system_t3/base/less/t3.less
index b1b2d83f70..ce75224881 100644
--- a/source/plg_system_t3/base/less/t3.less
+++ b/source/plg_system_t3/base/less/t3.less
@@ -47,4 +47,13 @@
       display: block;
     }
   }
+}
+
+
+// for interact with javascript
+// ---------------------------------------------------------------------------
+// place holder class to detect the grid variables value in javascript
+.body-data-holder:before {
+	display: none;
+	content: "grid-float-breakpoint:@{navbarCollapseWidth} screen-xs:600px screen-sm:@{gridRowWidth768} screen-md:@{gridRowWidth} screen-lg:@{gridRowWidth1200}";
 }
\ No newline at end of file