implement #68 #79

spraakbanken · Jun 22, 2021 · faff967 · faff967
1 parent 73bfa58
commit faff967
Show file tree

Hide file tree

Showing 17 changed files with 697 additions and 501 deletions.
diff --git a/app/index.js b/app/index.js
@@ -132,6 +132,7 @@ require("./scripts/services.js")
 require("./scripts/extended.js")
 require("./scripts/struct_services.js")
 require("./scripts/directives.js")
+require("./scripts/directives/scroll.js")
 require("./scripts/filter_directives.js")
 require("./scripts/newsdesk.js")
 

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -5,6 +5,7 @@ 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 { setDefaultConfigValues } from "./settings.js"
 
 setDefaultConfigValues()
@@ -46,6 +47,7 @@ window.korpApp = angular.module("korpApp", [
 korpApp.component(kwicPagerName, kwicPager).component(sidebarName, sidebarComponent)
 korpApp.component(readingmode.componentName, readingmode.component)
 korpApp.component(autoc.componentName, autoc.component)
+korpApp.component(extendedAddBox.componentName, extendedAddBox.component)
 
 // load all custom components (imported in index.js)
 for(const componentName in window.customComponents) {

diff --git a/app/scripts/components/autoc.js b/app/scripts/components/autoc.js
@@ -57,7 +57,7 @@ export const component = {
         'lexicons',
         function ($q, lexicons) {
             const ctrl = this
-            
+
             ctrl.isError = false
 
             ctrl.$onChanges = () => {

diff --git a/app/scripts/components/extended/extended_add_box.js b/app/scripts/components/extended/extended_add_box.js
@@ -0,0 +1,68 @@
+/** @format */
+export const componentName = "addBox"
+
+let html = String.raw
+export const component = {
+    template: html`
+    <div class="mt-10 mr-14 inline-block" ng-mouseleave="$ctrl.reset()">
+        <button ng-class="{'fade-out': $ctrl.showStuffSelectButtons}" class="btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover_bg-gray-200" ng-click="$ctrl.addTokenLocal()">
+            <i class="fa fa-lg fa-plus-circle text-blue-600 mr-1"></i>
+            <span class="">{{"add_token" | loc:$root.lang}}</span>
+        </button>
+        <div class="mt-2">
+            <button ng-show="!$ctrl.showStuffSelectButtons" class="btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover_bg-gray-200" ng-click="$ctrl.showSelectButtons()">
+                <i class="fa fa-lg fa-plus-circle text-orange-900 mr-1"></i>
+                {{ 'add_tag_box' | loc:$root.lang }}
+            </button>
+            <div class="pos-buttons" ng-class="{'fade-in': $ctrl.showStuffSelectButtons}">
+                <button ng-click="$ctrl.addStructTokenLocal()" class="block btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover_bg-gray-200">
+                    <i class="fa fa-arrow-left mr-1"></i>
+                    {{ 'before_token' | loc:$root.lang }}
+                </button>
+                <button ng-click="$ctrl.addStructTokenLocal(false)" class="block btn btn-sm image_button insert_token border-gray-300 transition duration-200 hover_bg-gray-200 mt-2">
+                    <i class="fa fa-arrow-right mr-1"></i>
+                    {{ 'after_token' | loc:$root.lang }}
+                </button>
+            </div>
+        </div>
+    </div>
+    <style>
+    .fade-out {
+        transition: opacity ease-out 0.3s;
+        opacity: 0.5;
+    }
+    .pos-buttons {
+        display: none;
+    }
+    .fade-in {
+        display: block;
+    }
+    </style>
+    `,
+    bindings: {
+        addToken: "&",
+        addStructToken: "&",
+    },
+    controller: function AddBoxCtrl() {
+        const ctrl = this
+
+        ctrl.showStuffSelectButtons = false
+
+        ctrl.addTokenLocal = function() {
+            ctrl.addToken()
+        }
+
+        ctrl.showSelectButtons = function() {
+            ctrl.showStuffSelectButtons = true
+        }
+
+        ctrl.addStructTokenLocal = function (start = true) {
+            ctrl.reset()
+            ctrl.addStructToken({ start })
+        }
+
+        ctrl.reset = function () {
+            ctrl.showStuffSelectButtons = false
+        }
+    },
+}
diff --git a/app/scripts/components/pager.js b/app/scripts/components/pager.js
@@ -20,13 +20,13 @@ export const kwicPager = {
                 rotate="false"
             ></ul>
             <div class="page_input">
-                <span>{{'goto_page' | loc:lang}} </span>
+                <span>{{'goto_page' | loc:$root.lang}} </span>
                 <input
                     ng-model="$ctrl.gotoPage"
                     ng-keyup="$ctrl.onPageInput($event)"
                     ng-click="$event.stopPropagation()"
                 />
-                {{'of' | loc:lang}} {{$ctrl.numPages}}
+                {{'of' | loc:$root.lang}} {{$ctrl.numPages}}
             </div>
         </div>
     `,