9:30 – 5:00 SR

• For a break, I’m going to build a directive that pops up in response to a NovettaUtils.ATSMessenger event. Also going to look into using flex containers for the WebGl
• Took a much-needed detour into handling resize events so more advanced CSS can be supported. . It works like this:
  • First, set up the callback. Not that it is attached to the window, not an element in the scope.

    window.addEventListener('resize', this.handleResizeEvent, false);

  • Then we have the event handler

    private handleResizeEvent(ev:Event):void{
        console.log(ev.type);
        var parent = this.getTopNode();
        if(parent){
            this.setAdjWidth(parent.clientWidth);
            this.setAdjHeight(parent.clientHeight);
            this.renderer.setSize(this.adjWidth, this.adjHeight);
            if(this.getUse3D()) {
                var pcam:THREE.PerspectiveCamera = <THREE.PerspectiveCamera>(this.camera);
                pcam.aspect = this.getAdjWidth() / this.getAdjHeight();
                pcam.updateProjectionMatrix();
            }else{
                var ocam:THREE.OrthographicCamera = <THREE.OrthographicCamera>(this.camera);
                ocam.right = this.getAdjWidth();
                ocam.top = this.getAdjHeight();
                ocam.updateProjectionMatrix();
            }
        }
    }

  • How to center a absolute div
  • Ok, got the basics of the pop-up directive working in a dynamic viewport!