Added a customizable scrollbar
This commit is contained in:
parent
fd6dc2c936
commit
0d8c0514a6
|
@ -1,7 +1,7 @@
|
||||||
<div class="parent-div">
|
<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>
|
<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>
|
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -24,17 +24,23 @@ var flatten = require('flat');
|
||||||
declare var $ :any;
|
declare var $ :any;
|
||||||
|
|
||||||
|
|
||||||
//import * as $ from '../../../node_modules/jquery/dist/jquery'
|
|
||||||
|
|
||||||
import * as scroll from '../../assets/jquery.scrollTo.min.js';
|
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({
|
@Component({
|
||||||
selector: 'dynamic-form',
|
selector: 'dynamic-form',
|
||||||
templateUrl: './dynamic-form.component.html',
|
templateUrl: './dynamic-form.component.html',
|
||||||
styleUrls: ['./dynamic-form.component.css'],
|
styleUrls: [
|
||||||
|
'./dynamic-form.component.css',
|
||||||
|
'../../assets/perfect-scrollbar/perfect-scrollbar.css'
|
||||||
|
],
|
||||||
providers: [
|
providers: [
|
||||||
FieldControlService, ServerService, dataModelBuilder
|
FieldControlService, ServerService, dataModelBuilder
|
||||||
]
|
]
|
||||||
|
@ -187,6 +193,10 @@ export class DynamicFormComponent implements OnInit {
|
||||||
(err) => {
|
(err) => {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var formScroller = new PerfectScrollbar("#form-container");
|
||||||
|
var tocScroller = new PerfectScrollbar("#toc-container");
|
||||||
|
debugger;
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollToElemID(elemID) {
|
scrollToElemID(elemID) {
|
||||||
|
@ -196,7 +206,7 @@ export class DynamicFormComponent implements OnInit {
|
||||||
|
|
||||||
private patchForm(flatList: any) {
|
private patchForm(flatList: any) {
|
||||||
|
|
||||||
debugger;
|
|
||||||
for (var prop in flatList) {
|
for (var prop in flatList) {
|
||||||
if (flatList.hasOwnProperty(prop)) {
|
if (flatList.hasOwnProperty(prop)) {
|
||||||
if (prop.endsWith('.id') || prop.endsWith('.answer') || prop.endsWith('.value')) continue;
|
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
|
ngAfterViewChecked(): void { //navigate to certain section of the page
|
||||||
|
|
||||||
try {
|
try {
|
||||||
document.querySelector('#' + this.fragment).scrollIntoView();
|
document.querySelector('#' + this.fragment).scrollIntoView();
|
||||||
} catch (e) { }
|
} catch (e) { }
|
||||||
|
@ -221,18 +232,18 @@ export class DynamicFormComponent implements OnInit {
|
||||||
//data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
|
//data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
|
||||||
data.properties = JSON.stringify(this.form.value);
|
data.properties = JSON.stringify(this.form.value);
|
||||||
|
|
||||||
this.serverService.setDataset(data).subscribe((data) => {
|
this.serverService.setDataset(data).subscribe(
|
||||||
console.log("Updated dataset");
|
(data) => {
|
||||||
this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});
|
console.log("Updated dataset");
|
||||||
//VALE EDW NA SE PIGAINEI PISW KAI NA SOU VGAZEI ENA MHNYMA SUCCESS... (to success tha to valw egw an thes)
|
//simple_notifier("success",null,"Saved form progress");
|
||||||
|
this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});
|
||||||
},
|
},
|
||||||
(err) => {
|
(err) => {
|
||||||
|
simple_notifier("danger",null,"Could not save form progress");
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
(err) => {
|
(err) => {
|
||||||
|
simple_notifier("danger",null,"Could not save form progress");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
|
@ -38,6 +38,12 @@
|
||||||
<!-- font-awesome css -->
|
<!-- font-awesome css -->
|
||||||
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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 -->
|
<!-- my custom global code and css -->
|
||||||
<link rel="stylesheet" type="text/css" href="assets/custom.css">
|
<link rel="stylesheet" type="text/css" href="assets/custom.css">
|
||||||
<script src="assets/custom.js"></script>
|
<script src="assets/custom.js"></script>
|
||||||
|
|
Loading…
Reference in New Issue