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

Comparing version 1.4.0 to 1.5.0

dist/aframe-dialog-popup-component.js

@@ -175,3 +175,3 @@ /******/ (function(modules) { // webpackBootstrap
     },
-    dialogBoxPaddingInDegrees: {
+    dialogBoxPadding: {
       type: 'number',
@@ -183,2 +183,4 @@ default: 0.2
   dialogPlane: null,
+  openIcon: null,
+  closeIcon: null,
   hasImage: false,
@@ -201,2 +203,13 @@ /**
   /**
+   * When this component is removed, destruct event listeners.
+   */
+  remove() {
+    const { openOn } = this.data;
+    this.openIcon.removeEventListener(openOn, this.toggleDialogOpen.bind(this));
+    this.closeIcon.removeEventListener(
+      openOn,
+      this.toggleDialogOpen.bind(this)
+    );
+  },
+  /**
    * Handles opening and closing the dialog plane.
@@ -234,3 +247,12 @@ */
 
+    // If the parent entity has aa look-at component attached, apply the look-at
+    // component to the openIcon.
+    const lookAt = this.el.getAttribute('look-at');
+    if (lookAt) {
+      openIcon.setAttribute('look-at', lookAt);
+    }
+
     openIcon.addEventListener(openOn, this.toggleDialogOpen.bind(this));
+
+    this.openIcon = openIcon;
     return openIcon;
@@ -268,2 +290,4 @@ },
     closeIcon.addEventListener(openOn, this.toggleDialogOpen.bind(this));
+
+    this.closeIcon = closeIcon;
     return closeIcon;
@@ -282,3 +306,3 @@ },
       dialogBoxHeight: height,
-      dialogBoxPaddingInDegrees: padding,
+      dialogBoxPadding: padding,
       imageHeight
@@ -323,3 +347,3 @@ } = this.data;
       dialogBoxHeight: height,
-      dialogBoxPaddingInDegrees: padding,
+      dialogBoxPadding: padding,
       imageHeight
@@ -389,3 +413,3 @@ } = this.data;
       dialogBoxHeight: height,
-      dialogBoxPaddingInDegrees: padding,
+      dialogBoxPadding: padding,
       dialogBoxColor: color
@@ -427,7 +451,4 @@ } = this.data;
   spawnEntities() {
-    const wrapper = document.createElement('a-entity');
-    wrapper.setAttribute('id', `${this.el.getAttribute('id')}--wrapper`);
-    wrapper.appendChild(this.generateOpenIcon());
-    wrapper.appendChild(this.generateDialogPlane());
-    this.el.appendChild(wrapper);
+    this.el.appendChild(this.generateOpenIcon());
+    this.el.appendChild(this.generateDialogPlane());
   }
