add datepicker pointer

gistol · Nov 18, 2015 · d92f4cc · d92f4cc
1 parent a23309d
commit d92f4cc
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 4 deletions.
diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css
@@ -49,6 +49,38 @@
 .datepicker--content {
  padding: 2px; }
 
+.datepicker--pointer {
+ position: absolute;
+ background: #fff;
+ border-top: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+ width: 10px;
+ height: 10px; }
+ .-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
+ top: calc(100% - 4px);
+ transform: rotate(135deg); }
+ .-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
+ right: calc(100% - 4px);
+ transform: rotate(225deg); }
+ .-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
+ bottom: calc(100% - 4px);
+ transform: rotate(315deg); }
+ .-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
+ left: calc(100% - 4px);
+ transform: rotate(45deg); }
+ .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
+ left: 8px; }
+ .-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
+ right: 8px; }
+ .-top-center- .datepicker--pointer, .-bottom-center- .datepicker--pointer {
+ left: calc(50% - 10px / 2); }
+ .-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer {
+ top: 8px; }
+ .-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
+ bottom: 8px; }
+ .-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer {
+ top: calc(50% - 10px / 2); }
+
 .datepicker--body {
  display: none; }
  .datepicker--body.active {

diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
@@ -6,6 +6,7 @@ var Datepicker;
  containerBuilt = false,
  baseTemplate = '' +
  '<div class="datepicker">' +
+ '<i class="datepicker--pointer"></i>' +
  '<nav class="datepicker--nav"></nav>' +
  '<div class="datepicker--content"></div>' +
  '</div>',
@@ -19,7 +20,7 @@ var Datepicker;
  toggleSelected: true,
 
  position: 'bottom left',
- offset: 8,
+ offset: 12,
 
  view: 'days',
  minView: 'days',
@@ -602,6 +603,7 @@ var Datepicker;
  if (this.opts.onChangeView) {
  this.opts.onChangeView(val)
  }
+ this.setPosition(this.opts.position)
  }
 
  return val

diff --git a/index.html b/index.html
@@ -11,12 +11,29 @@
  <div class="contents">
  <article>
  <div class="calendar"></div>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
  <input type="text" name="start" placeholder="Start"/>
  <input type="text" name="end" placeholder="End"/>
  <br/>
  <br/>
 
  <button>Update</button>
+
+
  </article>
  </div>
  <script type="text/javascript" src="dist/js/datepicker.js"></script>
@@ -32,6 +49,7 @@
  }
  })
  $end.datepicker({
+ position: 'right top',
  onSelect: function (format, date) {
  $start.data('datepicker')
  .update('maxDate', date)

diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
@@ -6,6 +6,7 @@ var Datepicker;
  containerBuilt = false,
  baseTemplate = '' +
  '<div class="datepicker">' +
+ '<i class="datepicker--pointer"></i>' +
  '<nav class="datepicker--nav"></nav>' +
  '<div class="datepicker--content"></div>' +
  '</div>',
@@ -19,7 +20,7 @@ var Datepicker;
  toggleSelected: true,
 
  position: 'bottom left',
- offset: 8,
+ offset: 12,
 
  view: 'days',
  minView: 'days',
@@ -602,6 +603,7 @@ var Datepicker;
  if (this.opts.onChangeView) {
  this.opts.onChangeView(val)
  }
+ this.setPosition(this.opts.position)
  }
 
  return val

diff --git a/sass/datepicker/_datepicker.scss b/sass/datepicker/_datepicker.scss
@@ -12,7 +12,7 @@
 
 .datepicker {
  background: #fff;
- border: 1px solid $colorGrey;
+ border: 1px solid $borderColor;
  border-radius: $datepickerBorderRadius;
  box-sizing: content-box;
  width: $datepickerWidth;
@@ -56,6 +56,66 @@
  padding: $datepickerPadding;
 }
 
+// Pointer
+// -------------------------------------------------
+$pointerHalfSize: $pointerSize / 2 - 1;
+
+.datepicker--pointer {
+ position: absolute;
+ background: #fff;
+ border-top: 1px solid $borderColor;
+ border-right: 1px solid $borderColor;
+ width: $pointerSize;
+ height: $pointerSize;
+
+ // Main axis
+ // -------------------------
+
+ .-top-left- &, .-top-center- &, .-top-right- & {
+ top: calc(100% - #{$pointerHalfSize});
+ transform: rotate(135deg);
+ }
+
+ .-right-top- &, .-right-center- &, .-right-bottom- & {
+ right: calc(100% - #{$pointerHalfSize});
+ transform: rotate(225deg);
+ }
+
+ .-bottom-left- &, .-bottom-center- &, .-bottom-right- & {
+ bottom: calc(100% - #{$pointerHalfSize});
+ transform: rotate(315deg);
+ }
+
+ .-left-top- &, .-left-center- &, .-left-bottom- & {
+ left: calc(100% - #{$pointerHalfSize});
+ transform: rotate(45deg);
+ }
+
+ // Secondary axis
+ // -------------------------
+
+ .-top-left- &, .-bottom-left- & {
+ left: $pointerOffset;
+ }
+ .-top-right- &, .-bottom-right- & {
+ right: $pointerOffset;
+ }
+ .-top-center- &, .-bottom-center- & {
+ left: calc(50% - #{$pointerSize} / 2);
+ }
+
+ .-left-top- &, .-right-top- & {
+ top: $pointerOffset;
+ }
+ .-left-bottom- &, .-right-bottom- & {
+ bottom: $pointerOffset;
+ }
+ .-left-center- &, .-right-center- & {
+ top: calc(50% - #{$pointerSize} / 2);
+ }
+
+}
+
 // Body
 // -------------------------------------------------
 

diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss
@@ -8,14 +8,17 @@ $textColor: #333;
 $navigationHeight: 32px;
 $navigationButtonsOffset: 1px;
 
+$pointerSize: 10px;
+$pointerOffset: 8px;
+
 // Colors
 $colorGrey: #ddd;
-
 $colorAnotherMonth: #ddd;
 $colorCellHover: #eee;
 $colorCellCurrent: #60C4F5;
 $colorCellSelected: skyblue;
 $colorCellWeekend: '';
+$borderColor: $colorGrey;
 $bgButton: #f2f2f2;
 $bgButtonHover: darken($bgButton, 3);