diff options
author | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
---|---|---|
committer | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
commit | ed64b5edff15e702493df21aa3230b81593e6133 (patch) | |
tree | a4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/app/scripts/directives/page-scroller | |
parent | 280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff) |
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/app/scripts/directives/page-scroller')
3 files changed, 0 insertions, 367 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 deleted file mode 100644 index 7359386901..0000000000 --- a/catalog-ui/app/scripts/directives/page-scroller/page-scroller.html +++ /dev/null @@ -1,22 +0,0 @@ -<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 deleted file mode 100644 index 14f8568f07..0000000000 --- a/catalog-ui/app/scripts/directives/page-scroller/page-scroller.less +++ /dev/null @@ -1,98 +0,0 @@ -.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 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']; - -} - - - - |