mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
fixed issues handling clicks on components
This commit is contained in:
parent
260ec4b04d
commit
00bb031bf4
2 changed files with 30 additions and 54 deletions
|
@ -24,75 +24,51 @@
|
||||||
|
|
||||||
function checkForClicksTypeComponent(target, component) {
|
function checkForClicksTypeComponent(target, component) {
|
||||||
if (component && target) {
|
if (component && target) {
|
||||||
try {
|
if (
|
||||||
if (
|
!isChildOf(target, 'right-panel-action-component') ||
|
||||||
!isChildOf(target, 'right-panel-action-component') ||
|
!isChildOf(target, 'right-panel-action-component-form')
|
||||||
!isChildOf(target, 'right-panel-action-component-form')
|
) {
|
||||||
) {
|
if (component.contains(target) || target === component) {
|
||||||
if (component.contains(target) || target === component) {
|
componentIsActive = !componentIsActive;
|
||||||
componentIsActive = !componentIsActive;
|
} else {
|
||||||
} else {
|
if (componentIsActive) {
|
||||||
if (componentIsActive) {
|
componentIsActive = false;
|
||||||
componentIsActive = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
|
||||||
if (componentIsActive) {
|
|
||||||
componentIsActive = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkForClicksTypeSearch(target, component, actionString) {
|
function checkForClicksTypeSearch(target, component) {
|
||||||
if (component && target) {
|
if (component && target) {
|
||||||
try {
|
if (!isChildOf(target, 'right-panel-action-search')) {
|
||||||
if (!isChildOf(target, 'right-panel-action-search')) {
|
if (component.contains(target) || target === component) {
|
||||||
if (component.contains(target) || target === component) {
|
searchIsActive = !searchIsActive;
|
||||||
searchIsActive = !searchIsActive;
|
|
||||||
} else {
|
|
||||||
if (searchIsActive) {
|
|
||||||
searchIsActive = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
if (!searchIsActive && target.id !== 'right-panel-close-search') {
|
if (searchIsActive) {
|
||||||
searchIsActive = true;
|
|
||||||
} else if (searchIsActive && isChildOf(target, 'right-panel-close-search')) {
|
|
||||||
searchIsActive = false;
|
searchIsActive = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} else {
|
||||||
if (searchIsActive) {
|
if (!searchIsActive && target.id !== 'right-panel-close-search') {
|
||||||
|
searchIsActive = true;
|
||||||
|
} else if (searchIsActive && isChildOf(target, 'right-panel-close-search')) {
|
||||||
searchIsActive = false;
|
searchIsActive = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkForClicksTypeLink(target, component, actionString) {
|
function checkForClicksTypeLink(target, component) {
|
||||||
try {
|
if (component && target) {
|
||||||
if (component && target) {
|
if (component.contains(target) || target === component) {
|
||||||
if (component.contains(target) || target === component) {
|
linkIsActive = !linkIsActive;
|
||||||
if (actionString === leftPanelTypes.component) {
|
} else {
|
||||||
componentIsActive = !componentIsActive;
|
if (linkIsActive) {
|
||||||
} else if (actionString === leftPanelTypes.link) {
|
linkIsActive = false;
|
||||||
linkIsActive = !linkIsActive;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (actionString === leftPanelTypes.component) {
|
|
||||||
if (componentIsActive) {
|
|
||||||
componentIsActive = false;
|
|
||||||
}
|
|
||||||
} else if (actionString === leftPanelTypes.link) {
|
|
||||||
if (linkIsActive) {
|
|
||||||
linkIsActive = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
import Icon from '../../Icon/Icon.svelte';
|
import Icon from '../../Icon/Icon.svelte';
|
||||||
import { leftPanelActions, closeIcon } from '../constants';
|
import { leftPanelActions, closeIcon } from '../constants';
|
||||||
import searchStore from '../searchStore';
|
import searchStore from '../searchStore';
|
||||||
import ActionSearchResult from './ActionSearchResult.svelte'
|
import ActionSearchResult from './ActionSearchResult.svelte';
|
||||||
|
|
||||||
let searchTabIndex = 0;
|
let searchTabIndex = 0;
|
||||||
let closeTabIndex = -1;
|
let closeTabIndex = -1;
|
||||||
|
@ -39,10 +39,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if (!searchIsActive) {
|
$: if (!searchIsActive) {
|
||||||
try {
|
if (inputSearchField) {
|
||||||
inputSearchField.value = '';
|
inputSearchField.value = '';
|
||||||
|
}
|
||||||
searchStore.clear();
|
searchStore.clear();
|
||||||
} catch {}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if (searchIsActive) {
|
$: if (searchIsActive) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue