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