option to add nav-bar background image

Author: mrin9

src/rapidoc.js

@@ -78,6 +78,9 @@ export default class RapiDoc extends LitElement {
 
       // Nav Bar Colors
       navBgColor: { type: String, attribute: 'nav-bg-color' },
+      navBgImage: { type: String, attribute: 'nav-bg-image' },
+      navBgImageSize: { type: String, attribute: 'nav-bg-image-size' },
+      navBgImageRepeat: { type: String, attribute: 'nav-bg-image-repeat' },
       navTextColor: { type: String, attribute: 'nav-text-color' },
       navHoverBgColor: { type: String, attribute: 'nav-hover-bg-color' },
       navHoverTextColor: { type: String, attribute: 'nav-hover-text-color' },

src/styles/nav-styles.js

@@ -8,6 +8,10 @@ export default html`
   overflow: hidden;
   color:var(--nav-text-color);
   background-color: var(--nav-bg-color);
+  background-image: var(--nav-bg-image);
+  background-size: var(--nav-bg-image-size);
+  background-repeat: var(--nav-bg-image-repeat, 'no-repeat');
+  background-blend-mode: multiply;
   box-sizing:border-box;
   line-height: 16px;
   display:none;

src/templates/main-body-template.js

@@ -67,6 +67,9 @@ export default function mainBodyTemplate() {
     headerColor: isValidHexColor(this.headerColor) ? this.headerColor : '',
     primaryColor: isValidHexColor(this.primaryColor) ? this.primaryColor : '',
     navBgColor: isValidHexColor(this.navBgColor) ? this.navBgColor : '',
+    navBgImage: this.navBgImage || '',
+    navBgImageSize: this.navBgImageSize,
+    navBgImageRepeat: this.navBgImageRepeat,
     navTextColor: isValidHexColor(this.navTextColor) ? this.navTextColor : '',
     navHoverBgColor: isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
     navHoverTextColor: isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',

src/templates/navbar-template.js

@@ -12,10 +12,10 @@ export default function navbarTemplate() {
     ${(this.allowSearch === 'false')
       ? ''
       : html`
-        <div style="position:sticky; top:0; display:flex; flex-direction:row; align-items: stretch; padding:24px; background: var(--nav-bg-color); border-bottom: 1px solid var(--nav-hover-bg-color)">
+        <div style="position:sticky; top:0; display:flex; flex-direction:row; align-items: stretch; padding:24px; border-bottom: 1px solid var(--nav-hover-bg-color)">
           <div style="display:flex; flex:1">
             <input id="nav-bar-search" 
-              style="width:100%; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--nav-accent-color); background-color:var(--nav-hover-bg-color)" 
+              style="width:100%; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--nav-accent-color);" 
               type="text" placeholder="search" 
               @change="${this.onSearchChange}"  
               spellcheck="false" 

src/utils/color-utils.js

@@ -5,10 +5,10 @@ export default {
     headerBg: '#444',
     getRgb(hex) {
       if (hex.indexOf('#') === 0) {
-        hex = hex.slice(1);
+        hex = hex.slice(1, 7);
       }
       // convert 3-digit hex to 6-digits.
-      if (hex.length === 3) {
+      if (hex.length === 3 || hex.length === 4) {
         hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
       }
       if (hex.length !== 6) {
@@ -47,5 +47,5 @@ export default {
 };
 
 export function isValidHexColor(colorCode) {
-  return /^#([0-9A-F]{3}){1,2}$/i.test(colorCode);
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/i.test(colorCode);
 }

src/utils/theme.js

@@ -28,6 +28,9 @@ export default function setTheme(baseTheme, theme = {}) {
     const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, 10);
 
     const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, 10);
+    const navBgImage = theme.navBgImage || '';
+    const navBgImageSize = theme.navBgImageSize;
+    const navBgImageRepeat = theme.navBgImageRepeat;
     const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.65');
     const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);
@@ -49,6 +52,9 @@ export default function setTheme(baseTheme, theme = {}) {
       selectionFg,
 
       navBgColor,
+      navBgImage,
+      navBgImageSize,
+      navBgImageRepeat,
       navTextColor,
       navHoverBgColor,
       navHoverTextColor,
@@ -113,6 +119,9 @@ export default function setTheme(baseTheme, theme = {}) {
     const navAccentColor = theme.navAccentColor ? theme.navAccentColor : primaryColor;
     */
     const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -180);
+    const navBgImage = theme.navBgImage || '';
+    const navBgImageSize = theme.navBgImageSize || '';
+    const navBgImageRepeat = theme.navBgImageRepeat;
     const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.65');
     const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);
     const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);
@@ -133,6 +142,9 @@ export default function setTheme(baseTheme, theme = {}) {
       selectionFg,
 
       navBgColor,
+      navBgImage,
+      navBgImageSize,
+      navBgImageRepeat,
       navTextColor,
       navHoverBgColor,
       navHoverTextColor,
@@ -173,7 +185,6 @@ export default function setTheme(baseTheme, theme = {}) {
       brown: theme.brown ? theme.brown : '#D4AC0D',
     };
   }
-
   return html`<style>
     :host {
     --bg:${newTheme.bg1};
@@ -218,6 +229,9 @@ export default function setTheme(baseTheme, theme = {}) {
 
     /* Nav Colors */  
     --nav-bg-color:${newTheme.navBgColor};
+    --nav-bg-image: url(${newTheme.navBgImage});
+    --nav-bg-image-size: ${newTheme.navBgImageSize || 'contain'};
+    --nav-bg-image-repeat: ${newTheme.navBgImageRepeat || 'no-repeat'};
     --nav-text-color:${newTheme.navTextColor};
     --nav-hover-bg-color:${newTheme.navHoverBgColor};
     --nav-hover-text-color:${newTheme.navHoverTextColor};