@@ -434,0 +455,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){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"},dialogBoxPaddingInDegrees:{type:"number",default:.2}},multiple:true,dialogPlane:null,hasImage:false,init(){this.spawnEntities();this.cameraEl=document.querySelector("[camera]")},tick(){if(this.isOpen){this.positionDialogPlane()}},toggleDialogOpen(){this.isOpen=!this.isOpen;if(this.dialogPlane){this.positionDialogPlane();this.dialogPlane.setAttribute("visible",this.isOpen)}},generateOpenIcon(){const{openIconRadius:radius,openIconColor:color,openIconImage:src,openOn:openOn}=this.data;const openIcon=document.createElement("a-entity");openIcon.setAttribute("id",`${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});openIcon.addEventListener(openOn,this.toggleDialogOpen.bind(this));return openIcon},generateCloseIcon(){const{closeIconRadius:radius,closeIconColor:color,closeIconImage:src,dialogBoxWidth:width,dialogBoxHeight:height,openOn:openOn}=this.data;const closeIcon=document.createElement("a-entity");closeIcon.setAttribute("id",`${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));return closeIcon},generateTitle(){const{title:value,titleColor:color,titleFont:font,titleWrapCount:wrapCount,dialogBoxWidth:width,dialogBoxHeight:height,dialogBoxPaddingInDegrees:padding,imageHeight:imageHeight}=this.data;const title=document.createElement("a-entity");title.setAttribute("id",`${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"});let y=height/2-padding;if(this.hasImage){y-=imageHeight/2}title.setAttribute("position",{x:-(width/2)+padding,y:y,z:.01});return title},generateBody(){const{body:value,bodyColor:color,bodyFont:font,bodyWrapCount:wrapCount,dialogBoxWidth:width,dialogBoxHeight:height,dialogBoxPaddingInDegrees:padding,imageHeight:imageHeight}=this.data;const body=document.createElement("a-entity");body.setAttribute("id",`${this.el.getAttribute("id")}--title`);body.setAttribute("text",{value:value,color:color,font:font,wrapCount:wrapCount,width:width-padding*2,baseline:"top",anchor:"left"});let y=height/2-padding*3;if(this.hasImage){y-=imageHeight/2}body.setAttribute("position",{x:-(width/2)+padding,y:y,z:.01});return body},generateImage(){const{image:src,imageWidth:width,imageHeight:height,dialogBoxHeight:dialogBoxHeight}=this.data;if(!src.length){return null}const image=document.createElement("a-image");image.setAttribute("id",`${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;return image},generateDialogPlane(){const{dialogBoxWidth:width,dialogBoxHeight:height,dialogBoxPaddingInDegrees:padding,dialogBoxColor:color}=this.data;const plane=document.createElement("a-entity");plane.setAttribute("id",`${this.el.getAttribute("id")}--dialog-plane`);plane.setAttribute("visible",false);plane.setAttribute("geometry",{primitive:"plane",width:width+padding,height:height+padding});const 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.dialogPlane=plane;return plane},positionDialogPlane(){if(this.dialogPlane){const vector=this.dialogPlane.object3D.parent.worldToLocal(this.cameraEl.object3D.getWorldPosition());this.dialogPlane.object3D.lookAt(vector)}},spawnEntities(){const wrapper=document.createElement("a-entity");wrapper.setAttribute("id",`${this.el.getAttribute("id")}--wrapper`);wrapper.appendChild(this.generateOpenIcon());wrapper.appendChild(this.generateDialogPlane());this.el.appendChild(wrapper)}})}]);
+(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){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,dialogPlane:null,openIcon:null,closeIcon:null,hasImage:false,init(){this.spawnEntities();this.cameraEl=document.querySelector("[camera]")},tick(){if(this.isOpen){this.positionDialogPlane()}},remove(){const{openOn:openOn}=this.data;this.openIcon.removeEventListener(openOn,this.toggleDialogOpen.bind(this));this.closeIcon.removeEventListener(openOn,this.toggleDialogOpen.bind(this))},toggleDialogOpen(){this.isOpen=!this.isOpen;if(this.dialogPlane){this.positionDialogPlane();this.dialogPlane.setAttribute("visible",this.isOpen)}},generateOpenIcon(){const{openIconRadius:radius,openIconColor:color,openIconImage:src,openOn:openOn}=this.data;const openIcon=document.createElement("a-entity");openIcon.setAttribute("id",`${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});const lookAt=this.el.getAttribute("look-at");if(lookAt){openIcon.setAttribute("look-at",lookAt)}openIcon.addEventListener(openOn,this.toggleDialogOpen.bind(this));this.openIcon=openIcon;return openIcon},generateCloseIcon(){const{closeIconRadius:radius,closeIconColor:color,closeIconImage:src,dialogBoxWidth:width,dialogBoxHeight:height,openOn:openOn}=this.data;const closeIcon=document.createElement("a-entity");closeIcon.setAttribute("id",`${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.closeIcon=closeIcon;return closeIcon},generateTitle(){const{title:value,titleColor:color,titleFont:font,titleWrapCount:wrapCount,dialogBoxWidth:width,dialogBoxHeight:height,dialogBoxPadding:padding,imageHeight:imageHeight}=this.data;const title=document.createElement("a-entity");title.setAttribute("id",`${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"});let y=height/2-padding;if(this.hasImage){y-=imageHeight/2}title.setAttribute("position",{x:-(width/2)+padding,y:y,z:.01});return title},generateBody(){const{body:value,bodyColor:color,bodyFont:font,bodyWrapCount:wrapCount,dialogBoxWidth:width,dialogBoxHeight:height,dialogBoxPadding:padding,imageHeight:imageHeight}=this.data;const body=document.createElement("a-entity");body.setAttribute("id",`${this.el.getAttribute("id")}--title`);body.setAttribute("text",{value:value,color:color,font:font,wrapCount:wrapCount,width:width-padding*2,baseline:"top",anchor:"left"});let y=height/2-padding*3;if(this.hasImage){y-=imageHeight/2}body.setAttribute("position",{x:-(width/2)+padding,y:y,z:.01});return body},generateImage(){const{image:src,imageWidth:width,imageHeight:height,dialogBoxHeight:dialogBoxHeight}=this.data;if(!src.length){return null}const image=document.createElement("a-image");image.setAttribute("id",`${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;return image},generateDialogPlane(){const{dialogBoxWidth:width,dialogBoxHeight:height,dialogBoxPadding:padding,dialogBoxColor:color}=this.data;const plane=document.createElement("a-entity");plane.setAttribute("id",`${this.el.getAttribute("id")}--dialog-plane`);plane.setAttribute("visible",false);plane.setAttribute("geometry",{primitive:"plane",width:width+padding,height:height+padding});const 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.dialogPlane=plane;return plane},positionDialogPlane(){if(this.dialogPlane){const vector=this.dialogPlane.object3D.parent.worldToLocal(this.cameraEl.object3D.getWorldPosition());this.dialogPlane.object3D.lookAt(vector)}},spawnEntities(){this.el.appendChild(this.generateOpenIcon());this.el.appendChild(this.generateDialogPlane())}})}]);

index.js

@@ -103,3 +103,3 @@ /**
     },
-    dialogBoxPaddingInDegrees: {
+    dialogBoxPadding: {
       type: 'number',
@@ -111,2 +111,4 @@ default: 0.2
   dialogPlane: null,
+  openIcon: null,
+  closeIcon: null,
   hasImage: false,
@@ -129,2 +131,13 @@ /**
   /**
+   * When this component is removed, destruct event listeners.
+   */
+  remove() {
+    const { openOn } = this.data;
+    this.openIcon.removeEventListener(openOn, this.toggleDialogOpen.bind(this));
+    this.closeIcon.removeEventListener(
+      openOn,
+      this.toggleDialogOpen.bind(this)
+    );
+  },
+  /**
    * Handles opening and closing the dialog plane.
@@ -162,3 +175,12 @@ */
 
+    // If the parent entity has aa look-at component attached, apply the look-at
+    // component to the openIcon.
+    const lookAt = this.el.getAttribute('look-at');
+    if (lookAt) {
+      openIcon.setAttribute('look-at', lookAt);
+    }
+
     openIcon.addEventListener(openOn, this.toggleDialogOpen.bind(this));
+
+    this.openIcon = openIcon;
     return openIcon;
@@ -196,2 +218,4 @@ },
     closeIcon.addEventListener(openOn, this.toggleDialogOpen.bind(this));
+
+    this.closeIcon = closeIcon;
     return closeIcon;
@@ -210,3 +234,3 @@ },
       dialogBoxHeight: height,
-      dialogBoxPaddingInDegrees: padding,
+      dialogBoxPadding: padding,
       imageHeight
@@ -251,3 +275,3 @@ } = this.data;
       dialogBoxHeight: height,
