Hat hue rotation based on element's attribute/text, add exclusion selectors

layouts/_default/baseof.html

@@ -46,10 +46,20 @@
   <!-- Christmas -->
   <script src="/js/christmas/Christmas.js"></script>
   <script>
-    Christmas.init(
+      Christmas.init(
         "https://jmonkeyengine.org/js/christmas/",
-        ["figure.githubUser img", 'img.avatar',"#showcase button"]
-    );
+        ["figure.githubUser img", 'img.avatar', "#showcase button"],
+        [
+          {
+            type: "attribute",
+            value: "title"
+          },
+          {
+            type: "text"
+          }
+        ],
+        ["header img.avatar"]
+      );
   </script>
   <!-- /Christmas -->
 

static/js/christmas/Christmas.js

@@ -1,28 +1,36 @@
 class Christmas {
-    static init(root,hatSelectors){
-        this.root= root;
-        this.hatSelectors=hatSelectors;
-
+    static init(root, hatSelectors, attributesForRng, exclusionSelectors) {
+        this.root = root;
+        this.hatSelectors = hatSelectors;
+        this.attributesForRng = attributesForRng;
+        this.exclusionSelectors = exclusionSelectors;
         document.addEventListener("DOMContentLoaded", () => {
-            if( this.isChristmas()){
-                this.loadSnow();
-                const hatLoadInt =()=>{
-                    this.loadHats(this.hatSelectors);
-                };
-                setInterval(function(){
-                    hatLoadInt();
-                }, 2000);
-                hatLoadInt();
+            if (this.isChristmas()||window.location.hash=="#test-christmas25550") {
+                this.loadNow();
             }
         });
     }
-    static isChristmas(){
+
+    static loadNow() {
+        this.loadSnow();
+        const hatLoadInt = () => {
+            this.loadHats(this.hatSelectors, this.attributesForRng, this.exclusionSelectors);
+        };
+        setInterval(function () {
+            hatLoadInt();
+        }, 2000);
+        hatLoadInt();
+
+    }
+
+    static isChristmas() {
         const date = new Date();
-        if ((date.getMonth()+1) != 12) return false;
+        if ((date.getMonth() + 1) != 12) return false;
         if (date.getDate() < 6) return false;
         return true;
     }
-    static loadSnow(){
+
+    static loadSnow() {
         console.log("Load snow...");
         const snowScript = document.createElement("script");
         snowScript.src = this.root + "snow.js"
@@ -39,60 +47,91 @@ class Christmas {
             });
         }
     }
-    static getHats(){
-        return  [
+    static getHats() {
+        return [
             this.root + 'hats/hat1.png'
         ];
     }
-    static loadHats(selectors){
-        
-            const hats =this.getHats();
+    static loadHats(selectors, attributesForRng, exclusionSelectors) {
+
+        const hats = this.getHats();
+
+        selectors.forEach(selector => {
+            document.querySelectorAll(selector).forEach(avatar => {
+                if (avatar.hasAttribute("christmas25550-hasHat")) return;
 
-            selectors.forEach(selector => {
-                document.querySelectorAll(selector).forEach(avatar => {
-                    if (avatar.getAttribute("christmas25550-hasHat")) return;
+                if (exclusionSelectors) {
+                    for (let i=0;i< exclusionSelectors.length;i++) {
+                        const exclusionSelector = exclusionSelectors[i];
+                        console.log("Test exclusion selector",exclusionSelector);
+                        if (avatar.matches(exclusionSelector)) {
+                            return;
+                        }
+                    }
+                }
 
-                    const parent = avatar.parentNode;
+                let hueRotation = 0;
+                if (attributesForRng && attributesForRng.length > 0) {
+                    let seed = "";
+                    for (let i=0;i< attributesForRng.length;i++) {
+                        const r = attributesForRng[i];
+                        if (r.type == "attribute") {
+                            if (avatar.hasAttribute(r.value)) {
+                                seed += avatar.getAttribute(r.value);
+                                break;
+                            }
+                        } else if (r.type == "text") {
+                            seed += avatar.innerText;
+                            break;
+                        }
+                    }
+                    seed = seed.trim();
+                    if (seed != "") {
+                        hueRotation = (seed.charCodeAt(0) - 'A'.charCodeAt(0)) / 'z'.charCodeAt(0);
+                        if (hueRotation < 0) hueRotation = 0;
+                        if (hueRotation > 1) hueRotation = 1;
+                        hueRotation = hueRotation * 2. - 1.;
+                    }
+                }
 
-           
-                    const avatarBound = avatar.getBoundingClientRect();
-                    if (avatarBound.width == 0 || avatarBound.height == 0) return;
-                    const parentBound = parent.getBoundingClientRect();
+                const parent = avatar.parentNode;
+                const avatarBound = avatar.getBoundingClientRect();
+                if (avatarBound.width == 0 || avatarBound.height == 0) return;
+                const parentBound = parent.getBoundingClientRect();
 
-                    const parentPosMode = window.getComputedStyle(parent).position;
-                    if (parentPosMode != "absolute" && parentPosMode != "fixed" && parentPosMode != "relative") parent.style.position = "relative";
+                const parentPosMode = window.getComputedStyle(parent).position;
+                if (parentPosMode != "absolute" && parentPosMode != "fixed" && parentPosMode != "relative") parent.style.position = "relative";
 
 
-                    console.log("Add hat to", avatar);
+                console.log("Add hat to", avatar);
 
-                    const hat = document.createElement("div");
-                    hat.classList.add("christmas25550-hat");
+                const hat = document.createElement("div");
+                hat.classList.add("christmas25550-hat");
 
-                    const hatImg = hats[Math.floor(Math.random() * hats.length)];
-                    hat.style.pointerEvents = "none";
-                    hat.style.backgroundImage = "url('" + hatImg + "')";
-                    hat.style.backgroundPosition = "left bottom";
-                    hat.style.filter = "hue-rotate(" + (Math.random() * 2. - 1.) + "turn)";
-                    hat.style.transform = "rotate(" + Math.floor((Math.random() * 2. - 1.) * 4) + "deg)";
-                    hat.style.backgroundRepeat = "no-repeat";
-                    hat.style.backgroundSize = "contain";
-                    hat.style.display = "block";
-                    hat.style.position = "absolute";
-                    const avatarWidth=Math.min(avatarBound.width ,124);
-                    const avatarHeight=Math.min(avatarBound.height ,124);
-                    hat.style.width =avatarWidth+ "px";
-                    hat.style.height = avatarHeight+ "px";
-                    hat.style.zIndex = "140";
+                const hatImg = hats[Math.floor(Math.random() * hats.length)];
+                hat.style.pointerEvents = "none";
+                hat.style.backgroundImage = "url('" + hatImg + "')";
+                hat.style.backgroundPosition = "left bottom";
+                hat.style.filter = "hue-rotate(" + hueRotation + "turn)";
+                hat.style.backgroundRepeat = "no-repeat";
+                hat.style.backgroundSize = "contain";
+                hat.style.display = "block";
+                hat.style.position = "absolute";
+                const avatarWidth = Math.min(avatarBound.width, 124);
+                const avatarHeight = Math.min(avatarBound.height, 124);
+                hat.style.width = avatarWidth + "px";
+                hat.style.height = avatarHeight + "px";
+                hat.style.zIndex = "140";
 
-                    hat.style.left = (parentBound.left - avatarBound.left- Math.min(avatarHeight,avatarWidth) * 0.3) + "px";
-                    // hat.style.left = (avatarBound.left - parentBound.left - avatarBound.width * 0.3) + "px";
-                    hat.style.top = (avatarBound.top - parentBound.top - avatarHeight * 0.76) + "px";
+                hat.style.left = (parentBound.left - avatarBound.left - Math.min(avatarHeight, avatarWidth) * 0.3) + "px";
+                // hat.style.left = (avatarBound.left - parentBound.left - avatarBound.width * 0.3) + "px";
+                hat.style.top = (avatarBound.top - parentBound.top - avatarHeight * 0.76) + "px";
 
-                    parent.appendChild(hat);
-                    avatar.setAttribute("christmas25550-hasHat", "true");
+                parent.appendChild(hat);
+                avatar.setAttribute("christmas25550-hasHat", "true");
 
 
-                });
             });
-   }
+        });
+    }
 }