From 25f3b1e110f13038e3837e911625a651a26edaef Mon Sep 17 00:00:00 2001 From: Pete Richards Date: Mon, 22 Feb 2016 16:39:20 -0800 Subject: [PATCH] [Frontend] Add splash screen manager Add a runtime extension that detects the splash screen and triggers a fade out after the application has loaded. Once the fade out has ended, it removes the element from the page. Related to https://github.com/nasa/openmctweb/issues/164 --- platform/commonUI/general/bundle.js | 8 ++ .../general/src/SplashScreenManager.js | 46 ++++++++++ .../general/test/SplashScreenManagerSpec.js | 91 +++++++++++++++++++ 3 files changed, 145 insertions(+) create mode 100644 platform/commonUI/general/src/SplashScreenManager.js create mode 100644 platform/commonUI/general/test/SplashScreenManagerSpec.js diff --git a/platform/commonUI/general/bundle.js b/platform/commonUI/general/bundle.js index aeb05762b1..3d98a22143 100644 --- a/platform/commonUI/general/bundle.js +++ b/platform/commonUI/general/bundle.js @@ -24,6 +24,7 @@ define([ "./src/services/UrlService", "./src/services/PopupService", + "./src/SplashScreenManager", "./src/StyleSheetLoader", "./src/UnsupportedBrowserWarning", "./src/controllers/TimeRangeController", @@ -52,6 +53,7 @@ define([ ], function ( UrlService, PopupService, + SplashScreenManager, StyleSheetLoader, UnsupportedBrowserWarning, TimeRangeController, @@ -117,6 +119,12 @@ define([ "notificationService", "agentService" ] + }, + { + "implementation": SplashScreenManager, + "depends": [ + "$document" + ] } ], "filters": [ diff --git a/platform/commonUI/general/src/SplashScreenManager.js b/platform/commonUI/general/src/SplashScreenManager.js new file mode 100644 index 0000000000..e9666f4f6d --- /dev/null +++ b/platform/commonUI/general/src/SplashScreenManager.js @@ -0,0 +1,46 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is 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. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +/*global define*/ + +define([ + +], function ( + +) { + 'use strict'; + + function SplashScreenManager($document) { + var splash; + $document = $document[0]; + splash = $document.querySelectorAll('.s-logo-holder')[0]; + if (!splash) { + return; + } + splash.className += ' fadeout'; + splash.addEventListener('transitionend', function () { + splash.parentNode.removeChild(splash); + }); + } + + return SplashScreenManager; +}); diff --git a/platform/commonUI/general/test/SplashScreenManagerSpec.js b/platform/commonUI/general/test/SplashScreenManagerSpec.js new file mode 100644 index 0000000000..b1d340fe58 --- /dev/null +++ b/platform/commonUI/general/test/SplashScreenManagerSpec.js @@ -0,0 +1,91 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is 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. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,describe,beforeEach,jasmine,it,expect*/ + +define([ + '../src/SplashScreenManager' +], function (SplashScreenManager) { + 'use strict'; + + describe('SplashScreenManager', function () { + var $document, + splashElement; + + beforeEach(function () { + $document = jasmine.createSpyObj( + '$document', + ['querySelectorAll'] + ); + + splashElement = jasmine.createSpyObj( + 'splashElement', + ['addEventListener'] + ); + + splashElement.parentNode = jasmine.createSpyObj( + 'splashParent', + ['removeChild'] + ); + + splashElement.className = 'some-class-name'; + + $document.querySelectorAll.andReturn([splashElement]); + }); + + describe('when element exists', function () { + beforeEach(function () { + $document.querySelectorAll.andReturn([splashElement]); + new SplashScreenManager([$document]); + }); + + it('adds fade out class', function () { + expect(splashElement.className).toBe('some-class-name fadeout'); + }); + + it('removes the element when the transition ends', function () { + expect(splashElement.addEventListener) + .toHaveBeenCalledWith( + 'transitionend', + jasmine.any(Function) + ); + expect(splashElement.parentNode.removeChild) + .not + .toHaveBeenCalled(); + + splashElement.addEventListener.mostRecentCall.args[1](); + expect(splashElement.parentNode.removeChild) + .toHaveBeenCalledWith(splashElement); + }); + }); + + it('does not error when element doesn\'t exist', function () { + $document.querySelectorAll.andReturn([]); + + function run() { + new SplashScreenManager([$document]); + } + + expect(run).not.toThrow(); + }); + }); +}); +