WIP

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')

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;
+}

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;
+    });
+});

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>

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>