Summary: Move select2 field handling to a separate .js file, currently

OleLaursen · OleLaursen · commit 9d71ef317964 · 2015-02-05T13:48:27.000Z
we only include the select2 things on pages with forms that need it
anyway, and this makes it easier to use it in the Secretariat code
 - Legacy-Id: 8986
diff --git a/ietf/secr/templates/drafts/edit.html b/ietf/secr/templates/drafts/edit.html
@@ -11,54 +11,7 @@
   <link rel="stylesheet" href="/css/lib/select2.css">
   <link rel="stylesheet" href="/css/lib/select2-bootstrap.css">
   <script src="/js/lib/select2-3.5.2.min.js"></script>
-  <script>
-// this is copy-pasted from ietf.js, we should include that here too instead of this
-$(document).ready(function () {
-    $(".select2-field").each(function () {
-        var e = $(this);
-        if (e.data("ajax-url")) {
-            var maxEntries = e.data("max-entries");
-            var multiple = maxEntries != 1;
-            var prefetched = e.data("pre");
-            e.select2({
-                multiple: multiple,
-                minimumInputLength: 2,
-                width: "off",
-                allowClear: true,
-                maximumSelectionSize: maxEntries,
-                ajax: {
-                    url: e.data("ajax-url"),
-                    dataType: "json",
-                    quietMillis: 250,
-                    data: function (term, page) {
-                        return {
-                            q: term,
-                            p: page
-                        };
-                    },
-                    results: function (results) {
-                        return {
-                            results: results,
-                            more: results.length == 10
-                        };
-                    }
-                },
-                escapeMarkup: function (m) {
-                    return m;
-                },
-                initSelection: function (element, cb) {
-                    if (!multiple && prefetched.length > 0)
-                        cb(prefetched[0]);
-                    else
-                        cb(prefetched);
-
-                },
-                dropdownCssClass: "bigdrop"
-            });
-        }
-    });
-});
-  </script>
+  <script src="/js/select2-field.js"></script>
 {% endblock %}
 
 {% block breadcrumbs %}{{ block.super }}
diff --git a/ietf/secr/templates/sreq/edit.html b/ietf/secr/templates/sreq/edit.html
@@ -9,54 +9,7 @@
   <link rel="stylesheet" href="/css/lib/select2.css">
   <link rel="stylesheet" href="/css/lib/select2-bootstrap.css">
   <script src="/js/lib/select2-3.5.2.min.js"></script>
-  <script>
-// this is copy-pasted from ietf.js, we should include that here too instead of this
-$(document).ready(function () {
-    $(".select2-field").each(function () {
-        var e = $(this);
-        if (e.data("ajax-url")) {
-            var maxEntries = e.data("max-entries");
-            var multiple = maxEntries != 1;
-            var prefetched = e.data("pre");
-            e.select2({
-                multiple: multiple,
-                minimumInputLength: 2,
-                width: "off",
-                allowClear: true,
-                maximumSelectionSize: maxEntries,
-                ajax: {
-                    url: e.data("ajax-url"),
-                    dataType: "json",
-                    quietMillis: 250,
-                    data: function (term, page) {
-                        return {
-                            q: term,
-                            p: page
-                        };
-                    },
-                    results: function (results) {
-                        return {
-                            results: results,
-                            more: results.length == 10
-                        };
-                    }
-                },
-                escapeMarkup: function (m) {
-                    return m;
-                },
-                initSelection: function (element, cb) {
-                    if (!multiple && prefetched.length > 0)
-                        cb(prefetched[0]);
-                    else
-                        cb(prefetched);
-
-                },
-                dropdownCssClass: "bigdrop"
-            });
-        }
-    });
-});
-  </script>
+  <script src="/js/select2-field.js"></script>
 {% endblock %}
 
 {% block breadcrumbs %}{{ block.super }} 
diff --git a/ietf/secr/templates/sreq/new.html b/ietf/secr/templates/sreq/new.html
@@ -9,54 +9,7 @@
   <link rel="stylesheet" href="/css/lib/select2.css">
   <link rel="stylesheet" href="/css/lib/select2-bootstrap.css">
   <script src="/js/lib/select2-3.5.2.min.js"></script>
