Merge pull request #747 from rubenswieringa/reposition-css-classes

Add CSS-classes indicating position
Pikaday · Dec 19, 2017 · eddaaa3 · eddaaa3
2 parents 7b720f6 + 30016c1
commit eddaaa3
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -157,6 +157,17 @@ Pikaday has many useful options:
 * `onDraw` callback function for when the picker draws a new month
 * `keyboardInput` enable keyboard input support (default `true`)
 
+### Styling
+
+If the `reposition` configuration-option is enabled (default), Pikaday will apply CSS-classes to the datepicker according to how it is positioned:
+
+* `top-aligned`
+* `left-aligned`
+* `right-aligned`
+* `bottom-aligned`
+
+Note that the DOM element at any time will typically have 2 CSS-classes (eg. `top-aligned right-aligned` etc).
+
 ## jQuery Plugin
 
 The normal version of Pikaday does not require jQuery, however there is a jQuery plugin if that floats your boat (see `plugins/pikaday.jquery.js` in the repository). This version requires jQuery, naturally, and can be used like other plugins:

diff --git a/examples/position-css-classes.html b/examples/position-css-classes.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+    <title>Pikaday alignment CSS-classes example</title>
+    <meta name="author" content="Maxime Thirouin">
+    <link rel="stylesheet" href="../css/pikaday.css">
+    <link rel="stylesheet" href="../css/site.css">
+</head>
+<body>
+    <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+
+    <h1>Pikaday alignment CSS-classes example</h1>
+
+    <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
+
+    <label for="datepicker">Dates:</label>
+
+    <input type="text" id="datepicker-topleft"     value=".left-aligned & .top-aligned"     style="display: block; margin: 20px; position: absolute;">
+    <input type="text" id="datepicker-topright"    value=".right-aligned & .bottom-aligned" style="display: block; margin: 20px; position: absolute; right: 20px;">
+    <input type="text" id="datepicker-bottomleft"  value=".left-aligned & .top-aligned"     style="display: block; margin: 20px; position: fixed; bottom: 150px;">
+    <input type="text" id="datepicker-bottomright" value=".right-aligned & .top-aligned"    style="display: block; margin: 20px; position: fixed; bottom: 150px; right: 20px">
+
+    <h2 style="margin-top: calc( 100vh - 275px )">What is this?</h2>
+
+    <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p>
+
+    <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD &amp; MIT license | Example by <a href="https://github.com/rubenswieringa">Ruben Swieringa</a></p>
+
+
+    <script src="../pikaday.js"></script>
+    <script>
+        new Pikaday({ field: document.getElementById( 'datepicker-topleft' )});
+        new Pikaday({ field: document.getElementById( 'datepicker-topright' )});
+        new Pikaday({ field: document.getElementById( 'datepicker-bottomleft' )});
+        new Pikaday({ field: document.getElementById( 'datepicker-bottomright' )});
+    </script>
+
+    <style>
+
+        input[type=text] {
+          width: 166px;
+          border: 1px solid #ccc;
+          box-shadow: 0px 3px 7px 0 rgba(0,0,0,0.15);
+        }
+
+        .pika-single.top-aligned {
+          transform: translateY( -22px );
+        }
+
+        .pika-single.bottom-aligned {
+          transform: translateY( 22px );
+        }
+
+        .pika-single:before,
+        .pika-single:after {
+          content: '';
+          display: block;
+          position: absolute;
+          border-color: transparent;
+          border-style: solid;
+          border-width: 18px 22px;
+          width: 0;
+          height: 0;
+          animation-duration: 1200ms;
+          animation-direction: alternate;
+          animation-iteration-count: infinite;
+          animation-timing-function: ease-in-out;
+        }
+
+        .pika-single:after {
+          border-width: 16px 19px;
+          margin: 0 1px;
+        }
+
+        .pika-single.top-aligned:before,
+        .pika-single.top-aligned:after {
+          top: 100%;
+          border-bottom: none;
+          animation-name: pulsate-top-border;
+        }
+
+        .pika-single.top-aligned:before {
+          border-top-color: inherit;
+        }
+
+        .pika-single.top-aligned:after {
+          border-top-color: white;
+        }
+
+        .pika-single.bottom-aligned:before,
+        .pika-single.bottom-aligned:after {
+          bottom: 100%;
+          border-top: none;
+          animation-name: pulsate-bottom-border;
+        }
+
+        .pika-single.bottom-aligned:before {
+          border-bottom-color: inherit;
+        }
+
+        .pika-single.bottom-aligned:after {
+          border-bottom-color: white;
+        }
+
+        .pika-single.left-aligned:before,
+        .pika-single.left-aligned:after {
+          border-left: none;
+          left: 18px;
+        }
+
+        .pika-single.right-aligned:before,
+        .pika-single.right-aligned:after {
+          border-right: none;
+          right: 18px;
+        }
+
+        @keyframes pulsate-top-border    { to { border-top-color: #e33; }}
+        @keyframes pulsate-bottom-border { to { border-bottom-color: #e33; }}
+
+    </style>
+</body>
+</html>
diff --git a/examples/positions.html b/examples/positions.html
@@ -11,7 +11,7 @@
 <body>
     <a href="https://github.com/dbushell/Pikaday"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
 
-    <h1>Pikaday alignement example</h1>
+    <h1>Pikaday alignment example</h1>
 
     <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p>
 

diff --git a/pikaday.js b/pikaday.js
@@ -1032,7 +1032,7 @@
 
         adjustPosition: function()
         {
-            var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect;
+            var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect, leftAligned, bottomAligned;
 
             if (this._o.container) return;
 
@@ -1045,6 +1045,8 @@
             viewportWidth = window.innerWidth || document.documentElement.clientWidth;
             viewportHeight = window.innerHeight || document.documentElement.clientHeight;
             scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+            leftAligned = true;
+            bottomAligned = true;
 
             if (typeof field.getBoundingClientRect === 'function') {
                 clientRect = field.getBoundingClientRect();
@@ -1067,6 +1069,7 @@
                 )
             ) {
                 left = left - width + field.offsetWidth;
+                leftAligned = false;
             }
             if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
                 (
@@ -1075,10 +1078,16 @@
                 )
             ) {
                 top = top - height - field.offsetHeight;
+                bottomAligned = false;
             }
 
             this.el.style.left = left + 'px';
             this.el.style.top = top + 'px';
+
+            addClass(this.el, leftAligned ? 'left-aligned' : 'right-aligned');
+            addClass(this.el, bottomAligned ? 'bottom-aligned' : 'top-aligned');
+            removeClass(this.el, !leftAligned ? 'left-aligned' : 'right-aligned');
+            removeClass(this.el, !bottomAligned ? 'bottom-aligned' : 'top-aligned');
         },
 
         /**