From f51d5d57a68eedc81efed6bf2a2267c5526fd55c Mon Sep 17 00:00:00 2001
From: Darren Embry <dse@webonastick.com>
Date: Wed, 28 Mar 2012 18:50:02 -0400
Subject: [PATCH] feature #2320: JS helper to toggle subnet mask for ipv4/v6
 during input

http://redmine.pfsense.org/issues/2320
---
 usr/local/www/firewall_aliases_edit.php      |   2 +
 usr/local/www/firewall_rules_edit.php        |   1 +
 usr/local/www/firewall_virtual_ip_edit.php   |   1 +
 usr/local/www/interfaces.php                 |   1 +
 usr/local/www/interfaces_gif_edit.php        |   1 +
 usr/local/www/javascript/global.js           |  14 --
 usr/local/www/javascript/jquery.ipv4v6ify.js | 130 +++++++++++++++++++
 usr/local/www/services_igmpproxy_edit.php    |   2 +
 8 files changed, 138 insertions(+), 14 deletions(-)
 create mode 100755 usr/local/www/javascript/jquery.ipv4v6ify.js
diff --git a/usr/local/www/firewall_aliases_edit.php b/usr/local/www/firewall_aliases_edit.php
index 6debe7dd96..e8161e578c 100755
--- a/usr/local/www/firewall_aliases_edit.php
+++ b/usr/local/www/firewall_aliases_edit.php
@@ -539,6 +539,8 @@ EOD;
 	echo $jscriptstr;
 ?>
 
+<script type="text/javascript" src="/javascript/jquery.ipv4v6ify.js">
+</script>
 <script type="text/javascript" src="/javascript/row_helper.js">
 </script>
 <script type="text/javascript" src="/javascript/autosuggest.js">
diff --git a/usr/local/www/firewall_rules_edit.php b/usr/local/www/firewall_rules_edit.php
index 3244329840..e48bc263ba 100755
--- a/usr/local/www/firewall_rules_edit.php
+++ b/usr/local/www/firewall_rules_edit.php
@@ -639,6 +639,7 @@ include("head.inc");
 </head>
 
 <body link="#0000CC" vlink="#0000CC" alink="#0000CC">
+<script type="text/javascript" src="/javascript/jquery.ipv4v6ify.js"></script>
 <script src="/javascript/chosen/chosen.jquery.js" type="text/javascript"></script>
 <?php include("fbegin.inc"); ?>
 <?php pfSense_handle_custom_code("/usr/local/pkg/firewall_rules/pre_input_errors"); ?>
diff --git a/usr/local/www/firewall_virtual_ip_edit.php b/usr/local/www/firewall_virtual_ip_edit.php
index fef6e34fe9..3218001212 100755
--- a/usr/local/www/firewall_virtual_ip_edit.php
+++ b/usr/local/www/firewall_virtual_ip_edit.php
@@ -284,6 +284,7 @@ include("head.inc");
 ?>
 
 <body link="#0000CC" vlink="#0000CC" alink="#0000CC">
+<script type="text/javascript" src="/javascript/jquery.ipv4v6ify.js"></script>
 <?php include("fbegin.inc"); ?>
 <script language="JavaScript">
 <!--
diff --git a/usr/local/www/interfaces.php b/usr/local/www/interfaces.php
index 88ad2c280c..887d2e74fe 100755
--- a/usr/local/www/interfaces.php
+++ b/usr/local/www/interfaces.php
@@ -1072,6 +1072,7 @@ $types6 = array("none" => gettext("None"), "staticv6" => gettext("Static IPv6"),
 
 ?>
 
+<script type="text/javascript" src="/javascript/jquery.ipv4v6ify.js"></script>
 <script type="text/javascript" src="/javascript/numericupdown/js/numericupdown.js"></script>
 <link href="/javascript/numericupdown/css/numericupdown.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="/javascript/datepicker/js/datepicker.js"></script>
diff --git a/usr/local/www/interfaces_gif_edit.php b/usr/local/www/interfaces_gif_edit.php
index d83213c9ff..c7edf0d7b8 100644
--- a/usr/local/www/interfaces_gif_edit.php
+++ b/usr/local/www/interfaces_gif_edit.php
@@ -128,6 +128,7 @@ include("head.inc");
 ?>
 
 <body link="#0000CC" vlink="#0000CC" alink="#0000CC">
+<script type="text/javascript" src="/javascript/jquery.ipv4v6ify.js"></script>
 <?php include("fbegin.inc"); ?>
 <?php if ($input_errors) print_input_errors($input_errors); ?>
             <form action="interfaces_gif_edit.php" method="post" name="iform" id="iform">
diff --git a/usr/local/www/javascript/global.js b/usr/local/www/javascript/global.js
index bb7ba72de6..0b67f58681 100644
--- a/usr/local/www/javascript/global.js
+++ b/usr/local/www/javascript/global.js
@@ -41,17 +41,3 @@ var AjaxQueue = {
 	}
 };
 
