Fix bugs from previous patch

examples/modal/index.html

@@ -314,7 +314,20 @@ <h3 class="mainHeading">Main Body Content</h3>
         Fusce interdum orci id purus vehicula, pellentesque finibus massa accumsan. Nunc eleifend consequat nibh,
         placerat convallis urna accumsan eu. Nulla bibendum ipsum turpis, a sollicitudin turpis imperdiet in. Praesent
         vestibulum leo non nibh pulvinar faucibus. Donec dictum ligula eget efficitur pulvinar. Maecenas pulvinar ante
-        vel urna rutrum tincidunt. Aliquam erat volutpat. In hac habitasse platea dictumst. Nulla eu magna quis nulla
+        vel urna rutrum tincidunt. Aliquam erat volutpat. 
+      </p>
+    </div>
+
+    <div class="buttonsContainer">
+      <button class="disableBodyScroll" ontouchstart="">
+        Open modal
+      </button>
+    </div>
+
+    <div>
+      <span class="bodyScrollLockStatus"> &mdash; Scroll Unlocked</span>
+      <p>
+        In hac habitasse platea dictumst. Nulla eu magna quis nulla
         euismod viverra. Nulla semper diam eget convallis pulvinar. Nulla facilisi. Nulla condimentum gravida
         sollicitudin. Mauris scelerisque, ligula quis varius dignissim, libero tellus faucibus enim, id gravida nibh
         nisl vitae massa. Pellentesque auctor diam et dolor fringilla, sed tristique nunc pharetra. Cras quis gravida
@@ -468,8 +481,45 @@ <h3 class="mainHeading">Main Body Content</h3>
         Curabitur quis iaculis nisi. Praesent varius cursus enim eu ullamcorper. Nullam ac tincidunt enim. Donec ut
         vehicula velit.
       </p>
+      <span class="bodyScrollLockStatus"> &mdash; Scroll Unlocked</span>
     </div>
 
+    <div class="buttonsContainer">
+      <button class="disableBodyScroll" ontouchstart="">
+        Open modal
+      </button>
+    </div>
+
+    <div>
+      <p>
+        Suspendisse pulvinar id nulla eget aliquam. Curabitur metus ante, euismod eget risus et, elementum
+        porta massa. Morbi aliquet malesuada augue, eget sagittis risus iaculis a. Aliquam nec leo purus. Pellentesque
+        vel diam mi. Donec ac luctus velit. Integer tristique dui id dui luctus, vel tincidunt erat volutpat. Donec
+        ultricies velit id tellus dapibus, quis consequat ante scelerisque. Cras finibus molestie ipsum non vehicula.
+        Vivamus interdum aliquet metus quis dignissim. Etiam libero tortor, molestie quis consequat quis, aliquet in
+        tellus. Etiam ut porttitor metus. Praesent eget est ullamcorper, eleifend augue in, dapibus ligula. Donec eu
+        pretium neque. Sed ultrices tortor ut orci tempor, non tristique nunc tempus. Maecenas quis leo eu sem lobortis
+        malesuada rutrum et odio. Etiam hendrerit placerat bibendum. Mauris posuere odio nisi, nec suscipit tortor
+        finibus non. Sed porttitor tortor quis ante lacinia euismod. Mauris auctor pretium odio ac cursus. Curabitur
+        varius mi ut mi porta, ut convallis nibh consequat. Etiam auctor rutrum nisi, sit amet rutrum dui efficitur at.
+        Cras scelerisque accumsan rhoncus. Maecenas ut sapien non metus ultricies aliquam. Mauris at leo turpis. Morbi
+        vel tellus eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam vestibulum commodo
+        lobortis. Mauris vestibulum luctus consequat. Integer ut convallis enim, varius iaculis est. Nunc vulputate
+        risus quis purus tempor, at tristique erat laoreet. Maecenas sodales nisl et urna fringilla, vitae blandit
+        tortor elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+        Cras lorem ex, ultricies ac arcu quis, pretium convallis lorem. Praesent ut ligula aliquet, maximus justo quis,
+        accumsan diam. Vivamus eleifend vitae dui ut egestas. Integer non cursus est. Maecenas viverra quis nisl vel
+        euismod. Donec et quam eget nisi congue pulvinar. Phasellus bibendum scelerisque magna. Quisque eu tellus
+        vulputate, pulvinar velit nec, euismod massa. Nullam ullamcorper quam ac luctus tincidunt. Quisque massa neque,
+        tristique sed lorem vitae, sagittis lacinia tellus. Aliquam aliquam nisl nec placerat fringilla. Phasellus
+        auctor velit nec elit consequat ultrices. Praesent eu sapien lobortis ipsum vehicula dictum ut eu nisi. Integer
+        ut dictum felis. Nunc dictum sapien felis, nec gravida lorem porttitor id. Suspendisse gravida congue lacus, nec
+        rutrum enim mattis nec. Vivamus nec tellus turpis. Nulla semper non odio ut consectetur. Fusce mattis massa
+        enim, at congue sapien eleifend quis. Suspendisse varius urna in elit interdum, vitae viverra dui convallis.
+        Curabitur quis iaculis nisi. Praesent varius cursus enim eu ullamcorper. Nullam ac tincidunt enim. Donec ut
+        vehicula velit.
+      </p>
+    </div>
     <script src="bundle.js"></script>
   </body>
 </html>

examples/modal/main.js

@@ -1,23 +1,27 @@
-const bodyScrollLock = require('../../lib/bodyScrollLock.js');
+const bodyScrollLock = require('../../lib/bodyScrollLock.min.js');
 
-const disableBodyScrollButton = document.querySelector('.disableBodyScroll');
+const disableBodyScrollButtons = document.querySelectorAll('.disableBodyScroll');
 const enableBodyScrollButton = document.querySelector('.enableBodyScroll');
-const statusElement = document.querySelector('.bodyScrollLockStatus');
+const statusElements = document.querySelectorAll('.bodyScrollLockStatus');
 const modalElement = document.querySelector('.modal');
 const scrollTargetElement = document.querySelector('.scrollTarget');
 
-disableBodyScrollButton.onclick = function() {
+function onDisableBodyScroll() {
   console.info('disableBodyScrollButton');
 
   // show modal
   modalElement.classList.add('active');
 
   bodyScrollLock.disableBodyScroll(scrollTargetElement);
 
-  statusElement.innerHTML = ' — Scroll Locked';
-  statusElement.style.color = 'red';
+  statusElements.forEach(el => {
+    el.innerHTML = ' — Scroll Locked';
+    el.style.color = 'red';
+  });
 };
 
+disableBodyScrollButtons.forEach(btn => { btn.onclick = onDisableBodyScroll; });
+
 enableBodyScrollButton.onclick = function() {
   console.info('enableBodyScrollButton');
 
@@ -26,6 +30,8 @@ enableBodyScrollButton.onclick = function() {
 
   bodyScrollLock.enableBodyScroll(scrollTargetElement);
 
-  statusElement.innerHTML = ' — Scroll Unlocked';
-  statusElement.style.color = '';
+  statusElements.forEach(el => {
+    el.innerHTML = ' — Scroll Unlocked';
+    el.style.color = '';
+  });
 };

examples/modal/package.json

@@ -3,9 +3,11 @@
   "description": "Example for body scroll lock, with a Modal",
   "author": "diachedelic",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "uglify-js": "^3.14.1"
+  },
   "scripts": {
-    "compile": "browserify ./main.js > bundle.js",
+    "compile": "browserify ./main.js | uglifyjs -cm > bundle.js",
     "deployNow": "now --prod"
   },
   "devDependencies": {