aframe-href-component - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/aframe-href-component.js

@@ -59,2 +59,24 @@ /******/ (function(modules) { // webpackBootstrap
 
+	  boundClickHandler: undefined,
+
+	  clickHandler: function href_clickHandler(url) {
+	    var url = this.data;
+	    console.log('link to ' + url);
+	    if (url && url[0] === '#') { // in-page anchor
+	      var ele = document.querySelector(url);
+	      var cams = document.querySelectorAll('a-camera')
+	      if (ele && cams) {
+	        var targetPosition = ele.getAttribute('position');
+	        console.log('focus camera to position:' +
+	          JSON.stringify(targetPosition));
+	        cams[0].setAttribute('position', targetPosition);
+	        window.location.hash = url;
+	      } else {
+	        console.log('#id or a-camera is not defined');
+	      }
+	    } else { // normal hyper link
+	      window.location.href = url;
+	    }
+	  },
+
 	  /**
@@ -64,21 +86,13 @@ * Called once when component is attached. Generally for initial setup.
 	  init: function() {
-	    var url = this.data;
-	    this.el.addEventListener('click', function() {
-	      console.log('link to ' + url);
-	      if (url && url[0] === '#') { // in-page anchor
-	        var ele = document.querySelector(url);
-	        var cams = document.querySelectorAll('a-camera')
-	        if (ele && cams) {
-	          var targetPosition = ele.getAttribute('position');
-	          console.log('focus camera to position:' +
-	            JSON.stringify(targetPosition));
-	          cams[0].setAttribute('position', targetPosition);
-	          window.location.hash = url;
-	        } else {
-	          console.log('#id or a-camera is not defined');
-	        }
-	      } else { // normal hyper link
-	        window.location.href = url;
-	      }
-	    });
+	    // var url = this.data;
+	    this.boundClickHandler = this.clickHandler.bind(this);
+	    this.el.addEventListener('click', this.boundClickHandler);
+	  },
+
+	  /**
+	   * Called when a component is removed (e.g., via removeAttribute).
+	   * Generally undoes all modifications to the entity.
+	   */
+	  remove: function () {
+	    this.el.removeEventListener('click', this.boundClickHandler);
 	  }
@@ -85,0 +99,0 @@ });

dist/aframe-href-component.min.js

@@ -1,1 +0,1 @@
-!function(e){function o(n){if(t[n])return t[n].exports;var r=t[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,o),r.loaded=!0,r.exports}var t={};return o.m=e,o.c=t,o.p="",o(0)}([function(e,o){if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("href",{schema:{"default":""},init:function(){var e=this.data;this.el.addEventListener("click",function(){if(console.log("link to "+e),e&&"#"===e[0]){var o=document.querySelector(e),t=document.querySelectorAll("a-camera");if(o&&t){var n=o.getAttribute("position");console.log("focus camera to position:"+JSON.stringify(n)),t[0].setAttribute("position",n),window.location.hash=e}else console.log("#id or a-camera is not defined")}else window.location.href=e})}})}]);
+!function(e){function t(i){if(o[i])return o[i].exports;var n=o[i]={exports:{},id:i,loaded:!1};return e[i].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t){if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("href",{schema:{"default":""},boundClickHandler:void 0,clickHandler:function(e){var e=this.data;if(console.log("link to "+e),e&&"#"===e[0]){var t=document.querySelector(e),o=document.querySelectorAll("a-camera");if(t&&o){var i=t.getAttribute("position");console.log("focus camera to position:"+JSON.stringify(i)),o[0].setAttribute("position",i),window.location.hash=e}else console.log("#id or a-camera is not defined")}else window.location.href=e},init:function(){this.boundClickHandler=this.clickHandler.bind(this),this.el.addEventListener("click",this.boundClickHandler)},remove:function(){this.el.removeEventListener("click",this.boundClickHandler)}})}]);

index.js

