Disable sidebar swipe in kiosk mode (#338)

* Disable sidebar swipe in kiosk mode

* Generalize disableSwipe

* Wrap in iife
This commit is contained in:
Andrey 2017-07-16 17:52:34 +03:00 committed by Paulus Schoutsen
parent 7c079dc01f
commit 6ba8338e18

View File

@ -41,8 +41,8 @@
<paper-drawer-panel id='drawer' <paper-drawer-panel id='drawer'
force-narrow='[[computeForceNarrow(narrow, dockedSidebar)]]' force-narrow='[[computeForceNarrow(narrow, dockedSidebar)]]'
responsive-width='0' disable-swipe='[[isSelectedMap]]' responsive-width='0' disable-swipe='[[_computeDisableSwipe(routeData)]]'
disable-edge-swipe='[[isSelectedMap]]'> disable-edge-swipe='[[_computeDisableSwipe(routeData)]]'>
<ha-sidebar <ha-sidebar
slot="drawer" slot="drawer"
narrow='[[narrow]]' narrow='[[narrow]]'
@ -81,91 +81,98 @@
</dom-module> </dom-module>
<script> <script>
Polymer({ (function () {
is: 'home-assistant-main', var NON_SWIPABLE_PANELS = ['kiosk', 'map'];
Polymer({
is: 'home-assistant-main',
properties: { properties: {
hass: Object, hass: Object,
narrow: Boolean, narrow: Boolean,
route: { route: {
type: Object, type: Object,
observer: '_routeChanged', observer: '_routeChanged',
},
routeData: Object,
routeTail: Object,
statesRouteTail: Object,
dockedSidebar: {
type: Boolean,
computed: 'computeDockedSidebar(hass)',
},
}, },
routeData: Object,
routeTail: Object,
statesRouteTail: Object,
dockedSidebar: { listeners: {
type: Boolean, 'hass-open-menu': 'handleOpenMenu',
computed: 'computeDockedSidebar(hass)', 'hass-close-menu': 'handleCloseMenu',
'hass-start-voice': 'handleStartVoice',
}, },
},
listeners: { ready: function () {
'hass-open-menu': 'handleOpenMenu', if (!this.hass) return;
'hass-close-menu': 'handleCloseMenu', var _this = this;
'hass-start-voice': 'handleStartVoice', this.hass.callApi('get', 'themes').then(
}, function (themes) {
window.hassUtil.applyThemesOnElement(_this, themes);
});
this.hass.connection.subscribeEvents(
function (event) {
window.hassUtil.applyThemesOnElement(_this, event.data);
},
'themes_updated');
},
ready: function () { _routeChanged: function () {
if (!this.hass) return; if (this.narrow) {
var _this = this; this.$.drawer.closeDrawer();
this.hass.callApi('get', 'themes').then( }
function (themes) { },
window.hassUtil.applyThemesOnElement(_this, themes);
});
this.hass.connection.subscribeEvents(
function (event) {
window.hassUtil.applyThemesOnElement(_this, event.data);
},
'themes_updated');
},
_routeChanged: function () { handleStartVoice: function (ev) {
if (this.narrow) { ev.stopPropagation();
this.$.voiceDialog.startListening();
},
handleOpenMenu: function () {
if (this.narrow) {
this.$.drawer.openDrawer();
} else {
this.fire('hass-dock-sidebar', { dock: true });
}
},
handleCloseMenu: function () {
this.$.drawer.closeDrawer(); this.$.drawer.closeDrawer();
} if (this.dockedSidebar) {
}, this.fire('hass-dock-sidebar', { dock: false });
}
},
handleStartVoice: function (ev) { attached: function () {
ev.stopPropagation(); window.removeInitMsg();
this.$.voiceDialog.startListening(); if (document.location.pathname === '/') {
}, history.replaceState(null, null, '/states');
}
},
handleOpenMenu: function () { computeForceNarrow: function (narrow, dockedSidebar) {
if (this.narrow) { return narrow || !dockedSidebar;
this.$.drawer.openDrawer(); },
} else {
this.fire('hass-dock-sidebar', { dock: true });
}
},
handleCloseMenu: function () { computeDockedSidebar: function (hass) {
this.$.drawer.closeDrawer(); return hass.dockedSidebar;
if (this.dockedSidebar) { },
this.fire('hass-dock-sidebar', { dock: false });
}
},
attached: function () { _computeSelected: function (routeData) {
window.removeInitMsg(); return routeData.panel || 'states';
if (document.location.pathname === '/') { },
history.replaceState(null, null, '/states');
}
},
computeForceNarrow: function (narrow, dockedSidebar) { _computeDisableSwipe: function (routeData) {
return narrow || !dockedSidebar; return NON_SWIPABLE_PANELS.indexOf(routeData.panel) !== -1;
}, },
});
computeDockedSidebar: function (hass) { }());
return hass.dockedSidebar;
},
_computeSelected: function (routeData) {
return routeData.panel || 'states';
},
});
</script> </script>