@jspsych-contrib/extension-touchscreen-buttons - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/index.browser.min.js

@@ -1,2 +0,2 @@
-"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),Object.defineProperty(a,"prototype",{writable:!1}),a}var jsPsychExtensionTouchscreenButtons=function(){"use strict";function a(a){// Turns a number (0-255) into a 2-character hex number (00-ff)
+"use strict";function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function _iterableToArrayLimit(b,c){var d=null==b?null:"undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(null!=d){var g,h,j,k,l=[],a=!0,m=!1;try{if(j=(d=d.call(b)).next,0===c){if(Object(d)!==d)return;a=!1}else for(;!(a=(g=j.call(d)).done)&&(l.push(g.value),l.length!==c);a=!0);}catch(a){m=!0,h=a}finally{try{if(!a&&null!=d["return"]&&(k=d["return"](),Object(k)!==k))return}finally{if(m)throw h}}return l}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,_toPropertyKey(c.key),c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),Object.defineProperty(a,"prototype",{writable:!1}),a}function _toPropertyKey(a){var b=_toPrimitive(a,"string");return"symbol"==_typeof(b)?b:b+""}function _toPrimitive(a,b){if("object"!=_typeof(a)||!a)return a;var c=a[Symbol.toPrimitive];if(void 0!==c){var d=c.call(a,b||"default");if("object"!=_typeof(d))return d;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===b?String:Number)(a)}var jsPsychExtensionTouchscreenButtons=function(){"use strict";function a(a){// Turns a number (0-255) into a 2-character hex number (00-ff)
 return("0"+a.toString(16)).slice(-2)}function b(a){var b=document.createElement("canvas");b.height=1,b.width=1;var c=b.getContext("2d");return c.fillStyle=a,c.fillRect(0,0,1,1),c.getImageData(0,0,1,1).data}function d(b){// Convert any CSS color to a hex representation
@@ -6,3 +6,3 @@ // Examples:
 // colorToHex('rgb(255, 0, 0)') # '#ff0000'
-var c;return c=[0,1,2].map(function(c){return a(b[c])}).join(""),"#"+c}var e=/*#__PURE__*/function(){function a(e,f,g){_classCallCheck(this,a),this.jsPsych=g,this.div=document.createElement("div"),this.key=f&&f.key||"";var h="jsTouchButtonMiddle";"left_bottom"===e?h="jsTouchButtonLeftBottom":"left_top"===e?h="jsTouchButtonLeftTop":"right_bottom"===e?h="jsTouchButtonRightBottom":"right_top"===e?h="jsTouchButtonRightTop":"left"===e?h="jsTouchButtonLeft":"right"==e&&(h="jsTouchButtonRight");var i=f&&f.css||"jsTouchButton";this.div.classList.add(i,h);var j="#9999";if(f.color&&(j=f.color,!j.startsWith("#")&&(j=b(j),j=d(j)),4===j.length?j+="9":7===j.length&&(j+="90")),this.div.style.boxShadow="inset 0 0 0 .5vw "+j+", 0 0 0 .5vw "+j,f.innerText&&(this.div.innerText=f.innerText),f.style)for(var k in f.style)this.div.style[k]=f.style[k]}return _createClass(a,[{key:"start_listener",value:function start_listener(){this.jsPsych.pluginAPI.keyDown(this.key)}},{key:"end_listener",value:function end_listener(){this.jsPsych.pluginAPI.keyUp(this.key)}}]),a}(),f=/*#__PURE__*/function(){function a(b){_classCallCheck(this,a),this.jsPsych=b}return _createClass(a,[{key:"initialize",value:function initialize(a){var b=this;return new Promise(function(c){b.layouts=[];for(var n=0;n<a.length;n++){var d=void 0,f=void 0,g=void 0,h=void 0,j=void 0,k=void 0,l=null,m=a[n];m.middle&&(d=new e("middle",m.middle,b.jsPsych)),m.left_bottom&&(h=new e("left_bottom",m.left_bottom,b.jsPsych)),m.left_top&&(j=new e("left_top",m.left_top,b.jsPsych)),m.right_bottom&&(k=new e("right_bottom",m.right_bottom,b.jsPsych)),m.right_top&&(l=new e("right_top",m.right_top,b.jsPsych)),m.left&&(f=new e("left",m.left,b.jsPsych)),m.right&&(g=new e("right",m.right,b.jsPsych));var i={middle:d,left_bottom:h,left_top:j,right_bottom:k,right_top:l,left:f,right:g};b.layouts.push(i)}c()})}},{key:"on_start",value:function on_start(){}},{key:"on_load",value:function on_load(a){var b=this.jsPsych.getDisplayElement(),c=a&&a.layout||0,d=this.layouts[c];d.middle&&(d.middle.div.addEventListener("touchstart",d.middle.start_listener.bind(d.middle),!1),d.middle.div.addEventListener("touchend",d.middle.end_listener.bind(d.middle),!1),b.appendChild(d.middle.div)),d.left_bottom&&(d.left_bottom.div.addEventListener("touchstart",d.left_bottom.start_listener.bind(d.left_bottom),!1),d.left_bottom.div.addEventListener("touchend",d.left_bottom.end_listener.bind(d.left_bottom),!1),b.appendChild(d.left_bottom.div)),d.left_top&&(d.left_top.div.addEventListener("touchstart",d.left_top.start_listener.bind(d.left_top),!1),d.left_top.div.addEventListener("touchend",d.left_top.end_listener.bind(d.left_top),!1),b.appendChild(d.left_top.div)),d.right_bottom&&(d.right_bottom.div.addEventListener("touchstart",d.right_bottom.start_listener.bind(d.right_bottom),!1),d.right_bottom.div.addEventListener("touchend",d.right_bottom.end_listener.bind(d.right_bottom),!1),b.appendChild(d.right_bottom.div)),d.right_top&&(d.right_top.div.addEventListener("touchstart",d.right_top.start_listener.bind(d.right_top),!1),d.right_top.div.addEventListener("touchend",d.right_top.end_listener.bind(d.right_top),!1),b.appendChild(d.right_top.div)),d.right&&(d.right.div.addEventListener("touchstart",d.right.start_listener.bind(d.right),!1),d.right.div.addEventListener("touchend",d.right.end_listener.bind(d.right),!1),b.appendChild(d.right.div)),d.left&&(d.left.div.addEventListener("touchstart",d.left.start_listener.bind(d.left),!1),d.left.div.addEventListener("touchend",d.left.end_listener.bind(d.left),!1),b.appendChild(d.left.div))}},{key:"on_finish",value:function on_finish(){for(var a,b=0;b<this.layouts.length;b++)a=this.layouts[b],a.middle&&(a.middle.div.ontouchstart=null),a.left_bottom&&(a.left_bottom.div.ontouchstart=null),a.left_top&&(a.left_top.div.ontouchstart=null),a.right_bottom&&(a.right_bottom.div.ontouchstart=null),a.right_top&&(a.right_top.div.ontouchstart=null),a.left&&(a.left.div.ontouchstart=null),a.right&&(a.right.div.ontouchstart=null);return{data_property:"data_value"}}}]),a}();/**
+var c;return c=[0,1,2].map(function(c){return a(b[c])}).join(""),"#"+c}var e=/*#__PURE__*/function(){function a(e,f){_classCallCheck(this,a),this.jsPsych=f,this.div=document.createElement("div"),this.key=e&&e.key||"";var g=e&&e.css||"jsTouchButton",h=e.position_x;void 0===h&&(h=50);var i=e.position_y;void 0===i&&(i=10);var j=e.size;void 0===j&&(j=10);var k=e&&e.preset||null,l=null;"bottom_left"===k?l="jsTouchButtonLeftBottom":"top_left"===k?l="jsTouchButtonLeftTop":"bottom_right"===k?l="jsTouchButtonRightBottom":"top_right"===k?l="jsTouchButtonRightTop":"left"===k?l="jsTouchButtonLeft":"right"===k&&(l="jsTouchButtonRight"),this.div.classList.add(g,l);var m="#9999";if(e.color&&(m=e.color,!m.startsWith("#")&&(m=b(m),m=d(m)),4===m.length?m+="9":7===m.length&&(m+="90")),this.div.style.boxShadow="inset 0 0 0 .5vw "+m+", 0 0 0 .5vw "+m,null===l&&(this.div.style.left="string"==typeof h?h:h+"%",this.div.style.bottom="string"==typeof i?i:i+"%",this.div.style.width="string"==typeof j?this.div.style.height=this.div.style.lineHeight=j:this.div.style.height=this.div.style.lineHeight=j+"vw"),e.innerText&&(this.div.innerText=e.innerText),e.style)for(var n in e.style)this.div.style[n]=e.style[n]}return _createClass(a,[{key:"start_listener",value:function start_listener(){this.jsPsych.pluginAPI.keyDown(this.key)}},{key:"end_listener",value:function end_listener(){this.jsPsych.pluginAPI.keyUp(this.key)}}]),a}(),f=/*#__PURE__*/function(){function a(b){_classCallCheck(this,a),this.jsPsych=b}return _createClass(a,[{key:"initialize",value:function initialize(a){var b=this;return new Promise(function(c){b.layouts={};for(var d=function _loop(){var a=_slicedToArray(g[f],2),c=a[0],d=a[1];b.layouts[c]=[],d.forEach(function(a){return b.layouts[c].push(new e(a,b.jsPsych))})},f=0,g=Object.entries(a);f<g.length;f++)d();c()})}},{key:"on_start",value:function on_start(a){}},{key:"on_load",value:function on_load(a){var b=this.jsPsych.getDisplayElement(),c=Object.keys(this.layouts)[0];a&&(c=a.layout);var d=this.layouts[c];d.forEach(function(a){a.div.addEventListener("touchstart",a.start_listener.bind(a),!1),a.div.addEventListener("touchend",a.end_listener.bind(a),!1),b.appendChild(a.div)})}},{key:"on_finish",value:function on_finish(a){for(var b=0,c=Object.entries(this.layouts);b<c.length;b++){var d=_slicedToArray(c[b],2),e=d[0],f=d[1],g=f;g.forEach(function(a){a.div.ontouchstart=null,a.div.ontouchend=null})}return{data_property:"data_value"}}}]),a}();/**
    * **extension-touchscreen-buttons**
@@ -9,0 +9,0 @@ *

index.js

@@ -34,14 +34,29 @@ var jsPsychExtensionTouchscreenButtons = (function (jspsych) {
   class Button {
-    constructor(type, params, jsPsych) {
+    constructor(params, jsPsych) {
       this.jsPsych = jsPsych;
       this.div = document.createElement("div");
       this.key = (params && params.key) || "";
-      let c = "jsTouchButtonMiddle";
-      if (type === "left_bottom") {
+      let style = (params && params.css) || "jsTouchButton";
+      let position_x = params.position_x;
+      if (position_x === undefined) {
+        position_x = 50;
+      }
+      let position_y = params.position_y;
+      if (position_y === undefined) {
+        position_y = 10;
+      }
+      let size = params.size;
+      if (size === undefined) {
+        size = 10;
+      }
+      let type = (params && params.preset) || null;
+
+      let c = null;
+      if (type === "bottom_left") {
         c = "jsTouchButtonLeftBottom";
-      } else if (type === "left_top") {
+      } else if (type === "top_left") {
         c = "jsTouchButtonLeftTop";
-      } else if (type === "right_bottom") {
+      } else if (type === "bottom_right") {
         c = "jsTouchButtonRightBottom";
-      } else if (type === "right_top") {
+      } else if (type === "top_right") {
         c = "jsTouchButtonRightTop";
@@ -54,3 +69,2 @@ } else if (type === "left") {
 
-      let style = (params && params.css) || "jsTouchButton";
       this.div.classList.add(style, c);
@@ -71,2 +85,19 @@ let col = "#9999";
       this.div.style.boxShadow = "inset 0 0 0 .5vw " + col + ", 0 0 0 .5vw " + col;
+      if (c === null) {
+        if (typeof position_x !== "string") {
+          this.div.style.left = position_x + "%";
+        } else {
+          this.div.style.left = position_x;
+        }
+        if (typeof position_y !== "string") {
+          this.div.style.bottom = position_y + "%";
+        } else {
+          this.div.style.bottom = position_y;
+        }
+        if (typeof size !== "string") {
+          this.div.style.width = this.div.style.height = this.div.style.lineHeight = size + "vw";
+        } else {
+          this.div.style.width = this.div.style.height = this.div.style.lineHeight = size;
+        }
+      }
       if (params.innerText) {
@@ -105,43 +136,6 @@ this.div.innerText = params.innerText;
       return new Promise((resolve, reject) => {
-        this.layouts = [];
-        for (let i = 0; i < params.length; i++) {
-          let middle,
-            left,
-            right,
-            left_bottom,
-            left_top,
-            right_bottom,
-            right_top = null;
-          let param = params[i];
-          if (param.middle) {
-            middle = new Button("middle", param.middle, this.jsPsych);
-          }
-          if (param.left_bottom) {
-            left_bottom = new Button("left_bottom", param.left_bottom, this.jsPsych);
-          }
-          if (param.left_top) {
-            left_top = new Button("left_top", param.left_top, this.jsPsych);
-          }
-          if (param.right_bottom) {
-            right_bottom = new Button("right_bottom", param.right_bottom, this.jsPsych);
-          }
-          if (param.right_top) {
-            right_top = new Button("right_top", param.right_top, this.jsPsych);
-          }
-          if (param.left) {
-            left = new Button("left", param.left, this.jsPsych);
-          }
-          if (param.right) {
-            right = new Button("right", param.right, this.jsPsych);
-          }
-          let buttons = {
-            middle,
-            left_bottom,
-            left_top,
-            right_bottom,
-            right_top,
-            left,
-            right,
-          };
-          this.layouts.push(buttons);
+        this.layouts = {};
+        for (const [key, value] of Object.entries(params)) {
+          this.layouts[key] = [];
+          value.forEach((el) => this.layouts[key].push(new Button(el, this.jsPsych)));
         }
@@ -156,121 +150,23 @@ resolve();
       let display_element = this.jsPsych.getDisplayElement();
-      let index = (params && params.layout) || 0;
-      let buttons = this.layouts[index];
-      if (buttons.middle) {
-        buttons.middle.div.addEventListener(
-          "touchstart",
-          buttons.middle.start_listener.bind(buttons.middle),
-          false
-        );
-        buttons.middle.div.addEventListener(
-          "touchend",
-          buttons.middle.end_listener.bind(buttons.middle),
-          false
-        );
-        display_element.appendChild(buttons.middle.div);
+
+      let key = Object.keys(this.layouts)[0];
+      if (params) {
+        key = params.layout;
       }
-      if (buttons.left_bottom) {
-        buttons.left_bottom.div.addEventListener(
-          "touchstart",
-          buttons.left_bottom.start_listener.bind(buttons.left_bottom),
-          false
-        );
-        buttons.left_bottom.div.addEventListener(
-          "touchend",
-          buttons.left_bottom.end_listener.bind(buttons.left_bottom),
-          false
-        );
-        display_element.appendChild(buttons.left_bottom.div);
-      }
-      if (buttons.left_top) {
-        buttons.left_top.div.addEventListener(
-          "touchstart",
-          buttons.left_top.start_listener.bind(buttons.left_top),
-          false
-        );
-        buttons.left_top.div.addEventListener(
-          "touchend",
-          buttons.left_top.end_listener.bind(buttons.left_top),
-          false
-        );
-        display_element.appendChild(buttons.left_top.div);
-      }
-      if (buttons.right_bottom) {
-        buttons.right_bottom.div.addEventListener(
-          "touchstart",
-          buttons.right_bottom.start_listener.bind(buttons.right_bottom),
-          false
-        );
-        buttons.right_bottom.div.addEventListener(
-          "touchend",
-          buttons.right_bottom.end_listener.bind(buttons.right_bottom),
-          false
-        );
-        display_element.appendChild(buttons.right_bottom.div);
-      }
-      if (buttons.right_top) {
-        buttons.right_top.div.addEventListener(
-          "touchstart",
-          buttons.right_top.start_listener.bind(buttons.right_top),
-          false
-        );
-        buttons.right_top.div.addEventListener(
-          "touchend",
-          buttons.right_top.end_listener.bind(buttons.right_top),
-          false
-        );
-        display_element.appendChild(buttons.right_top.div);
-      }
-      if (buttons.right) {
-        buttons.right.div.addEventListener(
-          "touchstart",
-          buttons.right.start_listener.bind(buttons.right),
-          false
-        );
-        buttons.right.div.addEventListener(
-          "touchend",
-          buttons.right.end_listener.bind(buttons.right),
-          false
-        );
-        display_element.appendChild(buttons.right.div);
-      }
-      if (buttons.left) {
-        buttons.left.div.addEventListener(
-          "touchstart",
-          buttons.left.start_listener.bind(buttons.left),
-          false
-        );
-        buttons.left.div.addEventListener(
-          "touchend",
-          buttons.left.end_listener.bind(buttons.left),
-          false
-        );
-        display_element.appendChild(buttons.left.div);
-      }
+      let buttons = this.layouts[key];
+
+      buttons.forEach((button) => {
+        button.div.addEventListener("touchstart", button.start_listener.bind(button), false);
+        button.div.addEventListener("touchend", button.end_listener.bind(button), false);
+        display_element.appendChild(button.div);
+      });
     }
 
     on_finish(params) {
-      for (let i = 0; i < this.layouts.length; i++) {
-        let buttons = this.layouts[i];
-        if (buttons.middle) {
-          buttons.middle.div.ontouchstart = null;
-        }
-        if (buttons.left_bottom) {
-          buttons.left_bottom.div.ontouchstart = null;
-        }
-        if (buttons.left_top) {
-          buttons.left_top.div.ontouchstart = null;
-        }
-        if (buttons.right_bottom) {
-          buttons.right_bottom.div.ontouchstart = null;
-        }
-        if (buttons.right_top) {
-          buttons.right_top.div.ontouchstart = null;
-        }
-        if (buttons.left) {
-          buttons.left.div.ontouchstart = null;
-        }
-        if (buttons.right) {
-          buttons.right.div.ontouchstart = null;
-        }
+      for (const [key, value] of Object.entries(this.layouts)) {
+        let buttons = value;
+        buttons.forEach((button) => {
+          button.div.ontouchstart = null;
+          button.div.ontouchend = null;
+        });
       }
@@ -277,0 +173,0 @@ return {

package.json

 {
   "name": "@jspsych-contrib/extension-touchscreen-buttons",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
@@ -11,3 +11,3 @@ "unpkg": "dist/index.browser.min.js",
   "scripts": {
-    "build": "babel index.js --config-file @jspsych/config/babel --presets minify --source-maps --out-file dist/index.browser.min.js",
+    "build": "babel index.js --presets @babel/preset-env,minify --source-maps --out-file dist/index.browser.min.js",
     "build:watch": "npm run build -- --watch"
@@ -27,5 +27,5 @@ },
   "devDependencies": {
-    "@jspsych/config": "^1.0.0",
+    "@jspsych/config": "^2.0.0",
     "jspsych": "^7.0.0"
   }
 }

readme.md

@@ -13,3 +13,3 @@ # touchscreen-buttons extension
 ```js
-<script src="https://unpkg.com/@jspsych-contrib/extension-touchscreen-buttons@1.0.0">
+<script src="https://unpkg.com/@jspsych-contrib/extension-touchscreen-buttons@2.0.0">
 ```
@@ -16,0 +16,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

23869

decreased by-26.1%

Lines of code

192

decreased by-35.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes