Permalink
Browse files

version 0.9.5 released. Support for tablet_url

  • Loading branch information...
1 parent aa89ab7 commit 3e42b4e5a93d5cf39dcd1339e947c89d45741a21 @sebarmeli committed Jul 25, 2011
Showing with 215 additions and 84 deletions.
  1. +51 −12 README.md
  2. +44 −16 redirection_mobile.js
  3. +2 −2 redirection_mobile.min.js
  4. +1 −1 redirection_mobile_self.js
  5. +1 −1 redirection_mobile_self.min.js
  6. +59 −34 redirection_mobile_testable.js
  7. +57 −18 test/tests.js
View
@@ -3,21 +3,26 @@
This "redirection_mobile" script will cover a basic scenario of full JS mobile redirection.
It needs to be located in the desktop version of the site.
-The user will be redirected to the mobile version of the site if it's trying to access the site from a mobile device (iPad has NOT been included). This check is mainly done sniffing the User-Agent string.
+The user will be redirected to the mobile version of the site if it's trying to access the site from a mobile device (tablets have NOT been included by default). This check is mainly done sniffing the User-Agent string.
-In some cases the user wants to access to the Desktop version of the site from a mobile device (sometimes the desktop version has more functionality). The script handles this situation as well, it checks if the previous page hit was one from the mobile site (we can assume the user is trying to access to the "desktop" version from a mobile device) or if the url contains a specific parameter.In these case the redirection won't occur.
+In some cases the user wants to access to the Desktop version of the site from a mobile device (sometimes the desktop version has more functionality). The script handles this situation as well.
+
To keep the user in the desktop version for the whole session, sessionStorage object has been used, specifically an item will be stored to distinguish if we're browsing through the desktop site.
There is a fallback for old browsers that don't support sessionStorage, and a cookie will be used. The cookie that makes the access to the desktop version from a mobile device possible will expiry in one hour or you configure the expiry time.
-To use this function, you need to import the script in your page and call the SA.redirection_mobile() function. The function accepts an argument which is a configuration object with few properties:
+To use this function, you need to import the "redirection_mobile.js" in your page and call the SA.redirection_mobile() function. The function accepts a configuration object with few properties:
- mobile_prefix : prefix appended to the hostname, such as "m" to redirect to "m.domain.com". "m" is the default value if the property is not specified.
- mobile_url : mobile url to use for the redirection (without the protocol), such as "whatever.com"/example to redirect to "whatever.com/example". If "mobile_prefix" is existing as well, "mobile_prefix" will be ignored. Empty string is the default value.
- mobile_scheme : url scheme (http/https) of the mobile site domain, such as "https" to redirect to "https://m.domain.com". The protocol of the current page is the default value.
-- redirection_paramName : parameter to pass in the querystring of the URL to avoid the redirection (the value must be equal to "false" to avoid redirection). Default value is "mobile_redirect". Eg: http://domain.com?mobile_redirect=false
+- noredirection_param : parameter to pass in the querystring of the URL to avoid the redirection (the value must be equal to "true" to avoid redirection). Default value is "noredirection".
+Eg: http://domain.com?noredirection=true
It's also the name of the item in the localStorage (or cookie name) used to avoid mobile redirection.
- cookie_hours : number of hours the cookie needs to exist after redirection to desktop site. "1" is the default value.
-- tablet_redirection : boolean value that enables/disables(default) the redirection for tablet such as iPad, Samsung Galaxy Tab, Kindle or Motorola Xoom. - Default:false. The value needs to be a string (so wrapped in double or single quotes).
+- tablet_redirection : boolean value that enables/disables(default) the redirection for tablet such as iPad, Samsung Galaxy Tab, Kindle or Motorola Xoom. - Default:false. The value needs to be a string (so wrapped in double or single quotes). If 'tablet_url' parameter not specified, the user will be redirected to the same URL as for mobile devices.
+- tablet_url : url to use for the redirection in case user is using a tablet to access the site. Default value is ""
+- keep_path : boolean to determine if the destination url needs to keep the path from the original url. Default value is 'false'
+- keep_query : boolean to determine if the destination url needs to keep the querystring from the original url. Default value is 'false'
- beforeredirection_callback : if specified, callback launched before the redirection happens. If a falsy value is returned from the callback the redirection doesn't happen.
Below you can see an example that can clarify on how to use the script to redirect the user to "http://mobile.domain.com" from "http://domain.com":
@@ -31,15 +36,15 @@ Below you can see an example that can clarify on how to use the script to redire
<code>
&lt;script&gt;
SA.redirection_mobile ({
- redirection_paramName:"mobile_redirect",
+ noredirection_param:"noredirection",
mobile_prefix : "mobile",
cookie_hours : "2"
});
&lt;/script&gt;
</code>
</pre>
-Considering the previous code, from version 0.6, if you hit a page such as "http://domain.com/?mobile_redirect=false" the redirection won't happen. For all the browser session, if sessionStorage is supported by the browser, the redirection won't occur. If sessionStorage (HTML5) is not supported, a cookie "mobile_redirect=false" will be stored for 2 hours and it will block the redirection to the mobile site.
+Considering the previous code, from version 0.6, if you hit a page such as "http://domain.com/?noredirection=true" the redirection won't happen. For all the browser session, if sessionStorage is supported by the browser, the redirection won't occur. If sessionStorage (HTML5) is not supported, a cookie "noredirection=true" will be stored for 2 hours and it will block the redirection to the mobile site.
Another example, if you'd like to redirect the user to "https://whatever.com/example" this is the invocation you need:
@@ -60,8 +65,9 @@ If you'd like to redirect the user to "https://whatever.com/example" even when u
<code>
&lt;script&gt;
SA.redirection_mobile ({
- tablet_redirection : "true"
- )
+ tablet_redirection : "true",
+ mobile_url : "whatever.com/example",
+ mobile_prefix : "https"
});
&lt;/script&gt;
</code>
@@ -79,16 +85,46 @@ If you'd like to avoid the redirection to happen from a callback, this is the in
</code>
</pre>
+Find below an example that handles when we want to redirect the user to two different URLs depending on the device the user is using (mobile or tablet):
+
+<pre>
+ <code>
+ &lt;script&gt;
+ SA.redirection_mobile ({
+ mobile_url : "mobile.whatever.com",
+ tablet_url : "tablet.whatever.com",
+ });
+ &lt;/script&gt;
+ </code>
+</pre>
+
+If the user is accessing to a page such as "whatever.com/page1" and we want it to be redirected to "mobile.whatever.com/page1", that's how we should call redirection_mobile():
+
+<pre>
+ <code>
+ &lt;script&gt;
+ SA.redirection_mobile ({
+ mobile_prefix : "mobile",
+ keep_path : true,
+ keep_query : true
+ });
+ &lt;/script&gt;
+ </code>
+</pre>
+
Alternatively you can use "redirection_mobile_self.js", that is an anonyimous self-executing function and it uses the default values for the different properties:
- "mobile_prefix" : "m"
-- "redirection_paramName" : "mobile_redirect"
+- "noredirection_param" : "noredirection"
- "cookie_hours" : 1
- "mobile_url" : ""
- "mobile_scheme" : protocol of the current page
- "tablet_redirection" : "false"
+- "keep_path" : false
+- "keep_query" : false
+- "tablet_url" : ""
- "beforeredirection_callback" : n/a
-It doesn't need any configuration or any invocation, so you just need to drop it in your webserver and call the script from your HTML.
+It doesn't need any configuration or any invocation, so you just need to drop "it "redirection_mobile_self.js" on your webserver and call the script from your HTML.
<pre>
<code>
@@ -103,7 +139,7 @@ The scripts have their minified versions (YUI compressor has been used).
#Who is using it?
-Holden Australia (http://www.holden.com.au), Cityweb (http://www.citywebs.co.uk/), OXiane (http://www.oxiane.com)
+Holden Australia (http://www.holden.com.au), Cityweb (http://www.citywebs.co.uk/), OXiane (http://www.oxiane.com), etc..
#Licence?
@@ -141,5 +177,8 @@ Version 0.8.5 released - "ipad_redirection" changed into "tablet_redirection" to
Version 0.8.6 released - JSLint fixes
+#Update 25/07/2011:
+
+Version 0.9.5 released - "keep_path", "keep_query" and "tablet_url" parameters been added. Also 'noredirection_param' is used now instead of 'redirection_paramName'
Feel free to fork it!
View
@@ -42,23 +42,25 @@
* (default value) or you configure the expiry time.
*
* To use this function, you need to call it as SA.redirection_mobile(config);
-* E.g. SA.redirection_mobile ({redirection_paramName : "modile_redirect", mobile_prefix : "mobile", cookie_hours : "2" })
+* E.g. SA.redirection_mobile ({noredirection_param : "noredirection", mobile_prefix : "mobile", cookie_hours : "2" })
* or
* E.g. SA.redirection_mobile ({mobile_url : "mobile.whatever.com/example", mobile_sheme : "https" })
* or
-* E.g. SA.redirection_mobile ({mobile_prefix : "mobile", mobile_scheme : "https"})
+* E.g. SA.redirection_mobile ({mobile_prefix : "mobile"})
* or
* E.g. SA.redirection_mobile ({mobile_prefix : "mobile", mobile_scheme : "https", redirection_paramName : "modile_redirect"})
* or
* E.g. SA.redirection_mobile ({mobile_url : "mobile.whatever.com/example", tablet_redirection : "true"})
* or
* E.g. SA.redirection_mobile ({{mobile_url : "mobile.whatever.com/example", beforeredirection_callback : (function(){alert('2')}) }})
+* or
+* E.g. SA.redirection_mobile ({{mobile_url : "mobile.whatever.com", tablet_url : "tablet.whatever.com")
*
*
* @link http://github.com/sebarmeli/JS-Redirection-Mobile-Site/
* @author Sebastiano Armeli-Battana
-* @version 0.8.6
-* @date 02/04/2011
+* @version 0.9.5
+* @date 25/07/2011
*
*/
@@ -68,13 +70,17 @@ if (!window.SA) {window.SA = {};}
/*
* @param configuration object containing three properties:
* - mobile_prefix : prefix appended to the hostname (such as "m" to redirect to "m.domain.com")
-* - mobile_url : mobile url to use for the redirection (such as "whatever.com" to redirect to "whatever.com" )
+* - mobile_url : mobile url to use for the redirection (such as "mobile.whatever.com" to redirect to "whatever.com" )
* - mobile_scheme : url scheme (http/https) of the mobile site domain
* - cookie_hours : number of hours the cookie needs to exist after redirection to desktop site
-* - redirection_paramName : parameter to pass in the querystring of the URL to avoid the redirection (the value must be equal to "false").
+* - noredirection_param : parameter to pass in the querystring of the URL to avoid the redirection (the value must be equal to "true").
* It's also the name of the item in the localStorage (or cookie name) to avoid mobile
-* redirection. Default value is "mobile_redirect". Eg: http://domain.com?mobile_redirect=false
+* redirection. Default value is "noredirection". Eg: http://domain.com?noredirection=true
* - tablet_redirection : boolean value that enables/disables(default) the redirection for tablet such as iPad, Samsung Galaxy Tab, Kindle or Motorola Xoom. - Default:false
+* Default Url for redirection will be the same as the one for mobile devices.
+* - tablet_url : url to use for the redirection in case user is using a tablet to access the site
+* - keep_path : boolean to determine if the destination url needs to keep the path from the original url
+* - keep_query : boolean to determine if the destination url needs to keep the querystring from the original url
* - beforeredirection_callback : callback launched before the redirection happens
*/
SA.redirection_mobile = function(configuration) {
@@ -126,7 +132,7 @@ SA.redirection_mobile = function(configuration) {
config = configuration || {},
// parameter to pass in the URL to avoid the redirection
- redirection_param = config.redirection_paramName || "mobile_redirect",
+ redirection_param = config.noredirection_param || "noredirection",
// prefix appended to the hostname
mobile_prefix = config.mobile_prefix || "m",
@@ -154,27 +160,34 @@ SA.redirection_mobile = function(configuration) {
// Expiry hours for cookie
cookie_hours = config.cookie_hours || 1,
+
+ // Parameters to determine if the pathname and the querystring need to be kept
+ keep_path = config.keep_path || false,
+ keep_query = config.keep_query || false,
+ // new url for the tablet site domain
+ tablet_host = config.tablet_url || mobile_host,
+
// Check if the UA is a mobile one (iphone, ipod, android, blackberry)
isUAMobile =!!(agent.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i));
// Check if the referrer was a mobile page (probably the user clicked "Go to full site") or in the
// querystring there is a parameter to avoid the redirection such as "?mobile_redirect=false"
// (in that case we need to set a variable in the sessionStorage or in the cookie)
- if (document.referrer.indexOf(mobile_host) >= 0 || queryValue === FALSE ) {
+ if (document.referrer.indexOf(mobile_host) >= 0 || queryValue === TRUE ) {
if (window.sessionStorage) {
- window.sessionStorage.setItem(redirection_param, FALSE);
+ window.sessionStorage.setItem(redirection_param, TRUE);
} else {
- document.cookie = redirection_param + "=" + FALSE + ";expires="+
+ document.cookie = redirection_param + "=" + TRUE + ";expires="+
addTimeToDate(3600*1000*cookie_hours).toUTCString();
}
}
// Check if the sessionStorage contain the parameter
var isSessionStorage = (window.sessionStorage) ?
- (window.sessionStorage.getItem(redirection_param) === FALSE) :
+ (window.sessionStorage.getItem(redirection_param) === TRUE) :
false,
// Check if the Cookie has been set up
@@ -186,12 +199,12 @@ SA.redirection_mobile = function(configuration) {
if (!!(agent.match(/(iPad|SCH-I800|xoom|kindle)/i))) {
// Check if the redirection needs to happen for iPad
- isUAMobile = (config.tablet_redirection === TRUE) ? true : false;
-
+ var isUATablet = (config.tablet_redirection === TRUE || !!config.tablet_url) ? true : false;
+ isUAMobile = false;
}
// Check that User Agent is mobile, cookie is not set or value in the sessionStorage not present
- if (isUAMobile && !(isCookieSet || isSessionStorage)) {
+ if ((isUATablet || isUAMobile) && !(isCookieSet || isSessionStorage)) {
// Callback call
if (config.beforeredirection_callback) {
@@ -200,6 +213,21 @@ SA.redirection_mobile = function(configuration) {
}
}
- document.location.href = mobile_protocol + "//" + mobile_host;
+ var path_query = "";
+
+ if(keep_path) {
+ path_query += document.location.pathname;
+ }
+
+ if (keep_query) {
+ path_query += document.location.search;
+ }
+
+ if (isUATablet){
+ document.location.href = mobile_protocol + "//" + tablet_host + path_query;
+ } else if (isUAMobile) {
+ document.location.href = mobile_protocol + "//" + mobile_host + path_query;
+ }
+
}
};
@@ -4,6 +4,6 @@
* Developed by
* Sebastiano Armeli-Battana (@sebarmeli) - http://www.sebastianoarmelibattana.com
* Dual licensed under the MIT or GPL Version 3 licenses.
-* @version 0.8.6
+* @version 0.9.5
*/
-if(!window.SA){window.SA={};}SA.redirection_mobile=function(j){var c=function(t){var s=new Date();s.setTime(s.getTime()+t);return s;};var m=function(x){if(!x){return;}var s=document.location.search,y=s&&s.substring(1).split("&"),u=0,w=y.length;for(;u<w;u++){var t=y[u],v=t&&t.substring(0,t.indexOf("="));if(v===x){return t.substring(t.indexOf("=")+1,t.length);}}};var a=navigator.userAgent.toLowerCase(),o="false",e="true",r=j||{},n=r.redirection_paramName||"mobile_redirect",p=r.mobile_prefix||"m",k=r.mobile_url,d=r.mobile_scheme?r.mobile_scheme+":":document.location.protocol,l=document.location.host,f=m(n),g=k||(p+"."+(!!l.match(/^www\./i)?l.substring(4):l)),h=r.cookie_hours||1,b=!!(a.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i));if(document.referrer.indexOf(g)>=0||f===o){if(window.sessionStorage){window.sessionStorage.setItem(n,o);}else{document.cookie=n+"="+o+";expires="+c(3600*1000*h).toUTCString();}}var q=(window.sessionStorage)?(window.sessionStorage.getItem(n)===o):false,i=document.cookie?(document.cookie.indexOf(n)>=0):false;if(!!(a.match(/(iPad|SCH-I800|xoom|kindle)/i))){b=(r.tablet_redirection===e)?true:false;}if(b&&!(i||q)){if(r.beforeredirection_callback){if(!r.beforeredirection_callback.call(this)){return;}}document.location.href=d+"//"+g;}};
+if(!window.SA){window.SA={};}SA.redirection_mobile=function(m){var c=function(y){var x=new Date();x.setTime(x.getTime()+y);return x;};var q=function(C){if(!C){return;}var x=document.location.search,D=x&&x.substring(1).split("&"),z=0,B=D.length;for(;z<B;z++){var y=D[z],A=y&&y.substring(0,y.indexOf("="));if(A===C){return y.substring(y.indexOf("=")+1,y.length);}}};var a=navigator.userAgent.toLowerCase(),s="false",f="true",w=m||{},r=w.noredirection_param||"noredirection",t=w.mobile_prefix||"m",o=w.mobile_url,d=w.mobile_scheme?w.mobile_scheme+":":document.location.protocol,p=document.location.host,i=q(r),j=o||(t+"."+(!!p.match(/^www\./i)?p.substring(4):p)),k=w.cookie_hours||1,g=w.keep_path||false,v=w.keep_query||false,h=w.tablet_url||j,b=!!(a.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i));if(document.referrer.indexOf(j)>=0||i===f){if(window.sessionStorage){window.sessionStorage.setItem(r,f);}else{document.cookie=r+"="+f+";expires="+c(3600*1000*k).toUTCString();}}var u=(window.sessionStorage)?(window.sessionStorage.getItem(r)===f):false,l=document.cookie?(document.cookie.indexOf(r)>=0):false;if(!!(a.match(/(iPad|SCH-I800|xoom|kindle)/i))){var e=(w.tablet_redirection===f||!!w.tablet_url)?true:false;b=false;}if((e||b)&&!(l||u)){if(w.beforeredirection_callback){if(!w.beforeredirection_callback.call(this)){return;}}var n="";if(g){n+=document.location.pathname;}if(v){n+=document.location.search;}if(e){document.location.href=d+"//"+h+n;}else{if(b){document.location.href=d+"//"+j+n;}}}};
@@ -12,7 +12,7 @@
* 'mobile_url'("") and 'cookie_hour'(1). In this way you can drop this file on your web server with no configuration
*
* @author Sebastiano Armeli-Battana
-* @version 0.8.6
+* @version 0.9.5
*
*/
Oops, something went wrong. Retry.

0 comments on commit 3e42b4e

Please sign in to comment.