Repository: go-gitea/gitea
File: web_src/js/components/ViewFileTreeItem.vue (Vue)

Code before:
  // the event is only not undefined if the user explicitly clicked on the directory item toggle. the preventDefault
  // stops the event from bubbling up and causing a directory content load
  e?.preventDefault();

  collapsed.value = !collapsed.value;
  if (!collapsed.value && props.loadChildren) {
    isLoading.value = true;
    try {
      children.value = await props.loadChildren(props.item.fullPath);
    } finally {
      isLoading.value = false;
    }
  }
};

const doLoadDirContent = (e: MouseEvent) => {
  // only load the directory content without a window refresh if the user didn't press any special key
  if (e.button !== 0 || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
  e.preventDefault();

  doLoadChildren();
  props.navigateViewContent(props.item.fullPath);
};

const doLoadFileContent = (e: MouseEvent) => {
  if (e.button !== 0 || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
  e.preventDefault();

  props.navigateViewContent(props.item.fullPath);
};
</script>

<!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
<template>
  <a
    v-if="item.entryMode === 'commit'" class="tree-item type-submodule"
    :title="item.entryName"
    :href="getWebUrl(item.fullPath)"
  >
    <!-- submodule -->
    <div class="item-content">
      <!-- eslint-disable-next-line vue/no-v-html -->
      <span class="tw-contents" v-html="item.entryIcon"/>
      <span class="gt-ellipsis tw-flex-1">{{ item.entryName }}</span>
    </div>
  </a>
  <a
    v-else-if="item.entryMode === 'symlink'" class="tree-item type-symlink"
    :class="{'selected': selectedItem === item.fullPath}"
    :title="item.entryName"
    :href="getWebUrl(item.fullPath)"

Review comment (refactor):
Would extract this into a function in `web_src/js/utils/dom.ts`:

```ts
/** Returns whether a click event is a left-click without any modifiers held */
export function isPlainClick(e: MouseEvent) {
  return e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
}

Code after:
  collapsed.value = !collapsed.value;
  if (!collapsed.value) {
    isLoading.value = true;
    try {
      children.value = await store.loadChildren(props.item.fullPath);
    } finally {
      isLoading.value = false;
    }
  }
};

const onItemClick = (e: MouseEvent) => {
  // only handle the click event with page partial reloading if the user didn't press any special key
  // let browsers handle special keys like "Ctrl+Click"
  if (!isPlainClick(e)) return;
  e.preventDefault();
  if (props.item.entryMode === 'tree') doLoadChildren();
  store.navigateTreeView(props.item.fullPath);
};

</script>

<template>
  <a
    class="tree-item silenced"
    :class="{
      'selected': store.selectedItem === item.fullPath,
      'type-submodule': item.entryMode === 'commit',
      'type-directory': item.entryMode === 'tree',
      'type-symlink': item.entryMode === 'symlink',
      'type-file': item.entryMode === 'blob' || item.entryMode === 'exec',
    }"
    :title="item.entryName"
    :href="store.buildTreePathWebUrl(item.fullPath)"
    @click.stop="onItemClick"
  >
    <div v-if="item.entryMode === 'tree'" class="item-toggle">
      <SvgIcon v-if="isLoading" name="octicon-sync" class="circular-spin"/>
      <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop.prevent="doLoadChildren"/>
    </div>
    <div class="item-content">
      <!-- eslint-disable-next-line vue/no-v-html -->
      <span class="tw-contents" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
      <span class="gt-ellipsis">{{ item.entryName }}</span>
    </div>
  </a>

  <div v-if="children?.length" v-show="!collapsed" class="sub-items">
    <ViewFileTreeItem v-for="childItem in children" :key="childItem.entryName" :item="childItem" :store="store"/>
  </div>
</template>