From 6d105d7b67aaced1a616aa45dfd7d247af446e30 Mon Sep 17 00:00:00 2001 From: Philip Schatz Date: Sun, 20 Jul 2014 19:33:58 -0400 Subject: [PATCH] add tour --- dist/book-viewer.coffee | 82 ++++++++++++++++++++++++++++++++++++++++- dist/book-viewer.css | 22 +++++++++++ dist/book-viewer.js | 67 ++++++++++++++++++++++++++++++++- dist/book-viewer.less | 26 +++++++++++++ 4 files changed, 193 insertions(+), 4 deletions(-) diff --git a/dist/book-viewer.coffee b/dist/book-viewer.coffee index a6e7560..b29958e 100644 --- a/dist/book-viewer.coffee +++ b/dist/book-viewer.coffee @@ -20,7 +20,6 @@ if BookConfig.includes.fontawesome document.head.appendChild(fa) - BOOK_TEMPLATE = '''
@@ -60,7 +59,7 @@ BOOK_TEMPLATE = '''
''' -$ () -> +$ -> # Squirrel the body and replace it with the template: $body = $('body') $originalPage = $body.contents() @@ -294,6 +293,8 @@ $ () -> tocHelper.loadToc(BookConfig.toc.url, $toc, $title) $bookTitle.html(tocHelper.$title) + doHopscotch() + # Fetch resources without fixing up their paths if BookConfig.baseHref $book.find('base').remove() @@ -387,3 +388,80 @@ $ () -> $li = $bookSummary.find("a[href$='#{result.ref}']").parent() $li.addClass('search-result') $li.parentsUntil($bookSummary).addClass('search-result') + + +# Hopscotch code + +# Steps: +# - Toggle the Table of Contents to increase reading space +# - See which parts of the book you have already read +# - Search the book +# - Submit any issues you find with the book +# - Edit the current page directly on GitHub to fix typos or add contributions +# - Click this or use the keyboard arrow keys to move through the book +# - Share this book on Facebook, Twitter, or Google +# +genTour = -> + steps: [ + { + title: 'Welcome to the Book Reader' + content: 'This tour will quickly go through the features of the book reader.' + target: document.querySelector('.book-title') + placement: 'left' + } + { + title: 'Table of Contents' + content: 'Click to hide/show the Table of Contents.' + target: document.querySelector('.toggle-summary') + placement: 'right' + } + { + title: 'Search' + content: 'Search the book.' + target: document.querySelector('.toggle-search') + placement: 'right' + } + { + title: 'Submit Suggestions' + content: 'Submit any issues/suggestions you find.' + target: document.querySelector('.summary > .issues') + placement: 'right' + } + { + title: 'Edit This Page' + content: 'Edit the current page directly on GitHub to fix typos or add contributions.' + target: document.querySelector('.summary .edit-contribute') + placement: 'right' + } + { + title: 'Table of Contents' + content: 'See which parts of the book you have already read. Checkmarks show which pages you have already read.' + target: document.querySelector('.summary .divider') + placement: 'right' + } + { + title: 'Navigation' + content: 'Click this or use the keyboard arrow keys to move through the book.' + target: document.querySelector('.book-body > .navigation > i') + placement: 'left' + } + { + title: 'Share' + content: 'Share this book on Facebook, Twitter, or Google!' + target: document.querySelector('.twitter-sharing-link') + placement: 'left' + } + ] + +doHopscotch = -> + + # Inject the hopscotch style and JS + el = document.createElement('link') + el.rel = 'stylesheet' + el.href = '//linkedin.github.io/hopscotch/css/hopscotch.css' + document.head.appendChild(el) + + $ -> + $.getScript '//linkedin.github.io/hopscotch/js/hopscotch-0.1.2.min.js', -> + window.hopscotch.startTour(genTour()) + document.querySelector('.summary *').scrollIntoView() diff --git a/dist/book-viewer.css b/dist/book-viewer.css index 2d34427..3f81fbf 100644 --- a/dist/book-viewer.css +++ b/dist/book-viewer.css @@ -850,3 +850,25 @@ h6:hover .header-link { .page { counter-reset: figure; } +div.hopscotch-bubble { + border: 1px solid rgba(0, 0, 0, 0.5) !important; + border-radius: 10px !important; +} +div.hopscotch-bubble a.hopscotch-bubble-close { + padding-right: 15px !important; +} +div.hopscotch-bubble span.hopscotch-bubble-number { + padding: 0 !important; +} +div.hopscotch-bubble-arrow-container.left { + left: -18px !important; +} +div.hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow { + left: 1px !important; +} +div.hopscotch-bubble-arrow-container.right { + right: -35px !important; +} +div.hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow { + left: -1px !important; +} diff --git a/dist/book-viewer.js b/dist/book-viewer.js index bf887f8..96efca7 100644 --- a/dist/book-viewer.js +++ b/dist/book-viewer.js @@ -1,6 +1,6 @@ // Generated by CoffeeScript 1.7.1 (function() { - var BOOK_TEMPLATE, BookConfig, fa, _base, _base1, _base2; + var BOOK_TEMPLATE, BookConfig, doHopscotch, fa, genTour, _base, _base1, _base2; BookConfig = window.Book || {}; @@ -299,7 +299,8 @@ $title = $root.children('title').contents(); } tocHelper.loadToc(BookConfig.toc.url, $toc, $title); - return $bookTitle.html(tocHelper.$title); + $bookTitle.html(tocHelper.$title); + return doHopscotch(); }); if (BookConfig.baseHref) { $book.find('base').remove(); @@ -400,4 +401,66 @@ } }); + genTour = function() { + return { + steps: [ + { + title: 'Welcome to the Book Reader', + content: 'This tour will quickly go through the features of the book reader.', + target: document.querySelector('.book-title'), + placement: 'left' + }, { + title: 'Table of Contents', + content: 'Click to hide/show the Table of Contents.', + target: document.querySelector('.toggle-summary'), + placement: 'right' + }, { + title: 'Search', + content: 'Search the book.', + target: document.querySelector('.toggle-search'), + placement: 'right' + }, { + title: 'Submit Suggestions', + content: 'Submit any issues/suggestions you find.', + target: document.querySelector('.summary > .issues'), + placement: 'right' + }, { + title: 'Edit This Page', + content: 'Edit the current page directly on GitHub to fix typos or add contributions.', + target: document.querySelector('.summary .edit-contribute'), + placement: 'right' + }, { + title: 'Table of Contents', + content: 'See which parts of the book you have already read. Checkmarks show which pages you have already read.', + target: document.querySelector('.summary .divider'), + placement: 'right' + }, { + title: 'Navigation', + content: 'Click this or use the keyboard arrow keys to move through the book.', + target: document.querySelector('.book-body > .navigation > i'), + placement: 'left' + }, { + title: 'Share', + content: 'Share this book on Facebook, Twitter, or Google!', + target: document.querySelector('.twitter-sharing-link'), + placement: 'left' + } + ] + }; + }; + + doHopscotch = function() { + var el; + el = document.createElement('link'); + el.rel = 'stylesheet'; + el.href = '//linkedin.github.io/hopscotch/css/hopscotch.css'; + document.head.appendChild(el); + return $(function() { + return $.getScript('//linkedin.github.io/hopscotch/js/hopscotch-0.1.2.min.js', function() { + window.hopscotch.startTour(genTour()); + return document.querySelector('.summary *').scrollIntoView(); + }); + }); + }; + }).call(this); diff --git a/dist/book-viewer.less b/dist/book-viewer.less index 98e1fc2..6f9a859 100644 --- a/dist/book-viewer.less +++ b/dist/book-viewer.less @@ -153,3 +153,29 @@ h6:hover .header-link { } .page { counter-reset: figure; } + + + + +div.hopscotch-bubble { + border: 1px solid rgba(0, 0, 0, 0.5) !important; + border-radius: 10px !important; + + a.hopscotch-bubble-close { padding-right: 15px !important; } + span.hopscotch-bubble-number { padding: 0 !important; } + +} + + +div.hopscotch-bubble-arrow-container { + + &.left { + left: -18px !important; + .hopscotch-bubble-arrow { left: 1px !important; } + } + + &.right { + right: -35px !important; + .hopscotch-bubble-arrow { left: -1px !important; } + } +}