From 36450f46057a5e981f6e44f51fe0cf9f24f07b29 Mon Sep 17 00:00:00 2001
From: Vignesh Sivakumar <vignesh6993@live.in>
Date: Tue, 5 Dec 2017 14:52:18 +0530
Subject: [PATCH] Cleaned example.html

1) Added simple html5 doctype
2) Made the javscript code to be compatible with "StandardJS" coding standards.
3) Moved the Javascript code to before closing of the body tag.
---
 example/example.html | 249 +++++++++++++++++++++----------------------
 1 file changed, 122 insertions(+), 127 deletions(-)
diff --git a/example/example.html b/example/example.html
index 8a8f9da..ee05103 100755
--- a/example/example.html
+++ b/example/example.html
@@ -1,136 +1,131 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-	<head>
-		<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-		<title>Demo Select Areas</title>
-		<link href="example.css" media="screen" rel="stylesheet" type="text/css" />
-		<link href="../resources/jquery.selectareas.css" media="screen" rel="stylesheet" type="text/css" />
-		<!--[if lte IE 8]><link href="../resources/jquery.selectareas.ie8.css" media="screen" rel="stylesheet" type="text/css" /> <![endif]-->
-		<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
-		<script src="../jquery.selectareas.js" type="text/javascript"></script>
-		<script type="text/javascript">
-			$(document).ready(function () {
-				$('img#example').selectAreas({
-					minSize: [10, 10],
-					onChanged: debugQtyAreas,
-					width: 500,
-					areas: [
-						{
-							x: 10,
-							y: 20,
-							width: 60,
-							height: 100,
-						}
-					]
-				});
-				$('#btnView').click(function () {
-					var areas = $('img#example').selectAreas('areas');
-					displayAreas(areas);
-				});
-				$('#btnViewRel').click(function () {
-					var areas = $('img#example').selectAreas('relativeAreas');
-					displayAreas(areas);
-				});
-				$('#btnReset').click(function () {
-					output("reset")
-					$('img#example').selectAreas('reset');
-				});
-				$('#btnDestroy').click(function () {
-					$('img#example').selectAreas('destroy');
+<!DOCTYPE html>
+<html lang="en">
 
-					output("destroyed")
-					$('.actionOn').attr("disabled", "disabled");
-					$('.actionOff').removeAttr("disabled")
-				});
-				$('#btnCreate').attr("disabled", "disabled").click(function () {
-					$('img#example').selectAreas({
-						minSize: [10, 10],
-						onChanged : debugQtyAreas,
-						width: 500,
-					});
+<head>
+  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+  <title>Demo Select Areas</title>
+  <link href="example.css" media="screen" rel="stylesheet" type="text/css" />
+  <link href="../resources/jquery.selectareas.css" media="screen" rel="stylesheet" type="text/css" />
+  <!--[if lte IE 8]><link href="../resources/jquery.selectareas.ie8.css" media="screen" rel="stylesheet" type="text/css" /> <![endif]-->
+  <script src="jquery-1.11.3.min.js" type="text/javascript"></script>
+  <script src="../jquery.selectareas.min.js" type="text/javascript"></script>
+</head>
 
-					output("created")
-					$('.actionOff').attr("disabled", "disabled");
-					$('.actionOn').removeAttr("disabled")
-				});
-				$('#btnNew').click(function () {
-					var areaOptions = {
-						x: Math.floor((Math.random() * 200)),
-						y: Math.floor((Math.random() * 200)),
-						width: Math.floor((Math.random() * 100)) + 50,
-						height: Math.floor((Math.random() * 100)) + 20,
-					};
-					output("Add a new area: " + areaToString(areaOptions))
-					$('img#example').selectAreas('add', areaOptions);
-				});
-				$('#btnNews').click(function () {
-					var areaOption1 = {
-						x: Math.floor((Math.random() * 200)),
-						y: Math.floor((Math.random() * 200)),
-						width: Math.floor((Math.random() * 100)) + 50,
-						height: Math.floor((Math.random() * 100)) + 20,
-					}, areaOption2 = {
-						x: areaOption1.x + areaOption1.width + 10,
-						y: areaOption1.y + areaOption1.height - 20,
-						width: 50,
-						height: 20,
-					};
-					output("Add a new area: " + areaToString(areaOption1) + " and " + areaToString(areaOption2))
-					$('img#example').selectAreas('add', [areaOption1, areaOption2]);
-				});
-			});
+<body>
+  <div id="wrapper">
+    <h1>Demo Select Areas</h1>
+    <div class="image-decorator">
+      <img alt="Image principale" id="example" src="example.jpg" />
+    </div>
+    <table>
+      <tr>
+        <td class="actions">
+          <input type="button" id="btnView" value="Display areas" class="actionOn" />
+          <input type="button" id="btnViewRel" value="Display relative" class="actionOn" />
+          <input type="button" id="btnNew" value="Add New" class="actionOn" />
+          <input type="button" id="btnNews" value="Add 2 New" class="actionOn" />
+          <input type="button" id="btnReset" value="Reset" class="actionOn" />
+          <input type="button" id="btnDestroy" value="Destroy" class="actionOn" />
+          <input type="button" id="btnCreate" value="Create" class="actionOff" />
+        </td>
+        <td>
+          <div id="output" class="output"></div>
+        </td>
+      </tr>
+    </table>
+  </div>
 
