Reformat component code

Call `angular.module("korpApp").component()` in each component file
Import components where they are used, not all in app.js
Define `html` alias in util
Apply `html` some more

app/scripts/app.js

@@ -2,82 +2,14 @@
 import _ from "lodash"
 import korpApp from "./korp.module"
 import settings from "@/settings"
-import { kwicPagerName, kwicPager } from "./components/pager"
-import { sidebarName, sidebarComponent } from "./components/sidebar"
-import * as autoc from "./components/autoc"
-import * as readingmode from "./components/readingmode"
-import * as extendedAddBox from "./components/extended/extended_add_box"
-import { corpusChooserComponent } from "./components/corpus_chooser/corpus_chooser"
-import { ccTimeGraphComponent } from "./components/corpus_chooser/time_graph"
-import { ccTreeComponent } from "./components/corpus_chooser/tree"
-import { ccInfoBox } from "./components/corpus_chooser/info_box"
-import { depTreeComponent } from "./components/deptree/deptree"
-import { simpleSearchComponent } from "./components/simple_search"
-import { extendedStandardComponent } from "./components/extended/standard_extended"
-import { extendedParallelComponent } from "./components/extended/parallel_extended"
-import { extendedTokensComponent } from "./components/extended/extended_tokens"
-import { extendedAndTokenComponent } from "./components/extended/and_token"
-import { extendedCQPTermComponent } from "./components/extended/cqp_term"
-import { extendedTokenComponent } from "./components/extended/token"
-import { extendedStructTokenComponent } from "./components/extended/struct_token"
-import { extendedCQPValueComponent } from "./components/extended/cqp_value"
-import { advancedSearchComponent } from "./components/advanced_search"
-import { compareSearchComponent } from "./components/compare_search"
-import "./components/kwic_word"
-import { kwicComponent } from "./components/kwic"
-import { statisticsComponent } from "./components/statistics"
-import { trendDiagramComponent } from "./components/trend_diagram"
-import { korpErrorComponent } from "./components/korp_error"
-import { kwicTabsComponent } from "./components/dynamic_tabs/kwic_tabs"
-import { graphTabsComponent } from "./components/dynamic_tabs/graph_tabs"
-import { compareTabsComponent } from "./components/dynamic_tabs/compare_tabs"
-import { mapTabsComponent } from "./components/dynamic_tabs/map_tabs"
-import { textTabsComponent } from "./components/dynamic_tabs/text_tabs"
-import { headerComponent } from "./components/header"
-import { wordPictureComponent } from "./components/word_picture"
-import { searchtabsComponent } from "./components/searchtabs"
-import "./components/frontpage"
-import { resultsComponent } from "./components/results"
 import statemachine from "@/statemachine"
 import * as authenticationProxy from "@/components/auth/auth"
-
-let html = String.raw
-
-korpApp.component(kwicPagerName, kwicPager)
-korpApp.component(sidebarName, sidebarComponent)
-korpApp.component(readingmode.componentName, readingmode.component)
-korpApp.component(autoc.componentName, autoc.component)
-korpApp.component(extendedAddBox.componentName, extendedAddBox.component)
-korpApp.component("corpusChooser", corpusChooserComponent)
-korpApp.component("ccTimeGraph", ccTimeGraphComponent)
-korpApp.component("ccTree", ccTreeComponent)
-korpApp.component("ccInfoBox", ccInfoBox)
-korpApp.component("depTree", depTreeComponent)
-korpApp.component("simpleSearch", simpleSearchComponent)
-korpApp.component("extendedStandard", extendedStandardComponent)
-korpApp.component("extendedParallel", extendedParallelComponent)
-korpApp.component("extendedTokens", extendedTokensComponent)
-korpApp.component("extendedAndToken", extendedAndTokenComponent)
-korpApp.component("extendedCqpTerm", extendedCQPTermComponent)
-korpApp.component("extendedToken", extendedTokenComponent)
-korpApp.component("extendedStructToken", extendedStructTokenComponent)
-korpApp.component("extendedCqpValue", extendedCQPValueComponent)
-korpApp.component("advancedSearch", advancedSearchComponent)
-korpApp.component("compareSearch", compareSearchComponent)
-korpApp.component("kwic", kwicComponent)
-korpApp.component("statistics", statisticsComponent)
-korpApp.component("trendDiagram", trendDiagramComponent)
-korpApp.component("korpError", korpErrorComponent)
-korpApp.component("header", headerComponent)
-korpApp.component("wordPicture", wordPictureComponent)
-korpApp.component("searchtabs", searchtabsComponent)
-korpApp.component("results", resultsComponent)
-// these are directives because it needs replace: true, which is not supported in component
-korpApp.directive("kwicTabs", kwicTabsComponent)
-korpApp.directive("graphTabs", graphTabsComponent)
-korpApp.directive("compareTabs", compareTabsComponent)
-korpApp.directive("mapTabs", mapTabsComponent)
-korpApp.directive("textTabs", textTabsComponent)
+import { html } from "@/util"
+import "@/components/header"
+import "@/components/searchtabs"
+import "@/components/frontpage"
+import "@/components/results"
+import "@/components/korp-error"
 
 // load all custom components
 let customComponents = {}

