diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/page-scroller')
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']; + +} + + + + |