Skip to content
This repository
Browse code

Hook up mobile styling.

  • Loading branch information...
commit d210e66da1f3dba6b72d433e6706902c94f9ee65 1 parent e497120
Jordan Humphreys authored August 21, 2012
2  README.markdown
Source Rendered
@@ -3,7 +3,7 @@ Welcome to Joyride
3 3
 
4 4
 Joyride is an easy to configure jQuery site tour wizard.
5 5
 
6  
-Homepage:      http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
  6
+Installation Guide:      http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
7 7
 
8 8
 Joyride is MIT-licensed and absolutely free to use.
9 9
 
57  jquery.joyride-2.0.js
@@ -15,7 +15,7 @@
15 15
     'tipLocation'          : 'bottom',  // 'top' or 'bottom' in relation to parent
16 16
     'nubPosition'          : 'auto',    // override on a per tooltip bases 
17 17
     'scrollSpeed'          : 300,       // Page scrolling speed in milliseconds
18  
-    'timer'                : 5000,      // 0 = no timer , all other numbers = timer in milliseconds
  18
+    'timer'                : 0,      // 0 = no timer , all other numbers = timer in milliseconds
19 19
     'startTimerOnClick'    : true,      // true or false - true requires clicking the first button start the timer
20 20
     'nextButton'           : true,      // true or false to control whether a next button is used
21 21
     'tipAnimation'         : 'fade',    // 'pop' or 'fade' in each tip
@@ -174,8 +174,11 @@
174 174
         // scroll and position tooltip
175 175
         methods.scroll_to();
176 176
 
177  
-        // TODO: split into .pos_phone() and .pos_default()
178  
-        methods.position(tipSettings);
  177
+        if (methods.is_phone()) {
  178
+          methods.pos_phone(tipSettings);
  179
+        } else {
  180
+          methods.pos_default(tipSettings);
  181
+        }
179 182
 
180 183
         if (settings.tipAnimation === "pop") {
181 184
 
@@ -226,6 +229,15 @@
226 229
 
227 230
     },
228 231
 
  232
+    // detect phones with mediaqueries if supported.
  233
+    is_phone : function () {
  234
+      if (Modernizr) {
  235
+        return Modernizr.mq('only screen and (max-width: 768px)');
  236
+      } else {
  237
+        return ($(window).width() < 769) ? true : false;
  238
+      }
  239
+    },
  240
+
229 241
     hide : function () {
230 242
       // add animate out support here
231 243
       settings.$current_tip.hide();
@@ -275,14 +287,17 @@
275 287
     },
276 288
 
277 289
     // TODO: add a destroy method
278  
-    //
  290
+    destroy : function () {
  291
+      // remove events
  292
+      // remove tooltips
  293
+    },
279 294
 
280 295
     /* .position()
281 296
       does all of the positioning heavy lifting;
282 297
       mobile and desktop, may want to break them
283 298
       out into their own methods to provide clarity
284 299
     */
