Skip to content

Commit

Permalink
use IronOverlayBehavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@valdrinkoshi
valdrinkoshi committed Nov 23, 2015
1 parent 5436bda commit b220515
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 63 deletions.
1 change: 1 addition & 0 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"main": "paper-toast.html",
"dependencies": {
"iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0",
"iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#~1.0.9",

This comment has been minimized.

Sign in to view

Copy link
@ebidel

ebidel Nov 25, 2015

Contributor

This should be ^1.0.9 to pick up minor releases

This comment has been minimized.

Sign in to view

Copy link
@valdrinkoshi

valdrinkoshi Nov 25, 2015

Author Member

good catch! will correct
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.1.0"
},
Expand Down
2 changes: 2 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@
</head>
<body>

<paper-toast text="hi there!" opened></paper-toast>

<paper-button raised onclick="document.querySelector('#toast1').show()">Discard Draft</paper-button>

<paper-button raised onclick="document.querySelector('#toast2').show()">Get Messages</paper-button>
Expand Down
104 changes: 57 additions & 47 deletions paper-toast.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
<link rel="import" href="../paper-styles/typography.html">

<!--
Expand All @@ -29,7 +30,6 @@
:host {
display: inline-block;
position: fixed;

background: #323232;
color: #f1f1f1;
min-height: 48px;
Expand All @@ -42,13 +42,10 @@
left: 12px;
font-size: 14px;
cursor: default;

-webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
-webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
transition: visibility 0.3s, transform 0.3s;

-webkit-transform: translateY(100px);
-webkit-transform: translateY(100px);
transform: translateY(100px);

visibility: hidden;
}

Expand All @@ -64,10 +61,9 @@
border-radius: 0;
}

:host(.paper-toast-open){
:host(.paper-toast-open) {
visibility: visible;

-webkit-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
</style>
Expand All @@ -81,6 +77,10 @@
var PaperToast = Polymer({
is: 'paper-toast',

behaviors: [
Polymer.IronOverlayBehavior
],

properties: {
/**
* The duration in milliseconds to show the toast.
Expand All @@ -95,76 +95,86 @@
*/
text: {
type: String,
value: ""
value: ''
},

/**
* True if the toast is currently visible.
* Set to false to enable closing of the toast by clicking outside it.
*/
visible: {
noCancelOnOutsideClick: {
type: Boolean,
readOnly: true,
observer: '_visibleChanged'
}
value: true
},
},

created: function() {
Polymer.IronA11yAnnouncer.requestAvailability();
get visible() {
console.warn('`visible` is deprecated, use `opened` instead');
return this.opened;
},

attached: function() {
this.hide();
created: function() {
Polymer.IronA11yAnnouncer.requestAvailability();
},

/**
* Show the toast.
* @method show
*/
show: function() {
if (PaperToast.currentToast) {
PaperToast.currentToast.hide();
}
PaperToast.currentToast = this;
this.removeAttribute('aria-hidden');
this._setVisible(true);
this.fire('iron-announce', {
text: this.text
});
// auto-close if duration is a positive finite number
if (this.duration > 0 && this.duration !== Infinity) {
this.debounce('hide', this.hide, this.duration);
}
this.open();
},

/**
* Hide the toast
*/
hide: function() {
this.setAttribute('aria-hidden', 'true');
this._setVisible(false);
if (PaperToast.currentToast === this) {
this.close();
},

/**
* Overridden from `IronOverlayBehavior`.
* Called when the value of `opened` changes.
*/
_openedChanged: function() {
if (this.opened) {
if (PaperToast.currentToast && PaperToast.currentToast !== this) {
PaperToast.currentToast.close();
}
PaperToast.currentToast = this;
this.fire('iron-announce', {
text: this.text
});
// auto-close if duration is a positive finite number
if (this.duration > 0 && this.duration !== Infinity) {
this.debounce('close', this.close, this.duration);
}
} else if (PaperToast.currentToast === this) {
PaperToast.currentToast = null;
}
Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
},

/**
* Toggle the opened state of the toast.
* @method toggle
* Overridden from `IronOverlayBehavior`.
*/
toggle: function() {
if (!this.visible) {
this.show();
} else {
this.hide();
}
_renderOpened: function() {
this.classList.add('paper-toast-open');
},
/**
* Overridden from `IronOverlayBehavior`.
*/
_renderClosed: function() {
this.classList.remove('paper-toast-open');
},

_visibleChanged: function(visible) {
this.toggleClass('paper-toast-open', visible);
_onIronResize: function() {
Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments);
if (this.opened) {
// override the inline `static` setup by iron-fit-behavior since we need position: `fixed` for correct display
this.style.position = '';
}
}
});

PaperToast.currentToast = null;
})();
</script>
</dom-module>
29 changes: 13 additions & 16 deletions test/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@

<test-fixture id="show">
<template>
<paper-toast></paper-toast>
<paper-toast opened></paper-toast>
</template>
</test-fixture>

Expand All @@ -43,21 +43,18 @@

test('is hidden', function() {
toast = fixture('basic');
assert.isFalse(toast.visible, '`visible` is false');
assert.strictEqual(toast.getAttribute('aria-hidden'), 'true', '`aria-hidden` attribute is set to `true`');
assert.isFalse(toast.opened, '`opened` is false');
});

test('is visible', function() {
toast = fixture('show');
toast.show();
assert.isTrue(toast.visible, '`visible` is true');
assert.isFalse(toast.hasAttribute('aria-hidden'), '`aria-hidden` attribute is not set');
assert.isTrue(toast.opened, '`opened` is true');
});

test('show() will update `visible`', function() {
test('show() will update `opened`', function() {
toast = fixture('basic');
toast.show();
assert.isTrue(toast.visible, '`visible` is true');
assert.isTrue(toast.opened, '`opened` is true');
});

test('show() will auto-close toast after `duration` milliseconds', function(done) {
Expand All @@ -67,7 +64,7 @@
toast.show();
assert.isTrue(debounceSpy.called, '`debounce` was called');
setTimeout(function(){
assert.isFalse(toast.visible, '`visible` is false');
assert.isFalse(toast.opened, '`opened` is false');
done();
}, 12);
});
Expand Down Expand Up @@ -100,13 +97,13 @@
test('there is only 1 toast opened', function() {
var toast1 = fixture('basic');
var toast2 = fixture('show');
toast2.show();
toast1.show();
assert.isTrue(toast1.visible, 'toast1 is visible');
assert.isFalse(toast2.visible, 'toast2 is not visible');
toast2.show();
assert.isFalse(toast1.visible, 'toast1 is now not visible');
assert.isTrue(toast2.visible, 'toast2 is now visible');
toast2.open();
toast1.open();
assert.isTrue(toast1.opened, 'toast1 is opened');
assert.isFalse(toast2.opened, 'toast2 is not opened');
toast2.open();
assert.isFalse(toast1.opened, 'toast1 is now not opened');
assert.isTrue(toast2.opened, 'toast2 is now opened');
});

});
Expand Down

0 comments on commit b220515

Please sign in to comment.