-  <script>
-// this is copy-pasted from ietf.js, we should include that here too instead of this
-$(document).ready(function () {
-    $(".select2-field").each(function () {
-        var e = $(this);
-        if (e.data("ajax-url")) {
-            var maxEntries = e.data("max-entries");
-            var multiple = maxEntries != 1;
-            var prefetched = e.data("pre");
-            e.select2({
-                multiple: multiple,
-                minimumInputLength: 2,
-                width: "off",
-                allowClear: true,
-                maximumSelectionSize: maxEntries,
-                ajax: {
-                    url: e.data("ajax-url"),
-                    dataType: "json",
-                    quietMillis: 250,
-                    data: function (term, page) {
-                        return {
-                            q: term,
-                            p: page
-                        };
-                    },
-                    results: function (results) {
-                        return {
-                            results: results,
-                            more: results.length == 10
-                        };
-                    }
-                },
-                escapeMarkup: function (m) {
-                    return m;
-                },
-                initSelection: function (element, cb) {
-                    if (!multiple && prefetched.length > 0)
-                        cb(prefetched[0]);
-                    else
-                        cb(prefetched);
-
-                },
-                dropdownCssClass: "bigdrop"
-            });
-        }
-    });
-});
-  </script>
+  <script src="/js/select2-field.js"></script>
 {% endblock %}
 
 {% block breadcrumbs %}{{ block.super }} 
diff --git a/ietf/templates/doc/change_shepherd.html b/ietf/templates/doc/change_shepherd.html
@@ -30,4 +30,5 @@ <h1>Change document shepherd<br><small>{{ doc.name }}-{{ doc.rev }}</small></h1>
 
 {% block js %}
   <script src="/js/lib/select2-3.5.2.min.js"></script>
+  <script src="/js/select2-field.js"></script>
 {% endblock %}
diff --git a/ietf/templates/doc/draft/change_replaces.html b/ietf/templates/doc/draft/change_replaces.html
@@ -29,4 +29,5 @@ <h1>Change documents replaced by<br><small>{{ doc }}</small></h1>
 
 {% block js %}
   <script src="/js/lib/select2-3.5.2.min.js"></script>
+  <script src="/js/select2-field.js"></script>
 {% endblock %}
diff --git a/ietf/templates/group/edit.html b/ietf/templates/group/edit.html
@@ -52,6 +52,7 @@ <h1>
 
 {% block js %}
   <script src="/js/lib/select2-3.5.2.min.js"></script>
