diff --git a/bower.json b/bower.json index db15469..830cad2 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "fcoo-maps", - "version": "1.32.1", + "version": "1.32.2", "homepage": "https://github.com/fcoo/fcoo-maps", "authors": [ "Niels Holt" diff --git a/demo/bower_components.css b/demo/bower_components.css index 2240ed8..f7a364f 100644 --- a/demo/bower_components.css +++ b/demo/bower_components.css @@ -974,12 +974,206 @@ svg.leaflet-image-layer.leaflet-interactive path { path:focus { outline: none; } +@charset "UTF-8"; +/*********************************************** + fcoo-colors.scss, + + (c) 2023, FCOO + + https://github.com/fcoo/fcoo-colors + https://github.com/fcoo + + +************************************************/ +/*********************************************************************** + +leaflet-bootstrap-marker-mixin.scss + +*************************************************************************/ +/*********************************************************************** +marker-circle-color +Create style for bsMarkerCircle in different colors +*************************************************************************/ +/*********************************************************************** +lbm-circle-and-icon-classes +Create class for bsMarkerCircle named $name with color and color-border +*************************************************************************/ +/*********************************************************************** +lbm-marker-and-icon-classes +Create class for bsMarkerCircle named $name with color and color-border +*************************************************************************/ +/*********************************************************************** +fa-lbm-color +Create class for color and border-color used by L.bsMarkerAsIcon (and $.bsMarkerAsIcon) +to create fa-icon looking like the marker +*************************************************************************/ +/*********************************************** + _leaflet-polyline-mixin.scss + + (c) 2018, FCOO + + https://github.com/FCOO/leaflet-polyline + https://github.com/FCOO + +************************************************/ +/********************************************************** + fcoo-colors-variables.scss, + + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO +**********************************************************/ +/********************************************************** +The color scheme is from LinkedIn and shown in linkedin-palette-screen.pdf +**********************************************************/ +/********************************************************** +Color for time = tree colors for the past, now, and the future +**********************************************************/ +/********************************************************** +Application color +Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" +Can be changed by mixin application-base-color( new-color ) +in src/_fcoo-color-mixin.scss +**********************************************************/ +/********************************************************** + fcoo-colors-mixin.scss + + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO + +**********************************************************/ +/********************************************************** +Functions to get colors in different (relative) gradients +**********************************************************/ +/********************************************************** +marker-and-polygon-color +create color-classes for bsMarker and bsPolyline +**********************************************************/ +/********************************************************** +Application color +Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" +Can be changed by mixin application-base-color( new-color ) +**********************************************************/ +/********************************************************** +Color for time = tree colors for the past, now, and the future +**********************************************************/ +:root { + --fc-time-past-color: #EADCC1; + --fc-time-past-text-color: #000; + --fc-time-now-color: #3B7511; + --fc-time-now-text-color: #fff; + --fc-time-future-color: #94B5C2; + --fc-time-future-text-color: #000; +} + +.time-past-text-color { + color: var(--fc-time-past-text-color); +} + +.time-past-color { + background-color: var(--fc-time-past-color); +} + +.time-now-text-color { + color: var(--fc-time-now-text-color); +} + +.time-now-color { + background-color: var(--fc-time-now-color); +} + +.time-future-text-color { + color: var(--fc-time-future-text-color); +} + +.time-future-color { + background-color: var(--fc-time-future-color); +} + +/********************************************************** +Application color +Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" +Can be changed by mixin application-base-color( new-color ) +in src/_fcoo-color-mixin.scss +**********************************************************/ +:root { + --_fcoo-default-app-base-color: #3f5b58; + --fcoo-app-base-color: var(--_fcoo-app-base-color, var(--_fcoo-default-app-base-color)); + --_fcoo-default-app-base-text-color: #ffffff; + --fcoo-app-base-text-color: var(--_fcoo-app-base-text-color, var(--_fcoo-default-app-base-text-color)); +} + +.fcoo-app-base-text-color { + color: var(--fcoo-app-base-text-color); +} + +.fcoo-app-base-color { + background-color: var(--fcoo-app-base-color); +} @charset "UTF-8"; /*********************************************** fcoo-application-logo-and-color.scss, Defines default application-color ************************************************/ +/********************************************************** + fcoo-colors-include.scss, + + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO + + + Contain all include for a packages using + the scss-variables and scss-mixins of fcoo-colors + + The scss file must also include + + //COLOR-HELPER + @import "../bower_components/sass-color-helpers/stylesheets/color-helpers"; + + //LEAFLET-BOOTSTRAP-MARKER-MIXIN - mixin to create colors for marker (bsMarker) + @import "../bower_components/leaflet-bootstrap-marker-mixin/dist/leaflet-bootstrap-marker-mixin"; + + //LEAFLET-POLYLINE-MIXIN - mixin to create colors for polyline and polygon + @import "../bower_components/leaflet-polyline-mixin/dist/leaflet-polyline-mixin"; + +**********************************************************/ +/********************************************************** + fcoo-colors-variables.scss, + + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO +**********************************************************/ +/********************************************************** +The color scheme is from LinkedIn and shown in linkedin-palette-screen.pdf +**********************************************************/ +/********************************************************** +Color for time = tree colors for the past, now, and the future +**********************************************************/ +/********************************************************** +Application color +Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" +Can be changed by mixin application-base-color( new-color ) +in src/_fcoo-color-mixin.scss +**********************************************************/ +/********************************************************** + fcoo-colors-mixin.scss + + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO + +**********************************************************/ +/********************************************************** +Functions to get colors in different (relative) gradients +**********************************************************/ +/********************************************************** +marker-and-polygon-color +create color-classes for bsMarker and bsPolyline +**********************************************************/ +/********************************************************** +Application color +Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" +Can be changed by mixin application-base-color( new-color ) +**********************************************************/ /***************************************************** FONT-FAMILY Standard font-family from fmi.dk and Forsvarsministeriets koncernfælles Designmanual 2018 @@ -1124,23 +1318,6 @@ html.logo-portrait .fcoo-app-standard-logo { html.no-logo-portrait .fcoo-app-standard-logo { width: 200px; height: calc(200px / var(--fcoo-app-logo-wh-ratio)); -} - -/***************************************************** -Defines --fcoo-app-base-color and --fcoo-app-base-text-color -Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" -Can be changed by mixin application-base-color( new-color ) in src/_fcoo-application-base-color-mixin.scss -*****************************************************/ -/*********************************************** -fcoo-application-base-color-mixin - -Defines application-base-color = Background color for loading etc. -************************************************/ -:root { - --_fcoo-default-app-base-color: #3f5b58; - --fcoo-app-base-color: var(--_fcoo-app-base-color, var(--_fcoo-default-app-base-color)); - --_fcoo-default-app-base-text-color: #ffffff; - --fcoo-app-base-text-color: var(--_fcoo-app-base-text-color, var(--_fcoo-default-app-base-text-color)); } @charset "UTF-8"; /*********************************************** @@ -35116,6 +35293,7 @@ a.btn.mm-favorite-icons { .mm-menu-sm .button-bar-container.padding-right { padding-right: 1.9375rem; } +@charset "UTF-8"; /*********************************************** fcoo-application.scss, @@ -35322,12 +35500,65 @@ button-border-color-variant button-background-color-variant Adjust text-, border-, and background-color for a button ************************************************************/ -/********** START **************/ -/*********************************************** -fcoo-application-base-color-mixin +/********************************************************** + fcoo-colors-include.scss, -Defines application-base-color = Background color for loading etc. -************************************************/ + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO + + + Contain all include for a packages using + the scss-variables and scss-mixins of fcoo-colors + + The scss file must also include + + //COLOR-HELPER + @import "../bower_components/sass-color-helpers/stylesheets/color-helpers"; + + //LEAFLET-BOOTSTRAP-MARKER-MIXIN - mixin to create colors for marker (bsMarker) + @import "../bower_components/leaflet-bootstrap-marker-mixin/dist/leaflet-bootstrap-marker-mixin"; + + //LEAFLET-POLYLINE-MIXIN - mixin to create colors for polyline and polygon + @import "../bower_components/leaflet-polyline-mixin/dist/leaflet-polyline-mixin"; + +**********************************************************/ +/********************************************************** + fcoo-colors-variables.scss, + + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO +**********************************************************/ +/********************************************************** +The color scheme is from LinkedIn and shown in linkedin-palette-screen.pdf +**********************************************************/ +/********************************************************** +Color for time = tree colors for the past, now, and the future +**********************************************************/ +/********************************************************** +Application color +Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" +Can be changed by mixin application-base-color( new-color ) +in src/_fcoo-color-mixin.scss +**********************************************************/ +/********************************************************** + fcoo-colors-mixin.scss + + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO + +**********************************************************/ +/********************************************************** +Functions to get colors in different (relative) gradients +**********************************************************/ +/********************************************************** +marker-and-polygon-color +create color-classes for bsMarker and bsPolyline +**********************************************************/ +/********************************************************** +Application color +Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" +Can be changed by mixin application-base-color( new-color ) +**********************************************************/ /***************************************************** APPLICATION-COLOR-MIXIN Mixin for creating specific application-color @@ -36356,6 +36587,7 @@ This is fixed by overwriting the last size with "inherit" .fa-inside-circle.fa-inside-circle { font-size: inherit; } +@charset "UTF-8"; /*********************************************** fcoo-maps-colors.scss, @@ -36401,18 +36633,67 @@ to create fa-icon looking like the marker ************************************************/ /********************************* -FCOO-COLORS +FCOO-COLORS-VARIABLES and FCOO-COLORS-MIXIN *********************************/ -/*********************************************** - fcoo-colors-mixin.scss, +/********************************************************** + fcoo-colors-include.scss, - (c) 2021, FCOO + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO + + + Contain all include for a packages using + the scss-variables and scss-mixins of fcoo-colors + + The scss file must also include + + //COLOR-HELPER + @import "../bower_components/sass-color-helpers/stylesheets/color-helpers"; + + //LEAFLET-BOOTSTRAP-MARKER-MIXIN - mixin to create colors for marker (bsMarker) + @import "../bower_components/leaflet-bootstrap-marker-mixin/dist/leaflet-bootstrap-marker-mixin"; + + //LEAFLET-POLYLINE-MIXIN - mixin to create colors for polyline and polygon + @import "../bower_components/leaflet-polyline-mixin/dist/leaflet-polyline-mixin"; + +**********************************************************/ +/********************************************************** + fcoo-colors-variables.scss, https://github.com/FCOO/fcoo-colors https://github.com/FCOO +**********************************************************/ +/********************************************************** +The color scheme is from LinkedIn and shown in linkedin-palette-screen.pdf +**********************************************************/ +/********************************************************** +Color for time = tree colors for the past, now, and the future +**********************************************************/ +/********************************************************** +Application color +Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" +Can be changed by mixin application-base-color( new-color ) +in src/_fcoo-color-mixin.scss +**********************************************************/ +/********************************************************** + fcoo-colors-mixin.scss + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO -************************************************/ +**********************************************************/ +/********************************************************** +Functions to get colors in different (relative) gradients +**********************************************************/ +/********************************************************** +marker-and-polygon-color +create color-classes for bsMarker and bsPolyline +**********************************************************/ +/********************************************************** +Application color +Defaults is = DALO color in "Forsvarsministeriets koncernfælles Designmanual 2018" +Can be changed by mixin application-base-color( new-color ) +**********************************************************/ /********************************* FCOO-MAPS-COLORS-VARIABLES and FCOO-MAPS-COLORS-MIXIN scss-variable with all colors and mixins @@ -36427,10 +36708,6 @@ Create all scss-variable with colors for different fcoo-maps layers COMMON ****************************************************************************/ /**************************************************************************** -TIME -Color to mark a time, button etc. as past, now or future -****************************************************************************/ -/**************************************************************************** SEARCH RESULT Color for search result ****************************************************************************/ @@ -36468,60 +36745,40 @@ Style for search results in fcoo-maps *********************************/ .lbm-type-circle.lbm-color-search-result { background-color: #EC640C; - color: #000; } - .lbm-type-circle.lbm-color-search-result.lbm-transparent { - background-color: rgba(236, 100, 12, 0.7); } - .lbm-type-circle.lbm-color-search-result.lbm-transparent.lbm-hover:hover { - background-color: rgba(236, 100, 12, 0.9); } - .lbm-type-circle.lbm-color-search-result.lbm-shadow, .lbm-type-circle.lbm-color-search-result.leaflet-drag-target, .lbm-type-circle.lbm-color-search-result.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(236, 100, 12, 0.28); } - .lbm-type-circle.lbm-color-search-result:before { - box-shadow: 0 0 6px 2px #EC640C; } - + color: #000; +} +.lbm-type-circle.lbm-color-search-result.lbm-transparent { + background-color: rgba(236, 100, 12, 0.7); +} +.lbm-type-circle.lbm-color-search-result.lbm-transparent.lbm-hover:hover { + background-color: rgba(236, 100, 12, 0.9); +} +.lbm-type-circle.lbm-color-search-result.lbm-shadow, .lbm-type-circle.lbm-color-search-result.leaflet-drag-target, .lbm-type-circle.lbm-color-search-result.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(236, 100, 12, 0.28); +} +.lbm-type-circle.lbm-color-search-result:before { + box-shadow: 0 0 6px 2px #EC640C; +} .lbm-type-circle.lbm-border-color-search-result { - border-color: #EC640C; } + border-color: #EC640C; +} .fa-lbm-color-search-result { - color: #EC640C; } + color: #EC640C; +} .fa-lbm-border-color-search-result { - color: #EC640C; } + color: #EC640C; +} .lpl-base.lpl-search-result { - fill: #EC640C; } + fill: #EC640C; +} .lpl-base.lpl-border-search-result, .lpl-shadow.lpl-border-search-result { - stroke: #EC640C; } - -/********************************* -Style for time -*********************************/ -:root { - --jbn-time-past-color: #7ABAE1; - --jbn-time-past-bg-color: #7ABAE1; - --jbn-time-now-color: darkgreen; - --jbn-time-now-bg-color: lightgreen; - --jbn-time-future-color: #4D72B8; - --jbn-time-future-bg-color: #4D72B8; } - -.time-past-color { - color: var(--jbn-time-past-color, #7ABAE1); } - -.time-past-bg-color { - background-color: var(--jbn-time-past-bg-color, var(--jbn-time-past-color, #7ABAE1)); } - -.time-now-color { - color: var(--jbn-time-now-color, darkgreen); } - -.time-now-bg-color { - background-color: var(--jbn-time-now-bg-color, var(--jbn-time-now-color, darkgreen)); } - -.time-future-color { - color: var(--jbn-time-future-color, #4D72B8); } - -.time-future-bg-color { - background-color: var(--jbn-time-future-bg-color, var(--jbn-time-future-color, #4D72B8)); } + stroke: #EC640C; +} /********************************* FCOO-MAPS-COLORS-OBSERVATIONS @@ -36535,24 +36792,31 @@ Style for fcoo/fcoo-maps-observations ************************************************/ .lbm-type-circle.lbm-color-observations { background-color: #EFB920; - color: #000; } - .lbm-type-circle.lbm-color-observations.lbm-transparent { - background-color: rgba(239, 185, 32, 0.7); } - .lbm-type-circle.lbm-color-observations.lbm-transparent.lbm-hover:hover { - background-color: rgba(239, 185, 32, 0.9); } - .lbm-type-circle.lbm-color-observations.lbm-shadow, .lbm-type-circle.lbm-color-observations.leaflet-drag-target, .lbm-type-circle.lbm-color-observations.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(239, 185, 32, 0.28); } - .lbm-type-circle.lbm-color-observations:before { - box-shadow: 0 0 6px 2px #EFB920; } - + color: #000; +} +.lbm-type-circle.lbm-color-observations.lbm-transparent { + background-color: rgba(239, 185, 32, 0.7); +} +.lbm-type-circle.lbm-color-observations.lbm-transparent.lbm-hover:hover { + background-color: rgba(239, 185, 32, 0.9); +} +.lbm-type-circle.lbm-color-observations.lbm-shadow, .lbm-type-circle.lbm-color-observations.leaflet-drag-target, .lbm-type-circle.lbm-color-observations.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(239, 185, 32, 0.28); +} +.lbm-type-circle.lbm-color-observations:before { + box-shadow: 0 0 6px 2px #EFB920; +} .lbm-type-circle.lbm-border-color-observations { - border-color: #EFB920; } + border-color: #EFB920; +} .fa-lbm-color-observations { - color: #EFB920; } + color: #EFB920; +} .fa-lbm-border-color-observations { - color: #EFB920; } + color: #EFB920; +} /********************************* FCOO-MAPS-COLORS-NIORD-AND-NAVIGATION @@ -36567,118 +36831,162 @@ Create the style for the four different domains ************************************************/ .lbm-type-circle.lbm-color-niord-fa { background-color: white; - color: #000; } - .lbm-type-circle.lbm-color-niord-fa.lbm-transparent { - background-color: rgba(255, 255, 255, 0.7); } - .lbm-type-circle.lbm-color-niord-fa.lbm-transparent.lbm-hover:hover { - background-color: rgba(255, 255, 255, 0.9); } - .lbm-type-circle.lbm-color-niord-fa.lbm-shadow, .lbm-type-circle.lbm-color-niord-fa.leaflet-drag-target, .lbm-type-circle.lbm-color-niord-fa.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.28); } - .lbm-type-circle.lbm-color-niord-fa:before { - box-shadow: 0 0 6px 2px white; } - + color: #000; +} +.lbm-type-circle.lbm-color-niord-fa.lbm-transparent { + background-color: rgba(255, 255, 255, 0.7); +} +.lbm-type-circle.lbm-color-niord-fa.lbm-transparent.lbm-hover:hover { + background-color: rgba(255, 255, 255, 0.9); +} +.lbm-type-circle.lbm-color-niord-fa.lbm-shadow, .lbm-type-circle.lbm-color-niord-fa.leaflet-drag-target, .lbm-type-circle.lbm-color-niord-fa.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.28); +} +.lbm-type-circle.lbm-color-niord-fa:before { + box-shadow: 0 0 6px 2px white; +} .lbm-type-circle.lbm-border-color-niord-fa { - border-color: #7c0043; } + border-color: #7c0043; +} .fa-lbm-color-niord-fa { - color: white; } + color: white; +} .fa-lbm-border-color-niord-fa { - color: #7c0043; } + color: #7c0043; +} .lpl-base.lpl-niord-fa { - fill: white; } + fill: white; +} .lpl-base.lpl-border-niord-fa, .lpl-shadow.lpl-border-niord-fa { - stroke: #7c0043; } + stroke: #7c0043; +} .lbm-type-circle.lbm-color-niord-nm { background-color: white; - color: #000; } - .lbm-type-circle.lbm-color-niord-nm.lbm-transparent { - background-color: rgba(255, 255, 255, 0.7); } - .lbm-type-circle.lbm-color-niord-nm.lbm-transparent.lbm-hover:hover { - background-color: rgba(255, 255, 255, 0.9); } - .lbm-type-circle.lbm-color-niord-nm.lbm-shadow, .lbm-type-circle.lbm-color-niord-nm.leaflet-drag-target, .lbm-type-circle.lbm-color-niord-nm.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.28); } - .lbm-type-circle.lbm-color-niord-nm:before { - box-shadow: 0 0 6px 2px white; } - + color: #000; +} +.lbm-type-circle.lbm-color-niord-nm.lbm-transparent { + background-color: rgba(255, 255, 255, 0.7); +} +.lbm-type-circle.lbm-color-niord-nm.lbm-transparent.lbm-hover:hover { + background-color: rgba(255, 255, 255, 0.9); +} +.lbm-type-circle.lbm-color-niord-nm.lbm-shadow, .lbm-type-circle.lbm-color-niord-nm.leaflet-drag-target, .lbm-type-circle.lbm-color-niord-nm.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.28); +} +.lbm-type-circle.lbm-color-niord-nm:before { + box-shadow: 0 0 6px 2px white; +} .lbm-type-circle.lbm-border-color-niord-nm { - border-color: #7c0043; } + border-color: #7c0043; +} .fa-lbm-color-niord-nm { - color: white; } + color: white; +} .fa-lbm-border-color-niord-nm { - color: #7c0043; } + color: #7c0043; +} .lpl-base.lpl-niord-nm { - fill: white; } + fill: white; +} .lpl-base.lpl-border-niord-nm, .lpl-shadow.lpl-border-niord-nm { - stroke: #7c0043; } + stroke: #7c0043; +} .lbm-type-circle.lbm-color-niord-nw { background-color: #E2007A; - color: #fff; } - .lbm-type-circle.lbm-color-niord-nw.lbm-transparent { - background-color: rgba(226, 0, 122, 0.7); } - .lbm-type-circle.lbm-color-niord-nw.lbm-transparent.lbm-hover:hover { - background-color: rgba(226, 0, 122, 0.9); } - .lbm-type-circle.lbm-color-niord-nw.lbm-shadow, .lbm-type-circle.lbm-color-niord-nw.leaflet-drag-target, .lbm-type-circle.lbm-color-niord-nw.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(226, 0, 122, 0.28); } - .lbm-type-circle.lbm-color-niord-nw:before { - box-shadow: 0 0 6px 2px #E2007A; } - + color: #fff; +} +.lbm-type-circle.lbm-color-niord-nw.lbm-transparent { + background-color: rgba(226, 0, 122, 0.7); +} +.lbm-type-circle.lbm-color-niord-nw.lbm-transparent.lbm-hover:hover { + background-color: rgba(226, 0, 122, 0.9); +} +.lbm-type-circle.lbm-color-niord-nw.lbm-shadow, .lbm-type-circle.lbm-color-niord-nw.leaflet-drag-target, .lbm-type-circle.lbm-color-niord-nw.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(226, 0, 122, 0.28); +} +.lbm-type-circle.lbm-color-niord-nw:before { + box-shadow: 0 0 6px 2px #E2007A; +} .lbm-type-circle.lbm-border-color-niord-nw { - border-color: #7c0043; } + border-color: #7c0043; +} .fa-lbm-color-niord-nw { - color: #E2007A; } + color: #E2007A; +} .fa-lbm-border-color-niord-nw { - color: #7c0043; } + color: #7c0043; +} .lpl-base.lpl-niord-nw { - fill: #E2007A; } + fill: #E2007A; +} .lpl-base.lpl-border-niord-nw, .lpl-shadow.lpl-border-niord-nw { - stroke: #7c0043; } + stroke: #7c0043; +} .lbm-type-circle.lbm-color-niord-fe { background-color: #E2007A; - color: #fff; } - .lbm-type-circle.lbm-color-niord-fe.lbm-transparent { - background-color: rgba(226, 0, 122, 0.7); } - .lbm-type-circle.lbm-color-niord-fe.lbm-transparent.lbm-hover:hover { - background-color: rgba(226, 0, 122, 0.9); } - .lbm-type-circle.lbm-color-niord-fe.lbm-shadow, .lbm-type-circle.lbm-color-niord-fe.leaflet-drag-target, .lbm-type-circle.lbm-color-niord-fe.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(226, 0, 122, 0.28); } - .lbm-type-circle.lbm-color-niord-fe:before { - box-shadow: 0 0 6px 2px #E2007A; } - + color: #fff; +} +.lbm-type-circle.lbm-color-niord-fe.lbm-transparent { + background-color: rgba(226, 0, 122, 0.7); +} +.lbm-type-circle.lbm-color-niord-fe.lbm-transparent.lbm-hover:hover { + background-color: rgba(226, 0, 122, 0.9); +} +.lbm-type-circle.lbm-color-niord-fe.lbm-shadow, .lbm-type-circle.lbm-color-niord-fe.leaflet-drag-target, .lbm-type-circle.lbm-color-niord-fe.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(226, 0, 122, 0.28); +} +.lbm-type-circle.lbm-color-niord-fe:before { + box-shadow: 0 0 6px 2px #E2007A; +} .lbm-type-circle.lbm-border-color-niord-fe { - border-color: #7c0043; } + border-color: #7c0043; +} .fa-lbm-color-niord-fe { - color: #E2007A; } + color: #E2007A; +} .fa-lbm-border-color-niord-fe { - color: #7c0043; } + color: #7c0043; +} .lpl-base.lpl-niord-fe { - fill: #E2007A; } + fill: #E2007A; +} .lpl-base.lpl-border-niord-fe, .lpl-shadow.lpl-border-niord-fe { - stroke: #7c0043; } + stroke: #7c0043; +} .fa-navigation { - color: #E5238C; } + color: #E5238C; +} + +:root { + --jbn-time-past-color: var(--fc-time-past-color); + --jbn-time-now-color: var(--fc-time-now-color); + --jbn-time-now-text-color: var(--fc-time-now-text-color) + --jbn-time-future-color : var(--fc-time-future-color) ; +} /********************************* FCOO-MAPS-COLORS-HAVNELODS @@ -36692,45 +37000,59 @@ Style for fcoo/fcoo-maps-havnelods ************************************************/ .lbm-type-circle.lbm-color-harbor-dk { background-color: #7CB82F; - color: #000; } - .lbm-type-circle.lbm-color-harbor-dk.lbm-transparent { - background-color: rgba(124, 184, 47, 0.7); } - .lbm-type-circle.lbm-color-harbor-dk.lbm-transparent.lbm-hover:hover { - background-color: rgba(124, 184, 47, 0.9); } - .lbm-type-circle.lbm-color-harbor-dk.lbm-shadow, .lbm-type-circle.lbm-color-harbor-dk.leaflet-drag-target, .lbm-type-circle.lbm-color-harbor-dk.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(124, 184, 47, 0.28); } - .lbm-type-circle.lbm-color-harbor-dk:before { - box-shadow: 0 0 6px 2px #7CB82F; } - + color: #000; +} +.lbm-type-circle.lbm-color-harbor-dk.lbm-transparent { + background-color: rgba(124, 184, 47, 0.7); +} +.lbm-type-circle.lbm-color-harbor-dk.lbm-transparent.lbm-hover:hover { + background-color: rgba(124, 184, 47, 0.9); +} +.lbm-type-circle.lbm-color-harbor-dk.lbm-shadow, .lbm-type-circle.lbm-color-harbor-dk.leaflet-drag-target, .lbm-type-circle.lbm-color-harbor-dk.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(124, 184, 47, 0.28); +} +.lbm-type-circle.lbm-color-harbor-dk:before { + box-shadow: 0 0 6px 2px #7CB82F; +} .lbm-type-circle.lbm-border-color-harbor-dk { - border-color: #7CB82F; } + border-color: #7CB82F; +} .fa-lbm-color-harbor-dk { - color: #7CB82F; } + color: #7CB82F; +} .fa-lbm-border-color-harbor-dk { - color: #7CB82F; } + color: #7CB82F; +} .lbm-type-circle.lbm-color-harbor-gl { background-color: #60AA14; - color: #000; } - .lbm-type-circle.lbm-color-harbor-gl.lbm-transparent { - background-color: rgba(96, 170, 20, 0.7); } - .lbm-type-circle.lbm-color-harbor-gl.lbm-transparent.lbm-hover:hover { - background-color: rgba(96, 170, 20, 0.9); } - .lbm-type-circle.lbm-color-harbor-gl.lbm-shadow, .lbm-type-circle.lbm-color-harbor-gl.leaflet-drag-target, .lbm-type-circle.lbm-color-harbor-gl.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(96, 170, 20, 0.28); } - .lbm-type-circle.lbm-color-harbor-gl:before { - box-shadow: 0 0 6px 2px #60AA14; } - + color: #000; +} +.lbm-type-circle.lbm-color-harbor-gl.lbm-transparent { + background-color: rgba(96, 170, 20, 0.7); +} +.lbm-type-circle.lbm-color-harbor-gl.lbm-transparent.lbm-hover:hover { + background-color: rgba(96, 170, 20, 0.9); +} +.lbm-type-circle.lbm-color-harbor-gl.lbm-shadow, .lbm-type-circle.lbm-color-harbor-gl.leaflet-drag-target, .lbm-type-circle.lbm-color-harbor-gl.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(96, 170, 20, 0.28); +} +.lbm-type-circle.lbm-color-harbor-gl:before { + box-shadow: 0 0 6px 2px #60AA14; +} .lbm-type-circle.lbm-border-color-harbor-gl { - border-color: #60AA14; } + border-color: #60AA14; +} .fa-lbm-color-harbor-gl { - color: #60AA14; } + color: #60AA14; +} .fa-lbm-border-color-harbor-gl { - color: #60AA14; } + color: #60AA14; +} /********************************* FCOO-MAPS-COLORS-YOUR-POSITION @@ -36744,46 +37066,59 @@ Style for fcoo/fcoo-maps-your-position ************************************************/ .lbm-type-circle.lbm-color-your-position { background-color: #4285F4; - color: #000; } - .lbm-type-circle.lbm-color-your-position.lbm-transparent { - background-color: rgba(66, 133, 244, 0.7); } - .lbm-type-circle.lbm-color-your-position.lbm-transparent.lbm-hover:hover { - background-color: rgba(66, 133, 244, 0.9); } - .lbm-type-circle.lbm-color-your-position.lbm-shadow, .lbm-type-circle.lbm-color-your-position.leaflet-drag-target, .lbm-type-circle.lbm-color-your-position.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(66, 133, 244, 0.28); } - .lbm-type-circle.lbm-color-your-position:before { - box-shadow: 0 0 6px 2px #4285F4; } - + color: #000; +} +.lbm-type-circle.lbm-color-your-position.lbm-transparent { + background-color: rgba(66, 133, 244, 0.7); +} +.lbm-type-circle.lbm-color-your-position.lbm-transparent.lbm-hover:hover { + background-color: rgba(66, 133, 244, 0.9); +} +.lbm-type-circle.lbm-color-your-position.lbm-shadow, .lbm-type-circle.lbm-color-your-position.leaflet-drag-target, .lbm-type-circle.lbm-color-your-position.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(66, 133, 244, 0.28); +} +.lbm-type-circle.lbm-color-your-position:before { + box-shadow: 0 0 6px 2px #4285F4; +} .lbm-type-circle.lbm-border-color-your-position { - border-color: #4285F4; } + border-color: #4285F4; +} .fa-lbm-color-your-position { - color: #4285F4; } + color: #4285F4; +} .fa-lbm-border-color-your-position { - color: #4285F4; } + color: #4285F4; +} .lbm-type-circle.lbm-color-your-position-follow { background-color: #0b51c5; - color: #fff; } - .lbm-type-circle.lbm-color-your-position-follow.lbm-transparent { - background-color: rgba(11, 81, 197, 0.7); } - .lbm-type-circle.lbm-color-your-position-follow.lbm-transparent.lbm-hover:hover { - background-color: rgba(11, 81, 197, 0.9); } - .lbm-type-circle.lbm-color-your-position-follow.lbm-shadow, .lbm-type-circle.lbm-color-your-position-follow.leaflet-drag-target, .lbm-type-circle.lbm-color-your-position-follow.lbm-hover:hover { - box-shadow: 0px 0px 0px 5px rgba(11, 81, 197, 0.28); } - .lbm-type-circle.lbm-color-your-position-follow:before { - box-shadow: 0 0 6px 2px #0b51c5; } - + color: #fff; +} +.lbm-type-circle.lbm-color-your-position-follow.lbm-transparent { + background-color: rgba(11, 81, 197, 0.7); +} +.lbm-type-circle.lbm-color-your-position-follow.lbm-transparent.lbm-hover:hover { + background-color: rgba(11, 81, 197, 0.9); +} +.lbm-type-circle.lbm-color-your-position-follow.lbm-shadow, .lbm-type-circle.lbm-color-your-position-follow.leaflet-drag-target, .lbm-type-circle.lbm-color-your-position-follow.lbm-hover:hover { + box-shadow: 0px 0px 0px 5px rgba(11, 81, 197, 0.28); +} +.lbm-type-circle.lbm-color-your-position-follow:before { + box-shadow: 0 0 6px 2px #0b51c5; +} .lbm-type-circle.lbm-border-color-your-position-follow { - border-color: #0b51c5; } + border-color: #0b51c5; +} .fa-lbm-color-your-position-follow { - color: #0b51c5; } + color: #0b51c5; +} .fa-lbm-border-color-your-position-follow { - color: #0b51c5; } - + color: #0b51c5; +} /*********************************************** leaflet-bootstrap-marker.scss diff --git a/demo/bower_components.js b/demo/bower_components.js index a581e19..a903248 100644 --- a/demo/bower_components.js +++ b/demo/bower_components.js @@ -34145,6 +34145,38 @@ L.GeometryUtil = L.extend(L.GeometryUtil || {}, { return map.unproject(closest, maxzoom); }, + /** + Returns the closest point of a {L.LatLng} on a {L.Circle} + + @tutorial closest + + @param {L.LatLng} latlng - The position to search + @param {L.Circle} circle - A Circle defined by a center and a radius + @returns {L.LatLng} Closest geographical point on the circle circumference + */ + closestOnCircle: function (circle, latLng) { + const center = circle.getLatLng(); + const circleRadius = circle.getRadius(); + const radius = typeof circleRadius === 'number' ? circleRadius : circleRadius.radius; + const x = latLng.lng; + const y = latLng.lat; + const cx = center.lng; + const cy = center.lat; + // dx and dy is the vector from the circle's center to latLng + const dx = x - cx; + const dy = y - cy; + + // distance between the point and the circle's center + const distance = Math.sqrt(dx * dx + dy * dy) + + // Calculate the closest point on the circle by adding the normalized vector to the center + const tx = cx + (dx / distance) * radius; + const ty = cy + (dy / distance) * radius; + + return new L.LatLng(ty, tx); + }, + + /** Returns the closest latlng on layer. @@ -34281,6 +34313,10 @@ L.GeometryUtil = L.extend(L.GeometryUtil || {}, { result = subResult; } } else { + if (layer instanceof L.Circle){ + ll = this.closestOnCircle(layer, latlng); + distance = L.GeometryUtil.distance(map, latlng, ll); + } else // Single dimension, snap on points, else snap on closest if (typeof layer.getLatLng == 'function') { ll = layer.getLatLng(); @@ -34325,6 +34361,10 @@ L.GeometryUtil = L.extend(L.GeometryUtil || {}, { var subResult = L.GeometryUtil.closestLayer(map, layer.getLayers(), latlng); results.push(subResult); } else { + if (layer instanceof L.Circle){ + ll = this.closestOnCircle(layer, latlng); + distance = L.GeometryUtil.distance(map, latlng, ll); + } else // Single dimension, snap on points, else snap on closest if (typeof layer.getLatLng == 'function') { ll = layer.getLatLng(); @@ -39830,6 +39870,447 @@ module.exports.TinyEmitter = E; })); +; +/**************************************************************************** + color.js, + Functions to caluclate the brightness of a color + Taken from http://codepen.io/lunelson/pen/jENxwB + +****************************************************************************/ + +(function (window/*, document, undefined*/) { + "use strict"; + + //Create fcoo-namespace + var nsColor = window; + + + function lin2log(n) { + if (n <= 0.0031308) + return n * 12.92; + else + return 1.055 * Math.pow(n,1/2.4) - 0.055; + } + + function log2lin(n) { + if (n <= 0.04045) + return n / 12.92; + else + return Math.pow(((n + 0.055)/1.055),2.4); + } + + /******************************************** + brightness + ********************************************/ + nsColor.brightness = function brightness(r, g, b) { + r = log2lin(r/255); + g = log2lin(g/255); + b = log2lin(b/255); + return lin2log(0.2126 * r + 0.7152 * g + 0.0722 * b) * 100; + }; + + /******************************************** + colorContrastHEX + ********************************************/ + nsColor.colorContrastHEX = function colorContrastHEX( color ) { + if (color.length === 3) + color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2); + var rgb = []; + for (var i = 0; i <= 2; i++) + rgb[i] = parseInt(color.substr(1+i*2, 2), 16); + return nsColor.colorContrastRGB(rgb[0], rgb[1], rgb[2]); + }; + + /******************************************** + colorContrastRGB + ********************************************/ + nsColor.colorContrastRGB = function colorContrastRGB(r, g, b) { + var colorBrightness = nsColor.brightness(r, g, b), + whiteBrightness = nsColor.brightness(255, 255, 255), + blackBrightness = nsColor.brightness(0, 0, 0); + return Math.abs(colorBrightness - whiteBrightness) > Math.abs(colorBrightness - blackBrightness) ? '#ffffff' : '#000000'; + }; + + /******************************************** + rgbHex + Convert RGB color to HEX + From https://github.com/sindresorhus/rgb-hex + ********************************************/ + nsColor.rgbHex = function(red, green, blue, alpha){ + var isPercent = (red + (alpha || '')).toString().includes('%'); + + if (typeof red === 'string') { + var res = red.match(/(0?\.?\d{1,3})%?\b/g).map(Number); + red = res[0]; + green = res[1]; + blue = res[2]; + alpha = res[3]; + } + else + if (alpha !== undefined) { + alpha = parseFloat(alpha); + } + + if (typeof red !== 'number' || + typeof green !== 'number' || + typeof blue !== 'number' || + red > 255 || + green > 255 || + blue > 255) { + throw new TypeError('Expected three numbers below 256'); + } + + if (typeof alpha === 'number') { + if (!isPercent && alpha >= 0 && alpha <= 1) { + alpha = Math.round(255 * alpha); + } + else + if (isPercent && alpha >= 0 && alpha <= 100) { + alpha = Math.round(255 * alpha / 100); + } + else { + throw new TypeError('Expected alpha value (${alpha}) as a fraction or percentage'); + } + alpha = (alpha | 1 << 8).toString(16).slice(1); + } + else { + alpha = ''; + } + + return ((blue | green << 8 | red << 16) | 1 << 24).toString(16).slice(1) + alpha; + }; + + /******************************************** + hexRgb + Convert HEX color to RGB + From https://github.com/sindresorhus/hex-rgb + ********************************************/ + var hexChars = 'a-f\\d', + match3or4Hex = '#?[' + hexChars + ']{3}[' + hexChars + ']?', + match6or8Hex = '#?[' + hexChars + ']{6}([' + hexChars + ']{2})?', + nonHexChars = new RegExp('[^#' + hexChars + ']', 'gi'), + validHexSize = new RegExp('^' + match3or4Hex + '$|^' + match6or8Hex + '$', 'i'); + + nsColor.hexRgb = function(hex, options) { + options = options || {}; + if (typeof hex !== 'string' || nonHexChars.test(hex) || !validHexSize.test(hex)) { + throw new TypeError('Expected a valid hex string'); + } + + hex = hex.replace(/^#/, ''); + var alpha = 255; + + if (hex.length === 8) { + alpha = parseInt(hex.slice(6, 8), 16) / 255; + hex = hex.substring(0, 6); + } + + if (hex.length === 4) { + alpha = parseInt(hex.slice(3, 4).repeat(2), 16) / 255; + hex = hex.substring(0, 3); + } + + if (hex.length === 3) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + + var num = parseInt(hex, 16), + red = num >> 16, + green = (num >> 8) & 255, + blue = num & 255; + + return options.format === 'array' ? [red, green, blue, alpha] : { red: red, green: green, blue: blue, alpha: alpha }; + }; + + /******************************************** + hexSetAlpha + Set the alpha-value in a hex-color + ********************************************/ + nsColor.hexSetAlpha = function(hex, alpha){ + var rgba = nsColor.hexRgb(hex, {format: 'array'}); + rgba[3] = alpha; + return nsColor.rgbHex.apply(this, rgba); + }; + +}(this, document)); +; +/**************************************************************************** + json.js, +****************************************************************************/ + +(function (window/*, document, undefined*/) { + "use strict"; + + //Create fcoo-namespace + var nsJSON = window; + + /****************************************** + serializeJSON + Converts a json-object a la {id1:'value1', id2:'value2'} + to [ { name: "id1", value: "value1" }, { name: "id2", value: "value2" } ] + *******************************************/ + nsJSON.serializeJSON = function( jsonObj ){ + var result = []; + for (var id in jsonObj) + if (jsonObj.hasOwnProperty(id)) + result.push( {name: id, value: jsonObj[id] }); + return result; + }; + + +}(this, document)); +; +/**************************************************************************** + math.js, + +****************************************************************************/ + +(function (window/*, document, undefined*/) { + "use strict"; + + var nsMath = window; + + /******************************************* + significant - return n rounded to significant sf + *******************************************/ + nsMath.significant = function significant(n, sf) { + sf = sf - Math.floor(Math.log(n) / Math.LN10) - 1; + sf = Math.pow(10, sf); + n = Math.round(n * sf); + n = n / sf; + return n; + }; + + /******************************************* + precision + *******************************************/ + nsMath.precision = function precision(n, dp) { + dp = Math.pow(10, dp); + n = n * dp; + n = Math.round(n); + n = n / dp; + return n; + }; + + /******************************************* + nearest + *******************************************/ + nsMath.nearest = function nearest(n, v) { + v = v ? v : 1; + n = n / v; + n = Math.round(n) * v; + return n; + }; + + /******************************************* + roundDownTo + *******************************************/ + nsMath.roundDownTo = function roundDownTo(n, v) { + v = v ? v : 1; + n = n / v; + n = Math.floor(n) * v; + return n; + }; + + /******************************************* + roundToRange + *******************************************/ + nsMath.roundToRange = function roundToRange(v, min, max) { + return Math.max( Math.min(v, max), min); + }; + + /******************************************* + toDecimal + Convert a integer value v to a decimal + Eq toDecimal(89) = 0.89 + toDecimal(9) = 0.9 + toDecimal(1234) = 0.1234 + *******************************************/ + nsMath.toDecimal = function toDecimal(v) { + var l = v.toString().length; + return v / Math.pow(10, l); + }; + +}(this, document)); +; +/**************************************************************************** + fcoo-colors.js, + + (c) 2021, FCOO + + https://github.com/FCOO/fcoo-colors + https://github.com/FCOO + + Constants and methods to name, get and modify different colors used by FCOO Web Applications + +****************************************************************************/ + +(function ($, window/*, document, undefined*/) { + "use strict"; + + //Create fcoo-namespace + var ns = window.fcoo = window.fcoo || {}, + nsColor = ns.color = ns.color || {}; + + //nsColor.colorNames = {id}{da:STRING, en:STRING} + nsColor.colorNames = { + blue : {da: 'blå', en: 'blue' }, + purple : {da: 'lilla', en: 'purple' }, + red : {da: 'rød', en: 'red' }, + orange : {da: 'orange', en: 'orange' }, + cyan : {da: 'cyan', en: 'cyan' }, + yellow : {da: 'Gul', en: 'yellow' }, + pink : {da: 'pink', en: 'pink' }, + green : {da: 'grøn', en: 'green' }, + gray : {da: 'grå', en: 'gray' } + }; + + //nsColor.colorList = []{id, name: {da:STRING, en:STRING}} ordred by nsColor.defaultOrder + nsColor.colorList = []; + + $.each(nsColor.defaultOrder, function(index, colorId){ + nsColor.colorList.push({ + id : colorId, + name: nsColor.colorNames[colorId] + }); + }); + + + //The color scheme is from LinkedIn and shown in linkedin-palette-screen.pdf + //nsColor.colorArray = The colors defined in linkedin-palette-screen.pdf = [gradiant][color]. Eg. colorArray[3, 4] = gradiant 3 of orange + nsColor.colorArray = [ + //0:Blue 1:Purple 2:Red 3:Orange 4:Cyan 5:Yellow 6:Pink 7:Green 8:Gray + ['#CFEDFB', '#EBE4FF', '#FFE0DA', '#FFE7BB', '#D2ECEB', '#FFF2B6', '#FFDFF2', '#E0F4BE', '#E6E9EC'], + ['#9BDAF3', '#D8CCF4', '#FAC2BB', '#F8CD94', '#9EDDDD', '#FBE491', '#FFC4E4', '#C7E59A', '#D0D3D6'], + ['#68C7EC', '#BFABE6', '#F59890', '#F7B26A', '#69CDCF', '#F7D56B', '#F99ACA', '#AED677', '#B6B9BC'], + ['#34B3E4', '#A589D9', '#F16D64', '#F59640', '#35BEC1', '#F3C746', '#F371AF', '#95C753', '#A0A3A6'], + ['#00A0DC', '#8C68CB', '#EC4339', '#F47B16', '#00AEB3', '#EFB920', '#ED4795', '#7CB82F', '#86898C'], + ['#008CC9', '#7C5BBB', '#DD2E1F', '#EC640C', '#009EA5', '#E6A700', '#E2247F', '#60AA14', '#737679'], + ['#0077B5', '#6A4BA7', '#C11F1D', '#CD5308', '#008891', '#CA9400', '#C9186E', '#4E8F13', '#595C5F'], + ['#005E93', '#573B93', '#A40F1C', '#AF4104', '#00727D', '#AA7D00', '#B10C5C', '#3B7511', '#434649'], + ['#004471', '#452B7F', '#88001A', '#903000', '#005C69', '#8B6700', '#870044', '#295A10', '#303336'] + ]; + + var colorName2Index = ['blue', 'purple', 'red', 'orange', 'cyan', 'yellow', 'pink', 'green', 'gray']; + + nsColor.defaultGradient = 4; + nsColor.defaultOrder = ["blue", "red", "green", "yellow", "gray", "purple", "pink", "cyan", "orange"]; + + + //Methods to get the value of different color-names and gradiants. + nsColor.getColor = function(color, gradient, fromSortedList){ + var colorIndex = typeof color == 'string' ? colorName2Index.indexOf(color) : color; + return nsColor.getColorList(fromSortedList, gradient)[colorIndex]; + }; + + + nsColor.getColorRGB = function(/*color, gradient, fromSortedList*/){ + return window.hexRgb( nsColor.getColor.apply(null, arguments) ); + }; + + nsColor.getColorRGBArray = function(/*color, gradient, fromSortedList*/){ + return window.hexRgb( nsColor.getColor.apply(null, arguments), {format: 'array'} ); + }; + + + nsColor.getDeltaColor = function(color, deltaGradient = 0, fromSortedList){ + return nsColor.getColor(color, nsColor.defaultGradient + deltaGradient, fromSortedList); + }; + + + nsColor.getDeltaColorRGB = function(/*color, deltaGradient = 0, fromSortedList*/){ + return window.hexRgb( nsColor.getDeltaColor.apply(null, arguments) ); + }; + + nsColor.getDeltaColorRGBArray = function(/*color, deltaGradient = 0, fromSortedList*/){ + return window.hexRgb( nsColor.getDeltaColor.apply(null, arguments), {format: 'array'} ); + }; + + + nsColor.getColorList = function( sorted, gradient = 'DEFAULT' ){ + gradient = gradient == 'DEFAULT' ? nsColor.defaultGradient : gradient; + var result = []; + if (sorted){ + $.each(nsColor.defaultOrder, function(dummy, color){ + result.push( nsColor.getColor( color, gradient ) ); + }); + } + else + result = nsColor.colorArray[gradient]; + return result; + }; + + + /**************************************************************************** + Using chroma.js (https://github.com/gka/chroma.js) + Create js-versions of sass functions darken, lighten, tint and shade + + chromaBestContrast( color, contrastColors = ['#000000', '#ffffff'] ) + returns the color from contrastColors with the best contrast + ****************************************************************************/ + + //HSL manipulators - from https://github.com/gka/chroma.js/issues/217 + const lighten = (color, hslPercent) => color.set("hsl.l", color.get("hsl.l") + hslPercent); + const darken = (color, hslPercent) => lighten(color, -hslPercent); + const sassLightenDarken = (color, percent, dark) => { + let hslPercent = window.numeral(percent).value(); + if (hslPercent === null) + hslPercent = 1; + color = window.chroma(color); + return dark ? darken(color, hslPercent).hex() : lighten(color, hslPercent).hex(); + }; + + nsColor.sassLighten = ( color, percent ) => sassLightenDarken( color, percent ); + nsColor.sassDarken = ( color, percent ) => sassLightenDarken( color, percent, true ); + + const mix = (color1, color2, percent) => { + let ratio = window.numeral(percent).value(); + if (ratio === null) + ratio = 1; + return window.chroma.mix(color1, color2, ratio); + }; + + nsColor.sassTintColor = (color, weight) => mix( color, 'white', weight ); + nsColor.sassShadeColor = (color, weight) => mix( color, 'black', weight ); + + //chromaBestContrast( color, contrastColors = ['#000000', '#ffffff'] + nsColor.chromaBestContrast = ( color, contrastColors = ['#000000', '#ffffff']) => { + contrastColors = $.isArray( contrastColors ) ? contrastColors : [contrastColors]; + let bestContrast = 0, result; + contrastColors.forEach( (textColor) => { + const contrast = window.chroma.contrast(color, textColor); + if (contrast > bestContrast){ + bestContrast = contrast; + result = textColor; + } + }); + return window.chroma(result); + }; + + /**************************************************************************** + setRootVar(id, value) + getRootVar(id) + setApplicationBaseColor(baseColor) + ****************************************************************************/ + const adjustId = (id) => id.slice(0, 2) == '--' ? id : '--'+id; + const root = document.querySelector(':root'); + + ns.setRootVar = (id, value) => { + root.style.setProperty(adjustId(id), value); + }; + + ns.getRootVar = (id) => { + return getComputedStyle(root).getPropertyValue( adjustId(id) ); + }; + + nsColor.setApplicationBaseColor = (baseColor) => { + baseColor = window.chroma(baseColor); + ns.setRootVar('--_fcoo-app-base-color', baseColor.hex() ); + ns.setRootVar('--_fcoo-app-base-text-color', nsColor.chromaBestContrast(baseColor).hex() ); + }; + + +}(jQuery, this, document)); ; /**************************************************************************** fcoo-data-files.js, @@ -40121,7 +40602,8 @@ Load logos, sets css-var, and write logo etc. in console "use strict"; //Create fcoo-namespace - var ns = window.fcoo = window.fcoo || {}; + var ns = window.fcoo = window.fcoo || {}/*, + nsColor = ns.color = ns.color || {}*/; //Set modernizr-test 'logo-portrait' off $('html').modernizrOff('logo-portrait'); @@ -40131,8 +40613,7 @@ Load logos, sets css-var, and write logo etc. in console $('html').modernizrToggle('logo-portrait', img.height > img.width); //Set internal css-var _fcoo-app-logo-wh-ratio - var root = document.querySelector(':root'); - root.style.setProperty('--_fcoo-app-logo-wh-ratio', img.width / img.height); + ns.setRootVar('--_fcoo-app-logo-wh-ratio', img.width / img.height); } /******************************************************** @@ -40140,7 +40621,7 @@ Load logos, sets css-var, and write logo etc. in console ********************************************************/ ns.setApplicationLogo = function( fileNamePrefix ){ //First set fab-text-color-is-white (=fcoo-app-base-text-color-is-white) - var fcooAppBaseTextColor = ns.path.getCssVar('fcoo-app-base-text-color') || '#ffffff', + var fcooAppBaseTextColor = ns.getRootVar('fcoo-app-base-text-color') || '#ffffff', textColorIsWhite = fcooAppBaseTextColor.includes("000"); $('html').modernizrToggle('fab-text-color-is-white', !!textColorIsWhite); @@ -40194,7 +40675,7 @@ Load logos, sets css-var, and write logo etc. in console for (i=0; i in and adding favicons yyymmdd = pad(date.getFullYear()) + pad(date.getMonth()) + pad(date.getDate()), //Get color = value of css-var --fcoo-app-base-color - root = document.querySelector(':root'), - color = window.getComputedStyle(root).getPropertyValue('--fcoo-app-base-color'); + color = ns.getRootVar('--fcoo-app-base-color'); //values = {id:value} replacing id with value in meta and favicon var values = { @@ -55373,12 +55853,12 @@ module.exports = Yaml; } /*! - * GSAP 3.12.2 - * https://greensock.com + * GSAP 3.12.4 + * https://gsap.com * * @license Copyright 2008-2023, GreenSock. All rights reserved. - * Subject to the terms at https://greensock.com/standard-license or for - * Club GreenSock members, the agreement issued with that membership. + * Subject to the terms at https://gsap.com/standard-license or for + * Club GSAP members, the agreement issued with that membership. * @author: Jack Doyle, jack@greensock.com */ var _config = { @@ -56055,7 +56535,7 @@ module.exports = Yaml; while (max < (max = a[wrapAt++].getBoundingClientRect().left) && wrapAt < l) {} - wrapAt--; + wrapAt < l && wrapAt--; } distances = cache[l] = []; @@ -56981,11 +57461,11 @@ module.exports = Yaml; }; _proto.totalProgress = function totalProgress(value, suppressEvents) { - return arguments.length ? this.totalTime(this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.ratio; + return arguments.length ? this.totalTime(this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.rawTime() > 0 ? 1 : 0; }; _proto.progress = function progress(value, suppressEvents) { - return arguments.length ? this.totalTime(this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : this.duration() ? Math.min(1, this._time / this._dur) : this.ratio; + return arguments.length ? this.totalTime(this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : this.duration() ? Math.min(1, this._time / this._dur) : this.rawTime() > 0 ? 1 : 0; }; _proto.iteration = function iteration(value, suppressEvents) { @@ -56994,7 +57474,7 @@ module.exports = Yaml; return arguments.length ? this.totalTime(this._time + (value - 1) * cycleDuration, suppressEvents) : this._repeat ? _animationCycle(this._tTime, cycleDuration) + 1 : 1; }; - _proto.timeScale = function timeScale(value) { + _proto.timeScale = function timeScale(value, suppressEvents) { if (!arguments.length) { return this._rts === -_tinyNum ? 0 : this._rts; } @@ -57006,7 +57486,7 @@ module.exports = Yaml; var tTime = this.parent && this._ts ? _parentToChildTotalTime(this.parent._time, this) : this._tTime; this._rts = +value || 0; this._ts = this._ps || value === -_tinyNum ? 0 : this._rts; - this.totalTime(_clamp(-Math.abs(this._delay), this._tDur, tTime), true); + this.totalTime(_clamp(-Math.abs(this._delay), this._tDur, tTime), suppressEvents !== false); _setEnd(this); @@ -57078,11 +57558,11 @@ module.exports = Yaml; time = arguments.length ? rawTime : animation.rawTime(); while (animation) { - time = animation._start + time / (animation._ts || 1); + time = animation._start + time / (Math.abs(animation._ts) || 1); animation = animation._dp; } - return !this.parent && this._sat ? this._sat.vars.immediateRender ? -Infinity : this._sat.globalTime(rawTime) : time; + return !this.parent && this._sat ? this._sat.globalTime(rawTime) : time; }; _proto.repeat = function repeat(value) { @@ -58032,8 +58512,6 @@ module.exports = Yaml; immediateRender = vars.immediateRender, lazy = vars.lazy, onUpdate = vars.onUpdate, - onUpdateParams = vars.onUpdateParams, - callbackScope = vars.callbackScope, runBackwards = vars.runBackwards, yoyoEase = vars.yoyoEase, keyframes = vars.keyframes, @@ -58090,9 +58568,9 @@ module.exports = Yaml; lazy: !prevStartAt && _isNotFalse(lazy), startAt: null, delay: 0, - onUpdate: onUpdate, - onUpdateParams: onUpdateParams, - callbackScope: callbackScope, + onUpdate: onUpdate && function () { + return _callback(tween, "onUpdate"); + }, stagger: 0 }, startAt))); @@ -58186,7 +58664,7 @@ module.exports = Yaml; tween._initted = (!tween._op || tween._pt) && !overwritten; keyframes && time <= 0 && tl.render(_bigNum, true, true); }, - _updatePropTweens = function _updatePropTweens(tween, property, value, start, startIsRelative, ratio, time) { + _updatePropTweens = function _updatePropTweens(tween, property, value, start, startIsRelative, ratio, time, skipRecursion) { var ptCache = (tween._pt && tween._ptCache || (tween._ptCache = {}))[property], pt, rootPT, @@ -58216,7 +58694,7 @@ module.exports = Yaml; _initTween(tween, time); _forceAllPropTweens = 0; - return 1; + return skipRecursion ? _warn(property + " not eligible for reset") : 1; } ptCache.push(pt); @@ -58329,7 +58807,7 @@ module.exports = Yaml; curTarget, staggerFunc, staggerVarsToMerge; - _this3._targets = parsedTargets.length ? _harness(parsedTargets) : _warn("GSAP target " + targets + " not found. https://greensock.com", !_config.nullTargetWarn) || []; + _this3._targets = parsedTargets.length ? _harness(parsedTargets) : _warn("GSAP target " + targets + " not found. https://gsap.com", !_config.nullTargetWarn) || []; _this3._ptLookup = []; _this3._overwrite = overwrite; @@ -58491,7 +58969,7 @@ module.exports = Yaml; } else { iteration = ~~(tTime / cycleDuration); - if (iteration && iteration === tTime / cycleDuration) { + if (iteration && iteration === _roundPrecise(tTime / cycleDuration)) { time = dur; iteration--; } @@ -58508,7 +58986,7 @@ module.exports = Yaml; prevIteration = _animationCycle(this._tTime, cycleDuration); - if (time === prevTime && !force && this._initted) { + if (time === prevTime && !force && this._initted && iteration === prevIteration) { this._tTime = tTime; return this; } @@ -58516,7 +58994,7 @@ module.exports = Yaml; if (iteration !== prevIteration) { timeline && this._yEase && _propagateYoyoEase(timeline, isYoyo); - if (this.vars.repeatRefresh && !isYoyo && !this._lock) { + if (this.vars.repeatRefresh && !isYoyo && !this._lock && this._time !== dur && this._initted) { this._lock = force = 1; this.render(_roundPrecise(cycleDuration * iteration), true).invalidate()._lock = 0; } @@ -58529,7 +59007,7 @@ module.exports = Yaml; return this; } - if (prevTime !== this._time) { + if (prevTime !== this._time && !(force && this.vars.repeatRefresh && iteration !== prevIteration)) { return this; } @@ -58604,7 +59082,7 @@ module.exports = Yaml; return _Animation2.prototype.invalidate.call(this, soft); }; - _proto3.resetTo = function resetTo(property, value, start, startIsRelative) { + _proto3.resetTo = function resetTo(property, value, start, startIsRelative, skipRecursion) { _tickerActive || _ticker.wake(); this._ts || this.play(); var time = Math.min(this._dur, (this._dp._time - this._start) * this._ts), @@ -58612,8 +59090,8 @@ module.exports = Yaml; this._initted || _initTween(this, time); ratio = this._ease(time / this._dur); - if (_updatePropTweens(this, property, value, start, startIsRelative, ratio, time)) { - return this.resetTo(property, value, start, startIsRelative); + if (_updatePropTweens(this, property, value, start, startIsRelative, ratio, time, skipRecursion)) { + return this.resetTo(property, value, start, startIsRelative, 1); } _alignPlayhead(this, 0); @@ -58968,7 +59446,9 @@ module.exports = Yaml; _dispatch("matchMediaRevert"); matches.forEach(function (c) { - return c.onMatch(c); + return c.onMatch(c, function (func) { + return c.add(null, func); + }); }); _lastMediaTime = time; @@ -59012,7 +59492,9 @@ module.exports = Yaml; }; self.last = f; - return name === _isFunction ? f(self) : name ? self[name] = f : f; + return name === _isFunction ? f(self, function (func) { + return self.add(null, func); + }) : name ? self[name] = f : f; }; _proto5.ignore = function ignore(func) { @@ -59038,34 +59520,53 @@ module.exports = Yaml; var _this4 = this; if (revert) { - var tweens = this.getTweens(); - this.data.forEach(function (t) { - if (t.data === "isFlip") { - t.revert(); - t.getChildren(true, true, false).forEach(function (tween) { - return tweens.splice(tweens.indexOf(tween), 1); - }); + (function () { + var tweens = _this4.getTweens(), + i = _this4.data.length, + t; + + while (i--) { + t = _this4.data[i]; + + if (t.data === "isFlip") { + t.revert(); + t.getChildren(true, true, false).forEach(function (tween) { + return tweens.splice(tweens.indexOf(tween), 1); + }); + } } - }); - tweens.map(function (t) { - return { - g: t.globalTime(0), - t: t - }; - }).sort(function (a, b) { - return b.g - a.g || -Infinity; - }).forEach(function (o) { - return o.t.revert(revert); - }); - this.data.forEach(function (e) { - return !(e instanceof Tween) && e.revert && e.revert(revert); - }); - this._r.forEach(function (f) { - return f(revert, _this4); - }); + tweens.map(function (t) { + return { + g: t._dur || t._delay || t._sat && !t._sat.vars.immediateRender ? t.globalTime(0) : -Infinity, + t: t + }; + }).sort(function (a, b) { + return b.g - a.g || -Infinity; + }).forEach(function (o) { + return o.t.revert(revert); + }); + i = _this4.data.length; + + while (i--) { + t = _this4.data[i]; + + if (t instanceof Timeline) { + if (t.data !== "nested") { + t.scrollTrigger && t.scrollTrigger.revert(); + t.kill(); + } + } else { + !(t instanceof Tween) && t.revert && t.revert(revert); + } + } + + _this4._r.forEach(function (f) { + return f(revert, _this4); + }); - this.isReverted = true; + _this4.isReverted = true; + })(); } else { this.data.forEach(function (e) { return e.kill && e.kill(); @@ -59126,7 +59627,9 @@ module.exports = Yaml; } } - active && func(context); + active && func(context, function (f) { + return context.add(null, f); + }); return this; }; @@ -59473,7 +59976,7 @@ module.exports = Yaml; } } }, _buildModifierPlugin("roundProps", _roundModifier), _buildModifierPlugin("modifiers"), _buildModifierPlugin("snap", snap)) || _gsap; - Tween.version = Timeline.version = gsap.version = "3.12.2"; + Tween.version = Timeline.version = gsap.version = "3.12.4"; _coreReady = 1; _windowExists() && _wake(); var Power0 = _easeMap.Power0, @@ -59566,7 +60069,8 @@ module.exports = Yaml; var _this = this; var target = this.target, - style = target.style; + style = target.style, + cache = target._gsap; if (property in _transformProps && style) { this.tfm = this.tfm || {}; @@ -59575,7 +60079,8 @@ module.exports = Yaml; property = _propertyAliases[property] || property; ~property.indexOf(",") ? property.split(",").forEach(function (a) { return _this.tfm[a] = _get(target, a); - }) : this.tfm[property] = target._gsap.x ? target._gsap[property] : _get(target, property); + }) : this.tfm[property] = cache.x ? cache[property] : _get(target, property); + property === _transformOriginProp && (this.tfm.zOrigin = cache.zOrigin); } else { return _propertyAliases.transform.split(",").forEach(function (p) { return _saveStyle.call(_this, p, isNotCSS); @@ -59586,7 +60091,7 @@ module.exports = Yaml; return; } - if (target._gsap.svg) { + if (cache.svg) { this.svgo = target.getAttribute("data-svg-origin"); this.props.push(_transformOriginProp, isNotCSS, ""); } @@ -59630,6 +60135,12 @@ module.exports = Yaml; if ((!i || !i.isStart) && !style[_transformProp]) { _removeIndependentTransforms(style); + if (cache.zOrigin && style[_transformOriginProp]) { + style[_transformOriginProp] += " " + cache.zOrigin + "px"; + cache.zOrigin = 0; + cache.renderTransform(); + } + cache.uncache = 1; } } @@ -59650,7 +60161,7 @@ module.exports = Yaml; _supports3D, _createElement = function _createElement(type, ns) { var e = _doc$1.createElementNS ? _doc$1.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc$1.createElement(type); - return e.style ? e : _doc$1.createElement(type); + return e && e.style ? e : _doc$1.createElement(type); }, _getComputedProperty = function _getComputedProperty(target, property, skipPrefixFallback) { var cs = getComputedStyle(target); @@ -59755,18 +60266,21 @@ module.exports = Yaml; }, _removeProperty = function _removeProperty(target, property) { if (property) { - var style = target.style; + var style = target.style, + first2Chars; if (property in _transformProps && property !== _transformOriginProp) { property = _transformProp; } if (style.removeProperty) { - if (property.substr(0, 2) === "ms" || property.substr(0, 6) === "webkit") { + first2Chars = property.substr(0, 2); + + if (first2Chars === "ms" || property.substr(0, 6) === "webkit") { property = "-" + property; } - style.removeProperty(property.replace(_capsExp, "-$1").toLowerCase()); + style.removeProperty(first2Chars === "--" ? property : property.replace(_capsExp, "-$1").toLowerCase()); } else { style.removeAttribute(property); } @@ -59834,12 +60348,19 @@ module.exports = Yaml; if (cache && toPercent && cache.width && horizontal && cache.time === _ticker.time && !cache.uncache) { return _round(curValue / cache.width * amount); } else { - (toPercent || curUnit === "%") && !_nonStandardLayouts[_getComputedProperty(parent, "display")] && (style.position = _getComputedProperty(target, "position")); - parent === target && (style.position = "static"); - parent.appendChild(_tempDiv); - px = _tempDiv[measureProperty]; - parent.removeChild(_tempDiv); - style.position = "absolute"; + if (toPercent && (property === "height" || property === "width")) { + var v = target.style[property]; + target.style[property] = amount + unit; + px = target[measureProperty]; + v ? target.style[property] = v : _removeProperty(target, property); + } else { + (toPercent || curUnit === "%") && !_nonStandardLayouts[_getComputedProperty(parent, "display")] && (style.position = _getComputedProperty(target, "position")); + parent === target && (style.position = "static"); + parent.appendChild(_tempDiv); + px = _tempDiv[measureProperty]; + parent.removeChild(_tempDiv); + style.position = "absolute"; + } if (horizontal && toPercent) { cache = _getCache(parent); @@ -59909,9 +60430,10 @@ module.exports = Yaml; end += ""; if (end === "auto") { + startValue = target.style[prop]; target.style[prop] = end; end = _getComputedProperty(target, prop) || end; - target.style[prop] = start; + startValue ? target.style[prop] = startValue : _removeProperty(target, prop); } a = [start, end]; @@ -60352,7 +60874,7 @@ module.exports = Yaml; cache.skewY = skewY + deg; cache.transformPerspective = perspective + px; - if (cache.zOrigin = parseFloat(origin.split(" ")[2]) || 0) { + if (cache.zOrigin = parseFloat(origin.split(" ")[2]) || !uncache && cache.zOrigin || 0) { style[_transformOriginProp] = _firstTwoOnly(origin); } @@ -60728,7 +61250,7 @@ module.exports = Yaml; if (startAt && p in startAt) { startValue = typeof startAt[p] === "function" ? startAt[p].call(tween, index, target, targets) : startAt[p]; _isString(startValue) && ~startValue.indexOf("random(") && (startValue = _replaceRandom(startValue)); - getUnit(startValue + "") || (startValue += _config.units[p] || getUnit(_get(target, p)) || ""); + getUnit(startValue + "") || startValue === "auto" || (startValue += _config.units[p] || getUnit(_get(target, p)) || ""); (startValue + "").charAt(1) === "=" && (startValue = _get(target, p)); } else { startValue = _get(target, p); @@ -67587,268 +68109,6 @@ module.exports = Yaml; }); } ]); ; -/**************************************************************************** - color.js, - Functions to caluclate the brightness of a color - Taken from http://codepen.io/lunelson/pen/jENxwB - -****************************************************************************/ - -(function (window/*, document, undefined*/) { - "use strict"; - - //Create fcoo-namespace - var nsColor = window; - - - function lin2log(n) { - if (n <= 0.0031308) - return n * 12.92; - else - return 1.055 * Math.pow(n,1/2.4) - 0.055; - } - - function log2lin(n) { - if (n <= 0.04045) - return n / 12.92; - else - return Math.pow(((n + 0.055)/1.055),2.4); - } - - /******************************************** - brightness - ********************************************/ - nsColor.brightness = function brightness(r, g, b) { - r = log2lin(r/255); - g = log2lin(g/255); - b = log2lin(b/255); - return lin2log(0.2126 * r + 0.7152 * g + 0.0722 * b) * 100; - }; - - /******************************************** - colorContrastHEX - ********************************************/ - nsColor.colorContrastHEX = function colorContrastHEX( color ) { - if (color.length === 3) - color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2); - var rgb = []; - for (var i = 0; i <= 2; i++) - rgb[i] = parseInt(color.substr(1+i*2, 2), 16); - return nsColor.colorContrastRGB(rgb[0], rgb[1], rgb[2]); - }; - - /******************************************** - colorContrastRGB - ********************************************/ - nsColor.colorContrastRGB = function colorContrastRGB(r, g, b) { - var colorBrightness = nsColor.brightness(r, g, b), - whiteBrightness = nsColor.brightness(255, 255, 255), - blackBrightness = nsColor.brightness(0, 0, 0); - return Math.abs(colorBrightness - whiteBrightness) > Math.abs(colorBrightness - blackBrightness) ? '#ffffff' : '#000000'; - }; - - /******************************************** - rgbHex - Convert RGB color to HEX - From https://github.com/sindresorhus/rgb-hex - ********************************************/ - nsColor.rgbHex = function(red, green, blue, alpha){ - var isPercent = (red + (alpha || '')).toString().includes('%'); - - if (typeof red === 'string') { - var res = red.match(/(0?\.?\d{1,3})%?\b/g).map(Number); - red = res[0]; - green = res[1]; - blue = res[2]; - alpha = res[3]; - } - else - if (alpha !== undefined) { - alpha = parseFloat(alpha); - } - - if (typeof red !== 'number' || - typeof green !== 'number' || - typeof blue !== 'number' || - red > 255 || - green > 255 || - blue > 255) { - throw new TypeError('Expected three numbers below 256'); - } - - if (typeof alpha === 'number') { - if (!isPercent && alpha >= 0 && alpha <= 1) { - alpha = Math.round(255 * alpha); - } - else - if (isPercent && alpha >= 0 && alpha <= 100) { - alpha = Math.round(255 * alpha / 100); - } - else { - throw new TypeError('Expected alpha value (${alpha}) as a fraction or percentage'); - } - alpha = (alpha | 1 << 8).toString(16).slice(1); - } - else { - alpha = ''; - } - - return ((blue | green << 8 | red << 16) | 1 << 24).toString(16).slice(1) + alpha; - }; - - /******************************************** - hexRgb - Convert HEX color to RGB - From https://github.com/sindresorhus/hex-rgb - ********************************************/ - var hexChars = 'a-f\\d', - match3or4Hex = '#?[' + hexChars + ']{3}[' + hexChars + ']?', - match6or8Hex = '#?[' + hexChars + ']{6}([' + hexChars + ']{2})?', - nonHexChars = new RegExp('[^#' + hexChars + ']', 'gi'), - validHexSize = new RegExp('^' + match3or4Hex + '$|^' + match6or8Hex + '$', 'i'); - - nsColor.hexRgb = function(hex, options) { - options = options || {}; - if (typeof hex !== 'string' || nonHexChars.test(hex) || !validHexSize.test(hex)) { - throw new TypeError('Expected a valid hex string'); - } - - hex = hex.replace(/^#/, ''); - var alpha = 255; - - if (hex.length === 8) { - alpha = parseInt(hex.slice(6, 8), 16) / 255; - hex = hex.substring(0, 6); - } - - if (hex.length === 4) { - alpha = parseInt(hex.slice(3, 4).repeat(2), 16) / 255; - hex = hex.substring(0, 3); - } - - if (hex.length === 3) { - hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; - } - - var num = parseInt(hex, 16), - red = num >> 16, - green = (num >> 8) & 255, - blue = num & 255; - - return options.format === 'array' ? [red, green, blue, alpha] : { red: red, green: green, blue: blue, alpha: alpha }; - }; - - /******************************************** - hexSetAlpha - Set the alpha-value in a hex-color - ********************************************/ - nsColor.hexSetAlpha = function(hex, alpha){ - var rgba = nsColor.hexRgb(hex, {format: 'array'}); - rgba[3] = alpha; - return nsColor.rgbHex.apply(this, rgba); - }; - -}(this, document)); -; -/**************************************************************************** - json.js, -****************************************************************************/ - -(function (window/*, document, undefined*/) { - "use strict"; - - //Create fcoo-namespace - var nsJSON = window; - - /****************************************** - serializeJSON - Converts a json-object a la {id1:'value1', id2:'value2'} - to [ { name: "id1", value: "value1" }, { name: "id2", value: "value2" } ] - *******************************************/ - nsJSON.serializeJSON = function( jsonObj ){ - var result = []; - for (var id in jsonObj) - if (jsonObj.hasOwnProperty(id)) - result.push( {name: id, value: jsonObj[id] }); - return result; - }; - - -}(this, document)); -; -/**************************************************************************** - math.js, - -****************************************************************************/ - -(function (window/*, document, undefined*/) { - "use strict"; - - var nsMath = window; - - /******************************************* - significant - return n rounded to significant sf - *******************************************/ - nsMath.significant = function significant(n, sf) { - sf = sf - Math.floor(Math.log(n) / Math.LN10) - 1; - sf = Math.pow(10, sf); - n = Math.round(n * sf); - n = n / sf; - return n; - }; - - /******************************************* - precision - *******************************************/ - nsMath.precision = function precision(n, dp) { - dp = Math.pow(10, dp); - n = n * dp; - n = Math.round(n); - n = n / dp; - return n; - }; - - /******************************************* - nearest - *******************************************/ - nsMath.nearest = function nearest(n, v) { - v = v ? v : 1; - n = n / v; - n = Math.round(n) * v; - return n; - }; - - /******************************************* - roundDownTo - *******************************************/ - nsMath.roundDownTo = function roundDownTo(n, v) { - v = v ? v : 1; - n = n / v; - n = Math.floor(n) * v; - return n; - }; - - /******************************************* - roundToRange - *******************************************/ - nsMath.roundToRange = function roundToRange(v, min, max) { - return Math.max( Math.min(v, max), min); - }; - - /******************************************* - toDecimal - Convert a integer value v to a decimal - Eq toDecimal(89) = 0.89 - toDecimal(9) = 0.9 - toDecimal(1234) = 0.1234 - *******************************************/ - nsMath.toDecimal = function toDecimal(v) { - var l = v.toString().length; - return v / Math.pow(10, l); - }; - -}(this, document)); -; /* Copyright 2013 Silviu Bogan @@ -72026,7 +72286,7 @@ if (typeof define === 'function' && define.amd) { appendTick: function( leftPercent, options ){ if (!this.$currentGrid || this.options.noTicks) return; - options = $.extend( {minor: false, color: ''}, options ); + options = $.extend( {minor: false/*, color: ''*/}, options ); var left = this.cache.canvasMargin + (this.dimentions.containerWidth * leftPercent / 100), ctx = this.cache.ctx, @@ -78634,7 +78894,7 @@ options: }; window.TimeSlider = function (input, options, pluginCount) { - this.VERSION = "7.7.2"; + this.VERSION = "7.7.3"; //Setting default options this.options = $.extend( true, {}, defaultOptions, options ); @@ -78896,13 +79156,9 @@ options: appendStandardGrid ***************************************************************/ appendStandardGrid: function(){ - var _this = this, - opt = this.options, - - //text and tick options for secondary grids (relative and utc for absolute scale - textOptions = {italic:true, minor:true}, - tickOptions = {color:'#555555'}; - + var _this = this, + opt = this.options, + textOptions = {italic:true, minor:true}; //Text and tick options for secondary grids (relative and utc for absolute scale) //***************************************************** function appendSpecialGrid( gridOpt ){ @@ -78931,7 +79187,7 @@ options: if (gridOpt.newLabels) opt.maxLabelWidth = null; //Force recalculating label-space - _this._appendStandardGrid(textOptions, tickOptions); + _this._appendStandardGrid(textOptions); _this.$currentGrid.addClass(gridClassName); @@ -79003,7 +79259,7 @@ options: newLabels : false }); - this.appendDateGrid( textOptions, tickOptions ); + this.appendDateGrid( textOptions); this.$currentGrid.addClass(opt.format.UTCGridClassName || opt.UTCGridClassName || ''); opt.format.timezone = saveTimezone; @@ -109609,33 +109865,8 @@ fcoo-application-color.js "use strict"; //Create fcoo-namespace - var ns = window.fcoo = window.fcoo || {}; - - //Using chroma.js (https://github.com/gka/chroma.js) to create js-versions of sass functions darken and lighten - - //HSL manipulators - fromhttps://github.com/gka/chroma.js/issues/217 - const lighten = (color, hslPercent) => color.set("hsl.l", color.get("hsl.l") + hslPercent); - const darken = (color, hslPercent) => lighten(color, -hslPercent); - const sassLightenDarken = (color, percent, dark) => { - let hslPercent = window.numeral(percent).value(); - if (hslPercent === null) - hslPercent = 1; - color = window.chroma(color); - return dark ? darken(color, hslPercent).hex() : lighten(color, hslPercent).hex(); - }; - - window.sassLighten = ( color, percent ) => sassLightenDarken( color, percent ); - window.sassDarken = ( color, percent ) => sassLightenDarken( color, percent, true ); - - const mix = (color1, color2, percent) => { - let ratio = window.numeral(percent).value(); - if (ratio === null) - ratio = 1; - return window.chroma.mix(color1, color2, ratio); - }; - - window.sassTintColor = (color, weight) => mix( color, 'white', weight ); - window.sassShadeColor = (color, weight) => mix( color, 'black', weight ); + var ns = window.fcoo = window.fcoo || {}, + nsColor = ns.color = ns.color || {}; /*********************************************************************** setApplicationColors( applicationColor, applicationTextColor = [#000000, #ffffff]) @@ -109643,34 +109874,25 @@ fcoo-application-color.js applicationTextColor is optional ***********************************************************************/ ns.setApplicationColors = ( applicationColor, applicationTextColor = ['#000000', '#ffffff'] ) => { - applicationTextColor = $.isArray( applicationTextColor ) ? applicationTextColor : [applicationTextColor]; - const getTextColor = ( color ) => { - let bestContrast = 0, result; - applicationTextColor.forEach( (textColor) => { - const contrast = window.chroma.contrast(color, textColor); - if (contrast > bestContrast){ - bestContrast = contrast; - result = textColor; - } - }); - return window.chroma(result); - }; + const getTextColor = ( color ) => nsColor.chromaBestContrast( color, applicationTextColor ); + //Set application base color (see fcoo/fcoo-colors) + nsColor.setApplicationBaseColor(applicationColor); + + //Set the 'toned' color of the application color let result = {}; [0, 25, 50, 63].forEach( (percent) => { - result[percent] = {}; const setColor = ( varIdPostfix, value ) => { const hex = window.chroma(value).hex(); result[percent][varIdPostfix] = hex; - const root = document.querySelector(':root'); - // set css variable - root.style.setProperty('--_fcoo-app-' + varIdPostfix + '-color-' + percent, hex); + //Set css variable + ns.setRootVar('--_fcoo-app-' + varIdPostfix + '-color-' + percent, hex); }; /* - The following scss-vvariables must be set: + The following scss-variables must be set: --_fcoo-app-bg-color-PERCENT : ; --_fcoo-app-hover-bg-color-PERCENT : --_fcoo-app-active-bg-color-PERCENT : scss tint-color($bg-color-PERCENT, $btn-active-bg-tint-amount); 20% @@ -109678,17 +109900,18 @@ fcoo-application-color.js --_fcoo-app-hover-text-color-PERCENT : scss tint-color($text-color-PERCENT, $btn-hover-border-tint-amount); 10% --_fcoo-app-active-text-color-PERCENT: scss tint-color($text-color-PERCENT, $btn-active-border-tint-amount);10% --_fcoo-app-shadow-color-PERCENT : ; + see src/_application-color-mixin.scss for the definition of the different colors */ - let appColor = window.chroma(window.sassLighten(applicationColor, percent+'%')), + let appColor = window.chroma(nsColor.sassLighten(applicationColor, percent+'%')), textColor = getTextColor( appColor ); setColor('bg', appColor); - setColor('hover-bg', window.sassTintColor( appColor, .10) ); - setColor('active-bg', window.sassTintColor( appColor, .12) ); + setColor('hover-bg', nsColor.sassTintColor( appColor, .10) ); + setColor('active-bg', nsColor.sassTintColor( appColor, .12) ); setColor('text', textColor ); - setColor('hover-text', window.sassTintColor( textColor, .1) ); - setColor('active-text', window.sassTintColor( textColor, .1) ); + setColor('hover-text', nsColor.sassTintColor( textColor, .1) ); + setColor('active-text', nsColor.sassTintColor( textColor, .1) ); if (percent == 0) setColor('shadow', getTextColor( textColor ) ); }); @@ -109862,21 +110085,42 @@ Sections: //TEST Reading setup-file for application -/* -ns.promiseList.prependFirst({ - fileName: 'findesikke.json', - resolve : function(data){ +if (ns.DEMO_VERSION) + ns.promiseList.prependFirst({ + fileName: 'findesikke.json', + resolve : function(/*data*/){ + /* + TODO: How to load meta-data: From or set-up-file + Need to get + application-color + owner + logo (via owner?) + + menu-file (if any) + + ...and more + + */ + - }, - promiseOptions: { - reject : function(){ - console.log('Findes ikke => Brug default'); }, + promiseOptions: { + reject : function(){ + //console.log('Findes ikke => Brug default'); + + + + // + ['red','green','blue','pink','orange'].forEach( (color, index) => { + if (window.location.href.includes('color='+index)) + ns.setApplicationColors(color); + }); + }, useDefaultErrorHandler: false } }); -*/ + /*********************************************************************** @@ -110246,13 +110490,17 @@ Create and manage the main structure for FCOO web applications */ topMenu : null, //Options for top-menu. See src/fcoo-application-top-menu.js - leftMenu : null, //Options for left-menu. See src/fcoo-application-touch.js. Includes optional buttons: {preButtons,...} - leftMenuButtons : null, //Options for buttons in the header of the left-menu. See format below - keepLeftMenuButton : false, //Keeps the left menu-button even if leftMenu is null - rightMenu : null, //Options for right-menu. See src/fcoo-application-touch.js - keepRightMenuButton : false, //Keeps the right menu-button even if rightMenu is null - rightMenuButtons : null, //Options for buttons in the header of the right-menu. See format below - bottomMenu : null, //Options for bottom-menu. See src/fcoo-application-touch.js + + leftMenu : null, //Options for left-menu. See src/fcoo-application-touch.js. Includes optional buttons: {preButtons,...} + leftMenuIcon : 'fa-bars', //Icon for button that opens left-menu + leftMenuButtons : null, //Options for buttons in the header of the left-menu. See format below + keepLeftMenuButton : false, //Keeps the left menu-button even if leftMenu is null + + rightMenu : null, //Options for right-menu. See src/fcoo-application-touch.js + rightMenuIcon : 'fa-list', //Icon for button that opens right-menu + keepRightMenuButton : false, //Keeps the right menu-button even if rightMenu is null + rightMenuButtons : null, //Options for buttons in the header of the right-menu. See format below + bottomMenu : null, //Options for bottom-menu. See src/fcoo-application-touch.js onResizeStart : null, //function(main) to be called when the main-container starts resizing onResizing : null, //function(main) to be called when the main-container is being resized @@ -110351,7 +110599,7 @@ Create and manage the main structure for FCOO web applications $handleContainer : $leftAndRightHandleContainer, multiMode : true, resetListPrepend : true, - main: result + main : result })); $body.append( result.leftMenu.$container ); result.menus.push(result.leftMenu); @@ -110360,11 +110608,12 @@ Create and manage the main structure for FCOO web applications //Append the outer container $outerContainer.appendTo( $body ); - //Create and append top-menu (if any) + //Create and append top-menu (if any). + //Add left-menu if leftMenu: true or keepLeftMenuButton = true. Use leftMenuicon as icon. Same for right-menu if (result.options.topMenu){ var topMenuOptions = $.extend({}, result.options.topMenu, { - leftMenu : !!result.options.leftMenu || result.options.keepLeftMenuButton, - rightMenu: !!result.options.rightMenu || result.options.keepRightMenuButton + leftMenu : result.options.leftMenu || result.options.keepLeftMenuButton ? {icon: $.FONTAWESOME_PREFIX_STANDARD + ' ' + result.options.leftMenuIcon} : false, + rightMenu: result.options.rightMenu || result.options.keepRightMenuButton ? {icon: $.FONTAWESOME_PREFIX_STANDARD + ' ' +result.options.rightMenuIcon} : false }); result.topMenuObject = ns.createTopMenu( topMenuOptions ); @@ -111969,6 +112218,10 @@ Create and manage the top-menu for FCOO web applications return $result; } + function createOpenMenuButton( $menu, elementOptions, menuOptions/*, topMenu */){ + return defaultTopMenuButton($menu, menuOptions); + } + function defaultAddToElementList( $element, elementList, priority, minWidth ){ elementList.push({ $element: $element, @@ -112010,8 +112263,8 @@ Create and manage the top-menu for FCOO web applications var topMenuElementList = [ { id : 'leftMenu', - icon : $.FONTAWESOME_PREFIX_STANDARD + ' fa-bars', - priority: 0 + priority: 0, + create : createOpenMenuButton }, //*************************************************************** @@ -112160,9 +112413,9 @@ Create and manage the top-menu for FCOO web applications //*************************************************************** { id : 'rightMenu', - icon : $.FONTAWESOME_PREFIX_STANDARD + ' fa-list', priority : 0, - rightSide: true + rightSide: true, + create : createOpenMenuButton } ].map( function( options ){ @@ -112529,7 +112782,7 @@ Is adjusted fork of Touch-Menu-Like-Android (https://github.com/ericktatsui/Touc this.sizeId = this.options.position + '-menu-size'; ns.appSetting.add({ id : this.sizeId, - applyFunc : this._setSizeIndexFromSetting.bind(this), + applyFunc : this._setSizeIndex.bind(this), callApply : true, defaultValue: 0, }); @@ -112729,12 +112982,6 @@ Is adjusted fork of Touch-Menu-Like-Android (https://github.com/ericktatsui/Touc } }, - _setSizeIndexFromSetting: function( sizeIndex ){ - if (this.sizeIsSetFromSettings) return; - this.sizeIsSetFromSettings = true; - this._setSizeIndex( sizeIndex ); - }, - _setSizeModernizrTest: function(){ this.options.sizeList.forEach( function(sizeOptions, index){ if (sizeOptions.modernizr) @@ -112744,6 +112991,7 @@ Is adjusted fork of Touch-Menu-Like-Android (https://github.com/ericktatsui/Touc }, _setSizeIndex( sizeIndex ){ + /**** NOTE: animateByJS and the associated code is at attempt to aminate change in size when width/height = 'auto'. But it is not working :-( ****/ @@ -112801,7 +113049,7 @@ Is adjusted fork of Touch-Menu-Like-Android (https://github.com/ericktatsui/Touc this._setSizeModernizrTest(); } - ns.appSetting.set(this.sizeId, sizeIndex); + ns.appSetting.settings[this.sizeId].apply(sizeIndex, true); this._onSetSize(); this.options.onSetSize( this.options.sizeIndex, this ); @@ -112878,88 +113126,6 @@ Is adjusted fork of Touch-Menu-Like-Android (https://github.com/ericktatsui/Touc return new ns.TouchMenu(options); }; -}(jQuery, this, document)); -; -/**************************************************************************** - fcoo-colors.js, - - (c) 2021, FCOO - - https://github.com/FCOO/fcoo-colors - https://github.com/FCOO - -****************************************************************************/ - -(function ($, window/*, document, undefined*/) { - "use strict"; - - //Create fcoo-namespace - var ns = window.fcoo = window.fcoo || {}, - nsColor = ns.color = ns.color || {}; - - - nsColor.colorArray = [ - //0:Blue 1:Purple 2:Red 3:Orange 4:Cyan 5:Yellow 6:Pink 7:Green 8:Gray - ['#CFEDFB', '#EBE4FF', '#FFE0DA', '#FFE7BB', '#D2ECEB', '#FFF2B6', '#FFDFF2', '#E0F4BE', '#E6E9EC'], - ['#9BDAF3', '#D8CCF4', '#FAC2BB', '#F8CD94', '#9EDDDD', '#FBE491', '#FFC4E4', '#C7E59A', '#D0D3D6'], - ['#68C7EC', '#BFABE6', '#F59890', '#F7B26A', '#69CDCF', '#F7D56B', '#F99ACA', '#AED677', '#B6B9BC'], - ['#34B3E4', '#A589D9', '#F16D64', '#F59640', '#35BEC1', '#F3C746', '#F371AF', '#95C753', '#A0A3A6'], - ['#00A0DC', '#8C68CB', '#EC4339', '#F47B16', '#00AEB3', '#EFB920', '#ED4795', '#7CB82F', '#86898C'], - ['#008CC9', '#7C5BBB', '#DD2E1F', '#EC640C', '#009EA5', '#E6A700', '#E2247F', '#60AA14', '#737679'], - ['#0077B5', '#6A4BA7', '#C11F1D', '#CD5308', '#008891', '#CA9400', '#C9186E', '#4E8F13', '#595C5F'], - ['#005E93', '#573B93', '#A40F1C', '#AF4104', '#00727D', '#AA7D00', '#B10C5C', '#3B7511', '#434649'], - ['#004471', '#452B7F', '#88001A', '#903000', '#005C69', '#8B6700', '#870044', '#295A10', '#303336'] - ]; - - var colorName2Index = ['blue', 'purple', 'red', 'orange', 'cyan', 'yellow', 'pink', 'green', 'gray']; - - - nsColor.defaultGradient = 4; - nsColor.defaultOrder = ["blue", "red", "green", "yellow", "gray", "purple", "pink", "cyan", "orange"]; - - - nsColor.getColor = function(color, gradient, fromSortedList){ - var colorIndex = typeof color == 'string' ? colorName2Index.indexOf(color) : color; - return nsColor.getColorList(fromSortedList, gradient)[colorIndex]; - }; - - - nsColor.getColorRGB = function(/*color, gradient, fromSortedList*/){ - return window.hexRgb( nsColor.getColor.apply(null, arguments) ); - }; - - nsColor.getColorRGBArray = function(/*color, gradient, fromSortedList*/){ - return window.hexRgb( nsColor.getColor.apply(null, arguments), {format: 'array'} ); - }; - - - nsColor.getDeltaColor = function(color, deltaGradient = 0, fromSortedList){ - return nsColor.getColor(color, nsColor.defaultGradient + deltaGradient, fromSortedList); - }; - - - nsColor.getDeltaColorRGB = function(/*color, deltaGradient = 0, fromSortedList*/){ - return window.hexRgb( nsColor.getDeltaColor.apply(null, arguments) ); - }; - - nsColor.getDeltaColorRGBArray = function(/*color, deltaGradient = 0, fromSortedList*/){ - return window.hexRgb( nsColor.getDeltaColor.apply(null, arguments), {format: 'array'} ); - }; - - - nsColor.getColorList = function( sorted, gradient = 'DEFAULT' ){ - gradient = gradient == 'DEFAULT' ? nsColor.defaultGradient : gradient; - var result = []; - if (sorted){ - $.each(nsColor.defaultOrder, function(dummy, color){ - result.push( nsColor.getColor( color, gradient ) ); - }); - } - else - result = nsColor.colorArray[gradient]; - return result; - }; - }(jQuery, this, document)); ; /**************************************************************************** @@ -112976,33 +113142,10 @@ Is adjusted fork of Touch-Menu-Like-Android (https://github.com/ericktatsui/Touc "use strict"; //Create fcoo-namespace - var ns = window.fcoo = window.fcoo || {}, - nsColor = ns.color = ns.color || {}; + //var ns = window.fcoo = window.fcoo || {}, + //nsColor = ns.color = ns.color || {}; - //nsColor.colorNames = {id}{da:STRING, en:STRING} - nsColor.colorNames = { - blue : {da: 'blå', en: 'blue' }, - purple : {da: 'lilla', en: 'purple' }, - red : {da: 'rød', en: 'red' }, - orange : {da: 'orange', en: 'orange' }, - cyan : {da: 'cyan', en: 'cyan' }, - yellow : {da: 'Gul', en: 'yellow' }, - pink : {da: 'pink', en: 'pink' }, - green : {da: 'grøn', en: 'green' }, - gray : {da: 'grå', en: 'gray' } - }; - - //nsColor.colorList = []{id, name: {da:STRING, en:STRING}} ordred by nsColor.defaultOrder - nsColor.colorList = []; - - $.each(nsColor.defaultOrder, function(index, colorId){ - nsColor.colorList.push({ - id : colorId, - name: nsColor.colorNames[colorId] - }); - }); - }(jQuery, this, document)); ; diff --git a/demo/index.html b/demo/index.html index 93b739c..fbd63f7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -80,6 +80,10 @@ //window.fcoo.LOCAL_DATA = true; window.fcoo.DEMO_VERSION = true; + //TEMP: No access to data-files on AWS. Read from old location instead + window.fcoo.path.setPath({host: 'bal.fcoo.dk'}); + + /* //* Test setupFileVersion window.fcoo.setupFileVersion = { @@ -143,9 +147,9 @@ save : true, reset : true, setting : true - } - + }, }, + _rightMenu: { content: [{icon:'fa-home', text:{da:'Dette er content', en:'This is content'}},{icon:'fa-car', text:{da:'Dette er content2', en:'This is content2'}}], _data: ['item1', 'item2'], diff --git a/dist/fcoo-maps.js b/dist/fcoo-maps.js index 9622d51..3bca361 100644 --- a/dist/fcoo-maps.js +++ b/dist/fcoo-maps.js @@ -317,6 +317,7 @@ See src/fcoo-maps.js content : '', resolve : null }, + leftMenuIcon : 'fa-layer-group', keepLeftMenuButton: false, rightMenu : false, @@ -1644,9 +1645,11 @@ dataset.js topMenu : setupOptions.topMenu, leftMenu : setupOptions.leftMenu, + leftMenuIcon : setupOptions.leftMenuIcon, keepLeftMenuButton : setupOptions.keepLeftMenuButton, rightMenu : setupOptions.rightMenu, + rightMenuIcon : setupOptions.rightMenuIcon, keepRightMenuButton: setupOptions.keepRightMenuButton, bottomMenu : setupOptions.bottomMenu, diff --git a/package.json b/package.json index 4f3c7cb..5e78f32 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fcoo-maps", - "version": "1.32.1", + "version": "1.32.2", "homepage": "https://github.com/FCOO/fcoo-maps", "author": "Niels Holt nho@fcoo.dk", "description": "package.json is only use for building the package. see bower.json for more info", diff --git a/src/10_fcoo-maps_setup.js b/src/10_fcoo-maps_setup.js index 67f5617..52854e5 100644 --- a/src/10_fcoo-maps_setup.js +++ b/src/10_fcoo-maps_setup.js @@ -234,6 +234,7 @@ See src/fcoo-maps.js content : '', resolve : null }, + leftMenuIcon : 'fa-layer-group', keepLeftMenuButton: false, rightMenu : false, diff --git a/src/fcoo-maps.js b/src/fcoo-maps.js index 8c45df8..8649e7f 100644 --- a/src/fcoo-maps.js +++ b/src/fcoo-maps.js @@ -381,9 +381,11 @@ topMenu : setupOptions.topMenu, leftMenu : setupOptions.leftMenu, + leftMenuIcon : setupOptions.leftMenuIcon, keepLeftMenuButton : setupOptions.keepLeftMenuButton, rightMenu : setupOptions.rightMenu, + rightMenuIcon : setupOptions.rightMenuIcon, keepRightMenuButton: setupOptions.keepRightMenuButton, bottomMenu : setupOptions.bottomMenu,