93 lines
2.8 KiB
JavaScript
93 lines
2.8 KiB
JavaScript
// Copyright 2016 Google Inc.
|
|
//
|
|
// 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.
|
|
|
|
/* global AFRAME */
|
|
|
|
import EnterVRButton from './enter-vr-button';
|
|
import State from './states';
|
|
|
|
if (typeof AFRAME !== 'undefined' && AFRAME) {
|
|
AFRAME.registerComponent('webvr-ui', {
|
|
dependencies: ['canvas'],
|
|
|
|
schema: {
|
|
enabled: {type: 'boolean', default: true},
|
|
color: {type: 'string', default: 'white'},
|
|
background: {type: 'string', default: 'black'},
|
|
corners: {type: 'string', default: 'square'},
|
|
disabledOpacity: {type: 'number', default: 0.5},
|
|
|
|
textEnterVRTitle: {type: 'string'},
|
|
textExitVRTitle: {type: 'string'},
|
|
textVRNotFoundTitle: {type: 'string'},
|
|
},
|
|
|
|
init: function() {
|
|
},
|
|
|
|
update: function() {
|
|
let scene = document.querySelector('a-scene');
|
|
scene.setAttribute('vr-mode-ui', {enabled: !this.data.enabled});
|
|
|
|
if (this.data.enabled) {
|
|
if (this.enterVREl) {
|
|
return;
|
|
}
|
|
|
|
let options = {
|
|
color: this.data.color,
|
|
background: this.data.background,
|
|
corners: this.data.corners,
|
|
disabledOpacity: this.data.disabledOpacity,
|
|
textEnterVRTitle: this.data.textEnterVRTitle,
|
|
textExitVRTitle: this.data.textExitVRTitle,
|
|
textVRNotFoundTitle: this.data.textVRNotFoundTitle,
|
|
onRequestStateChange: function(state) {
|
|
if (state == State.PRESENTING) {
|
|
scene.enterVR();
|
|
} else {
|
|
scene.exitVR();
|
|
}
|
|
return false;
|
|
},
|
|
};
|
|
|
|
let enterVR = this.enterVR = new EnterVRButton(scene.canvas, options);
|
|
|
|
this.enterVREl = enterVR.domElement;
|
|
|
|
document.body.appendChild(enterVR.domElement);
|
|
|
|
enterVR.domElement.style.position = 'absolute';
|
|
enterVR.domElement.style.bottom = '10px';
|
|
enterVR.domElement.style.left = '50%';
|
|
enterVR.domElement.style.transform = 'translate(-50%, -50%)';
|
|
enterVR.domElement.style.textAlign = 'center';
|
|
} else {
|
|
if (this.enterVREl) {
|
|
this.enterVREl.parentNode.removeChild(this.enterVREl);
|
|
this.enterVR.remove();
|
|
}
|
|
}
|
|
},
|
|
|
|
remove: function() {
|
|
if (this.enterVREl) {
|
|
this.enterVREl.parentNode.removeChild(this.enterVREl);
|
|
this.enterVR.remove();
|
|
}
|
|
},
|
|
});
|
|
}
|