js: Cleanup dateselector.js

2 files changed, 88 insertions, 59 deletions

diff --git a/data/js/dateselector.js b/data/js/dateselector.js
index 04be4cea..07506804 100644
--- a/data/js/dateselector.js
+++ b/data/js/dateselector.js
@@ -1,58 +1,87 @@
-function dateLoad(obj, serfunc) {
-  var year = tag('select', {style: 'width: 70px', onfocus:serfunc, onchange: dateSerialize, tabIndex: 10},
-    tag('option', {value:0}, mt('_js_date_year')),
-    tag('option', {value: 9999}, 'TBA')
-  );
-  for(var i=(new Date()).getFullYear()+5; i>=1980; i--)
-    year.appendChild(tag('option', {value: i}, i));
-
-  var month = tag('select', {style: 'width: 70px', onfocus:serfunc, onchange: dateSerialize, tabIndex: 10},
-    tag('option', {value:99}, mt('_js_date_month'))
-  );
-  for(var i=1; i<=12; i++)
-    month.appendChild(tag('option', {value: i}, i));
-
-  var day = tag('select', {style: 'width: 70px', onfocus:serfunc, onchange: dateSerialize, tabIndex: 10},
-    tag('option', {value:99}, mt('_js_date_day'))
-  );
-  for(var i=1; i<=31; i++)
-    day.appendChild(tag('option', {value: i}, i));
-
-  var div = tag('div', {date_obj: obj, date_serfunc: serfunc, date_val: obj ? obj.value : 0}, year, month, day);
-  dateSet(div, obj ? obj.value : 0);
-  return obj ? obj.parentNode.insertBefore(div, obj) : div;
-}
-
-function dateSet(div, val) {
-  val = typeof val == 'object' ? val[0] : val;
-  val = Math.floor(val) || 0;
-  val = [ Math.floor(val/10000), Math.floor(val/100)%100, val%100 ];
-  if(val[1] == 0) val[1] = 99;
-  if(val[2] == 0) val[2] = 99;
-  var l = byName(div, 'select');
-  for(var i=0; i<l.length; i++)
-    for(var j=0; j<l[i].options.length; j++)
-      l[i].options[j].selected = l[i].options[j].value == val[i];
-  dateSerialize(div.childNodes[0], true);
-}
-
-function dateSerialize(div, nonotify) {
-  var div = div && div.parentNode ? div.parentNode : this.parentNode;
-  var sel = byName(div, 'select');
-  var val = [
-    sel[0].options[sel[0].selectedIndex].value*1,
-    sel[1].options[sel[1].selectedIndex].value*1,
-    sel[2].options[sel[2].selectedIndex].value*1
-  ];
-  div.date_val = val[0] == 0 ? 0 : val[0] == 9999 ? 99999999 : val[0]*10000+val[1]*100+(val[1]==99?99:val[2]);
-  if(div.date_obj)
-    div.date_obj.value = div.date_val;
-  if(!nonotify && div.date_serfunc)
-    div.date_serfunc(div);
-}
-
-{
+/* Date selector widget for the 'release date'-style dates, with support for
+ * TBA and unknown month or day. Usage:
+ *
+ *   <input type="hidden" class="dateinput" .. />
+ *
+ * Will add a date selector to the HTML at that place, and automatically
+ * read/write the value of the hidden field. Alternative usage:
+ *
+ *   var obj = dateLoad(ref, serfunc);
+ *
+ * If 'ref' is set, it will behave as above with 'ref' being the input object.
+ * Otherwise it will return the widget object. The setfunc, if set, will be
+ * called whenever the date widget is focussed or its value is changed.
+ *
+ * The object returned by dateLoad() can be used as follows:
+ *   obj.date_val:      Always contains the currently selected date.
+ *   obj.dateSet(val):  Change the selected date
+ */
+(function(){
+
+  function load(obj, serfunc) {
+    var i;
+    var selops = {style: 'width: 70px', onfocus:serfunc, onchange: serialize, tabIndex: 10};
+
+    var year = tag('select', selops,
+      tag('option', {value:0}, mt('_js_date_year')),
+      tag('option', {value:9999}, 'TBA')
+    );
+    for(i=(new Date()).getFullYear()+5; i>=1980; i--)
+      year.appendChild(tag('option', {value: i}, i));
+
+    var month = tag('select', selops,
+      tag('option', {value:99}, mt('_js_date_month'))
+    );
+    for(i=1; i<=12; i++)
+      month.appendChild(tag('option', {value: i}, i));
+
+    var day = tag('select', selops,
+      tag('option', {value:99}, mt('_js_date_day'))
+    );
+    for(i=1; i<=31; i++)
+      day.appendChild(tag('option', {value: i}, i));
+
+    var div = tag('div', {
+        date_obj: obj,
+        date_serfunc: serfunc,
+        date_val: obj ? obj.value : 0
+      }, year, month, day);
+    div.dateSet = function(v){ set(div, v) };
+
+    set(div, div.date_val);
+    return obj ? obj.parentNode.insertBefore(div, obj) : div;
+  }
+
+  function set(div, val) {
+    val = +val || 0;
+    val = [ Math.floor(val/10000), Math.floor(val/100)%100, val%100 ];
+    if(val[1] == 0) val[1] = 99;
+    if(val[2] == 0) val[2] = 99;
+    var l = byName(div, 'select');
+    for(var i=0; i<l.length; i++)
+      for(var j=0; j<l[i].options.length; j++)
+        l[i].options[j].selected = l[i].options[j].value == val[i];
+    serialize(div, true);
+  }
+
+  function serialize(div, nonotify) {
+    div = div.dateSet ? div : this.parentNode;
+    var sel = byName(div, 'select');
+    var val = [
+      sel[0].options[sel[0].selectedIndex].value*1,
+      sel[1].options[sel[1].selectedIndex].value*1,
+      sel[2].options[sel[2].selectedIndex].value*1
+    ];
+    div.date_val = val[0] == 0 ? 0 : val[0] == 9999 ? 99999999 : val[0]*10000+val[1]*100+(val[1]==99?99:val[2]);
+    if(div.date_obj)
+      div.date_obj.value = div.date_val;
+    if(!nonotify && div.date_serfunc)
+      div.date_serfunc(div);
+  }
+
   var l = byClass('input', 'dateinput');
-  for(i=0; i<l.length; i++)
-    dateLoad(l[i]);
-}
+  for(var i=0; i<l.length; i++)
+    load(l[i]);
+
+  window.dateLoad = load;
+})()
diff --git a/data/js/filter.js b/data/js/filter.js
index 2b9252c5..6975b7c4 100644
--- a/data/js/filter.js
+++ b/data/js/filter.js
@@ -509,8 +509,8 @@ function filReleases() {
       filFOptions('patch',    mt('_rbrowse_patch'),   [ [1, mt('_rbrowse_patch_yes')],    [0, mt('_rbrowse_patch_no')] ]),
       filFOptions('freeware', mt('_rbrowse_freeware'),[ [1, mt('_rbrowse_freeware_yes')], [0, mt('_rbrowse_freeware_no')] ]),
       filFOptions('doujin',   mt('_rbrowse_doujin'),  [ [1, mt('_rbrowse_doujin_yes')],   [0, mt('_rbrowse_doujin_no')] ]),
-      [ 'date_after',  mt('_rbrowse_dateafter'),  dateLoad(null, filSelectField), function (c) { return [c.date_val] }, dateSet ],
-      [ 'date_before', mt('_rbrowse_datebefore'), dateLoad(null, filSelectField), function (c) { return [c.date_val] }, dateSet ],
+      [ 'date_after',  mt('_rbrowse_dateafter'),  dateLoad(null, filSelectField), function (c) { return [c.date_val] }, function(o,v) { o.dateSet(v) } ],
+      [ 'date_before', mt('_rbrowse_datebefore'), dateLoad(null, filSelectField), function (c) { return [c.date_val] }, function(o,v) { o.dateSet(v) } ],
       filFOptions('released', mt('_rbrowse_released'),[ [1, mt('_rbrowse_released_yes')], [0, mt('_rbrowse_released_no')] ])
     ],
     [ mt('_rbrowse_minage'),     filFSelect('minage',     mt('_rbrowse_minage'),     15, ages) ],