diff --git a/.DS_Store b/.DS_Store index 1cdbc38..072cc69 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/_config.yml b/_config.yml index da6047b..cb6ee0b 100644 --- a/_config.yml +++ b/_config.yml @@ -57,7 +57,7 @@ kramdown: collections: tooltips: - output: true + output: false # collections are declared here. this renders the content in _tooltips and processes it, but doesn't output it as actual files in the output unless you change output to true defaults: diff --git a/_tooltips/baseball.html b/_tooltips/baseball.html index 5f7167e..c229636 100644 --- a/_tooltips/baseball.html +++ b/_tooltips/baseball.html @@ -1,5 +1,5 @@ --- -id: baseball +doc_id: baseball product: mydoc --- diff --git a/_tooltips/basketball.html b/_tooltips/basketball.html index 71cda32..c029485 100644 --- a/_tooltips/basketball.html +++ b/_tooltips/basketball.html @@ -1,5 +1,5 @@ --- -id: basketball +doc_id: basketball product: mydoc --- diff --git a/_tooltips/football.html b/_tooltips/football.html index 9461a08..52ae352 100644 --- a/_tooltips/football.html +++ b/_tooltips/football.html @@ -1,5 +1,5 @@ --- -id: football +doc_id: football product: mydoc --- diff --git a/_tooltips/soccer.html b/_tooltips/soccer.html index 9ca1230..19fd5bd 100644 --- a/_tooltips/soccer.html +++ b/_tooltips/soccer.html @@ -1,5 +1,5 @@ --- -id: soccer +doc_id: soccer product: mydoc --- diff --git a/pages/mydoc/mydoc_help_api.md b/pages/mydoc/mydoc_help_api.md index f1a62f3..03a8da7 100644 --- a/pages/mydoc/mydoc_help_api.md +++ b/pages/mydoc/mydoc_help_api.md @@ -68,14 +68,16 @@ Here's an example: ```yaml {% raw %} --- -id: basketball +doc_id: basketball product: mydoc --- {{site.data.definitions.basketball}}{% endraw %} ``` -You need to create a separate page for each tooltip you want to deliver. +(Note: Avoid using `id`, as it seems to generate out as `/tooltips/basketball` instead of just `basketball.) + +You need to create a separate file for each tooltip you want to deliver. The product attribute is required in the frontmatter to distinguish the tooltips produced here from the tooltips for other products in the same \_tooltips folder. When creating the JSON file, Jekyll will iterate through all the pages inside \_tooltips, regardless of any subfolders included here. @@ -88,46 +90,44 @@ Inside your project's pages directory (e.g., mydoc), add a file called "tooltips {% raw %} ```liquid --- -layout: none +layout: null search: exclude --- + { "entries": [ {% for page in site.tooltips %} -{% if page.product == "mydoc" %} { -"id" : "{{ page.id }}", +"doc_id": "{{ page.doc_id }}", "body": "{{ page.content | strip_newlines | replace: '\', '\\\\' | replace: '"', '\\"' }}" } {% unless forloop.last %},{% endunless %} -{% endif %} {% endfor %} ] } + ``` {% endraw %} -Change "mydoc" to the product name you used in each of the tooltip files. The template here will only include content in the JSON file if it meets the `product` attribute requirements. We need this `if` statement to prevent tooltips from other products from being included in the JSON file. - This code will loop through all pages in the tooltips collection and insert the `id` and `body` into key-value pairs for the JSON code. Here's an example of what that looks like after it's processed by Jekyll in the site build: ```json { "entries": [ { - "id": "baseball", + "doc_id": "baseball", "body": "{{site.data.definitions.baseball}}" }, { - "id": "basketball", + "doc_id": "basketball", "body": "{{site.data.definitions.basketball}}" }, { - "id": "football", + "doc_id": "football", "body": "{{site.data.definitions.football}}" }, { - "id": "soccer", + "doc_id": "soccer", "body": "{{site.data.definitions.soccer}}" } ] @@ -136,7 +136,7 @@ This code will loop through all pages in the tooltips collection and insert the You can also view the same JSON file here: tooltips.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 %}