From efaf725b4a507951640b284c3805752dd558fbc4 Mon Sep 17 00:00:00 2001 From: Alexis Paques Date: Thu, 5 Sep 2019 11:16:16 +0200 Subject: [PATCH 1/5] Fix a semi-colon instead of a coma --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c441bc5..60ce971 100644 --- a/README.md +++ b/README.md @@ -155,7 +155,7 @@ The dom element in which all your joysticks will be injected. From cb19f2bc55fedcd6e18ca080fe95420179ed5cde Mon Sep 17 00:00:00 2001 From: Ilia Choly Date: Fri, 30 Aug 2019 11:13:55 -0400 Subject: [PATCH 2/5] feat: add unit vector representation to move event output --- README.md | 4 ++++ src/collection.js | 4 ++++ types/index.d.ts | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/README.md b/README.md index 60ce971..4d4a0bd 100644 --- a/README.md +++ b/README.md @@ -526,6 +526,10 @@ Comes with data : radian: 1.5707963268, // angle in radian degree: 90 }, + vector: { // force unit vector + x: 0.508, + y: 3.110602869834277e-17 + }, raw: { // note: angle is the same, beyond the 50 pixel limit distance: 25.4, // distance which continues beyond the 50 pixel limit position: { // position of the finger/mouse in pixels, beyond joystick limits diff --git a/src/collection.js b/src/collection.js index 0097f5d..773de10 100644 --- a/src/collection.js +++ b/src/collection.js @@ -432,6 +432,10 @@ Collection.prototype.processOnMove = function (evt) { radian: rAngle, degree: angle }, + vector: { + x: xPosition / size, + y: - yPosition / size + }, raw: raw, instance: nipple, lockX: opts.lockX, diff --git a/types/index.d.ts b/types/index.d.ts index 577bde5..390bbba 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -159,6 +159,10 @@ export interface JoystickOutputData { x: string; y: string; }; + vector: { + x: number; + y: number; + }; raw: { distance: number; position: Position; From 4016682feb8604b4b91d39868db425ff4f893095 Mon Sep 17 00:00:00 2001 From: Alexis Paques Date: Fri, 6 Sep 2019 12:12:34 +0200 Subject: [PATCH 3/5] Add an options to use with dynamic pages --- README.md | 5 ++++- src/collection.js | 12 +++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4d4a0bd..75cc790 100644 --- a/README.md +++ b/README.md @@ -139,8 +139,9 @@ var options = { restOpacity: Number, // opacity when not 'dynamic' and rested lockX: Boolean, // only move on the X axis lockY: Boolean, // only move on the Y axis - catchDistance: Number // distance to recycle previous joystick in + catchDistance: Number, // distance to recycle previous joystick in // 'semi' mode + dynamic_page: Boolean, // Enable if the page has dynamically visible elements }; ``` @@ -252,6 +253,8 @@ Locks joystick's movement to the x (horizontal) axis ### `options.lockY` defaults to false Locks joystick's movement to the y (vertical) axis +### `options.dynamic_page` defaults to true +Enable if the page has dynamically visible elements such as for Vue, React, Angular or simply some CSS hiding or showing some DOM. ---- diff --git a/src/collection.js b/src/collection.js index 773de10..84816e6 100644 --- a/src/collection.js +++ b/src/collection.js @@ -33,7 +33,8 @@ function Collection (manager, options) { restJoystick: true, restOpacity: 0.5, lockX: false, - lockY: false + lockY: false, + dynamic_page: false }; self.config(options); @@ -377,6 +378,15 @@ Collection.prototype.processOnMove = function (evt) { return; } + if (opts.dynamic_page) { + var scroll = u.getScroll(); + pos = nipple.el.getBoundingClientRect(); + nipple.position = { + x: scroll.x + pos.left, + y: scroll.y + pos.top + }; + } + nipple.identifier = identifier; var size = nipple.options.size / 2; From 390c35699a4319917563dc81bc70b8c2bc5bd8d1 Mon Sep 17 00:00:00 2001 From: Alexis Paques Date: Fri, 13 Sep 2019 10:40:58 +0200 Subject: [PATCH 4/5] Rename dynamic_page to dynamicPage --- README.md | 4 ++-- src/collection.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 75cc790..5e3b114 100644 --- a/README.md +++ b/README.md @@ -141,7 +141,7 @@ var options = { lockY: Boolean, // only move on the Y axis catchDistance: Number, // distance to recycle previous joystick in // 'semi' mode - dynamic_page: Boolean, // Enable if the page has dynamically visible elements + dynamicPage: Boolean, // Enable if the page has dynamically visible elements }; ``` @@ -253,7 +253,7 @@ Locks joystick's movement to the x (horizontal) axis ### `options.lockY` defaults to false Locks joystick's movement to the y (vertical) axis -### `options.dynamic_page` defaults to true +### `options.dynamicPage` defaults to true Enable if the page has dynamically visible elements such as for Vue, React, Angular or simply some CSS hiding or showing some DOM. ---- diff --git a/src/collection.js b/src/collection.js index 84816e6..95817c8 100644 --- a/src/collection.js +++ b/src/collection.js @@ -34,7 +34,7 @@ function Collection (manager, options) { restOpacity: 0.5, lockX: false, lockY: false, - dynamic_page: false + dynamicPage: false }; self.config(options); @@ -378,7 +378,7 @@ Collection.prototype.processOnMove = function (evt) { return; } - if (opts.dynamic_page) { + if (opts.dynamicPage) { var scroll = u.getScroll(); pos = nipple.el.getBoundingClientRect(); nipple.position = { From 3266b31cfccd3aa1697474988edc95c215aceced Mon Sep 17 00:00:00 2001 From: Arthur Rouet Date: Wed, 30 Oct 2019 10:20:30 +0100 Subject: [PATCH 5/5] Add the possibility to set a unit for the size of the stick --- README.md | 16 ++++++++++------ example/dual-joysticks.html | 4 ++-- example/lock-axes.html | 4 ++-- src/collection.js | 13 ++++++++----- src/nipple.js | 21 ++++++++++++--------- src/utils.js | 6 +++--- types/index.d.ts | 6 +++--- 7 files changed, 40 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 5e3b114..f712e55 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ - [Options](#options) * [`options.zone` defaults to 'body'](#optionszone-defaults-to-body) * [`options.color` defaults to 'white'](#optionscolor-defaults-to-white) - * [`options.size` defaults to 100](#optionssize-defaults-to-100) + * [`options.size` defaults to {val: 100, unit: "px"}](#optionssize-defaults-to-val-100-unit-px) * [`options.threshold` defaults to 0.1](#optionsthreshold-defaults-to-01) * [`options.fadeTime` defaults to 250](#optionsfadetime-defaults-to-250) * [`options.multitouch` defaults to false](#optionsmultitouch-defaults-to-false) @@ -127,7 +127,7 @@ You can configure your joystick in different ways : var options = { zone: Element, // active zone color: String, - size: Integer, + size: {val: Integer, unit: String}, threshold: Float, // before triggering a directional event fadeTime: Integer, // transition time multitouch: Boolean, @@ -171,8 +171,12 @@ The background color of your joystick's elements. Can be any valid CSS color. -### `options.size` defaults to 100 -The size in pixel of the outer circle. +### `options.size` defaults to `{val: 100, unit: "px"}` +An object that determine the size of the outer circle. + +You can pass css unit like : `px`, `vh`, `vmin` + +`%` doesn't work if you doesn't set `nipple collection` height and width before The inner circle is 50% of this size. @@ -279,7 +283,7 @@ Your manager has the following signature : mode: String, position: Object, catchDistance: Number, - size: Number, + size: {val: Number, unit: String}, threshold: Number, color: String, fadeTime: Number, @@ -371,7 +375,7 @@ Each joystick has the following signature : }, options: { color: String, - size: Number, + size: {val: Number, unit: String}, threshold: Number, fadeTime: Number } diff --git a/example/dual-joysticks.html b/example/dual-joysticks.html index 3860953..beae03d 100644 --- a/example/dual-joysticks.html +++ b/example/dual-joysticks.html @@ -44,7 +44,7 @@ mode: 'static', position: { left: '20%', top: '50%' }, color: 'green', - size: 200 + size: {val: 200, unit: "px"} }); var joystickR = nipplejs.create({ @@ -52,7 +52,7 @@ mode: 'static', position: { left: '80%', top: '50%' }, color: 'red', - size: 200 + size: {val: 200, unit: "px"} }); diff --git a/example/lock-axes.html b/example/lock-axes.html index ea9dd5f..c25ff67 100644 --- a/example/lock-axes.html +++ b/example/lock-axes.html @@ -44,7 +44,7 @@ mode: 'static', position: { left: '20%', top: '50%' }, color: 'green', - size: 200, + size: {val: 200, unit: "px"}, lockX: true }); @@ -53,7 +53,7 @@ mode: 'static', position: { left: '80%', top: '50%' }, color: 'red', - size: 200, + size: {val: 200, unit: "px"}, lockY: true }); diff --git a/src/collection.js b/src/collection.js index 95817c8..b8b8f2d 100644 --- a/src/collection.js +++ b/src/collection.js @@ -25,7 +25,10 @@ function Collection (manager, options) { mode: 'dynamic', position: {top: 0, left: 0}, catchDistance: 200, - size: 100, + size: { + val: 100, + unit: 'px' + }, threshold: 0.1, color: 'white', fadeTime: 250, @@ -173,8 +176,8 @@ Collection.prototype.createNipple = function (position, identifier) { }); if (!opts.dataOnly) { - u.applyPosition(nipple.ui.el, toPutOn); - u.applyPosition(nipple.ui.front, nipple.frontPosition); + u.applyPosition(nipple.ui.el, toPutOn, opts.size.unit); + u.applyPosition(nipple.ui.front, nipple.frontPosition, opts.size.unit); } self.nipples.push(nipple); self.trigger('added ' + nipple.identifier + ':added', nipple); @@ -389,7 +392,7 @@ Collection.prototype.processOnMove = function (evt) { nipple.identifier = identifier; - var size = nipple.options.size / 2; + var size = nipple.options.size.val / 2; var pos = { x: evt.pageX, y: evt.pageY @@ -428,7 +431,7 @@ Collection.prototype.processOnMove = function (evt) { }; if (!opts.dataOnly) { - u.applyPosition(nipple.ui.front, nipple.frontPosition); + u.applyPosition(nipple.ui.front, nipple.frontPosition, opts.size.unit); } // Prepare event's datas. diff --git a/src/nipple.js b/src/nipple.js index 07e253d..c7f24c5 100644 --- a/src/nipple.js +++ b/src/nipple.js @@ -13,7 +13,10 @@ function Nipple (collection, options) { // Defaults this.defaults = { - size: 100, + size: { + val: 100, + unit: 'px' + }, threshold: 0.1, color: 'white', fadeTime: 250, @@ -110,21 +113,21 @@ Nipple.prototype.stylize = function () { styles.back = { position: 'absolute', display: 'block', - width: this.options.size + 'px', - height: this.options.size + 'px', - marginLeft: -this.options.size / 2 + 'px', - marginTop: -this.options.size / 2 + 'px', + width: this.options.size.val + this.options.size.unit , + height: this.options.size.val + this.options.size.unit, + marginLeft: -this.options.size.val / 2 + this.options.size.unit, + marginTop: -this.options.size.val / 2 + this.options.size.unit, background: this.options.color, 'opacity': '.5' }; styles.front = { - width: this.options.size / 2 + 'px', - height: this.options.size / 2 + 'px', + width: this.options.size.val / 2 + this.options.size.unit, + height: this.options.size.val / 2 + this.options.size.unit, position: 'absolute', display: 'block', - marginLeft: -this.options.size / 4 + 'px', - marginTop: -this.options.size / 4 + 'px', + marginLeft: -this.options.size.val / 4 + this.options.size.unit, + marginTop: -this.options.size.val / 4 + this.options.size.unit, background: this.options.color, 'opacity': '.5' }; diff --git a/src/utils.js b/src/utils.js index dc863d5..d0f7189 100644 --- a/src/utils.js +++ b/src/utils.js @@ -91,15 +91,15 @@ export const getScroll = () => { }; }; -export const applyPosition = (el, pos) => { +export const applyPosition = (el, pos, unit) => { if (pos.top || pos.right || pos.bottom || pos.left) { el.style.top = pos.top; el.style.right = pos.right; el.style.bottom = pos.bottom; el.style.left = pos.left; } else { - el.style.left = pos.x + 'px'; - el.style.top = pos.y + 'px'; + el.style.left = pos.x + unit; + el.style.top = pos.y + unit; } }; diff --git a/types/index.d.ts b/types/index.d.ts index 390bbba..29c5cac 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -18,12 +18,12 @@ export interface JoystickManagerOptions { color?: string; /** - * Defaults to `100` - * The size in pixel of the outer circle. + * Defaults to { val: `100`, unit: px} + * The size of the outer circle. * * The inner circle is 50% of this size. */ - size?: number; + size?: {val: number, unit: string}; /** * This is the strength needed to trigger a directional event.