Как добавить кнопку закрытия к этому JavaScript в рамке - PullRequest
Новая
       5

Как добавить кнопку закрытия к этому JavaScript в рамке

0 голосов
/ 23 апреля 2019

По сути, у меня есть модальное окно в рамке, к которому я пытаюсь добавить кнопку закрытия через javascript, но я не смог понять это.

Ссылка на проект ниже:

https://andrewmc1994.github.io/Image-Link-Test/

Если вы выделите значок компаса, вы поймете, что я имею в виду.

Это для университетского проекта, я рассмотрел различные методы онлайн, но ни один из нихпохоже, работает, поэтому я и пришел сюда. 

        <a-entity ui-modal="triggerElement:#selection;" visible="false">

         <a-image src="#submenu" scale="3.5 3.5 0" position="0 -0.25 2" src-fit></a-image>

            <a-image position="-1 -0.25 2.1" class="clickable" src="#tqicon" scale="0.7 0.7 0" link="href:location1.html; on: click; visualAspectEnabled: false" src-fit></a-image>

             <a-image position="0 -0.25 2.1" class="clickable" src="#acicon" scale="0.7 0.7 0" link="href:location3.html; on: click; visualAspectEnabled: false" src-fit></a-image>

             <a-image position="1 -0.25 2.1" class="clickable" src="#bchicon" scale="0.7 0.7 0" link="href:location2.html; on: click; visualAspectEnabled: false" src-fit></a-image>

            <a-image position="1.4 0 2.1" class="clickable" src="#close" scale="0.1 0.1 0" id="close" src-fit></a-image>

        </a-entity>


/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    /**
     * UI modal component for A-Frame.
     */

    if (typeof AFRAME === 'undefined') {
      throw new Error('Component attempted to register before AFRAME was available.');
    }

    AFRAME.registerComponent('ui-modal', {

        schema: {
            trigger: {
                default: 'click'
            },
            triggerElement: {
              default: '',
            },
            zpos: {
                default: -4
            }
        },

        init: function() { 

            document.querySelector(this.data.triggerElement).addEventListener(this.data.trigger, this.eventHandler.bind(this));

            this.cameraEl = document.querySelector('a-entity[camera]');

            this.yaxis = new THREE.Vector3(0, 0, 0);
            this.zaxis = new THREE.Vector3(0, 0, 0);

            this.pivot = new THREE.Object3D();
            this.el.object3D.position.set(0, this.cameraEl.object3D.getWorldPosition().y, this.data.zpos);

            this.el.sceneEl.object3D.add(this.pivot);
            this.pivot.add(this.el.object3D);

        },


        eventHandler: function(evt) {

            if (this.el.getAttribute('visible') === false) {

                var direction = this.zaxis.clone();
                direction.applyQuaternion(this.cameraEl.object3D.quaternion);
                var ycomponent = this.yaxis.clone().multiplyScalar(direction.dot(this.yaxis));
                direction.sub(ycomponent);
                direction.normalize();

                this.pivot.quaternion.setFromUnitVectors(this.zaxis, direction);
                this.pivot.position.copy(this.cameraEl.object3D.getWorldPosition());

                this.el.setAttribute('visible', true);

            } else if (this.el.getAttribute('visible') === true) {

                this.el.setAttribute('visible', false);
            }

        },

        update: function (oldData) {},

        remove: function() {}

    });




/***/ }
/******/ ]);

Таким образом, ожидаемый результат для пользователя - открыть модальное окно и затем иметь возможность закрыть его с помощью простой кнопки.

Любая помощь очень ценится.

Ответы [ 2 ]

1 голос
/ 24 апреля 2019

Вам просто нужно добавить любую функциональность к существующей кнопке закрытия.Ваш eventHandler уже содержит логику для отображения / скрытия пользовательского интерфейса, поэтому просто добавьте слушателя к кнопке закрытия: 

let closeBtn = document.getElementById("close") one close button
closeBtn.addEventListener(this.data.trigger, this.eventHandler.bind(this))

При нажатии - он будет скрывать пользовательский интерфейс.

Однако,есть больше элементов с компонентом ui-modal, и их eventHandler вызывает часть setAttribute("visible", "").

Самый простой способ справиться с этим - 

closeBtn.addEventListener(this.data.trigger, e => {
  this.el.setAttribute("visible", "false")
})

, позволяющий закрытьсякнопка скрыть элемент, здесь ничего больше не нужно делать.

Что касается проблем Акселя, вам не нужно много сравнивать.Вы можете рассматривать их как логические значения:

Это действительно: 

if (this.el.getAttribute("visible") {
  // hide
} else {
  // show
}

, а также: 

// toggle visibility
this.el.setAttribute("visible", !this.el.getAttribute("visible")

Вы можете проверить это в this скрипка.

0 голосов
/ 24 апреля 2019

Очень трудно отладить вашу проблему, но есть одна вещь, которая мне кажется "неправильной"!

Ваш обработчик событий проверяет this.el.getAttribute('visible') против true и false как логические значения, но getAttribute всегда будет возвращать строку (которая будет 'true' и 'false' в данном конкретном случае) или null, если атрибут не существует.

Таким образом, вы должны проверить, как это в eventHandler часть: 

if ( this.el.getAttribute('visible') === 'false' ) { // validate against 'false' instead of false
    /* ... */
    this.el.setAttribute('visible', 'true'); // set to 'true' instead of true
} else if ( this.el.getAttribute('visible') === 'true' ) { // validate against 'true' instead of true
    /* ... */
    this.el.setAttribute('visible', 'false'); // set to 'false' instead of false
}

Но после дальнейшей проверки я заметил, что на самом деле A-Frame (работа), похоже, не устанавливает элементы attributeValue attributeName visible в "true"|"false".
Вместо этого, если элемент видим, его значение равно visible="", а если его невидимо, его значение равно visible="false". Так что, только если это правда, вы должны делать это так: 

if ( this.el.getAttribute('visible') === 'false' ) { // validate against 'false' instead of false
    /* ... */
    this.el.setAttribute('visible', ''); // set to '' instead of true
} else if ( this.el.getAttribute('visible') === '' ) { // validate against '' instead of false
    /* ... */
    this.el.setAttribute('visible', 'false'); // set to 'false' instead of false
}
...