summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/page-scroller
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 10:28:42 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 10:51:01 +0200
commit451a3400b76511393c62a444f588a4ed15f4a549 (patch)
treee4f5873a863d1d3e55618eab48b83262f874719d /catalog-ui/app/scripts/directives/page-scroller
parent5abfe4e1fb5fae4bbd5fbc340519f52075aff3ff (diff)
Initial OpenECOMP SDC commit
Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/app/scripts/directives/page-scroller')
-rw-r--r--catalog-ui/app/scripts/directives/page-scroller/page-scroller.html22
-rw-r--r--catalog-ui/app/scripts/directives/page-scroller/page-scroller.less98
-rw-r--r--catalog-ui/app/scripts/directives/page-scroller/page-scroller.ts247
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'];
+
+}
+
+
+
+