WIP

.gitignore

@@ -9,4 +9,5 @@ reports/
 .project
 .pydevproject
 django_pagetree.egg-info
-docs/_build/
+docs/_build/
+node_modules

.jscsrc

@@ -0,0 +1,5 @@
+{
+    "preset": "google",
+    "validateIndentation": 4,
+    "disallowTrailingWhitespace": true
+}

.travis.yml

@@ -15,6 +15,8 @@ install:
 
 # command to run tests
 script:
+  - make jshint
+  - make jscs
   - flake8 pagetree runtests.py --max-complexity=8
   - python runtests.py
   - coverage run --source=pagetree runtests.py

CHANGES.txt

@@ -1,3 +1,10 @@
+1.2.0
+===================
+* Added jshint/jscs checks
+* Moved pagetree's js files from `static/pagetree/js` to
+  `static/pagetree/js/src`, separating from JS libraries which
+  we don't run checks on.
+
 1.1.15 (2016-05-25)
 ===================
 * Updated jQuery to 1.12.3

Makefile

@@ -0,0 +1,18 @@
+JS_FILES=pagetree/static/pagetree/js/src
+
+node_modules/jshint/bin/jshint:
+	npm install jshint@~2.9.2 --prefix .
+
+node_modules/jscs/bin/jscs:
+	npm install jscs@~3.0.3 --prefix .
+
+jshint: node_modules/jshint/bin/jshint
+	jshint $(JS_FILES)
+
+jscs: node_modules/jscs/bin/jscs
+	jscs $(JS_FILES)
+
+clean:
+	rm -rf node_modules
+
+.PHONY: jshint jscs clean

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/src/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,49 @@
+.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;
+    -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/src/clone-loading.js

@@ -0,0 +1,9 @@
+$(document).ready(function() {
+    var $container = $('.pagetree-clone-form');
+    var $button = $container.find('button[type="submit"]');
+    $button.click(function() {
+        console.log('click');
+        $container.find('.pagetree-loading').css('visibility', 'visible');
+        return false;
+    });
+});

pagetree/static/pagetree/js/pagetree-admin.js → pagetree/static/pagetree/js/src/pagetree-admin.js

@@ -5,10 +5,10 @@ pagetree.getCsrfToken = function() {
 pagetree.saveOrderOfChildren = function(url) {
     var me = this;
     var worktodo = 0;
-    pagetree.$("#children-order-list li").each(function(index, element) {
-       worktodo = 1;
-       var id = $(element).attr('id').split("-")[1];
-       url += "section_id_" + index + "=" + id + ";";
+    pagetree.$('#children-order-list li').each(function(index, element) {
+        worktodo = 1;
+        var id = $(element).attr('id').split('-')[1];
+        url += 'section_id_' + index + '=' + id + ';';
     });
     if (worktodo == 1) {
         pagetree.$.ajax({
@@ -24,13 +24,12 @@ pagetree.saveOrderOfChildren = function(url) {
 pagetree.saveOrderOfPageBlocks = function(url) {
     var me = this;
     var worktodo = 0;
-    pagetree.$("#edit-blocks-tab>div.block-dragger").each(
-        function(index, element
-    ) {
-      worktodo = 1;
-      var id = $(element).attr('id').split("-")[1];
-      url += "pageblock_id_" + index + "=" + id + ";";
-    });
+    pagetree.$('#edit-blocks-tab>div.block-dragger').each(
+        function(index, element) {
+            worktodo = 1;
+            var id = $(element).attr('id').split('-')[1];
+            url += 'pageblock_id_' + index + '=' + id + ';';
+        });
     if (worktodo == 1) {
         /* only bother submitting if there are elements to be sorted */
         pagetree.$.ajax({

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 pagetree-clone-form">
             {% 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/edit_page.html

@@ -41,7 +41,7 @@
     window.define = _pagetree_define_backup;
 </script>
 
-<script src="{% static 'pagetree/js/pagetree-admin.js' %}"></script>
+<script src="{% static 'pagetree/js/src/pagetree-admin.js' %}"></script>
 <script>
 (function($) {
     // handle hash tag navigation

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>