identityfusion - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/identityfusion.js

@@ -253,3 +253,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
   const left = rect.left + document.body.scrollLeft;
-  return left - parseInt(getComputedStyle(el)['border-left-width'], 10);
+  return left - parseFloat(getComputedStyle(el)['border-left-width'], 10);
 }
@@ -321,3 +321,3 @@
 
-    this.dragOrigLeft = parseInt(getComputedStyle(this.me).left, 10);
+    this.dragOrigLeft = parseFloat(getComputedStyle(this.me).left, 10);
     this.dragOrigX = e.pageX;
@@ -332,2 +332,5 @@ document.addEventListener('mousemove', this.drag);
     e.stopPropagation();
+    if (this.dragOrigX === null) {
+      return;
+    }
     const deltaPixels = e.pageX - this.dragOrigX;
@@ -387,3 +390,3 @@ this.nudgePixels(deltaPixels, this.dragOrigLeft);
     if (start === undefined) {
-      start = parseInt(getComputedStyle(this.me).left, 10);
+      start = parseFloat(getComputedStyle(this.me).left, 10);
     }
@@ -397,3 +400,3 @@ let finish = start + delta;
     }
-    this.me.style.left = `${finish}px`;
+    this.me.style.left = `${finish / this.elRange.offsetWidth * 100}%`;
     this.update();
@@ -400,0 +403,0 @@ }

index.js

@@ -37,3 +37,3 @@ import throttle from 'throttle-debounce/throttle';
   const left = rect.left + document.body.scrollLeft;
-  return left - parseInt(getComputedStyle(el)['border-left-width'], 10);
+  return left - parseFloat(getComputedStyle(el)['border-left-width'], 10);
 }
@@ -105,3 +105,3 @@
 
-    this.dragOrigLeft = parseInt(getComputedStyle(this.me).left, 10);
+    this.dragOrigLeft = parseFloat(getComputedStyle(this.me).left, 10);
     this.dragOrigX = e.pageX;
@@ -116,2 +116,5 @@ document.addEventListener('mousemove', this.drag);
     e.stopPropagation();
+    if (this.dragOrigX === null) {
+      return;
+    }
     const deltaPixels = e.pageX - this.dragOrigX;
@@ -171,3 +174,3 @@ this.nudgePixels(deltaPixels, this.dragOrigLeft);
     if (start === undefined) {
-      start = parseInt(getComputedStyle(this.me).left, 10);
+      start = parseFloat(getComputedStyle(this.me).left, 10);
     }
@@ -181,5 +184,5 @@ let finish = start + delta;
     }
-    this.me.style.left = `${finish}px`;
+    this.me.style.left = `${finish / this.elRange.offsetWidth * 100}%`;
     this.update();
   }
 }

package.json

 {
   "name": "identityfusion",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Turns an HTML input into a Dynamic Identity Fusion Index (DIFI) widget",
   "main": "dist/identityfusion.js",
-  "author": "Computational Cognitive Science Lab, UC Berkeley",
+  "author": "Dallinger Project, UC Berkeley",
   "license": "MIT",
@@ -8,0 +8,0 @@ "engines": {

README.md

@@ -0,12 +1,24 @@
+[![npm version](https://badge.fury.io/js/identityfusion.svg)](https://badge.fury.io/js/identityfusion)
+
 # Description
 
 The `identityfusion` module turns an HTML input into an interactive
-widget for the user to indicate the degree to which their own identity
+widget that administers the [Dynamic Identity Fusion Index (DIFI)](http://www2.uned.es/pspp/measures/difi/index.htm) 
+[1], which assesses the degree to which the user's own identity
 fuses with a group identity. The widget consists of a circle labeled
 "Me" which can be dragged or moved using buttons to overlap a circle
-which represents the group. Two values are recorded:
+which represents the group.
 
+![demo](demo.gif)
+
+Two values are recorded:
+
 1. Distance
 2. Overlap
 
+[1] Jimenez, J., Gomez, A., Buhrmester, M. D., Vázquez, A., 
+Whitehouse, H., & Swann, W. B. (2016). The dynamic identity fusion 
+index: A new continuous measure of identity fusion for web-based 
+questionnaires. *Social Science Computer Review*, 34(2), 215-228.
+
 # Usage
@@ -20,8 +32,9 @@
 
-Then create a new DIFIInput instance:
+Then include the library and create a new DIFIInput instance:
 
 ```
+<script src="identityfusion.js"></script>
 <script>
   var el = document.getElementById('DIFI');
-  new dynamicidentity.DIFIInput(el, {
+  new identityfusion.DIFIInput(el, {
     groupLabel: 'USA'
@@ -43,4 +56,8 @@ });
 
-* meLabel: The label for the circle representing the user. (Default: `Me`)
-* groupLabel: The label for the circle representing the group. (Default: `Group`)
-* groupImage: URL for an image to be shown as the background of the group circle. (Default: none)
+* `meLabel`: The label for the circle representing the user. (Default: `Me`)
+* `groupLabel`: The label for the circle representing the group. (Default: `Group`)
+* `groupImage`: URL for an image to be shown as the background of the group circle. (Default: none)
+
+# Disclaimer
+
+This project is sponsored by the Defense Advanced Research Projects Agency through the NGS2 program. The contents of this directory does not necessarily reflect the position or the policy of the Government and no official endorsement should be inferred.

No alert changes

Improved metrics

Total package byte prevSize

510575

increased by177.82%

Number of package files

14

increased by16.67%

Lines of code

1044

increased by0.58%

Number of lines in readme file

62

increased by37.78%

No dependency changes