-			var selectionExists;
+    <script type="text/javascript">
+    $(document).ready(function () {
+      $('img#example').selectAreas({
+        minSize: [10, 10],
+        onChanged: debugQtyAreas,
+        width: 500,
+        areas: [{
+          x: 10,
+          y: 20,
+          width: 60,
+          height: 100
+        }]
+      })
+      $('#btnView').click(function () {
+        var areas = $('img#example').selectAreas('areas')
+        displayAreas(areas)
+      })
+      $('#btnViewRel').click(function () {
+        var areas = $('img#example').selectAreas('relativeAreas')
+        displayAreas(areas)
+      })
+      $('#btnReset').click(function () {
+        output('reset')
+        $('img#example').selectAreas('reset')
+      })
+      $('#btnDestroy').click(function () {
+        $('img#example').selectAreas('destroy')
+        output('destroyed')
+        $('.actionOn').attr('disabled', 'disabled')
+        $('.actionOff').removeAttr('disabled')
+      })
+      $('#btnCreate').attr('disabled', 'disabled').click(function () {
+        $('img#example').selectAreas({
+          minSize: [10, 10],
+          onChanged: debugQtyAreas,
+          width: 500
+        })
+        output('created')
+        $('.actionOff').attr('disabled', 'disabled')
+        $('.actionOn').removeAttr('disabled')
+      })
+      $('#btnNew').click(function () {
+        var areaOptions = {
+          x: Math.floor((Math.random() * 200)),
+          y: Math.floor((Math.random() * 200)),
+          width: Math.floor((Math.random() * 100)) + 50,
+          height: Math.floor((Math.random() * 100)) + 20
+        }
+        output('Add a new area: ' + areaToString(areaOptions))
+        $('img#example').selectAreas('add', areaOptions)
+      })
+      $('#btnNews').click(function () {
+        var areaOption1 = {
+          x: Math.floor((Math.random() * 200)),
+          y: Math.floor((Math.random() * 200)),
+          width: Math.floor((Math.random() * 100)) + 50,
+          height: Math.floor((Math.random() * 100)) + 20
+        }
+        var areaOption2 = {
+          x: areaOption1.x + areaOption1.width + 10,
+          y: areaOption1.y + areaOption1.height - 20,
+          width: 50,
+          height: 20
+        }
+        output('Add a new area: ' + areaToString(areaOption1) + ' and ' + areaToString(areaOption2))
+        $('img#example').selectAreas('add', [areaOption1, areaOption2])
+      })
+    })
 
-			function areaToString (area) {
-				return (typeof area.id === "undefined" ? "" : (area.id + ": ")) + area.x + ':' + area.y  + ' ' + area.width + 'x' + area.height + '<br />'
-			}
+    function areaToString (area) {
+      return (typeof area.id === 'undefined' ? '' : (area.id + ': ')) + area.x + ':' + area.y + ' ' + area.width + 'x' + area.height + '<br />'
+    }
 
-			function output (text) {
-				$('#output').html(text);
-			}
+    function output (text) {
+      $('#output').html(text)
+    }
 
-			// Log the quantity of selections
-			function debugQtyAreas (event, id, areas) {
-				console.log(areas.length + " areas", arguments);
-			};
+    // Log the quantity of selections
+    function debugQtyAreas (event, id, areas) {
+      console.log(areas.length + ' areas', arguments)
+    }
 
-			// Display areas coordinates in a div
-			function displayAreas (areas) {
-				var text = "";
-				$.each(areas, function (id, area) {
-					text += areaToString(area);
-				});
-				output(text);
-			};
+    // Display areas coordinates in a div
+    function displayAreas (areas) {
+      var text = ''
+      $.each(areas, function (id, area) {
+        text += areaToString(area)
+      })
+      output(text)
+    }
+  </script>
+</body>
 
-		</script>
-	</head>
-
-	<body>
-		<div id="wrapper">
-			<h1>Demo Select Areas</h1>
-
-			<div class="image-decorator">
-				<img alt="Image principale" id="example" src="example.jpg"/>
-			</div>
-			<table>
-				<tr>
-					<td class="actions">
-						<input type="button" id="btnView" value="Display areas" class="actionOn" />
-						<input type="button" id="btnViewRel" value="Display relative" class="actionOn" />
-						<input type="button" id="btnNew" value="Add New" class="actionOn" />
-						<input type="button" id="btnNews" value="Add 2 New" class="actionOn" />
-						<input type="button" id="btnReset" value="Reset" class="actionOn" />
-						<input type="button" id="btnDestroy" value="Destroy" class="actionOn" />
-						<input type="button" id="btnCreate" value="Create" class="actionOff" />
-					</td>
-					<td>
-						<div id="output" class='output'> </div>
-					</td>
-				</tr>
-			</table>
-
-		</div>
-	</body>
 </html>
