Readme and example site updates

mmahandev · Sep 19, 2019 · 6c56413 · 6c56413
1 parent 36b9bd7
commit 6c56413
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -32,19 +32,16 @@ The CSS is small enough to copy directly into your project's main stylesheet if
 ```js
 import FocusOverlay from 'focusoverlay';
 
-// Zero config - Scopes to <body> element and uses default settings
+// Option 1: Zero config - Scopes to <body> element and uses default settings
 const fo = new FocusOverlay();
 
-// Or define an element
+// Option 2: Define an element
 const fo = new FocusOverlay(document.body, options);
-
-// Or define a CSS selector string
-const fo = new FocusOverlay('body#site-container', options);
 ```
 
 The `element` is what FocusOverlay will be scoped to. It takes either a string CSS selector or an HTML element. If no element is supplied it will scope to the `<body>` element by default.
 
-The `options` is an optional parameter. See [options](#options) for more info.
+The `options` is an optional parameter. Takes an object. See [options](#options) for more info.
 
 By default Focus Overlay will show and animate when hitting keyboard keys such as the `Tab` key. It's also preconfigured to animate via CSS transitions.
 
@@ -156,3 +153,4 @@ Focus Overlay works on all modern browsers including IE11.
 - Make zIndex be CSS only
 - Add refreshPosition method
 - Add currentTarget var
+- Fix iframe focus when alwaysActive is true
diff --git a/web/src/assets/scss/base/_typography.scss b/web/src/assets/scss/base/_typography.scss
@@ -157,7 +157,7 @@ pre {
   -webkit-overflow-scrolling: touch;
   font-family: _font(family-fixed);
   font-size: 0.9em;
-  margin: 0 0 _size(element-margin) 0;
+  margin: 0 0 _size(element-margin) 0 !important;
 
   code {
     display: block;

diff --git a/web/src/components/Examples.js b/web/src/components/Examples.js
@@ -76,26 +76,6 @@ const Examples = props => (
           Transitioned link after iframe focus
         </a>
       </div>
-      <div>
-        <a href="#">Regular link before iframe</a>
-      </div>
-      <iframe
-        width={320}
-        height={200}
-        src="https://www.youtube.com/embed/fEErySYqItI"
-        frameBorder="0"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen
-        id="control-18"
-        title="Inline Frame Example"
-      ></iframe>
-      <div>
-        <input
-          type="text"
-          placeholder="Regular input after iframe"
-          id="control-19"
-        />
-      </div>
       <video controls width={250}>
         <source
           src="//interactive-examples.mdn.mozilla.net/media/examples/flower.webm"

diff --git a/web/src/pages/index.js b/web/src/pages/index.js
@@ -23,21 +23,15 @@ class Index extends React.Component {
   };
 
   _handleWaypointLeave = () => {
-    // this.setState(() => ({ stickyNav: true }));
+    this.setState(() => ({ stickyNav: false }));
   };
 
   componentDidMount() {
     import(/* webpackChunkName: "focus-overlay" */ 'focus-overlay')
       .then(({ default: FocusOverlay }) => {
         this.focusoverlay = new FocusOverlay(document.querySelector('body'), {
           alwaysActive: true,
-          zIndex: 10001,
-          onBeforeMove: function(fo) {
-            console.log('before', fo);
-          },
-          onAfterMove: function(fo) {
-            console.log('after', fo);
-          }
+          zIndex: 10001
         });
 
         document
@@ -65,7 +59,7 @@ class Index extends React.Component {
     return (
       <Layout>
         <Helmet title="Focus Overlay" />
-        <Header fo={this.focusoverlay} />
+        <Header />
         <Waypoint
           onEnter={this._handleWaypointEnter}
           onLeave={this._handleWaypointLeave}
@@ -128,19 +122,16 @@ The CSS is small enough to copy directly into your project's main stylesheet if
 \`\`\`js
 import FocusOverlay from 'focusoverlay';
 
-// Zero config - Scopes to <body> element and uses default settings
+// Option 1: Zero config - Scopes to <body> element and uses default settings
 const fo = new FocusOverlay();
 
-// Or define an element
+// Option 2: Define an element
 const fo = new FocusOverlay(document.body, options);
-
-// Or define a CSS selector string
-const fo = new FocusOverlay('body#site-container', options);
 \`\`\`
 
 The \`element\` is what FocusOverlay will be scoped to. It takes either a string CSS selector or an HTML element. If no element is supplied it will scope to the \`<body>\` element by default.
 
-The \`options\` is an optional parameter. See [options](#options) for more info.
+The \`options\` is an optional parameter. Takes an object. See [options](#options) for more info.
 
 By default Focus Overlay will show and animate when hitting keyboard keys such as the \`Tab\` key. It's also preconfigured to animate via CSS transitions.
                 `}