added forward/backward on period

src/components/cards.js

@@ -453,6 +453,44 @@ var STWkit;
             self.durationHours.step = '12';
             var hoursSpan = L.DomUtil.create('span', 'uk-width-1-6', durationDiv);
             hoursSpan.textContent = " hours";
+            var directionRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
+            _super.prototype.addLabelDiv.call(_this, directionRowDiv, "Forward / Backward", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-direction' target='_blank'>here</a>");
+            var directionDiv = L.DomUtil.create('div', 'uk-margin-bottom', directionRowDiv);
+            directionDiv.setAttribute('data-uk-button-radio', '');
+            var directionButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', directionDiv);
+            var directionbuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', directionButtonGrid);
+            directionButtonGrid.id = 'guidefo5';
+            var directionButtonGroup = L.DomUtil.create('div', 'uk-button-group', directionbuttonsDiv);
+            self.forwardButton = L.DomUtil.create('button', 'uk-button uk-button-small', directionButtonGroup);
+            self.forwardButton.textContent = 'Forward';
+            self.backwardButton = L.DomUtil.create('button', 'uk-button uk-button-small', directionButtonGroup);
+            self.backwardButton.textContent = 'Backward';
+            self.forwardButton.onclick = function () {
+                self.forward = true;
+                var initDate = moment.utc();
+                if (initDate.isBefore(self.minDate) || initDate.isAfter(self.maxDate))
+                    initDate = self.minDate;
+                self.from = initDate;
+                initDate.add(parseInt(self.durationHours.value), 'hours');
+                self.to = initDate;
+                self.adjustDateToRange();
+                self.updateSlider();
+                self.validate();
+                self.fireChangeFn(self);
+            };
+            self.backwardButton.onclick = function () {
+                self.forward = false;
+                var initDate = moment.utc();
+                if (initDate.isBefore(self.minDate) || initDate.isAfter(self.maxDate))
+                    initDate = self.minDate;
+                self.to = initDate;
+                initDate.subtract(parseInt(self.durationHours.value), 'hours');
+                self.from = initDate;
+                self.adjustDateToRange();
+                self.updateSlider();
+                self.validate();
+                self.fireChangeFn(self);
+            };
             var clearDiv = L.DomUtil.create('div', 'uk-clearfix', periodDiv);
             var clearButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-left', clearDiv);
             clearButton.textContent = 'Clear';
@@ -533,6 +571,8 @@ var STWkit;
                             sliderOpt['max'] = self.maxDate.format("X");
                             self.slider.update(sliderOpt);
                             self.ready = true;
+                            if (document.body.contains(self.forwardButton))
+                                self.forwardButton.click();
                         }
                     });
                     var startDatePicker = UIkit.datepicker(self.startDateInput, { minDate: self.minDate.format(self.dateFormat), maxDate: self.maxDate.format(self.dateFormat), format: self.dateFormat });
@@ -630,11 +670,15 @@ var STWkit;
                 self.from = startDate;
                 self.to = stopDate;
                 self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
+                if (document.body.contains(self.forwardButton))
+                    self.forwardButton.click();
             }
             else {
                 self.from = stopDate;
                 self.to = startDate;
                 self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
+                if (document.body.contains(self.backwardButton))
+                    self.backwardButton.click();
             }
         };
         PeriodCard.prototype.populateData = function (geojson) {
@@ -665,6 +709,8 @@ var STWkit;
                 sliderOpt['to'] = self.to.format("X");
                 self.slider.update(sliderOpt);
             }
+            if (document.body.contains(self.forwardButton))
+                self.forwardButton.click();
             AccordionCard.enableNext(self.nextButton, false);
             (self.oncallback && self.oncallback());
         };

src/components/cards.ts

@@ -444,6 +444,8 @@ module STWkit {
 
     export class PeriodCard extends AccordionCard {
         public oncallback: Function;
+        public forwardButton: HTMLButtonElement;
+        public backwardButton: HTMLButtonElement;            
         public nextButton: any;
         public forward: any;
         public from: any;
@@ -504,6 +506,48 @@ module STWkit {
             self.durationHours.step = '12';
             var hoursSpan = <HTMLInputElement>L.DomUtil.create('span', 'uk-width-1-6', durationDiv);
             hoursSpan.textContent = " hours";
+            var directionRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
+            super.addLabelDiv(directionRowDiv, "Forward / Backward", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-direction' target='_blank'>here</a>");
+            var directionDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-margin-bottom', directionRowDiv);
+            directionDiv.setAttribute('data-uk-button-radio', '');
+            var directionButtonGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-grid-small', directionDiv);
+            var directionbuttonsDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', directionButtonGrid);
+            directionButtonGrid.id = 'guidefo5';
+            var directionButtonGroup = <HTMLDivElement>L.DomUtil.create('div', 'uk-button-group', directionbuttonsDiv);
+            self.forwardButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', directionButtonGroup);
+            self.forwardButton.textContent = 'Forward';
+            self.backwardButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', directionButtonGroup);
+            self.backwardButton.textContent = 'Backward';
+    
+            self.forwardButton.onclick = function () {
+                self.forward = true;
+                var initDate = moment.utc();
+                if (initDate.isBefore(self.minDate) || initDate.isAfter(self.maxDate))
+                    initDate = self.minDate;
+                self.from = initDate;
+                initDate.add(parseInt(self.durationHours.value), 'hours');
+                self.to = initDate;
+                
+                self.adjustDateToRange();
+                self.updateSlider();
+                self.validate();
+                self.fireChangeFn(self);
+            };
+            self.backwardButton.onclick = function () {
+                self.forward = false;
+                var initDate = moment.utc();
+                if (initDate.isBefore(self.minDate) || initDate.isAfter(self.maxDate))
+                    initDate = self.minDate;
+                self.to = initDate;
+                initDate.subtract(parseInt(self.durationHours.value), 'hours');
+                self.from = initDate;
+                
+                self.adjustDateToRange();
+                self.updateSlider();            
+                self.validate();
+                self.fireChangeFn(self);
+            };
+
             var clearDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-clearfix', periodDiv);
             var clearButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-left', clearDiv);
             clearButton.textContent = 'Clear';
@@ -574,6 +618,10 @@ module STWkit {
                 self.adjustDateToRange();
                 self.updateSlider();
             };
+
+
+    
+
             UIkit.ready(function () {
                 if (!self.ready) {
                     reqwest({
@@ -588,6 +636,7 @@ module STWkit {
                             sliderOpt['max'] = self.maxDate.format("X");
                             self.slider.update(sliderOpt);
                             self.ready = true;
+                            if (document.body.contains(self.forwardButton)) self.forwardButton.click();                    
                         }
                     });
     
@@ -686,10 +735,12 @@ module STWkit {
                 self.from = startDate;
                 self.to = stopDate;
                 self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
+                if (document.body.contains(self.forwardButton)) self.forwardButton.click();
             } else {
                 self.from = stopDate;
                 self.to = startDate;
                 self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
+                if (document.body.contains(self.backwardButton))  self.backwardButton.click();
             }
         }
     
@@ -721,6 +772,8 @@ module STWkit {
                 sliderOpt['to'] = self.to.format("X");
                 self.slider.update(sliderOpt);
             }
+            if (document.body.contains(self.forwardButton)) self.forwardButton.click();
+            
             AccordionCard.enableNext(self.nextButton, false);
             (self.oncallback && self.oncallback());
         }