merge: dev into ts-api

spraakbanken · Dec 12, 2024 · 119013b · 119013b
2 parents 4006181 + 0f4a6f3
commit 119013b
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Sidebar: Collapse and expand attribute sections [#199](https://github.com/spraakbanken/korp-frontend/issues/199)
+
 ### Changed
 
 - The `corpus_config_url` setting is replaced by `get_corpus_ids`, see [doc/frontend_devel.md](./doc/frontend_devel.md)

diff --git a/app/index.html b/app/index.html
@@ -20,7 +20,7 @@ <h2>You need JavaScript to run Korp.</h2>
         </noscript>
         <div id="preload"></div>
         <div id="main" style="opacity: 0; display: none">
-            <header></header>
+            <app-header></app-header>
             <div class="px-3 pb-3" id="content">
                 <searchtabs></searchtabs>
                 <frontpage></frontpage>

diff --git a/app/index.ts b/app/index.ts
@@ -29,7 +29,6 @@ require("rickshaw/rickshaw.css")
 
 require("leaflet/dist/leaflet.css")
 require("leaflet.markercluster/dist/MarkerCluster.css")
-require("components-jqueryui/themes/smoothness/jquery-ui.min.css")
 require("./styles/_bootstrap-custom.scss")
 
 require("./styles/tailwind.scss")

diff --git a/app/scripts/app.ts b/app/scripts/app.ts
@@ -21,7 +21,7 @@ import { Folder } from "./settings/config.types"
 import { CorpusTransformed } from "./settings/config-transformed.types"
 import { html } from "@/util"
 import { loc, locObj } from "@/i18n"
-import "@/components/header"
+import "@/components/app-header"
 import "@/components/searchtabs"
 import "@/components/frontpage"
 import "@/components/results"

diff --git a/app/scripts/components/header.ts → app/scripts/components/app-header.ts b/app/scripts/components/header.ts → app/scripts/components/app-header.ts
@@ -34,7 +34,7 @@ type HeaderScope = IScope & {
     lang: string
 }
 
-angular.module("korpApp").component("header", {
+angular.module("korpApp").component("appHeader", {
     template: html`
         <div id="header">
             <div class="flex items-center justify-between px-3 py-2" id="top_bar">

diff --git a/app/scripts/components/search-examples.ts b/app/scripts/components/search-examples.ts
@@ -44,7 +44,8 @@ export default angular.module("korpApp").component("searchExamples", {
                 if (params.cqp) {
                     statemachine.send("SEARCH_CQP", { cqp: params.cqp } as CqpSearchEvent)
                 }
-                $location.search(params)
+                // Do not use `$location.search(params)` because it will remove existing params (like `corpus`)
+                Object.keys(params).forEach((key: keyof HashParams) => $location.search(key, params[key]))
             }
         },
     ],

diff --git a/app/scripts/components/sidebar-section.ts b/app/scripts/components/sidebar-section.ts
@@ -0,0 +1,23 @@
+/** @format */
+import { html } from "@/util"
+import angular, { IController } from "angular"
+
+type SidebarSectionController = IController & {
+    title: string
+}
+
+angular.module("korpApp").component("sidebarSection", {
+    template: html`
+        <details open class="border border-gray-300 rounded-sm">
+            <summary tabindex="0" class="bg-gray-300 uppercase m-0 p-1 px-2">{{$ctrl.title}}</summary>
+            <div ng-transclude class="p-2"></div>
+        </details>
+    `,
+    bindings: {
+        title: "@",
+    },
+    transclude: true,
+    controller: function () {
+        const $ctrl = this as SidebarSectionController
+    },
+})
diff --git a/app/scripts/components/sidebar.ts b/app/scripts/components/sidebar.ts
@@ -1,5 +1,5 @@
 /** @format */
-import angular, { ICompileService, IController, IControllerService } from "angular"
+import angular, { ICompileService, IController, IControllerService, IScope } from "angular"
 import _ from "lodash"
 import "../../styles/sidebar.scss"
 import statemachine from "@/statemachine"
@@ -9,6 +9,7 @@ import { html, regescape, splitLemgram, safeApply, getConfigurable } from "@/uti
 import { loc, locAttribute, locObj } from "@/i18n"
 import "@/services/utils"
 import "@/components/deptree/deptree"
+import "@/components/sidebar-section"
 import "@/video-controller" // May be used by custom code
 import { RootScope } from "@/root-scope.types"
 import { CqpSearchEvent, SelectWordEvent } from "@/statemachine/types"
@@ -74,20 +75,32 @@ type SidebarController = IController & {
     applyEllipse: () => void
 }
 
+type SidebarScope = IScope & {
+    posData: JQLite | null
+    structData: JQLite | null
+}
+
 angular.module("korpApp").component("sidebar", {
     template: html`
-        <div class="sticky top-10 border border-gray-300 p-2 rounded-sm" ng-show="$ctrl.corpusObj">
+        <div class="sticky top-2 flex flex-col gap-4" ng-show="$ctrl.corpusObj">
             <div>
-                <h4 class="font-normal uppercase text-gray-800 mt-4 mb-1 text-sm tracking-tight">
+                <h4 class="font-normal uppercase text-gray-800 mt-0 mb-1 text-sm tracking-tight">
                     {{'corpus' | loc:$root.lang}}
                 </h4>
                 <div class="text-lg">{{$ctrl.corpusObj.title| locObj:$root.lang}}</div>
             </div>
+
             <div class="openReadingMode" ng-show="!$ctrl.inReadingMode && $ctrl.corpusObj['reading_mode']">
                 <span ng-click="$ctrl.openReadingMode()" class="link"> {{'read_in_korp' | loc:$root.lang}} </span>
             </div>
-            <div id="selected_sentence"></div>
-            <div id="selected_word"></div>
+
+            <sidebar-section ng-show="structData" title="{{'sentence_attr' | loc:$root.lang}}">
+                <div id="selected_sentence"></div>
+            </sidebar-section>
+
+            <sidebar-section ng-show="posData" title="{{'word_attr' | loc:$root.lang}}">
+                <div id="selected_word"></div>
+            </sidebar-section>
 
             <div ng-show="$ctrl.corpusObj.attributes.deprel" ng-click="$ctrl.openDepTree()" class="link show_deptree">
                 {{'show_deptree' | loc:$root.lang}}
@@ -106,13 +119,23 @@ angular.module("korpApp").component("sidebar", {
         lang: "<",
     },
     controller: [
-        "$element",
-        "$rootScope",
         "$compile",
         "$controller",
-        function ($element: JQLite, $rootScope: RootScope, $compile: ICompileService, $controller: IControllerService) {
+        "$element",
+        "$rootScope",
+        "$scope",
+        function (
+            $compile: ICompileService,
+            $controller: IControllerService,
+            $element: JQLite,
+            $rootScope: RootScope,
+            $scope: SidebarScope
+        ) {
             let $ctrl = this as SidebarController
 
+            $scope.posData = null
+            $scope.structData = null
+
             statemachine.listen("select_word", function (data) {
                 safeApply($rootScope, () => {
                     $ctrl.data = data
@@ -149,7 +172,6 @@ angular.module("korpApp").component("sidebar", {
             }
 
             $ctrl.updateContent = ({ sentenceData, wordData, corpus, tokens, inReadingMode }) => {
-                $("#selected_sentence").add("#selected_word").empty()
                 // TODO: this is pretty broken
                 const corpusObj = settings.corpora[corpus] || settings.corpusListing.get(corpus)
                 $ctrl.corpusObj = corpusObj
@@ -170,9 +192,9 @@ angular.module("korpApp").component("sidebar", {
                     customContentStruct.push(...struct)
                 }
 
-                let posData: JQLite = $()
+                $scope.posData = null
                 if (!$.isEmptyObject(corpusObj.attributes)) {
-                    posData = $ctrl.renderCorpusContent(
+                    $scope.posData = $ctrl.renderCorpusContent(
                         "pos",
                         wordData,
                         sentenceData,
@@ -183,9 +205,9 @@ angular.module("korpApp").component("sidebar", {
                     )
                 }
 
-                let structData: JQLite = $()
+                $scope.structData = null
                 if (!$.isEmptyObject(corpusObj["struct_attributes"])) {
-                    structData = $ctrl.renderCorpusContent(
+                    $scope.structData = $ctrl.renderCorpusContent(
                         "struct",
                         wordData,
                         sentenceData,
@@ -195,16 +217,6 @@ angular.module("korpApp").component("sidebar", {
                         customContentStruct
                     )
                 }
-
-                const $headingWord = $(
-                    '<h4 class="font-normal uppercase text-gray-800 mt-8 mb-1 text-sm" tracking-tight>'
-                ) as JQueryExtended
-                $("#selected_word").append($headingWord.localeKey("word_attr")).append(posData)
-
-                const $headingSentence = $(
-                    '<h4 class="font-normal uppercase text-gray-800 mt-8 mb-1 text-sm" tracking-tight>'
-                ) as JQueryExtended
-                $("#selected_sentence").append($headingSentence.localeKey("sentence_attr")).append(structData)
                 ;($element as JQueryExtended).localize()
                 $ctrl.applyEllipse()
             }
@@ -424,6 +436,20 @@ angular.module("korpApp").component("sidebar", {
                         }
                     })
             }
+
+            $scope.$watch("posData", () => {
+                $element
+                    .find("#selected_word")
+                    .empty()
+                    .append($scope.posData || "")
+            })
+
+            $scope.$watch("structData", () => {
+                $element
+                    .find("#selected_sentence")
+                    .empty()
+                    .append($scope.structData || "")
+            })
         },
     ],
 })
diff --git a/app/styles/sidebar.scss b/app/styles/sidebar.scss
@@ -5,9 +5,6 @@
         padding: 0;
         border: none;
     }
-    div {
-        margin-bottom: 10px;
-    }
     p {
         margin: 0 0 0 0;
     }
@@ -18,17 +15,6 @@
         list-style: none;
         line-height: 16px;
     }
-
-    #selected_sentence > h4:last-child {
-        display: none;
-    }
-
-    #selected_word > h4:last-child {
-        display: none;
-    }
-    .top-10 {
-        top: 10px;
-    }
 }
 
 .external_link {

diff --git a/app/styles/styles.scss b/app/styles/styles.scss
@@ -90,10 +90,6 @@ label {
   margin-bottom : 0;
 }
 
-.ui-widget {
-  font-family: inherit;
-}
-
 sup {
   line-height: 0px;
 }
@@ -1657,6 +1653,9 @@ line.tick {
 .ui-widget-header {
   background: url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #CCCCCC;
 }
+.ui-state-default {
+  background : #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
+}
 .ui-state-hover {
   background : #e6e6e6 url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
 }