Mango#5 Fix back to top.

vzabaznov · Mar 5, 2015 · 49d8a1a · 49d8a1a
1 parent a57fd79
commit 49d8a1a
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 16 deletions.
diff --git a/dist/slideout.js b/dist/slideout.js
diff --git a/dist/slideout.min.js b/dist/slideout.min.js
diff --git a/index.css b/index.css
@@ -22,7 +22,6 @@ body {
   z-index: 1;
 }
 
-.slideout-open,
 .slideout-open body {
   overflow: hidden;
 }

diff --git a/index.js b/index.js
@@ -51,6 +51,7 @@ function Slideout(options) {
   // Sets panel
   this.panel = options.panel;
   this.menu = options.menu;
+  this.wrapper = options.panel.parentNode;
 
   // Sets  classnames
   this.panel.className += ' slideout-panel';
@@ -77,6 +78,7 @@ Slideout.prototype.open = function() {
   this._opened = true;
   setTimeout(function() {
     self.panel.style.transition = self.panel.style['-webkit-transition'] = '';
+    self.wrapper.style.overflow = 'hidden';
   }, this._duration + 50);
   return this;
 };
@@ -93,6 +95,7 @@ Slideout.prototype.close = function() {
   setTimeout(function() {
     html.className = html.className.replace(/ slideout-open/, '');
     self.panel.style.transition = self.panel.style['-webkit-transition'] = '';
+    self.wrapper.style.overflow = '';
   }, this._duration + 50);
   return this;
 };

diff --git a/test/index.html b/test/index.html
@@ -34,24 +34,55 @@ <h3 class="menu-section-title">Docs</h3>
           <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
         </ul>
       </section>
-    </nav>
 
-    <main id="panel" class="panel">
+      <section class="menu-section">
+        <h3 class="menu-section-title">Docs</h3>
+        <ul class="menu-section-list">
+          <li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
+          <li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
+          <li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
+          <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
+        </ul>
+      </section>
 
-      <header class="panel-header">
-        <button class="btn-hamburger js-slideout-toggle"></button>
-        <h1 class="title">Slideout.js</h1>
-      </header>
+      <section class="menu-section">
+        <h3 class="menu-section-title">Docs</h3>
+        <ul class="menu-section-list">
+          <li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
+          <li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
+          <li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
+          <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
+        </ul>
+      </section>
 
-      <section class="box">
-        <h2 class="box-title">Test</h2>
-        <div id="mocha" class="box-content"></div>
+      <section class="menu-section">
+        <h3 class="menu-section-title">Docs</h3>
+        <ul class="menu-section-list">
+          <li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
+          <li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
+          <li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
+          <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
+        </ul>
       </section>
+    </nav>
+
+    <div class="slideout-wrapper">
+      <main id="panel" class="panel">
+        <header class="panel-header">
+          <button class="btn-hamburger js-slideout-toggle"></button>
+          <h1 class="title">Slideout.js</h1>
+        </header>
+
+        <section class="box">
+          <h2 class="box-title">Test</h2>
+          <div id="mocha" class="box-content"></div>
+        </section>
 
-      <footer class="panel-footer">
-        <p>with <span class="heart">❤</span> by <a href="https://getmango.com/en" target="_blank">Mango</a></p>
-      </footer>
-    </main>
+        <footer class="panel-footer">
+          <p>with <span class="heart">❤</span> by <a href="https://getmango.com/en" target="_blank">Mango</a></p>
+        </footer>
+      </main>
+    </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.min.js"></script>
     <script>