fixed monocolor issues, renamed ICON_TYPES and icon filenames

sbecker11 · Jan 1, 2024 · f37c1c9 · f37c1c9
1 parent 22e7af1
commit f37c1c9
Show file tree

Hide file tree

Showing 22 changed files with 876 additions and 187 deletions.
diff --git a/.gitignore b/.gitignore
@@ -92,7 +92,7 @@ lerna-debug.log
 **/.DS_Store
 Thumbs.db
 **/venv
-**/images/*
+**/imgs/*
 
 # Large .mov files
 *.mov
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ The static 'flock-of-postcards' website has been upgraded to be a webapp that us
 ### Planned features:
 - Need to ease focal point to bullseye when any cardDiv is selected (or clicked?)
 - Need to add stamp icons to post cards
-- Click on post card to see full-size image in right-side panel
+- Click on post card to see full-size img in right-side panel
 - Render bizcards as 3D blocks with rounded corners
 - Rotate 3D bizcard blocks during transitions
 - Toggle debug panel visiblilty with button or key
@@ -103,7 +103,7 @@ The static 'flock-of-postcards' website has been upgraded to be a webapp that us
 
 #### Features added:
 
-- scripted process to convert WordPress media dump xml file into a javascript file of image paths of resized local image files (not included in github) for html inclusion.
+- scripted process to convert WordPress media dump xml file into a javascript file of img paths of resized local img files (not included in github) for html inclusion.
 - scripted process to convert excel jobs.xlsx spreadsheet file (included in github) into a javascript file of job objects for html inclusion.
 - right side now has fixed header and footer and an auto-scolling content.
 - click on a any postcard or underlying buisness card to add a new deleteble line item to the right column.
@@ -142,7 +142,7 @@ The static 'flock-of-postcards' website has been upgraded to be a webapp that us
 #### Features added:  
 - randomized div sizes, locations, and z-index
 - z-index affects opacity and brightness
-- autogenerated images from web
+- autogenerated imgs from web
 - vertical stack of divs moved to canvas-container center on load and resize
 - vertical scrollbar
 - fat middle line for diagnositcs

diff --git a/index.html b/index.html
@@ -16,11 +16,12 @@
 
 <body>
   <script type="text/javascript" src="static_content/jobs/jobs.mjs"></script>
-  <!-- <script type="text/javascript" src="static_content/media/image_paths.mjs"></script> -->
+  <!-- <script type="text/javascript" src="static_content/media/img_paths.mjs"></script> -->
   <script type="module" src="./main.mjs" ></script>
   <script type="module" src="./modules/alerts.mjs" ></script>
   <script type="module" src="./modules/monoColor.mjs" ></script>
-
+  <script type="module" src="./modules/css_colors.mjs" ></script>
+
   <div id="main-container">
 
     <div id="canvas-container" class="column-50 scrollable-container">
@@ -43,7 +44,7 @@
               <td style="vertical-align:top">
                 <p><span style="font-size:30px">Shawn Becker</span></p>
                 <p><strong><span style="font-size:11pt">Data Engineer / Software Developer</span></strong></p>
-                <p>[email protected] &bull; 857-891-0896<br>https://linkedin.com/in/shawnbecker &bull; Lehi - Utah, USA <img src="static_content/icons/icons8-geography-16-white.png"/><img src="static_content/icons/icons8-image-16-white.png"/></p>
+                <p>[email protected] &bull; 857-891-0896<br>https://linkedin.com/in/shawnbecker &bull; Lehi - Utah, USA <img src="static_content/icons/icons8-url-16-white.png"/><img src="static_content/icons/icons8-img-16-white.png"/></p>
               </td>
             </tr>
           </tbody>

diff --git a/main.mjs b/main.mjs
diff --git a/modules/alerts.mjs b/modules/alerts.mjs
@@ -1,6 +1,6 @@
 // @ts-nocheck
 
-import { addAllIconClickListeners, selectAllBizcards } from '../main.mjs';
+import { onCloseWelcomeAlert } from '../main.mjs';
 
 const overlay = document.getElementById('overlay');
 const welcomeAlert = document.getElementById('welcomeAlert');
@@ -24,8 +24,7 @@ export function closeWelcomeAlert(event) {
     overlay.style.display = 'none';
     welcomeAlert.setAttribute('aria-hidden', 'true');
 
-    selectAllBizcards();
-    addAllIconClickListeners();
+    onCloseWelcomeAlert();
 }
 
 // Event listener for overlay click

diff --git a/static_content/fragments/css-colors.json → modules/css_colors.mjs b/static_content/fragments/css-colors.json → modules/css_colors.mjs
@@ -1,4 +1,6 @@
-{
+import * as utils from './utils.mjs';
+
+const CSS_COLORS = {
     "AliceBlue": "#F0F8FF",
     "AntiqueWhite": "#FAEBD7",
     "Aqua": "#00FFFF",
@@ -140,5 +142,52 @@
     "WhiteSmoke": "#F5F5F5",
     "Yellow": "#FFFF00",
     "YellowGreen": "#9ACD32"
-  }
-
+};
+
+const LOWERCASE_CSS_COLORS = _getLowerCaseCssColors();
+
+function _getLowerCaseCssColors()  {
+    let lowerCaseColors = {};
+    for (let color in CSS_COLORS) {
+        lowerCaseColors[color.toLowerCase()] = CSS_COLORS[color];
+    }
+    return lowerCaseColors;
+}
+
+export function get_HEX_from_CssColor(cssColor, verbose=false) {
+    if ( utils.isString(cssColor) ) {
+        let color = cssColor.toLowerCase();
+        let colors = LOWERCASE_CSS_COLORS;
+        if ( color in colors ) {
+            let HEX = colors[color];
+            if ( utils.isHexColorString(HEX)) {
+                return HEX;
+            }
+            if ( verbose )
+                console.trace(`cssColor:[${cssColor}] found HEX:[${HEX}] but it's not a valid hexColorString`);
+            return null;
+        } 
+        if( verbose )
+            console.trace(`cssColor:[${cssColor}] no matching hexColorString found`);
+        return null;
+    } 
+    if( verbose )
+        console.trace(`cssColor:[${cssColor}] is not a valid string`);
+    return null;
+}
+
+export function get_CssColor_from_HEX(HEX, verbose=false) {
+    if ( utils.isHexColorString(HEX) ) {
+        for (let color in LOWERCASE_CSS_COLORS) {
+            if (LOWERCASE_CSS_COLORS[color] === HEX) {
+                return color;
+            }
+        }
+        if( verbose )
+            console.trace(`HEX:[${HEX}] no matching cssColor found`);
+        return null;
+    }
+    if( verbose )
+        console.trace(`HEX:[${HEX}] is not a valid hexColorString`);
+    return null;
+}
diff --git a/modules/monoColor.mjs b/modules/monoColor.mjs
@@ -6,16 +6,19 @@ var isMonoColor = false;
 const monoColor = "black";
 const monoBackgroundColor = "lightgrey";
 
-export const ICON_TYPES = ['back', 'geometry', 'image'];
+export const ICON_TYPES = ['back', 'url', 'img'];
 export const ICON_COLORS = ['black', 'white'];
 
 export function getIconColor(color) {
-    if (color in ICON_COLORS) {
-        return color;
+    if ((typeof color === undefined) || (color == null) || (color == "")) {
+        throw new Error(`getIconColor color:${color} is undefined`);
     }
     color = color.toUpperCase();
-    let RGB = utils.get_RGB_from_ColorStr(color);
+    let RGB = utils.get_RGB_from_AnyStr(color);
     let iconColor = (RGB[0] + RGB[1] + RGB[2] > 382) ? 'white' : 'black';
+    if ( !ICON_COLORS.includes(iconColor) ) {
+        throw new Error(`getIconColor color:${color} iconColor:${iconColor} not included by ${ICON_COLORS}\n`);
+    }
     return iconColor;
 }
 
@@ -37,17 +40,59 @@ export function toggleMonoColor() {
     return isMonoColor;
 }
 
-export function setIconToColor(iconElement, iconColor) {
-    let iconType = iconElement.dataset.iconType;
-    if( !(iconType in ICON_TYPES) ) {
-        console.trace(`iconElement:${iconElement} has illegal iconType:${iconType}`);
+function getIconElementType(iconElement) {
+    let iconType = iconElement.dataset.icontype || iconElement.getAttribute('icon-type');
+    if( typeof iconType ==='undefined' || iconType === null || iconType === "") {
+        if ( iconElement.classList.contains('back-icon') ) {
+            return 'back';
+        } else if ( iconElement.classList.contains('url-icon') ) {
+            return 'url';
+        } else if ( iconElement.classList.contains('img-icon') ) {
+            return 'img';
+        } else {
+            var err = `getIconElementType iconElement:${iconElement} has no icon-type dataset or attribute\n`;
+            err += `getIconElementType iconElement.dataset:${utils.getDatasetAsString(iconElement)}\n`;
+            err += `getIconElementType iconElement.attributes:${utils.getAttributesAsString(iconElement)}\n`;
+            throw new Error(err);
+        }
+    }
+    if ( ICON_TYPES.includes(iconType) ) {
+        return iconType;
+    } else {
+        var err = `getIconElementType iconElement:${iconElement} iconType:${iconType} not included in ${ICON_TYPES}`;
+        throw new Error(err);
     }
-    if ( !(iconColor in ICON_COLORS) ) {
-        console.trace(`iconElement:${iconElement} has illegal iconColor:${iconColor}`);
+}
+
+export function setIconToColor(iconElement, theIconColor) {
+    let iconType = getIconElementType(iconElement); 
+    let iconColor = getIconColor(theIconColor);
+    if( !ICON_TYPES.includes(iconType) ) {
+        var err = `setIconToColor iconElement:${iconElement} has illegal iconType:[${iconType}] not included by ${ICON_TYPES}\n`;
+        err += `setIconToColor iconElement.dataset:${utils.getDatasetAsString(iconElement)}\n`;
+        err += `setIconToColor iconElement.attributes:${utils.getAttributesAsString(iconElement)}\n`;
+        throw new Error(err);
+    }
+    if ( !ICON_COLORS.includes(iconColor) ) {
+        var err = `setIconToColor iconElement:${iconElement} has illegal iconColor:[${iconColor}] not included by ${ICON_COLORS}\n`;
+        err += `setIconToColor iconElement.dataset:${utils.getDatasetAsString(iconElement)}\n`;
+        err += `setIconToColor iconElement.attributes:${utils.getAttributesAsString(iconElement)}\n`;
+        throw new Error(err);
+    }
+    // in colorMode 
+    if ( !isMonoColor ) {
+        let savedColor = iconElement.dataset.savedColor;
+        if (typeof savedColor === undefined || savedColor == null || savedColor == '' ) {
+            var err = `setIconColor iconElement:${iconElement} savedColor is undefined`;
+            throw new Error(err);
+        }
+        if ( savedColor != iconColor ) {
+            var err = `setIconColor iconElement:${iconElement} in colorMode given iconColor:${iconColor} when savedColor:${savedColor}`;
+            throw new Error(err);
+        }
     }
     iconElement.src = 'static_content/icons/icons8-' + iconType + '-16-' + iconColor + '.png';
     let bizcardId = iconElement.dataset.bizcardId;
-    console.log(`setIconToColor: iconType:${iconType} iconColor:${iconColor} bizcardId:${bizcardId}`);
 }
 
 export function applyMonoColorToElement(monoColorElement) {
@@ -59,18 +104,24 @@ export function applyMonoColorToElement(monoColorElement) {
             setIconToColor(monoColorElement, monoColor);
         }
     } else {
+        // in colorMode
         // retrieve the saved colors from the dataset
-        let savedColor = monoColorElement.dataset.savedcolor;
+        let savedColor = monoColorElement.dataset.savedColor;
         if( typeof savedColor ==='undefined' || savedColor === null || savedColor === "") {
-            throw new Error(`monoColorElement:${monoColorElement} must have a data-saved-color attribute`);
-        }
-        let savedBackgroundColor = monoColorElement.dataset.savedbackgroundcolor;
-        if( typeof savedBackgroundColor ==='undefined' || savedBackgroundColor === null || savedBackgroundColor === "") {
-            throw new Error(`monoColorElement:${monoColorElement} must have a data-saved-background-color attribute`);
+            var err = `applyMonoColorToElement monoColorElement must have a saved-color data or attribute\n`;
+            err += `applyMonoColorToElement savedColor:[${savedColor}]\n`;
+            err += `applyMonoColorToElement isMonoColor:${isMonoColor}\n`;
+            err += `applyMonoColorToElement monoColorElement.dataset.savedColor:${monoColorElement.dataset.savedColor}\n`;
+            err += `applyMonoColorToElement monoColorElement.getAttribute('saved-color'):${monoColorElement.getAttribute('saved-color')}\n`;
+            err += `applyMonoColorToElement monoColorElement.dataset:${utils.getDatasetAsString(monoColorElement)}\n`;
+            err += `applyMonoColorToElement monoColorElement.attributes:${utils.getAttributesAsString(monoColorElement)}\n`;
+            err += `applyMonoColorToElement monoColorElement.tagName:${monoColorElement.tagName}\n`;
+            err += `applyMonoColorToElement monoColorElement.classList:${monoColorElement.classList}\n`;
+            throw new Error(err);
         }
         // restore the saved colors
         monoColorElement.style.color = savedColor;
-        monoColorElement.style.backgroundColor = savedBackgroundColor;
+        monoColorElement.style.backgroundColor = 'transparent';
         if ( monoColorElement.classList.contains("icon") ) {
             setIconToColor(monoColorElement, savedColor);
         }