Merge pull request #171 from pgelinas/gh-pages

Fix for issue #170

Author: jdewit

css/bootstrap-timepicker.css

@@ -32,7 +32,7 @@
   height: 16px;
 }
 .bootstrap-timepicker-widget.dropdown-menu {
-  padding: 2px 3px 2px 2px;
+  padding: 4px;
 }
 .bootstrap-timepicker-widget.dropdown-menu.open {
   display: inline-block;
@@ -43,20 +43,44 @@
   border-right: 7px solid transparent;
   content: "";
   display: inline-block;
-  left: 9px;
   position: absolute;
-  top: -7px;
 }
 .bootstrap-timepicker-widget.dropdown-menu:after {
   border-bottom: 6px solid #FFFFFF;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   content: "";
   display: inline-block;
-  left: 10px;
   position: absolute;
+}
+.bootstrap-timepicker-widget.timepicker-orient-left:before {
+  left: 6px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-left:after {
+  left: 7px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-right:before {
+  right: 6px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-right:after {
+  right: 7px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-top:before {
+  top: -7px;
+}
+.bootstrap-timepicker-widget.timepicker-orient-top:after {
   top: -6px;
 }
+.bootstrap-timepicker-widget.timepicker-orient-bottom:before {
+  bottom: -7px;
+  border-bottom: 0;
+  border-top: 7px solid #999;
+}
+.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
+  bottom: -6px;
+  border-bottom: 0;
+  border-top: 6px solid #ffffff;
+}
 .bootstrap-timepicker-widget a.btn,
 .bootstrap-timepicker-widget input {
   border-radius: 4px;

css/bootstrap-timepicker.min.css

@@ -21,6 +21,7 @@
     this.isOpen = options.isOpen;
     this.minuteStep = options.minuteStep;
     this.modalBackdrop = options.modalBackdrop;
+    this.orientation = options.orientation;
     this.secondStep = options.secondStep;
     this.showInputs = options.showInputs;
     this.showMeridian = options.showMeridian;
@@ -69,7 +70,7 @@
       }
 
       if (this.template !== false) {
-        this.$widget = $(this.getTemplate()).prependTo(this.$element.parents(this.appendWidgetTo)).on('click', $.proxy(this.widgetClick, this));
+        this.$widget = $(this.getTemplate()).on('click', $.proxy(this.widgetClick, this));
       } else {
         this.$widget = false;
       }
@@ -350,6 +351,8 @@
       $(document).off('mousedown.timepicker, touchend.timepicker');
 
       this.isOpen = false;
+      // show/hide approach taken by datepicker
+      this.$widget.detach();
     },
 
     highlightUnit: function() {
@@ -603,6 +606,62 @@
       return false;
     },
 
+    // This method was adapted from bootstrap-datepicker.
+    place : function() {
+      if (this.isInline) {
+        return;
+      }
+      var widgetWidth = this.$widget.outerWidth(), widgetHeight = this.$widget.outerHeight(), visualPadding = 10, windowWidth =
+        $(window).width(), windowHeight = $(window).height(), scrollTop = $(window).scrollTop();
+
+      var zIndex = parseInt(this.$element.parents().filter(function() {}).first().css('z-index'), 10) + 10;
+      var offset = this.component ? this.component.parent().offset() : this.$element.offset();
+      var height = this.component ? this.component.outerHeight(true) : this.$element.outerHeight(false);
+      var width = this.component ? this.component.outerWidth(true) : this.$element.outerWidth(false);
+      var left = offset.left, top = offset.top;
+
+      this.$widget.removeClass('timepicker-orient-top timepicker-orient-bottom timepicker-orient-right timepicker-orient-left');
+
+      if (this.orientation.x !== 'auto') {
+        this.picker.addClass('datepicker-orient-' + this.orientation.x);
+        if (this.orientation.x === 'right') {
+          left -= widgetWidth - width;
+        }
+      } else{
+        // auto x orientation is best-placement: if it crosses a window edge, fudge it sideways
+        // Default to left
+        this.$widget.addClass('timepicker-orient-left');
+        if (offset.left < 0) {
+          left -= offset.left - visualPadding;
+        } else if (offset.left + widgetWidth > windowWidth) {
+          left = windowWidth - widgetWidth - visualPadding;
+        }
+      }
+      // auto y orientation is best-situation: top or bottom, no fudging, decision based on which shows more of the widget
+      var yorient = this.orientation.y, topOverflow, bottomOverflow;
+      if (yorient === 'auto') {
+        topOverflow = -scrollTop + offset.top - widgetHeight;
+        bottomOverflow = scrollTop + windowHeight - (offset.top + height + widgetHeight);
+        if (Math.max(topOverflow, bottomOverflow) === bottomOverflow) {
+          yorient = 'top';
+        } else {
+          yorient = 'bottom';
+        }
+      }
+      this.$widget.addClass('timepicker-orient-' + yorient);
+      if (yorient === 'top'){
+        top += height;
+      } else{
+        top -= widgetHeight + parseInt(this.$widget.css('padding-top'), 10);
+      }
+
+      this.$widget.css({
+        top : top,
+        left : left,
+        zIndex : zIndex
+      });
+    },
+
     remove: function() {
       $('document').off('.timepicker');
       if (this.$widget) {
@@ -794,10 +853,15 @@
         return;
       }
 
+      // show/hide approach taken by datepicker
+      this.$widget.appendTo(this.appendWidgetTo);
       var self = this;
       $(document).on('mousedown.timepicker, touchend.timepicker', function (e) {
-        // Clicked outside the timepicker, hide it
-        if ($(e.target).closest('.bootstrap-timepicker-widget').length === 0) {
+        // This condition was inspired by bootstrap-datepicker.
+        // The element the timepicker is invoked on is the input but it has a sibling for addon/button.
+        if (!(self.$element.parent().find(e.target).length ||
+            self.$widget.is(e.target) ||
+            self.$widget.find(e.target).length)) {
           self.hideWidget();
         }
       });
@@ -813,6 +877,7 @@
         }
       });
 
+      this.place();
       if (this.disableFocus) {
         this.$element.blur();
       }
@@ -1017,12 +1082,13 @@
     isOpen: false,
     minuteStep: 15,
     modalBackdrop: false,
+    orientation: { x: 'auto', y: 'auto'},
     secondStep: 15,
     showSeconds: false,
     showInputs: true,
     showMeridian: true,
     template: 'dropdown',
-    appendWidgetTo: '.bootstrap-timepicker',
+    appendWidgetTo: 'body',
     showWidgetOnAddonClick: true
   };