Merge pull request #25 from sensortower/add-custom-period-range

Add custom period range

Author: berrberr

docs/index.md

@@ -195,18 +195,18 @@ ranges: Object
 Default:
 ```javascript
 {
-  'Last 30 days': [moment().subtract(29, 'days'), moment()]
-  'Last 90 days': [moment().subtract(89, 'days'), moment()]
-  'Last Year': [moment().subtract(1, 'year').add(1,'day'), moment()]
-  'All Time': 'all-time' // [minDate, maxDate]
+  'Last 30 days': [moment().subtract(29, 'days'), moment()],
+  'Last 90 days': [moment().subtract(89, 'days'), moment()],
+  'Last Year': [moment().subtract(1, 'year').add(1,'day'), moment()],
+  'All Time': 'all-time' // [minDate, maxDate],
   'Custom Range': 'custom'
 }
 ```
 
 Examples:
 ```javascript
 ranges: {
-  'Last 245 Days': [moment().subtract(244, 'days'), moment()]
+  'Last 245 Days': [moment().subtract(244, 'days'), moment()],
   'Last 3 Years': [moment().subtract(3, 'years').add(1, 'day'), moment()]
 }
 ```
@@ -235,6 +235,22 @@ Array of available _periods_. Period selector disappears if only one period spec
 periods: String[]
 ```
 
+### customPeriodRanges
+
+Similar to ranges except they are appended to the period row across the top of the picker.
+
+```javascript
+ranges: Object
+```
+
+Examples:
+```javascript
+customPeriodRanges: {
+  'Last Year': [moment().subtract(1, 'year').add(1,'day'), moment()],
+  'All Time': 'all-time' // [minDate, maxDate]
+}
+```
+
 ### single
 ```javascript
 single: Boolean

package.json

@@ -21,7 +21,7 @@
     "gulp-gh-pages": "^0.5.4",
     "gulp-github-release": "^1.0.3",
     "gulp-header": "^1.7.1",
-    "gulp-if": "^1.2.5",
+    "gulp-if": "^2.0.2",
     "gulp-include": "^2.0.3",
     "gulp-load-plugins": "^0.10.0",
     "gulp-minify-css": "^1.1.1",

src/scripts/daterangepicker/calendar-view.coffee

@@ -6,6 +6,7 @@ class CalendarView
     @locale = mainView.locale
     @startDate = mainView.startDate
     @endDate = mainView.endDate
+    @isCustomPeriodRangeActive = mainView.isCustomPeriodRangeActive
 
     @type = type
     @label = mainView.locale["#{type}Label"] || ''
@@ -104,8 +105,8 @@ class CalendarView
     {
       "in-range": !@single() && (inRange || onRangeEnd)
       "#{@type}-date": onRangeEnd
-      "clickable": withinBoundaries
-      "out-of-boundaries": !withinBoundaries
+      "clickable": withinBoundaries && !@isCustomPeriodRangeActive()
+      "out-of-boundaries": !withinBoundaries || @isCustomPeriodRangeActive()
       "unavailable": (periodIsDay && differentMonth)
     }
 

src/scripts/daterangepicker/config.coffee

@@ -3,6 +3,7 @@ class Config
     @firstDayOfWeek = @_firstDayOfWeek(options.firstDayOfWeek)
     @timeZone = @_timeZone(options.timeZone)
     @periods = @_periods(options.periods)
+    @customPeriodRanges = @_customPeriodRanges(options.customPeriodRanges)
     @period = @_period(options.period)
     @single = @_single(options.single)
     @opened = @_opened(options.opened)
@@ -19,6 +20,7 @@ class Config
     @endDate = @_endDate(options.endDate)
 
     @ranges = @_ranges(options.ranges)
+    @isCustomPeriodRangeActive = ko.observable(false)
 
     @anchorElement = @_anchorElement(options.anchorElement)
     @parentElement = @_parentElement(options.parentElement)
@@ -40,6 +42,11 @@ class Config
   _periods: (val) ->
     ko.observableArray(val || Period.allPeriods)
 
+  _customPeriodRanges: (obj) ->
+    obj ||= {}
+    for title, value of obj
+      @parseRange(value, title)
+
   _period: (val) ->
     val ||= @periods()[0]
     throw new Error('Invalid period') unless val in ['day', 'week', 'month', 'quarter', 'year']
@@ -88,15 +95,18 @@ class Config
         when 'custom'
           new CustomDateRange(title)
         else
