Skip to content

Commit

Permalink
Hook up mobile styling.
Browse files Browse the repository at this point in the history
  • Loading branch information
Jordan Humphreys committed Aug 21, 2012
1 parent e497120 commit d210e66
Show file tree
Hide file tree
Showing 3 changed files with 273 additions and 10 deletions.
2 changes: 1 addition & 1 deletion README.markdown
Expand Up @@ -3,7 +3,7 @@ Welcome to Joyride

Joyride is an easy to configure jQuery site tour wizard.

Homepage: http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
Installation Guide: http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin

Joyride is MIT-licensed and absolutely free to use.

Expand Down
57 changes: 50 additions & 7 deletions jquery.joyride-2.0.js
Expand Up @@ -15,7 +15,7 @@
'tipLocation' : 'bottom', // 'top' or 'bottom' in relation to parent
'nubPosition' : 'auto', // override on a per tooltip bases
'scrollSpeed' : 300, // Page scrolling speed in milliseconds
'timer' : 5000, // 0 = no timer , all other numbers = timer in milliseconds
'timer' : 0, // 0 = no timer , all other numbers = timer in milliseconds
'startTimerOnClick' : true, // true or false - true requires clicking the first button start the timer
'nextButton' : true, // true or false to control whether a next button is used
'tipAnimation' : 'fade', // 'pop' or 'fade' in each tip
Expand Down Expand Up @@ -174,8 +174,11 @@
// scroll and position tooltip
methods.scroll_to();

// TODO: split into .pos_phone() and .pos_default()
methods.position(tipSettings);
if (methods.is_phone()) {
methods.pos_phone(tipSettings);
} else {
methods.pos_default(tipSettings);
}

if (settings.tipAnimation === "pop") {

Expand Down Expand Up @@ -226,6 +229,15 @@

},

// detect phones with mediaqueries if supported.
is_phone : function () {
if (Modernizr) {
return Modernizr.mq('only screen and (max-width: 768px)');
} else {
return ($(window).width() < 769) ? true : false;
}
},

hide : function () {
// add animate out support here
settings.$current_tip.hide();
Expand Down Expand Up @@ -275,14 +287,17 @@
},

// TODO: add a destroy method
//
destroy : function () {
// remove events
// remove tooltips
},

/* .position()
does all of the positioning heavy lifting;
mobile and desktop, may want to break them
out into their own methods to provide clarity
*/
position : function (tipSettings) {
pos_default : function (tipSettings) {
var half_fold = Math.ceil($(window).height() / 2),
tip_position = settings.$next_tip.offset(),
$nub = $('.joyride-nub', settings.$next_tip),
Expand All @@ -294,7 +309,6 @@

if (settings.$target.selector !== 'body') {

// TODO: add mobile positioning
// TODO: Refine left and right positioning

if (methods.bottom(tipSettings)) {
Expand Down Expand Up @@ -342,7 +356,7 @@

settings.attempts++;

methods.position(tipSettings);
methods.pos_default(tipSettings);

}

Expand All @@ -364,6 +378,35 @@

},

pos_phone : function (tipSettings) {
var tip_height = settings.$next_tip.outerHeight(),
tip_offset = settings.$next_tip.offset(),
target_height = settings.$target.outerHeight(),
$nub = $('.joyride-nub', settings.$next_tip),
nub_height = Math.ceil($nub.outerHeight() / 2);


console.log(target_height);

$nub.removeClass('bottom')
.removeClass('top')
.removeClass('right')
.removeClass('left');

if (methods.top(tipSettings)) {

settings.$next_tip.offset({top: settings.$target.offset().top - tip_height - (nub_height*2) + target_height});
$nub.addClass('bottom');

} else {

// Default is bottom alignment.
settings.$next_tip.offset({top: settings.$target.offset().top + target_height + nub_height});
$nub.addClass('top');

}
},

bottom : function (tipSettings) {
return (tipSettings.tipLocation === "bottom");
},
Expand Down
224 changes: 222 additions & 2 deletions modernizr.mq.js
@@ -1,4 +1,224 @@
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
/* Modernizr 2.6.1 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-mq-teststyles
*/
;window.Modernizr=function(a,b,c){function v(a){i.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}var d="2.5.3",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={},m={},n={},o=[],p=o.slice,q,r=function(a,c,d,e){var h,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),k.appendChild(j);return h=["&#173;","<style>",a,"</style>"].join(""),k.id=g,(l?k:m).innerHTML+=h,m.appendChild(k),l||(m.style.background="",f.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},s=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return r("@media "+b+" { #"+g+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=p.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(p.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(p.call(arguments)))};return e});for(var A in l)u(l,A)&&(q=A.toLowerCase(),e[q]=l[A](),o.push((e[q]?"":"no-")+q));return v(""),h=j=null,e._version=d,e.mq=s,e.testStyles=r,e}(this,this.document);
;



