cloudflare-apps · exvuma · Apr 13, 2018 · Apr 13, 2018 · Apr 13, 2018 · Apr 18, 2018
diff --git a/local_testing/Readme.md b/local_testing/Readme.md
@@ -0,0 +1,5 @@
+## Local testing
+
+Viewing `ExampleApp/local_testing/test.html` in your browser will allow you to test without using the [App Creator](https://www.cloudflare.com/apps/developer/app-creator  )
+
+* Please modify **`window.INSTALL_OPTIONS`** in `ExampleApp/local_testing/local.js` to edit the default **`INSTALL_OPTIONS`** that will be tested. There should be a default value for every option in `install.json`
diff --git a/local_testing/local.js b/local_testing/local.js
@@ -0,0 +1,43 @@
+window.INSTALL = window.INSTALL || {}
+window.INSTALL_OPTIONS = {
+      // TODO: edit the default testing options to include every option
+      // install.json
+        "location": {
+            "selector": "body",
+            "method": "before"
+          },
+        "message":
+           "<p>Welcome to Cloudflare Apps! This is our example app.</p><p>Download this app every time you want to make a new project.</p>"
+      }
+// Below is declaring the INSTALL.createElement function which is part of the
+// App creator API
+INSTALL.createElement = function(location, element){
+  element = element || document.createElement('div')
+  if (!location){
+    //default to append to the document body if location not given
+    elementMethodSwitch(element, document.body, 'append')
+    return element
+  }
+  var locations = document.querySelectorAll(location.selector)
+  locations.forEach((el) => {
+      el.appendChild(element)
+      el = elementMethodSwitch(element, el, location.method)
+  })
+  return element
+}
+function elementMethodSwitch(el, parent, method){
+  //implements the specified method by adding el to the parent
+  var grandpa = parent.parentElement
+  switch (method){
+    case 'append':
+          return parent.appendChild(el)
+    case 'prepend':
+          return parent.prepend(el)
+    case 'before':
+          return grandpa.insertBefore(el, parent)
+    case 'after':
+          return grandpa.insertBefore(el, parent.nextSibling)
+    case 'replace':
+          return grandpa.replaceChild(el, parent)
+  }
+}
diff --git a/local_testing/test.html b/local_testing/test.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+     <link rel="stylesheet" href="../source/app.css">
+      <script src="local.js"></script>
+     <script src="../source/app.js"></script>
+  </head>
+  <body>
+     <p>Example Body Text </p>
+  </body>
+</html>
diff --git a/source/app.js b/source/app.js
@@ -20,7 +20,6 @@
   window.INSTALL_SCOPE = {
     setOptions: function setOptions (nextOptions) {
       options = nextOptions
-
       updateElement()
     }
   }

diff --git a/source/source/app.js b/source/source/app.js
@@ -0,0 +1,34 @@
+(function () {
+  'use strict'
+
+  if (!window.addEventListener) return // Check for IE9+
+
+  var options = INSTALL_OPTIONS
+  var element
+
+  // updateElement runs every time the options are updated.
+  // Most of your code will end up inside this function.
+  function updateElement () {
+    element = INSTALL.createElement(options.location, element)
+
+    // Set the app attribute to your app's dash-delimited alias.
+    element.setAttribute('app', 'example')
+    element.innerHTML = options.message
+  }
+
+  // INSTALL_SCOPE is an object that is used to handle option changes without refreshing the page.
+  window.INSTALL_SCOPE = {
+    setOptions: function setOptions (nextOptions) {
+      options = nextOptions
+
+      updateElement()
+    }
+  }
+
+  // This code ensures that the app doesn't run before the page is loaded.
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', updateElement)
+  } else {
+    updateElement()
+  }
+}())