dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Minor UI improvements for "manual dialog" (fixed pixelated text)

Browse Source
This commit is contained in:
Mark Friedrich
2020-03-11 19:30:31 +01:00
parent a5ed5ebe38
commit c4333af431
6 changed files with 206 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
js/app/ui/dialog/manual.js
View File

@@ -37,121 +37,129 @@ define([
let content = Mustache.render(template, data);
// show dialog
let mapManualDialog = bootbox.dialog({
let manualDialog = bootbox.dialog({
title: 'Manual',
message: content,
size: 'large',
buttons: {
success: {
close: {
label: 'close',
className: 'btn-default',
callback: function(){
$(mapManualDialog).modal('hide');
}
className: 'btn-default'
}
},
show: true
show: false
});
// modal offset top
let modalOffsetTop = 200;
// disable on scroll event
let disableOnScrollEvent = false;
let dialogEl = manualDialog[0];
// scroll breakpoints
let scrollBreakpointElements = $('.pf-manual-scroll-break');
let scrollBreakpointElements = dialogEl.getElementsByClassName('pf-manual-scroll-break');
// scroll navigation links
let scrollNavLiElements = $('.' + config.dialogNavigationListItemClass);
let scrollNavLiElements = dialogEl.getElementsByClassName(config.dialogNavigationListItemClass);
let scrollspyElement = $('#' + config.mapManualScrollspyId);
let scrollspyElement = dialogEl.querySelector(`#${config.mapManualScrollspyId}`);
let whileScrolling = () => {
if(disableOnScrollEvent === false){
for(let i = 0; i < scrollBreakpointElements.length; i++){
let offset = $(scrollBreakpointElements[i]).offset().top;
// set navigation button observer
let mainNavigationLinks = dialogEl.querySelectorAll(`.${config.dialogNavigationClass} a`);
// text anchor links
let subNavigationLinks = scrollspyElement.querySelectorAll('a[data-target]');
let navigationLinks = [...mainNavigationLinks, ...subNavigationLinks];
if( (offset - modalOffsetTop) > 0){
manualDialog.on('shown.bs.modal', e => {
// disable on scroll event
let disableOnScrollEvent = false;
if(! $( scrollNavLiElements[i]).hasClass('active')){
// remove all active classes
scrollNavLiElements.removeClass('active');
// remove focus on links
scrollNavLiElements.find('a').blur();
let whileScrolling = () => {
if(disableOnScrollEvent === false){
let scrollOffset = scrollspyElement.mcs.top;
for(let [i, scrollBreakpointEl] of Object.entries(scrollBreakpointElements)){
let offset = scrollBreakpointEl.offsetTop;
if((offset + scrollOffset) > 0){
if(!scrollNavLiElements[i].classList.contains('active')){
// remove all active classes
// -> remove focus on links
[...scrollNavLiElements].forEach(el => {
el.classList.remove('active');
el.getElementsByTagName('a')[0].blur();
});
$( scrollNavLiElements[i]).addClass('active');
scrollNavLiElements[i].classList.add('active');
}
break;
}
break;
}
}
}
};
};
// init scrollbar
scrollspyElement.mCustomScrollbar({
axis: 'y',
theme: 'light-3',
scrollInertia: 200,
autoExpandScrollbar: false,
scrollButtons:{
enable: true,
scrollAmount: 30
},
advanced: {
updateOnContentResize: true
},
callbacks:{
onInit: function(){
// init fake-map update counter
scrollspyElement.find('.' + data.mapCounterClass).initMapUpdateCounter();
// set navigation button observer
let mainNavigationLinks = $('.' + config.dialogNavigationClass).find('a');
// text anchor links
let subNavigationLinks = scrollspyElement.find('a[data-target]');
let navigationLinks = mainNavigationLinks.add(subNavigationLinks);
navigationLinks.on('click', function(e){
e.preventDefault();
disableOnScrollEvent = true;
// scroll to anchor
scrollspyElement.mCustomScrollbar('scrollTo', $(this).attr('data-target'));
let mainNavigationLiElement = $(this).parent('.' + config.dialogNavigationListItemClass);
whileScrolling();
// if link is a main navigation link (not an anchor link)
if(mainNavigationLiElement.length > 0){
// remove all active classes
scrollNavLiElements.removeClass('active');
// set new active class
$(this).parent().addClass('active');
}
});
},
onScroll: function(){
disableOnScrollEvent = false;
whileScrolling();
},
whileScrolling: whileScrolling
},
mouseWheel:{
enable: true,
scrollAmount: 200,
// init scrollbar
$(scrollspyElement).mCustomScrollbar({
axis: 'y',
preventDefault: true // do not scroll parent at the end
},
scrollbarPosition: 'outsite',
autoDraggerLength: true
theme: 'light-3',
scrollInertia: 200,
autoExpandScrollbar: false,
scrollButtons:{
enable: true,
scrollAmount: 30
},
advanced: {
updateOnContentResize: true
},
callbacks:{
onInit: function(){
// init fake-map update counter
let counterEl = scrollspyElement.querySelector(`.${data.mapCounterClass}`);
$(counterEl).initMapUpdateCounter();
$(navigationLinks).on('click', function(e){
e.preventDefault();
disableOnScrollEvent = true;
// scroll to anchor
$(scrollspyElement).mCustomScrollbar('scrollTo', $(this).attr('data-target'));
let mainNavigationLiElement = this.closest(`.${config.dialogNavigationListItemClass}`);
whileScrolling();
// if link is a main navigation link (not an anchor link)
if(mainNavigationLiElement){
// remove all active classes
[...scrollNavLiElements].forEach(el => el.classList.remove('active'));
// set new active class
this.parentNode.classList.add('active');
}
});
},
onScroll: function(){
disableOnScrollEvent = false;
whileScrolling();
},
whileScrolling: whileScrolling
},
mouseWheel:{
enable: true,
scrollAmount: 200,
axis: 'y',
preventDefault: true // do not scroll parent at the end
},
scrollbarPosition: 'outsite',
autoDraggerLength: true
});
});
manualDialog.on('hide.bs.modal', e => {
let dialogEl = e.target;
$(navigationLinks).off('click');
$(dialogEl.querySelector(`#${config.mapManualScrollspyId}`))
.mCustomScrollbar('destroy');
});
// show dialog
manualDialog.modal('show');
});
};

4
public/css/v2.0.0/pathfinder.css
View File

File diff suppressed because one or more lines are too long

2
public/css/v2.0.0/pathfinder.css.map
View File

File diff suppressed because one or more lines are too long

190
public/js/v2.0.0/app/ui/dialog/manual.js
View File

@@ -37,121 +37,129 @@ define([
let content = Mustache.render(template, data);
// show dialog
let mapManualDialog = bootbox.dialog({
let manualDialog = bootbox.dialog({
title: 'Manual',
message: content,
size: 'large',
buttons: {
success: {
close: {
label: 'close',
className: 'btn-default',
callback: function(){
$(mapManualDialog).modal('hide');
}
className: 'btn-default'
}
},
show: true
show: false
});
// modal offset top
let modalOffsetTop = 200;
// disable on scroll event
let disableOnScrollEvent = false;
let dialogEl = manualDialog[0];
// scroll breakpoints
let scrollBreakpointElements = $('.pf-manual-scroll-break');
let scrollBreakpointElements = dialogEl.getElementsByClassName('pf-manual-scroll-break');
// scroll navigation links
let scrollNavLiElements = $('.' + config.dialogNavigationListItemClass);
let scrollNavLiElements = dialogEl.getElementsByClassName(config.dialogNavigationListItemClass);
let scrollspyElement = $('#' + config.mapManualScrollspyId);
let scrollspyElement = dialogEl.querySelector(`#${config.mapManualScrollspyId}`);
let whileScrolling = () => {
if(disableOnScrollEvent === false){
for(let i = 0; i < scrollBreakpointElements.length; i++){
let offset = $(scrollBreakpointElements[i]).offset().top;
// set navigation button observer
let mainNavigationLinks = dialogEl.querySelectorAll(`.${config.dialogNavigationClass} a`);
// text anchor links
let subNavigationLinks = scrollspyElement.querySelectorAll('a[data-target]');
let navigationLinks = [...mainNavigationLinks, ...subNavigationLinks];
if( (offset - modalOffsetTop) > 0){
manualDialog.on('shown.bs.modal', e => {
// disable on scroll event
let disableOnScrollEvent = false;
if(! $( scrollNavLiElements[i]).hasClass('active')){
// remove all active classes
scrollNavLiElements.removeClass('active');
// remove focus on links
scrollNavLiElements.find('a').blur();
let whileScrolling = () => {
if(disableOnScrollEvent === false){
let scrollOffset = scrollspyElement.mcs.top;
for(let [i, scrollBreakpointEl] of Object.entries(scrollBreakpointElements)){
let offset = scrollBreakpointEl.offsetTop;
if((offset + scrollOffset) > 0){
if(!scrollNavLiElements[i].classList.contains('active')){
// remove all active classes
// -> remove focus on links
[...scrollNavLiElements].forEach(el => {
el.classList.remove('active');
el.getElementsByTagName('a')[0].blur();
});
$( scrollNavLiElements[i]).addClass('active');
scrollNavLiElements[i].classList.add('active');
}
break;
}
break;
}
}
}
};
};
// init scrollbar
scrollspyElement.mCustomScrollbar({
axis: 'y',
theme: 'light-3',
scrollInertia: 200,
autoExpandScrollbar: false,
scrollButtons:{
enable: true,
scrollAmount: 30
},
advanced: {
updateOnContentResize: true
},
callbacks:{
onInit: function(){
// init fake-map update counter
scrollspyElement.find('.' + data.mapCounterClass).initMapUpdateCounter();
// set navigation button observer
let mainNavigationLinks = $('.' + config.dialogNavigationClass).find('a');
// text anchor links
let subNavigationLinks = scrollspyElement.find('a[data-target]');
let navigationLinks = mainNavigationLinks.add(subNavigationLinks);
navigationLinks.on('click', function(e){
e.preventDefault();
disableOnScrollEvent = true;
// scroll to anchor
scrollspyElement.mCustomScrollbar('scrollTo', $(this).attr('data-target'));
let mainNavigationLiElement = $(this).parent('.' + config.dialogNavigationListItemClass);
whileScrolling();
// if link is a main navigation link (not an anchor link)
if(mainNavigationLiElement.length > 0){
// remove all active classes
scrollNavLiElements.removeClass('active');
// set new active class
$(this).parent().addClass('active');
}
});
},
onScroll: function(){
disableOnScrollEvent = false;
whileScrolling();
},
whileScrolling: whileScrolling
},
mouseWheel:{
enable: true,
scrollAmount: 200,
// init scrollbar
$(scrollspyElement).mCustomScrollbar({
axis: 'y',
preventDefault: true // do not scroll parent at the end
},
scrollbarPosition: 'outsite',
autoDraggerLength: true
theme: 'light-3',
scrollInertia: 200,
autoExpandScrollbar: false,
scrollButtons:{
enable: true,
scrollAmount: 30
},
advanced: {
updateOnContentResize: true
},
callbacks:{
onInit: function(){
// init fake-map update counter
let counterEl = scrollspyElement.querySelector(`.${data.mapCounterClass}`);
$(counterEl).initMapUpdateCounter();
$(navigationLinks).on('click', function(e){
e.preventDefault();
disableOnScrollEvent = true;
// scroll to anchor
$(scrollspyElement).mCustomScrollbar('scrollTo', $(this).attr('data-target'));
let mainNavigationLiElement = this.closest(`.${config.dialogNavigationListItemClass}`);
whileScrolling();
// if link is a main navigation link (not an anchor link)
if(mainNavigationLiElement){
// remove all active classes
[...scrollNavLiElements].forEach(el => el.classList.remove('active'));
// set new active class
this.parentNode.classList.add('active');
}
});
},
onScroll: function(){
disableOnScrollEvent = false;
whileScrolling();
},
whileScrolling: whileScrolling
},
mouseWheel:{
enable: true,
scrollAmount: 200,
axis: 'y',
preventDefault: true // do not scroll parent at the end
},
scrollbarPosition: 'outsite',
autoDraggerLength: true
});
});
manualDialog.on('hide.bs.modal', e => {
let dialogEl = e.target;
$(navigationLinks).off('click');
$(dialogEl.querySelector(`#${config.mapManualScrollspyId}`))
.mCustomScrollbar('destroy');
});
// show dialog
manualDialog.modal('show');
});
};

4
sass/layout/_dialogs.scss
View File

@@ -210,6 +210,10 @@
.list-unstyled.well{
display: inline-block;
}
h2:first-of-type{
margin-top: 0;
}
}
// add system dialog ==========================================================

2
sass/pathfinder.scss
View File

@@ -5,7 +5,7 @@
* CSS - Cascading Style Sheets
* Generated with Compass http://compass-style.org
*
* Copyright 2015 - #{currentYear()}, Exodus 4D - Mark Friedrinch
* Copyright 2015 - 2020, Exodus 4D - Mark Friedrinch
*
*/