Merge branch 'kp-7325-add-lib-helpers' into 'master'

CE Backport: Add library helpers to use in Roadmap

See merge request gitlab-org/gitlab-ce!24232

2 files changed, 31 insertions, 10 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 9e22cdc04e9..fc34d243dd7 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -118,12 +118,13 @@ export const handleLocationHash = () => {
 
 // Check if element scrolled into viewport from above or below
 // Courtesy http://stackoverflow.com/a/7557433/414749
-export const isInViewport = el => {
+export const isInViewport = (el, offset = {}) => {
   const rect = el.getBoundingClientRect();
+  const { top, left } = offset;
 
   return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
+    rect.top >= (top || 0) &&
+    rect.left >= (left || 0) &&
     rect.bottom <= window.innerHeight &&
     rect.right <= window.innerWidth
   );
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 59007d5950e..01dbbb9dd16 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -8,6 +8,14 @@ import { languageCode, s__ } from '../../locale';
 window.timeago = timeago;
 
 /**
+ * This method allows you to create new Date instance from existing
+ * date instance without keeping the reference.
+ *
+ * @param {Date} date
+ */
+export const newDate = date => (date instanceof Date ? new Date(date.getTime()) : new Date());
+
+/**
  * Returns i18n month names array.
  * If `abbreviated` is provided, returns abbreviated
  * name.
@@ -321,23 +329,35 @@ export const getSundays = date => {
 
 /**
  * Returns list of Dates representing a timeframe of months from startDate and length
+ * This method also supports going back in time when `length` is negative number
  *
- * @param {Date} startDate
+ * @param {Date} initialStartDate
  * @param {Number} length
  */
-export const getTimeframeWindowFrom = (startDate, length) => {
-  if (!(startDate instanceof Date) || !length) {
+export const getTimeframeWindowFrom = (initialStartDate, length) => {
+  if (!(initialStartDate instanceof Date) || !length) {
     return [];
   }
 
+  const startDate = newDate(initialStartDate);
+  const moveMonthBy = length > 0 ? 1 : -1;
+
+  startDate.setDate(1);
+  startDate.setHours(0, 0, 0, 0);
+
   // Iterate and set date for the size of length
   // and push date reference to timeframe list
-  const timeframe = new Array(length)
-    .fill()
-    .map((val, i) => new Date(startDate.getFullYear(), startDate.getMonth() + i, 1));
+  const timeframe = new Array(Math.abs(length)).fill().map(() => {
+    const currentMonth = startDate.getTime();
+    startDate.setMonth(startDate.getMonth() + moveMonthBy);
+    return new Date(currentMonth);
+  });
 
   // Change date of last timeframe item to last date of the month
-  timeframe[length - 1].setDate(totalDaysInMonth(timeframe[length - 1]));
+  // when length is positive
+  if (length > 0) {
+    timeframe[timeframe.length - 1].setDate(totalDaysInMonth(timeframe[timeframe.length - 1]));
+  }
 
   return timeframe;
 };