Skip to content
This repository
Browse code

Initial commit.

  • Loading branch information...
commit acc6aeccbf3531a6642b7570919fc4add97e0690 0 parents
Jordan Humphreys mrsweaters authored
1  .gitignore
... ... @@ -0,0 +1 @@
  1 +.DS_Store
115 demo/demo-style.css
... ... @@ -0,0 +1,115 @@
  1 +/* These are just the demo styles and these can be removed and Orbit
  2 +will still work like a champ (except any content block needs a background which
  3 +our demo gets from this sheet) */
  4 +
  5 +/* --------------------------------------------------
  6 + Global Reset & Standards
  7 + -------------------------------------------------- */
  8 + html, body { margin: 0; padding: 0; }
  9 + h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, img, small, strike, strong, em, sub, sup, tt, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, section { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }
  10 + table { border-collapse: collapse; border-spacing: 0; }
  11 + ol, ul { list-style: none; }
  12 +
  13 +
  14 +
  15 +/* --------------------------------------------------
  16 + :: Grid
  17 + -------------------------------------------------- */
  18 +
  19 + .container { padding: 40px 20px 0 20px; }
  20 +
  21 + .row { width: 100%; max-width: 940px; min-width: 727px; margin: 0 auto; }
  22 + /* To fix the grid into a certain size, set max-width to width */
  23 + .row .row { min-width: 0px; }
  24 +
  25 + .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
  26 + .column:first-child, .columns:first-child { margin-left: 0px; }
  27 +
  28 + .row .one.columns { width: 4.3%; }
  29 + .row .two.columns { width: 13%; }
  30 + .row .three.columns { width: 21.7%; }
  31 + .row .four.columns { width: 30.4%; }
  32 + .row .five.columns { width: 39.1%; }
  33 + .row .six.columns { width: 47.8%; }
  34 + .row .seven.columns { width: 56.5%; }
  35 + .row .eight.columns { width: 65.2%; }
  36 + .row .nine.columns { width: 73.9%; }
  37 + .row .ten.columns { width: 82.6%; }
  38 + .row .eleven.columns { width: 91.3%; }
  39 + .row .twelve.columns { width: 100%; }
  40 +
  41 + .row .offset-by-one { margin-left: 8.7%; }
  42 + .row .offset-by-two { margin-left: 17.4%; }
  43 + .row .offset-by-three { margin-left: 26.1%; }
  44 + .row .offset-by-four { margin-left: 34.8%; }
  45 + .row .offset-by-five { margin-left: 43.5%; }
  46 + .row .offset-by-six { margin-left: 52.2%; }
  47 + .row .offset-by-seven { margin-left: 60.9%; }
  48 + .row .offset-by-eight { margin-left: 69.6%; }
  49 + .row .offset-by-nine { margin-left: 78.3%; }
  50 + .row .offset-by-ten { margin-left: 87%; }
  51 + .row .offset-by-eleven { margin-left: 95.7%; }
  52 +
  53 + img, object, embed { max-width: 100%; }
  54 + img { -ms-interpolation-mode: bicubic; }
  55 +
  56 +
  57 + /* Clear the columns automagically */
  58 + .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  59 + .row:last-child:after { content: ""; }
  60 + * html .row, * html .clearfix { height: 1%; }
  61 + .row, .clearfix { display: inline-block; }
  62 + .row, .clearfix { display: block; }
  63 +
  64 +
  65 +
  66 + body { background: #fff; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; text-shadow: 0 0 1px rgba(0,0,0,0.01); color: #555; }
  67 +
  68 + p {
  69 + line-height: 1.25;
  70 + }
  71 +
  72 + h1 {
  73 + font-weight: bold;
  74 + color: #222;
  75 + font-size: 36px;
  76 + line-height: 1.5;
  77 + }
  78 +
  79 + h2 {
  80 + font-weight: bold;
  81 + color: #222;
  82 + font-size: 28px;
  83 + line-height: 1.25;
  84 + }
  85 +
  86 + h3 {
  87 + font-weight: bold;
  88 + color: #222;
  89 + font-size: 22px;
  90 + line-height: 1.25;
  91 + }
  92 +
  93 + h4 {
  94 + font-weight: bold;
  95 + color: #222;
  96 + font-size: 18px;
  97 + line-height: 1.25;
  98 + }
  99 +
  100 + h1 + a {
  101 + color: #00baff;
  102 + text-decoration: none;
  103 + font-weight: normal;
  104 + font-size: 20px;
  105 + }
  106 +
  107 + a:hover { text-decoration: underline; }
  108 +
  109 + hr {
  110 + margin: 20px 0;
  111 + border: solid 1px #ccc;
  112 + border-width: 1px 0 0 0;
  113 + }
  114 +
  115 +
113 demo/demo.html
... ... @@ -0,0 +1,113 @@
  1 +<!DOCTYPE html>
  2 +
  3 +
  4 +
  5 +<!--
  6 + * Markup for jQuery Joyride Plugin 1.0
  7 + * www.ZURB.com/playground
  8 + * Copyright 2011, ZURB
  9 + * Free to use under the MIT license.
  10 + * http://www.opensource.org/licenses/mit-license.php
  11 + -->
  12 +
  13 +
  14 +
  15 + <head>
  16 + <meta charset="utf-8" />
  17 + <title>Joyride Demo</title>
  18 +
  19 + <!-- Attach our CSS -->
  20 + <link rel="stylesheet" href="../joyride-1.0.css">
  21 + <link rel="stylesheet" href="demo-style.css">
  22 +
  23 + <!-- Attach necessary JS -->
  24 + <script type="text/javascript" src="../jquery-1.6.2.min.js"></script>
  25 + <script type="text/javascript" src="../jquery.joyride-1.0.js"></script>
  26 +
  27 + </head>
  28 + <body>
  29 +
  30 + <div class="container">
  31 + <div class="row">
  32 + <div class="twelve columns">
  33 + <h1>ZURB's Joyride Feature Tour Plugin</h1>
  34 + <a href="http://www.zurb.com/playground/jquery_joyride_feature_tour_plugin">View Docs + Playground for Joyride</a>
  35 +
  36 + <hr>
  37 + </div>
  38 + </div>
  39 +
  40 + <br><br>
  41 +
  42 + <div class="row">
  43 + <div class="six columns">
  44 + <h2 id="numero1">Point Out Those New Features!</h2>
  45 + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
  46 + </div>
  47 + <div class="six columns">
  48 + <img id="numero3" src="http://placehold.it/430x200">
  49 + </div>
  50 + </div>
  51 +
  52 + <br><br><br><br>
  53 +
  54 + <div class="row">
  55 + <div class="twelve columns">
  56 + <h3>Get the Most Out of Your App!</h3>
  57 + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  58 + </div>
  59 + </div>
  60 +
  61 + <br><br><br><br>
  62 +
  63 + <div class="row">
  64 + <div class="four columns">
  65 + <img src="http://placehold.it/280x120">
  66 + </div>
  67 + <div class="eight columns">
  68 + <h3 id="numero2">Customize Each Stop Along the Way</h3>
  69 + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
  70 + </div>
  71 + </div>
  72 +
  73 + <br><br><br><br>
  74 +
  75 + <div class="row">
  76 + <div class="six columns">
  77 + <h4>Make Every Click Count</h4>
  78 + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
  79 + </div>
  80 + <div class="six columns">
  81 + <img src="http://placehold.it/430x200">
  82 + </div>
  83 + </div>
  84 +
  85 + <br><br><br><br>
  86 +
  87 + </div>
  88 + <!-- Tip Content -->
  89 + <ol id="joyRideTipContent">
  90 + <li data-id="numero1" data-text="Next" class="custom">
  91 + <h2>Stop #1</h2>
  92 + <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
  93 + </li>
  94 + <li data-id="numero2" data-text="Next">
  95 + <h2>Stop #2</h2>
  96 + <p>Get the details right by styling Joyride with a custom stylesheet!</p>
  97 + </li>
  98 + <li data-id="numero3" data-text="Close">
  99 + <h2>Stop #3</h2>
  100 + <p>Now what are you waiting for? Add this to your projects and get the most out of your apps!</p>
  101 + </li>
  102 + </ol>
  103 +
  104 + <!-- Run the plugin -->
  105 + <script type="text/javascript">
  106 + $(window).load(function() {
  107 + $(this).joyride();
  108 + });
  109 + </script>
  110 +
  111 +
  112 + </body>
  113 +</html>
80 global.css
... ... @@ -0,0 +1,80 @@
  1 +/* Arfully Masterminded by ZURB */
  2 +
  3 +/* --------------------------------------------------
  4 + Table of Contents
  5 +-----------------------------------------------------
  6 +:: Reset & Standards
  7 +:: Typography
  8 +:: Links
  9 +:: Lists
  10 +:: Mobile-Friendly Grid
  11 +:: Tables
  12 +:: Misc
  13 +:: Block Grids
  14 +:: Mobile Visbility
  15 +*/
  16 +
  17 +
  18 + body { background: #fff; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555; position: relative; -webkit-font-smoothing: antialiased; }
  19 +
  20 +
  21 +/* --------------------------------------------------
  22 + :: Typography
  23 + -------------------------------------------------- */
  24 +
  25 + em { font-style: italic; line-height: inherit; }
  26 + strong { font-weight: bold; line-height: inherit; }
  27 + small { font-size: 0.8rem; line-height: inherit; }
  28 +
  29 +
  30 +
  31 +
  32 +/* --------------------------------------------------
  33 + :: Grid
  34 + -------------------------------------------------- */
  35 +
  36 + .container { padding: 0px 20px; }
  37 +
  38 + .row { width: 100%; max-width: 940px; min-width: 727px; margin: 0 auto; }
  39 + /* To fix the grid into a certain size, set max-width to width */
  40 + .row .row { min-width: 0px; }
  41 +
  42 + .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
  43 + .column:first-child, .columns:first-child { margin-left: 0px; }
  44 +
  45 + .row .one.columns { width: 4.3%; }
  46 + .row .two.columns { width: 13%; }
  47 + .row .three.columns { width: 21.7%; }
  48 + .row .four.columns { width: 30.4%; }
  49 + .row .five.columns { width: 39.1%; }
  50 + .row .six.columns { width: 47.8%; }
  51 + .row .seven.columns { width: 56.5%; }
  52 + .row .eight.columns { width: 65.2%; }
  53 + .row .nine.columns { width: 73.9%; }
  54 + .row .ten.columns { width: 82.6%; }
  55 + .row .eleven.columns { width: 91.3%; }
  56 + .row .twelve.columns { width: 100%; }
  57 +
  58 + .row .offset-by-one { margin-left: 8.7%; }
  59 + .row .offset-by-two { margin-left: 17.4%; }
  60 + .row .offset-by-three { margin-left: 26.1%; }
  61 + .row .offset-by-four { margin-left: 34.8%; }
  62 + .row .offset-by-five { margin-left: 43.5%; }
  63 + .row .offset-by-six { margin-left: 52.2%; }
  64 + .row .offset-by-seven { margin-left: 60.9%; }
  65 + .row .offset-by-eight { margin-left: 69.6%; }
  66 + .row .offset-by-nine { margin-left: 78.3%; }
  67 + .row .offset-by-ten { margin-left: 87%; }
  68 + .row .offset-by-eleven { margin-left: 95.7%; }
  69 +
  70 + img, object, embed { max-width: 100%; }
  71 + img { -ms-interpolation-mode: bicubic; }
  72 +
  73 +
  74 + /* Clear the columns automagically */
  75 + .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  76 + .row:last-child:after { content: ""; }
  77 + * html .row, * html .clearfix { height: 1%; }
  78 + .row, .clearfix { display: inline-block; }
  79 + .row, .clearfix { display: block; }
  80 +
151 joyride-1.0.css
... ... @@ -0,0 +1,151 @@
  1 +/* Artfully masterminded by ZURB */
  2 +body {
  3 + position: relative;
  4 +}
  5 +
  6 +#joyRideTipContent { display: none; }
  7 +
  8 +/* Default styles for the container */
  9 +.joyride-tip-guide {
  10 + position: absolute;
  11 + background: #000;
  12 + background: rgba(0,0,0,0.8);
  13 + padding: 10px 10px 10px 15px;
  14 + color: #fff;
  15 + width: 300px;
  16 + z-index: 10;
  17 + font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", Helvetica, Arial, Lucida, sans-serif;
  18 + font-weight: normal;
  19 + -moz-border-radius: 4px;
  20 + -webkit-border-radius: 4px;
  21 + border-radius: 4px;
  22 +}
  23 +/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
  24 +.joyride-tip-guide span.joyride-nub {
  25 + display: block;
  26 + position: absolute;
  27 + left: 22px;
  28 + width: 0;
  29 + height: 0;
  30 + border: solid 14px;
  31 + border: solid 14px;
  32 +}
  33 +.joyride-tip-guide span.joyride-nub.top {
  34 + border-top-color: transparent !important;
  35 + border-left-color: transparent !important;
  36 + border-right-color: transparent !important;
  37 + border-bottom-color: #000;
  38 + border-bottom-color: rgba(0,0,0,0.8);
  39 + top: -28px;
  40 + bottom: none;
  41 +}
  42 +.joyride-tip-guide span.joyride-nub.bottom {
  43 + border-bottom-color: transparent !important;
  44 + border-left-color: transparent !important;
  45 + border-right-color: transparent !important;
  46 + border-top-color: #000;
  47 + border-top-color: rgba(0,0,0,0.8) !important;
  48 + bottom: -28px;
  49 + bottom: none;
  50 +}
  51 +
  52 +
  53 +/* Typography */
  54 +.joyride-tip-guide h1,.joyride-tip-guide h2,.joyride-tip-guide h3,.joyride-tip-guide h4,.joyride-tip-guide h5,.joyride-tip-guide h6 {
  55 + line-height: 1.25;
  56 + margin: 0;
  57 + font-weight: bold;
  58 + color: #fff;
  59 +}
  60 +.joyride-tip-guide h1 { font-size: 30px; }
  61 +.joyride-tip-guide h2 { font-size: 26px; }
  62 +.joyride-tip-guide h3 { font-size: 22px; }
  63 +.joyride-tip-guide h4 { font-size: 18px; }
  64 +.joyride-tip-guide h5 { font-size: 16px; }
  65 +.joyride-tip-guide h6 { font-size: 14px; }
  66 +.joyride-tip-guide p {
  67 + margin: 0 0 18px 0;
  68 + font-size: 14px;
  69 + line-height: 18px;
  70 +}
  71 +.joyride-tip-guide a {
  72 + color: rgb(255,255,255);
  73 + text-decoration: none;
  74 + border-bottom: dotted 1px rgba(255,255,255,0.6);
  75 +}
  76 +.joyride-tip-guide a:hover {
  77 + color: rgba(255,255,255,0.8);
  78 + border-bottom: none;
  79 +}
  80 +
  81 +/* Button Style */
  82 +.joyride-tip-guide .joyride-next-tip:after {
  83 + clear: both;
  84 +}
  85 +.joyride-tip-guide .joyride-next-tip {
  86 + width: auto;
  87 + padding: 6px 18px 4px;
  88 + font-size: 13px;
  89 + text-decoration: none;
  90 + color: rgb(255,255,255);
  91 + float: left;
  92 + margin: 0 6px 8px 0px;
  93 + border: solid 1px rgb(0,60,180);
  94 + background: rgb(0,99,255);
  95 + background: -moz-linear-gradient(top, rgb(0,99,255) 0%, rgb(0,85,214) 100%);
  96 + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,99,255)), color-stop(100%,rgb(0,85,214)));
  97 + background: -webkit-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
  98 + background: -o-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
  99 + background: -ms-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
  100 + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063ff', endColorstr='#0055d6',GradientType=0 );
  101 + background: linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
  102 + text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
  103 + -webkit-border-radius: 2px;
  104 + -moz-border-radius: 2px;
  105 + border-radius: 2px;
  106 + -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
  107 + -moz-box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
  108 + box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
  109 +}
  110 +.joyride-next-tip:hover {
  111 + color: rgb(255,255,255) !important;
  112 + border: solid 1px rgb(0,60,180) !important;
  113 + background: rgb(43,128,255);
  114 + background: -moz-linear-gradient(top, rgb(43,128,255) 0%, rgb(29,102,211) 100%);
  115 + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(43,128,255)), color-stop(100%,rgb(29,102,211)));
  116 + background: -webkit-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
  117 + background: -o-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
  118 + background: -ms-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
  119 + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b80ff', endColorstr='#1d66d3',GradientType=0 );
  120 + background: linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
  121 +}
  122 +
  123 +.joyride-timer-indicator-wrap {
  124 + width: 50px;
  125 + height: 3px;
  126 + border: solid 1px rgba(255,255,255,0.1);
  127 + position: absolute;
  128 + right: 17px;
  129 + bottom: 16px;
  130 +}
  131 +.joyride-timer-indicator {
  132 + display: block;
  133 + width: 0;
  134 + height: inherit;
  135 + background: rgba(255,255,255,0.25);
  136 +}
  137 +
  138 +.joyride-close-tip {
  139 + position: absolute;
  140 + right: 10px;
  141 + top: 10px;
  142 + color: rgba(255,255,255,0.4) !important;
  143 + text-decoration: none;
  144 + font-family: Verdana, sans-serif;
  145 + font-size: 10px;
  146 + font-weight: bold;
  147 + border-bottom: none !important;
  148 +}
  149 +.joyride-close-tip:hover {
  150 + color: rgba(255,255,255,0.9) !important;
  151 +}
