Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Distinguish between tap events (fixes #1, #2) #3

Merged
merged 5 commits into from
Mar 27, 2018
Merged

Distinguish between tap events (fixes #1, #2) #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0be4dfc
distinguish between tap on content vs icon
talimarcus Feb 13, 2018
330b1f1
rename _el now that its not a reference to the HTML element
talimarcus Feb 13, 2018
d54cb08
add tests for new tap event detail
talimarcus Feb 28, 2018
da232b5
use MockInteractions instead of click() in tests
talimarcus Feb 28, 2018
dea6530
remove logs and styles for testing
talimarcus Mar 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@
"px-typeahead": "^2.0.0",
"px-normalize-design": "^1.0.2",
"px-box-sizing-design": "^1.0.2",
"web-component-tester": "^6.4.0"
"px-buttons-design": "^2.0.6",
"web-component-tester": "^6.4.0",
"iron-test-helpers": "^2.0.0"
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
Expand Down
2 changes: 1 addition & 1 deletion css/px-chip-styles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<dom-module id="px-chip-styles">
<template>
<style>
@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */.heading--subsection,.label{letter-spacing:var(--px-headings-letter-spacing,.3px)}html{background-color:var(--px-base-background-color,#fff);font-size:15px;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}a:active,a:hover{outline:0}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.heading--section,.heading--subsection,.label{text-transform:uppercase}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.a11y-desk-and-up,.visuallyhidden-desk,.visuallyhidden-desk-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:120em){.a11y-large-and-up,.visuallyhidden-large-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alpha{font-size:5rem;line-height:1.06667;font-weight:400}.beta{font-size:4rem;line-height:1;font-weight:400}.delta,.gamma{line-height:1.33333;font-weight:400}.gamma{font-size:3rem}.delta{font-size:2rem}.epsilon{font-size:1.33333rem;line-height:1;font-weight:400}.zeta{font-size:.8rem;line-height:1.66667;font-weight:400}.heading--page{font-size:2rem;line-height:1.33333;color:var(--px-headings-heading-page-color,#2c404c)}.heading--section{font-size:1.33333rem;line-height:1;color:var(--px-headings-heading-section-color,#677e8c)}.heading--subsection{font-size:1rem;line-height:1.33333;color:var(--px-headings-heading-subsection-color,#2c404c);background-color:var(--px-headings-heading-subsection-background,rgba(136,154,165,.15));display:flex;padding-left:5px;padding-right:5px}.label{font-size:.8rem;line-height:1.66667;color:var(--px-headings-label-color,#677e8c)}.value{font-size:1rem;line-height:1.33333;color:var(--px-headings-value-color,#2c404c)}.chip{display:inline-block;align-items:center;height:1.33333rem;padding-left:.66667rem;padding-right:.66667rem;background-color:var(--px-chip-background-color,#fff);border:1px solid var(--px-chip-border-color,gray)}.chip:hover{cursor:pointer;background-color:var(--px-chip-background-color--hover,rgba(128,128,128,.2));border:1px solid var(--px-chip-border-color--hover,gray)}.chip:hover .chip__actionable-icon{color:var(--px-chip-icon-color--hover,#00f)}:host(:focus){outline:0}.chip[selected]{background-color:var(--px-chip-background-color--selected,#fff);border:1px solid var(--px-chip-border-color--selected,#00f)}.chip[show-icon]{padding-right:5px}.flexContainer{display:flex;justify-content:center;align-items:center}.chip__content{line-height:1.2rem;display:inline-block;min-width:0;max-width:var(--px-chip-max-width,8rem);color:var(--px-chip-text-color,gray)}.chip:hover .chip__content{color:var(--px-chip-icon-color--hover,#00f)}.chip__content[selected]{color:var(--px-chip-text-color--selected,#00f)}.chip__actionable-icon{--iron-icon-height:0.8rem;--iron-icon-width:0.8rem;color:var(--px-chip-icon-color,gray);margin-left:.33333rem}
@charset "UTF-8";/*! normalize.css v3.0.2 | MIT License | git.io/normalize */.heading--subsection,.label{letter-spacing:var(--px-headings-letter-spacing,.3px)}.btn,.truncate{white-space:nowrap}.btn:active,.chip__content:focus,a:active,a:hover{outline:0}html{background-color:var(--px-base-background-color,#fff);font-size:15px;overflow-y:scroll;min-height:100%;box-sizing:border-box}:host,html{color:var(--px-base-text-color,#2c404c);line-height:1.33333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,figure{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}address,blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,table,ul{margin-bottom:1rem}li>ol,li>ul{margin-bottom:0}dd,ol,ul{margin-left:2rem}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}*,:after,:before{box-sizing:inherit}:host{/*! Comment to prevent cssmin munging this rule with html above and borking Safari */box-sizing:border-box}a{background-color:transparent}a:link,a:visited{color:#007acc}a:hover{color:#005c99}a:active{color:#003d66}.float--right{float:right!important}.float--left{float:left!important}.float--none{float:none!important}.text--left{text-align:left!important}.text--center{text-align:center!important}.proceed,.text--right{text-align:right!important}.full-height{height:100%!important}.informative{cursor:help!important}.pointer{cursor:pointer!important}.muted{opacity:.5!important}.caps{text-transform:uppercase!important}.heading--section,.heading--subsection,.label{text-transform:uppercase}.hidden{display:none!important;visibility:hidden}.a11y,.visuallyhidden{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}.a11y.focusable:active,.a11y.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{position:static;overflow:visible;width:auto;height:auto;margin:0;clip:auto}@media screen and (min-width:45em) and (max-width:63.9375em){.a11y-lap,.visuallyhidden-lap{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:63.9375em){.a11y-portable,.visuallyhidden-portable{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (max-width:44.9375em){.a11y-palm,.visuallyhidden-palm{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:45em){.a11y-lap-and-up,.visuallyhidden-lap-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:64em){.a11y-desk,.a11y-desk-and-up,.visuallyhidden-desk,.visuallyhidden-desk-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media screen and (min-width:120em){.a11y-large-and-up,.visuallyhidden-large-and-up{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx){.a11y-retina,.visuallyhidden-retina{position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;clip:rect(0 0 0 0)!important}}.invisible{visibility:hidden!important}.truncate{overflow:hidden;text-overflow:ellipsis}.alpha{font-size:5rem;line-height:1.06667;font-weight:400}.beta{font-size:4rem;line-height:1;font-weight:400}.delta,.gamma{line-height:1.33333;font-weight:400}.gamma{font-size:3rem}.delta{font-size:2rem}.epsilon{font-size:1.33333rem;line-height:1;font-weight:400}.zeta{font-size:.8rem;line-height:1.66667;font-weight:400}.heading--page{font-size:2rem;line-height:1.33333;color:var(--px-headings-heading-page-color,#2c404c)}.heading--section{font-size:1.33333rem;line-height:1;color:var(--px-headings-heading-section-color,#677e8c)}.heading--subsection{font-size:1rem;line-height:1.33333;color:var(--px-headings-heading-subsection-color,#2c404c);background-color:var(--px-headings-heading-subsection-background,rgba(136,154,165,.15));display:flex;padding-left:5px;padding-right:5px}.btn,.chip{display:inline-block}.label{font-size:.8rem;line-height:1.66667;color:var(--px-headings-label-color,#677e8c)}.value{font-size:1rem;line-height:1.33333;color:var(--px-headings-value-color,#2c404c)}.btn{overflow:visible;height:var(--px-btn-height,2em);min-width:var(--px-btn-min-width,4.66667em);margin:0;border:1px solid var(--px-btn-border-color,transparent);border-radius:0!important;padding:0 calc(var(--px-btn-height,2em)/ 2);box-shadow:var(--px-btn-shadow--light,none);font:inherit;line-height:calc(var(--px-btn-height,2em) - 2px);-webkit-font-smoothing:antialiased;cursor:pointer;text-align:center;text-decoration:none;text-transform:none;background-color:var(--px-btn-background,#d8e0e5);transition:background .4s,border-color .4s,color .4s}.btn--bare,.btn--icon{height:var(--px-btn-height,2em);padding-right:0;padding-left:0}.btn,.btn:active,.btn:hover,.btn:link,.btn:visited{color:var(--px-btn-color,#2c404c)}.btn:focus,.btn:hover{border-color:var(--px-btn-border-color--hover,transparent);box-shadow:var(--px-btn-shadow,none);background-color:var(--px-btn-background--hover,#a3b5bf)}.btn:active{border-color:var(--px-btn-border-color--pressed,transparent);box-shadow:none;background-color:var(--px-btn-background--pressed,#889aa5)}@-moz-document url-prefix(){.btn:not(button){line-height:1.8em}}button.btn{-webkit-appearance:button}.btn+.btn{margin-left:.66667rem}.btn--bare{border:0!important;border-radius:0!important;line-height:inherit}.btn--bare,.btn--bare:active,.btn--bare:focus,.btn--bare:hover,.btn--bare:link,.btn--bare:visited{box-shadow:none;background:0 0;outline:0}.btn--bare,.btn--bare:link,.btn--bare:visited{color:var(--px-btn-bare-color,#2c404c)}.btn--bare:focus,.btn--bare:hover{color:var(--px-btn-bare-color--hover,#007acc)}.btn--bare:active{color:var(--px-btn-bare-color--pressed,#003d66)}.btn--icon{width:var(--px-btn-height,2em);min-width:var(--px-btn-height,2em);border:var(--px-btn-icon-border,0 solid)!important;background-color:var(--px-btn-icon-background,transparent)!important}@-moz-document url-prefix(){.btn--icon{line-height:1.8em}}:host(:focus){outline:0}.chip{align-items:center;height:1.33333rem;background-color:var(--px-chip-background-color,#fff);border:1px solid var(--px-chip-border-color,gray)}.chip:hover{cursor:pointer;background-color:var(--px-chip-background-color--hover,rgba(128,128,128,.2));border:1px solid var(--px-chip-border-color--hover,gray)}.chip[selected]{background-color:var(--px-chip-background-color--selected,#fff);border:1px solid var(--px-chip-border-color--selected,#00f)}.flexContainer{display:flex;justify-content:center;align-items:center}.chip__content{padding-left:.66667rem;padding-right:.66667rem;line-height:1.2rem;display:inline-block;min-width:0;max-width:var(--px-chip-max-width,8rem);color:var(--px-chip-text-color,gray)}.chip[show-icon] .chip__button,.chip[show-icon] .chip__content{padding-right:.33333rem}.chip[show-icon] .chip__content:hover{color:var(--px-chip-icon-color--hover,#00f)}.chip__content[selected]{color:var(--px-chip-text-color--selected,#00f)}.chip__button{height:1.06667rem;width:1.06667rem}.chip__button--icon{color:var(--px-chip-icon-color,gray);--iron-icon-height:1.06667rem;--iron-icon-width:1.06667rem}.chip__button:hover .chip__button--icon{color:var(--px-chip-icon-color--hover,#00f)}
</style>
</template>
</dom-module>
3 changes: 1 addition & 2 deletions demo/px-chip-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@
<link rel="import" href="../../px-demo/px-demo-component-snippet.html" />

<!-- Imports for this component -->

<link rel="import" href="../px-chip.html" />

<!-- Demo DOM module -->
<dom-module id="px-chip-demo">
<template>


<!-- Header -->
<px-demo-header
Expand Down
5 changes: 3 additions & 2 deletions demo/simple-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@
<style is="custom-style" include="px-theme-styles"></style>
</custom-style>
<p>A px-chip with text (static chip)</p>
<px-chip content="my text"></px-chip>
<px-chip content="New"></px-chip>

<p>A px-chip with text and an icon (actionable chip)</p>
<px-chip content="an icon" show-icon not-selectable></px-chip>
<px-chip content="Filtery" show-icon not-selectable></px-chip>

</body>

</html>
38 changes: 25 additions & 13 deletions px-chip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,14 @@
<dom-module id="px-chip">
<template>
<style include="px-chip-styles"></style>
<iron-a11y-keys target="[[_el]]" keys="space enter" on-keys-pressed="_handleTapped"></iron-a11y-keys>
<iron-a11y-keys target="[[_chipContent]]" keys="space enter" on-keys-pressed="_handleTapped"></iron-a11y-keys>
<div class="chip zeta" selected$="[[selected]]" show-icon$=[[showIcon]]>
<div class="flexContainer">
<span class="chip__content truncate" selected$="[[selected]]">{{content}}</span>
<span id="content" class="chip__content truncate" selected$="[[selected]]">{{content}}</span>
<template is="dom-if" if="{{showIcon}}">
<px-icon icon={{icon}} class="chip__actionable-icon"></px-icon>
<button class="btn btn--bare btn--icon chip__button">
<px-icon icon={{icon}} class="chip__button--icon"></px-icon>
</button>
</template>
</div>
</div>
Expand Down Expand Up @@ -117,38 +119,48 @@
value: false
},
/**
* A reference to this HTML element. Used by iron-a11y-keys.
* A reference to the 'content' part of the chip. Used by iron-a11y-keys.
*
* @property _el
* @property _chipContent
*/
_el: {
_chipContent: {
type: HTMLElement
}
},
listeners: {
'tap': '_handleTapped'
},
attached: function() {
this.setAttribute("tabindex", "0");
this._el = this;
ready: function() {
this._chipContent = this.$.content;
this._chipContent.setAttribute("tabindex", "0");
},
_handleTapped: function(e) {
let contentTapped = false;
let iconTapped = false;
const {rootTarget} = Polymer.dom(e);
if (e.detail.keyboardEvent) {
e.detail.keyboardEvent.preventDefault()
e.detail.keyboardEvent.preventDefault();
}

if (rootTarget.nodeName === 'SPAN' || rootTarget.nodeName === 'IRON-A11Y-KEYS') {
contentTapped = true;
} else if (rootTarget.nodeName === 'IRON-ICON' || rootTarget.nodeName === 'BUTTON') {
iconTapped = true;
}
e.stopPropagation();
if (!this.notSelectable) {
this.selected = !this.selected;
}

/**
* Event fired when a px-chip is tapped. Use this event to handle toggling
* (in the case of a selectable chip), or for taking an action (in the case of an actionable chip).
* The `evt.detail` object will contain current values for certain properties, e.g.
* The `evt.detail` object will contain current values for certain properties and variables, e.g.
*
* {"content":"Some text", "selected":false}
* {"content" : "Some text", "selected" : false, "contentTapped" : false, "iconTapped" : true}
* @event px-chip-tapped
*/
this.fire('px-chip-tapped', {"content":this.content, "selected":this.selected});
this.fire('px-chip-tapped', { "content" : this.content, "selected" : this.selected, "contentTapped" : contentTapped, "iconTapped" : iconTapped });
}
});
</script>
Loading