From 320c8a16efd486f7896b668a9a7b4a6a10ade429 Mon Sep 17 00:00:00 2001
From: Kevin van Zonneveld <kevin@vanzonneveld.net>
Date: Tue, 17 Nov 2015 15:11:00 +0100
Subject: [PATCH] Getting a sandbox going with the worst possible layout

---
 LICENSE                         |  1 -
 README.md                       |  2 ++
 build/index.html                | 17 +++++++++++++++--
 js/lib/transloadit-js-client.js |  9 +++++++++
 scss/index.scss                 |  6 ++++++
 5 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/LICENSE b/LICENSE
index f3aee8ec2..a26f6fd53 100644
--- a/LICENSE
+++ b/LICENSE
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
diff --git a/README.md b/README.md
index 98dfacec6..c6a94f8c3 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,8 @@ Now to get a sandbox environment set up, type:
 
 ```bash
 npm run preview
+# For instant rebuilds, in a new tab, type:
+npm run watch
 ```
 
 This will `npm run build` the project into `./build`, and then serve that
diff --git a/build/index.html b/build/index.html
index de5b68c2d..54986bd8b 100644
--- a/build/index.html
+++ b/build/index.html
@@ -10,6 +10,16 @@
     <h1>
       Loading..
     </h1>
+    <p>
+      With this file we can easily test the built js client locally (via <code>npm run preview</code>)
+      and online.
+    </p>
+
+    <div id="upload-target">
+    </div>
+
+
+
 
     <footer>
       <hr />
@@ -21,10 +31,13 @@
   </body>
   <script src="./transloadit-js-client.js"></script>
   <script>
-    var branch  = location.pathname.split('/')[2];
+    var tl = Transloadit("#upload-target");
+  </script>
+  <script>
+    var branch  = location.pathname.split('/')[2] || 'local-unknown';
     var elTitle = document.querySelector('title');
     var elH1    = document.querySelector('h1');
-    var title   = 'You are reviewing the latest push of branch: ' + branch;
+    var title   = 'You are reviewing branch: ' + branch;
     elTitle.innerHTML = title;
     elH1.innerHTML    = title;
   </script>
diff --git a/js/lib/transloadit-js-client.js b/js/lib/transloadit-js-client.js
index e69de29bb..0c70de728 100644
--- a/js/lib/transloadit-js-client.js
+++ b/js/lib/transloadit-js-client.js
@@ -0,0 +1,9 @@
+window.Transloadit = function (selector) {
+  var el    = document.querySelector(selector);
+  var inner = ''
+  inner += '<div class="transloadit-js-client">';
+  inner += 'Hello world :)';
+  inner += 'I am the new Transloadit js client, and as you can see, I need to be improved badly :)';
+  inner += '</div>';
+  el.innerHTML = inner;
+};
diff --git a/scss/index.scss b/scss/index.scss
index e69de29bb..2cf4913ab 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -0,0 +1,6 @@
+.transloadit-js-client {
+  font-family : "Comic Sans MS";
+  color       : purple;
+  border      : 1px dashed pink;
+  font-size   : 32px;
+}