Add option to force position without regard to viewport

artfuldodger · artfuldodger · commit 9d46fea9cfa3 · 2014-11-17T08:59:48.000-07:00
diff --git a/README.md b/README.md
@@ -78,6 +78,7 @@ Pikaday has many useful options:
 * `trigger` use a different element to trigger opening the datepicker, see [trigger example][] (default to `field`)
 * `bound` automatically show/hide the datepicker on `field` focus (default `true` if `field` is set)
 * `position` preferred position of the datepicker relative to the form field, e.g.: `top right`, `bottom right` **Note:** automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see [positions example][] (default to 'bottom left')
+* `reposition` can be set to false to not reposition datepicker within the viewport, forcing it to take the configured `position` (default: true)
 * `container` DOM node to render calendar into, see [container example][] (default: undefined) 
 * `format` the default output format for `.toString()` and `field` value (requires [Moment.js][moment] for custom formatting)
 * `defaultDate` the initial date to view when first opened
diff --git a/examples/positions.html b/examples/positions.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
-    <title>Pikaday alignement example</title>
+    <title>Pikaday alignment example</title>
     <meta name="author" content="Maxime Thirouin">
     <link rel="stylesheet" href="../css/pikaday.css">
     <link rel="stylesheet" href="../css/site.css">
@@ -30,9 +30,11 @@ <h1>Pikaday alignement example</h1>
     <br />
     <input type="text" id="datepicker-bottomright" value="Bottom right (waat?)">
     <br />
+    <input type="text" id="datepicker-bottomright-forced" value="forced to position outside viewport">
+    <br />
     Here is the bottom right position with content before (no automatic adjustment used, , same code as above) <input type="text" id="datepicker-bottomright-forreal" value="Bottom right">
 
-    <p><i>Also, take a look to the bottom right of this page to see an example with position automaticaly adjusted.</i></p>
+    <p><i>Also, take a look to the bottom right of this page to see an example with position automatically adjusted.</i></p>
     <input type="text" id="datepicker-auto" style="position: absolute; bottom: 0; right: 0;" value="Automatic position">
 
     <h2>What is this?</h2>
@@ -81,6 +83,13 @@ <h2>What is this?</h2>
         position: 'bottom right'
     });
 
+    new Pikaday(
+    {
+        field: document.getElementById('datepicker-bottomright-forced'),
+        position: 'bottom right',
+        reposition: false
+    });
+
     new Pikaday(
     {
         field: document.getElementById('datepicker-bottomright-forreal'),
diff --git a/pikaday.js b/pikaday.js
@@ -181,6 +181,9 @@
         // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
         position: 'bottom left',
 
+        // automatically fit in the viewport even if it means repositioning from the position option
+        reposition: true,
+
         // the default output format for `.toString()` and `field` value
         format: 'YYYY-MM-DD',
 
@@ -869,22 +872,23 @@
             }
 
             // default position is bottom & left
-            if (left + width > viewportWidth ||
+            if ((this._o.reposition && left + width > viewportWidth) ||
                 (
                     this._o.position.indexOf('right') > -1 &&
                     left - width + field.offsetWidth > 0
                 )
             ) {
                 left = left - width + field.offsetWidth;
             }
-            if (top + height > viewportHeight + scrollTop ||
+            if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
                 (
                     this._o.position.indexOf('top') > -1 &&
                     top - height - field.offsetHeight > 0
                 )
             ) {
                 top = top - height - field.offsetHeight;
             }
+
             this.el.style.cssText = [
                 'position: absolute',
                 'left: ' + left + 'px',

Original file line number	Diff line number	Diff line change
`@@ -181,6 +181,9 @@`
`181`	`181`	`// ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)`
`182`	`182`	`position: 'bottom left',`
`183`	`183`
	`184`	`+ // automatically fit in the viewport even if it means repositioning from the position option`
	`185`	`+ reposition: true,`
	`186`	`+`
`184`	`187`	// the default output format for `.toString()` and `field` value
`185`	`188`	`format: 'YYYY-MM-DD',`
`186`	`189`
`@@ -869,22 +872,23 @@`
`869`	`872`	`}`
`870`	`873`
`871`	`874`	`// default position is bottom & left`
`872`		`- if (left + width > viewportWidth \|\|`
	`875`	`+ if ((this._o.reposition && left + width > viewportWidth) \|\|`
`873`	`876`	`(`
`874`	`877`	`this._o.position.indexOf('right') > -1 &&`
`875`	`878`	`left - width + field.offsetWidth > 0`
`876`	`879`	`)`
`877`	`880`	`) {`
`878`	`881`	`left = left - width + field.offsetWidth;`
`879`	`882`	`}`
`880`		`- if (top + height > viewportHeight + scrollTop \|\|`
	`883`	`+ if ((this._o.reposition && top + height > viewportHeight + scrollTop) \|\|`
`881`	`884`	`(`
`882`	`885`	`this._o.position.indexOf('top') > -1 &&`
`883`	`886`	`top - height - field.offsetHeight > 0`
`884`	`887`	`)`
`885`	`888`	`) {`
`886`	`889`	`top = top - height - field.offsetHeight;`
`887`	`890`	`}`
	`891`	`+`
`888`	`892`	`this.el.style.cssText = [`
`889`	`893`	`'position: absolute',`
`890`	`894`	`'left: ' + left + 'px',`