diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/page-scroller/page-scroller.ts')
| -rw-r--r-- | catalog-ui/app/scripts/directives/page-scroller/page-scroller.ts | 247 |
1 files changed, 247 insertions, 0 deletions
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']; + +} + + + + |