mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 17:57:04 +00:00
[Mobile] Add classes to body
Add classes describing device characteristics to the body of the current document at start-up. Refactor device matchers out of the mct-device directive for reuse and consistency here. https://github.com/nasa/openmctweb/issues/169
This commit is contained in:
parent
9c4c020f54
commit
d397f0f283
58
platform/commonUI/mobile/src/DeviceClassifier.js
Normal file
58
platform/commonUI/mobile/src/DeviceClassifier.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
* 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,Promise*/
|
||||||
|
|
||||||
|
define(
|
||||||
|
['./DeviceMatchers'],
|
||||||
|
function (DeviceMatchers) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Runs at application startup and adds a subset of the following
|
||||||
|
* CSS classes to the body of the document, depending on device
|
||||||
|
* attributes:
|
||||||
|
*
|
||||||
|
* * `mobile`: Phones or tablets.
|
||||||
|
* * `phone`: Phones specifically.
|
||||||
|
* * `tablet`: Tablets specifically.
|
||||||
|
* * `desktop`: Non-mobile devices.
|
||||||
|
* * `portrait`: Devices in a portrait-style orientation.
|
||||||
|
* * `landscape`: Devices in a landscape-style orientation.
|
||||||
|
*
|
||||||
|
* @param {platform/commonUI/mobile.AgentService} agentService
|
||||||
|
* the service used to examine the user agent
|
||||||
|
* @param $document Angular's jqLite-wrapped document element
|
||||||
|
* @constructor
|
||||||
|
*/
|
||||||
|
function MobileClassifier(agentService, $document) {
|
||||||
|
var body = $document.find('body');
|
||||||
|
Object.keys(DeviceMatchers).forEach(function (key) {
|
||||||
|
if (DeviceMatchers[key](agentService)) {
|
||||||
|
body.addClass(key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return MobileClassifier;
|
||||||
|
|
||||||
|
}
|
||||||
|
);
|
57
platform/commonUI/mobile/src/DeviceMatchers.js
Normal file
57
platform/commonUI/mobile/src/DeviceMatchers.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
* 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";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An object containing key-value pairs, where keys are symbolic of
|
||||||
|
* device attributes, and values are functions that take the
|
||||||
|
* `agentService` as inputs and return boolean values indicating
|
||||||
|
* whether or not the current device has these attributes.
|
||||||
|
*
|
||||||
|
* For internal use by the mobile support bundle.
|
||||||
|
*
|
||||||
|
* @memberof platform/commonUI/mobile
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
return {
|
||||||
|
mobile: function (agentService) {
|
||||||
|
return agentService.isMobile();
|
||||||
|
},
|
||||||
|
phone: function (agentService) {
|
||||||
|
return agentService.isPhone();
|
||||||
|
},
|
||||||
|
tablet: function (agentService) {
|
||||||
|
return agentService.isTablet();
|
||||||
|
},
|
||||||
|
desktop: function (agentService) {
|
||||||
|
return !agentService.isMobile();
|
||||||
|
},
|
||||||
|
portrait: function (agentService) {
|
||||||
|
return agentService.isPortrait();
|
||||||
|
},
|
||||||
|
landscape: function (agentService) {
|
||||||
|
return agentService.isLandscape();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
@ -22,31 +22,10 @@
|
|||||||
/*global define,Promise*/
|
/*global define,Promise*/
|
||||||
|
|
||||||
define(
|
define(
|
||||||
function () {
|
['./DeviceMatchers'],
|
||||||
|
function (DeviceMatchers) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var DEVICE_MATCHERS = {
|
|
||||||
mobile: function (agentService) {
|
|
||||||
return agentService.isMobile();
|
|
||||||
},
|
|
||||||
phone: function (agentService) {
|
|
||||||
return agentService.isPhone();
|
|
||||||
},
|
|
||||||
tablet: function (agentService) {
|
|
||||||
return agentService.isTablet();
|
|
||||||
},
|
|
||||||
desktop: function (agentService) {
|
|
||||||
return !agentService.isMobile();
|
|
||||||
},
|
|
||||||
portrait: function (agentService) {
|
|
||||||
return agentService.isPortrait();
|
|
||||||
},
|
|
||||||
landscape: function (agentService) {
|
|
||||||
return agentService.isLandscape();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The `mct-device` directive, when applied as an attribute,
|
* The `mct-device` directive, when applied as an attribute,
|
||||||
* only includes the element when the device being used matches
|
* only includes the element when the device being used matches
|
||||||
@ -77,7 +56,7 @@ define(
|
|||||||
function deviceMatches(tokens) {
|
function deviceMatches(tokens) {
|
||||||
tokens = tokens || "";
|
tokens = tokens || "";
|
||||||
return tokens.split(" ").every(function (token) {
|
return tokens.split(" ").every(function (token) {
|
||||||
var fn = DEVICE_MATCHERS[token];
|
var fn = DeviceMatchers[token];
|
||||||
return fn && fn(agentService);
|
return fn && fn(agentService);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user