Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>

1 files changed, 267 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/welcome/welcome-view.ts b/catalog-ui/app/scripts/view-models/welcome/welcome-view.ts
new file mode 100644
index 0000000000..0a0c923481
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/welcome/welcome-view.ts
@@ -0,0 +1,267 @@
+/*-
+ * ============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.ViewModels {
+    'use strict';
+
+    export interface IWelcomeViewMode {
+        slides:Array<Sdc.Directives.SlideData>;
+        onCloseButton():void;
+        onCloseVideoButton():void;
+
+        video_mp4: string;
+        video_ogg: string;
+    }
+
+    export class WelcomeViewModel {
+
+        firstLoad:boolean = true;
+        alreadyAnimated:Array<number> = [];
+
+        static '$inject' = [
+            '$scope',
+            '$sce',
+            'sdcConfig',
+            '$state',
+            '$filter'
+        ];
+
+        constructor(
+            private $scope:IWelcomeViewMode,
+            private $sce:any,
+            private sdcConfig: Models.IAppConfigurtaion,
+            private $state:ng.ui.IStateService,
+            private $filter:ng.IFilterService
+        ){
+            /*this.init();
+            this.initScope();
+            window.setTimeout(():void => {
+                this.loadImages(():void=> {
+                    window.setTimeout(():void =>{
+                        $(".sdc-welcome-new-page").addClass("animated fadeIn");
+                        this.animateGeneral();
+                        this.animate1();
+                    },1000);
+                });
+            },0);*/
+        }
+
+        private initScope = ():void => {
+
+            this.$scope.onCloseButton = ():void => {
+                //console.log("onCloseButton");
+                this.$state.go("dashboard", {});
+            };
+
+            this.$scope.onCloseVideoButton = ():void => {
+                //console.log("onCloseVideoButton");
+                $("#sdc-page-scroller").removeClass("animated fadeOut");
+                $("#sdc-page-scroller").addClass("animated fadeIn");
+                window.setTimeout(()=>{$("#sdc-page-scroller").css("display","block");},0);
+
+                $("#sdc-welcome-video-wrapper").removeClass("animated fadeIn");
+                $("#sdc-welcome-video-wrapper").addClass("animated fadeOut");
+                window.setTimeout(()=>{$("#sdc-welcome-video-wrapper").css("display","none");},500);
+
+                let videoElement:any = $("#asdc-welcome-video")[0];
+                videoElement.pause();
+            };
+
+            let url: string = this.sdcConfig.api.welcome_page_video_url;
+
+            this.$scope.video_mp4 = this.$sce.trustAsResourceUrl(url + ".mp4");
+            this.$scope.video_ogg = this.$sce.trustAsResourceUrl(url + ".ogg");
+
+        };
+
+        private init = ():void => {
+            let viewModelsHtmlBasePath:string = '/app/scripts/view-models/';
+            this.$scope.slides = [
+                {"url": viewModelsHtmlBasePath + 'welcome/slide0.html', "id": "slide-0", "index": 0, "callback": () => {this.animate0();}},
+                {"url": viewModelsHtmlBasePath + 'welcome/slide1.html', "id": "slide-1", "index": 1, "callback": () => {}},
+                {"url": viewModelsHtmlBasePath + 'welcome/slide2.html', "id": "slide-2", "index": 2, "callback": () => {this.animate2();}},
+                {"url": viewModelsHtmlBasePath + 'welcome/slide3.html', "id": "slide-3", "index": 3, "callback": () => {this.animate3();}},
+                {"url": viewModelsHtmlBasePath + 'welcome/slide4.html', "id": "slide-4", "index": 4, "callback": () => {this.animate4();}},
+                {"url": viewModelsHtmlBasePath + 'welcome/slide5.html', "id": "slide-5", "index": 5, "callback": () => {this.animate5();}},
+                {"url": viewModelsHtmlBasePath + 'welcome/slide6.html', "id": "slide-6", "index": 6, "callback": () => {this.animate6();}}
+            ];
+
+            $('body').keyup((e):void=> {
+                if (e.keyCode == 27) { // escape key maps to keycode `27`
+                    this.$state.go('dashboard');
+                }
+            });
+        };
+
+        private animateGeneral = ():void => {
+            //console.log("animateGeneral");
+
+            /*// Animate the right navigation
+            if (this.firstLoad===true) {
+                //TODO: Israel
+                //TweenLite.from('.page-nav', 2, {x: "100px", delay: 2});
+            }
+            */
+
+            this.firstLoad = false;
+        };
+
+        /*private loadImages = (callback: Function):void => {
+            let src = $('#slide-1 .asdc-welcome-frame').css('background-image');
+            let url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');
+
+            let img = new Image();
+            img.onload = function() {
+                callback();
+                //alert('image loaded');
+            };
+            img.src = url;
+            /!*if (img.complete){
+                callback;
+            }*!/
+        };*/
+
+        private animate = (element:any, animation:string, when:number):void => {
+            window.setTimeout(()=>{
+                element.addClass("animated " + animation);
+                if (element[0]) {
+                    element[0].style = "visibility: visible;";
+                }
+            },when);
+        };
+
+        private hide = (element:any, animation:string, animationToHide:string, when:number):void => {
+            element.addClass("animated " + animation);
+            element[0].style="visibility: hidden;";
+        };
+
+        private animate0 = ():void => {
+            if (this.alreadyAnimated.indexOf(0)!==-1){
+                return;
+            } else {
+                this.alreadyAnimated.push(0);
+            }
+            //console.log("slide 0 - animate");
+            this.animate($('#slide-0 .bg-1'),'fadeInDown',500);
+            this.animate($('#slide-0 .bg-2'),'fadeInDown',1000);
+            this.animate($('#slide-0 .bg-3'),'fadeInDown',1500);
+            this.animate($('#slide-0 .bg-4'),'fadeInDown',2000);
+
+            this.animate($('#slide-0 .bg-5'),'fadeInDown',2500);
+            this.animate($('#slide-0 .bg-6'),'fadeInDown',3000);
+            this.animate($('#slide-0 .bg-7'),'fadeInDown',3500);
+            this.animate($('#slide-0 .bg-8'),'fadeInDown',4000);
+        };
+
+        private animate1 = ():void => {
+            if (this.alreadyAnimated.indexOf(1)!==-1){
+                return;
+            } else {
+                this.alreadyAnimated.push(1);
+            }
+            //console.log("slide 1 - animate");
+
+            this.animate($('#slide-1 .asdc-welcome-main-title'),'fadeInUp',1000);
+            this.animate($('#slide-1 .asdc-welcome-main-message'),'fadeInUp',2000);
+
+            this.animate($('#slide-1 .asdc-welcome-main-back-btn'),'fadeIn',3000);
+
+            this.animate($('#slide-1 .asdc-welcome-video-icon'),'zoomIn',3000);
+            this.animate($('#slide-1 .asdc-welcome-inner-circle'),'zoomIn',3000);
+
+            this.animate($('.welcome-nav'),'slideInRight',2000);
+        };
+
+        private animate2 = ():void => {
+            if (this.alreadyAnimated.indexOf(2)!==-1){
+                return;
+            } else {
+                this.alreadyAnimated.push(2);
+            }
+            //console.log("slide 2 - animate");
+            this.animate($('#slide-2 .asdc-welcome-frame-shape'),'zoomIn',500);
+            this.animate($('#slide-2 .asdc-welcome-slide-text-box-content'),'fadeInUp',2000);
+            this.animate($('#slide-2 .asdc-welcome-slide-text-box-title'),'fadeInUp',1000);
+        };
+
+        private animate3 = ():void => {
+            if (this.alreadyAnimated.indexOf(3)!==-1){
+                return;
+            } else {
+                this.alreadyAnimated.push(3);
+            }
+            //console.log("slide 3 - animate");
+            this.animate($('#slide-3 .asdc-welcome-frame-shape'),'zoomIn',500);
+            this.animate($('#slide-3 .asdc-welcome-slide-text-box-content'),'fadeInUp',2000);
+            this.animate($('#slide-3 .asdc-welcome-slide-text-box-title'),'fadeInUp',1000);
+        };
+
+        private animate4 = ():void => {
+            if (this.alreadyAnimated.indexOf(4)!==-1){
+                return;
+            } else {
+                this.alreadyAnimated.push(4);
+            }
+            //console.log("slide 4 - animate");
+            this.animate($('#slide-4 .asdc-welcome-frame-shape'),'zoomIn',500);
+            this.animate($('#slide-4 .asdc-welcome-slide-text-box-content'),'fadeInUp',2000);
+            this.animate($('#slide-4 .asdc-welcome-slide-text-box-title'),'fadeInUp',1000);
+        };
+
+        private animate5 = ():void => {
+            if (this.alreadyAnimated.indexOf(5)!==-1){
+                return;
+            } else {
+                this.alreadyAnimated.push(5);
+            }
+            //console.log("slide 5 - animate");
+            this.animate($('#slide-5 .asdc-welcome-frame-shape'),'zoomIn',500);
+            this.animate($('#slide-5 .asdc-welcome-slide-text-box-content'),'fadeInUp',2000);
+            this.animate($('#slide-5 .asdc-welcome-slide-text-box-title'),'fadeInUp',1000);
+        };
+
+        private animate6 = ():void => {
+            if (this.alreadyAnimated.indexOf(6)!==-1){
+                return;
+            } else {
+                this.alreadyAnimated.push(6);
+            }
+            //console.log("slide 6 - animate");
+            this.animate($('#slide-6 .asdc-welcome-main-message'),'fadeInUp',2000);
+            this.animate($('#slide-6 .asdc-welcome-main-title'),'fadeInUp',1000);
+            this.animate($('#slide-6 .asdc-welcome-main-back-btn'),'fadeInUp',3000);
+        };
+
+        private animateCss = (element:JQuery, animationName:string):void => {
+            let animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
+            element.addClass('animated ' + animationName).one(animationEnd, function() {
+                element.removeClass('animated ' + animationName);
+            });
+        };
+
+        private unAnimateCss = (element:JQuery, animationName:string):void => {
+            let animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
+            element.addClass('animated ' + animationName).one(animationEnd, function() {
+                element.removeClass('animated ' + animationName);
+            });
+        };
+
+    }
+}