Merge pull request #238 from MPIB/refactor-lagerregal-js

Refactor: reduce amount of inline javascript
MPIB · Oct 9, 2018 · 3344248 · 3344248
2 parents 4f55d1b + 060446b
commit 3344248
Show file tree

Hide file tree

Showing 25 changed files with 189 additions and 294 deletions.
diff --git a/Lagerregal/urls.py b/Lagerregal/urls.py
@@ -3,6 +3,7 @@
 from django.conf.urls import include, url
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.views import logout
+from django.views.i18n import JavaScriptCatalog
 from django.views.static import serve
 from devices.views import *
 from network.views import *
@@ -219,6 +220,7 @@
 
     url(r'^admin/', admin.site.urls),
     url(r'^i18n/', include('django.conf.urls.i18n')),
+    url(r'^jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
 
     url(r'^oauth2/', include('oauth2_provider.urls', namespace='oauth2_provider')),
 

diff --git a/devices/templatetags/devicetags.py b/devices/templatetags/devicetags.py
@@ -4,6 +4,7 @@
 import re
 
 from django.template import Library
+from django.urls import reverse
 from django.utils.html import mark_safe, format_html
 from django.forms import CheckboxInput
 
@@ -129,3 +130,10 @@ def as_nested_list(factvalue):
 @register.filter
 def splitstr(arg1, arg2):
     return arg1.split(arg2)
+
+
+@register.inclusion_tag('snippets/deletebutton.html')
+def deletebutton(viewname, *args):
+    return {
+        'url': reverse(viewname, args=args)
+    }
diff --git a/locale/de/LC_MESSAGES/django.po b/locale/de/LC_MESSAGES/django.po
@@ -1170,12 +1170,6 @@ msgstr "Einstellungen"
 msgid "Admin"
 msgstr "Admin"
 
-#: templates/base.html:264
-msgid ""
-"Hi! I am Clippy, your Lagerregal assistant. Would you like some assistance "
-"totday?"
-msgstr ""
-
 #: templates/devicegroups/devicegroup_detail.html:17
 #: templates/devices/building_detail.html:25
 #: templates/devices/manufacturer_detail.html:24

diff --git a/locale/de/LC_MESSAGES/djangojs.po b/locale/de/LC_MESSAGES/djangojs.po
@@ -0,0 +1,25 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the PACKAGE package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: PACKAGE VERSION\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-08-08 15:32+0200\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <[email protected]>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: static/js/lagerregal.js:50
+msgid ""
+"Hi! I am Clippy, your Lagerregal assistant. Would you like some assistance "
+"totday?"
+msgstr ""
diff --git a/locale/en/LC_MESSAGES/django.po b/locale/en/LC_MESSAGES/django.po
@@ -1120,12 +1120,6 @@ msgstr ""
 msgid "Admin"
 msgstr ""
 
-#: templates/base.html:238
-msgid ""
-"Hi! I am Clippy, your Lagerregal assistant. Would you like some assistance "
-"totday?"
-msgstr ""
-
 #: templates/devicegroups/devicegroup_detail.html:17
 #: templates/devices/building_detail.html:25
 #: templates/devices/manufacturer_detail.html:24

diff --git a/locale/en/LC_MESSAGES/djangojs.po b/locale/en/LC_MESSAGES/djangojs.po
@@ -0,0 +1,24 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the PACKAGE package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: PACKAGE VERSION\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-08-08 15:32+0200\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <[email protected]>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: static/js/lagerregal.js:50
+msgid ""
+"Hi! I am Clippy, your Lagerregal assistant. Would you like some assistance "
+"totday?"
+msgstr ""
diff --git a/static/js/lagerregal.js b/static/js/lagerregal.js
@@ -0,0 +1,62 @@
+(function() {
+    $(document).ajaxSend(function (event, xhr, settings) {
+        function getCookie(name) {
+            var cookieValue = null;
+            if (document.cookie && document.cookie != '') {
+                var cookies = document.cookie.split(';');
+                for (var i = 0; i < cookies.length; i++) {
+                    var cookie = jQuery.trim(cookies[i]);
+                    // Does this cookie string begin with the name we want?
+                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                        break;
+                    }
+                }
+            }
+            return cookieValue;
+        }
+
+        function sameOrigin(url) {
+            // url could be relative or scheme relative or absolute
+            var host = document.location.host; // host + port
+            var protocol = document.location.protocol;
+            var sr_origin = '//' + host;
+            var origin = protocol + sr_origin;
+            // Allow absolute or scheme relative URLs to same origin
+            return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
+                    (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
+                // or any other URL that isn't scheme relative or absolute i.e relative.
+                    !(/^(\/\/|http:|https:).*/.test(url));
+        }
+
+        function safeMethod(method) {
+            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+        }
+
+        if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
+            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
+        }
+    });
+
+    var helper;
+    $(document).ready(function() {
+        $("#id_searchname").focusin( function() {
+            window.setTimeout( function() {
+                if ($("#id_searchname").is(":focus")) {
+                    if (helper == undefined) {
+                        clippy.load('Clippy', function (agent) {
+                            helper = agent;
+                            helper.show();
+                            helper.speak(django.gettext("Hi! I am Clippy, your Lagerregal assistant. Would you like some assistance totday?"));
+                        });
+                    }
+                } else {
+                    helper.animate();
+                }
+            }, 60000 );
+        });
+
+        $('[data-timeago]').timeago();
+        $('[data-toggle="popover"]').popover();
+    });
+})();
diff --git a/templates/500.html b/templates/500.html
@@ -72,8 +72,7 @@ <h4>{% trans "I regret to inform you, that our trained monkeys made a mistake wh
     </div>
 </div>
 <script src="{% static "js/jquery.min.js"></script>
-    <script src="
-{% static "js/bootstrap.min.js"></script>
+<script src="{% static "js/bootstrap.min.js"></script>
 </body>
 
 </html>
diff --git a/templates/base.html b/templates/base.html
@@ -226,66 +226,11 @@ <h1 style="font-size:1.9em">
 <script src="{% static "js/clippy.min.js" %} "></script>
 
 {% block htmlend %}{% endblock %}
-<script>
-    $(document).ajaxSend(function (event, xhr, settings) {
-        function getCookie(name) {
-            var cookieValue = null;
-            if (document.cookie && document.cookie != '') {
-                var cookies = document.cookie.split(';');
-                for (var i = 0; i < cookies.length; i++) {
-                    var cookie = jQuery.trim(cookies[i]);
-                    // Does this cookie string begin with the name we want?
-                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
-                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                        break;
-                    }
-                }
-            }
-            return cookieValue;
-        }
-
-        function sameOrigin(url) {
-            // url could be relative or scheme relative or absolute
-            var host = document.location.host; // host + port
-            var protocol = document.location.protocol;
-            var sr_origin = '//' + host;
-            var origin = protocol + sr_origin;
-            // Allow absolute or scheme relative URLs to same origin
-            return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
-                    (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
-                // or any other URL that isn't scheme relative or absolute i.e relative.
-                    !(/^(\/\/|http:|https:).*/.test(url));
-        }
 
-        function safeMethod(method) {
-            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
-        }
-
-        if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
-            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
-        }
-    });
-
-    var helper;
-    $(document).ready(function() {
-        $("#id_searchname").focusin( function() {
-            window.setTimeout( function() {
-                if ($("#id_searchname").is(":focus")) {
-                    if (helper == undefined) {
-                        clippy.load('Clippy', function (agent) {
-                            helper = agent;
-                            helper.show();
-                            helper.speak("{% trans "Hi! I am Clippy, your Lagerregal assistant. Would you like some assistance totday?" %}");
-                        });
-                    }
-                } else {
-                    helper.animate();
-                }
-            }, 60000 );
-        });
-
-    });
+<script src="{% url 'javascript-catalog' %}"></script>
+<script src="{% static "js/lagerregal.js" %} "></script>
 
+<script>
     {% block scriptend %}{% endblock %}
 
     {% if messages %}

diff --git a/templates/devicegroups/devicegroup_detail.html b/templates/devicegroups/devicegroup_detail.html
@@ -5,8 +5,7 @@
 
 {% block pullright %}
     {% if perms.devicegroups.delete_devicegroup %}
-        <a href="#" id="deletebutton" data-toggle="modal" class="btn btn-danger btn-sm pull-right"
-           style="margin-left:10px"><i class="fa fa-trash-o" style="margin-right:7px"></i>{% trans "Delete" %}</a>
+        {% deletebutton "devicegroup-delete" object.id %}
     {% endif %}
     {% if perms.devicegroups.change_devicegroup %}
         <a href="{{ object.get_edit_url }}" class="btn btn-primary btn-sm pull-right" style="margin-left:10px">
@@ -56,17 +55,3 @@ <h4>Devices</h4>
         {% include "snippets/modals/deviceprintDymoModal.html" with modalname="printDymoModal" label_path=LABEL_TEMPLATES.devicegroup.0 %}
     {% endif %}
 {% endblock %}
-
-{% block scriptend %}
-    {% if perms.devicegroups.delete_devicegroup %}
-        $("#deletebutton").popover({
-        html: 'true',
-        placement: "bottom",
-        title : '<span class="text-info" style="margin-right:10px"><strong>{% trans "are you sure?" %}</strong></span>',
-        content :"<form action='{% url "devicegroup-delete" object.id %}' method='post' class='form-horizontal'>{% csrf_token %}"+
-            "<button type='button' class='btn btn-default' onclick='$(&quot;#deletebutton&quot;).popover(&quot;hide&quot;);'>{% trans "No" %}</button>"+
-            "<input type='submit' value='{% trans "Yes" %}' class='btn btn-danger pull-right'/>"+
-            "</form>"
-        })
-    {% endif %}
-{% endblock %}
diff --git a/templates/devices/building_detail.html b/templates/devices/building_detail.html
@@ -9,8 +9,7 @@
 
 {% block pullright %}
     {% if perms.devices.delete_building %}
-        <a href="#" id="deletebutton" data-toggle="popover" class="btn btn-danger btn-sm pull-right"
-           style="margin-left:10px"><i class="fa fa-trash-o" style="margin-right:7px"></i>{% trans "Delete" %}</a>
+        {% deletebutton "building-delete" object.id %}
     {% endif %}
     {% if "building" in LABEL_TEMPLATES %}
         <a href="#" class="btn btn-primary pull-right btn-sm" style="margin-left:10px" data-target="#printDymoModal"
@@ -93,18 +92,4 @@ <h4>{% trans "Devices" %}</h4>
     {% if "building" in LABEL_TEMPLATES %}
         {% include "snippets/modals/deviceprintDymoModal.html" with modalname="printDymoModal" label_path=LABEL_TEMPLATES.building.0 %}
     {% endif %}
-{% endblock %}
-
-{% block scriptend %}
-    {% if perms.devices.delete_building %}
-        $("#deletebutton").popover({
-        html: 'true',
-        placement: "bottom",
-        title : '<span class="text-info" style="margin-right:10px"><strong>{% trans "are you sure?" %}</strong></span>',
-        content :"<form action='{% url "building-delete" object.id %}' method='post' class='form-horizontal'>{% csrf_token %}"+
-            "<button type='button' class='btn btn-default' onclick='$(&quot;#deletebutton&quot;).popover(&quot;hide&quot;);'>{% trans "No" %}</button>"+
-            "<input type='submit' value='{% trans "Yes" %}' class='btn btn-danger pull-right'/>"+
-            "</form>"
-        })
-    {% endif %}
 {% endblock %}