summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/page-scroller/page-scroller.ts
diff options
context:
space:
mode:
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.ts247
1 files changed, 0 insertions, 247 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
deleted file mode 100644
index bb89f9a55a..0000000000
--- a/catalog-ui/app/scripts/directives/page-scroller/page-scroller.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-/*-
- * ============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'];
-
-}
-
-
-
-