Merge pull request #3 from mcclatchy/zephr-updates

Updates zephr to allow for subscriber and dma data

Author: pilgreen

README.md

@@ -86,5 +86,7 @@ This object asks Zephr for a dynamic payload and passes any Yozons configuration
 | Property | Value |
 | --- | --- |
 | feature | the slug of the feature in Zephr |
+| dataset[].type | "subscriber" and "dma" wait for promise resolution, "config" makes a generic Yozons request | 
 | dataset[].name | the custom input key sent to Zephr |
 | dataset[].config | the Yozons config value sent to Zephr |
+| dataset[].value | the generic value sent to Zephr if no type is declared | 

config/story.json

@@ -38,8 +38,8 @@
         "feature": "zone-taboola-recommendations",
         "dataset": [
           {
-            "name": "dma",
-            "value": true
+            "type": "dma",
+            "name": "dma"
           }
         ]
       },

demo/locker.js

@@ -25,9 +25,11 @@ const locker = {
       case "zone.zeeto":
         return true;
       case "zone.moneycom":
-        return true;
+        return false;
       case "zone.communityEvents":
         return true;
+      case "zone.taboolaRecommendations":
+        return true;
       default: 
         return undefined;
     }
@@ -36,15 +38,15 @@ const locker = {
   // user info
   user: {
     isSubscriber() {
-      return true;
+      return false;
     },
 
     isLoggedIn() {
       return false;
     },
 
     isInDMA() {
-      return Promise.resolve(true);
+      return Promise.resolve(false);
     }
   },
 

lib/config.js

@@ -15,7 +15,7 @@ export function load(url) {
     const res = await fetch(url);
     const data = await res.json();
     const subscriber = locker.user.isSubscriber();
-    const dma = await locker.user.isInDMA();
+    const dma = subscriber ? true : await locker.user.isInDMA();
 
     // Load WPS zones
     if(data.base) {
@@ -62,69 +62,66 @@ export function load(url) {
 
       // Render 
       if(show) {
-        renderZone(config)
-      }
-    });
-
-    resolve();
-  });
-}
+        const zone = new Zone(config.id);
+
+        // Zephr connection
+        if(config.zephr) {
+          const { feature, dataset } = config.zephr;
+
+          if(dataset) {
+            dataset.forEach(d => {
+              const {type, name, value} = d;
+
+              switch(type) {
+                case "subscriber":
+                  zone.dataset[name] = subscriber;
+                  break;
+                case "dma":
+                  zone.dataset[name] = dma;
+                  break;
+                case "config":
+                  zone.dataset[name] = locker.getConfig(value);
+                  break;
+                default:
+                  zone.dataset[name] = value;
+              }
+            });
+          }
 
-/**
- * Renders a zone by config
- * @param config {object} a zone config object
- */
+          zone.zephr(feature);
+        }
 
-function renderZone(config) {
-  const zone = new Zone(config.id);
+        // Add classes
+        if(config.classList) {
+          zone.classList.add(...config.classList)
+        }
 
-  // Zephr connection
-  if(config.zephr) {
-    const { feature, dataset } = config.zephr;
+        // Add type
+        if(config.type) {
+          zone.dataset.type = config.type;
+        }
 
-    if(dataset) {
-      dataset.forEach(d => {
-        const {type, name, value} = d;
+        // Placement
+        if(config.placement) {
+          const {type, value} = config.placement;
 
-        switch(type) {
-          case "config":
-            zone.dataset[name] = locker.getConfig(value);
-            break;
-          default:
-            zone.dataset[name] = value;
+          switch(type) {
+            case "query":
+              zone.vip = document.querySelector(value);
+              break
+            case "before":
+              zone.before(value);
+              break;
+            case "after":
+              zone.after(value);
+              break;
+            default:
+              zone.vip = value;
+          }
         }
-      });
-    }
+      }
+    });
 
-    zone.zephr(feature);
-  }
-
-  // Add classes
-  if(config.classList) {
-    zone.classList.add(...config.classList)
-  }
-
-  // Add type
-  if(config.type) {
-    zone.dataset.type = config.type;
-  }
-
-  // Placement
-  if(config.placement) {
-    const {type, value} = config.placement;
-
-    switch(type) {
-      case "query":
-        zone.vip = document.querySelector(value);
-        break
-      case "before":
-        zone.before(value);
-        break;
-      case "after":
-        zone.after(value);
-        break;
-      default:
-        zone.vip = value;
-    }
-  }
+    resolve();
+  });
 }

lib/zones.js

@@ -370,91 +370,6 @@ export function render() {
   window.dispatchEvent(new Event("zones-loaded"));
 }
 
-/*
- * Renders a zone config file
- * @param url {string} the url to the file
- */
-
-export async function loadConfig(url) {
-  const res = await fetch(url);
-  const config = await res.json();
-  const subscriber = locker.user.isSubscriber();
-  const dma = await locker.user.isInDMA();
-
-  config.zones.forEach(config => {
-    const {id, filters, zephr, placement, classList} = config;
-
-    // Filter check
-    const show = filters.every(f => {
-      switch(f.type) {
-        case "subscriber":
-          return subscriber === f.value;
-        case "dma":
-          return dma === f.value;
-        case "config":
-          let prop = locker.getConfig(f.name);
-
-          if(typeof f.value == "boolean") {
-            return prop === f.value;
-          } else {
-            let rx = new RegExp(f.value);
-            return rx.test(prop);
-          }
-      }
-    });
-
-    // Render 
-    if(show) {
-      const zone = get(id);
-
-      // Add classes
-      if(classList) {
-        zone.classList.add(...classList)
-      }
-
-      // Zephr connection
-      if(zephr) {
-        const dataset = zephr.dataset || [];
-        
-        dataset.forEach(d => {
-          const {type, name, value} = d;
-
-          switch(type) {
-            case "config":
-              zone.dataset[name] = locker.getConfig(value);
-              break;
-            default:
-              zone.dataset[name] = value;
-          }
-        });
-
-        zone.zephr(zephr.feature);
-      }
-
-      // Placement
-      if(placement) {
-        let {type, value} = placement;
-
-        switch(type) {
-          case "query":
-            zone.vip = document.querySelector(value);
-            break
-          case "before":
-            zone.before(value);
-            break;
-          case "after":
-            zone.after(value);
-            break;
-          default:
-            zone.vip = value;
-        }
-      }
-    }
-  });
-
-  return config;
-}
-
 /*
  * IntersectionObserver callback
  */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcclatchy/zones",
-  "version": "1.0.23",
+  "version": "1.1.0",
   "description": "A Yozons extension to dynamically distribute or re-distribute zones on the websites.",
   "main": "index.js",
   "directories": {