diff options
Diffstat (limited to 'catalog-ui/app/scripts/view-models/welcome')
10 files changed, 582 insertions, 0 deletions
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 @@ +<div class="slide" id="slide-0" data-ng-controller="Sdc.ViewModels.WelcomeStepsControllerViewModel"> + <div class="asdc-welcome-frame frame-0"> + <div class="asdc-welcome-header"> + <a class="sprite-welcome logo" class="welcome-logo" ui-sref="dashboard"></a> + </div> + + <div class="asdc-welcome-cover"></div> + <div class="asdc-whats-new"> + + <div class="news-items-row"> + <div class="news-item-wrapper bg-1"> + <div class="news-title" translate="WHATS_NEW_1_TITLE"></div> + <div class="news-body" translate="WHATS_NEW_1_BODY"></div> + </div> + <div class="news-item-wrapper bg-2"> + <div class="news-title" translate="WHATS_NEW_2_TITLE"></div> + <div class="news-body" translate="WHATS_NEW_2_BODY"></div> + </div> + <div class="news-item-wrapper bg-3"> + <div class="news-title" translate="WHATS_NEW_3_TITLE"></div> + <div class="news-body" translate="WHATS_NEW_3_BODY"></div> + </div> + <div class="news-item-wrapper bg-4"> + <div class="news-title" translate="WHATS_NEW_4_TITLE"></div> + <div class="news-body" translate="WHATS_NEW_4_BODY"></div> + </div> + </div> + + <div class="news-items-row"> + <div class="news-item-wrapper bg-5"> + <div class="news-title" translate="WHATS_NEW_5_TITLE"></div> + <div class="news-body" translate="WHATS_NEW_5_BODY"></div> + </div> + <div class="news-item-wrapper bg-6"> + <div class="news-title" translate="WHATS_NEW_6_TITLE"></div> + <div class="news-body" translate="WHATS_NEW_6_BODY"></div> + </div> + <div class="news-item-wrapper bg-7"> + <div class="news-title" translate="WHATS_NEW_7_TITLE"></div> + <div class="news-body" translate="WHATS_NEW_7_BODY"></div> + </div> + <div class="news-item-wrapper bg-8"> + <div class="news-title" translate="WHATS_NEW_8_TITLE"></div> + <div class="news-body" translate="WHATS_NEW_8_BODY"></div> + </div> + </div> + + </div> + </div> +</div> 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 @@ +<div class="slide" id="slide-1" data-ng-controller="Sdc.ViewModels.WelcomeStepsControllerViewModel"> + <div class="asdc-welcome-frame frame-01"> + <div class="asdc-welcome-header"> + <!--<a class="sprite-welcome logo" class="welcome-logo" ui-sref="dashboard"></a>--> + <!--<a class="whats-new" data-ng-click="gotoSlideIndex(0)">What`s New</a>--> + </div> + + <!--<video id="asdc-welcome-video" class="asdc-welcome-video"><!– autoplay loop muted –> + <source ng-src="{{video_mp4}}" type="video/mp4" /> + <source ng-src="{{video_ogg}}" type='video/ogg' /> + </video>--> + + <div class="asdc-welcome-cover"></div> + <div class="asdc-welcome-main"> + + <!--<div class="asdc-welcome-main-title">INNOVATIVE. RAPID. RELIABLE</div> + <div class="asdc-welcome-main-message"> + AT&Ts leading collaborative network solution design platform + </div> + + <div class="asdc-welcome-main-back-btn-ph"> + <a class="asdc-welcome-main-back-btn" ui-sref="dashboard">Home</a> + </div> + + <div class="asdc-welcome-video-icon"> + <div class="asdc-welcome-video-icon-play sprite-welcome play" data-ng-click="onPlayVideo()"></div> + <div class="asdc-welcome-inner-circle"></div> + </div>--> + + <h1>Welcome to SDC</h1> + + </div> + </div> +</div> 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 @@ +<div class="slide" id="slide-2"> + <div class="asdc-welcome-frame frame-02"> + <div class="asdc-welcome-slide-text-box"> + <div class="asdc-welcome-slide-text-box-title"> + Innovate <br> + network- design <br> + platform <br> + </div> + <div class="asdc-welcome-slide-text-box-content"> + <p> + Adapt swiftly to the constant demands placed on <br> networks by ongoing technological advances. + </p> + <p> + Using ASDC’s innovative network-design platform,<br> quickly and easily create and share software + <br> + components. + </p> + </div> + </div> + <div class="asdc-welcome-slide-image-box"> + <img src="styles/images/welcome/ss-01.png" alt="01" class="asdc-welcome-slide-image"> + </div> + <div class="asdc-welcome-frame-shape"></div> + <div class="asdc-welcome-frame-connection"></div> + </div> +</div> 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 @@ +<div class="slide" id="slide-3"> + <div class="asdc-welcome-frame frame-03"> + + <div class="asdc-welcome-slide-text-box"> + <div class="asdc-welcome-slide-text-box-title"> + Enhance <br> + and extend + </div> + <div class="asdc-welcome-slide-text-box-content"> + <p> + Blend, build and arrange resources and services in the <br> designer workspace. + </p> + <p> + Let your creativity lead the way to any number of <br> network solutions. + </p> + <p> + Then simply click on elements to customize and refine <br> their specific properties to match your needs. + </p> + </div> + </div> + <div class="asdc-welcome-slide-image-box"> + <img src="styles/images/welcome/ss-02.png" alt="02" class="asdc-welcome-slide-image"> + </div> + <div class="asdc-welcome-frame-shape"></div> + <div class="asdc-welcome-frame-connection"></div> + </div> +</div> 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 @@ +<div class="slide" id="slide-4"> + <div class="asdc-welcome-frame frame-04"> + <div class="asdc-welcome-slide-text-box"> + <div class="asdc-welcome-slide-text-box-title"> + Share <br> + and Collaborate + </div> + <div class="asdc-welcome-slide-text-box-content"> + <p> + Graphically arranged, the Catalog is an easily <br> searchable collection of resources, services and + <br> products that provides you with a variety of <br> network elements. + </p> + <p> + Benefit from these assets by using them as <br> building blocks to form any number of network + <br> solutions. + </p> + <p> + After being certified for release, share and <br> collaborate with others as your solution is + <br> automatically included in the catalog. + </p> + </div> + </div> + <div class="asdc-welcome-slide-image-box"> + <img src="styles/images/welcome/ss-03.png" alt="03" class="asdc-welcome-slide-image"> + </div> + <div class="asdc-welcome-frame-shape"></div> + <div class="asdc-welcome-frame-connection"></div> + </div> +</div> 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 @@ +<div class="slide" id="slide-5"> + <div class="asdc-welcome-frame frame-05"> + <div class="asdc-welcome-slide-text-box"> + <div class="asdc-welcome-slide-text-box-title"> + Fast, efficient <br> + and reliable + </div> + <div class="asdc-welcome-slide-text-box-content"> + <p> + ASDC is a platform built around a simple error-free + <br>process for resource and service design and distribution. + <br> + <br>An integrated certification process makes ASDC a safe + <br>and reliable environment to experiment, review and test + <br>your work. + <br> + <br>Once approved your solution is ready to be used in + <br>the real-world. + </p> + + </div> + + </div> + <div class="asdc-welcome-frame-shape"></div> + + </div> +</div> 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 @@ +<div class="slide" id="slide-6"> + <div class="asdc-welcome-frame frame-06"> + + <div class="asdc-welcome-cover"></div> + <div class="asdc-welcome-main"> + + <div class="asdc-welcome-main-title">ASDC</div> + <div class="asdc-welcome-main-message"> + jump starting your network solutions. + </div> + <div class="asdc-welcome-main-back-btn-ph"> + <a class="asdc-welcome-main-back-btn" ui-sref="dashboard">Home</a> + </div> + </div> + + <div class="asdc-welcome-footer"> + © 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. + <br/> + 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. + + </div> + + </div> +</div> 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========================================================= + */ +/// <reference path="../../references"/> +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 @@ +<div class="sdc-welcome-new-page"> + + <!--<div id="sdc-welcome-video-wrapper"> + <div class="asdc-welcome-video-close sprite-welcome close" data-ng-click="onCloseVideoButton()"></div> + <video id="asdc-welcome-video" class="asdc-welcome-video"> + <source ng-src="{{video_mp4}}" type="video/mp4" /> + <source ng-src="{{video_ogg}}" type='video/ogg' /> + </video> + </div>--> + + <div class="os-welcome">Welcome to SDC</div> + + <!--<sdc-page-scroll id="sdc-page-scroller" + start-slide-index="1" + slides-data="slides" + show-nav="true" + show-close-button="true" + close-button-callback="onCloseButton"> + + </sdc-page-scroll> +--> +</div> 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); + }); + }; + + } +} |