Convert UI JavaScript to CoffeeScript for better readability.

.gitignore

@@ -1,3 +1,4 @@
+/assets/*.js.map
 /bower_components/
 /vendor/
 config.inc.php

assets/index.js

@@ -14,165 +14,6 @@ var marker_start_icons = [];
 var marker_finish_icons = [];
 var marker_icons = [];
 
-function updateDateNav(_dateFrom, _dateTo){
-    console.log("updateDateNav : INIT");
-    
-    if(typeof _dateFrom == "undefined") { _dateFrom = window.dateFrom; }
-    if(typeof _dateTo == "undefined") { _dateTo = window.dateTo; }
-
-    var diff = _dateTo.diff(_dateFrom, 'days');
-    //if(dateTo.isSame(dateFrom)){ diff = diff+1; }
-    
-    var datePrevTo = moment(_dateFrom).subtract(1, 'days');;
-    var datePrevFrom = moment(datePrevTo).subtract(diff, 'days');
-    
-    var dateNextFrom = moment(_dateTo).add(1, 'days');
-    var dateNextTo = moment(dateNextFrom).add(diff, 'days');
-    
-    //disable Next button
-    if(dateNextFrom.isAfter(moment())){
-        $('#nextButton').addClass('disabled');
-    }else{
-        $('#nextButton').removeClass('disabled');
-    }
-    
-    //disable today button
-    if(dateNextFrom.isSame(moment())){
-        $('#todayButton').addClass('disabled');
-        $('#livemap_on').removeClass('disabled');
-    }else{
-        $('#todayButton').removeClass('disabled');
-        $('#livemap_on').addClass('disabled');
-    }
-}
-
-function gotoDate(_dateFrom, _dateTo, pushState){
-    console.log("gotoDate : INIT");
-
-    var _dateFrom = (typeof _dateFrom !== 'undefined') ? moment(_dateFrom) : moment();
-    var _dateTo = (typeof _dateTo !== 'undefined') ? moment(_dateTo) : moment();
-    var pushState = (typeof pushState !== 'undefined') ? pushState : true;
-
-    window.dateFrom = _dateFrom;
-    window.dateTo = _dateTo;
-    
-    $('#dateFrom').val(moment(window.dateFrom).format('YYYY-MM-DD'));
-    $('#dateTo').val(moment(window.dateTo).format('YYYY-MM-DD'));
-
-    //push selected dates in window.history stack
-    if (pushState) {
-        var data = {
-            dateFrom: moment(window.dateFrom).format('YYYY-MM-DD'),
-            dateTo: moment(window.dateTo).format('YYYY-MM-DD')
-        };
-        var url = window.location.pathname + '?dateFrom=' + data.dateFrom + '&dateTo=' + data.dateTo;
-        console.log('Pushing state: %o with data: %o', url, data);
-        window.history.pushState(data, '', url); 
-    }
-    updateDateNav();
-    mapMarkers();
-    return false;
-}
-
-function gotoAccuracy()
-{
-    console.log("gotoAccuracy : INIT");
-    
-    var _accuracy = parseInt($('#accuracy').val());
-
-    if (_accuracy != window.accuracy) {
-        
-        Cookies.set('accuracy', _accuracy);
-        console.log("Accuracy cookie = " + Cookies.get('accuracy'));
-        
-        //location.href='./?dateFrom='+moment(dateFrom).format('YYYY-MM-DD') + '&dateTo=' + moment(dateTo).format('YYYY-MM-DD') + '&accuracy=' + _accuracy + '&trackerID=' + trackerID;
-        window.accuracy = _accuracy;
-        mapMarkers();
-    } else {
-        $('#configCollapse').collapse('hide');
-    }
-    return false;
-}
-
-function changeTrackerID()
-{
-    console.log("changeTrackerID : INIT");
-    
-    var _trackerID = $('#trackerID_selector').val();
-    
-    if (_trackerID != window.trackerID) {
-        Cookies.set('trackerID', _trackerID);
-        console.log("changeTrackerID : INFO trackerID cookie = " + Cookies.get('trackerID'));
-        
-        window.trackerID = _trackerID;
-        drawMap();
-    } else {
-        $('#configCollapse').collapse('hide');
-    }
-    return false;
-}
-
-function handlePopState(event)
-{
-    console.log("handlePopState : INIT");
-    console.log(event);
-    if (event.state) {
-        return gotoDate(event.state.dateFrom, event.state.dateTo, false);
-    }
-}
-
-function initUI() {
-    console.log("initUI : INIT");
-
-    var _GET = new URLSearchParams(window.location.search);
-
-    window.dateFrom = moment();
-    window.dateTo = moment();
-    if (_GET.has('dateFrom')) {
-        window.dateFrom = moment(_GET.get('dateFrom'));
-    }
-    if (_GET.has('dateTo')) {
-        window.dateTo = moment(_GET.get('dateTo'));
-    }
-    $('#dateFrom').val(window.dateFrom.format('YYYY-MM-DD'));
-    $('#dateTo').val(window.dateTo.format('YYYY-MM-DD'));
-
-    //date params event handlers
-    updateDateNav();
-
-    $('.input-daterange').datepicker({
-        format: 'yyyy-mm-dd',
-        language: window.datepicker_language,
-        endDate: '0d',
-    });
-
-    $('.input-daterange').datepicker().on('hide', function(e) {
-        return gotoDate($('#dateFrom').val(), $('#dateTo').val());
-    });
-
-    //accuracy event handlers
-    $('#accuracy').change(function(){
-        gotoAccuracy();
-    });
-    $('#accuracySubmit').click(function(){
-        gotoAccuracy();
-    });
-
-    $('#trackerID_selector').change(function(){
-        changeTrackerID();
-    });
-
-    $('#configCollapse').on('show.bs.collapse', function (e) {
-        $('#configButton').removeClass( "btn-default" ).addClass( "btn-primary" ).addClass( "active" );
-    })
-    $('#configCollapse').on('hide.bs.collapse', function (e) {
-        $('#configButton').addClass( "btn-default" ).removeClass( "btn-primary" ).removeClass( "active" );
-    })
-
-    //setup history popupstate event handler
-    window.onpopstate = handlePopState;
-}
-
 function initMap()
 {
     console.log("initMap : INIT");

assets/main.coffee

@@ -0,0 +1,125 @@
+window.handlePopState = (event) ->
+    console.log 'handlePopState: %o', event
+    if event.state
+        return gotoDate event.state.dateFrom, event.state.dateTo, false
+
+window.updateDateNav = (_dateFrom, _dateTo) ->
+    console.log 'updateDateNav: %o, %o', _dateFrom, _dateTo
+    
+    _dateFrom ?= window.dateFrom
+    _dateTo ?= window.dateTo
+
+    diff = _dateTo.diff _dateFrom, 'days'
+    # if(dateTo.isSame(dateFrom)){ diff = diff+1; }
+    
+    datePrevTo = moment(_dateFrom).subtract 1, 'days'
+    datePrevFrom = moment(datePrevTo).subtract diff, 'days'
+    
+    dateNextFrom = moment(_dateTo).add 1, 'days'
+    dateNextTo = moment(dateNextFrom).add diff, 'days'
+    
+    # disable Next button
+    if dateNextFrom.isAfter(moment())
+        $('#nextButton').addClass 'disabled'
+    else
+        $('#nextButton').removeClass 'disabled'
+    
+    # disable today button
+    if dateNextFrom.isSame(moment())
+        $('#todayButton').addClass 'disabled'
+        $('#livemap_on').removeClass 'disabled'
+    else
+        $('#todayButton').removeClass 'disabled'
+        $('#livemap_on').addClass 'disabled'
+
+window.gotoDate = (_dateFrom, _dateTo, pushState) ->
+    console.log 'gotoDate: %o, %o, %o', _dateFrom, _dateTo, pushState
+
+    _dateFrom = if _dateFrom? then moment(_dateFrom) else moment()
+    _dateTo = if _dateTo? then moment(_dateTo) else moment()
+    pushState = pushState ? true
+
+    window.dateFrom = _dateFrom
+    window.dateTo = _dateTo
+    
+    $('#dateFrom').val moment(window.dateFrom).format('YYYY-MM-DD')
+    $('#dateTo').val moment(window.dateTo).format('YYYY-MM-DD')
+
+    # push selected dates in window.history stack
+    if pushState
+        data =
+            dateFrom: moment(window.dateFrom).format 'YYYY-MM-DD'
+            dateTo: moment(window.dateTo).format 'YYYY-MM-DD'
+        url = "#{window.location.pathname}?dateFrom=#{data.dateFrom}&dateTo=#{data.dateTo}"
+        console.log 'Pushing state: %o with data: %o', url, data
+        window.history.pushState data, '', url
+
+    updateDateNav()
+    mapMarkers()
+    return false
+
+window.gotoAccuracy = ->
+    console.log 'gotoAccuracy'
+    
+    _accuracy = parseInt $('#accuracy').val()
+
+    if _accuracy != window.accuracy
+        Cookies.set 'accuracy', _accuracy
+        console.log 'Accuracy cookie = %o', Cookies.get 'accuracy'
+        
+        # location.href='./?dateFrom='+moment(dateFrom).format('YYYY-MM-DD') + '&dateTo=' + moment(dateTo).format('YYYY-MM-DD') + '&accuracy=' + _accuracy + '&trackerID=' + trackerID;
+        window.accuracy = _accuracy
+        mapMarkers()
+    else
+        $('#configCollapse').collapse 'hide'
+    return false
+
+window.changeTrackerID = ->
+    console.log 'changeTrackerID'
+    
+    _trackerID = $('#trackerID_selector').val()
+    
+    if _trackerID != window.trackerID
+        Cookies.set 'trackerID', _trackerID
+        console.log 'changeTrackerID: trackerID cookie = %o', Cookies.get 'trackerID'
+        
+        window.trackerID = _trackerID
+        drawMap()
+    else
+        $('#configCollapse').collapse 'hide'
+    return false
+
+window.initUI = ->
+    console.log 'BEGIN: initUI'
+
+    _GET = new URLSearchParams window.location.search
+
+    window.dateFrom = if _GET.has 'dateFrom' then moment _GET.get 'dateFrom' else moment()
+    window.dateTo = if _GET.has 'dateTo' then moment _GET.get 'dateTo' else moment()
+    $('#dateFrom').val window.dateFrom.format 'YYYY-MM-DD'
+    $('#dateTo').val window.dateTo.format 'YYYY-MM-DD'
+
+    # date params event handlers
+    updateDateNav()
+
+    $('.input-daterange').datepicker
+        format: 'yyyy-mm-dd'
+        language: window.datepicker_language
+        endDate: '0d'
+
+    $('.input-daterange').datepicker().on 'hide', (e) ->
+        return gotoDate $('#dateFrom').val(), $('#dateTo').val()
+
+    # accuracy event handlers
+    $('#accuracy').change -> gotoAccuracy()
+    $('#accuracySubmit').click -> gotoAccuracy()
+
+    $('#trackerID_selector').change -> changeTrackerID()
+
+    $('#configCollapse').on 'show.bs.collapse', (e) ->
+        $('#configButton').removeClass('btn-default').addClass('btn-primary').addClass('active')
+    $('#configCollapse').on 'hide.bs.collapse', (e) ->
+        $('#configButton').addClass('btn-default').removeClass('btn-primary').removeClass('active')
+
+    # setup history popupstate event handler
+    window.onpopstate = window.handlePopState

composer.json

@@ -14,10 +14,11 @@
     },
     "scripts": {
         "post-install-cmd": [
-            "bower install"
+            "bower install",
+            "@coffee"
         ],
         "coffee": [
-            "bower_components/coffeescript/bin/coffee -c assets/*.coffee"
+            "bower_components/coffeescript/bin/coffee -m -c assets/*.coffee"
         ]
     }
 }

templates/index.mustache

@@ -8,6 +8,7 @@
   {{>index_assets}}
 
   <!-- our scripts -->
+  <script type="text/javascript" src="assets/main.js"></script>
   <script type="text/javascript" src="assets/index.js"></script>
   <link rel="stylesheet" href="assets/style.css"/>
   <title>Your Own Tracks</title>