Skip to content

Commit

Permalink
refactor: tab-hash component
Browse files Browse the repository at this point in the history
Dynamic tabs broken
  • Loading branch information
arildm committed Sep 10, 2024
1 parent d926054 commit 0c6e186
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 199 deletions.
197 changes: 101 additions & 96 deletions app/scripts/components/results.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import "@/components/korp-error"
import "@/components/kwic"
import "@/components/statistics"
import "@/components/sidebar"
import "@/components/tab-hash"
import "@/components/word-picture"
import "@/directives/tab-hash"
import "@/directives/tab-preloader"

angular.module("korpApp").component("results", {
Expand All @@ -21,105 +21,110 @@ angular.module("korpApp").component("results", {
<div id="results-wrapper" ng-show="$ctrl.hasResult()">
<div class="flex" id="columns" ng-class="{sidebar_visible : $ctrl.sidebarVisible}">
<div class="overflow-auto grow" id="left-column">
<uib-tabset class="tabbable result_tabs" tab-hash="result_tab" active="activeTab">
<uib-tab kwic-ctrl index="0" select="onentry()" deselect="onexit()">
<uib-tab-heading ng-class="{not_loading: progress > 99, loading : loading}"
>KWIC<tab-preloader
ng-if="loading"
value="progress"
spinner="countCorpora() < 2"
></tab-preloader>
</uib-tab-heading>
<div class="results-kwic" ng-class="{reading_mode : reading_mode, loading: loading}">
<tab-hash key="result_tab">
<uib-tabset class="tabbable result_tabs" active="activeTab">
<uib-tab kwic-ctrl index="0" select="onentry()" deselect="onexit()">
<uib-tab-heading ng-class="{not_loading: progress > 99, loading : loading}"
>KWIC<tab-preloader
ng-if="loading"
value="progress"
spinner="countCorpora() < 2"
></tab-preloader>
</uib-tab-heading>
<div
class="results-kwic"
ng-class="{reading_mode : reading_mode, loading: loading}"
>
<korp-error ng-if="error"></korp-error>
<kwic
ng-if="!error"
aborted="aborted"
loading="loading"
active="active"
hits-in-progress="hitsInProgress"
hits="hits"
kwic-input="kwic"
corpus-hits="corpusHits"
is-reading="reading_mode"
page="page"
page-event="pageChange"
context-change-event="toggleReading"
hits-per-page="hitsPerPage"
prev-params="proxy.prevParams"
prev-request="proxy.prevRequest"
corpus-order="corpusOrder"
></kwic>
</div>
</uib-tab>
<uib-tab
stats-result-ctrl
ng-if="$root._settings.statistics != false"
select="onentry()"
deselect="onexit()"
index="2"
>
<uib-tab-heading ng-class="{not_loading: progress > 99, loading : loading}"
>{{'statistics' | loc:$root.lang}}
<tab-preloader
ng-if="loading"
value="progress"
spinner="countCorpora() < 2"
></tab-preloader>
</uib-tab-heading>
<korp-error ng-if="error"></korp-error>
<kwic
ng-if="!error"
<statistics
aborted="aborted"
loading="loading"
active="active"
hits-in-progress="hitsInProgress"
hits="hits"
kwic-input="kwic"
corpus-hits="corpusHits"
is-reading="reading_mode"
page="page"
page-event="pageChange"
context-change-event="toggleReading"
hits-per-page="hitsPerPage"
prev-params="proxy.prevParams"
prev-request="proxy.prevRequest"
corpus-order="corpusOrder"
></kwic>
</div>
</uib-tab>
<uib-tab
stats-result-ctrl
ng-if="$root._settings.statistics != false"
select="onentry()"
deselect="onexit()"
index="2"
>
<uib-tab-heading ng-class="{not_loading: progress > 99, loading : loading}"
>{{'statistics' | loc:$root.lang}}
<tab-preloader
ng-if="loading"
value="progress"
spinner="countCorpora() < 2"
></tab-preloader>
</uib-tab-heading>
<korp-error ng-if="error"></korp-error>
<statistics
aborted="aborted"
activate="activate"
columns="columns"
data="data"
error="error"
grid-data="gridData"
has-result="hasResult"
in-order="inOrder"
loading="loading"
no-hits="no_hits"
prev-params="proxy.prevParams"
search-params="searchParams"
show-statistics="showStatistics"
></statistics>
</uib-tab>
<uib-tab
ng-if="$root._settings['word_picture'] != false"
wordpic-ctrl
index="3"
select="onentry()"
deselect="onexit()"
>
<uib-tab-heading ng-class="{not_loading: progress > 99, loading : loading}">
{{'word_picture' | loc:$root.lang}}
<tab-preloader
ng-if="loading"
value="progress"
spinner="countCorpora() < 2"
></tab-preloader>
</uib-tab-heading>
<div ng-if="!error">
<word-picture
data="data"
word-pic="wordPic"
activate="activate"
columns="columns"
data="data"
error="error"
grid-data="gridData"
has-result="hasResult"
in-order="inOrder"
loading="loading"
has-data="hasData"
aborted="aborted"
hit-settings="hitSettings"
settings="settings"
no-hits="noHits"
></word-picture>
</div>
<korp-error ng-if="error"></korp-error>
</uib-tab>
<kwic-tabs tabs="$root.kwicTabs"></kwic-tabs>
<graph-tabs tabs="$root.graphTabs"></graph-tabs>
<compare-tabs tabs="$root.compareTabs"></compare-tabs>
<map-tabs tabs="$root.mapTabs"></map-tabs>
<text-tabs tabs="$root.textTabs"></text-tabs>
</uib-tabset>
no-hits="no_hits"
prev-params="proxy.prevParams"
search-params="searchParams"
show-statistics="showStatistics"
></statistics>
</uib-tab>
<uib-tab
ng-if="$root._settings['word_picture'] != false"
wordpic-ctrl
index="3"
select="onentry()"
deselect="onexit()"
>
<uib-tab-heading ng-class="{not_loading: progress > 99, loading : loading}">
{{'word_picture' | loc:$root.lang}}
<tab-preloader
ng-if="loading"
value="progress"
spinner="countCorpora() < 2"
></tab-preloader>
</uib-tab-heading>
<div ng-if="!error">
<word-picture
data="data"
word-pic="wordPic"
activate="activate"
loading="loading"
has-data="hasData"
aborted="aborted"
hit-settings="hitSettings"
settings="settings"
no-hits="noHits"
></word-picture>
</div>
<korp-error ng-if="error"></korp-error>
</uib-tab>
<kwic-tabs tabs="$root.kwicTabs"></kwic-tabs>
<graph-tabs tabs="$root.graphTabs"></graph-tabs>
<compare-tabs tabs="$root.compareTabs"></compare-tabs>
<map-tabs tabs="$root.mapTabs"></map-tabs>
<text-tabs tabs="$root.textTabs"></text-tabs>
</uib-tabset>
</tab-hash>
<a id="json-link" ng-href="{{$root.jsonUrl}}" ng-show="$root.jsonUrl" target="_blank">
<img src="img/json.png" />
</a>
Expand Down
50 changes: 26 additions & 24 deletions app/scripts/components/searchtabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,39 @@ import "@/components/extended/extended-standard"
import "@/components/extended/extended-parallel"
import "@/components/advanced-search"
import "@/components/compare-search"
import "@/components/tab-hash"
import "@/directives/click-cover"
import "@/directives/reduce-select"
import "@/directives/tab-hash"

angular.module("korpApp").component("searchtabs", {
template: html`
<div click-cover="$ctrl.noCorporaSelected">
<uib-tabset class="tabbable search_tabs" tab-hash="search_tab" active="activeTab">
<uib-tab heading='{{"simple" | loc:$root.lang}}' ng-if="$ctrl.visibleTabs[0]">
<simple-search></simple-search>
</uib-tab>
<uib-tab class="extended" heading='{{"detailed" | loc:$root.lang}}' ng-if="$ctrl.visibleTabs[1]">
<div>
<extended-standard ng-if="!$ctrl.parallelMode"></extended-standard>
<extended-parallel ng-if="$ctrl.parallelMode"></extended-parallel>
<tab-hash key="search_tab">
<uib-tabset class="tabbable search_tabs" active="activeTab">
<uib-tab heading='{{"simple" | loc:$root.lang}}' ng-if="$ctrl.visibleTabs[0]">
<simple-search></simple-search>
</uib-tab>
<uib-tab class="extended" heading='{{"detailed" | loc:$root.lang}}' ng-if="$ctrl.visibleTabs[1]">
<div>
<extended-standard ng-if="!$ctrl.parallelMode"></extended-standard>
<extended-parallel ng-if="$ctrl.parallelMode"></extended-parallel>
</div>
</uib-tab>
<uib-tab heading='{{"advanced" | loc:$root.lang}}' ng-if="$ctrl.visibleTabs[2]">
<advanced-search></advanced-search>
</uib-tab>
<uib-tab ng-if="$ctrl.visibleTabs[3]">
<uib-tab-heading>
{{'compare' | loc:$root.lang}}
<span class="badge" ng-if="$ctrl.savedSearches.length">{{$ctrl.savedSearches.length}}</span>
</uib-tab-heading>
<compare-search></compare-search>
</uib-tab>
<div class="flex justify-end items-center">
<select class="hidden md_block shrink min-w-0 m-1" id="search_history"></select>
</div>
</uib-tab>
<uib-tab heading='{{"advanced" | loc:$root.lang}}' ng-if="$ctrl.visibleTabs[2]">
<advanced-search></advanced-search>
</uib-tab>
<uib-tab ng-if="$ctrl.visibleTabs[3]">
<uib-tab-heading>
{{'compare' | loc:$root.lang}}
<span class="badge" ng-if="$ctrl.savedSearches.length">{{$ctrl.savedSearches.length}}</span>
</uib-tab-heading>
<compare-search></compare-search>
</uib-tab>
<div class="flex justify-end items-center">
<select class="hidden md_block shrink min-w-0 m-1" id="search_history"></select>
</div>
</uib-tabset>
</uib-tabset>
</tab-hash>
<div
class="flex items-baseline bg-blue-100 border border-blue-200 shadow-inner"
id="search_options"
Expand Down
93 changes: 93 additions & 0 deletions app/scripts/components/tab-hash.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/** @format */
import _ from "lodash"
import angular, { IController, IRootElementService, IScope, ITimeoutService } from "angular"
import { UtilsService } from "@/services/utils"
import "@/services/utils"
import { html } from "@/util"

type TabHashController = IController & {
key: "search_tab" | "result_tab"
}

type TabHashScope = IScope & {
fixedTabs: Record<number, any>
maxTab: number
setSelected: (index: number, ignoreCheck?: boolean) => void
newDynamicTab: () => void
closeDynamicTab: () => void
}

/** Surround a `<uib-tabset>` element with this to sync selected tab number to url parameter `key`. */
angular.module("korpApp").component("tabHash", {
template: html`<div ng-transclude></div>`,
transclude: true,
bindings: {
key: "@",
},
controller: [
"utils",
"$element",
"$scope",
"$timeout",
function (utils: UtilsService, $element: IRootElementService, $scope: TabHashScope, $timeout: ITimeoutService) {
const $ctrl = this as TabHashController

let tabsetScope
let contentScope

$ctrl.$onInit = () => {
// Timeout needed to find elements created by uib-tabset
$timeout(function () {
tabsetScope = $element.find(".tabbable").scope() as any
contentScope = $element.find(".tab-content").scope() as any

$scope.fixedTabs = {}
$scope.maxTab = -1
for (let tab of contentScope.tabset.tabs) {
$scope.fixedTabs[tab.index] = tab
if (tab.index > $scope.maxTab) {
$scope.maxTab = tab.index
}
}
watchHash()
}, 0)
}

const watchHash = () =>
utils.setupHash($scope, {
expr: () => tabsetScope.activeTab,
val_in(val) {
$scope.setSelected(Number(val))
return tabsetScope.activeTab
},
key: $ctrl.key,
default: "0",
})

$scope.setSelected = function (index, ignoreCheck) {
if (!ignoreCheck && !(index in $scope.fixedTabs)) {
index = $scope.maxTab
}
tabsetScope.activeTab = index
}

$scope.newDynamicTab = function () {
$timeout(function () {
$scope.setSelected($scope.maxTab + 1, true)
$scope.maxTab += 1
}, 0)
}

$scope.closeDynamicTab = function () {
$timeout(function () {
$scope.maxTab = -1
for (let tab of contentScope.tabset.tabs) {
if (tab.index > $scope.maxTab) {
$scope.maxTab = tab.index
}
}
}, 0)
}
},
],
})
Loading

0 comments on commit 0c6e186

Please sign in to comment.