-      dialogBoxPaddingInDegrees: padding,
+      dialogBoxPadding: padding,
       imageHeight
@@ -317,3 +341,3 @@ } = this.data;
       dialogBoxHeight: height,
-      dialogBoxPaddingInDegrees: padding,
+      dialogBoxPadding: padding,
       dialogBoxColor: color
@@ -355,8 +379,5 @@ } = this.data;
   spawnEntities() {
-    const wrapper = document.createElement('a-entity');
-    wrapper.setAttribute('id', `${this.el.getAttribute('id')}--wrapper`);
-    wrapper.appendChild(this.generateOpenIcon());
-    wrapper.appendChild(this.generateDialogPlane());
-    this.el.appendChild(wrapper);
+    this.el.appendChild(this.generateOpenIcon());
+    this.el.appendChild(this.generateDialogPlane());
   }
 });

package.json

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

README.md

@@ -7,3 +7,3 @@ ## aframe-dialog-popup-component
 
-Provides a component that constructs a toggle-able dialog with a title, description, image, and 
+Provides a component that constructs a toggle-able dialog with a title, description, image, and close button.
 
@@ -16,4 +16,24 @@ For [A-Frame](https://aframe.io).
 | ---------------------- | --------------------------- | ----------------------------- |
-| titleColor             | Text color of title.        | white                         |
+| title                  | String containing title.    | New Dialog                    |
+| titleColor             | Text color of title.        | black                         |
 | titleFont              | Title font.                 | mozillavr                     |
+| titleWrapCount         | Title entity wrap count.    | 24                            |
+| body                   | String containing body .    | This dialog has no body yet.  |
+| bodyColor              | Text color of body.         | black                         |
+| bodyFont               | Body  font.                 | mozillavr                     |
+| bodyWrapCount          | Body entity wrap count.     | 30                            |
+| openOn                 | Open/Close event.           | click                         |
+| openIconImage          | Icon image for open button. | None                          |
+| openIconRadius         | Radius for open icon.       | 0.3                           |
+| openIconColor          | Color for open icon.        | white                         |
+| closeIconImage         | Icon image for open button. | None                          |
+| closeIconRadius        | Radius for close icon.      | 0.3                           |
+| closeIconColor         | Color for close icon.       | white                         |
+| image                  | Path to Dialog hero image.  | None                          |
+| imageWidth             | Dialog hero image width.    | 2                             |
+| imageHeight            | Dialog hero image height.   | 2                             |
+| dialogBoxWidth         | Dialog box width.           | 4                             |
+| dialogBoxHeight        | Dialog box height.          | 4                             |
+| dialogBoxColor         | Dialog box background color.| white                         |
+| dialogBoxPadding       | Dialog box padding.         | 0.2                           |
 
@@ -30,3 +50,3 @@ ### Installation
   <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
-  <script src="https://unpkg.com/@editvr/aframe-dialog-popup-component@1.0.3/dist/aframe-dialog-popup-component.min.js"></script>
+  <script src="https://unpkg.com/@editvr/aframe-dialog-popup-component@1.4.0/dist/aframe-dialog-popup-component.min.js"></script>
 </head>
@@ -36,3 +56,3 @@
   <a-scene>
-    <a-entity dialog-popup="foo: bar"></a-entity>
+    <a-entity dialog-popup="title: My Title; body: My Body"></a-entity>
   </a-scene>
@@ -56,1 +76,8 @@ </body>
 ```
+
+## Example
+### Closed
+![Closed](https://github.com/EditVR/aframe-dialog-popup-component/raw/develop/examples/assets/closed.png)
+### Opened
+![Open](https://github.com/EditVR/aframe-dialog-popup-component/raw/develop/examples/assets/open.png)
+

No alert changes

Improved metrics

Total package byte prevSize

966936

increased by64.35%

Number of package files

27

increased by8%

Lines of code

943

increased by4.08%

Number of lines in readme file

79

increased by51.92%

No dependency changes