From 06dc9e0e257e014d1ccf9de158e76a61d74f84e6 Mon Sep 17 00:00:00 2001 From: tomjohnson1492 Date: Fri, 10 Feb 2017 14:24:00 -0800 Subject: [PATCH] fixed content api tooltips demo --- .DS_Store | Bin 16388 -> 18436 bytes _config.yml | 2 +- _tooltips/baseball.html | 2 +- _tooltips/basketball.html | 2 +- _tooltips/football.html | 2 +- _tooltips/soccer.html | 2 +- pages/mydoc/mydoc_help_api.md | 76 +++++++++++++++++++--------------- tooltips.html | 28 ++++++------- tooltips.json | 4 +- 9 files changed, 63 insertions(+), 55 deletions(-) diff --git a/.DS_Store b/.DS_Store index 1cdbc38880030865e89ab8f8519e9f261c5d4307..072cc693980ca6b179e58aed1ae391c7b54df73a 100644 GIT binary patch delta 490 zcmZo^U~HMdsKUU&!01$(V#vVY0Az9iF^Cr6VPIh4Vqj1J(gr*eRkVfmfTAow2?mDZ zoZ_;8q@4Vu&4L_DnI{|AuuSG=;h${8a%1xn?PZLjtU#4a3|S1tWx+*xIr(|%KtAK- zwL*21R~Xy`n#aHh#6ZBo4KzTEWwRR3Q)WiN&D}x`yc-+pnHU8p^C;*tF`SsZTBt!o zyt-P~Ku5vEs8&az+R(@X$Tl}Nt*zzY5LY#{^-RdEtg5c5t(!4gG%aa9IBscRLd|=zG#nQ~QnMWXpX>+Tl z10zJ2kt`cf7Z5mb0|{63_yC66Yv#%PHoh`UkSOy2sRep707@r-=*a~(t(&Wi*qH&F CCUiOg delta 438 zcmZpfz}V8jsKUU&!01$(V#vT?0c3IjF^Cr6VPIh4Vqj1J(gxfURkVe*fubxx2?mDZ zvf!e;ocz4>&4L_DnI{{#uuSG=;TMC60@X1BF)I)=F=S1i&91O{g=H+$W&_i3Mxbe6 zNg&0+4b(2ivRRGiDKn$+W>%XVCSkA+g!v%FlLZ7tHY*6^@G=Ta=26gPVw9QuPD9L? zn^%B`o0mH_I3vG2xFoTpwAd-JC|*D&I5QUWBsI@9C$%g!&%ekgu_Sf! zezByIF(#o`%-yn-=vZ-u1BirVF zqt9%cUu&~6DgafoK~!6C18Gtooltips.json. -You can add different fields depending on how you want the JSON to be structured. Here we just have to fields: `id` and `body`. And the JSON is looking just in the tooltips collection that we created. +You can add different fields depending on how you want the JSON to be structured. Here we just have to fields: `doc_id` and `body`. And the JSON is looking just in the tooltips collection that we created. {% include tip.html content="Check out [Google's style guide](https://google-styleguide.googlecode.com/svn/trunk/jsoncstyleguide.xml) for JSON. These best practices can help you keep your JSON file valid." %} @@ -146,7 +146,7 @@ By chunking up your JSON files, you can provide a quicker lookup. (I'm not sure ## 5. Build your site and look for the JSON file -When you build your site, Jekyll will iterate through every page in your \_tooltips folder and put the page id and body into this format. In the output, look for the JSON file in the tooltips.json file. You'll see that Jekyll has populated it with content. This is because of the triple hyphen lines in the JSON file — this instructs Jekyll to process the file. +When you build your site, Jekyll will iterate through every page in your _tooltips folder and put the page id and body into this format. In the output, look for the JSON file in the tooltips.json file. You'll see that Jekyll has populated it with content. This is because of the triple hyphen lines in the JSON file — this instructs Jekyll to process the file. ## 6. Allow CORS access to your help if stored on a remote server @@ -205,30 +205,38 @@ If you don't have CORS enabled, users will see a CORS error/warning message in t ## 7. Explain how developers can access the help -Developers can access the help using the `.get` method from jQuery, among other methods. Here's an example of how to get a page with the ID of `basketball`: +Developers can access the help using the `.get` method from jQuery, among other methods. Here's an example of how to get tooltips for basketball, baseball, football, and soccer: ```js -{% raw %}{% endraw %} +{% raw %}var url = "tooltips.json"; + + $.get( url, function( data ) { + + /* Bootstrap popover text is defined inside a data-content attribute inside an element. That's + why I'm using attr here. If you just want to insert content on the page, use append and remove the data-content argument from the parentheses.*/ + + $.each(data.entries, function(i, page) { + if (page.doc_id == "basketball") { + $( "#basketball" ).attr( "data-content", page.body ); + } + + if (page.doc_id == "baseball") { + $( "#baseball" ).attr( "data-content", page.body ); + } + if (page.doc_id == "football") { + $( "#football" ).attr( "data-content", page.body ); + } + + if (page.doc_id == "soccer") { + $( "#soccer" ).attr( "data-content", page.body ); + } + + + }); + });{% endraw %} ``` -View the tooltip demo for a demonstration. +View the tooltip demo for a demonstration. See the source code for full code details. The `url` in the demo is relative, but you could equally point it to an absolute path on a remote host assuming CORS is enabled on the host. diff --git a/tooltips.html b/tooltips.html index afae479..40bab9b 100644 --- a/tooltips.html +++ b/tooltips.html @@ -29,22 +29,21 @@ $.get( url, function( data ) { /* Bootstrap popover text is defined inside a data-content attribute inside an element. That's why I'm using attr here. If you just want to insert content on the page, use append and remove the data-content argument from the parentheses.*/ - $.each(data.entries, function(i, item) { - if (item.id == "basketball") { - $( "#basketball" ).attr( "data-content", page.body ); - } + $.each(data.entries, function(i, page) { + if (page.doc_id == "basketball") { + $( "#basketball" ).attr( "data-content", page.body ); + } - if (item.id == "baseball") { - $( "#baseball" ).attr( "data-content", page.body ); - } + if (page.doc_id == "baseball") { + $( "#baseball" ).attr( "data-content", page.body ); + } + if (page.doc_id == "football") { + $( "#football" ).attr( "data-content", page.body ); + } - if (item.id == "football") { - $( "#football" ).attr( "data-content", page.body ); - } - - if (item.id == "soccer") { - $( "#soccer" ).attr( "data-content", page.body ); - } + if (page.doc_id == "soccer") { + $( "#soccer" ).attr( "data-content", page.body ); + } }); @@ -78,3 +77,4 @@ body {padding-left:50px;}

Football

Soccer

+ diff --git a/tooltips.json b/tooltips.json index ec2b790..cee21d3 100644 --- a/tooltips.json +++ b/tooltips.json @@ -1,5 +1,5 @@ --- -layout: none +layout: null search: exclude --- @@ -8,7 +8,7 @@ search: exclude [ {% for page in site.tooltips %} { -"id" : "{{ page.id }}", +"doc_id": "{{ page.doc_id }}", "body": "{{ page.content | strip_newlines | replace: '\', '\\\\' | replace: '"', '\\"' }}" } {% unless forloop.last %},{% endunless %} {% endfor %}