有没有办法确定 drawerPanel 是打开还是关闭?
Is there a way to determine if drawerPanel is open or closed?
或者更确切地说,一个已经在聚合物源中定义的本地方法?我确定我可以编写一个函数来很容易地处理逻辑,但是我已经进行了一些挖掘并且没有想出任何关于已经实现的确定方法的方法。只是想知道我是否必须自己写点东西。
编辑:刚刚意识到,即使我确实编写了一个标记功能来跟踪抽屉何时通过 toggleDrawer()
处于 opened/closed,它也会在抽屉被打开或滑动时被抛出关闭,所以我当然希望有一个本地方法。
编辑:使用@Justin XL 链接我的页面中的信息,我做了一些测试,发现通过滑动或按下抽屉按钮一般打开或关闭抽屉,触发了 2 个核心选择事件,但关闭通过单击一个抽屉项目 4。我已经设法组合了一个解决方案,该解决方案应该能够在任何时候根据 2 个变量确定抽屉是打开还是关闭。
drawerOpenIgnoreClose = false;
drawerOpen = false;
drawerEvent = 0;
drawer.addEventListener('core-select', function() {
drawerEvent++;
//console.log('drawerpanel event fired ' + drawerEvent);
if (drawerEvent >= 2) {
if (drawerOpenIgnoreClose) {
drawerOpenIgnoreClose = false;
console.log('drawer is closed, not from click of menu item');
} else {
drawerOpenIgnoreClose = true;
console.log('drawer is open');
}
drawerEvent = 0;
}
});
并且每次调用drawerPanel.closerDrawer()
,即每次单击菜单项时,drawerOpen
都设置为false。然后我可以确定抽屉是否打开
function checkDrawer() {
if (drawerOpen && drawerOpenIgnoreClose) {
console.log('drawer is definitely open');
return true;
} else if (!drawerOpen || !drawerOpenIgnoreClose) {
console.log('drawer is definitely closed');
return false;
}
}
抽屉外的按钮和抽屉内的按钮 运行 checkDrawer()
(分别为 return open/closed)还没有让我失望,但是我会再做一些测试。我什至不知道这是否是处理此问题的最简单甚至正确的方法,但它似乎有效并且我很高兴。
再次编辑:设法发现一个问题,如果抽屉面板被滑动打开,checkDrawer()
将return 关闭。我敢肯定,更多的逻辑会解决它。会做一些调整。
我想你的意思是 core-drawer-panel
。
有一个 narrow
属性可以告诉您面板是否采用窄布局。
或者,您可以订阅 core-responsive-change
事件并使用 detail.narrow
来确定。
您可以从 here 阅读更多内容。
或者更确切地说,一个已经在聚合物源中定义的本地方法?我确定我可以编写一个函数来很容易地处理逻辑,但是我已经进行了一些挖掘并且没有想出任何关于已经实现的确定方法的方法。只是想知道我是否必须自己写点东西。
编辑:刚刚意识到,即使我确实编写了一个标记功能来跟踪抽屉何时通过 toggleDrawer()
处于 opened/closed,它也会在抽屉被打开或滑动时被抛出关闭,所以我当然希望有一个本地方法。
编辑:使用@Justin XL 链接我的页面中的信息,我做了一些测试,发现通过滑动或按下抽屉按钮一般打开或关闭抽屉,触发了 2 个核心选择事件,但关闭通过单击一个抽屉项目 4。我已经设法组合了一个解决方案,该解决方案应该能够在任何时候根据 2 个变量确定抽屉是打开还是关闭。
drawerOpenIgnoreClose = false;
drawerOpen = false;
drawerEvent = 0;
drawer.addEventListener('core-select', function() {
drawerEvent++;
//console.log('drawerpanel event fired ' + drawerEvent);
if (drawerEvent >= 2) {
if (drawerOpenIgnoreClose) {
drawerOpenIgnoreClose = false;
console.log('drawer is closed, not from click of menu item');
} else {
drawerOpenIgnoreClose = true;
console.log('drawer is open');
}
drawerEvent = 0;
}
});
并且每次调用drawerPanel.closerDrawer()
,即每次单击菜单项时,drawerOpen
都设置为false。然后我可以确定抽屉是否打开
function checkDrawer() {
if (drawerOpen && drawerOpenIgnoreClose) {
console.log('drawer is definitely open');
return true;
} else if (!drawerOpen || !drawerOpenIgnoreClose) {
console.log('drawer is definitely closed');
return false;
}
}
抽屉外的按钮和抽屉内的按钮 运行 checkDrawer()
(分别为 return open/closed)还没有让我失望,但是我会再做一些测试。我什至不知道这是否是处理此问题的最简单甚至正确的方法,但它似乎有效并且我很高兴。
再次编辑:设法发现一个问题,如果抽屉面板被滑动打开,checkDrawer()
将return 关闭。我敢肯定,更多的逻辑会解决它。会做一些调整。
我想你的意思是 core-drawer-panel
。
有一个 narrow
属性可以告诉您面板是否采用窄布局。
或者,您可以订阅 core-responsive-change
事件并使用 detail.narrow
来确定。
您可以从 here 阅读更多内容。