Adding Joe's extensions

Author: andreas-optimizely

Extensions/Editor Extensions/Background Image Swapper/README.md

@@ -0,0 +1,12 @@
+# Background Image Swapper
+
+![Screenshot](https://github.com/optimizely/extension-library/blob/master/Extensions/Editor%20Extensions/Background%20Image%20Swapper/screenshot.png)
+
+## Description
+
+Extension to replace a background image as soon as Optimizely loads so as to prevent any chance of flickering using CSS important tags.
+
+## Fields
+
+* Image Selector
+* Image SRC

Extensions/Editor Extensions/Background Image Swapper/config.json

@@ -0,0 +1,28 @@
+{
+  "plugin_type": "widget",
+  "name": "Background Image Swapper",
+  "edit_page_url": "https://www.optimizely.com/homepage/",
+  "form_schema": [
+    {
+      "default_value": ".js-hero",
+      "field_type": "selector",
+      "name": "imageSelector",
+      "label": "Image Selector",
+      "options": null
+    },
+    {
+      "default_value": "https://res.cloudinary.com/dy8i0qezub/image/upload/f_auto,q_65/p13n-homepage/Optimizely-Home.jpg",
+      "field_type": "image",
+      "name": "src",
+      "label": "Image SRC",
+      "options": null
+    }
+  ],
+  "description": "Swaps a background image on the page when Optimizely initially loads to prevent flicker.",
+  "options": {
+    "html": "",
+    "css": "",
+    "apply_js": "function imageSwap() {\n  var selector = extension.imageSelector;\n\tvar rawCSS = \"{background-image: url(\" + extension.src + \" ) !important}\";\n  applyCSS(selector, rawCSS, \"optimizely-extension-\");\n}\n\nfunction applyCSS(selector, rawCSS) {\n  var css = selector + \" \" + rawCSS;\n  var style = document.createElement('style');\n  style.type = 'text/css';\n  style.className = \"optimizely-extension-\" + extension.$instance;\n  if (style.styleSheet){\n    style.styleSheet.cssText = css; \n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n  document.head.appendChild(style);\n}\n\nimageSwap();",
+    "undo_js": "// document.querySelector('.optimizely-extension-' + extension.$instance).remove();"
+  }
+}

Extensions/Editor Extensions/Background Image Swapper/screenshot.png

@@ -0,0 +1,12 @@
+# Text Swapper
+
+![Screenshot](https://github.com/optimizely/extension-library/blob/master/Extensions/Editor%20Extensions/Text%20Swapper/screenshot.png)
+
+## Description
+
+Extension to replace a text element as soon as Optimizely loads so as to prevent any chance of flicker. This is especially useful for testing above the fold on sites that load quickly where an element may be displayed before Optimizely is able to detect it.
+
+## Fields
+
+* CSS Path
+* Text

Extensions/Editor Extensions/Text Swapper/README.md

@@ -0,0 +1,28 @@
+{
+  "plugin_type": "widget",
+  "name": "Text Swapper",
+  "edit_page_url": "https://www.optimizely.com/",
+  "form_schema": [
+    {
+      "default_value": ".optly-header-one",
+      "field_type": "selector",
+      "name": "cssPath",
+      "label": "CSS Path",
+      "options": null
+    },
+    {
+      "default_value": "Hello World",
+      "field_type": "text",
+      "name": "text",
+      "label": "Text",
+      "options": null
+    }
+  ],
+  "description": "Hides and swaps text while mitigating any risk of page flashing",
+  "options": {
+    "html": "",
+    "css": "",
+    "apply_js": "function init() {\n  tempHide();\n  swapText(extension.cssPath, extension.text);\n  showContent();\n}\n\nfunction swapText(cssPath, text) {\n  var selector = document.querySelector(cssPath);\n  if (selector && text) {\n  \tselector.innerHTML = text;\n  }\n}\n\nfunction tempHide(item) {\n\tvar selector = item || \"body\";\n\tvar css = selector + \" {visibility:hidden !important}\";\n\tvar style = document.createElement('style');\n\tstyle.type = 'text/css';\n\tstyle.className = \"optly-hide-\" + extension.$instance;\n\tif (style.styleSheet) {\n\t\tstyle.styleSheet.cssText = css;\n\t} else {\n\t\tstyle.appendChild(document.createTextNode(css));\n\t}\n\tdocument.head.appendChild(style);\n}\n\nfunction showContent() {\n\tvar styleSheet = document.querySelector(\"style.optly-hide-\" + extension.$instance);\n  if (styleSheet) {\n\t\tstyleSheet.remove();\n  }\n}\n\ninit();",
+    "undo_js": "//document.querySelector('#optimizely-extension-' + extension.$instance).remove();"
+  }
+}