From 451a3400b76511393c62a444f588a4ed15f4a549 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 19 Feb 2017 10:28:42 +0200 Subject: Initial OpenECOMP SDC commit Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando --- .../app/scripts/view-models/welcome/slide0.html | 50 ++++ .../app/scripts/view-models/welcome/slide1.html | 34 +++ .../app/scripts/view-models/welcome/slide2.html | 26 ++ .../app/scripts/view-models/welcome/slide3.html | 27 +++ .../app/scripts/view-models/welcome/slide4.html | 29 +++ .../app/scripts/view-models/welcome/slide5.html | 27 +++ .../app/scripts/view-models/welcome/slide6.html | 26 ++ .../welcome/welcome-steps-controller.ts | 74 ++++++ .../scripts/view-models/welcome/welcome-view.html | 22 ++ .../scripts/view-models/welcome/welcome-view.ts | 267 +++++++++++++++++++++ 10 files changed, 582 insertions(+) create mode 100644 catalog-ui/app/scripts/view-models/welcome/slide0.html create mode 100644 catalog-ui/app/scripts/view-models/welcome/slide1.html create mode 100644 catalog-ui/app/scripts/view-models/welcome/slide2.html create mode 100644 catalog-ui/app/scripts/view-models/welcome/slide3.html create mode 100644 catalog-ui/app/scripts/view-models/welcome/slide4.html create mode 100644 catalog-ui/app/scripts/view-models/welcome/slide5.html create mode 100644 catalog-ui/app/scripts/view-models/welcome/slide6.html create mode 100644 catalog-ui/app/scripts/view-models/welcome/welcome-steps-controller.ts create mode 100644 catalog-ui/app/scripts/view-models/welcome/welcome-view.html create mode 100644 catalog-ui/app/scripts/view-models/welcome/welcome-view.ts (limited to 'catalog-ui/app/scripts/view-models/welcome') diff --git a/catalog-ui/app/scripts/view-models/welcome/slide0.html b/catalog-ui/app/scripts/view-models/welcome/slide0.html new file mode 100644 index 0000000000..48d37215a4 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/welcome/slide0.html @@ -0,0 +1,50 @@ +
+
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
diff --git a/catalog-ui/app/scripts/view-models/welcome/slide1.html b/catalog-ui/app/scripts/view-models/welcome/slide1.html new file mode 100644 index 0000000000..9252026a6b --- /dev/null +++ b/catalog-ui/app/scripts/view-models/welcome/slide1.html @@ -0,0 +1,34 @@ +
+
+
+ + +
+ + + +
+
+ + + +

Welcome to SDC

+ +
+
+
diff --git a/catalog-ui/app/scripts/view-models/welcome/slide2.html b/catalog-ui/app/scripts/view-models/welcome/slide2.html new file mode 100644 index 0000000000..4329bf462d --- /dev/null +++ b/catalog-ui/app/scripts/view-models/welcome/slide2.html @@ -0,0 +1,26 @@ +
+
+
+
+ Innovate
+ network- design
+ platform
+
+
+

+ Adapt swiftly to the constant demands placed on
networks by ongoing technological advances. +

+

+ Using ASDC’s innovative network-design platform,
quickly and easily create and share software +
+ components. +

+
+
+
+ 01 +
+
+
+
+
diff --git a/catalog-ui/app/scripts/view-models/welcome/slide3.html b/catalog-ui/app/scripts/view-models/welcome/slide3.html new file mode 100644 index 0000000000..dd5448beac --- /dev/null +++ b/catalog-ui/app/scripts/view-models/welcome/slide3.html @@ -0,0 +1,27 @@ +
+
+ +
+
+ Enhance
+ and extend +
+
+

+ Blend, build and arrange resources and services in the
designer workspace. +

+

+ Let your creativity lead the way to any number of
network solutions. +

+

+ Then simply click on elements to customize and refine
their specific properties to match your needs. +

+
+
+
+ 02 +
+
+
+
+
diff --git a/catalog-ui/app/scripts/view-models/welcome/slide4.html b/catalog-ui/app/scripts/view-models/welcome/slide4.html new file mode 100644 index 0000000000..1428ce5375 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/welcome/slide4.html @@ -0,0 +1,29 @@ +
+
+
+
+ Share
+ and Collaborate +
+
+

