Skip to content

Commit

Permalink
feat: Enable toggling with a panning mouse/finger gesture, fixes #49 (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
lolmaus authored and knownasilya committed Sep 9, 2017
1 parent 345ff35 commit 398f8d6
Show file tree
Hide file tree
Showing 8 changed files with 191 additions and 28 deletions.
25 changes: 13 additions & 12 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/dist/
/tmp/

# dependencies
/node_modules
/bower_components
/node_modules/
/bower_components/

# misc
/.sass-cache
/.sass-cache/
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log*
yarn-error.log
testem.log
/*.log*

# ember-try
.node_modules.ember-try/
bower.json.ember-try
package.json.ember-try
/.node_modules.ember-try/
/bower.json.ember-try
/package.json.ember-try

# IDE project files
/.idea/
/*.iml
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ language: node_js
node_js:
# we recommend testing addons with the same minimum supported node version as Ember CLI
# so that your addon works for all apps
- "4"
- "6"

sudo: false
dist: trusty
Expand Down
43 changes: 41 additions & 2 deletions addon/components/x-toggle-switch/component.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,53 @@
import Component from '@ember/component';
import { computed } from "@ember/object"
import { next } from '@ember/runloop';
import layout from './template';
import RecognizerMixin from 'ember-gestures/mixins/recognizers';

export default Component.extend({
export default Component.extend(RecognizerMixin, {
layout,
tagName: 'span',
classNames: ['x-toggle-container'],
classNameBindings: ['size', 'disabled:x-toggle-container-disabled', 'value:x-toggle-container-checked'],

labelDisabled: false,
recognizers: 'pan',

effectiveForId: computed('forId', 'labelDisabled', function() {
return this.get('labelDisabled') ? null : this.get('forId');
}),

themeClass: computed('theme', function() {
return `x-toggle-${this.get('theme') || 'default'}`;
})
}),

panRight() {
this.get('sendToggle')(true);
this._disableLabelUntilMouseUp()
},

panLeft() {
this.get('sendToggle')(false);
this._disableLabelUntilMouseUp();
},

/*
When you pan with a mouse and release the mouse button over the <label>
element, a click event happens and returns the toggle to its initial
state. :(
To prevent this, we need to make the label non-functional until after the
mouse button is released.
*/
_disableLabelUntilMouseUp () {
if (this.get('labelDisabled')) {
return;
}

this.set('labelDisabled', true);

document.addEventListener('mouseup', () => {
next(() => this.set('labelDisabled', false));
});
}
});
2 changes: 1 addition & 1 deletion addon/components/x-toggle-switch/template.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
onchange={{action sendToggle value='target.checked'}}
type='checkbox'>

<label for="{{forId}}">
<label for="{{effectiveForId}}">
<div
aria-owns="{{forId}}"
aria-role="checkbox"
Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
"dependencies": {
"ember-cli-babel": "^6.6.0",
"ember-cli-htmlbars": "^2.0.1",
"ember-gestures": "^0.4.7",
"ember-hammertime": "^1.2.4",
"ember-runtime-enumerable-includes-polyfill": "^2.0.0"
},
"devDependencies": {
Expand Down
17 changes: 17 additions & 0 deletions tests/integration/components/x-toggle/component-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -179,4 +179,21 @@ if (emberVersionGTE(2, 0)) {
assert.equal(this.get('value'), true, 'clicking on label again stays true');
assert.equal(this.get('timesCalled'), 1, 'should not call onToggle again if value does not change');
});

test('swipe gestures', function(assert) {
this.set('value', false);

this.render(hbs`{{x-toggle
value=value
onToggle=(action (mut value))
}}`);

const $toggle = this.$('.x-toggle-container');

$toggle.trigger('panright');
assert.equal(this.get('value'), true, 'swiping right should enable');

$toggle.trigger('panleft');
assert.equal(this.get('value'), false, 'swiping left should disable');
});
}
12 changes: 2 additions & 10 deletions vendor/ember-toggle/themes/skewed.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
}

.x-toggle-skewed.x-toggle-btn:after {
left: 100%;
left: -110%;
content: attr(data-tg-on);
}

Expand All @@ -42,26 +42,18 @@
background: #888;
}

.x-toggle-skewed.x-toggle-btn:active:before {
left: -10%;
}

.x-toggle:checked + label > .x-toggle-skewed.x-toggle-btn {
background: #86d993;
}

.x-toggle:checked + label > .x-toggle-skewed.x-toggle-btn:before {
left: -100%;
left: 100%;
}

