forked from jordanburke/angular-help-overlay
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix for jordanburke#2 no actual core code changes but updated the exa…
…mple to work with later Angular 1.2+ b/c when this was developed it was possible to have two isolate scopes on the same element without error. The new example creates a wrapper element inside the body, although most cases users can use the body itself as long as no other directives declaring scopes are there.
- Loading branch information
1 parent
1f2a577
commit f9a33f4
Showing
1 changed file
with
79 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,88 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" ng-app="app"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Chardin.js</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta name="description" content="Chardin.js - Better introductions for websites and features with a step-by-step guide for your projects."> | ||
| <meta name="author" content="Pablo Fernandez"> | ||
|
|
||
| <!-- styles --> | ||
| <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> | ||
| <link href="css/bootstrap.min.css" rel="stylesheet"> | ||
| <link href="css/demo.css" rel="stylesheet"> | ||
|
|
||
| <link href="../bower_components/chardin.js/chardinjs.css" rel="stylesheet"> | ||
|
|
||
| <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> | ||
|
|
||
| <script src="../bower_components/jQuery/dist/jquery.min.js"></script> | ||
| <script src="../bower_components/chardin.js/chardinjs.min.js"></script> | ||
| <script src="../bower_components/angular/angular.js"></script> | ||
| <script src="../lib/angular-help-overlay.js"></script> | ||
| <script src="js/app.js"></script> | ||
| <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> | ||
| </head> | ||
|
|
||
| <body ng-controller="MainCtrl" help-overlay="showHelp" overlay-start-callback="onStart(event)" overlay-stop-callback="onStop(event)"> | ||
| <div class="container" > | ||
| <div class="jumbotron"> | ||
| <h1 data-intro="Project title" data-position="right">Chardin.js</h1> | ||
| <p class="lead"> | ||
| Simple overlay instructions for your apps. | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Chardin.js</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta name="description" | ||
| content="Chardin.js - Better introductions for websites and features with a step-by-step guide for your projects."> | ||
| <meta name="author" content="Pablo Fernandez"> | ||
|
|
||
| <!-- styles --> | ||
| <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> | ||
| <link href="css/bootstrap.min.css" rel="stylesheet"> | ||
| <link href="css/demo.css" rel="stylesheet"> | ||
|
|
||
| <link href="../bower_components/chardin.js/chardinjs.css" rel="stylesheet"> | ||
|
|
||
| <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> | ||
|
|
||
| <script src="../bower_components/jQuery/dist/jquery.min.js"></script> | ||
| <script src="../bower_components/chardin.js/chardinjs.min.js"></script> | ||
| <script src="../bower_components/angular/angular.js"></script> | ||
| <script src="../lib/angular-help-overlay.js"></script> | ||
| <script src="js/app.js"></script> | ||
| <script>!function (d, s, id) { | ||
| var js, fjs = d.getElementsByTagName(s)[0]; | ||
| if (!d.getElementById(id)) { | ||
| js = d.createElement(s); | ||
| js.id = id; | ||
| js.src = "https://platform.twitter.com/widgets.js"; | ||
| fjs.parentNode.insertBefore(js, fjs); | ||
| } | ||
| }(document, "script", "twitter-wjs");</script> | ||
| </head> | ||
| <!-- You need CSS like this if you are using a wrapper element instead of the body --> | ||
| <style> | ||
| body, html { | ||
| height: 100%; | ||
| } | ||
| </style> | ||
| <body ng-controller="MainCtrl"> | ||
| <!-- | ||
| You don't need a wrapper if you can use the body directly, we cannot here as we put the controller on it, but | ||
| in most applications you can use the router to specify the controller freeing up the body. You want to use this | ||
| on a outer most wrapper as the backdrop works off the element it's placed on. | ||
| --> | ||
| <div help-overlay="showHelp" overlay-start-callback="onStart(event)" overlay-stop-callback="onStop(event)" | ||
| style="height: 100%;"> | ||
| <div class="container"> | ||
| <div class="jumbotron"> | ||
| <h1 data-intro="Project title" data-position="right">Chardin.js</h1> | ||
|
|
||
| <p class="lead"> | ||
| Simple overlay instructions for your apps. | ||
| </p> | ||
| <img src="img/chardin.png" | ||
| data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." | ||
| data-position="right"/> | ||
| <a href="#" class="btn btn-large primary" data-toggle="chardinjs" | ||
| data-intro="This button toggles the overlay, you can click it, even when the overlay is visible" | ||
| data-position="left" ng-click="toggleHelp()">See it in action</a> | ||
| <a href="" id="opentour" class="hide" data-toggle="chardinjs">Or open it again</a> | ||
|
|
||
| <div class="credits"> | ||
| <p data-intro="Author of this plugin, aka Pablo Fernandez" data-position="right"> | ||
| Baked with | ||
| <b><3</b> | ||
| by | ||
| <a href="https://github.com/heelhook">@heelhook</a>. | ||
| </p> | ||
| <img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" /> | ||
| <a href="#" class="btn btn-large primary" data-toggle="chardinjs" data-intro="This button toggles the overlay, you can click it, even when the overlay is visible" | ||
| data-position="left" ng-click="toggleHelp()">See it in action</a> | ||
| <a href="" id="opentour" class="hide" data-toggle="chardinjs">Or open it again</a> | ||
| <div class="credits"> | ||
| <p data-intro="Author of this plugin, aka Pablo Fernandez" data-position="right"> | ||
| Baked with | ||
| <b><3</b> | ||
| by | ||
| <a href="https://github.com/heelhook">@heelhook</a>. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="links"> | ||
| <p id="links" data-intro="Links to Github, Twitter, etc." data-position="bottom"> | ||
| <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Check out Chardin.js, simple overlay instructions for apps" data-count="none" data-via="heelhookrc">Tweet</a> | ||
| <a href="https://twitter.com/heelhookrc" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @heelhookrc</a> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="links"> | ||
| <p id="links" data-intro="Links to Github, Twitter, etc." data-position="top"> | ||
| <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Check out Chardin.js, simple overlay instructions for apps, https://heelhook.github.com/chardin.js" data-count="none" data-via="pablo2dot0">Tweet</a> | ||
| <a href="https://twitter.com/pablo2dot0" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @pablo2dot0</a> | ||
| <iframe style="display: inline-block;" frameborder="no" scrolling="no" height="30px" width="70px" src="http://hnlike.com/upvote.php?link=http%3A%2F%2Fheelhook.github.com&title=Chardin">iframes not supported by your browser</iframe> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="license"> | ||
| Code licensed under the | ||
| <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>. | ||
| </div> | ||
| <div class="license"> | ||
| Code licensed under the | ||
| <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |