summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/page-scroller
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
committerMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
commited64b5edff15e702493df21aa3230b81593e6133 (patch)
treea4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/app/scripts/directives/page-scroller
parent280f8015d06af1f41a3ef12e8300801c7a5e0d54 (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')
-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, 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'];
-
-}
-
-
-
-