From 753b17f9d26d83826faecdb9b0c114d1b7a7db72 Mon Sep 17 00:00:00 2001
From: Guillaume Rousse <guillaume.rousse@renater.fr>
Date: Thu, 24 May 2018 12:21:03 +0200
Subject: [PATCH] internalize step-specific javascript code in template

---
 resources/Makefile.am            |   1 -
 resources/account-manager.js     | 130 ----------------------------
 templates/web/index.tt2.html     |   1 -
 templates/web/select_sp.tt2.html | 140 ++++++++++++++++++++++++++++---
 4 files changed, 130 insertions(+), 142 deletions(-)
 delete mode 100644 resources/account-manager.js

diff --git a/resources/Makefile.am b/resources/Makefile.am
index 3e7ccad..6a3317f 100644
--- a/resources/Makefile.am
+++ b/resources/Makefile.am
@@ -14,7 +14,6 @@ nobase_www_DATA = \
 	images/favicon_geant.ico \
 	images/favicon.png \
 	images/geant_logo_rgb_300dpi.jpg \
-	account-manager.js \
 	jquery-3.3.1.min.js \
 	jquery-steps-1.1.0.min.js \
 	jquery-ui-1.12.1/images/ui-icons_444444_256x240.png \
diff --git a/resources/account-manager.js b/resources/account-manager.js
deleted file mode 100644
index 538f2be..0000000
--- a/resources/account-manager.js
+++ /dev/null
@@ -1,130 +0,0 @@
-jQuery(function($){
-
-    $.widget( "custom.combobox", {
-        _create: function() {
-            this.wrapper = $( "<span>" )
-            .addClass( "custom-combobox" )
-            .insertAfter( this.element );
-
-            this.element.hide();
-            this._createAutocomplete();
-            this._createShowAllButton();
-        },
-
-        _createAutocomplete: function() {
-            var selected = this.element.children( ":selected" ),
-                value = selected.val() ? selected.text() : "";
-
-            this.input = $( "<input>" )
-                .appendTo( this.wrapper )
-                .val( value )
-                .attr( "title", "" )
-                .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left error required" )
-                .autocomplete({
-                    delay: 0,
-                    minLength: 0,
-                    source: $.proxy( this, "_source" )
-                })
-                .tooltip({
-                    tooltipClass: "ui-state-highlight"
-            });
-
-            this._on( this.input, {
-                autocompleteselect: function( event, ui ) {
-                    ui.item.option.selected = true;
-                    this._trigger( "select", event, {
-                        item: ui.item.option
-                    });
-                },
- 
-                autocompletechange: "_removeIfInvalid"
-            });
-        },
-
-        _createShowAllButton: function() {
-            var input = this.input,
-            wasOpen = false;
-    
-            $( "<a>" )
-                .attr( "tabIndex", -1 )
-                .attr( "title", "Show All Items" )
-                .tooltip()
-                .appendTo( this.wrapper )
-                .button({
-                    icons: {
-                        primary: "ui-icon-triangle-1-s"
-                    },
-                    text: false
-                })
-                .removeClass( "ui-corner-all" )
-                .addClass( "custom-combobox-toggle ui-corner-right" )
-                .mousedown(function() {
-                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
-                })
-                .click(function() {
-                    input.focus();
-            
-                    // Close if already visible
-                    if ( wasOpen ) {
-                    return;
-                    }
-            
-                    // Pass empty string as value to search for, displaying all results
-                    input.autocomplete( "search", "" );
-                });
-        },
-        
-        _source: function( request, response ) {
-            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
-            response( this.element.children( "option" ).map(function() {
-                var text = $( this ).text();
-                if ( this.value && ( !request.term || matcher.test(text) ) )
-                    return {
-                        label: text,
-                        value: text,
-                        option: this
-                    };
-            }) );
-        },
-        
-        _removeIfInvalid: function( event, ui ) {
- 
-            // Selected an item, nothing to do
-            if ( ui.item ) {
-                return;
-            }
-
-            // Search for a match (case-insensitive)
-            var value = this.input.val(),
-                valueLowerCase = value.toLowerCase(),
-                valid = false;
-            this.element.children( "option" ).each(function() {
-                if ( $( this ).text().toLowerCase() === valueLowerCase ) {
-                    this.selected = valid = true;
-                    return false;
-                }
-            });
-            
-            // Found a match, nothing to do
-            if ( valid ) {
-                return;
-            }
-            
-            // Remove invalid value
-            this.input
-                .val( "" )
-                .attr( "title", value + " didn't match any item" )
-                .tooltip( "open" );
-            this.element.val( "" );
-            this._delay(function() {
-                this.input.tooltip( "close" ).attr( "title", "" );
-            }, 2500 );
-            this.input.autocomplete( "instance" ).term = "";
-        },
-
-        _destroy: function() {
-            this.wrapper.remove();
-            this.element.show();
-        }
-    });
-});
diff --git a/templates/web/index.tt2.html b/templates/web/index.tt2.html
index 2596c49..3ff97cf 100644
--- a/templates/web/index.tt2.html
+++ b/templates/web/index.tt2.html
@@ -16,7 +16,6 @@
         <script type="text/javascript" src="jquery-steps-1.1.0.min.js"></script>
         <script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
         <script type="text/javascript" src="jquery-validation-1.17.0.min.js"></script>
-        <script type="text/javascript" src="account-manager.js"></script>
 
         <title>eduGAIN Access Check</title>
 
diff --git a/templates/web/select_sp.tt2.html b/templates/web/select_sp.tt2.html
index c3ecc67..d8decfa 100644
--- a/templates/web/select_sp.tt2.html
+++ b/templates/web/select_sp.tt2.html
@@ -1,10 +1,9 @@
-  <script type="text/javascript">
-
-jQuery(document).ready(function($){
+<script type="text/javascript">
+$( document ).ready(function() {
 
     var form = $("#create-account-form").show();
 
-        form.steps({
+    form.steps({
         headerTag: "h3",
         bodyTag: "fieldset",
         stepsOrientation: "vertical",
@@ -81,15 +80,136 @@ jQuery(document).ready(function($){
         errorPlacement: function errorPlacement(error, element) { element.before(error); },
     });
 
-});
+    $.widget( "custom.combobox", {
+        _create: function() {
+            this.wrapper = $( "<span>" )
+            .addClass( "custom-combobox" )
+            .insertAfter( this.element );
 
-$(function() {
-    $( "#entityid" ).combobox();
-    $( "#toggle" ).click(function() {
-        $( "#combobox" ).toggle();
+            this.element.hide();
+            this._createAutocomplete();
+            this._createShowAllButton();
+        },
+
+        _createAutocomplete: function() {
+            var selected = this.element.children( ":selected" ),
+                value = selected.val() ? selected.text() : "";
+
+            this.input = $( "<input>" )
+                .appendTo( this.wrapper )
+                .val( value )
+                .attr( "title", "" )
+                .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left error required" )
+                .autocomplete({
+                    delay: 0,
+                    minLength: 0,
+                    source: $.proxy( this, "_source" )
+                })
+                .tooltip({
+                    tooltipClass: "ui-state-highlight"
+            });
+
+            this._on( this.input, {
+                autocompleteselect: function( event, ui ) {
+                    ui.item.option.selected = true;
+                    this._trigger( "select", event, {
+                        item: ui.item.option
+                    });
+                },
+ 
+                autocompletechange: "_removeIfInvalid"
+            });
+        },
+
+        _createShowAllButton: function() {
+            var input = this.input,
+            wasOpen = false;
+    
+            $( "<a>" )
+                .attr( "tabIndex", -1 )
+                .attr( "title", "Show All Items" )
+                .tooltip()
+                .appendTo( this.wrapper )
+                .button({
+                    icons: {
+                        primary: "ui-icon-triangle-1-s"
+                    },
+                    text: false
+                })
+                .removeClass( "ui-corner-all" )
+                .addClass( "custom-combobox-toggle ui-corner-right" )
+                .mousedown(function() {
+                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
+                })
+                .click(function() {
+                    input.focus();
+            
+                    // Close if already visible
+                    if ( wasOpen ) {
+                    return;
+                    }
+            
+                    // Pass empty string as value to search for, displaying all results
+                    input.autocomplete( "search", "" );
+                });
+        },
+        
+        _source: function( request, response ) {
+            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+            response( this.element.children( "option" ).map(function() {
+                var text = $( this ).text();
+                if ( this.value && ( !request.term || matcher.test(text) ) )
+                    return {
+                        label: text,
+                        value: text,
+                        option: this
+                    };
+            }) );
+        },
+        
+        _removeIfInvalid: function( event, ui ) {
+ 
+            // Selected an item, nothing to do
+            if ( ui.item ) {
+                return;
+            }
+
+            // Search for a match (case-insensitive)
+            var value = this.input.val(),
+                valueLowerCase = value.toLowerCase(),
+                valid = false;
+            this.element.children( "option" ).each(function() {
+                if ( $( this ).text().toLowerCase() === valueLowerCase ) {
+                    this.selected = valid = true;
+                    return false;
+                }
+            });
+            
+            // Found a match, nothing to do
+            if ( valid ) {
+                return;
+            }
+            
+            // Remove invalid value
+            this.input
+                .val( "" )
+                .attr( "title", value + " didn't match any item" )
+                .tooltip( "open" );
+            this.element.val( "" );
+            this._delay(function() {
+                this.input.tooltip( "close" ).attr( "title", "" );
+            }, 2500 );
+            this.input.autocomplete( "instance" ).term = "";
+        },
+
+        _destroy: function() {
+            this.wrapper.remove();
+            this.element.show();
+        }
     });
-});
 
+    $( "#entityid" ).combobox();
+});
 </script>
 
 
-- 
GitLab