Commit 5b0fb0b8 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

added title

parent e0f2e81a
......@@ -48,16 +48,21 @@ Open browser on http://localhost:8080/demo
var navControl = new Navigation("navigation", {
"user" : {
"name" : "Firstname Surname",
"id" : "k000000",
"url" : "/demo"
"url" : "/demo",
"access" : "test"
},
"navigation": {
"Link1" : "path",
"Link2" : "path",
"Link3" : "path"
},
"search" : true,
"position": {
"map" : map
},
"title" : {true,
"search" : {
"url" : "search"
},
"help" : {
"classic" : {
"id" : "introduction"
......@@ -66,15 +71,24 @@ Open browser on http://localhost:8080/demo
"indepth" : {
"id" : "kde"
}
},
"showLanguage" : true,
},
"language" : true,
"lang" : language,
"langdata" : navLangData
});
});;
### Options
| Option | Default | Description |
| -------------|------------|-------------|
| `user` | false | activates the user link |
| `help` | false | activates the help link |
| `title` | true | shows a title |
| `language` | false | activates the language link |
| `search` | null | activates the search link |
| `position` | null | activates the position link |
| `navigation` | null | activates the navigation link |
## Copyright and License
......
......@@ -117,7 +117,7 @@
},
"position": {
"map" : map
},
},
"search" : {
"url" : "search"
},
......@@ -130,7 +130,7 @@
"id" : "kde"
}
},
"showLanguage" : true,
"language" : true,
"lang" : language,
"langdata" : navLangData
});
......
.navigation-help-smallfont {
.leaflet-container {
cursor: default !important;
}
.leaflet-clickable {
cursor: default !important;
}
.navigation-smallfont {
font-size: 14px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
}
.navigation-position {
width: 205px;
}
.navigation-title {
line-height: 40px;
padding-left: 30px;
}
@media (min-width: 768px) {
.navigation-help-button {
position: absolute;
......
......@@ -12,9 +12,9 @@ var Navigation = (function () {
if (options.langdata) {
this.langData = options.langdata;
}
this.showLanguage = true;
if (typeof options.showLanguage !== 'undefined') {
this.showLanguage = options.showLanguage;
this.language = true;
if (typeof options.language !== 'undefined') {
this.language = options.language;
}
this.search = {
"url": "search"
......@@ -25,9 +25,11 @@ var Navigation = (function () {
if (options.search === false) {
this.search = false;
}
if (typeof options.position !== 'undefined') {
if (typeof options.position !== 'undefined')
this.position = options.position;
}
this.title = true;
if (typeof options.title !== 'undefined')
this.title = options.title;
this.help = {
"classic": true,
"indepth": true,
......@@ -78,9 +80,11 @@ var Navigation = (function () {
var self = this;
self.navDiv = document.getElementById(navDivId);
var nav = L.DomUtil.create('nav', 'uk-navbar', self.navDiv);
// back arrow
var backLink = L.DomUtil.create('a', '', L.DomUtil.create('li', '', L.DomUtil.create('ul', 'uk-navbar-nav', nav)));
backLink.href = '/';
L.DomUtil.create('span', 'uk-icon-arrow-left', backLink);
// search
if (self.search) {
var searchDiv = L.DomUtil.create('div', 'uk-navbar-content uk-padding-remove', nav);
var searchForm = L.DomUtil.create('form', 'uk-search', searchDiv);
......@@ -92,33 +96,62 @@ var Navigation = (function () {
searchInput.onfocus = function () { this.value = ''; };
searchInput.onblur = function () { this.value = ''; };
}
// title
if (self.title) {
var titleBar = L.DomUtil.create('h3', 'navigation-title', L.DomUtil.create('li', '', L.DomUtil.create('ul', 'uk-navbar-nav uk-hidden-small', nav)));
titleBar.textContent = title;
}
var flip = L.DomUtil.create('div', 'uk-navbar-flip', nav);
// BIG SCREENS
var large = L.DomUtil.create('ul', 'uk-navbar-nav uk-hidden-small', flip);
// navigation
// position
var ddpos = false, ddmpos = true;
if (self.position) {
var largePosition = L.DomUtil.create('li', 'uk-parent', large);
largePosition.setAttribute('data-uk-dropdown', "{mode:'click'}");
var largePositionLink = L.DomUtil.create('a', '', largePosition);
var largePositionSpan = L.DomUtil.create('span', 'uk-icon-location-arrow', largePositionLink);
largePositionSpan.textContent = ' Position';
var largePositionDropdown = L.DomUtil.create('div', 'uk-dropdown uk-dropdown-navbar uk-dropdown-bottom', largePosition);
var largePositionList = L.DomUtil.create('ul', 'uk-nav uk-nav-navbar', largePositionDropdown);
var largePositionDD = L.DomUtil.create('a', '', L.DomUtil.create('li', 'uk-dropdown-close', largePositionList));
largePositionDD.textContent = "Decimal degrees (DD)";
var largePositionDDM = L.DomUtil.create('a', '', L.DomUtil.create('li', 'uk-dropdown-close', largePositionList));
largePositionDDM.textContent = "Degrees Decimal Minutes (DMM)";
largePositionDD.onclick = function () {
var ddpos = false, ddmpos = true;
var postionNavbar = L.DomUtil.create('ul', 'uk-navbar-nav uk-hidden-small', flip);
var position = L.DomUtil.create('li', 'uk-parent navigation-position', postionNavbar);
position.setAttribute('data-uk-dropdown', "{mode:'click'}");
var positionLink = L.DomUtil.create('a', '', position);
var positionIcon = L.DomUtil.create('span', 'uk-icon-location-arrow', positionLink);
var positionSpan = L.DomUtil.create('span', 'navigation-smallfont', positionLink);
positionSpan.textContent = ' Latitude Longitude';
var positionDropdown = L.DomUtil.create('div', 'uk-dropdown uk-dropdown-navbar uk-dropdown-bottom', position);
var positionList = L.DomUtil.create('ul', 'uk-nav uk-nav-navbar', positionDropdown);
var positionDD = L.DomUtil.create('a', 'navigation-smallfont', L.DomUtil.create('li', 'uk-dropdown-close', positionList));
positionDD.textContent = "Decimal degrees (DD)";
var positionDDM = L.DomUtil.create('a', 'navigation-smallfont', L.DomUtil.create('li', 'uk-dropdown-close', positionList));
positionDDM.textContent = "Degrees Decimal Minutes (DMM)";
var onMouseMove = function (e) {
if (ddpos)
positionSpan.textContent = ' ' + e.latlng.lat.toFixed(4) + " " + e.latlng.lng.toFixed(4);
if (ddmpos)
positionSpan.textContent = ' ' + self.convertDDtoDDM(e.latlng.lat, true) + " " + self.convertDDtoDDM(e.latlng.lng, false);
};
var positionSwitch = L.DomUtil.create('a', 'navigation-smallfont', L.DomUtil.create('li', 'uk-dropdown-close', positionList));
positionSwitch.textContent = "Deactivate";
var isActive = false;
positionDD.onclick = function () {
ddmpos = false;
ddpos = true;
if (!isActive) {
self.position.map.on('mousemove', onMouseMove);
isActive = true;
}
};
largePositionDDM.onclick = function () {
positionDDM.onclick = function () {
ddmpos = true;
ddpos = false;
if (!isActive) {
self.position.map.on('mousemove', onMouseMove);
isActive = true;
}
};
positionSwitch.onclick = function () {
isActive = false;
self.position.map.off('mousemove', onMouseMove);
positionSpan.textContent = ' Latitude Longitude';
};
}
// BIG SCREENS
var large = L.DomUtil.create('ul', 'uk-navbar-nav uk-hidden-small', flip);
// navigation
if (self.navigation) {
if (Object.keys(self.navigation).length == 1) {
for (var key in self.navigation) {
......@@ -158,14 +191,14 @@ var Navigation = (function () {
var helpHeader = L.DomUtil.create('div', 'uk-modal-header', helpDialog);
var helpHeadline = L.DomUtil.create('h2', '', helpHeader);
helpHeadline.textContent = 'Help & Support';
var helpPreTxt = L.DomUtil.create('p', 'navigation-help-smallfont', helpDialog);
var helpPreTxt = L.DomUtil.create('p', 'navigation-smallfont', helpDialog);
helpPreTxt.textContent = 'To provide the best experience possible, we provide several reasources to assist you';
var helpGrid = L.DomUtil.create('div', 'uk-grid uk-grid-match', helpDialog);
helpGrid.setAttribute('data-uk-grid-match', "{target:'.uk-panel'}");
var helpClassic = L.DomUtil.create('div', 'uk-panel uk-panel-header uk-margin-bottom', L.DomUtil.create('div', 'uk-width-medium-1-4', helpGrid));
var helpClassicHead = L.DomUtil.create('h3', 'uk-panel-title', helpClassic);
helpClassicHead.textContent = 'Classic documentation';
var helpClassicTxt = L.DomUtil.create('p', 'navigation-help-smallfont navigation-help-txt', helpClassic);
var helpClassicTxt = L.DomUtil.create('p', 'navigation-smallfont navigation-help-txt', helpClassic);
helpClassicTxt.textContent = 'The classic documentation is the equivalent to a User Manual. This document describes parts of Seatrack Web in depth and is printable or accessable on the web. ';
var helpClassicButton = L.DomUtil.create('button', 'uk-button navigation-help-button', helpClassic);
helpClassicButton.textContent = 'Open documentation';
......@@ -188,12 +221,12 @@ var Navigation = (function () {
var helpPromptHead = L.DomUtil.create('h3', 'uk-panel-title', helpPrompt);
helpPromptHead.textContent = 'Prompts ';
var helpPromptIcon = L.DomUtil.create('span', 'uk-icon-info-circle', helpPromptHead);
var helpPromptTxt = L.DomUtil.create('p', 'navigation-help-smallfont navigation-help-txt', helpPrompt);
var helpPromptTxt = L.DomUtil.create('p', 'navigation-smallfont navigation-help-txt', helpPrompt);
helpPromptTxt.innerHTML = "Anywhere you see a <span class='uk-icon-info-circle'></span> in the application you can click it to see a short explanation of the option or feature it refers to. These are great for a quick reminder of how a feature works.";
var helpGuide = L.DomUtil.create('div', 'uk-panel uk-panel-header uk-margin-bottom', L.DomUtil.create('div', 'uk-width-medium-1-4', helpGrid));
var helpGuideHead = L.DomUtil.create('h3', 'uk-panel-title', helpGuide);
helpGuideHead.textContent = 'Interactive Guides';
var helpGuideTxt = L.DomUtil.create('p', 'navigation-help-smallfont navigation-help-txt', helpGuide);
var helpGuideTxt = L.DomUtil.create('p', 'navigation-smallfont navigation-help-txt', helpGuide);
helpGuideTxt.textContent = 'An interactive guide shows the basics on how to fill out a feature or performing a task. Start the interactive guide quickly learn how Seatrack Web works. ';
var helpGuideButton = L.DomUtil.create('button', 'uk-button navigation-help-button', helpGuide);
helpGuideButton.textContent = 'Start Interactive Guide';
......@@ -205,7 +238,7 @@ var Navigation = (function () {
var helpInDepth = L.DomUtil.create('div', 'uk-panel uk-panel-header uk-margin-bottom', L.DomUtil.create('div', 'uk-width-medium-1-4', helpGrid));
var helpInDepthHead = L.DomUtil.create('h3', 'uk-panel-title', helpInDepth);
helpInDepthHead.textContent = 'In Depth';
var helpInDepthTxt = L.DomUtil.create('p', 'navigation-help-smallfont navigation-help-txt', helpInDepth);
var helpInDepthTxt = L.DomUtil.create('p', 'navigation-smallfont navigation-help-txt', helpInDepth);
helpInDepthTxt.textContent = 'When the need for deeper understanding arises, look into our in depth sections for behind the scenes explanations.';
var helpInDepthButton = L.DomUtil.create('button', 'uk-button navigation-help-button', helpInDepth);
helpInDepthButton.textContent = 'Open documentation';
......@@ -225,11 +258,11 @@ var Navigation = (function () {
window.open(window.location.pathname + "help/indepth", '_blank');
};
var helpFooter = L.DomUtil.create('div', 'uk-modal-footer', helpDialog);
var helpPostTxt = L.DomUtil.create('p', 'navigation-help-smallfont', helpFooter);
var helpPostTxt = L.DomUtil.create('p', 'navigation-smallfont', helpFooter);
helpPostTxt.innerHTML = 'We continually strive to improve the experiences of our products, please feel welcome to send any feed-back to ' + '<a href="mailto:seatrackweb@smhi.se"><span class="uk-icon-envelope"></span> seatrackweb@smhi.se</a>';
}
// language
if (self.showLanguage) {
if (self.language) {
var largeLanguage = L.DomUtil.create('li', 'uk-parent', large);
largeLanguage.setAttribute('data-uk-dropdown', "{mode:'click'}");
var largeLanguageLink = L.DomUtil.create('a', '', largeLanguage);
......@@ -271,34 +304,6 @@ var Navigation = (function () {
var toggle = L.DomUtil.create('a', 'uk-navbar-toggle', smallParent);
var smallDropdown = L.DomUtil.create('div', 'uk-dropdown uk-dropdown-navbar uk-dropdown-bottom', smallParent);
var smallDropdownList = L.DomUtil.create('ul', 'uk-nav uk-nav-navbar', smallDropdown);
// position
if (self.position) {
var smallPositionHeader = L.DomUtil.create('li', 'uk-nav-header', smallDropdownList);
var smallPositionSpan = L.DomUtil.create('span', 'uk-icon-location-arrow', smallPositionHeader);
smallPositionSpan.textContent = ' Position';
var smallPositionDD = L.DomUtil.create('a', '', L.DomUtil.create('li', 'uk-dropdown-close', smallDropdownList));
smallPositionDD.textContent = "Decimal degrees (DD)";
var smallPositionDDM = L.DomUtil.create('a', '', L.DomUtil.create('li', 'uk-dropdown-close', smallDropdownList));
smallPositionDDM.textContent = "Degrees Decimal Minutes (DMM)";
smallPositionDD.onclick = function () {
ddmpos = false;
ddpos = true;
};
smallPositionDDM.onclick = function () {
ddmpos = true;
ddpos = false;
};
self.position.map.on('mousemove', function (e) {
if (ddpos) {
largePositionSpan.textContent = ' ' + e.latlng.lat.toFixed(4) + " " + e.latlng.lng.toFixed(4);
smallPositionSpan.textContent = ' ' + e.latlng.lat.toFixed(4) + " " + e.latlng.lng.toFixed(4);
}
if (ddmpos) {
largePositionSpan.textContent = ' ' + self.convertDDtoDDM(e.latlng.lat, true) + " " + self.convertDDtoDDM(e.latlng.lng, false);
smallPositionSpan.textContent = ' ' + self.convertDDtoDDM(e.latlng.lat, true) + " " + self.convertDDtoDDM(e.latlng.lng, false);
}
});
}
// navigation
if (self.navigation) {
var smallNavigationHeader = L.DomUtil.create('li', 'uk-nav-header', smallDropdownList);
......@@ -323,7 +328,7 @@ var Navigation = (function () {
smallHelp.setAttribute('data-uk-modal', "{target:'#help'}");
}
// language
if (self.showLanguage) {
if (self.language) {
var smallLanguageHeader = L.DomUtil.create('li', 'uk-nav-header', smallDropdownList);
var smallLanguageSpan = L.DomUtil.create('span', 'uk-icon-language', smallLanguageHeader);
smallLanguageSpan.textContent = ' Language';
......
This diff is collapsed.
.navigation-help-smallfont{font-size:14px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400}@media (min-width:768px){.navigation-help-button{position:absolute;bottom:0}.navigation-help-txt{min-height:170px}}.uk-search:before{content:"\f002";position:absolute;top:0;left:0;width:30px;line-height:40px;text-align:center;font-family:FontAwesome;font-size:14px;color:#444}.uk-search-field{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;border-radius:0;font:inherit;color:#777;-webkit-appearance:none;width:30px;height:40px;border:1px solid transparent;background:rgba(0,0,0,0);-webkit-transition:all linear .2s;transition:all linear .2s;vertical-align:middle;position:relative;padding:50px;cursor:pointer;z-index:1}.uk-search-field:focus{outline:0;width:140px;padding:0 30px;cursor:text}
\ No newline at end of file
.leaflet-clickable,.leaflet-container{cursor:default!important}.navigation-smallfont{font-size:14px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400}.navigation-position{width:205px}.navigation-title{line-height:40px;padding-left:30px}@media (min-width:768px){.navigation-help-button{position:absolute;bottom:0}.navigation-help-txt{min-height:170px}}.uk-search:before{content:"\f002";position:absolute;top:0;left:0;width:30px;line-height:40px;text-align:center;font-family:FontAwesome;font-size:14px;color:#444}.uk-search-field{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;border-radius:0;font:inherit;color:#777;-webkit-appearance:none;width:30px;height:40px;border:1px solid transparent;background:rgba(0,0,0,0);-webkit-transition:all linear .2s;transition:all linear .2s;vertical-align:middle;position:relative;padding:50px;cursor:pointer;z-index:1}.uk-search-field:focus{outline:0;width:140px;padding:0 30px;cursor:text}
\ No newline at end of file
This diff is collapsed.
image.png

340 KB | W: | H:

image.png

65.3 KB | W: | H:

image.png
image.png
image.png
image.png
  • 2-up
  • Swipe
  • Onion skin
.navigation-help-smallfont {
.leaflet-container {
cursor: default !important;
}
.leaflet-clickable {
cursor: default !important;
}
.navigation-smallfont {
font-size: 14px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
}
.navigation-position {
width: 205px;
}
.navigation-title {
line-height: 40px;
padding-left: 30px;
}
@media (min-width: 768px) {
.navigation-help-button {
position: absolute;
......
......@@ -12,9 +12,9 @@ var Navigation = (function () {
if (options.langdata) {
this.langData = options.langdata;
}
this.showLanguage = true;
if (typeof options.showLanguage !== 'undefined') {
this.showLanguage = options.showLanguage;
this.language = true;
if (typeof options.language !== 'undefined') {
this.language = options.language;
}
this.search = {
"url": "search"
......@@ -25,9 +25,11 @@ var Navigation = (function () {
if (options.search === false) {
this.search = false;
}
if (typeof options.position !== 'undefined') {
if (typeof options.position !== 'undefined')
this.position = options.position;
}
this.title = true;
if (typeof options.title !== 'undefined')
this.title = options.title;
this.help = {
"classic": true,
"indepth": true,
......@@ -78,9 +80,11 @@ var Navigation = (function () {
var self = this;
self.navDiv = document.getElementById(navDivId);
var nav = L.DomUtil.create('nav', 'uk-navbar', self.navDiv);
// back arrow
var backLink = L.DomUtil.create('a', '', L.DomUtil.create('li', '', L.DomUtil.create('ul', 'uk-navbar-nav', nav)));
backLink.href = '/';
L.DomUtil.create('span', 'uk-icon-arrow-left', backLink);
// search
if (self.search) {
var searchDiv = L.DomUtil.create('div', 'uk-navbar-content uk-padding-remove', nav);
var searchForm = L.DomUtil.create('form', 'uk-search', searchDiv);
......@@ -92,33 +96,62 @@ var Navigation = (function () {
searchInput.onfocus = function () { this.value = ''; };
searchInput.onblur = function () { this.value = ''; };
}
// title
if (self.title) {
var titleBar = L.DomUtil.create('h3', 'navigation-title', L.DomUtil.create('li', '', L.DomUtil.create('ul', 'uk-navbar-nav uk-hidden-small', nav)));
titleBar.textContent = title;
}
var flip = L.DomUtil.create('div', 'uk-navbar-flip', nav);
// BIG SCREENS
var large = L.DomUtil.create('ul', 'uk-navbar-nav uk-hidden-small', flip);
// navigation
// position
var ddpos = false, ddmpos = true;
if (self.position) {
var largePosition = L.DomUtil.create('li', 'uk-parent', large);
largePosition.setAttribute('data-uk-dropdown', "{mode:'click'}");
var largePositionLink = L.DomUtil.create('a', '', largePosition);
var largePositionSpan = L.DomUtil.create('span', 'uk-icon-location-arrow', largePositionLink);
largePositionSpan.textContent = ' Position';
var largePositionDropdown = L.DomUtil.create('div', 'uk-dropdown uk-dropdown-navbar uk-dropdown-bottom', largePosition);
var largePositionList = L.DomUtil.create('ul', 'uk-nav uk-nav-navbar', largePositionDropdown);
var largePositionDD = L.DomUtil.create('a', '', L.DomUtil.create('li', 'uk-dropdown-close', largePositionList));
largePositionDD.textContent = "Decimal degrees (DD)";
var largePositionDDM = L.DomUtil.create('a', '', L.DomUtil.create('li', 'uk-dropdown-close', largePositionList));
largePositionDDM.textContent = "Degrees Decimal Minutes (DMM)";
largePositionDD.onclick = function () {
var ddpos = false, ddmpos = true;
var postionNavbar = L.DomUtil.create('ul', 'uk-navbar-nav uk-hidden-small', flip);
var position = L.DomUtil.create('li', 'uk-parent navigation-position', postionNavbar);
position.setAttribute('data-uk-dropdown', "{mode:'click'}");
var positionLink = L.DomUtil.create('a', '', position);
var positionIcon = L.DomUtil.create('span', 'uk-icon-location-arrow', positionLink);
var positionSpan = L.DomUtil.create('span', 'navigation-smallfont', positionLink);
positionSpan.textContent = ' Latitude Longitude';
var positionDropdown = L.DomUtil.create('div', 'uk-dropdown uk-dropdown-navbar uk-dropdown-bottom', position);
var positionList = L.DomUtil.create('ul', 'uk-nav uk-nav-navbar', positionDropdown);
var positionDD = L.DomUtil.create('a', 'navigation-smallfont', L.DomUtil.create('li', 'uk-dropdown-close', positionList));
positionDD.textContent = "Decimal degrees (DD)";
var positionDDM = L.DomUtil.create('a', 'navigation-smallfont', L.DomUtil.create('li', 'uk-dropdown-close', positionList));
positionDDM.textContent = "Degrees Decimal Minutes (DMM)";
var onMouseMove = function (e) {
if (ddpos)
positionSpan.textContent = ' ' + e.latlng.lat.toFixed(4) + " " + e.latlng.lng.toFixed(4);
if (ddmpos)
positionSpan.textContent = ' ' + self.convertDDtoDDM(e.latlng.lat, true) + " " + self.convertDDtoDDM(e.latlng.lng, false);
};
var positionSwitch = L.DomUtil.create('a', 'navigation-smallfont', L.DomUtil.create('li', 'uk-dropdown-close', positionList));
positionSwitch.textContent = "Deactivate";
var isActive = false;
positionDD.onclick = function () {
ddmpos = false;
ddpos = true;
if (!isActive) {
self.position.map.on('mousemove', onMouseMove);
isActive = true;
}
};
largePositionDDM.onclick = function () {
positionDDM.onclick = function () {
ddmpos = true;
ddpos = false;
if (!isActive) {
self.position.map.on('mousemove', onMouseMove);
isActive = true;
}
};
positionSwitch.onclick = function () {
isActive = false;
self.position.map.off('mousemove', onMouseMove);
positionSpan.textContent = ' Latitude Longitude';
};
}
// BIG SCREENS
var large = L.DomUtil.create('ul', 'uk-navbar-nav uk-hidden-small', flip);
// navigation
if (self.navigation) {
if (Object.keys(self.navigation).length == 1) {
for (var key in self.navigation) {
......@@ -158,14 +191,14 @@ var Navigation = (function () {
var helpHeader = L.DomUtil.create('div', 'uk-modal-header', helpDialog);
var helpHeadline = L.DomUtil.create('h2', '', helpHeader);
helpHeadline.textContent = 'Help & Support';
var helpPreTxt = L.DomUtil.create('p', 'navigation-help-smallfont', helpDialog);
var helpPreTxt = L.DomUtil.create('p', 'navigation-smallfont', helpDialog);
helpPreTxt.textContent = 'To provide the best experience possible, we provide several reasources to assist you';
var helpGrid = L.DomUtil.create('div', 'uk-grid uk-grid-match', helpDialog);
helpGrid.setAttribute('data-uk-grid-match', "{target:'.uk-panel'}");
var helpClassic = L.DomUtil.create('div', 'uk-panel uk-panel-header uk-margin-bottom', L.DomUtil.create('div', 'uk-width-medium-1-4', helpGrid));
var helpClassicHead = L.DomUtil.create('h3', 'uk-panel-title', helpClassic);
helpClassicHead.textContent = 'Classic documentation';
var helpClassicTxt = L.DomUtil.create('p', 'navigation-help-smallfont navigation-help-txt', helpClassic);
var helpClassicTxt = L.DomUtil.create('p', 'navigation-smallfont navigation-help-txt', helpClassic);
helpClassicTxt.textContent = 'The classic documentation is the equivalent to a User Manual. This document describes parts of Seatrack Web in depth and is printable or accessable on the web. ';
var helpClassicButton = L.DomUtil.create('button', 'uk-button navigation-help-button', helpClassic);
helpClassicButton.textContent = 'Open documentation';
......@@ -188,12 +221,12 @@ var Navigation = (function () {
var helpPromptHead = L.DomUtil.create('h3', 'uk-panel-title', helpPrompt);
helpPromptHead.textContent = 'Prompts ';
var helpPromptIcon = L.DomUtil.create('span', 'uk-icon-info-circle', helpPromptHead);
var helpPromptTxt = L.DomUtil.create('p', 'navigation-help-smallfont navigation-help-txt', helpPrompt);
var helpPromptTxt = L.DomUtil.create('p', 'navigation-smallfont navigation-help-txt', helpPrompt);
helpPromptTxt.innerHTML = "Anywhere you see a <span class='uk-icon-info-circle'></span> in the application you can click it to see a short explanation of the option or feature it refers to. These are great for a quick reminder of how a feature works.";
var helpGuide = L.DomUtil.create('div', 'uk-panel uk-panel-header uk-margin-bottom', L.DomUtil.create('div', 'uk-width-medium-1-4', helpGrid));
var helpGuideHead = L.DomUtil.create('h3', 'uk-panel-title', helpGuide);
helpGuideHead.textContent = 'Interactive Guides';
var helpGuideTxt = L.DomUtil.create('p', 'navigation-help-smallfont navigation-help-txt', helpGuide);
var helpGuideTxt = L.DomUtil.create('p', 'navigation-smallfont navigation-help-txt', helpGuide);
helpGuideTxt.textContent = 'An interactive guide shows the basics on how to fill out a feature or performing a task. Start the interactive guide quickly learn how Seatrack Web works. ';
var helpGuideButton = L.DomUtil.create('button', 'uk-button navigation-help-button', helpGuide);
helpGuideButton.textContent = 'Start Interactive Guide';
......@@ -205,7 +238,7 @@ var Navigation = (function () {
var helpInDepth = L.DomUtil.create('div', 'uk-panel uk-panel-header uk-margin-bottom', L.DomUtil.create('div', 'uk-width-medium-1-4', helpGrid));
var helpInDepthHead = L.DomUtil.create('h3', 'uk-panel-title', helpInDepth);
helpInDepthHead.textContent = 'In Depth';
var helpInDepthTxt = L.DomUtil.create('p', 'navigation-help-smallfont navigation-help-txt', helpInDepth);
var helpInDepthTxt = L.DomUtil.create('p', 'navigation-smallfont navigation-help-txt', helpInDepth);
helpInDepthTxt.textContent = 'When the need for deeper understanding arises, look into our in depth sections for behind the scenes explanations.';
var helpInDepthButton = L.DomUtil.create('button', 'uk-button navigation-help-button', helpInDepth);
helpInDepthButton.textContent = 'Open documentation';
......@@ -225,11 +258,11 @@ var Navigation = (function () {
window.open(window.location.pathname + "help/indepth", '_blank');
};
var helpFooter = L.DomUtil.create('div', 'uk-modal-footer', helpDialog);
var helpPostTxt = L.DomUtil.create('p', 'navigation-help-smallfont', helpFooter);
var helpPostTxt = L.DomUtil.create('p', 'navigation-smallfont', helpFooter);
helpPostTxt.innerHTML = 'We continually strive to improve the experiences of our products, please feel welcome to send any feed-back to ' + '<a href="mailto:seatrackweb@smhi.se"><span class="uk-icon-envelope"></span> seatrackweb@smhi.se</a>';
}
// language
if (self.showLanguage) {
if (self.language) {
var largeLanguage = L.DomUtil.create('li', 'uk-parent', large);
largeLanguage.setAttribute('data-uk-dropdown', "{mode:'click'}");
var largeLanguageLink = L.DomUtil.create('a', '', largeLanguage);
......@@ -271,34 +304,6 @@ var Navigation = (function () {
var toggle = L.DomUtil.create('a', 'uk-navbar-toggle', smallParent);
var smallDropdown = L.DomUtil.create('div', 'uk-dropdown uk-dropdown-navbar uk-dropdown-bottom', smallParent);
var smallDropdownList = L.DomUtil.create('ul', 'uk-nav uk-nav-navbar', smallDropdown);
// position
if (self.position) {
var smallPositionHeader = L.DomUtil.create('li', 'uk-nav-header', smallDropdownList);
var smallPositionSpan = L.DomUtil.create('span', 'uk-icon-location-arrow', smallPositionHeader);
smallPositionSpan.textContent = ' Position';
var smallPositionDD = L.DomUtil.create('a', '', L.DomUtil.create('li', 'uk-dropdown-close', smallDropdownList));
smallPositionDD.textContent = "Decimal degrees (DD)";
var smallPositionDDM = L.DomUtil.create('a', '', L.DomUtil.create('li', 'uk-dropdown-close', smallDropdownList));
smallPositionDDM.textContent = "Degrees Decimal Minutes (DMM)";
smallPositionDD.onclick = function () {
ddmpos = false;
ddpos = true;
};
smallPositionDDM.onclick = function () {
ddmpos = true;
ddpos = false;
};
self.position.map.on('mousemove', function (e) {
if (ddpos) {
largePositionSpan.textContent = ' ' + e.latlng.lat.toFixed(4) + " " + e.latlng.lng.toFixed(4);
smallPositionSpan.textContent = ' ' + e.latlng.lat.toFixed(4) + " " + e.latlng.lng.toFixed(4);
}
if (ddmpos) {
largePositionSpan.textContent = ' ' + self.convertDDtoDDM(e.latlng.lat, true) + " " + self.convertDDtoDDM(e.latlng.lng, false);