@editvr/aframe-dialog-popup-component - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

dist/aframe-dialog-popup-component.js

@@ -194,4 +194,5 @@ /******/ (function(modules) { // webpackBootstrap
   init: function init() {
+    this.cameraEl = document.querySelector('[camera]');
     this.spawnEntities();
-    this.cameraEl = document.querySelector('[camera]');
+    this.el.emit('loaded');
   },
@@ -198,0 +199,0 @@

dist/aframe-dialog-popup-component.min.js

@@ -1,1 +0,1 @@
-(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.i=function(value){return value};__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{configurable:false,enumerable:true,get:getter})}};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=0)})([function(module,exports,__webpack_require__){"use strict";if(typeof AFRAME==="undefined"){throw new Error("Component attempted to register before AFRAME was available.")}AFRAME.registerComponent("dialog-popup",{schema:{title:{type:"string",default:"New Dialog"},titleColor:{type:"string",default:"black"},titleFont:{type:"string",default:"mozillavr"},titleWrapCount:{type:"number",default:24},body:{type:"string",default:"This dialog has no body yet."},bodyColor:{type:"string",default:"black"},bodyFont:{type:"string",default:"mozillavr"},bodyWrapCount:{type:"number",default:30},openOn:{type:"string",default:"click"},openIconImage:{type:"asset",default:""},openIconRadius:{type:"number",default:.3},openIconColor:{type:"string",default:"white"},closeIconImage:{type:"asset",default:""},closeIconRadius:{type:"number",default:.3},closeIconColor:{type:"string",default:"white"},image:{type:"string",default:""},imageWidth:{type:"number",default:2},imageHeight:{type:"number",default:2},dialogBoxWidth:{type:"number",default:4},dialogBoxHeight:{type:"number",default:4},dialogBoxColor:{type:"string",default:"white"},dialogBoxPadding:{type:"number",default:.2}},multiple:true,dialogPlaneEl:null,openIconEl:null,closeIconEl:null,titleEl:null,bodyEl:null,imageEl:null,hasImage:false,init:function init(){this.spawnEntities();this.cameraEl=document.querySelector("[camera]")},tick:function tick(){if(this.isOpen){this.positionDialogPlane()}},remove:function remove(){var openOn=this.data.openOn;this.openIconEl.removeEventListener(openOn,this.toggleDialogOpen.bind(this));this.closeIconEl.removeEventListener(openOn,this.toggleDialogOpen.bind(this))},update:function update(){this.generateTitle();this.generateBody();this.generateImage()},toggleDialogOpen:function toggleDialogOpen(){this.isOpen=!this.isOpen;if(this.dialogPlaneEl){this.positionDialogPlane();this.dialogPlaneEl.setAttribute("visible",this.isOpen)}},generateOpenIcon:function generateOpenIcon(){var _this$data=this.data,radius=_this$data.openIconRadius,color=_this$data.openIconColor,src=_this$data.openIconImage,openOn=_this$data.openOn;var openIcon=document.createElement("a-entity");openIcon.setAttribute("id","".concat(this.el.getAttribute("id"),"--open-icon"));openIcon.setAttribute("position",this.el.getAttribute("position"));openIcon.setAttribute("geometry",{primitive:"circle",radius:radius});openIcon.setAttribute("material",{color:color,src:src});var lookAt=this.el.getAttribute("look-at");if(lookAt){openIcon.setAttribute("look-at",lookAt)}openIcon.addEventListener(openOn,this.toggleDialogOpen.bind(this));this.openIconEl=openIcon;return openIcon},generateCloseIcon:function generateCloseIcon(){var _this$data2=this.data,radius=_this$data2.closeIconRadius,color=_this$data2.closeIconColor,src=_this$data2.closeIconImage,width=_this$data2.dialogBoxWidth,height=_this$data2.dialogBoxHeight,openOn=_this$data2.openOn;var closeIcon=document.createElement("a-entity");closeIcon.setAttribute("id","".concat(this.el.getAttribute("id"),"--close-icon"));closeIcon.setAttribute("position",{x:width/2,y:height/2,z:.01});closeIcon.setAttribute("geometry",{primitive:"circle",radius:radius});closeIcon.setAttribute("material",{color:color,src:src});closeIcon.addEventListener(openOn,this.toggleDialogOpen.bind(this));this.closeIconEl=closeIcon;return closeIcon},generateTitle:function generateTitle(){var _this$data3=this.data,value=_this$data3.title,color=_this$data3.titleColor,font=_this$data3.titleFont,wrapCount=_this$data3.titleWrapCount,width=_this$data3.dialogBoxWidth,height=_this$data3.dialogBoxHeight,padding=_this$data3.dialogBoxPadding,imageHeight=_this$data3.imageHeight;var title=this.titleEl||document.createElement("a-entity");title.setAttribute("id","".concat(this.el.getAttribute("id"),"--title"));title.setAttribute("text",{value:value.substring(0,wrapCount),color:color,font:font,wrapCount:wrapCount,width:width-padding*2,baseline:"top",anchor:"left"});var y=height/2-padding;if(this.hasImage){y-=imageHeight/2}title.setAttribute("position",{x:-(width/2)+padding,y:y,z:.01});this.titleEl=title;return title},generateBody:function generateBody(){var _this$data4=this.data,value=_this$data4.body,color=_this$data4.bodyColor,font=_this$data4.bodyFont,wrapCount=_this$data4.bodyWrapCount,width=_this$data4.dialogBoxWidth,height=_this$data4.dialogBoxHeight,padding=_this$data4.dialogBoxPadding,imageHeight=_this$data4.imageHeight;var body=this.bodyEl||document.createElement("a-entity");body.setAttribute("id","".concat(this.el.getAttribute("id"),"--title"));body.setAttribute("text",{value:value,color:color,font:font,wrapCount:wrapCount,width:width-padding*2,baseline:"top",anchor:"left"});var y=height/2-padding*3;if(this.hasImage){y-=imageHeight/2}body.setAttribute("position",{x:-(width/2)+padding,y:y,z:.01});this.bodyEl=body;return body},generateImage:function generateImage(){var _this$data5=this.data,src=_this$data5.image,width=_this$data5.imageWidth,height=_this$data5.imageHeight,dialogBoxHeight=_this$data5.dialogBoxHeight;if(!src.length){return null}var image=this.imageEl||document.createElement("a-image");image.setAttribute("id","".concat(this.el.getAttribute("id"),"--image"));image.setAttribute("src",src);image.setAttribute("width",width);image.setAttribute("height",height);image.setAttribute("position",{x:0,y:dialogBoxHeight/2,z:.01});this.hasImage=true;this.imageEl=image;return image},generateDialogPlane:function generateDialogPlane(){var _this$data6=this.data,width=_this$data6.dialogBoxWidth,height=_this$data6.dialogBoxHeight,padding=_this$data6.dialogBoxPadding,color=_this$data6.dialogBoxColor;var plane=this.dialogPlaneEl||document.createElement("a-entity");plane.setAttribute("id","".concat(this.el.getAttribute("id"),"--dialog-plane"));plane.setAttribute("visible",false);plane.setAttribute("geometry",{primitive:"plane",width:width+padding,height:height+padding});var image=this.generateImage();if(image){plane.appendChild(this.generateImage())}plane.setAttribute("material",{color:color});plane.appendChild(this.generateCloseIcon());plane.appendChild(this.generateTitle());plane.appendChild(this.generateBody());this.dialogPlaneEl=plane;return plane},positionDialogPlane:function positionDialogPlane(){if(this.dialogPlaneEl){var vector=this.dialogPlaneEl.object3D.parent.worldToLocal(this.cameraEl.object3D.getWorldPosition());this.dialogPlaneEl.object3D.lookAt(vector)}},spawnEntities:function spawnEntities(){this.el.appendChild(this.generateOpenIcon());this.el.appendChild(this.generateDialogPlane())}})}]);
+(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.i=function(value){return value};__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{configurable:false,enumerable:true,get:getter})}};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=0)})([function(module,exports,__webpack_require__){"use strict";if(typeof AFRAME==="undefined"){throw new Error("Component attempted to register before AFRAME was available.")}AFRAME.registerComponent("dialog-popup",{schema:{title:{type:"string",default:"New Dialog"},titleColor:{type:"string",default:"black"},titleFont:{type:"string",default:"mozillavr"},titleWrapCount:{type:"number",default:24},body:{type:"string",default:"This dialog has no body yet."},bodyColor:{type:"string",default:"black"},bodyFont:{type:"string",default:"mozillavr"},bodyWrapCount:{type:"number",default:30},openOn:{type:"string",default:"click"},openIconImage:{type:"asset",default:""},openIconRadius:{type:"number",default:.3},openIconColor:{type:"string",default:"white"},closeIconImage:{type:"asset",default:""},closeIconRadius:{type:"number",default:.3},closeIconColor:{type:"string",default:"white"},image:{type:"string",default:""},imageWidth:{type:"number",default:2},imageHeight:{type:"number",default:2},dialogBoxWidth:{type:"number",default:4},dialogBoxHeight:{type:"number",default:4},dialogBoxColor:{type:"string",default:"white"},dialogBoxPadding:{type:"number",default:.2}},multiple:true,dialogPlaneEl:null,openIconEl:null,closeIconEl:null,titleEl:null,bodyEl:null,imageEl:null,hasImage:false,init:function init(){this.cameraEl=document.querySelector("[camera]");this.spawnEntities();this.el.emit("loaded")},tick:function tick(){if(this.isOpen){this.positionDialogPlane()}},remove:function remove(){var openOn=this.data.openOn;this.openIconEl.removeEventListener(openOn,this.toggleDialogOpen.bind(this));this.closeIconEl.removeEventListener(openOn,this.toggleDialogOpen.bind(this))},update:function update(){this.generateTitle();this.generateBody();this.generateImage()},toggleDialogOpen:function toggleDialogOpen(){this.isOpen=!this.isOpen;if(this.dialogPlaneEl){this.positionDialogPlane();this.dialogPlaneEl.setAttribute("visible",this.isOpen)}},generateOpenIcon:function generateOpenIcon(){var _this$data=this.data,radius=_this$data.openIconRadius,color=_this$data.openIconColor,src=_this$data.openIconImage,openOn=_this$data.openOn;var openIcon=document.createElement("a-entity");openIcon.setAttribute("id","".concat(this.el.getAttribute("id"),"--open-icon"));openIcon.setAttribute("position",this.el.getAttribute("position"));openIcon.setAttribute("geometry",{primitive:"circle",radius:radius});openIcon.setAttribute("material",{color:color,src:src});var lookAt=this.el.getAttribute("look-at");if(lookAt){openIcon.setAttribute("look-at",lookAt)}openIcon.addEventListener(openOn,this.toggleDialogOpen.bind(this));this.openIconEl=openIcon;return openIcon},generateCloseIcon:function generateCloseIcon(){var _this$data2=this.data,radius=_this$data2.closeIconRadius,color=_this$data2.closeIconColor,src=_this$data2.closeIconImage,width=_this$data2.dialogBoxWidth,height=_this$data2.dialogBoxHeight,openOn=_this$data2.openOn;var closeIcon=document.createElement("a-entity");closeIcon.setAttribute("id","".concat(this.el.getAttribute("id"),"--close-icon"));closeIcon.setAttribute("position",{x:width/2,y:height/2,z:.01});closeIcon.setAttribute("geometry",{primitive:"circle",radius:radius});closeIcon.setAttribute("material",{color:color,src:src});closeIcon.addEventListener(openOn,this.toggleDialogOpen.bind(this));this.closeIconEl=closeIcon;return closeIcon},generateTitle:function generateTitle(){var _this$data3=this.data,value=_this$data3.title,color=_this$data3.titleColor,font=_this$data3.titleFont,wrapCount=_this$data3.titleWrapCount,width=_this$data3.dialogBoxWidth,height=_this$data3.dialogBoxHeight,padding=_this$data3.dialogBoxPadding,imageHeight=_this$data3.imageHeight;var title=this.titleEl||document.createElement("a-entity");title.setAttribute("id","".concat(this.el.getAttribute("id"),"--title"));title.setAttribute("text",{value:value.substring(0,wrapCount),color:color,font:font,wrapCount:wrapCount,width:width-padding*2,baseline:"top",anchor:"left"});var y=height/2-padding;if(this.hasImage){y-=imageHeight/2}title.setAttribute("position",{x:-(width/2)+padding,y:y,z:.01});this.titleEl=title;return title},generateBody:function generateBody(){var _this$data4=this.data,value=_this$data4.body,color=_this$data4.bodyColor,font=_this$data4.bodyFont,wrapCount=_this$data4.bodyWrapCount,width=_this$data4.dialogBoxWidth,height=_this$data4.dialogBoxHeight,padding=_this$data4.dialogBoxPadding,imageHeight=_this$data4.imageHeight;var body=this.bodyEl||document.createElement("a-entity");body.setAttribute("id","".concat(this.el.getAttribute("id"),"--title"));body.setAttribute("text",{value:value,color:color,font:font,wrapCount:wrapCount,width:width-padding*2,baseline:"top",anchor:"left"});var y=height/2-padding*3;if(this.hasImage){y-=imageHeight/2}body.setAttribute("position",{x:-(width/2)+padding,y:y,z:.01});this.bodyEl=body;return body},generateImage:function generateImage(){var _this$data5=this.data,src=_this$data5.image,width=_this$data5.imageWidth,height=_this$data5.imageHeight,dialogBoxHeight=_this$data5.dialogBoxHeight;if(!src.length){return null}var image=this.imageEl||document.createElement("a-image");image.setAttribute("id","".concat(this.el.getAttribute("id"),"--image"));image.setAttribute("src",src);image.setAttribute("width",width);image.setAttribute("height",height);image.setAttribute("position",{x:0,y:dialogBoxHeight/2,z:.01});this.hasImage=true;this.imageEl=image;return image},generateDialogPlane:function generateDialogPlane(){var _this$data6=this.data,width=_this$data6.dialogBoxWidth,height=_this$data6.dialogBoxHeight,padding=_this$data6.dialogBoxPadding,color=_this$data6.dialogBoxColor;var plane=this.dialogPlaneEl||document.createElement("a-entity");plane.setAttribute("id","".concat(this.el.getAttribute("id"),"--dialog-plane"));plane.setAttribute("visible",false);plane.setAttribute("geometry",{primitive:"plane",width:width+padding,height:height+padding});var image=this.generateImage();if(image){plane.appendChild(this.generateImage())}plane.setAttribute("material",{color:color});plane.appendChild(this.generateCloseIcon());plane.appendChild(this.generateTitle());plane.appendChild(this.generateBody());this.dialogPlaneEl=plane;return plane},positionDialogPlane:function positionDialogPlane(){if(this.dialogPlaneEl){var vector=this.dialogPlaneEl.object3D.parent.worldToLocal(this.cameraEl.object3D.getWorldPosition());this.dialogPlaneEl.object3D.lookAt(vector)}},spawnEntities:function spawnEntities(){this.el.appendChild(this.generateOpenIcon());this.el.appendChild(this.generateDialogPlane())}})}]);

index.js

@@ -120,4 +120,5 @@ /**
   init() {
+    this.cameraEl = document.querySelector('[camera]');
     this.spawnEntities();
-    this.cameraEl = document.querySelector('[camera]');
+    this.el.emit('loaded');
   },
@@ -124,0 +125,0 @@ /**

package.json

 {
   "name": "@editvr/aframe-dialog-popup-component",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Provides a component that constructs a toggle-able dialog with a title, description, image, and close button.",
@@ -5,0 +5,0 @@ "main": "dist/aframe-dialog-popup-component.js",

No alert changes

Improved metrics

Total package byte prevSize

1001207

increased by0.01%

Lines of code

986

increased by0.2%

No dependency changes