##// END OF EJS Templates
polymer: prepare for 3.x migration
polymer: prepare for 3.x migration

File last commit:

r3149:a1e63a84 default
r3149:a1e63a84 default
Show More
rhodecode-toast.html
123 lines | 4.3 KiB | text/html | HtmlLexer
<link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../../../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
<dom-module id="rhodecode-toast">
<template>
<style include="shared-styles"></style>
<link rel="stylesheet" href="rhodecode-toast.css">
<template is="dom-if" if="[[hasToasts]]">
<div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
<template is="dom-repeat" items="[[toasts]]">
<div class$="alert alert-[[item.level]]">
<div on-tap="dismissNotification" class="toast-close" index-pos="[[index]]">
<span>[[_gettext('Close')]]</span>
</div>
<rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
</div>
</template>
</div>
</template>
</template>
<script>
Polymer({
is: 'rhodecode-toast',
properties: {
toasts: {
type: Array,
value: function(){
return []
}
},
isFixed: {
type: Boolean,
value: false
},
hasToasts: {
type: Boolean,
computed: '_computeHasToasts(toasts.*)'
},
keyEventTarget: {
type: Object,
value: function() {
return document.body;
}
}
},
behaviors: [
Polymer.IronA11yKeysBehavior
],
observers: [
'_changedToasts(toasts.splices)'
],
keyBindings: {
'esc:keyup': '_hideOnEsc'
},
_hideOnEsc: function (event) {
return this.dismissNotifications();
},
_computeHasToasts: function(){
return this.toasts.length > 0;
},
_debouncedCalc: function(){
// calculate once in a while
this.debounce('debouncedCalc', this.toastInWindow, 25);
},
conditionalClass: function(){
return this.isFixed ? 'fixed': '';
},
toastInWindow: function() {
if (!this._headerNode){
return true
}
var headerHeight = this._headerNode.offsetHeight;
var scrollPosition = window.scrollY;
if (this.isFixed){
this.isFixed = 1 <= scrollPosition;
}
else{
this.isFixed = headerHeight <= scrollPosition;
}
},
attached: function(){
this._headerNode = document.querySelector('.header', document);
this.listen(window,'scroll', '_debouncedCalc');
this.listen(window,'resize', '_debouncedCalc');
this._debouncedCalc();
},
_changedToasts: function(newValue, oldValue){
$.Topic('/favicon/update').publish({count: this.toasts.length});
},
dismissNotification: function(e) {
$.Topic('/favicon/update').publish({count: this.toasts.length-1});
var idx = e.target.parentNode.indexPos
this.splice('toasts', idx, 1);
},
dismissNotifications: function(){
$.Topic('/favicon/update').publish({count: 0});
this.splice('toasts', 0);
},
handleNotification: function(data){
if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
// do not act if notifications are disabled
return
}
this.push('toasts',{
level: data.message.level,
message: data.message.message
});
},
_gettext: _gettext
});
</script>
</dom-module>