Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 367 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/directives/page-scroller/page-scroller.html b/catalog-ui/app/scripts/directives/page-scroller/page-scroller.html
new file mode 100644
index 0000000000..7359386901
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/page-scroller/page-scroller.html
@@ -0,0 +1,22 @@
+<div class="sdc-page-scroller">
+
+    <nav data-ng-if="showNav!==false" class="welcome-nav">
+        <div data-ng-if="showCloseButton===true" data-ng-click="onCloseButtonClick()" class="asdc-welcome-close"></div>
+        <ul>
+            <li data-ng-repeat="slide in slidesData | orderBy:'+position'"><a href="#{{slide.id}}" data-ng-click="onNavButtonClick(slide)" class=""></a></li>
+        </ul>
+    </nav>
+
+    <div class="nav-previous-next" data-ng-if="showPreviousNext===true">
+        <span class="go-prev" data-ng-click="goToPrevSlide()">previous slide</span>
+        <span class="go-next" data-ng-click="goToNextSlide()">next slide</span>
+    </div>
+
+    <div class="slides-container">
+        <section data-ng-repeat="slide in slidesData | orderBy:'+position'" class="slide" id="{{slide.id}}" on-last-repeat>
+            <ng-include src="slide.url"></ng-include>
+        </section>
+    </div>
+
+</div>
+
diff --git a/catalog-ui/app/scripts/directives/page-scroller/page-scroller.less b/catalog-ui/app/scripts/directives/page-scroller/page-scroller.less
new file mode 100644
index 0000000000..14f8568f07
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/page-scroller/page-scroller.less
@@ -0,0 +1,98 @@
+.sdc-page-scroller {
+
+    /****************** Navigation ***************/
+    nav {
+        position: fixed;
+        top: 0;
+        right: 0;
+        z-index: 100;
+        display: flex;
+        flex-direction: column;
+        width: 100px;
+        bottom: 0;
+        background-color: #000;
+        align-items: center;
+        justify-content: center;
+    }
+
+    nav ul {
+        list-style: none;
+        text-align: center;
+        margin-top: 0;
+        padding: 0;
+    }
+
+    nav ul li {
+        display: block;
+        margin-bottom: 15px;
+
+    }
+
+    nav ul li:last-child {
+
+    }
+
+    nav a {
+        display: block;
+        height: 6px;
+        width: 6px;
+        border-radius: 50%;
+        background-color: #4a4c4d;
+    }
+
+    nav a.active {
+        position: relative;
+    }
+
+    nav a.active::after {
+        content: '';
+        display: block;
+        position: absolute;
+        border: 2px solid #0198d1;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        top: -5px;
+        left: -5px;
+    }
+
+    /****************** Previous Next navigation ***************/
+    .go-prev, .go-next {
+        cursor: pointer;
+        font-weight: bold;
+        text-decoration: underline;
+    }
+
+    .slides-container {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow-y: hidden;
+        z-index: 10;
+    }
+
+    .slide {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .slide .centered {
+        width: 60%;
+        margin: 200px auto 0;
+    }
+
+    .slide .centered h1 {
+        text-align: center;
+    }
+
+    .slide .centered p {
+        text-align: center;
+        margin-top: 20px;
+        font-size: 20px;
+    }
+
+}
diff --git a/catalog-ui/app/scripts/directives/page-scroller/page-scroller.ts b/catalog-ui/app/scripts/directives/page-scroller/page-scroller.ts
new file mode 100644
index 0000000000..bb89f9a55a
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/page-scroller/page-scroller.ts
@@ -0,0 +1,247 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Directives {
+    'use strict';
+
+    export interface SlideData {
+        url: string;
+        id: string;
+        index: number;
+        callback: Function;
+    }
+
+    export interface ISdcPageScrollDirectiveScope extends ng.IScope {
+        slidesData:Array<SlideData>;
+        showNav: boolean;
+        showPreviousNext: boolean;
+        currentSlide:SlideData;
+        showCloseButton:boolean;
+        closeButtonCallback:Function;
+        startSlideIndex:number;
+
+        onNavButtonClick(slideName):void;
+        onCloseButtonClick():void;
+        goToPrevSlide():void;
+        goToNextSlide():void;
+        goToSlide(slide:SlideData):void;
+        onSlideChangeEnd():void;
+        onMouseWheel(event):void;
+        onKeyDown(event):void;
+        onResize(event):void;
+        gotoSlideIndex(index):void;
+    }
+
+    export class SdcPageScrollDirective implements ng.IDirective {
+
+        constructor(private $templateCache:ng.ITemplateCacheService) {
+
+        }
+
+        scope = {
+            slidesData: '=',
+            showNav: '=',
+            showPreviousNext: '=',
+            showCloseButton: '=',
+            closeButtonCallback: '=',
+            startSlideIndex: '=?'
+        };
+
+        public replace = true;
+        public restrict = 'E';
+        private delayExec:any;
+
+        template = ():string => {
+            return this.$templateCache.get('/app/scripts/directives/page-scroller/page-scroller.html');
+        };
+
+        link = ($scope:ISdcPageScrollDirectiveScope, $elem:JQuery, attr:any) => {
+            let isAnimating = false; //Animating flag - is our app animating
+            let pageHeight = $(window).innerHeight(); //The height of the window
+            let slidesContainer;
+            let navButtons;
+            let slides:any; //Only graph-links that starts with
+
+            //Key codes for up and down arrows on keyboard. We'll be using this to navigate change slides using the keyboard
+            let keyCodes = {
+                UP  : 38,
+                DOWN: 40
+            };
+
+            $scope.onCloseButtonClick = ():void => {
+                if ($scope.closeButtonCallback){
+                    $scope.closeButtonCallback();
+                };
+            };
+
+            // Wait for the dom to load (after ngRepeat).
+            $scope.$on('onRepeatLast', (scope, element, attrs) => {
+                slides = $(".slide", slidesContainer);
+                slidesContainer = $(".slides-container");
+                navButtons = $("nav a").filter("[href^='#']");
+
+                // Adding event listeners
+                $(window).on("resize", (e) => {$scope.onResize(e);}).resize();
+                $(window).on("mousewheel DOMMouseScroll", (e) => {$scope.onMouseWheel(e);});
+                $(document).on("keydown", (e) => {$scope.onKeyDown(e);});
+
+                //Going to the first slide
+                if ($scope.startSlideIndex){
+                    $scope.gotoSlideIndex($scope.startSlideIndex);
+                } else {
+                    $scope.gotoSlideIndex(0);
+                }
+
+            });
+
+            $scope.gotoSlideIndex = (index) => {
+                $scope.goToSlide($scope.slidesData[index]);
+            };
+
+            // When a button is clicked - first get the button href, and then slide to the container, if there's such a container
+            $scope.onNavButtonClick = (slide:SlideData):void => {
+                $scope.goToSlide(slide);
+            };
+
+            // If there's a previous slide, slide to it
+            $scope.goToPrevSlide = ():void => {
+                let previousSlide = $scope.slidesData[$scope.currentSlide.index-1];
+                if (previousSlide) {
+                    $scope.goToSlide(previousSlide);
+                }
+            };
+
+            // If there's a next slide, slide to it
+            $scope.goToNextSlide = ():void => {
+                let nextSlide = $scope.slidesData[$scope.currentSlide.index+1];
+                if (nextSlide) {
+                    $scope.goToSlide(nextSlide);
+                }
+            };
+
+            // Actual transition between slides
+            $scope.goToSlide = (slide:SlideData):void => {
+                //console.log("start goToSlide");
+                //If the slides are not changing and there's such a slide
+                if(!isAnimating && slide) {
+                    //setting animating flag to true
+                    isAnimating = true;
+                    $scope.currentSlide = slide;
+                    $scope.currentSlide.callback();
+
+                    //Sliding to current slide
+                    let calculatedY = pageHeight * ($scope.currentSlide.index);
+                    //console.log("$scope.currentSlide.index: " + $scope.currentSlide.index + " | calculatedY: " + calculatedY);
+
+                    $('.slides-container').animate(
+                        {
+                            scrollTop: calculatedY + 'px'
+                        },
+                        {
+                            duration: 1000,
+                            specialEasing: {
+                                width: "linear",
+                                height: "easeInOutQuart"
+                            },
+                            complete: function() {
+                                $scope.onSlideChangeEnd();
+                            }
+                        }
+                    );
+
+                    //Animating menu items
+                    $(".sdc-page-scroller nav a.active").removeClass("active");
+                    $(".sdc-page-scroller nav [href='#" + $scope.currentSlide.id + "']").addClass("active");
+                }
+            };
+
+            // Once the sliding is finished, we need to restore "isAnimating" flag.
+            // You can also do other things in this function, such as changing page title
+            $scope.onSlideChangeEnd = ():void => {
+
+
+                
+                isAnimating = false;
+            };
+
+            // When user scrolls with the mouse, we have to change slides
+            $scope.onMouseWheel = (event):void => {
+                //Normalize event wheel delta
+                let delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;
+
+                //If the user scrolled up, it goes to previous slide, otherwise - to next slide
+                if(delta < -1) {
+                    this.delayAction($scope.goToNextSlide);
+                } else if(delta > 1) {
+                    this.delayAction($scope.goToPrevSlide);
+                }
+                event.preventDefault();
+            };
+
+            // Getting the pressed key. Only if it's up or down arrow, we go to prev or next slide and prevent default behaviour
+            // This way, if there's text input, the user is still able to fill it
+            $scope.onKeyDown = (event):void => {
+                let PRESSED_KEY = event.keyCode;
+
+                if(PRESSED_KEY == keyCodes.UP){
+                    $scope.goToPrevSlide();
+                    event.preventDefault();
+                } else if(PRESSED_KEY == keyCodes.DOWN){
+                    $scope.goToNextSlide();
+                    event.preventDefault();
+                }
+            };
+
+            // When user resize it's browser we need to know the new height, so we can properly align the current slide
+            $scope.onResize = (event):void => {
+                //This will give us the new height of the window
+                let newPageHeight = $(window).innerHeight();
+
+                // If the new height is different from the old height ( the browser is resized vertically ), the slides are resized
+                if(pageHeight !== newPageHeight) {
+                    pageHeight = newPageHeight;
+                }
+            };
+        };
+
+        private initSlides = ():void => {
+            //pageHeight
+        };
+
+        private delayAction = (action:Function):void => {
+            clearTimeout(this.delayExec);
+            this.delayExec = setTimeout(function () {
+                action();
+            }, 100);
+        };
+
+        public static factory = ($templateCache:ng.ITemplateCacheService)=> {
+            return new SdcPageScrollDirective($templateCache);
+        };
+
+    }
+
+    SdcPageScrollDirective.factory.$inject = ['$templateCache'];
+
+}
+
+
+
+