From d3d48ffe02b30fc57293571ac81e851c291e6162 Mon Sep 17 00:00:00 2001 From: Gordon Koo Date: Tue, 4 Jun 2013 17:26:03 -0700 Subject: [PATCH] change content to be contained in
Since

can't hold block level elements, makes it hard to nest and other things. --- README.md | 2 +- css/hopscotch.css | 3 ++- js/hopscotch-0.1.js | 5 +++- js/hopscotch-0.1.min.js | 48 +++++++++++++-------------------------- less/hopscotch.less | 12 +++++----- test/js/test.hopscotch.js | 4 ++-- 6 files changed, 31 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index 1bba558b..928e28bb 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Hopscotch ========= -Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. +Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. Seeing is believing, so why not check out a [demo](http://linkedin.github.io/hopscotch)! Features ======== diff --git a/css/hopscotch.css b/css/hopscotch.css index 0de362ed..46f663e6 100644 --- a/css/hopscotch.css +++ b/css/hopscotch.css @@ -11,7 +11,8 @@ div.hopscotch-bubble{background-color:#ffffff;border:5px solid #000000;border:5p 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;-webkit-font-smoothing:antialiased;}div.hopscotch-bubble .hopscotch-bubble-container p{font-family:Helvetica,Arial;line-height:17px;margin:-5px 0 11px;padding-top:8px;} +div.hopscotch-bubble .hopscotch-bubble-container{padding:15px;position:relative;-webkit-font-smoothing:antialiased;} +div.hopscotch-bubble .hopscotch-content{font-family:Helvetica,Arial;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;} diff --git a/js/hopscotch-0.1.js b/js/hopscotch-0.1.js index 80527ad1..0f098823 100644 --- a/js/hopscotch-0.1.js +++ b/js/hopscotch-0.1.js @@ -1080,7 +1080,10 @@ this.element = el; this.containerEl = containerEl; this.titleEl = document.createElement('h3'); - this.contentEl = document.createElement('p'); + this.contentEl = document.createElement('div'); + + utils.addClass(this.titleEl, 'hopscotch-title'); + utils.addClass(this.contentEl, 'hopscotch-content'); opt = { showPrevButton: defaultOpts.showPrevButton, diff --git a/js/hopscotch-0.1.min.js b/js/hopscotch-0.1.min.js index d4188ab5..3ec4557d 100644 --- a/js/hopscotch-0.1.min.js +++ b/js/hopscotch-0.1.min.js @@ -1,20 +1,3 @@ -/** - * - * 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. - */ - (function(u,v){var w,x,C,D,y,E=window.Sizzle||null,b,r,m,n,j=u[v],F=!1,G="undefined"!==typeof window.jQuery,s="undefined"!==typeof window.sessionStorage,g=window.document;n={smoothScroll:!0,scrollDuration:1E3,scrollTopMargin:200,showCloseButton:!0,showPrevButton:!1,showNextButton:!0,bubbleWidth:280,bubblePadding:15,arrowWidth:20,skipIfNoElement:!0,cookieName:"hopscotch.tour.state"};j||(Array.isArray||(Array.isArray=function(a){return"[object Array]"===Object.prototype.toString.call(a)}),b={addClass:function(a, b){var c,d,f,i;if(a.className){d=b.split(/\s+/);c=" "+a.className+" ";f=0;for(i=d.length;fc.indexOf(" "+d[f]+" ")&&(c+=d[f]+" ");a.className=c.replace(/^\s+|\s+$/g,"")}else a.className=b},removeClass:function(a,b){var c,d,f,i;d=b.split(/\s+/);c=" "+a.className+" ";f=0;for(i=d.length;f -h||h>=i.steps.length?null:i.steps[h]},u=function(){e.nextStep(!1)},B=function(a,c){var d,e,g;0<=h+a&&h+ae?d:e,f=b.getScrollTop(),e=f+b.getWindowHeight(),h=a-l("scrollTopMargin"),z,i,A;a>=f&&(a<=f+l("scrollTopMargin")||d<=e)?k&&k():l("smoothScroll")?"undefined"!==typeof YAHOO&&"undefined"!==typeof YAHOO.env&&"undefined"!==typeof YAHOO.env.ua&&"undefined"!==typeof YAHOO.util&&"undefined"!==typeof YAHOO.util.Scroll?(a=YAHOO.env.ua.webkit?g.body:g.documentElement, -d=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:void 0,a=new YAHOO.util.Scroll(a,{scroll:{to:[0,h]}},l("scrollDuration")/1E3,d),a.onComplete.subscribe(k),a.animate()):G?$("body, html").animate({scrollTop:h},l("scrollDuration"),k):(0>h&&(h=0),z=f>a?-1:1,i=Math.abs(f-h)/(l("scrollDuration")/10),A=function(){var a=b.getScrollTop(),c=a+z*i;0=h||0>z&&c<=h?(c=h,k&&k(),window.scrollTo(0,c)):(window.scrollTo(0,c),b.getScrollTop()===a?k&&k():setTimeout(A,10))},A()):(window.scrollTo(0,h),k&&k())}else k(); -c.nextOnTargetClick&&b.addEvtListener(j,"click",u)});c.multipage&&(e+=":mp");b.setState(l("cookieName"),e,1)};this.getCalloutManager=function(){"undefined"===typeof d&&(d=new C);return d};this.startTour=function(a,c){var d,e=this;if(!i){i=a;var f={},g;for(g in a)a.hasOwnProperty(g)&&("id"!==g&&"steps"!==g)&&(f[g]=a[g]);s.call(this,f,!0);if(f=b.getState(l("cookieName")))f=f.split(":"),j=f[0],p=f[1],p=parseInt(p,10),2=i.steps.length)throw"Specified step number out of bounds."; -h=c}if(!b.documentIsReady())return F=!0,this;!h&&i.id===j&&"undefined"!==typeof p?h=p:h||(h=0);a:{var f=function(a){-1!==a&&b.getStepTarget(i.steps[a])?(b.invokeEventCallbacks("start"),d=t(),d.hide(!1),e.isActive=!0,b.getStepTarget(q())?e.showStep(a):(b.invokeEventCallbacks("error"),l("skipIfNoElement")&&e.nextStep(!1))):e.endTour(!1,!1)},k;g=!1;h=h||0;k=q();if(k=b.getStepTarget(k))f(h);else{if(0h||h>=i.steps.length?null:i.steps[h]},u=function(){e.nextStep(!1)},B=function(a,c){var d,e,g;0<=h+a&&h+ae?d:e,f=b.getScrollTop(),e=f+b.getWindowHeight(),h=a-l("scrollTopMargin"),z,i,A;a>=f&&(a<=f+l("scrollTopMargin")||d<=e)?k&&k():l("smoothScroll")?"undefined"!==typeof YAHOO&&"undefined"!==typeof YAHOO.env&&"undefined"!==typeof YAHOO.env.ua&& +"undefined"!==typeof YAHOO.util&&"undefined"!==typeof YAHOO.util.Scroll?(a=YAHOO.env.ua.webkit?g.body:g.documentElement,d=YAHOO.util.Easing?YAHOO.util.Easing.easeOut:void 0,a=new YAHOO.util.Scroll(a,{scroll:{to:[0,h]}},l("scrollDuration")/1E3,d),a.onComplete.subscribe(k),a.animate()):G?$("body, html").animate({scrollTop:h},l("scrollDuration"),k):(0>h&&(h=0),z=f>a?-1:1,i=Math.abs(f-h)/(l("scrollDuration")/10),A=function(){var a=b.getScrollTop(),c=a+z*i;0=h||0>z&&c<=h?(c=h,k&&k(),window.scrollTo(0, +c)):(window.scrollTo(0,c),b.getScrollTop()===a?k&&k():setTimeout(A,10))},A()):(window.scrollTo(0,h),k&&k())}else k();c.nextOnTargetClick&&b.addEvtListener(j,"click",u)});c.multipage&&(e+=":mp");b.setState(l("cookieName"),e,1)};this.getCalloutManager=function(){"undefined"===typeof d&&(d=new C);return d};this.startTour=function(a,c){var d,e=this;if(!i){i=a;var f={},g;for(g in a)a.hasOwnProperty(g)&&("id"!==g&&"steps"!==g)&&(f[g]=a[g]);s.call(this,f,!0);if(f=b.getState(l("cookieName")))f=f.split(":"), +j=f[0],p=f[1],p=parseInt(p,10),2=i.steps.length)throw"Specified step number out of bounds.";h=c}if(!b.documentIsReady())return F=!0,this;!h&&i.id===j&&"undefined"!==typeof p?h=p:h||(h=0);a:{var f=function(a){-1!==a&&b.getStepTarget(i.steps[a])?(b.invokeEventCallbacks("start"),d=t(),d.hide(!1),e.isActive=!0,b.getStepTarget(q())?e.showStep(a):(b.invokeEventCallbacks("error"),l("skipIfNoElement")&&e.nextStep(!1))):e.endTour(!1, +!1)},k;g=!1;h=h||0;k=q();if(k=b.getStepTarget(k))f(h);else{if(0