@@ -13,2 +13,24 @@ if (typeof AFRAME === 'undefined') {
 
+  boundClickHandler: undefined,
+
+  clickHandler: function href_clickHandler(url) {
+    var url = this.data;
+    console.log('link to ' + url);
+    if (url && url[0] === '#') { // in-page anchor
+      var ele = document.querySelector(url);
+      var cams = document.querySelectorAll('a-camera')
+      if (ele && cams) {
+        var targetPosition = ele.getAttribute('position');
+        console.log('focus camera to position:' +
+          JSON.stringify(targetPosition));
+        cams[0].setAttribute('position', targetPosition);
+        window.location.hash = url;
+      } else {
+        console.log('#id or a-camera is not defined');
+      }
+    } else { // normal hyper link
+      window.location.href = url;
+    }
+  },
+
   /**
@@ -18,22 +40,14 @@ * Called once when component is attached. Generally for initial setup.
   init: function() {
-    var url = this.data;
-    this.el.addEventListener('click', function() {
-      console.log('link to ' + url);
-      if (url && url[0] === '#') { // in-page anchor
-        var ele = document.querySelector(url);
-        var cams = document.querySelectorAll('a-camera')
-        if (ele && cams) {
-          var targetPosition = ele.getAttribute('position');
-          console.log('focus camera to position:' +
-            JSON.stringify(targetPosition));
-          cams[0].setAttribute('position', targetPosition);
-          window.location.hash = url;
-        } else {
-          console.log('#id or a-camera is not defined');
-        }
-      } else { // normal hyper link
-        window.location.href = url;
-      }
-    });
+    // var url = this.data;
+    this.boundClickHandler = this.clickHandler.bind(this);
+    this.el.addEventListener('click', this.boundClickHandler);
+  },
+
+  /**
+   * Called when a component is removed (e.g., via removeAttribute).
+   * Generally undoes all modifications to the entity.
+   */
+  remove: function () {
+    this.el.removeEventListener('click', this.boundClickHandler);
   }
 });

package.json

 {
   "name": "aframe-href-component",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Hyper Link component for A-Frame.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 ## aframe-href-component
 
-A Hyper Link component for [A-Frame](https://aframe.io).
+ [![Dependency Status](https://david-dm.org/gasolin/aframe-href-component.svg)](https://david-dm.org/gasolin/aframe-href-component) [![npm](https://img.shields.io/npm/v/aframe-href-component.svg)](https://www.npmjs.com/package/aframe-href-component)
 
-Add `href="www.sample.com"` attribute to any a-frame tag, turn the object as a normal web link.
+A Hyper Link component for [A-Frame](https://aframe.io). With `aframe-href-component`, each object could be used as a normal html linkable element.
 
-Add `href="#id"` attribute to any a-frame tag will move `a-camera` focus to the target object. (experimental)
+### URL Link support
 
-### Properties
+Add `href` attribute to any a-frame tag, such as `href="www.sample.com"`. To turn the object as a normal web link. [demo](https://gasolin.github.io/aframe-href-component/basic/link.html)
 
-| Property | Description | Default Value |
-| -------- | ----------- | ------------- |
-|          |             |               |
+### Anchor support (experimental)
 
+Besides the normal hyper link. you can add in-page anchor like `href="#id"` to any a-frame tag.
+When user click on the object, `a-camera` will move its position to the object with the specified id. [demo](https://gasolin.github.io/aframe-href-component/basic/anchor.html)
+
 ### Usage
@@ -21,4 +22,6 @@
 
-Add `href` attribute in target tag (In example is `a-box`).
+Make sure you have placed an `a-cursor` element to trigger the click event.
+Then add `href` attribute in target tag (In example is `a-box`). [demo](https://gasolin.github.io/aframe-href-component/basic/index.html)
 
+
 ```html
@@ -25,0 +28,0 @@ <head>

No alert changes

Improved metrics

Total package byte prevSize

15771

increased by11.49%

Lines of code

129

increased by20.56%

Number of lines in readme file

62

increased by5.08%

No dependency changes