285  
-    position : function (tipSettings) {
  300
+    pos_default : function (tipSettings) {
286 301
       var half_fold = Math.ceil($(window).height() / 2),
287 302
           tip_position = settings.$next_tip.offset(),
288 303
           $nub = $('.joyride-nub', settings.$next_tip),
@@ -294,7 +309,6 @@
294 309
 
295 310
       if (settings.$target.selector !== 'body') {
296 311
 
297  
-        // TODO: add mobile positioning
298 312
         // TODO: Refine left and right positioning
299 313
 
300 314
           if (methods.bottom(tipSettings)) {
@@ -342,7 +356,7 @@
342 356
 
343 357
             settings.attempts++;
344 358
 
345  
-            methods.position(tipSettings);
  359
+            methods.pos_default(tipSettings);
346 360
 
347 361
           }
348 362
 
@@ -364,6 +378,35 @@
364 378
 
365 379
     },
366 380
 
  381
+    pos_phone : function (tipSettings) {
  382
+      var tip_height = settings.$next_tip.outerHeight(),
  383
+          tip_offset = settings.$next_tip.offset(),
  384
+          target_height = settings.$target.outerHeight(),
  385
+          $nub = $('.joyride-nub', settings.$next_tip),
  386
+          nub_height = Math.ceil($nub.outerHeight() / 2);
  387
+
  388
+
  389
+      console.log(target_height);
  390
+
  391
+      $nub.removeClass('bottom')
  392
+        .removeClass('top')
  393
+        .removeClass('right')
  394
+        .removeClass('left');
  395
+
  396
+      if (methods.top(tipSettings)) {
  397
+
  398
+          settings.$next_tip.offset({top: settings.$target.offset().top - tip_height - (nub_height*2) + target_height});
  399
+          $nub.addClass('bottom');
  400
+
  401
+      } else {
  402
+
  403
+        // Default is bottom alignment.
  404
+        settings.$next_tip.offset({top: settings.$target.offset().top + target_height + nub_height});
  405
+        $nub.addClass('top');
  406
+
  407
+      }
  408
+    },
  409
+
367 410
     bottom : function (tipSettings) {
368 411
       return (tipSettings.tipLocation === "bottom");
369 412
     },
224  modernizr.mq.js
... ...
@@ -1,4 +1,224 @@
1  
-/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
  1
+/* Modernizr 2.6.1 (Custom Build) | MIT & BSD
2 2
  * Build: http://modernizr.com/download/#-mq-teststyles
3 3
  */
4  
-;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);
  4
+;
  5
+
  6
+
  7
+
  8
+window.Modernizr = (function( window, document, undefined ) {
  9
+
  10
+    var version = '2.6.1',
  11
+
  12
+    Modernizr = {},
  13
+
  14
+
  15
+    docElement = document.documentElement,
  16
+
  17
+    mod = 'modernizr',
  18
+    modElem = document.createElement(mod),
  19
+    mStyle = modElem.style,
  20
+
  21
+    inputElem  ,
  22
+
  23
+
  24
+    toString = {}.toString,    tests = {},
  25
+    inputs = {},
  26
+    attrs = {},
  27
+
  28
+    classes = [],
  29
+
  30
+    slice = classes.slice,
  31
+
  32
+    featureName, 
  33
+
  34
+
  35
+    injectElementWithStyles = function( rule, callback, nodes, testnames ) {
  36
+
  37
+      var style, ret, node,
  38
+          div = document.createElement('div'),
  39
+                body = document.body,
  40
+                fakeBody = body ? body : document.createElement('body');
  41
+
  42
+      if ( parseInt(nodes, 10) ) {
  43
+                      while ( nodes-- ) {
  44
+              node = document.createElement('div');
  45
+              node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
  46
+              div.appendChild(node);
  47
+          }
  48
+      }
  49
+
  50
+                style = ['&#173;','<style id="s', mod, '">', rule, '</style>'].join('');
  51
+      div.id = mod;
  52
+          (body ? div : fakeBody).innerHTML += style;
  53
+      fakeBody.appendChild(div);
  54
+      if ( !body ) {
  55
+                fakeBody.style.background = "";
  56
+          docElement.appendChild(fakeBody);
  57
+      }
  58
+
  59
+      ret = callback(div, rule);
  60
+        !body ? fakeBody.parentNode.removeChild(fakeBody) : div.parentNode.removeChild(div);
  61
+
  62
+      return !!ret;
  63
+
  64
+    },
  65
+
  66
+    testMediaQuery = function( mq ) {
  67
+
  68
+      var matchMedia = window.matchMedia || window.msMatchMedia;
  69
+      if ( matchMedia ) {
  70
+        return matchMedia(mq).matches;
  71
+      }
  72
+
  73
+      var bool;
  74
+
  75
+      injectElementWithStyles('@media ' + mq + ' { #' + mod + ' { position: absolute; } }', function( node ) {
  76
+        bool = (window.getComputedStyle ?
  77
+                  getComputedStyle(node, null) :
  78
+                  node.currentStyle)['position'] == 'absolute';
  79
+      });
  80
+
  81
+      return bool;
  82
+
  83
+     },
  84
+    _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp;
  85
+
  86
+    if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) {
  87
+      hasOwnProp = function (object, property) {
  88
+        return _hasOwnProperty.call(object, property);
  89
+      };
  90
+    }
  91
+    else {
  92
+      hasOwnProp = function (object, property) { 
  93
+        return ((property in object) && is(object.constructor.prototype[property], 'undefined'));
  94
+      };
  95
+    }
  96
+
  97
+
  98
+    if (!Function.prototype.bind) {
  99
+      Function.prototype.bind = function bind(that) {
  100
+
  101
+        var target = this;
  102
+
  103
+        if (typeof target != "function") {
  104
+            throw new TypeError();
  105
+        }
  106
+
  107
+        var args = slice.call(arguments, 1),
  108
+            bound = function () {
  109
+
  110
+            if (this instanceof bound) {
  111
+
  112
+              var F = function(){};
  113
+              F.prototype = target.prototype;
  114
+              var self = new F();
  115
+
  116
+              var result = target.apply(
  117
+                  self,
  118
+                  args.concat(slice.call(arguments))
  119
+              );
  120
+              if (Object(result) === result) {
  121
+                  return result;
  122
+              }
  123
+              return self;
  124
+
  125
+            } else {
  126
+
  127
+              return target.apply(
  128
+                  that,
  129
+                  args.concat(slice.call(arguments))
  130
+              );
  131
+
  132
+            }
  133
+
  134
+        };
  135
+
  136
+        return bound;
  137
+      };
  138
+    }
  139
+
  140
+    function setCss( str ) {
  141
+        mStyle.cssText = str;
  142
+    }
  143
+
  144
+    function setCssAll( str1, str2 ) {
  145
+        return setCss(prefixes.join(str1 + ';') + ( str2 || '' ));
  146
+    }
  147
+
  148
+    function is( obj, type ) {
  149
+        return typeof obj === type;
  150
+    }
  151
+
  152
+    function contains( str, substr ) {
  153
+        return !!~('' + str).indexOf(substr);
  154
+    }
  155
+
  156
+
  157
+    function testDOMProps( props, obj, elem ) {
  158
+        for ( var i in props ) {
  159
+            var item = obj[props[i]];
  160
+            if ( item !== undefined) {
  161
+
  162
+                            if (elem === false) return props[i];
  163
+
  164
+                            if (is(item, 'function')){
  165
+                                return item.bind(elem || obj);
  166
+                }
  167
+
  168
+                            return item;
  169
+            }
  170
+        }
  171
+        return false;
  172
+    }
  173
+    for ( var feature in tests ) {
  174
+        if ( hasOwnProp(tests, feature) ) {
  175
+                                    featureName  = feature.toLowerCase();
  176
+            Modernizr[featureName] = tests[feature]();
  177
+
  178
+            classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
  179
+        }
  180
+    }
  181
+
  182
+
  183
+
  184
+     Modernizr.addTest = function ( feature, test ) {
  185
+       if ( typeof feature == 'object' ) {
  186
+         for ( var key in feature ) {
  187
+           if ( hasOwnProp( feature, key ) ) {
  188
+             Modernizr.addTest( key, feature[ key ] );
  189
+           }
  190
+         }
  191
+       } else {
  192
+
  193
+         feature = feature.toLowerCase();
  194
+
  195
+         if ( Modernizr[feature] !== undefined ) {
  196
+                                              return Modernizr;
  197
+         }
  198
+
  199
+         test = typeof test == 'function' ? test() : test;
  200
+
  201
+         if (enableClasses) {
  202
+           docElement.className += ' ' + (test ? '' : 'no-') + feature;
  203
+         }
  204
+         Modernizr[feature] = test;
  205
+
  206
+       }
  207
+
  208
+       return Modernizr; 
  209
+     };
  210
+
  211
+
  212
+    setCss('');
  213
+    modElem = inputElem = null;
  214
+
  215
+
  216
+    Modernizr._version      = version;
  217
+
  218
+
  219
+    Modernizr.mq            = testMediaQuery;
  220
+    Modernizr.testStyles    = injectElementWithStyles;
  221
+    return Modernizr;
  222
+
  223
+})(this, this.document);
  224
+;

0 notes on commit d210e66

Please sign in to comment.
Something went wrong with that request. Please try again.