Added a customizable scrollbar

dmp-frontend/src/app/form/dynamic-form.component.html

@@ -1,7 +1,7 @@
 <div class="parent-div">
 
 
-	<div class="col-md-8 col-sm-9 child-div-left styled-scrollbar" >
+	<div class="col-md-8 col-sm-9 child-div-left styled-scrollbar" id="form-container">
 			
 		<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
 
@@ -77,7 +77,7 @@
 
 
 
-	<div class="col-md-4  col-sm-3 child-div-right styled-scrollbar">
+	<div class="col-md-4  col-sm-3 child-div-right styled-scrollbar" id="toc-container">
 		<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
 	</div>
 

dmp-frontend/src/app/form/dynamic-form.component.ts

@@ -24,17 +24,23 @@ var flatten = require('flat');
 declare var $ :any;
 
 
-//import * as $ from '../../../node_modules/jquery/dist/jquery'
-
 import * as scroll from '../../assets/jquery.scrollTo.min.js';
 
 
+import '../../assets/custom.js';
+declare function simple_notifier(type: string, title: string, message:string): any;
 
 
+//import '../../assets/perfect-scrollbar/perfect-scrollbar.js';
+declare var PerfectScrollbar : any;
+
 @Component({
   selector: 'dynamic-form',
   templateUrl: './dynamic-form.component.html',
-  styleUrls: ['./dynamic-form.component.css'],
+  styleUrls: [
+    './dynamic-form.component.css', 
+    '../../assets/perfect-scrollbar/perfect-scrollbar.css'
+  ],
   providers: [
     FieldControlService, ServerService, dataModelBuilder
   ]
@@ -187,6 +193,10 @@ export class DynamicFormComponent implements OnInit {
       (err) => {
 
       });
+
+      var formScroller = new PerfectScrollbar("#form-container");
+      var tocScroller = new PerfectScrollbar("#toc-container");
+      debugger;
   }
 
   scrollToElemID(elemID) {
@@ -196,7 +206,7 @@ export class DynamicFormComponent implements OnInit {
 
   private patchForm(flatList: any) {
 
-    debugger;
+    
     for (var prop in flatList) {
       if (flatList.hasOwnProperty(prop)) {
         if (prop.endsWith('.id') || prop.endsWith('.answer') || prop.endsWith('.value')) continue;
@@ -208,6 +218,7 @@ export class DynamicFormComponent implements OnInit {
   }
 
   ngAfterViewChecked(): void { //navigate to certain section of the page
+
     try {
       document.querySelector('#' + this.fragment).scrollIntoView();
     } catch (e) { }
@@ -221,18 +232,18 @@ export class DynamicFormComponent implements OnInit {
         //data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
         data.properties = JSON.stringify(this.form.value);
 
-        this.serverService.setDataset(data).subscribe((data) => {
-          console.log("Updated dataset");  
-          this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});     
-          //VALE EDW NA SE PIGAINEI PISW KAI NA SOU VGAZEI ENA MHNYMA SUCCESS... (to success tha to valw egw an thes)
-
-        },
+        this.serverService.setDataset(data).subscribe(
+          (data) => {
+            console.log("Updated dataset");  
+            //simple_notifier("success",null,"Saved form progress");
+            this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});     
+          },
           (err) => {
-
+            simple_notifier("danger",null,"Could not save form progress");
           });
       },
       (err) => {
-
+        simple_notifier("danger",null,"Could not save form progress");
       });
   }
 

dmp-frontend/src/assets/perfect-scrollbar/perfect-scrollbar.css

@@ -0,0 +1,112 @@
+/*
+ * Container style
+ */
+ .ps {
+    overflow: hidden !important;
+    overflow-anchor: none;
+    -ms-overflow-style: none;
+    touch-action: auto;
+    -ms-touch-action: auto;
+  }
+  
+  /*
+   * Scrollbar rail styles
+   */
+  .ps__rail-x {
+    display: none;
+    opacity: 0;
+    transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    height: 15px;
+    /* there must be 'bottom' or 'top' for ps__rail-x */
+    bottom: 0px;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  
+  .ps__rail-y {
+    display: none;
+    opacity: 0;
+    transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    width: 15px;
+    /* there must be 'right' or 'left' for ps__rail-y */
+    right: 0;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  
+  .ps--active-x > .ps__rail-x,
+  .ps--active-y > .ps__rail-y {
+    display: block;
+    background-color: transparent;
+  }
+  
+  .ps:hover > .ps__rail-x,
+  .ps:hover > .ps__rail-y,
+  .ps--focus > .ps__rail-x,
+  .ps--focus > .ps__rail-y,
+  .ps--scrolling-x > .ps__rail-x,
+  .ps--scrolling-y > .ps__rail-y {
+    opacity: 0.6;
+  }
+  
+  .ps__rail-x:hover,
+  .ps__rail-y:hover,
+  .ps__rail-x:focus,
+  .ps__rail-y:focus {
+    background-color: #eee;
+    opacity: 0.9;
+  }
+  
+  /*
+   * Scrollbar thumb styles
+   */
+  .ps__thumb-x {
+    background-color: #aaa;
+    border-radius: 6px;
+    transition: background-color .2s linear, height .2s ease-in-out;
+    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
+    height: 6px;
+    /* there must be 'bottom' for ps__thumb-x */
+    bottom: 2px;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  
+  .ps__thumb-y {
+    background-color: #aaa;
+    border-radius: 6px;
+    transition: background-color .2s linear, width .2s ease-in-out;
+    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
+    width: 6px;
+    /* there must be 'right' for ps__thumb-y */
+    right: 2px;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  
+  .ps__rail-x:hover > .ps__thumb-x,
+  .ps__rail-x:focus > .ps__thumb-x {
+    background-color: #999;
+    height: 11px;
+  }
+  
+  .ps__rail-y:hover > .ps__thumb-y,
+  .ps__rail-y:focus > .ps__thumb-y {
+    background-color: #999;
+    width: 11px;
+  }
+  
+  /* MS supports */
+  @supports (-ms-overflow-style: none) {
+    .ps {
+      overflow: auto !important;
+    }
+  }
+  
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps {
+      overflow: auto !important;
+    }
+  }

dmp-frontend/src/index.html

@@ -38,6 +38,12 @@
 		<!-- font-awesome css -->
 		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
+
+		<!-- Customized scrollbars -->
+		<link rel="stylesheet" type="text/css" href="assets/perfect-scrollbar/perfect-scrollbar.css">
+		<script src="assets/perfect-scrollbar/perfect-scrollbar.js"></script>
+
+
 		<!-- my custom global code and css --> 
 		<link rel="stylesheet" type="text/css" href="assets/custom.css">
 		<script src="assets/custom.js"></script>