diff --git a/css/hopscotch-0.1.2.css b/css/hopscotch-0.1.2.css new file mode 100644 index 00000000..c4887817 --- /dev/null +++ b/css/hopscotch-0.1.2.css @@ -0,0 +1,531 @@ +/** + * + * Copyright 2013 LinkedIn Corp. All rights reserved. + + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + + * http://www.apache.org/licenses/LICENSE-2.0 + + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * This fade animation is based on Dan Eden's animate.css (http://daneden.me/animate/), under the terms of the MIT license. + * + * Copyright 2013 Dan Eden. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + */ +.animated { + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -ms-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -ms-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; +} +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeInUp { + 0% { + opacity: 0; + -moz-transform: translateY(20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeInUp { + 0% { + opacity: 0; + -o-transform: translateY(20px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.fade-in-up { + -webkit-animation-name: fadeInUp; + -moz-animation-name: fadeInUp; + -o-animation-name: fadeInUp; + animation-name: fadeInUp; +} +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeInDown { + 0% { + opacity: 0; + -ms-transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-transform: translateY(0); + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.fade-in-down { + -webkit-animation-name: fadeInDown; + -moz-animation-name: fadeInDown; + -o-animation-name: fadeInDown; + animation-name: fadeInDown; +} +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} +@-moz-keyframes fadeInRight { + 0% { + opacity: 0; + -moz-transform: translateX(-20px); + } + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} +@-o-keyframes fadeInRight { + 0% { + opacity: 0; + -o-transform: translateX(-20px); + } + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} +@keyframes fadeInRight { + 0% { + opacity: 0; + transform: translateX(-20px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} +.fade-in-right { + -webkit-animation-name: fadeInRight; + -moz-animation-name: fadeInRight; + -o-animation-name: fadeInRight; + animation-name: fadeInRight; +} +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + } +} +@-moz-keyframes fadeInLeft { + 0% { + opacity: 0; + -moz-transform: translateX(20px); + } + 100% { + opacity: 1; + -moz-transform: translateX(0); + } +} +@-o-keyframes fadeInLeft { + 0% { + opacity: 0; + -o-transform: translateX(20px); + } + 100% { + opacity: 1; + -o-transform: translateX(0); + } +} +@keyframes fadeInLeft { + 0% { + opacity: 0; + transform: translateX(20px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} +.fade-in-left { + -webkit-animation-name: fadeInLeft; + -moz-animation-name: fadeInLeft; + -o-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} +/** + * + * Copyright 2013 LinkedIn Corp. All rights reserved. + + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + + * http://www.apache.org/licenses/LICENSE-2.0 + + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +div.hopscotch-bubble .hopscotch-nav-button { + /* borrowed from katy styles */ + + font-weight: bold; + border-width: 1px; + border-style: solid; + cursor: pointer; + margin: 0; + overflow: visible; + text-decoration: none !important; + width: auto; + padding: 0 10px; + height: 26px; + line-height: 24px; + font-size: 12px; + *zoom: 1; + white-space: nowrap; + display: -moz-inline-stack; + display: inline-block; + *vertical-align: auto; + zoom: 1; + *display: inline; + vertical-align: middle; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +div.hopscotch-bubble .hopscotch-nav-button:hover { + *zoom: 1; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); +} +div.hopscotch-bubble .hopscotch-nav-button:active { + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset; + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset; +} +div.hopscotch-bubble .hopscotch-nav-button.next { + border-color: #1b5480; + color: #fff; + margin: 0 0 0 10px; + /* HS specific*/ + + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); + background-color: #287bbc; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#287bbc', endColorstr='#23639a'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #287bbc), color-stop(100%, #23639a)); + background-image: -webkit-linear-gradient(top, #287bbc 0%, #23639a 100%); + background-image: -moz-linear-gradient(top, #287bbc 0%, #23639a 100%); + background-image: -o-linear-gradient(top, #287bbc 0%, #23639a 100%); + background-image: linear-gradient(top, #287bbc 0%, #23639a 100%); +} +div.hopscotch-bubble .hopscotch-nav-button.next:hover { + background-color: #2672ae; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#2672ae', endColorstr='#1e4f7e'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2672ae), color-stop(100%, #1e4f7e)); + background-image: -webkit-linear-gradient(top, #2672ae 0%, #1e4f7e 100%); + background-image: -moz-linear-gradient(top, #2672ae 0%, #1e4f7e 100%); + background-image: -o-linear-gradient(top, #2672ae 0%, #1e4f7e 100%); + background-image: linear-gradient(top, #2672ae 0%, #1e4f7e 100%); +} +div.hopscotch-bubble .hopscotch-nav-button.prev { + border-color: #a7a7a7; + color: #444; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + background-color: #f2f2f2; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#e9e9e9'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(100%, #e9e9e9)); + background-image: -webkit-linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%); + background-image: -moz-linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%); + background-image: -o-linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%); + background-image: linear-gradient(top, #f2f2f2 0%, #e9e9e9 100%); +} +div.hopscotch-bubble .hopscotch-nav-button.prev:hover { + background-color: #e8e8e8; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE8E8E8', endColorstr='#FFA9A9A9'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8e8e8), color-stop(13%, #e3e3e3), color-stop(32%, #d7d7d7), color-stop(71%, #b9b9b9), color-stop(100%, #a9a9a9)); + background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%); + background-image: -moz-linear-gradient(top, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%); + background-image: -o-linear-gradient(top, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%); + background-image: linear-gradient(top, #e8e8e8 0%, #e3e3e3 13%, #d7d7d7 32%, #b9b9b9 71%, #a9a9a9 100%); +} +div.hopscotch-bubble { + background-color: #ffffff; + border: 5px solid #000000; + /* default */ + + border: 5px solid rgba(0, 0, 0, 0.5); + /* transparent, if supported */ + + color: #333; + font-family: Helvetica, Arial; + font-size: 13px; + position: absolute; + z-index: 999999; + -moz-background-clip: padding; + /* for Mozilla browsers*/ + + -webkit-background-clip: padding; + /* Webkit */ + + background-clip: padding-box; + /* browsers with full support */ + +} +div.hopscotch-bubble.animate { + -moz-transition-property: top, left; + -moz-transition-duration: 1s; + -moz-transition-timing-function: ease-in-out; + -ms-transition-property: top, left; + -ms-transition-duration: 1s; + -ms-transition-timing-function: ease-in-out; + -o-transition-property: top, left; + -o-transition-duration: 1s; + -o-transition-timing-function: ease-in-out; + -webkit-transition-property: top, left; + -webkit-transition-duration: 1s; + -webkit-transition-timing-function: ease-in-out; + transition-property: top, left; + transition-duration: 1s; + transition-timing-function: ease-in-out; +} +div.hopscotch-bubble.invisible { + opacity: 0; +} +div.hopscotch-bubble.hide, +div.hopscotch-bubble .hide, +div.hopscotch-bubble .hide-all { + display: none; +} +div.hopscotch-bubble h3 { + color: #000; + font-family: Helvetica, Arial; + font-size: 16px; + font-weight: bold; + line-height: 19px; + margin: -1px 15px 0 0; + padding: 0; +} +div.hopscotch-bubble .hopscotch-bubble-container { + padding: 15px; + position: relative; + text-align: left; + -webkit-font-smoothing: antialiased; + /* to fix text flickering */ + +} +div.hopscotch-bubble .hopscotch-content { + font-family: Helvetica, Arial; + font-weight: normal; + line-height: 17px; + margin: -5px 0 11px; + padding-top: 8px; +} +div.hopscotch-bubble .hopscotch-bubble-content { + margin: 0 0 0 40px; +} +div.hopscotch-bubble.no-number .hopscotch-bubble-content { + margin: 0; +} +div.hopscotch-bubble .hopscotch-bubble-close { + color: #000; + background: transparent url(../img/sprite-green-0.3.png) -192px -92px no-repeat; + display: block; + padding: 8px; + position: absolute; + text-decoration: none; + text-indent: -9999px; + width: 8px; + height: 8px; + top: 0; + right: 0; +} +div.hopscotch-bubble .hopscotch-bubble-close.hide, +div.hopscotch-bubble .hopscotch-bubble-close.hide-all { + display: none; +} +div.hopscotch-bubble .hopscotch-bubble-number { + background: transparent url(../img/sprite-green-0.3.png) 0 0 no-repeat; + color: #fff; + display: block; + float: left; + font-size: 17px; + font-weight: bold; + line-height: 31px; + padding: 0 10px 0 0; + text-align: center; + width: 30px; + height: 30px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container { + position: absolute; + width: 34px; + height: 34px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow, +div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow-border { + width: 0; + height: 0; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.up { + top: -22px; + left: 10px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow { + border-bottom: 17px solid #ffffff; + border-left: 17px solid transparent; + border-right: 17px solid transparent; + position: relative; + top: -10px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border { + border-bottom: 17px solid #000000; + border-bottom: 17px solid rgba(0, 0, 0, 0.5); + border-left: 17px solid transparent; + border-right: 17px solid transparent; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.down { + bottom: -39px; + left: 10px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow { + border-top: 17px solid #ffffff; + border-left: 17px solid transparent; + border-right: 17px solid transparent; + position: relative; + top: -24px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border { + border-top: 17px solid #000000; + border-top: 17px solid rgba(0, 0, 0, 0.5); + border-left: 17px solid transparent; + border-right: 17px solid transparent; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.left { + top: 10px; + left: -22px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow { + border-bottom: 17px solid transparent; + border-right: 17px solid #ffffff; + border-top: 17px solid transparent; + position: relative; + left: 7px; + top: -34px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border { + border-right: 17px solid #000000; + border-right: 17px solid rgba(0, 0, 0, 0.5); + border-bottom: 17px solid transparent; + border-top: 17px solid transparent; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.right { + top: 10px; + right: -39px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow { + border-bottom: 17px solid transparent; + border-left: 17px solid #ffffff; + border-top: 17px solid transparent; + position: relative; + left: -7px; + top: -34px; +} +div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border { + border-left: 17px solid #000000; + border-left: 17px solid rgba(0, 0, 0, 0.5); + border-bottom: 17px solid transparent; + border-top: 17px solid transparent; +} +div.hopscotch-bubble .hopscotch-actions { + margin: 10px 0 0; + text-align: right; +} diff --git a/css/hopscotch-0.1.2.min.css b/css/hopscotch-0.1.2.min.css new file mode 100644 index 00000000..a8ebce9a --- /dev/null +++ b/css/hopscotch-0.1.2.min.css @@ -0,0 +1,17 @@ +/**! +* +* Copyright 2013 LinkedIn Corp. All rights reserved. +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.fade-in-up{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0%{opacity:0;-ms-transform:translateY(-20px)}100%{opacity:1;-ms-transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}.fade-in-down{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(-20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(-20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}.fade-in-right{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}.fade-in-left{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft}div.hopscotch-bubble .hopscotch-nav-button{font-weight:bold;border-width:1px;border-style:solid;cursor:pointer;margin:0;overflow:visible;text-decoration:none!important;width:auto;padding:0 10px;height:26px;line-height:24px;font-size:12px;*zoom:1;white-space:nowrap;display:-moz-inline-stack;display:inline-block;*vertical-align:auto;zoom:1;*display:inline;vertical-align:middle;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}div.hopscotch-bubble .hopscotch-nav-button:hover{*zoom:1;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);box-shadow:0 1px 3px rgba(0,0,0,0.25)}div.hopscotch-bubble .hopscotch-nav-button:active{-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.25) inset;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25) inset;box-shadow:0 1px 2px rgba(0,0,0,0.25) inset}div.hopscotch-bubble .hopscotch-nav-button.next{border-color:#1b5480;color:#fff;margin:0 0 0 10px;text-shadow:0 1px 1px rgba(0,0,0,0.35);background-color:#287bbc;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#287bbc',endColorstr='#23639a');background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#287bbc),color-stop(100%,#23639a));background-image:-webkit-linear-gradient(top,#287bbc 0,#23639a 100%);background-image:-moz-linear-gradient(top,#287bbc 0,#23639a 100%);background-image:-o-linear-gradient(top,#287bbc 0,#23639a 100%);background-image:linear-gradient(top,#287bbc 0,#23639a 100%)}div.hopscotch-bubble .hopscotch-nav-button.next:hover{background-color:#2672ae;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#2672ae',endColorstr='#1e4f7e');background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#2672ae),color-stop(100%,#1e4f7e));background-image:-webkit-linear-gradient(top,#2672ae 0,#1e4f7e 100%);background-image:-moz-linear-gradient(top,#2672ae 0,#1e4f7e 100%);background-image:-o-linear-gradient(top,#2672ae 0,#1e4f7e 100%);background-image:linear-gradient(top,#2672ae 0,#1e4f7e 100%)}div.hopscotch-bubble .hopscotch-nav-button.prev{border-color:#a7a7a7;color:#444;text-shadow:0 1px 1px rgba(255,255,255,0.75);background-color:#f2f2f2;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#f2f2f2',endColorstr='#e9e9e9');background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f2f2f2),color-stop(100%,#e9e9e9));background-image:-webkit-linear-gradient(top,#f2f2f2 0,#e9e9e9 100%);background-image:-moz-linear-gradient(top,#f2f2f2 0,#e9e9e9 100%);background-image:-o-linear-gradient(top,#f2f2f2 0,#e9e9e9 100%);background-image:linear-gradient(top,#f2f2f2 0,#e9e9e9 100%)}div.hopscotch-bubble .hopscotch-nav-button.prev:hover{background-color:#e8e8e8;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FFE8E8E8',endColorstr='#FFA9A9A9');background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#e8e8e8),color-stop(13%,#e3e3e3),color-stop(32%,#d7d7d7),color-stop(71%,#b9b9b9),color-stop(100%,#a9a9a9));background-image:-webkit-linear-gradient(top,#e8e8e8 0,#e3e3e3 13%,#d7d7d7 32%,#b9b9b9 71%,#a9a9a9 100%);background-image:-moz-linear-gradient(top,#e8e8e8 0,#e3e3e3 13%,#d7d7d7 32%,#b9b9b9 71%,#a9a9a9 100%);background-image:-o-linear-gradient(top,#e8e8e8 0,#e3e3e3 13%,#d7d7d7 32%,#b9b9b9 71%,#a9a9a9 100%);background-image:linear-gradient(top,#e8e8e8 0,#e3e3e3 13%,#d7d7d7 32%,#b9b9b9 71%,#a9a9a9 100%)}div.hopscotch-bubble{background-color:#fff;border:5px solid #000;border:5px solid rgba(0,0,0,0.5);color:#333;font-family:Helvetica,Arial;font-size:13px;position:absolute;z-index:999999;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box}div.hopscotch-bubble.animate{-moz-transition-property:top,left;-moz-transition-duration:1s;-moz-transition-timing-function:ease-in-out;-ms-transition-property:top,left;-ms-transition-duration:1s;-ms-transition-timing-function:ease-in-out;-o-transition-property:top,left;-o-transition-duration:1s;-o-transition-timing-function:ease-in-out;-webkit-transition-property:top,left;-webkit-transition-duration:1s;-webkit-transition-timing-function:ease-in-out;transition-property:top,left;transition-duration:1s;transition-timing-function:ease-in-out}div.hopscotch-bubble.invisible{opacity:0}div.hopscotch-bubble.hide,div.hopscotch-bubble .hide,div.hopscotch-bubble .hide-all{display:none}div.hopscotch-bubble h3{color:#000;font-family:Helvetica,Arial;font-size:16px;font-weight:bold;line-height:19px;margin:-1px 15px 0 0;padding:0}div.hopscotch-bubble .hopscotch-bubble-container{padding:15px;position:relative;text-align:left;-webkit-font-smoothing:antialiased}div.hopscotch-bubble .hopscotch-content{font-family:Helvetica,Arial;font-weight:normal;line-height:17px;margin:-5px 0 11px;padding-top:8px}div.hopscotch-bubble .hopscotch-bubble-content{margin:0 0 0 40px}div.hopscotch-bubble.no-number .hopscotch-bubble-content{margin:0}div.hopscotch-bubble .hopscotch-bubble-close{color:#000;background:transparent url(../img/sprite-green-0.3.png) -192px -92px no-repeat;display:block;padding:8px;position:absolute;text-decoration:none;text-indent:-9999px;width:8px;height:8px;top:0;right:0}div.hopscotch-bubble .hopscotch-bubble-close.hide,div.hopscotch-bubble .hopscotch-bubble-close.hide-all{display:none}div.hopscotch-bubble .hopscotch-bubble-number{background:transparent url(../img/sprite-green-0.3.png) 0 0 no-repeat;color:#fff;display:block;float:left;font-size:17px;font-weight:bold;line-height:31px;padding:0 10px 0 0;text-align:center;width:30px;height:30px}div.hopscotch-bubble .hopscotch-bubble-arrow-container{position:absolute;width:34px;height:34px}div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow,div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow-border{width:0;height:0}div.hopscotch-bubble .hopscotch-bubble-arrow-container.up{top:-22px;left:10px}div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow{border-bottom:17px solid #fff;border-left:17px solid transparent;border-right:17px solid transparent;position:relative;top:-10px}div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border{border-bottom:17px solid #000;border-bottom:17px solid rgba(0,0,0,0.5);border-left:17px solid transparent;border-right:17px solid transparent}div.hopscotch-bubble .hopscotch-bubble-arrow-container.down{bottom:-39px;left:10px}div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow{border-top:17px solid #fff;border-left:17px solid transparent;border-right:17px solid transparent;position:relative;top:-24px}div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border{border-top:17px solid #000;border-top:17px solid rgba(0,0,0,0.5);border-left:17px solid transparent;border-right:17px solid transparent}div.hopscotch-bubble .hopscotch-bubble-arrow-container.left{top:10px;left:-22px}div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow{border-bottom:17px solid transparent;border-right:17px solid #fff;border-top:17px solid transparent;position:relative;left:7px;top:-34px}div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border{border-right:17px solid #000;border-right:17px solid rgba(0,0,0,0.5);border-bottom:17px solid transparent;border-top:17px solid transparent}div.hopscotch-bubble .hopscotch-bubble-arrow-container.right{top:10px;right:-39px}div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow{border-bottom:17px solid transparent;border-left:17px solid #fff;border-top:17px solid transparent;position:relative;left:-7px;top:-34px}div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border{border-left:17px solid #000;border-left:17px solid rgba(0,0,0,0.5);border-bottom:17px solid transparent;border-top:17px solid transparent}div.hopscotch-bubble .hopscotch-actions{margin:10px 0 0;text-align:right} \ No newline at end of file diff --git a/js/hopscotch-0.1.1.js b/js/hopscotch-0.1.2.js similarity index 100% rename from js/hopscotch-0.1.1.js rename to js/hopscotch-0.1.2.js diff --git a/js/hopscotch-0.1.1.min.js b/js/hopscotch-0.1.2.min.js similarity index 93% rename from js/hopscotch-0.1.1.min.js rename to js/hopscotch-0.1.2.min.js index ff02f8da..ae3d154d 100644 --- a/js/hopscotch-0.1.1.min.js +++ b/js/hopscotch-0.1.2.min.js @@ -14,4 +14,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -!function(a,b){var c,d,e,f,g,h,i,j,k,l,m=window.Sizzle||null,n=a[b],o="undefined",p=!1,q=typeof window.jQuery!==o,r=typeof window.sessionStorage!==o,s=window.document;l={smoothScroll:!0,scrollDuration:1e3,scrollTopMargin:200,showCloseButton:!0,showPrevButton:!1,showNextButton:!0,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:!0,cookieName:"hopscotch.tour.state"},n||(Array.isArray||(Array.isArray=function(a){return"[object Array]"===Object.prototype.toString.call(a)}),k=function(){p&&n.startTour()},h={addClass:function(a,b){var c,d,e,f;if(a.className){for(d=b.split(/\s+/),c=" "+a.className+" ",e=0,f=d.length;f>e;++e)c.indexOf(" "+d[e]+" ")<0&&(c+=d[e]+" ");a.className=c.replace(/^\s+|\s+$/g,"")}else a.className=b},removeClass:function(a,b){var c,d,e,f;for(d=b.split(/\s+/),c=" "+a.className+" ",e=0,f=d.length;f>e;++e)c=c.replace(" "+d[e]+" "," ");a.className=c.replace(/^\s+|\s+$/g,"")},getPixelValue:function(a){var b=typeof a;return"number"===b?a:"string"===b?parseInt(a,10):0},valOrDefault:function(a,b){return typeof a!==o?a:b},invokeCallbackArrayHelper:function(a){var b;return Array.isArray(a)&&(b=j[a[0]],"function"==typeof b)?b.apply(this,a.slice(1)):void 0},invokeCallbackArray:function(a){var b,c;if(Array.isArray(a)){if("string"==typeof a[0])return h.invokeCallbackArrayHelper(a);for(b=0,c=a.length;c>b;++b)h.invokeCallback(a[b])}},invokeCallback:function(a){return"function"==typeof a?a():"string"==typeof a&&j[a]?j[a]():h.invokeCallbackArray(a)},invokeEventCallbacks:function(a,b){var c,d,e=i[a];if(b)return this.invokeCallback(b);for(c=0,d=e.length;d>c;++c)this.invokeCallback(e[c].cb)},getScrollTop:function(){var a;return a=typeof window.pageYOffset!==o?window.pageYOffset:s.documentElement.scrollTop},getScrollLeft:function(){var a;return a=typeof window.pageXOffset!==o?window.pageXOffset:s.documentElement.scrollLeft},getWindowHeight:function(){return window.innerHeight||s.documentElement.clientHeight},getWindowWidth:function(){return window.innerWidth||s.documentElement.clientWidth},addEvtListener:function(a,b,c){return a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent("on"+b,c)},removeEvtListener:function(a,b,c){return a.removeEventListener?a.removeEventListener(b,c,!1):a.detachEvent("on"+b,c)},documentIsReady:function(){return"complete"===s.readyState||"interactive"===s.readyState},evtPreventDefault:function(a){a.preventDefault?a.preventDefault():event&&(event.returnValue=!1)},extend:function(a,b){var c;for(c in b)b.hasOwnProperty(c)&&(a[c]=b[c])},getStepTargetHelper:function(a){var b;return/^[#\.]/.test(a)?s.querySelector?s.querySelector(a):q?(b=jQuery(a),b.length?b[0]:null):m?(b=new m(a),b.length?b[0]:null):/^#[a-zA-Z][\w-_:.]*$/.test(a)?s.getElementById(a.substring(1)):null:s.getElementById(a)},getStepTarget:function(a){var b;if(!a||!a.target)return null;if("string"==typeof a.target)return a.target=h.getStepTargetHelper(a.target),a.target;if(Array.isArray(a.target)){var c,d;for(c=0,d=a.target.length;d>c;c++)if("string"==typeof a.target[c]&&(b=h.getStepTargetHelper(a.target[c])))return a.target=b,b;return null}return a.target},getI18NString:function(a){return g[a]||f[a]},setState:function(a,b,c){var d,e="";r?sessionStorage.setItem(a,b):(c&&(d=new Date,d.setTime(d.getTime()+1e3*60*60*24*c),e="; expires="+d.toGMTString()),s.cookie=a+"="+b+e+"; path=/")},getState:function(a){var b,c,d,e=a+"=",f=s.cookie.split(";");if(r)d=sessionStorage.getItem(a);else for(b=0;b=0?" prev":" next",h.addClass(c,d),c},setPosition:function(a){var b,c,d,e,f,g,i,j=6,k=h.getStepTarget(a),l=this.element,m=this.arrowEl;b=h.getPixelValue(a.width)||this.opt.bubbleWidth,d=h.valOrDefault(a.padding,this.opt.bubblePadding),h.removeClass(l,"fade-in-down fade-in-up fade-in-left fade-in-right"),!a.placement&&a.orientation&&(a.placement=a.orientation),e=k.getBoundingClientRect(),"top"===a.placement?(c=l.offsetHeight,f=e.top-c-this.opt.arrowWidth,g=e.left):"bottom"===a.placement?(f=e.bottom+this.opt.arrowWidth,g=e.left):"left"===a.placement?(f=e.top,g=e.left-b-2*d-2*j-this.opt.arrowWidth):"right"===a.placement&&(f=e.top,g=e.right+this.opt.arrowWidth),i="center"!==a.arrowOffset?h.getPixelValue(a.arrowOffset):a.arrowOffset,i?"top"===a.placement||"bottom"===a.placement?(m.style.top="",m.style.left="center"===i?b/2+d-m.offsetWidth/2+"px":i+"px"):("left"===a.placement||"right"===a.placement)&&(m.style.left="","center"===i?(c=c||l.offsetHeight,m.style.top=c/2+d-m.offsetHeight/2+"px"):m.style.top=i+"px"):(m.style.top="",m.style.left=""),"center"===a.xOffset?g=e.left+k.offsetWidth/2-b/2-d:g+=h.getPixelValue(a.xOffset),"center"===a.yOffset?(c=c||l.offsetHeight,f=e.top+k.offsetHeight/2-c/2-d):f+=h.getPixelValue(a.yOffset),a.fixedElement||(f+=h.getScrollTop(),g+=h.getScrollLeft()),l.style.position=a.fixedElement?"fixed":"absolute",l.style.top=f+"px",l.style.left=g+"px"},_initNavButtons:function(){var a=s.createElement("div");return this.prevBtnEl=this._createButton("hopscotch-prev",h.getI18NString("prevBtn")),this.nextBtnEl=this._createButton("hopscotch-next",h.getI18NString("nextBtn")),this.doneBtnEl=this._createButton("hopscotch-done",h.getI18NString("doneBtn")),this.ctaBtnEl=this._createButton("hopscotch-cta"),h.addClass(this.doneBtnEl,"hide"),a.appendChild(this.prevBtnEl),a.appendChild(this.ctaBtnEl),a.appendChild(this.nextBtnEl),a.appendChild(this.doneBtnEl),h.addEvtListener(this.prevBtnEl,"click",function(){n.prevStep(!0)}),h.addEvtListener(this.nextBtnEl,"click",function(){n.nextStep(!0)}),h.addEvtListener(this.doneBtnEl,"click",function(){n.endTour()}),a.className="hopscotch-actions",this.buttonsEl=a,this.containerEl.appendChild(a),this},_getCloseFn:function(){var a=this;return this.closeFn||(this.closeFn=function(b){a.opt.onClose&&h.invokeCallback(a.opt.onClose),a.opt.id&&!a.opt.isTourBubble?n.getCalloutManager().removeCallout(a.opt.id):a.destroy(),h.evtPreventDefault(b)}),this.closeFn},initCloseButton:function(){var a=s.createElement("a");return a.className="hopscotch-bubble-close",a.href="#",a.title=h.getI18NString("closeTooltip"),a.innerHTML=h.getI18NString("closeTooltip"),this.opt.isTourBubble?h.addEvtListener(a,"click",function(a){var b=n.getCurrStepNum(),c=n.getCurrTour(),d=b===c.steps.length-1;h.invokeEventCallbacks("close"),n.endTour(!0,d),a.preventDefault?a.preventDefault():event&&(event.returnValue=!1)}):h.addEvtListener(a,"click",this._getCloseFn()),h.valOrDefault(this.opt.showCloseButton,!0)||h.addClass(a,"hide"),this.closeBtnEl=a,this.containerEl.appendChild(a),this},_initArrow:function(){var a,b;return this.arrowEl=s.createElement("div"),this.arrowEl.className="hopscotch-bubble-arrow-container",b=s.createElement("div"),b.className="hopscotch-bubble-arrow-border",a=s.createElement("div"),a.className="hopscotch-bubble-arrow",this.arrowEl.appendChild(b),this.arrowEl.appendChild(a),this.element.appendChild(this.arrowEl),this},_setupCTAButton:function(a){var b=this;this._showButton(this.ctaBtnEl,!!a.showCTAButton),a.showCTAButton&&a.ctaLabel&&(this.ctaBtnEl.innerHTML=a.ctaLabel,this._ctaFn=function(){b.opt.isTourBubble||n.getCalloutManager().removeCallout(a.id),a.onCTA&&"function"==typeof a.onCTA&&a.onCTA()},h.addEvtListener(this.ctaBtnEl,"click",this._ctaFn))},_removeCTACallback:function(){this.ctaBtnEl&&this._ctaFn&&(h.removeEvtListener(this.ctaBtnEl,"click",this._ctaFn),this._ctaFn=null)},render:function(a,b,c,d){var e,f,g,i,j=this.element;return a?this.currStep=a:this.currStep&&(a=this.currStep),!a.placement&&a.orientation&&(a.placement=a.orientation),e=h.valOrDefault(a.showNextButton,this.opt.showNextButton),f=h.valOrDefault(a.showPrevButton,this.opt.showPrevButton),this.setTitle(a.title||""),this.setContent(a.content||""),this.opt.isTourBubble&&this.setNum(b),this.placement=a.placement,this.showPrevButton(this.prevBtnEl&&f&&b>0),this.showNextButton(this.nextBtnEl&&e&&!c),this.nextBtnEl.innerHTML=a.showSkip?h.getI18NString("skipBtn"):h.getI18NString("nextBtn"),c?h.removeClass(this.doneBtnEl,"hide"):h.addClass(this.doneBtnEl,"hide"),this._setupCTAButton(a),this._setArrow(a.placement),g=h.getPixelValue(a.width)||this.opt.bubbleWidth,i=h.valOrDefault(a.padding,this.opt.bubblePadding),this.containerEl.style.width=g+"px",this.containerEl.style.padding=i+"px",j.style.zIndex=a.zindex||"","top"===a.placement?(j.style.top="-9999px",j.style.left="-9999px",h.removeClass(j,"hide"),this.setPosition(a),h.addClass(j,"hide")):this.setPosition(a),d&&d(!a.fixedElement),this},setTitle:function(a){return a?(this.titleEl.innerHTML=a,h.removeClass(this.titleEl,"hide")):h.addClass(this.titleEl,"hide"),this},setContent:function(a){return a?(this.contentEl.innerHTML=a,h.removeClass(this.contentEl,"hide")):h.addClass(this.contentEl,"hide"),this},setNum:function(a){var b=h.getI18NString("stepNums");b&&am||m>=k.steps.length?null:k.steps[m]},y=function(){u.nextStep()},z=function(a){var b,c,d,e,f,g,i=v(),j=i.element,k=h.getPixelValue(j.style.top),l=k+h.getPixelValue(j.offsetHeight),m=h.getStepTarget(x()),n=m.getBoundingClientRect(),p=n.top+h.getScrollTop(),r=n.bottom+h.getScrollTop(),t=p>k?k:p,u=l>r?l:r,y=h.getScrollTop(),z=y+h.getWindowHeight(),A=t-w("scrollTopMargin");t>=y&&(t<=y+w("scrollTopMargin")||z>=u)?a&&a():w("smoothScroll")?typeof YAHOO!==o&&typeof YAHOO.env!==o&&typeof YAHOO.env.ua!==o&&typeof YAHOO.util!==o&&typeof YAHOO.util.Scroll!==o?(b=YAHOO.env.ua.webkit?s.body:s.documentElement,d=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:void 0,c=new YAHOO.util.Scroll(b,{scroll:{to:[0,A]}},w("scrollDuration")/1e3,d),c.onComplete.subscribe(a),c.animate()):q?jQuery("body, html").animate({scrollTop:A},w("scrollDuration"),a):(0>A&&(A=0),e=y>t?-1:1,f=Math.abs(y-A)/(w("scrollDuration")/10),g=function(){var b=h.getScrollTop(),c=b+e*f;return e>0&&c>=A||0>e&&A>=c?(c=A,a&&a(),window.scrollTo(0,c),void 0):(window.scrollTo(0,c),h.getScrollTop()===b?(a&&a(),void 0):(setTimeout(g,10),void 0))},g()):(window.scrollTo(0,A),a&&a())},A=function(a,b){var c,d,e;m+a>=0&&m+a0?d.multipage:m>0&&k.steps[m-1].multipage,f=function(c){var f;return-1===c?this.endTour(!0):(a&&(f=b>0?h.invokeEventCallbacks("next",d.onNext):h.invokeEventCallbacks("prev",d.onPrev)),e?(h.setState(w("cookieName"),k.id+":"+m,1),void 0):(f=h.valOrDefault(f,!0),f?this.showStep(c):this.endTour(!1),void 0))},!e&&w("skipIfNoElement"))A(b,function(a){f.call(i,a)});else if(m+b>=0&&m+b=k.steps.length)throw"Specified step number out of bounds.";m=b}return h.documentIsReady()?(m||k.id!==n||typeof r===o?m||(m=0):m=r,D(m,function(a){var b=-1!==a&&h.getStepTarget(k.steps[a]);return b?(h.invokeEventCallbacks("start"),c=v(),c.hide(!1),d.isActive=!0,h.getStepTarget(x())?d.showStep(a):(h.invokeEventCallbacks("error"),w("skipIfNoElement")&&d.nextStep(!1)),void 0):(d.endTour(!1,!1),void 0)}),this):(p=!0,this)},this.showStep=function(a){var b=k.steps[a];return b.delay?setTimeout(function(){E(a)},b.delay):E(a),this},this.prevStep=function(a){return B.call(this,a,-1),this},this.nextStep=function(a){var b=x(),c=h.getStepTarget(b);return b.nextOnTargetClick&&h.removeEvtListener(c,"click",y),B.call(this,a,1),this},this.endTour=function(a,b){var c=v();return a=h.valOrDefault(a,!0),b=h.valOrDefault(b,!0),m=0,r=void 0,c.hide(),a&&h.clearState(w("cookieName")),this.isActive&&(this.isActive=!1,k&&b&&h.invokeEventCallbacks("end")),this.removeCallbacks(null,!0),this.resetDefaultOptions(),k=null,this},this.getCurrTour=function(){return k},this.getCurrStepNum=function(){return m},this.listen=function(a,b,c){return a&&i[a].push({cb:b,fromTour:c}),this},this.unlisten=function(a,b){var c,d,e=i[a];for(c=0,d=e.length;d>c;++c)e[c]===b&&e.splice(c,1);return this},this.removeCallbacks=function(a,b){var c,d,e,f;for(f in i)if(!a||a===f)if(b)for(c=i[f],d=0,e=c.length;e>d;++d)c[d].fromTour&&(c.splice(d--,1),--e);else i[f]=[];return this},this.registerHelper=function(a,b){"string"==typeof a&&"function"==typeof b&&(j[a]=b)},this.unregisterHelper=function(a){j[a]=null},this.invokeHelper=function(a){var b,c,d=[];for(b=1,c=arguments.length;c>b;++b)d.push(arguments[b]);j[a]&&j[a].call(null,d)},this.setCookieName=function(a){return f.cookieName=a,this},this.resetDefaultOptions=function(){return f={},this},this.resetDefaultI18N=function(){return g={},this},this.getState=function(){return h.getState(w("cookieName"))},t=function(a,b){var c,d,e,i,j=["next","prev","start","end","show","error","close"];for(f||this.resetDefaultOptions(),h.extend(f,a),a&&h.extend(g,a.i18n),e=0,i=j.length;i>e;++e)d="on"+j[e].charAt(0).toUpperCase()+j[e].substring(1),a[d]&&this.listen(j[e],a[d],b);return c=v(!0),this},this.configure=function(a){return t.call(this,a,!1)},F.call(this,a)},n=new c,a[b]=n)}(window,"hopscotch"); \ No newline at end of file +!function(a,b){var c,d,e,f,g,h,i,j,k,l,m=window.Sizzle||null,n=a[b],o="undefined",p=!1,q=typeof window.jQuery!==o,r=typeof window.sessionStorage!==o,s=window.document;l={smoothScroll:!0,scrollDuration:1e3,scrollTopMargin:200,showCloseButton:!0,showPrevButton:!1,showNextButton:!0,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:!0,cookieName:"hopscotch.tour.state"},n||(Array.isArray||(Array.isArray=function(a){return"[object Array]"===Object.prototype.toString.call(a)}),k=function(){p&&n.startTour()},h={addClass:function(a,b){var c,d,e,f;if(a.className){for(d=b.split(/\s+/),c=" "+a.className+" ",e=0,f=d.length;f>e;++e)c.indexOf(" "+d[e]+" ")<0&&(c+=d[e]+" ");a.className=c.replace(/^\s+|\s+$/g,"")}else a.className=b},removeClass:function(a,b){var c,d,e,f;for(d=b.split(/\s+/),c=" "+a.className+" ",e=0,f=d.length;f>e;++e)c=c.replace(" "+d[e]+" "," ");a.className=c.replace(/^\s+|\s+$/g,"")},getPixelValue:function(a){var b=typeof a;return"number"===b?a:"string"===b?parseInt(a,10):0},valOrDefault:function(a,b){return typeof a!==o?a:b},invokeCallbackArrayHelper:function(a){var b;return Array.isArray(a)&&(b=j[a[0]],"function"==typeof b)?b.apply(this,a.slice(1)):void 0},invokeCallbackArray:function(a){var b,c;if(Array.isArray(a)){if("string"==typeof a[0])return h.invokeCallbackArrayHelper(a);for(b=0,c=a.length;c>b;++b)h.invokeCallback(a[b])}},invokeCallback:function(a){return"function"==typeof a?a():"string"==typeof a&&j[a]?j[a]():h.invokeCallbackArray(a)},invokeEventCallbacks:function(a,b){var c,d,e=i[a];if(b)return this.invokeCallback(b);for(c=0,d=e.length;d>c;++c)this.invokeCallback(e[c].cb)},getScrollTop:function(){var a;return a=typeof window.pageYOffset!==o?window.pageYOffset:s.documentElement.scrollTop},getScrollLeft:function(){var a;return a=typeof window.pageXOffset!==o?window.pageXOffset:s.documentElement.scrollLeft},getWindowHeight:function(){return window.innerHeight||s.documentElement.clientHeight},getWindowWidth:function(){return window.innerWidth||s.documentElement.clientWidth},addEvtListener:function(a,b,c){return a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent("on"+b,c)},removeEvtListener:function(a,b,c){return a.removeEventListener?a.removeEventListener(b,c,!1):a.detachEvent("on"+b,c)},documentIsReady:function(){return"complete"===s.readyState||"interactive"===s.readyState},evtPreventDefault:function(a){a.preventDefault?a.preventDefault():event&&(event.returnValue=!1)},extend:function(a,b){var c;for(c in b)b.hasOwnProperty(c)&&(a[c]=b[c])},getStepTargetHelper:function(a){var b;return/^[#\.]/.test(a)?s.querySelector?s.querySelector(a):q?(b=jQuery(a),b.length?b[0]:null):m?(b=new m(a),b.length?b[0]:null):/^#[a-zA-Z][\w-_:.]*$/.test(a)?s.getElementById(a.substring(1)):null:s.getElementById(a)},getStepTarget:function(a){var b;if(!a||!a.target)return null;if("string"==typeof a.target)return a.target=h.getStepTargetHelper(a.target),a.target;if(Array.isArray(a.target)){var c,d;for(c=0,d=a.target.length;d>c;c++)if("string"==typeof a.target[c]&&(b=h.getStepTargetHelper(a.target[c])))return a.target=b,b;return null}return a.target},getI18NString:function(a){return g[a]||f[a]},setState:function(a,b,c){var d,e="";r?sessionStorage.setItem(a,b):(c&&(d=new Date,d.setTime(d.getTime()+1e3*60*60*24*c),e="; expires="+d.toGMTString()),s.cookie=a+"="+b+e+"; path=/")},getState:function(a){var b,c,d,e=a+"=",f=s.cookie.split(";");if(r)d=sessionStorage.getItem(a);else for(b=0;b=0?" prev":" next",h.addClass(c,d),c},setPosition:function(a){var b,c,d,e,f,g,i,j=6,k=h.getStepTarget(a),l=this.element,m=this.arrowEl;b=h.getPixelValue(a.width)||this.opt.bubbleWidth,d=h.valOrDefault(a.padding,this.opt.bubblePadding),h.removeClass(l,"fade-in-down fade-in-up fade-in-left fade-in-right"),!a.placement&&a.orientation&&(a.placement=a.orientation),e=k.getBoundingClientRect(),"top"===a.placement?(c=l.offsetHeight,f=e.top-c-this.opt.arrowWidth,g=e.left):"bottom"===a.placement?(f=e.bottom+this.opt.arrowWidth,g=e.left):"left"===a.placement?(f=e.top,g=e.left-b-2*d-2*j-this.opt.arrowWidth):"right"===a.placement&&(f=e.top,g=e.right+this.opt.arrowWidth),i="center"!==a.arrowOffset?h.getPixelValue(a.arrowOffset):a.arrowOffset,i?"top"===a.placement||"bottom"===a.placement?(m.style.top="",m.style.left="center"===i?b/2+d-m.offsetWidth/2+"px":i+"px"):("left"===a.placement||"right"===a.placement)&&(m.style.left="","center"===i?(c=c||l.offsetHeight,m.style.top=c/2+d-m.offsetHeight/2+"px"):m.style.top=i+"px"):(m.style.top="",m.style.left=""),"center"===a.xOffset?g=e.left+k.offsetWidth/2-b/2-d:g+=h.getPixelValue(a.xOffset),"center"===a.yOffset?(c=c||l.offsetHeight,f=e.top+k.offsetHeight/2-c/2-d):f+=h.getPixelValue(a.yOffset),a.fixedElement||(f+=h.getScrollTop(),g+=h.getScrollLeft()),l.style.position=a.fixedElement?"fixed":"absolute",l.style.top=f+"px",l.style.left=g+"px"},_initNavButtons:function(){var a=s.createElement("div");return this.prevBtnEl=this._createButton("hopscotch-prev",h.getI18NString("prevBtn")),this.nextBtnEl=this._createButton("hopscotch-next",h.getI18NString("nextBtn")),this.doneBtnEl=this._createButton("hopscotch-done",h.getI18NString("doneBtn")),this.ctaBtnEl=this._createButton("hopscotch-cta"),h.addClass(this.doneBtnEl,"hide"),a.appendChild(this.prevBtnEl),a.appendChild(this.ctaBtnEl),a.appendChild(this.nextBtnEl),a.appendChild(this.doneBtnEl),h.addEvtListener(this.prevBtnEl,"click",function(){n.prevStep(!0)}),h.addEvtListener(this.nextBtnEl,"click",function(){n.nextStep(!0)}),h.addEvtListener(this.doneBtnEl,"click",function(){n.endTour()}),a.className="hopscotch-actions",this.buttonsEl=a,this.containerEl.appendChild(a),this},_getCloseFn:function(){var a=this;return this.closeFn||(this.closeFn=function(b){a.opt.onClose&&h.invokeCallback(a.opt.onClose),a.opt.id&&!a.opt.isTourBubble?n.getCalloutManager().removeCallout(a.opt.id):a.destroy(),h.evtPreventDefault(b)}),this.closeFn},initCloseButton:function(){var a=s.createElement("a");return a.className="hopscotch-bubble-close",a.href="#",a.title=h.getI18NString("closeTooltip"),a.innerHTML=h.getI18NString("closeTooltip"),this.opt.isTourBubble?h.addEvtListener(a,"click",function(a){var b=n.getCurrStepNum(),c=n.getCurrTour(),d=b===c.steps.length-1;h.invokeEventCallbacks("close"),n.endTour(!0,d),a.preventDefault?a.preventDefault():event&&(event.returnValue=!1)}):h.addEvtListener(a,"click",this._getCloseFn()),h.valOrDefault(this.opt.showCloseButton,!0)||h.addClass(a,"hide"),this.closeBtnEl=a,this.containerEl.appendChild(a),this},_initArrow:function(){var a,b;return this.arrowEl=s.createElement("div"),this.arrowEl.className="hopscotch-bubble-arrow-container",b=s.createElement("div"),b.className="hopscotch-bubble-arrow-border",a=s.createElement("div"),a.className="hopscotch-bubble-arrow",this.arrowEl.appendChild(b),this.arrowEl.appendChild(a),this.element.appendChild(this.arrowEl),this},_setupCTAButton:function(a){var b=this;this._showButton(this.ctaBtnEl,!!a.showCTAButton),a.showCTAButton&&a.ctaLabel&&(this.ctaBtnEl.innerHTML=a.ctaLabel,this._ctaFn=function(){b.opt.isTourBubble||n.getCalloutManager().removeCallout(a.id),a.onCTA&&"function"==typeof a.onCTA&&a.onCTA()},h.addEvtListener(this.ctaBtnEl,"click",this._ctaFn))},_removeCTACallback:function(){this.ctaBtnEl&&this._ctaFn&&(h.removeEvtListener(this.ctaBtnEl,"click",this._ctaFn),this._ctaFn=null)},render:function(a,b,c,d){var e,f,g,i,j=this.element;return a?this.currStep=a:this.currStep&&(a=this.currStep),!a.placement&&a.orientation&&(a.placement=a.orientation),e=h.valOrDefault(a.showNextButton,this.opt.showNextButton),f=h.valOrDefault(a.showPrevButton,this.opt.showPrevButton),this.setTitle(a.title||""),this.setContent(a.content||""),this.opt.isTourBubble&&this.setNum(b),this.placement=a.placement,this.showPrevButton(this.prevBtnEl&&f&&b>0),this.showNextButton(this.nextBtnEl&&e&&!c),this.nextBtnEl.innerHTML=a.showSkip?h.getI18NString("skipBtn"):h.getI18NString("nextBtn"),c?h.removeClass(this.doneBtnEl,"hide"):h.addClass(this.doneBtnEl,"hide"),this._setupCTAButton(a),this._setArrow(a.placement),g=h.getPixelValue(a.width)||this.opt.bubbleWidth,i=h.valOrDefault(a.padding,this.opt.bubblePadding),this.containerEl.style.width=g+"px",this.containerEl.style.padding=i+"px",j.style.zIndex=a.zindex||"","top"===a.placement?(j.style.top="-9999px",j.style.left="-9999px",h.removeClass(j,"hide"),this.setPosition(a),h.addClass(j,"hide")):this.setPosition(a),d&&d(!a.fixedElement),this},setTitle:function(a){return a?(this.titleEl.innerHTML=a,h.removeClass(this.titleEl,"hide")):h.addClass(this.titleEl,"hide"),this},setContent:function(a){return a?(this.contentEl.innerHTML=a,h.removeClass(this.contentEl,"hide")):h.addClass(this.contentEl,"hide"),this},setNum:function(a){var b=h.getI18NString("stepNums");b&&am||m>=k.steps.length?null:k.steps[m]},y=function(){u.nextStep()},z=function(a){var b,c,d,e,f,g,i=v(),j=i.element,k=h.getPixelValue(j.style.top),l=k+h.getPixelValue(j.offsetHeight),m=h.getStepTarget(x()),n=m.getBoundingClientRect(),p=n.top+h.getScrollTop(),r=n.bottom+h.getScrollTop(),t=p>k?k:p,u=l>r?l:r,y=h.getScrollTop(),z=y+h.getWindowHeight(),A=t-w("scrollTopMargin");t>=y&&(t<=y+w("scrollTopMargin")||z>=u)?a&&a():w("smoothScroll")?typeof YAHOO!==o&&typeof YAHOO.env!==o&&typeof YAHOO.env.ua!==o&&typeof YAHOO.util!==o&&typeof YAHOO.util.Scroll!==o?(b=YAHOO.env.ua.webkit?s.body:s.documentElement,d=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:void 0,c=new YAHOO.util.Scroll(b,{scroll:{to:[0,A]}},w("scrollDuration")/1e3,d),c.onComplete.subscribe(a),c.animate()):q?jQuery("body, html").animate({scrollTop:A},w("scrollDuration"),a):(0>A&&(A=0),e=y>t?-1:1,f=Math.abs(y-A)/(w("scrollDuration")/10),g=function(){var b=h.getScrollTop(),c=b+e*f;return e>0&&c>=A||0>e&&A>=c?(c=A,a&&a(),window.scrollTo(0,c),void 0):(window.scrollTo(0,c),h.getScrollTop()===b?(a&&a(),void 0):(setTimeout(g,10),void 0))},g()):(window.scrollTo(0,A),a&&a())},A=function(a,b){var c,d,e;m+a>=0&&m+a0?d.multipage:m>0&&k.steps[m-1].multipage,f=function(c){var f;return-1===c?this.endTour(!0):(a&&(f=b>0?h.invokeEventCallbacks("next",d.onNext):h.invokeEventCallbacks("prev",d.onPrev)),e?(h.setState(w("cookieName"),k.id+":"+m,1),void 0):(f=h.valOrDefault(f,!0),f?this.showStep(c):this.endTour(!1),void 0))},!e&&w("skipIfNoElement"))A(b,function(a){f.call(i,a)});else if(m+b>=0&&m+b=k.steps.length)throw"Specified step number out of bounds.";m=b}return h.documentIsReady()?(m||k.id!==n||typeof r===o?m||(m=0):m=r,D(m,function(a){var b=-1!==a&&h.getStepTarget(k.steps[a]);return b?(h.invokeEventCallbacks("start"),c=v(),c.hide(!1),d.isActive=!0,h.getStepTarget(x())?d.showStep(a):(h.invokeEventCallbacks("error"),w("skipIfNoElement")&&d.nextStep(!1)),void 0):(d.endTour(!1,!1),void 0)}),this):(p=!0,this)},this.showStep=function(a){var b=k.steps[a];return b.delay?setTimeout(function(){E(a)},b.delay):E(a),this},this.prevStep=function(a){return B.call(this,a,-1),this},this.nextStep=function(a){var b=x(),c=h.getStepTarget(b);return b.nextOnTargetClick&&h.removeEvtListener(c,"click",y),B.call(this,a,1),this},this.endTour=function(a,b){var c=v();return a=h.valOrDefault(a,!0),b=h.valOrDefault(b,!0),m=0,r=void 0,c.hide(),a&&h.clearState(w("cookieName")),this.isActive&&(this.isActive=!1,k&&b&&h.invokeEventCallbacks("end")),this.removeCallbacks(null,!0),this.resetDefaultOptions(),k=null,this},this.getCurrTour=function(){return k},this.getCurrTarget=function(){return h.getStepTarget(x())},this.getCurrStepNum=function(){return m},this.listen=function(a,b,c){return a&&i[a].push({cb:b,fromTour:c}),this},this.unlisten=function(a,b){var c,d,e=i[a];for(c=0,d=e.length;d>c;++c)e[c]===b&&e.splice(c,1);return this},this.removeCallbacks=function(a,b){var c,d,e,f;for(f in i)if(!a||a===f)if(b)for(c=i[f],d=0,e=c.length;e>d;++d)c[d].fromTour&&(c.splice(d--,1),--e);else i[f]=[];return this},this.registerHelper=function(a,b){"string"==typeof a&&"function"==typeof b&&(j[a]=b)},this.unregisterHelper=function(a){j[a]=null},this.invokeHelper=function(a){var b,c,d=[];for(b=1,c=arguments.length;c>b;++b)d.push(arguments[b]);j[a]&&j[a].call(null,d)},this.setCookieName=function(a){return f.cookieName=a,this},this.resetDefaultOptions=function(){return f={},this},this.resetDefaultI18N=function(){return g={},this},this.getState=function(){return h.getState(w("cookieName"))},t=function(a,b){var c,d,e,i,j=["next","prev","start","end","show","error","close"];for(f||this.resetDefaultOptions(),h.extend(f,a),a&&h.extend(g,a.i18n),e=0,i=j.length;i>e;++e)d="on"+j[e].charAt(0).toUpperCase()+j[e].substring(1),a[d]&&this.listen(j[e],a[d],b);return c=v(!0),this},this.configure=function(a){return t.call(this,a,!1)},F.call(this,a)},n=new c,a[b]=n)}(window,"hopscotch"); \ No newline at end of file diff --git a/package.json b/package.json index 83b90e14..a7ea9f60 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hopscotch", - "version": "0.1.1", + "version": "0.1.2", "description": "A framework to make it easy for developers to add product tours to their pages.", "main": "Gruntfile.js", "directories": { diff --git a/test/index.html b/test/index.html index 5aba020d..c375bd71 100644 --- a/test/index.html +++ b/test/index.html @@ -3,7 +3,7 @@ Mocha Tests - + @@ -18,7 +18,7 @@
- +