From 0c6e186b67bb39efc0db54b405f317f287c074fe Mon Sep 17 00:00:00 2001 From: Arild Matsson Date: Tue, 10 Sep 2024 10:46:06 +0200 Subject: [PATCH] refactor: tab-hash component Dynamic tabs broken --- app/scripts/components/results.js | 197 ++++++++++++++------------- app/scripts/components/searchtabs.js | 50 +++---- app/scripts/components/tab-hash.ts | 93 +++++++++++++ app/scripts/directives/tab-hash.ts | 77 ----------- app/scripts/services/utils.ts | 4 +- app/scripts/urlparams.ts | 2 + 6 files changed, 224 insertions(+), 199 deletions(-) create mode 100644 app/scripts/components/tab-hash.ts delete mode 100644 app/scripts/directives/tab-hash.ts diff --git a/app/scripts/components/results.js b/app/scripts/components/results.js index 9ef766a7f..b0b9f2659 100644 --- a/app/scripts/components/results.js +++ b/app/scripts/components/results.js @@ -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", { @@ -21,105 +21,110 @@ angular.module("korpApp").component("results", {
- - - KWIC - -
+ + + + KWIC + +
+ + +
+ + + {{'statistics' | loc:$root.lang}} + + - -
- - - {{'statistics' | loc:$root.lang}} - - - - - - - - {{'word_picture' | loc:$root.lang}} - - -
- -
- - - - - - - - + no-hits="no_hits" + prev-params="proxy.prevParams" + search-params="searchParams" + show-statistics="showStatistics" + > + + + + {{'word_picture' | loc:$root.lang}} + + +
+ +
+ + + + + + + + + diff --git a/app/scripts/components/searchtabs.js b/app/scripts/components/searchtabs.js index 1d2126c7b..2c72543c5 100644 --- a/app/scripts/components/searchtabs.js +++ b/app/scripts/components/searchtabs.js @@ -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`
- - - - - -
- - + + + + + + +
+ + +
+ + + + + + + {{'compare' | loc:$root.lang}} + {{$ctrl.savedSearches.length}} + + + +
+
- - - - - - - {{'compare' | loc:$root.lang}} - {{$ctrl.savedSearches.length}} - - - -
- -
- + +
+ maxTab: number + setSelected: (index: number, ignoreCheck?: boolean) => void + newDynamicTab: () => void + closeDynamicTab: () => void +} + +/** Surround a `` element with this to sync selected tab number to url parameter `key`. */ +angular.module("korpApp").component("tabHash", { + template: html`
`, + 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) + } + }, + ], +}) diff --git a/app/scripts/directives/tab-hash.ts b/app/scripts/directives/tab-hash.ts deleted file mode 100644 index 11fa58737..000000000 --- a/app/scripts/directives/tab-hash.ts +++ /dev/null @@ -1,77 +0,0 @@ -/** @format */ -import _ from "lodash" -import angular, { IScope, ITimeoutService } from "angular" -import { UtilsService } from "@/services/utils" -import { LocationService } from "@/urlparams" -import "@/services/utils" - -type TabHashScope = IScope & { - activeTab: number - fixedTabs: Record - maxTab: number - setSelected: (index: number, ignoreCheck?: boolean) => void - newDynamicTab: () => void - closeDynamicTab: () => void -} - -angular.module("korpApp").directive("tabHash", [ - "utils", - "$location", - "$timeout", - (utils: UtilsService, $location: LocationService, $timeout: ITimeoutService) => ({ - link(scope, elem, attr) { - const s = scope as TabHashScope - const contentScope = elem.find(".tab-content").scope() as any - - const watchHash = () => - utils.setupHash(s, { - expr: "activeTab", - val_in(val) { - s.setSelected(Number(val)) - return s.activeTab - }, - key: attr.tabHash, - default: "0", - }) - - s.setSelected = function (index, ignoreCheck) { - if (!ignoreCheck && !(index in s.fixedTabs)) { - index = s.maxTab - } - s.activeTab = index - } - - const initTab = parseInt($location.search()[attr.tabHash]) || 0 - $timeout(function () { - s.fixedTabs = {} - s.maxTab = -1 - for (let tab of contentScope.tabset.tabs) { - s.fixedTabs[tab.index] = tab - if (tab.index > s.maxTab) { - s.maxTab = tab.index - } - } - s.setSelected(initTab) - watchHash() - }, 0) - - s.newDynamicTab = function () { - $timeout(function () { - s.setSelected(s.maxTab + 1, true) - s.maxTab += 1 - }, 0) - } - - s.closeDynamicTab = function () { - $timeout(function () { - s.maxTab = -1 - for (let tab of contentScope.tabset.tabs) { - if (tab.index > s.maxTab) { - s.maxTab = tab.index - } - } - }, 0) - } - }, - }), -]) diff --git a/app/scripts/services/utils.ts b/app/scripts/services/utils.ts index 7070b9312..b0d3a644b 100644 --- a/app/scripts/services/utils.ts +++ b/app/scripts/services/utils.ts @@ -15,7 +15,7 @@ type SetupHashConfigItem /** A function on the scope to pass value to, instead of setting `scope_name` */ scope_func?: string /** Expression to watch for changes; defaults to `scope_name` */ - expr?: string + expr?: string | (() => HashParams[K]) /** Default value of the scope variable, corresponding to the url param being empty */ default?: HashParams[K] /** Runs when the value is changed in scope or url */ @@ -56,7 +56,7 @@ angular.module("korpApp").factory("utils", [ scope.$watch(() => $location.search(), onWatch) // Sync from scope to url - scope.$watch(config.expr || config.scope_name || config.key, (val: any) => { + scope.$watch((config.expr as any) || config.scope_name || config.key, (val: any) => { val = config.val_out ? config.val_out(val) : val if (val === config.default) { val = null diff --git a/app/scripts/urlparams.ts b/app/scripts/urlparams.ts index 285b76429..032864124 100644 --- a/app/scripts/urlparams.ts +++ b/app/scripts/urlparams.ts @@ -37,6 +37,8 @@ export type HashParams = { random_seed?: `${number}` /** Whether the reading mode is enabled */ reading_mode?: boolean + /** Current tab of results */ + result_tab?: `${number}` /** * Search query for Simple or Advanced search: `|` * where `mode` can be: