#28 add reset button

gyuque · Feb 12, 2014 · bc6e2da · bc6e2da
1 parent 54556f4
commit bc6e2da
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 14 deletions.
diff --git a/css/jd.css b/css/jd.css
@@ -36,13 +36,28 @@ td h3 {
 
 #bundles-col {
 	position: relative;
+	font-size: 13px;
 }
 
 #bundles-container {
-	width: 13em;
+	min-width: 190px;
 	position: absolute;
-	top: 220px;
-	left: -220px;
+	top: 160px;
+	left: -191px;
+}
+
+#sel-reset-button {
+	margin-left: 5em;
+	margin-bottom: 2em;
+	background: linear-gradient(to bottom, #b20, #710);
+	box-shadow: 0 0 1px rgba(255,200,200,0.6) inset, 0 2px 9px rgba(0,0,0,0.4);
+	border: 1px solid #710;
+	border-radius: 4px;
+	color: #fff;
+}
+
+#sel-reset-button:active {
+	background: linear-gradient(to bottom, #510, #610);
 }
 
 #pref-selector-container {
@@ -63,6 +78,8 @@ td h3 {
 	color: #666;
 }
 
+#tx-end-date[disabled] { opacity: 0.5; }
+
 #control-area {
 	text-align: center;
 	background-color: #ddd;

diff --git a/japan-data-downloader.html b/japan-data-downloader.html
@@ -21,6 +21,7 @@ <h1>Data Download Service</h1>
 
 				<td id="bundles-col">
 					<div id="bundles-container">
+						<button id="sel-reset-button">Clear All</button>
 						<fieldset><legend>Tokyo Metropolitan Area</legend>
 							<div class="area-subset">
 								<h4>Core prefectures</h4>
@@ -70,10 +71,10 @@ <h4>Include more prefectures</h4>
 			<tr>
 				<td id="time-q-col-from"><span class="time-q-heading">Start Date</span> <input id="tx-start-date" type="text" size="13" value="2011-03-11"></td>
 				<td id="time-q-col-to"><span class="time-q-heading">To</span>
-					<label><input type="radio" name="q-time-to" checked="checked">24 hours</label>
-					&nbsp;<label><input type="radio" name="q-time-to">36 hours</label>
-					&nbsp;<label><input type="radio" name="q-time-to">48 hours</label>
-					&nbsp;<label><input type="radio" name="q-time-to">End of this day:</label><input type="text" size="13" value="2011-03-11">
+					<label><input type="radio" name="q-time-to" checked="checked" value="24">24 hours</label>
+					&nbsp;<label><input type="radio" name="q-time-to" value="36">36 hours</label>
+					&nbsp;<label><input type="radio" name="q-time-to" value="48">48 hours</label>
+					&nbsp;<label><input type="radio" name="q-time-to" value="0">End of this day:</label><input id="tx-end-date" type="text" size="13" value="2011-03-11">
 				</td>
 			</tr>
 		</table>

diff --git a/js/jd-main.js b/js/jd-main.js
@@ -5,7 +5,7 @@
 
 	// Launch
 	window.onload = function() {
-		gTimeRangeForm = new TimeRangeForm('tx-start-date', 'input[name=q-time-to]');
+		gTimeRangeForm = new TimeRangeForm('tx-start-date', 'input[name=q-time-to]', 'tx-end-date');
 
 		var map_container = document.getElementById('pref-map-area');
 		gPrefPicker = new PrefPicker(map_container);
@@ -18,6 +18,7 @@
 		gPrefPicker.observeCheckbox('.pchk-osaka-around', '#selall-osaka-around', '#rmall-osaka-around');
 
 		$('#request-trigger').click( sendDataRequest );
+		$('#sel-reset-button').click( resetSelection );
 	};
 
 	function afterImagesLoad() {
@@ -28,6 +29,10 @@
 		makeSelectedPrefecturesSummary(gPrefPicker.selectionSet);
 	}
 
+	function resetSelection() {
+		gPrefPicker.selectionSet.clear();
+	}
+
 	var _temp_prefs_list = [];
 	function makeSelectedPrefecturesSummary(sels) {
 		_temp_prefs_list.length = 0;
@@ -48,13 +53,13 @@
 		this.selectionSet.eventDispatcher().bind(SelectionSet.CHANGE_EVENT, this.onSelectionSetChange.bind(this));
 		this.boundCheckboxes = [];
 
-		this.mapWidth  = 810;
+		this.mapWidth  = 794;
 		this.mapHeight = 810;
 
-		this.mapOffsetX = -190;
+		this.mapOffsetX = -198;
 		this.mapOffsetY = -28;
 
-		this.specialOffsetX = -10;
+		this.specialOffsetX = -2;
 		this.specialOffsetY = -700;
 
 		this.mapCanvas  = null;
@@ -72,7 +77,7 @@
 			var xstep = 10;
 			var ystep = 27;
 
-			var ox = 402;
+			var ox = 395;
 			var oy = 507;
 
 			var addchk = (function(cx, cy, label, nm) {
@@ -390,6 +395,11 @@
 			return this.jEventElement;
 		},
 
+		clear: function() {
+			for (var i in this.nameMap) { delete this.nameMap[i]; }
+			this.fire();
+		},
+
 		addSelectedPrefecturesToArray: function(outArray) {
 			for (var i in this.nameMap) {
 				outArray.push(i);
@@ -418,17 +428,33 @@
 	};
 
 
-	function TimeRangeForm(start_text_id, range_option_selector) {
+	function TimeRangeForm(start_text_id, range_option_selector, end_specify_text_id) {
 		this.textStartDate = document.getElementById(start_text_id);
 		this.jTextStartDate = $(this.textStartDate);
 		this.jRangeOptions = $(range_option_selector);
+		this.textSpecifyEnd = document.getElementById(end_specify_text_id);
+		this.jTextSpecifyEnd = $(this.textSpecifyEnd);
 
 		this.observeDateText(this.jTextStartDate);
+		this.observeDateText(this.jTextSpecifyEnd);
+		this.toggleReadonly();
+
+		this.jRangeOptions.click( this.toggleReadonly.bind(this) );
 	}
 
 	TimeRangeForm.DatePattern = /^ *([0-9]+)[\/-]([0-9]+)[\/-]([0-9]+)/ ;
 
 	TimeRangeForm.prototype = {
+		toggleReadonly: function() {
+			var h = this.getSelectedRangeOption();
+
+			if (h !== 0) {
+				this.textSpecifyEnd.disabled = true;
+			} else {
+				this.textSpecifyEnd.disabled = false;
+			}
+		},
+
 		observeDateText: function(j) {
 			var _this = this;
 			var callback = function() {
@@ -439,6 +465,19 @@
 			j.keyup(callback).blur(callback).click(callback);
 		},
 
+		getSelectedRangeOption: function() {
+			var specified_hours = 0;
+			var len = this.jRangeOptions.length;
+			for (var i = 0;i < len;++i) {
+				if (this.jRangeOptions[i].checked) {
+					specified_hours = parseInt( this.jRangeOptions[i].value, 10 );
+					break;
+				}
+			}
+
+			return specified_hours;
+		},
+
 		checkDateFormat: function(val) {
 			var parsed = this.parseDate(val);
 			if (parsed) {

diff --git a/js/outer.js b/js/outer.js
@@ -21,7 +21,7 @@
 		openDownloadServiceWindow: function() {
 
 			chrome.app.window.create('japan-data-downloader.html', {
-				 minWidth: 810,
+				 minWidth: 816,
 				 minHeight: 520,
 
 				}, function(){