From a0b857fe1bdd6ab818735d0d18ceb6590343999e Mon Sep 17 00:00:00 2001
From: Nik Nyby <nnyby@columbia.edu>
Date: Wed, 25 May 2016 13:40:01 -0400
Subject: [PATCH] WIP

---
 pagetree/forms.py                             |  6 +++
 pagetree/static/pagetree/css/loading.css      | 50 +++++++++++++++++++
 pagetree/static/pagetree/js/clone-loading.js  |  9 ++++
 .../templates/pagetree/clone_hierarchy.html   |  9 ++--
 pagetree/templates/pagetree/loading.html      |  4 ++
 5 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 pagetree/static/pagetree/css/loading.css
 create mode 100644 pagetree/static/pagetree/js/clone-loading.js
 create mode 100644 pagetree/templates/pagetree/loading.html

diff --git a/pagetree/forms.py b/pagetree/forms.py
index 740e998..e44519b 100644
--- a/pagetree/forms.py
+++ b/pagetree/forms.py
@@ -10,6 +10,12 @@ class Meta:
         model = Hierarchy
         fields = ['name', 'base_url']
 
+    class Media:
+        css = {
+            'all': ('pagetree/css/loading.css',)
+        }
+        js = ('pagetree/js/clone-loading.js',)
+
     def clean(self):
         cleaned_data = super(CloneHierarchyForm, self).clean()
         name = cleaned_data.get('name')
diff --git a/pagetree/static/pagetree/css/loading.css b/pagetree/static/pagetree/css/loading.css
new file mode 100644
index 0000000..321ec29
--- /dev/null
+++ b/pagetree/static/pagetree/css/loading.css
@@ -0,0 +1,50 @@
+.pagetree-loading {
+    visibility: hidden;
+    display: inline;
+    margin-left: 10px;
+}
+
+.pagetree-loading-spinner {
+    display: inline-block;
+    font-size: 10px;
+    border-top: 0.2em solid rgba(255, 255, 255, 0);
+    border-right: 0.2em solid rgba(255, 255, 255, 0);
+    border-bottom: 0.2em solid rgba(255, 255, 255, 0);
+    /*border-left: 0.2em solid #2e6da4;*/
+    border-left: 0.2em solid #fff;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation: load8 0.9s infinite linear;
+    animation: load8 0.9s infinite linear;
+}
+.pagetree-loading-spinner,
+.pagetree-loading-spinner:after {
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+}
+@-webkit-keyframes load8 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes load8 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+.pagetree-loading-text {
+    margin-left: 5px;
+}
\ No newline at end of file
diff --git a/pagetree/static/pagetree/js/clone-loading.js b/pagetree/static/pagetree/js/clone-loading.js
new file mode 100644
index 0000000..75ffa4b
--- /dev/null
+++ b/pagetree/static/pagetree/js/clone-loading.js
@@ -0,0 +1,9 @@
+$(document).ready(function() {
+    var $button = $('button[type="submit"]');
+    $button.click(function() {
+        console.log('click');
+        //$('.pagetree-loading').css('visibility', 'visible');
+        $button.append('<span class="pagetree-loading-spinner"></span>');
+        return false;
+    });
+});
diff --git a/pagetree/templates/pagetree/clone_hierarchy.html b/pagetree/templates/pagetree/clone_hierarchy.html
index 58862e7..5f1611a 100644
--- a/pagetree/templates/pagetree/clone_hierarchy.html
+++ b/pagetree/templates/pagetree/clone_hierarchy.html
@@ -16,13 +16,16 @@
 {% endblock %}
 
 {% block content %}
+    {{ form.media }}
+
     <h1>Clone {{ hierarchy.name }}</h1>
     <div id="clone-hierarchy-tab" class="tab-pane">
-       <form action="{% url 'clone-hierarchy' hierarchy.id %}"
-        method="post" class="form-inline">
+        <form action="{% url 'clone-hierarchy' hierarchy.id %}"
+              method="post" class="form-inline">
             {% csrf_token %}
             {% bootstrap_form form layout='inline' %}
-            <input type="submit" value="clone" class="btn btn-primary" />
+            <button class="btn btn-primary" type="submit">clone</button>
+            {% include 'pagetree/loading.html' %}
             <p class="help-block">
                 The Base URL field will be used as part of the clone's
                 URL. This should be something like: <code>my-clone</code>
diff --git a/pagetree/templates/pagetree/loading.html b/pagetree/templates/pagetree/loading.html
new file mode 100644
index 0000000..bc8f284
--- /dev/null
+++ b/pagetree/templates/pagetree/loading.html
@@ -0,0 +1,4 @@
+<div class="pagetree-loading">
+    <span class="pagetree-loading-spinner"></span>
+    <span class="pagetree-loading-text">Loading...</span>
+</div>