app/scripts/components/advanced_search.js → app/scripts/components/advanced-search.js

@@ -1,6 +1,8 @@
 /** @format */
-let html = String.raw
-export const advancedSearchComponent = {
+import angular from "angular"
+import { html } from "@/util"
+
+angular.module("korpApp").component("advancedSearch", {
     template: html` <div>
         <div class="well well-small">
             {{'active_cqp_simple' | loc:$root.lang}}:
@@ -78,4 +80,4 @@ export const advancedSearchComponent = {
             }
         },
     ],
-}
+})

app/scripts/components/auth/federatedauth/login_status.js

@@ -1,16 +1,17 @@
 /** @format */
 import statemachine from "@/statemachine"
 import * as authenticationProxy from "../auth"
+import { html } from "@/util"
 
 export const loginStatusComponent = {
-    template: `
-    <div class="link" id="log_out" ng-click="$ctrl.logout()" ng-if="$ctrl.loggedIn">
-        <span>{{ 'log_out' | loc:$root.lang }}</span>
-        <span>{{ $ctrl.username }}</span>
-    </div>
-    <div id="login">
-        <a ng-click="$ctrl.doLogin()" ng-show="!$ctrl.loggedIn">{{'log_in' | loc:$root.lang}}</a>
-    </div>
+    template: html`
+        <div class="link" id="log_out" ng-click="$ctrl.logout()" ng-if="$ctrl.loggedIn">
+            <span>{{ 'log_out' | loc:$root.lang }}</span>
+            <span>{{ $ctrl.username }}</span>
+        </div>
+        <div id="login">
+            <a ng-click="$ctrl.doLogin()" ng-show="!$ctrl.loggedIn">{{'log_in' | loc:$root.lang}}</a>
+        </div>
     `,
     bindings: {},
     controller: [

app/scripts/components/auth/login_box.js

@@ -2,31 +2,44 @@
 
 import statemachine from "@/statemachine"
 import settings from "@/settings"
+import { html } from "@/util"
 import { login } from "./basic_auth"
 
 // TODO make it not closable when login is NEEDED
 export const loginBoxComponent = {
-    template: `
-    <div class="modal-header login-modal-header">
-        <span class="login-header">{{'log_in' | loc:$root.lang}}</span>
-        <span ng-click="$ctrl.clickX()" class="close-x">×</span>
-    </div>
-    <div id="login_popup" class="modal-body">
-        <form ng-submit="$ctrl.loginSubmit()">
-            <label for="usrname">{{'username' | loc:$root.lang}}</label>
-            <input id="usrname" ng-model="$ctrl.loginUsr" type="text">
-            <label for="pass">{{'password' | loc:$root.lang}}</label>
-            <input id="pass" ng-model="$ctrl.loginPass" type="password">
-            <a class="password-reset" href="https://ws.spraakbanken.gu.se/user/password" target="_blank">{{'forgot_password' | loc:$root.lang}}</a>
-            <div style="clear:both"></div>
-            <input ng-if="$ctrl.showSave" class="save-login" id="saveLogin" type="checkbox" ng-model="$ctrl.saveLogin">
-            <label ng-if="$ctrl.showSave" class="save-login" for="saveLogin">{{'save_login' | loc:$root.lang}}</label>
-            <p ng-show="$ctrl.loginErr" class="err_msg">{{'login_fail_msg' | loc:$root.lang}}</p>
-            <input class="btn btn-sm bg-blue-500 text-white" type="submit" value="{{'send' | loc:$root.lang}}">
-            <div ng-if="$ctrl.loading" style="float: right; margin-top: 11px; margin-right: 9px;"><i class="fa-solid fa-spinner fa-pulse w-fit"></i></div>
-            <div style="clear:both"></div>
-        </form>
-    </div>
+    template: html`
+        <div class="modal-header login-modal-header">
+            <span class="login-header">{{'log_in' | loc:$root.lang}}</span>
+            <span ng-click="$ctrl.clickX()" class="close-x">×</span>
+        </div>
+        <div id="login_popup" class="modal-body">
+            <form ng-submit="$ctrl.loginSubmit()">
+                <label for="usrname">{{'username' | loc:$root.lang}}</label>
+                <input id="usrname" ng-model="$ctrl.loginUsr" type="text" />
+                <label for="pass">{{'password' | loc:$root.lang}}</label>
+                <input id="pass" ng-model="$ctrl.loginPass" type="password" />
+                <a class="password-reset" href="https://ws.spraakbanken.gu.se/user/password" target="_blank"
+                    >{{'forgot_password' | loc:$root.lang}}</a
+                >
+                <div style="clear:both"></div>
+                <input
+                    ng-if="$ctrl.showSave"
+                    class="save-login"
+                    id="saveLogin"
+                    type="checkbox"
+                    ng-model="$ctrl.saveLogin"
+                />
+                <label ng-if="$ctrl.showSave" class="save-login" for="saveLogin"
+                    >{{'save_login' | loc:$root.lang}}</label
+                >
+                <p ng-show="$ctrl.loginErr" class="err_msg">{{'login_fail_msg' | loc:$root.lang}}</p>
+                <input class="btn btn-sm bg-blue-500 text-white" type="submit" value="{{'send' | loc:$root.lang}}" />
+                <div ng-if="$ctrl.loading" style="float: right; margin-top: 11px; margin-right: 9px;">
+                    <i class="fa-solid fa-spinner fa-pulse w-fit"></i>
+                </div>
+                <div style="clear:both"></div>
+            </form>
+        </div>
     `,
     bindings: {
         closeClick: "&",

app/scripts/components/auth/login_status.js

@@ -1,16 +1,17 @@
 /** @format */
 import statemachine from "@/statemachine"
 import * as authenticationProxy from "./auth"
+import { html } from "@/util"
 
 export const loginStatusComponent = {
-    template: `
-    <div class="link" id="log_out" ng-click="$ctrl.logout()" ng-if="$ctrl.loggedIn">
-        <span>{{ 'log_out' | loc:$root.lang }}</span>
-        <span>{{ $ctrl.username }}</span>
-    </div>
-    <div id="login">
-        <a ng-click="$ctrl.showLogin()" ng-show="!$ctrl.loggedIn">{{'log_in' | loc:$root.lang}}</a>
-    </div>
+    template: html`
+        <div class="link" id="log_out" ng-click="$ctrl.logout()" ng-if="$ctrl.loggedIn">
+            <span>{{ 'log_out' | loc:$root.lang }}</span>
+            <span>{{ $ctrl.username }}</span>
+        </div>
+        <div id="login">
+            <a ng-click="$ctrl.showLogin()" ng-show="!$ctrl.loggedIn">{{'log_in' | loc:$root.lang}}</a>
+        </div>
     `,
     bindings: {},
     controller: [

app/scripts/components/autoc.js

@@ -1,50 +1,58 @@
 /** @format */
 import _ from "lodash"
+import angular from "angular"
 import settings from "@/settings"
+import { html } from "@/util"
 
-export const componentName = "autoc"
-export const component = {
-    template: `
-    <div>
-        <script type="text/ng-template" id="lemgramautocomplete.html">
-            <a style="cursor:pointer">
-                <span ng-class="{'autocomplete-item-disabled' : match.model.count == 0, 'none-to-find' : (match.model.variant != 'dalin' && match.model.count == 0)}">
-                    <span ng-if="match.model.parts.namespace" class="label lemgram-namespace">{{match.model.parts.namespace | loc}}</span>
-                    <span>{{match.model.parts.main}}</span>
-                    <sup ng-if="match.model.parts.index != 1">{{match.model.parts.index}}</sup>
-                    <span ng-if="match.model.parts.pos">({{match.model.parts.pos}})</span>
-                    <span ng-if="match.model.desc" style="color:gray;margin-left:6px">{{match.model.desc.main}}</span>
-                    <sup ng-if="match.model.desc && match.model.desc.index != 1" style="color:gray">{{match.model.desc.index}}</sup>
-                    <span class="num-to-find" ng-if="match.model.count && match.model.count > 0">
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{match.model.count}}
+angular.module("korpApp").component("autoc", {
+    template: html`
+        <div>
+            <script type="text/ng-template" id="lemgramautocomplete.html">
+                <a style="cursor:pointer">
+                    <span ng-class="{'autocomplete-item-disabled' : match.model.count == 0, 'none-to-find' : (match.model.variant != 'dalin' && match.model.count == 0)}">
+                        <span ng-if="match.model.parts.namespace" class="label lemgram-namespace">{{match.model.parts.namespace | loc}}</span>
+                        <span>{{match.model.parts.main}}</span>
+                        <sup ng-if="match.model.parts.index != 1">{{match.model.parts.index}}</sup>
+                        <span ng-if="match.model.parts.pos">({{match.model.parts.pos}})</span>
+                        <span ng-if="match.model.desc" style="color:gray;margin-left:6px">{{match.model.desc.main}}</span>
+                        <sup ng-if="match.model.desc && match.model.desc.index != 1" style="color:gray">{{match.model.desc.index}}</sup>
+                        <span class="num-to-find" ng-if="match.model.count && match.model.count > 0">
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{match.model.count}}
+                        </span>
                     </span>
-                </span>
-            </a>
-        </script>
-        <div ng-show="!$ctrl.disableLemgramAutocomplete">
-            <div style="float:left"><input
-                autofocus
-                type="text"
-                ng-model="$ctrl.textInField"
-                ng-change="$ctrl.textInput()"
-                uib-typeahead="row for row in $ctrl.getRows($viewValue)"
-                typeahead-wait-ms="500"
-                typeahead-template-url="lemgramautocomplete.html"
-                typeahead-loading="$ctrl.isLoading"
-                typeahead-on-select="$ctrl.selectedItem($item, $model, $label)"
-                placeholder="{{$ctrl.placeholderToString($ctrl.placeholder)}}"
-                typeahead-click-open
-                typeahead-is-open="$ctrl.typeaheadIsOpen"
-                ng-blur="$ctrl.typeaheadClose()"></div>
-            <div style="margin-left:-20px;margin-top:6px;float:left" ng-if="$ctrl.isLoading"><i class="fa-solid fa-spinner fa-pulse"></i></div>
-        </div>
-        <div ng-show="$ctrl.disableLemgramAutocomplete">
-            <div style="float:left">
-                <input autofocus type="text" ng-model="$ctrl.textInField" ng-change="$ctrl.textInput()">
+                </a>
+            </script>
+            <div ng-show="!$ctrl.disableLemgramAutocomplete">
+                <div style="float:left">
+                    <input
+                        autofocus
+                        type="text"
+                        ng-model="$ctrl.textInField"
+                        ng-change="$ctrl.textInput()"
+                        uib-typeahead="row for row in $ctrl.getRows($viewValue)"
+                        typeahead-wait-ms="500"
+                        typeahead-template-url="lemgramautocomplete.html"
+                        typeahead-loading="$ctrl.isLoading"
+                        typeahead-on-select="$ctrl.selectedItem($item, $model, $label)"
+                        placeholder="{{$ctrl.placeholderToString($ctrl.placeholder)}}"
+                        typeahead-click-open
+                        typeahead-is-open="$ctrl.typeaheadIsOpen"
+                        ng-blur="$ctrl.typeaheadClose()"
+                    />
+                </div>
+                <div style="margin-left:-20px;margin-top:6px;float:left" ng-if="$ctrl.isLoading">
+                    <i class="fa-solid fa-spinner fa-pulse"></i>
+                </div>
+            </div>
+            <div ng-show="$ctrl.disableLemgramAutocomplete">
+                <div style="float:left">
+                    <input autofocus type="text" ng-model="$ctrl.textInField" ng-change="$ctrl.textInput()" />
+                </div>
             </div>
+            <span ng-if="$ctrl.isError" style="color: red; position: relative; top: 3px; margin-left: 6px"
+                >{{$ctrl.errorMessage | loc:$root.lang}}</span
+            >
         </div>
-        <span ng-if='$ctrl.isError' style='color: red; position: relative; top: 3px; margin-left: 6px'>{{$ctrl.errorMessage | loc:$root.lang}}</span>
-    </div>    
     `,
     bindings: {
         input: "<",
@@ -195,4 +203,4 @@ export const component = {
             }
         },
     ],
-}
+})

app/scripts/components/compare_search.js → app/scripts/components/compare-search.js

@@ -1,9 +1,10 @@
 /** @format */
+import angular from "angular"
 import _ from "lodash"
 import settings from "@/settings"
+import { html } from "@/util"
 
-let html = String.raw
-export const compareSearchComponent = {
+angular.module("korpApp").component("compareSearch", {
     template: html`
         <div class="search_compare">
             <button
@@ -80,4 +81,4 @@ export const compareSearchComponent = {
             $ctrl.deleteCompares = () => compareSearches.flush()
         },
     ],
-}
+})