1  jquery-1.6.2.min.js
1 addition, 0 deletions not shown
295 jquery.joyride-1.0.js
... ... @@ -0,0 +1,295 @@
  1 +/*
  2 + * jQuery Joyride Plugin 1.0
  3 + * www.ZURB.com/playground
  4 + * Copyright 2011, ZURB
  5 + * Free to use under the MIT license.
  6 + * http://www.opensource.org/licenses/mit-license.php
  7 +*/
  8 +
  9 +(function($) {
  10 + $.fn.joyride = function(options) {
  11 +
  12 + // +++++++++++++++++++
  13 + // Defaults
  14 + // +++++++++++++++++++
  15 + var settings = {
  16 + 'tipLocation': 'bottom', // 'top' or 'bottom' in relation to parent
  17 + 'scrollSpeed': 300, // Page scrolling speed in milliseconds
  18 + 'timer': 0, // 0 = no timer, all other numbers = timer in milliseconds
  19 + 'startTimerOnClick': false, // true or false - true requires clicking the first button start the timer
  20 + 'nextButton': true, // true or false to control whether a next button is used
  21 + 'tipAnimation': 'pop', // 'pop' or 'fade' in each tip
  22 + 'tipAnimationFadeSpeed': 300, // when tipAnimation = 'fade' this is speed in milliseconds for the transition
  23 + 'cookieMonster': false, // true or false to control whether cookies are used
  24 + 'cookieName': 'JoyRide', // Name the cookie you'll use
  25 + 'cookieDomain': false, // Will this cookie be attached to a domain, ie. '.notableapp.com'
  26 + 'tipContainer': 'body', // Where will the tip be attached if not inline
  27 + 'inline': false, // true or false, if true the tip will be attached after the element
  28 + 'tipContent': '#joyRideTipContent' // What is the ID of the <ol> you put the content in
  29 + };
  30 +
  31 + //Extend those options
  32 + var options = $.extend(settings, options);
  33 +
  34 + return this.each(function() {
  35 +
  36 + if ($(options.tipContent).length === 0) return;
  37 +
  38 + $(options.tipContent).hide();
  39 +
  40 + var bodyOffset = $(options.tipContainer).children('*').first().position(),
  41 + tipContent = $(options.tipContent + ' li'),
  42 + count = skipCount = 0,
  43 + prevCount = -1,
  44 + timerIndicatorInstance,
  45 + timerIndicatorTemplate = '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
  46 + tipTemplate = function(tipClass, index, buttonText, self) { return '<div class="joyride-tip-guide ' + tipClass + '" id="joyRidePopup' + index + '"><span class="joyride-nub"></span>' + $(self).html() + buttonText + '<a href="#close" class="joyride-close-tip">X</a>' + timerIndicatorInstance + '</div>'; },
  47 + tipLayout = function(tipClass, index, buttonText, self) {
  48 + if (index == 0 && settings.startTimerOnClick && settings.timer > 0 || settings.timer == 0) {
  49 + timerIndicatorInstance = '';
  50 + } else {
  51 + timerIndicatorInstance = timerIndicatorInstance;
  52 + }
  53 + if (!tipClass) tipClass = '';
  54 + (buttonText != '') ? buttonText = '<a href="#" class="joyride-next-tip small nice radius yellow button">' + buttonText + '</a>': buttonText = '';
  55 + if (settings.inline) {
  56 + $(tipTemplate(tipClass, index, buttonText, self)).insertAfter('#' + $(self).attr('data-id'));
  57 + } else {
  58 + $(options.tipContainer).append(tipTemplate(tipClass, index, buttonText, self));
  59 + }
  60 + };
  61 +
  62 + if(!settings.cookieMonster || !$.cookie(settings.cookieName)) {
  63 +
  64 + tipContent.each(function(index) {
  65 + var buttonText = $(this).attr('data-text'),
  66 + tipClass = $(this).attr('class'),
  67 + self = this;
  68 +
  69 + if (settings.nextButton && buttonText == undefined) {
  70 + buttonText = 'Next';
  71 + }
  72 + if (settings.nextButton || !settings.nextButton && settings.startTimerOnClick) {
  73 + if ($(this).attr('class')) {
  74 + tipLayout(tipClass, index, buttonText, self);
  75 + } else {
  76 + tipLayout(false, index, buttonText, self);
  77 + }
  78 + } else if (!settings.nextButton) {
  79 + if ($(this).attr('class')) {
  80 + tipLayout(tipClass, index, '', self);
  81 + } else {
  82 + tipLayout(false, index, '', self);
  83 + }
  84 + }
  85 + $('#joyRidePopup' + index).hide();
  86 + });
  87 + }
  88 +
  89 + showNextTip = function() {
  90 + var parentElementID = $(tipContent[count]).attr('data-id'),
  91 + parentElement = $('#' + parentElementID);
  92 +
  93 + if (parentElement.offset() === null) {
  94 + count++;
  95 + skipCount++;
  96 + prevCount++;
  97 + parentElementID = $(tipContent[count]).attr('data-id'),
  98 + parentElement = $('#' + parentElementID);
  99 + }
  100 + var windowHalf = Math.ceil($(window).height() / 2),
  101 + currentTip = $('#joyRidePopup' + count),
  102 + currentTipPosition = parentElement.offset(),
  103 + currentParentHeight = parentElement.height() + 10,
  104 + currentTipHeight = currentTip.height() + 4,
  105 + tipOffset = 0;
  106 +
  107 + if (currentTip.length === 0) return;
  108 +
  109 + if (count < tipContent.length) {
  110 + if (settings.tipAnimation == "pop") {
  111 + $('.joyride-timer-indicator').width(0);
  112 + if (settings.timer > 0) {
  113 + currentTip.show().children('.joyride-timer-indicator-wrap').children('.joyride-timer-indicator').animate({width: '100%'}, settings.timer);
  114 + } else {
  115 + currentTip.show();
  116 + }
  117 + } else if (settings.tipAnimation == "fade") {
  118 + $('.joyride-timer-indicator').width(0);
  119 + if (settings.timer > 0) {
  120 + currentTip.fadeIn(settings.tipAnimationFadeSpeed).children('.joyride-timer-indicator-wrap').children('.joyride-timer-indicator').animate({width: '100%'}, settings.timer);
  121 + } else {
  122 + currentTip.fadeIn(settings.tipAnimationFadeSpeed);
  123 + }
  124 + }
  125 +
  126 + // ++++++++++++++++++
  127 + // Tip Location
  128 + // ++++++++++++++++++
  129 +
  130 + if (settings.tipLocation == "bottom") {
  131 + currentTip.offset({top: (currentTipPosition.top + currentParentHeight + 14), left: (currentTipPosition.left - bodyOffset.left)});
  132 + currentTip.children('.joyride-nub').addClass('top').removeClass('bottom');
  133 + } else if (settings.tipLocation == "top") {
  134 + if (currentTipHeight >= currentTipPosition.top) {
  135 + currentTip.offset({top: (currentTipPosition.top + currentParentHeight + 10 - bodyOffset.top), left: (currentTipPosition.left - bodyOffset.left)});
  136 + currentTip.children('.joyride-nub').addClass('top').removeClass('bottom');
  137 + } else {
  138 + currentTip.offset({top: ((currentTipPosition.top - 4) - (currentParentHeight + currentTipHeight + bodyOffset.top)), left: (currentTipPosition.left - bodyOffset.left)});
  139 + currentTip.children('.joyride-nub').addClass('bottom').removeClass('top');
  140 + }
  141 + }
  142 +
  143 + // Animate Scrolling when tip is off screen
  144 + tipOffset = Math.ceil(currentTip.offset().top - windowHalf);
  145 +
  146 + $("html, body").animate({
  147 + scrollTop: tipOffset
  148 + }, settings.scrollSpeed);
  149 +
  150 + if (count > 0) {
  151 + if (skipCount > 0) {
  152 + var hideCount = prevCount - skipCount;
  153 + skipCount = 0;
  154 + } else {
  155 + var hideCount = prevCount;
  156 + }
  157 + if (settings.tipAnimation == "pop") {
  158 + $('#joyRidePopup' + hideCount).hide();
  159 + } else if (settings.tipAnimation == "fade") {
  160 + $('#joyRidePopup' + hideCount).fadeOut(settings.tipAnimationFadeSpeed);
  161 + }
  162 + }
  163 +
  164 + // Hide the last tip when clicked
  165 + } else if ((tipContent.length - 1) < count) {
  166 + if (skipCount > 0) {
  167 + var hideCount = prevCount - skipCount;
  168 + skipCount = 0;
  169 + } else {
  170 + var hideCount = prevCount;
  171 + }
  172 + if (settings.cookieMonster == true) {
  173 + $.cookie(settings.cookieName, 'ridden', { expires: 365, domain: settings.cookieDomain });
  174 + } else {
  175 + // Do not include cookie
  176 + }
  177 + if (settings.tipAnimation == "pop") {
  178 + $('#joyRidePopup' + hideCount).fadeTo(0, 0);
  179 + } else if (settings.tipAnimation == "fade") {
  180 + $('#joyRidePopup' + hideCount).fadeTo(settings.tipAnimationFadeSpeed, 0);
  181 + }
  182 + }
  183 + count++;
  184 +
  185 + if (prevCount < 0) {
  186 + prevCount = 0;
  187 + } else {
  188 + prevCount++;
  189 + }
  190 + }
  191 + if (!settings.inline) {
  192 + $(window).resize(function() {
  193 + var parentElementID = $(tipContent[prevCount]).attr('data-id'),
  194 + currentTipPosition = $('#' + parentElementID).offset(),
  195 + currentParentHeight = $('#' + parentElementID).height(),
  196 + currentTipHeight = $('#joyRidePopup' + prevCount).height();
  197 + if (settings.tipLocation == "bottom") {
  198 + $('#joyRidePopup' + prevCount).offset({top: (currentTipPosition.top + currentParentHeight + 20), left: currentTipPosition.left});
  199 + } else if (settings.tipLocation == "top") {
  200 + if (currentTipPosition.top <= currentTipHeight) {
  201 + $('#joyRidePopup' + prevCount).offset({top: (currentTipPosition.top + currentParentHeight + 20), left: currentTipPosition.left});
  202 + } else {
  203 + $('#joyRidePopup' + prevCount).offset({top: (currentTipPosition.top - (currentTipHeight + currentParentHeight)), left: currentTipPosition.left});
  204 + }
  205 + }
  206 + });
  207 + }
  208 +
  209 + // +++++++++++++++
  210 + // Timer
  211 + // +++++++++++++++
  212 +
  213 + var interval_id = null,
  214 + showTimerState = false;
  215 +
  216 + if (!settings.startTimerOnClick && settings.timer > 0){
  217 + showNextTip();
  218 + interval_id = setInterval(function() {showNextTip()}, settings.timer);
  219 + } else {
  220 + showNextTip();
  221 + }
  222 + var endTip = function(e, interval_id, cookie, self) {
  223 + e.preventDefault();
  224 + clearInterval(interval_id);
  225 + if (cookie) {
  226 + $.cookie(settings.cookieName, 'ridden', { expires: 365, domain: settings.cookieDomain });
  227 + }
  228 + $(self).parent().hide();
  229 + }
  230 + $('.joyride-close-tip').click(function(e) {
  231 + endTip(e, interval_id, settings.cookieMonster, this);
  232 + });
  233 +
  234 + // When the next button is clicked, show the next tip, only when cookie isn't present
  235 + $('.joyride-next-tip').click(function(e) {
  236 + e.preventDefault();
  237 + if (count >= tipContent.length) {
  238 + endTip(e, interval_id, settings.cookieMonster, this);
  239 + }
  240 + if (settings.timer > 0 && settings.startTimerOnClick) {
  241 + showNextTip();
  242 + clearInterval(interval_id);
  243 + interval_id = setInterval(function() {showNextTip()}, settings.timer);
  244 + } else if (settings.timer > 0 && !settings.startTimerOnClick){
  245 + clearInterval(interval_id);
  246 + interval_id = setInterval(function() {showNextTip()}, settings.timer);
  247 + } else {
  248 + showNextTip();
  249 + }
  250 + });
  251 + }); // each call
  252 + }; // joyride plugin call
  253 +
  254 +
  255 + // +++++++++++++++++++++++++++++
  256 + // jQuery Cookie plugin
  257 + // +++++++++++++++++++++++++++++
  258 +
  259 + // Copyright (c) 2010 Klaus Hartl (stilbuero.de)
  260 + // Dual licensed under the MIT and GPL licenses:
  261 + // http://www.opensource.org/licenses/mit-license.php
  262 + // http://www.gnu.org/licenses/gpl.html
  263 + jQuery.cookie = function (key, value, options) {
  264 +
  265 + // key and at least value given, set cookie...
  266 + if (arguments.length > 1 && String(value) !== "[object Object]") {
  267 + options = jQuery.extend({}, options);
  268 +
  269 + if (value === null || value === undefined) {
  270 + options.expires = -1;
  271 + }
  272 +
  273 + if (typeof options.expires === 'number') {
  274 + var days = options.expires, t = options.expires = new Date();
  275 + t.setDate(t.getDate() + days);
  276 + }
  277 +
  278 + value = String(value);
  279 +
  280 + return (document.cookie = [
  281 + encodeURIComponent(key), '=',
  282 + options.raw ? value : encodeURIComponent(value),
  283 + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
  284 + options.path ? '; path=' + options.path : '',
  285 + options.domain ? '; domain=' + options.domain : '',
  286 + options.secure ? '; secure' : ''
  287 + ].join(''));
  288 + }
  289 +
  290 + // key and possibly options given, get cookie...
  291 + options = value || {};
  292 + var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
  293 + return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
  294 + }; // cookie plugin call
  295 +})(jQuery);

0 comments on commit acc6aec

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