window.Modernizr = (function( window, document, undefined ) {

var version = '2.6.1',

Modernizr = {},


docElement = document.documentElement,

mod = 'modernizr',
modElem = document.createElement(mod),
mStyle = modElem.style,

inputElem ,


toString = {}.toString, tests = {},
inputs = {},
attrs = {},

classes = [],

slice = classes.slice,

featureName,


injectElementWithStyles = function( rule, callback, nodes, testnames ) {

var style, ret, node,
div = document.createElement('div'),
body = document.body,
fakeBody = body ? body : document.createElement('body');

if ( parseInt(nodes, 10) ) {
while ( nodes-- ) {
node = document.createElement('div');
node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
div.appendChild(node);
}
}

style = ['&#173;','<style id="s', mod, '">', rule, '</style>'].join('');
div.id = mod;
(body ? div : fakeBody).innerHTML += style;
fakeBody.appendChild(div);
if ( !body ) {
fakeBody.style.background = "";
docElement.appendChild(fakeBody);
}

ret = callback(div, rule);
!body ? fakeBody.parentNode.removeChild(fakeBody) : div.parentNode.removeChild(div);

return !!ret;

},

testMediaQuery = function( mq ) {

var matchMedia = window.matchMedia || window.msMatchMedia;
if ( matchMedia ) {
return matchMedia(mq).matches;
}

var bool;

injectElementWithStyles('@media ' + mq + ' { #' + mod + ' { position: absolute; } }', function( node ) {
bool = (window.getComputedStyle ?
getComputedStyle(node, null) :
node.currentStyle)['position'] == 'absolute';
});

return bool;

},
_hasOwnProperty = ({}).hasOwnProperty, hasOwnProp;

if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) {
hasOwnProp = function (object, property) {
return _hasOwnProperty.call(object, property);
};
}
else {
hasOwnProp = function (object, property) {
return ((property in object) && is(object.constructor.prototype[property], 'undefined'));
};
}


if (!Function.prototype.bind) {
Function.prototype.bind = function bind(that) {

var target = this;

if (typeof target != "function") {
throw new TypeError();
}

var args = slice.call(arguments, 1),
bound = function () {

if (this instanceof bound) {

var F = function(){};
F.prototype = target.prototype;
var self = new F();

var result = target.apply(
self,
args.concat(slice.call(arguments))
);
if (Object(result) === result) {
return result;
}
return self;

} else {

return target.apply(
that,
args.concat(slice.call(arguments))
);

}

};

return bound;
};
}

function setCss( str ) {
mStyle.cssText = str;
}

function setCssAll( str1, str2 ) {
return setCss(prefixes.join(str1 + ';') + ( str2 || '' ));
}

function is( obj, type ) {
return typeof obj === type;
}

function contains( str, substr ) {
return !!~('' + str).indexOf(substr);
}


function testDOMProps( props, obj, elem ) {
for ( var i in props ) {
var item = obj[props[i]];
if ( item !== undefined) {

if (elem === false) return props[i];

if (is(item, 'function')){
return item.bind(elem || obj);
}

return item;
}
}
return false;
}
for ( var feature in tests ) {
if ( hasOwnProp(tests, feature) ) {
featureName = feature.toLowerCase();
Modernizr[featureName] = tests[feature]();

classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
}
}



Modernizr.addTest = function ( feature, test ) {
if ( typeof feature == 'object' ) {
for ( var key in feature ) {
if ( hasOwnProp( feature, key ) ) {
Modernizr.addTest( key, feature[ key ] );
}
}
} else {

feature = feature.toLowerCase();

if ( Modernizr[feature] !== undefined ) {
return Modernizr;
}

test = typeof test == 'function' ? test() : test;

if (enableClasses) {
docElement.className += ' ' + (test ? '' : 'no-') + feature;
}
Modernizr[feature] = test;

}

return Modernizr;
};


setCss('');
modElem = inputElem = null;


Modernizr._version = version;


Modernizr.mq = testMediaQuery;
Modernizr.testStyles = injectElementWithStyles;
return Modernizr;

})(this, this.document);
;

0 comments on commit d210e66

Please sign in to comment.