-          throw new Error('Value should be an array') unless $.isArray(value)
-          [startDate, endDate] = value
-          throw new Error('Missing start date') unless startDate
-          throw new Error('Missing end date') unless endDate
-          from = MomentUtil.tz(startDate, @timeZone())
-          to = MomentUtil.tz(endDate, @timeZone())
-          throw new Error('Invalid start date') unless from.isValid()
-          throw new Error('Invalid end date') unless to.isValid()
-          new DateRange(title, from, to)
+          @parseRange(value, title)
+
+  parseRange: (value, title) ->
+    throw new Error('Value should be an array') unless $.isArray(value)
+    [startDate, endDate] = value
+    throw new Error('Missing start date') unless startDate
+    throw new Error('Missing end date') unless endDate
+    from = MomentUtil.tz(startDate, @timeZone())
+    to = MomentUtil.tz(endDate, @timeZone())
+    throw new Error('Invalid start date') unless from.isValid()
+    throw new Error('Invalid end date') unless to.isValid()
+    new DateRange(title, from, to)
 
   _locale: (val) ->
     $.extend({

src/scripts/daterangepicker/date-range-picker-view.coffee

@@ -65,7 +65,7 @@ class DateRangePickerView
       expanded: @standalone() || @single() || @expanded()
       standalone: @standalone()
       'hide-weekdays': @hideWeekdays()
-      'hide-periods': @periods().length == 1
+      'hide-periods': (@periods().length + @customPeriodRanges.length) == 1
       'orientation-left': @orientation() == 'left'
       'orientation-right': @orientation() == 'right'
     }
@@ -85,10 +85,14 @@ class DateRangePickerView
     else
       @startDate().isSame(dateRange.startDate, 'day') && @endDate().isSame(dateRange.endDate, 'day')
 
+  isActiveCustomPeriodRange: (customPeriodRange) ->
+    @isActiveDateRange(customPeriodRange) && @isCustomPeriodRangeActive()
+
   inputFocus: () ->
     @expanded(true)
 
   setPeriod: (period) ->
+    @isCustomPeriodRangeActive(false)
     @period(period)
     @expanded(true)
 
@@ -103,6 +107,10 @@ class DateRangePickerView
       @endDate(dateRange.endDate)
       @updateDateRange()
 
+  setCustomPeriodRange: (customPeriodRange) =>
+    @isCustomPeriodRangeActive(true)
+    @setDateRange(customPeriodRange)
+
   applyChanges: () ->
     @close()
     @updateDateRange()

src/templates/daterangepicker.html

@@ -1,7 +1,12 @@
 <div class="daterangepicker" data-bind="css: $data.cssClasses(), style: $data.style()">
   <div class="controls">
-    <ul class="periods" data-bind="foreach: $data.periods">
-      <li class="period" data-bind="css: {active: $parent.isActivePeriod($data)}, text: $parent.periodProxy.title($data), click: function(){ $parent.setPeriod($data); }"></li>
+    <ul class="periods">
+      <!-- ko foreach: $data.periods -->
+      <li class="period" data-bind="css: {active: $parent.isActivePeriod($data) && !$parent.isCustomPeriodRangeActive()}, text: $parent.periodProxy.title($data), click: function(){ $parent.setPeriod($data); }"></li>
+      <!-- /ko -->
+      <!-- ko foreach: $data.customPeriodRanges -->
+      <li class="period" data-bind="css: {active: $parent.isActiveCustomPeriodRange($data)}, text: $data.title, click: function(){ $parent.setCustomPeriodRange($data); }"></li>
+      <!-- /ko -->
     </ul>
     <ul class="ranges" data-bind="foreach: $data.ranges">
       <li class="range" data-bind="css: {active: $parent.isActiveDateRange($data)}, text: $data.title, click: function(){ $parent.setDateRange($data); }"></li>

tasks/build.babel.js

@@ -6,7 +6,6 @@ import browserSync from 'browser-sync';
 const $ = gulpLoadPlugins();
 const reload = browserSync.reload;
 
-
 function readJson(path) {
   return JSON.parse(fs.readFileSync(path, 'utf8'));
 }

test/config.coffee

@@ -104,6 +104,23 @@ describe 'Config', ->
         })
       , /Missing end date/)
 
+  describe 'customPeriodRanges', ->
+    it 'works with a valid object', () ->
+      new Config({
+        customPeriodRanges: {
+          "Test Range": ['2015-05-14', moment()]
+        }
+      })
+
+    it 'fails with a object value that is not an array', () ->
+      assert.throw( ->
+        new Config({
+          ranges: {
+            'Test Range': '2015-05-14'
+          }
+        })
+      , /Value should be an array/)
+
   describe '_dateObservable', ->
     describe '#fit()', ->
       describe 'minDate = 2015-05-14, period = month', ->