-(function ($) {
-	$.fn.extend({
-		"ipv4v6ify": function () {
-			return this.each(function () {
-				var $inputs = $(this).find(":input.ipv4v6");
-				
-			});
-		}
-	});
-	$(function () {
-		$(document).ipv4v6ify();
-	});
-})(jQuery);
-
diff --git a/usr/local/www/javascript/jquery.ipv4v6ify.js b/usr/local/www/javascript/jquery.ipv4v6ify.js
new file mode 100755
index 0000000000..d00bb51379
--- /dev/null
+++ b/usr/local/www/javascript/jquery.ipv4v6ify.js
@@ -0,0 +1,130 @@
+/*jslint browser: true, eqeqeq: true, undef: true */
+/*global jQuery */
+/******************************************************************************
+Lines above are for jslint, the JavaScript verifier.  http://www.jslint.com/
+******************************************************************************/
+
+/* MIT-licensed code from https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/some */
+/* (C) 2007 Mozilla Developer Network and/or Jeff Walden */
+if (!Array.prototype.some) {
+	Array.prototype.some = function(fun /*, thisp */) {
+		"use strict";
+		if (!this) {
+			throw new TypeError();
+		}
+		var t = Object(this);
+		var len = t.length >>> 0;
+		if (typeof fun !== "function") {
+			throw new TypeError();
+		}
+		var thisp = arguments[1];
+		for (var i = 0; i < len; i++) {
+			if (i in t && fun.call(thisp, t[i], i, t)) {
+				return true;
+			}
+		}
+		return false;
+	};
+}
+
+(function ($) {
+	// --------------------------------------------------------------------
+	// find pairs of <input class='ipv4v6'> (textbox for IPv4 or IPv6 addr)
+	// and <select class='ipv4v6'> (dropdown for # bits in CIDR) and
+	// activate behavior that restricts options in the <select> when an
+	// ipv4 address is typed in the <input>.
+	// --------------------------------------------------------------------
+	var _ipv4v6ify = function (input1, input2) {
+		var options = Array.prototype.slice.call(input2.options, 0);
+		var has_128  = options.some(function (x) { return parseInt(x.value, 10) === 128; });
+		var has_0    = options.some(function (x) { return parseInt(x.value, 10) === 0; });
+		var max_ipv6 = has_128 ? 128 : 127;
+		var min_ipv6 = has_0 ? 0 : 1;
+		var max_ipv4 = has_128 ? 32 : 31;
+		var min_ipv4 = has_0 ? 0 : 1;
+		var was_ipv4 = undefined;
+		var is_ipv4  = undefined;
+		var restrict_bits_to_ipv4 = function () {
+			input2.options.length = 0;
+			for (var i = 0; i < options.length; i += 1) {
+				var val = parseInt(options[i].value, 10);
+				if (val >= min_ipv4 && val <= max_ipv4) {
+					input2.options.add(options[i]);
+				}
+			}
+		};
+		var unrestrict_bits = function () {
+			input2.options.length = 0;
+			for (var i = 0; i < options.length; i += 1) {
+				input2.options.add(options[i]);
+			}
+		};
+		var onchange_handler = function () {
+			was_ipv4 = is_ipv4;
+			is_ipv4  = /\./.test(input1.value) && !/\:/.test(input1.value);
+			// handle state transitions to gracefully change the
+			// value in the dropdown.	
+			var bits = parseInt($(input2).val(), 10);
+			if (was_ipv4 === false && is_ipv4 === true) {
+				restrict_bits_to_ipv4();
+				if (bits >= (96 + min_ipv4) && bits <= max_ipv6) {
+					$(input2).val(bits - 96);
+				}
+				else if (bits > max_ipv6) {
+					$(input2).val(max_ipv4);
+				}
+				else {
+					$(input2).val(min_ipv4);
+				}
+			}
+			else if (was_ipv4 === true && is_ipv4 === false) {
+				unrestrict_bits();
+				if (bits >= min_ipv4 && bits <= max_ipv4) {
+					$(input2).val(bits + 96);
+				}
+				else if (bits < min_ipv4) {
+					$(input2).val(min_ipv6);
+				}
+				else if (bits <= max_ipv6) {
+					$(input2).val(bits);
+				}
+				else {
+					$(input2).val(max_ipv6);
+				}
+			}
+			else if (was_ipv4 === undefined && is_ipv4 === true) {
+				// initial value is an ipv4 address
+				restrict_bits_to_ipv4();
+				if (bits >= min_ipv4 && bits <= max_ipv4) {
+					$(input2).val(bits);
+				}
+				else if (bits < min_ipv4) {
+					$(input2).val(min_ipv4);
+				}
+				else {
+					$(input2).val(max_ipv4);
+				}
+			}
+		};
+		$(input1).unbind("change").bind("change", onchange_handler).trigger("change");
+	};
+	$.fn.extend({
+		"ipv4v6ify": function () {
+			return this.each(function () {
+				var inputs, i, input1, input2;
+				inputs = $(this).find(":input.ipv4v6").toArray();
+				for (i = 0; i < inputs.length - 1; i += 1) {
+					input1 = inputs[i];
+					input2 = inputs[i + 1];
+					if (input1.type === "text" && input2.type === "select-one") {
+						_ipv4v6ify(input1, input2);
+					}
+				}
+			});
+		}
+	});
+	$(function () {
+		$(document).ipv4v6ify();
+	});
+})(jQuery);
+
diff --git a/usr/local/www/services_igmpproxy_edit.php b/usr/local/www/services_igmpproxy_edit.php
index e9e5dcf839..57c29cdba9 100755
--- a/usr/local/www/services_igmpproxy_edit.php
+++ b/usr/local/www/services_igmpproxy_edit.php
@@ -129,6 +129,8 @@ include("head.inc");
 	include("fbegin.inc");
 ?>
 
+<script type="text/javascript" src="/javascript/jquery.ipv4v6ify.js">
+</script>
 <script type="text/javascript" src="/javascript/row_helper.js">
 </script>
 