.x-toggle:checked + label > .x-toggle-skewed.x-toggle-btn:after {
left: 0;
}

.x-toggle:checked + label > .x-toggle-skewed.x-toggle-btn:active:after {
left: 10%;
}

.x-toggle-skewed.small {
width: 3em;
height: 1.6em;
Expand Down
116 changes: 114 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,12 @@ amd-name-resolver@0.0.6:
dependencies:
ensure-posix-path "^1.0.1"

amd-name-resolver@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/amd-name-resolver/-/amd-name-resolver-0.0.7.tgz#814301adfe8a2f109f6e84d5e935196efb669615"
dependencies:
ensure-posix-path "^1.0.1"

amdefine@>=0.0.4:
version "1.0.1"
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
Expand Down Expand Up @@ -600,6 +606,12 @@ babel-plugin-ember-modules-api-polyfill@^1.4.1:
dependencies:
ember-rfc176-data "^0.2.0"

babel-plugin-ember-modules-api-polyfill@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-2.0.1.tgz#baaf26dcebe2ed1de120021bc42be29f520497b3"
dependencies:
ember-rfc176-data "^0.2.7"

babel-plugin-eval@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/babel-plugin-eval/-/babel-plugin-eval-1.0.1.tgz#a2faed25ce6be69ade4bfec263f70169195950da"
Expand Down Expand Up @@ -1138,6 +1150,21 @@ broccoli-babel-transpiler@^6.0.0:
rsvp "^3.5.0"
workerpool "^2.2.1"

broccoli-babel-transpiler@^6.1.2:
version "6.1.2"
resolved "https://registry.yarnpkg.com/broccoli-babel-transpiler/-/broccoli-babel-transpiler-6.1.2.tgz#26019c045b5ea3e44cfef62821302f9bd483cabd"
dependencies:
babel-core "^6.14.0"
broccoli-funnel "^1.0.0"
broccoli-merge-trees "^1.0.0"
broccoli-persistent-filter "^1.4.0"
clone "^2.0.0"
hash-for-dep "^1.0.2"
heimdalljs-logger "^0.1.7"
json-stable-stringify "^1.0.0"
rsvp "^3.5.0"
workerpool "^2.2.1"

broccoli-brocfile-loader@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/broccoli-brocfile-loader/-/broccoli-brocfile-loader-0.18.0.tgz#2e86021c805c34ffc8d29a2fb721cf273e819e4b"
Expand Down Expand Up @@ -1267,6 +1294,24 @@ broccoli-funnel@^1.0.0, broccoli-funnel@^1.0.1, broccoli-funnel@^1.0.6, broccoli
symlink-or-copy "^1.0.0"
walk-sync "^0.3.1"

broccoli-funnel@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/broccoli-funnel/-/broccoli-funnel-2.0.1.tgz#6823c73b675ef78fffa7ab800f083e768b51d449"
dependencies:
array-equal "^1.0.0"
blank-object "^1.0.1"
broccoli-plugin "^1.3.0"
debug "^2.2.0"
fast-ordered-set "^1.0.0"
fs-tree-diff "^0.5.3"
heimdalljs "^0.2.0"
minimatch "^3.0.0"
mkdirp "^0.5.0"
path-posix "^1.0.0"
rimraf "^2.4.3"
symlink-or-copy "^1.0.0"
walk-sync "^0.3.1"

broccoli-kitchen-sink-helpers@^0.2.5:
version "0.2.9"
resolved "https://registry.yarnpkg.com/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.9.tgz#a5e0986ed8d76fb5984b68c3f0450d3a96e36ecc"
Expand Down Expand Up @@ -1377,7 +1422,7 @@ broccoli-sri-hash@^2.1.0:
sri-toolbox "^0.2.0"
symlink-or-copy "^1.0.1"

broccoli-stew@^1.2.0, broccoli-stew@^1.3.3:
broccoli-stew@^1.2.0, broccoli-stew@^1.3.3, broccoli-stew@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/broccoli-stew/-/broccoli-stew-1.5.0.tgz#d7af8c18511dce510e49d308a62e5977f461883c"
dependencies:
Expand Down Expand Up @@ -2183,7 +2228,7 @@ electron-to-chromium@^1.3.14:
version "1.3.15"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369"

ember-cli-babel@^5.1.3:
ember-cli-babel@^5.1.3, ember-cli-babel@^5.1.6:
version "5.2.4"
resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-5.2.4.tgz#5ce4f46b08ed6f6d21e878619fb689719d6e8e13"
dependencies:
Expand All @@ -2210,6 +2255,23 @@ ember-cli-babel@^6.0.0, ember-cli-babel@^6.0.0-beta.7, ember-cli-babel@^6.3.0:
clone "^2.0.0"
ember-cli-version-checker "^2.0.0"

ember-cli-babel@^6.6.0, ember-cli-babel@^6.8.2:
version "6.8.2"
resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-6.8.2.tgz#eac2785964f4743f4c815cd53c6288f00cc087d7"
dependencies:
amd-name-resolver "0.0.7"
babel-plugin-debug-macros "^0.1.11"
babel-plugin-ember-modules-api-polyfill "^2.0.1"
babel-plugin-transform-es2015-modules-amd "^6.24.0"
babel-polyfill "^6.16.0"
babel-preset-env "^1.5.1"
broccoli-babel-transpiler "^6.1.2"
broccoli-debug "^0.6.2"
broccoli-funnel "^1.0.0"
broccoli-source "^1.1.0"
clone "^2.0.0"
ember-cli-version-checker "^2.0.0"

ember-cli-broccoli-sane-watcher@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/ember-cli-broccoli-sane-watcher/-/ember-cli-broccoli-sane-watcher-2.0.4.tgz#f43f42f75b7509c212fb926cd9aea86ae19264c6"
Expand Down Expand Up @@ -2498,6 +2560,44 @@ ember-export-application-global@^2.0.0:
dependencies:
ember-cli-babel "^6.0.0-beta.7"

ember-factory-for-polyfill@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/ember-factory-for-polyfill/-/ember-factory-for-polyfill-1.2.0.tgz#e27752a7d9dbd5336e8b470341bc1c55bbe3e4d2"
dependencies:
ember-cli-version-checker "^1.2.0"

ember-gestures@^0.4.7:
version "0.4.7"
resolved "https://registry.yarnpkg.com/ember-gestures/-/ember-gestures-0.4.7.tgz#c17559622377515ec996fd4c17abce51e026f106"
dependencies:
broccoli-funnel "^2.0.1"
broccoli-merge-trees "^2.0.0"
broccoli-stew "^1.5.0"
ember-cli-babel "^6.8.2"
ember-cli-htmlbars "^2.0.1"
ember-cli-version-checker "^1.2.0"
ember-getowner-polyfill "^1.2.3"
hammerjs "^2.0.8"
rsvp "^3.1.0"

ember-getowner-polyfill@^1.2.3:
version "1.2.5"
resolved "https://registry.yarnpkg.com/ember-getowner-polyfill/-/ember-getowner-polyfill-1.2.5.tgz#ceff8a09897d0d7e05c821bb71666a95eb26dc92"
dependencies:
ember-cli-babel "^5.1.6"
ember-cli-version-checker "^1.2.0"
ember-factory-for-polyfill "^1.1.0"

ember-hammertime@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/ember-hammertime/-/ember-hammertime-1.2.4.tgz#33f540c1fe94df7dbfef6d256f400e0780905e10"
dependencies:
broccoli-funnel "^2.0.1"
broccoli-merge-trees "^2.0.0"
broccoli-stew "^1.5.0"
ember-cli-babel "^6.8.2"
hammer-timejs "^1.1.0"

ember-load-initializers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-1.0.0.tgz#4919eaf06f6dfeca7e134633d8c05a6c9921e6e7"
Expand Down Expand Up @@ -2526,6 +2626,10 @@ ember-rfc176-data@^0.2.0:
version "0.2.5"
resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.2.5.tgz#b26f62d9c03d3b02485153cf31137e089299839a"

ember-rfc176-data@^0.2.7:
version "0.2.7"
resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.2.7.tgz#bd355bc9b473e08096b518784170a23388bc973b"

ember-router-generator@^1.0.0:
version "1.2.3"
resolved "https://registry.yarnpkg.com/ember-router-generator/-/ember-router-generator-1.2.3.tgz#8ed2ca86ff323363120fc14278191e9e8f1315ee"
Expand Down Expand Up @@ -3354,6 +3458,14 @@ growly@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"

hammer-timejs@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/hammer-timejs/-/hammer-timejs-1.1.0.tgz#fc07ec1e4012228fe51b6a51218ec12661a32a42"

hammerjs@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"

handlebars@^4.0.2, handlebars@^4.0.4, handlebars@^4.0.6:
version "4.0.10"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.10.tgz#3d30c718b09a3d96f23ea4cc1f403c4d3ba9ff4f"
Expand Down

0 comments on commit 398f8d6

Please sign in to comment.