+  <script src="/js/select2-field.js"></script>
   <script>
    $(document).ready(function () {
        $("#id_acronym").closest(".form-group").each(function() {
diff --git a/ietf/templates/group/edit_milestones.html b/ietf/templates/group/edit_milestones.html
@@ -94,6 +94,7 @@ <h1>{{ title }}</h1>
 
 {% block js %}
   <script src="/js/lib/select2-3.5.2.min.js"></script>
+  <script src="/js/select2-field.js"></script>
   <script src="/js/lib/bootstrap-datepicker.js"></script>
   <script src="/js/edit-milestones.js"></script>
 {% endblock %}
diff --git a/ietf/templates/group/stream_edit.html b/ietf/templates/group/stream_edit.html
@@ -43,4 +43,5 @@ <h1>Manage {{ group.name }} RFC stream</h1>
 
 {% block js %}
   <script src="/js/lib/select2-3.5.2.min.js"></script>
+  <script src="/js/select2-field.js"></script>
 {% endblock %}
diff --git a/ietf/templates/ipr/details_edit.html b/ietf/templates/ipr/details_edit.html
@@ -242,6 +242,7 @@ <h2>{% cycle section %}. Other notes</h2>
 
 {% block js %}
   <script src="/js/lib/select2-3.5.2.min.js"></script>
+  <script src="/js/select2-field.js"></script>
   <script src="/js/lib/bootstrap-datepicker.js"></script>
   <script src="/js/ipr-edit.js"></script>
 {% endblock %}
diff --git a/ietf/templates/liaisons/edit.html b/ietf/templates/liaisons/edit.html
@@ -61,5 +61,6 @@ <h2>{{ fieldset.name }}</h2>
 {% block js %}
   <script src="/js/lib/bootstrap-datepicker.js"></script>
   <script src="/js/lib/select2-3.5.2.min.js"></script>
+  <script src="/js/select2-field.js"></script>
   <script src="/js/liaisons.js"></script>
 {% endblock %}
diff --git a/ietf/templates/nomcom/edit_position.html b/ietf/templates/nomcom/edit_position.html
@@ -28,4 +28,5 @@ <h2>{% if position %}Edit{% else %}Add{% endif %} position</h2>
 
 {% block content_end %}
   <script src="/js/lib/select2-3.5.2.min.js"></script>
+  <script src="/js/select2-field.js"></script>
 {% endblock %}
diff --git a/static/js/ietf.js b/static/js/ietf.js
@@ -206,60 +206,6 @@ $(".snippet .show-all").click(function () {
 //	}
 // });
 
-function setupSelect2Field(e) {
-    var url = e.data("ajax-url");
-    if (!url)
-        return;
-
-    var maxEntries = e.data("max-entries");
-    var multiple = maxEntries != 1;
-    var prefetched = e.data("pre");
-    e.select2({
-        multiple: multiple,
-        minimumInputLength: 2,
-        width: "off",
-        allowClear: true,
-        maximumSelectionSize: maxEntries,
-        ajax: {
-            url: url,
-            dataType: "json",
-            quietMillis: 250,
-            data: function (term, page) {
-                return {
-                    q: term,
-                    p: page
-                };
-            },
-            results: function (results) {
-                return {
-                    results: results,
-                    more: results.length == 10
-                };
-            }
-        },
-        escapeMarkup: function (m) {
-            return m;
-        },
-        initSelection: function (element, cb) {
-            if (!multiple && prefetched.length > 0)
-                cb(prefetched[0]);
-            else
-                cb(prefetched);
-
-        },
-        dropdownCssClass: "bigdrop"
-    });
-}
-
-$(document).ready(function () {
-    $(".select2-field").each(function () {
-        if ($(this).closest(".template").length > 0)
-            return;
-
-        setupSelect2Field($(this));
-    });
-});
-
 // Use the Bootstrap3 tooltip plugin for all elements with a title attribute
 $('[title][title!=""]').tooltip();
 
diff --git a/static/js/select2-field.js b/static/js/select2-field.js
@@ -0,0 +1,55 @@
+// currently we only include select2 CSS/JS on those pages where forms
+// need it, so the generic setup code here is also kept separate
+function setupSelect2Field(e) {
+    var url = e.data("ajax-url");
+    if (!url)
+        return;
+
+    var maxEntries = e.data("max-entries");
+    var multiple = maxEntries != 1;
+    var prefetched = e.data("pre");
+    e.select2({
+        multiple: multiple,
+        minimumInputLength: 2,
+        width: "off",
+        allowClear: true,
+        maximumSelectionSize: maxEntries,
+        ajax: {
+            url: url,
+            dataType: "json",
+            quietMillis: 250,
+            data: function (term, page) {
+                return {
+                    q: term,
+                    p: page
+                };
+            },
+            results: function (results) {
+                return {
+                    results: results,
+                    more: results.length == 10
+                };
+            }
+        },
+        escapeMarkup: function (m) {
+            return m;
+        },
+        initSelection: function (element, cb) {
+            if (!multiple && prefetched.length > 0)
+                cb(prefetched[0]);
+            else
+                cb(prefetched);
+
+        },
+        dropdownCssClass: "bigdrop"
+    });
+}
+
+$(document).ready(function () {
+    $(".select2-field").each(function () {
+        if ($(this).closest(".template").length > 0)
+            return;
+
+        setupSelect2Field($(this));
+    });
+});