+ Graphically arranged, the Catalog is an easily
searchable collection of resources, services and +
products that provides you with a variety of
network elements. +

+

+ Benefit from these assets by using them as
building blocks to form any number of network +
solutions. +

+

+ After being certified for release, share and
collaborate with others as your solution is +
automatically included in the catalog. +

+
+
+
+ 03 +
+
+
+
+
diff --git a/catalog-ui/app/scripts/view-models/welcome/slide5.html b/catalog-ui/app/scripts/view-models/welcome/slide5.html new file mode 100644 index 0000000000..913573c8fc --- /dev/null +++ b/catalog-ui/app/scripts/view-models/welcome/slide5.html @@ -0,0 +1,27 @@ +
+
+
+
+ Fast, efficient
+ and reliable +
+
+

+ ASDC is a platform built around a simple error-free +
process for resource and service design and distribution. +
+
An integrated certification process makes ASDC a safe +
and reliable environment to experiment, review and test +
your work. +
+
Once approved your solution is ready to be used in +
the real-world. +

+ +
+ +
+
+ +
+
diff --git a/catalog-ui/app/scripts/view-models/welcome/slide6.html b/catalog-ui/app/scripts/view-models/welcome/slide6.html new file mode 100644 index 0000000000..22006f7f82 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/welcome/slide6.html @@ -0,0 +1,26 @@ +
+
+ +
+
+ +
ASDC
+
+ jump starting your network solutions. +
+
+ Home +
+
+ +
+ © 2016 AT&T Intellectual Property.© 2016 AT&T Intellectual Property. link. This link will open a new + window This link will open a new window All rights reserved. +
+ AT&T, Globe logo, Mobilizing Your World and DIRECTV are registered trademarks of AT&T Intellectual + Property and/or AT&T affiliated companies. All other marks are the property of their respective owners. + +
+ +
+
diff --git a/catalog-ui/app/scripts/view-models/welcome/welcome-steps-controller.ts b/catalog-ui/app/scripts/view-models/welcome/welcome-steps-controller.ts new file mode 100644 index 0000000000..816afcf2d2 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/welcome/welcome-steps-controller.ts @@ -0,0 +1,74 @@ +/*- + * ============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========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + export interface IWelcomeStepsController { + video_mp4: string; + video_ogg: string; + onPlayVideo: Function; + } + + export class WelcomeStepsControllerViewModel { + + static '$inject' = [ + '$scope', + '$sce', + 'sdcConfig', + '$state', + '$filter' + ]; + + constructor( + private $scope:IWelcomeStepsController, + private $sce:any, + private sdcConfig: Models.IAppConfigurtaion, + private $state:ng.ui.IStateService, + private $filter:ng.IFilterService + ){ + this.init(); + this.initScope(); + } + + private init = ():void => { + + }; + + private initScope = ():void => { + + this.$scope.onPlayVideo = ():void => { + //console.log("onPlayVideo"); + $("#sdc-page-scroller").removeClass("animated fadeIn"); + $("#sdc-page-scroller").addClass("animated fadeOut"); + window.setTimeout(()=>{$("#sdc-page-scroller").css("display","none");},500); + + $("#sdc-welcome-video-wrapper").removeClass("animated fadeOut"); + $("#sdc-welcome-video-wrapper").addClass("animated fadeIn"); + window.setTimeout(()=>{$("#sdc-welcome-video-wrapper").css("display","block");},0); + + let videoElement:any = $("#asdc-welcome-video")[0]; + videoElement.play(); + }; + + }; + + } +} diff --git a/catalog-ui/app/scripts/view-models/welcome/welcome-view.html b/catalog-ui/app/scripts/view-models/welcome/welcome-view.html new file mode 100644 index 0000000000..ba41e88a4e --- /dev/null +++ b/catalog-ui/app/scripts/view-models/welcome/welcome-view.html @@ -0,0 +1,22 @@ +
+ + + +
Welcome to SDC
+ + +
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========================================================= + */ +/// +module Sdc.ViewModels { + 'use strict'; + + export interface IWelcomeViewMode { + slides:Array; + onCloseButton():void; + onCloseVideoButton():void; + + video_mp4: string; + video_ogg: string; + } + + export class WelcomeViewModel { + + firstLoad:boolean = true; + alreadyAnimated:Array = []; + + 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); + }); + }; + + } +} -- cgit 1.2.3-korg