Merge pull request #17 from jh3y/develop

Minor updates and fixes
jh3y · Jun 15, 2016 · 17499f1 · 17499f1
2 parents 9244c92 + 0a49ac1
commit 17499f1
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 30 deletions.
diff --git a/dist/doormat.css b/dist/doormat.css
@@ -7,13 +7,17 @@
 !*/
 .dm {
   display: block;
-  position: relative;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   margin: 0;
   padding: 0;
 }
 .dm__pnl {
   display: none;
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
   left: 0;

diff --git a/dist/doormat.js b/dist/doormat.js
@@ -41,8 +41,7 @@
       var clientHeight, i, panel, sumHeight;
       sumHeight = 0;
       i = 0;
-      clientHeight = 'onorientationchange' in window ? screen.height : window.innerHeight;
-      doormat.CLIENT_HEIGHT = clientHeight;
+      clientHeight = el.offsetHeight;
       while (i < doormat.panels.length) {
         panel = doormat.panels[i];
         panel.style.display = 'block';
@@ -81,7 +80,7 @@
         };
         cur.addEventListener('transitionend', reset, false);
         if (doormat.SNAP_BOTTOM) {
-          return window.scrollTo(0, cur.DOORMAT_POS + (cur.offsetHeight - doormat.CLIENT_HEIGHT));
+          return window.scrollTo(0, cur.DOORMAT_POS + (cur.offsetHeight - el.offsetHeight));
         } else {
           cur.style.top = -cur.offsetHeight + 'px';
           setNew(props.NEXT);
@@ -94,7 +93,7 @@
       cur = doormat.current;
       scroll = window.scrollY || window.pageYOffset;
       doormat.SNAP_TOP = scroll > ((cur.offsetHeight + cur.DOORMAT_POS) - props.SNAPTHRESHOLDSIZE) && scroll < (cur.DOORMAT_POS + cur.offsetHeight);
-      doormat.SNAP_BOTTOM = scroll > ((cur.DOORMAT_POS + cur.offsetHeight) - doormat.CLIENT_HEIGHT) && scroll < (((cur.DOORMAT_POS + cur.offsetHeight) - doormat.CLIENT_HEIGHT) + props.SNAPTHRESHOLDSIZE);
+      doormat.SNAP_BOTTOM = scroll > ((cur.DOORMAT_POS + cur.offsetHeight) - el.offsetHeight) && scroll < (((cur.DOORMAT_POS + cur.offsetHeight) - el.offsetHeight) + props.SNAPTHRESHOLDSIZE);
       return doormat.SNAP_TOP || doormat.SNAP_BOTTOM;
     };
     handleScroll = function() {

diff --git a/dist/doormat.min.css b/dist/doormat.min.css
@@ -4,4 +4,4 @@
   * @license MIT
   * @author jh3y
   * (c) 2016
-!*/.dm{display:block;position:relative;margin:0;padding:0}.dm__pnl{display:none;position:fixed;top:0;right:0;left:0}.dm__pnl:nth-of-type(1){z-index:998}.dm__pnl:nth-of-type(2){z-index:997}.dm__pnl:nth-of-type(3){z-index:996}.dm__pnl:nth-of-type(4){z-index:995}.dm__pnl:nth-of-type(5){z-index:994}.dm__pnl:nth-of-type(6){z-index:993}.dm__pnl:nth-of-type(7){z-index:992}.dm__pnl:nth-of-type(8){z-index:991}.dm__pnl:nth-of-type(9){z-index:990}.dm__pnl:nth-of-type(10){z-index:989}.dm__pnl--crnt,.dm__pnl--crnt~.dm__pnl{display:block}
+!*/.dm,.dm__pnl{top:0;right:0;left:0}.dm{display:block;position:fixed;bottom:0;margin:0;padding:0}.dm__pnl{display:none;position:absolute}.dm__pnl:nth-of-type(1){z-index:998}.dm__pnl:nth-of-type(2){z-index:997}.dm__pnl:nth-of-type(3){z-index:996}.dm__pnl:nth-of-type(4){z-index:995}.dm__pnl:nth-of-type(5){z-index:994}.dm__pnl:nth-of-type(6){z-index:993}.dm__pnl:nth-of-type(7){z-index:992}.dm__pnl:nth-of-type(8){z-index:991}.dm__pnl:nth-of-type(9){z-index:990}.dm__pnl:nth-of-type(10){z-index:989}.dm__pnl--crnt,.dm__pnl--crnt~.dm__pnl{display:block}
diff --git a/dist/doormat.min.js b/dist/doormat.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "doormat",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "an alternative way to navigate through your site content",
   "devDependencies": {
     "autoprefixer": "^6.0.3",

diff --git a/src/coffee/doormat.coffee b/src/coffee/doormat.coffee
@@ -38,8 +38,7 @@ Doormat = window.Doormat = (opts) ->
     sumHeight = 0
     i         = 0
 
-    clientHeight = if ('onorientationchange' of window) then screen.height else window.innerHeight
-    doormat.CLIENT_HEIGHT = clientHeight
+    clientHeight = el.offsetHeight
     while i < doormat.panels.length
       panel = doormat.panels[i]
       # NOTE:: Required for window resizing behaviour but also so
@@ -79,7 +78,7 @@ Doormat = window.Doormat = (opts) ->
         cur.removeEventListener 'transitionend', reset
       cur.addEventListener 'transitionend', reset, false
       if doormat.SNAP_BOTTOM
-        window.scrollTo 0, (cur.DOORMAT_POS + (cur.offsetHeight - doormat.CLIENT_HEIGHT))
+        window.scrollTo 0, (cur.DOORMAT_POS + (cur.offsetHeight - el.offsetHeight))
       else
         cur.style.top = -(cur.offsetHeight) + 'px'
         setNew props.NEXT
@@ -89,7 +88,7 @@ Doormat = window.Doormat = (opts) ->
     cur = doormat.current
     scroll = window.scrollY or window.pageYOffset
     doormat.SNAP_TOP = scroll > ((cur.offsetHeight + cur.DOORMAT_POS) - props.SNAPTHRESHOLDSIZE) and scroll < (cur.DOORMAT_POS + cur.offsetHeight)
-    doormat.SNAP_BOTTOM = scroll > ((cur.DOORMAT_POS + cur.offsetHeight) - doormat.CLIENT_HEIGHT) and scroll < (((cur.DOORMAT_POS + cur.offsetHeight) - doormat.CLIENT_HEIGHT) + props.SNAPTHRESHOLDSIZE)
+    doormat.SNAP_BOTTOM = scroll > ((cur.DOORMAT_POS + cur.offsetHeight) - el.offsetHeight) and scroll < (((cur.DOORMAT_POS + cur.offsetHeight) - el.offsetHeight) + props.SNAPTHRESHOLDSIZE)
     doormat.SNAP_TOP || doormat.SNAP_BOTTOM
 
   handleScroll = ->

diff --git a/src/jade/index.jade b/src/jade/index.jade
@@ -7,14 +7,13 @@ html
     meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
     meta(name='description', content='an entry point to your site, wipe your fingers before you come in!')
     link(href='https://fonts.googleapis.com/css?family=Droid+Sans', rel='stylesheet', type='text/css')
-    link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css")
     link(rel='stylesheet', href='css/doormat.css')
     link(rel='stylesheet', href='css/dev.css')
   body.tx--black
     +doormat()
 
       +panel('tx--white bg--white header')
-        i.fa.fa-5x.fa-arrow-circle-o-down
+        .advice Please scroll 😁
         .title.tx--right
           h1 doormat
           +githubStats('jh3y', 'doormat')

diff --git a/src/stylus/dev.styl b/src/stylus/dev.styl
@@ -34,24 +34,24 @@ code
   color $red
 
 .dm__pnl
-  display         flex !important
-  align-items     center
-  justify-content center
-  background-size cover
+  display               flex !important
+  align-items           center
+  justify-content       center
+  background-size       cover
   background-attachment fixed
   for num in (2..5)
     idx = 400 + (num * 5)
     &:nth-of-type({num})
       background-image url('https://unsplash.it/' + idx + '/?random')
 
 .cntnt
-  max-width 90%
-  padding   50px
-  margin    0 auto
+  max-width        90%
+  padding          50px
+  margin           20px auto
   background-color white
-  border-radius 10px
+  border-radius    10px
 
-.fa
+.advice
   position absolute
   top 50%
   left 50%
@@ -60,14 +60,14 @@ code
 
 .title
   position absolute
-  right 0
-  bottom 0
-  padding 50px
+  right    0
+  bottom   0
+  padding  50px
 
 *
   box-sizing border-box
 
 .header
-  background-size cover
+  background-size     cover
   background-position center center
   background-image url(https://raw.githubusercontent.com/jh3y/pics/master/doormat/doormat.jpg)
diff --git a/src/stylus/doormat.styl b/src/stylus/doormat.styl
@@ -12,13 +12,17 @@ c = json('../../doormat.config.json', {
 
 .{c.blocks.doormat.lbl}
   display  block
-  position relative
+  position fixed
+  top      0
+  right    0
+  bottom   0
+  left     0
   margin   0
   padding  0
 
   &__{c.blocks.doormat.els.panel}
     display             none
-    position            fixed
+    position            absolute
     top                 0
     right               0
     left                0