Removed jQuery dependency

coffee/forms.coffee

-#window.Nette.addError = (elem, message) ->
-#    elem.focus() if elem.focus
-#
-#    if message
-#        elem.setCustomValidity(message)
-#        elem.valid = 0
-#        elem.checkValidity()
-
-$ ->
-    $('form:not(.nofocus):first input:first').focus()
-
-    create_addon = (input) ->
-        group = $('<div class="input-group">').insertBefore(input)
-        $(input).remove().appendTo(group)
-        $('<div class="input-group-addon">').appendTo(group)
-
-    $('input[type=range]').each ->
-        create_addon(@)
-        $(@).on 'change input', ->
-            $(@).next('.input-group-addon').text($(@).val())
-        $(@).change()
-
-    $('input[type^=date]').each ->
-        create_addon(@)
-            .html('<span class="glyphicon glyphicon-calendar"></span>')
-            .on 'click', -> $(@).prev('input').focus()
-
-    $('input[type=number]').on('focus', -> $(@).select())
-
-    $('input[type=radio][data-inline]').each ->
-        group = $('<label class="radio-inline">')
-            .append($(@).parent('label').html())
-        $(@).closest('.radio').replaceWith(group)
-
-    if /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
-        $('abbr').on 'click', ->
-            alert($(@).attr('title'))
-
-    $('tr').on 'click', ->
-        href = $(this).data('href')
-        document.location = href if href?
-
-    $('select[multiple]').addClass('form-control')
-
-    $('.tags-control').each ->
-        container = $(@)
-        tag_list = container.children('.tags')
-        text_input = container.find('input[type=text]')
-        submit_btn =  text_input.next().find('.btn')
-
-        generate_inputs = ->
-            container.children('input[type=hidden]').remove()
-            container.find('.tag .text').each ->
-                $('<input type="hidden" name="tags[]">')
-                    .appendTo(container)
-                    .val($(@).text())
-
-        submit_tag = ->
-            tag = text_input.val().trim()
-
-            if tag == ''
-                return
-
-            text_input.val('')
-
-            link = $('<a href="javascript:void(0)" class="tag"
-                         title="Click to remove tag">').appendTo(tag_list)
-            $('<span class="label label-default">')
-                .append($('<span class="text">').text(tag))
-                .append(' ')
-                .append($('<span class="glyphicon glyphicon-remove">'))
-                .appendTo(link)
-
+mkelem = (elemtype, classname='', attrs={}) ->
+    elem = document.createElement elemtype
+    elem.className = classname
+    elem[attr] = value for own attr, value of attrs
+    elem
+
+# replace an input element with an addon group
+create_addon = (input) ->
+    group = mkelem 'div', 'input-group'
+    input.parentNode.replaceChild group, input
+    group.appendChild input
+    addon = mkelem 'div', 'input-group-addon'
+    group.appendChild addon
+    addon
+
+# focus on first input field in first form
+document.querySelector('form:not(.nofocus)')?.querySelector('input')?.focus()
+
+# add an addon to range inputs displaying the currently selected value
+for e in document.querySelectorAll 'input[type=range]'
+    create_addon e
+
+    cb = -> @.nextElementSibling.innerHTML = @.value
+    e.addEventListener 'change', cb
+    e.addEventListener 'input', cb
+
+    cb.call e
+
+# add a calender addon to date inputs, and focus on input on addon click
+for e in document.querySelectorAll 'input[type^=date]'
+    addon = create_addon e
+    addon.innerHTML = '<span class="glyphicon glyphicon-calendar"></span>'
+    addon.addEventListener 'click', -> @.previousElementSibling.focus()
+
+# always select the whole number on a number type input to avoid backspacing
+for e in document.querySelectorAll 'input[type=number]'
+    e.addEventListener 'focus', -> @.select()
+
+# inline radio labels
+for e in document.querySelectorAll '.radio > label > input[type=radio][data-inline]'
+    group = mkelem 'label', 'radio-inline'
+    group.innerHTML = e.parentNode.innerHTML
+    label = e.parentNode.parentNode
+    label.parentNode.replaceChild group, label
+
+# make abbreviations clickable on mobile devices (since there is no hover)
+if /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test navigator.userAgent
+    for e in document.getElementsByTagName 'abbr'
+        e.addEventListener 'click', -> alert @.getAttribute 'title'
+
+# allow table rows to be links through the data-href attribute
+for e in document.querySelectorAll '[data-href]'
+    e.addEventListener 'click', ->
+        document.location = @.getAttribute 'data-href'
+
+# fix class names on select boxes with multiple="multiple"
+for e in document.querySelectorAll 'select[multiple]'
+    e.classList.add 'form-control'
+
+# tag list controls on score add/edit pages
+if container = document.querySelector '.tags-control'
+    tag_list = container.querySelector '.tags'
+    text_input = container.querySelector 'input[type=text]'
+    submit_btn =  text_input.nextElementSibling.querySelector '.btn'
+
+    generate_inputs = ->
+        for e in container.querySelectorAll 'input[type=hidden]'
+            e.parentNode.removeChild e
+
+        for e in container.querySelectorAll '.tag .text'
+            console.log e, e.textContent
+            container.appendChild mkelem 'input', '',
+                type: 'hidden', name: 'tags[]', value: e.textContent
+
+    submit_tag = ->
+        tag = text_input.value.trim()
+        return if tag == ''
+        text_input.value = ''
+
+        link = tag_list.appendChild mkelem 'a', 'tag',
+            href: 'javascript:void(0)'
+            title: 'Click to remove tag'
+
+        label = link.appendChild mkelem 'span', 'label label-default'
+        label.innerHTML =
+            '<span class="text"></span>
+             <span class="glyphicon glyphicon-remove"></span>'
+        label.firstElementChild.textContent = tag
+
+        generate_inputs()
+        text_input.focus()
+
+    text_input.addEventListener 'keydown', (e) ->
+        if e.keyCode == 13
+            e.preventDefault()
+            submit_tag()
+
+    submit_btn.addEventListener 'click', submit_tag
+
+    container.addEventListener 'click', (e) ->
+        if e.target.classList.contains 'glyphicon-remove'
+            label = e.target.parentNode
+            label.parentNode.removeChild label
             generate_inputs()
-            text_input.focus()
 
-        text_input.on 'keydown', (e) ->
-            if e.which == 13
+# add show/hide event to collapse targets (normally handled by Bootstrap)
+for e in document.querySelectorAll '[data-toggle=collapse][data-target]'
+    ((target) ->
+        if target
+            e.addEventListener 'click', (e) ->
                 e.preventDefault()
-                submit_tag()
-
-        submit_btn.on 'click', submit_tag
-
-        container.on 'click', '.tag', ->
-            $(@).remove()
-            generate_inputs()
+                target.classList.toggle 'in'
+    )(document.querySelector e.getAttribute 'data-target')

coffee/scores.coffee

-num = (s) -> if s == '' or isNaN(parseInt(s)) then 0 else parseInt(s)
-
-$ ->
-    $('.match-editable').each ->
-        table = $(@)
-        match_total = table.find('.match-total')
-        match_avg = table.find('.match-avg')
-        inputs = table.find('input')
-
-        sum_row = (row) ->
-            row_total = 0
-            prev_total = 0
-            incomplete = false
-
-            row.find('input').each ->
-                if $(@).val() == ''
-                    incomplete = true
-                    return false
-
-                row_total += num($(@).val())
-
-            if incomplete
-                return
-
-            if prev_row = row.prev('tr')
-                prev_total = num(prev_row.children('.total').text())
-
-            row.children('.row-total').text(row_total)
-            row.children('.total').text(prev_total + row_total)
-            row.children('.total').text(prev_total + row_total)
-
-        inputs.on 'change keyup', ->
-            sum = 0
-            count = 0
-
-            inputs.each ->
-                if $(@).val() != ''
-                    sum += num($(@).val())
-                    count++
-
-            sum_row($(@).closest('tr'))
-
-            match_total.text(sum)
-            match_avg.text(Math.round(sum / count * 10) / 10)
-
-            cell = $(@).closest('td')
-            cls = cell.attr('class').replace(/\s*val-\d+\s*/, '')
-            cell.attr('class', cls).addClass('val-' + $(@).val())
-
-        inputs.filter('[value=""]:first').focus()
-
-    $('textarea').on 'keyup', ->
-        $(@).height(0).height($(@).prop('scrollHeight'))
-
-        desired_scroll = $(@).offset().top - 60
-
-        if $(document).scrollTop() < desired_scroll
-            $(window).scrollTop(desired_scroll)
-    .keyup()
-
-    $('#toggle-colored').on 'click', ->
-        $(@).toggleClass('active').blur()
-        $('#match').toggleClass('colored')
-
-        if $('#match').hasClass('colored') and window.hasOwnProperty('localStorage')
-            localStorage.setItem('colored-scores', true)
-            console.log localStorage.getItem('colored-scores')
+if table = document.querySelector '.match-editable'
+    inputs = table.getElementsByTagName 'input'
+    rows = table.children[1].children
+    match_total = table.querySelector '.match-total'
+    match_avg = table.querySelector '.match-avg'
+
+    w = table.querySelector('tbody tr').getElementsByTagName('input').length
+    h = inputs.length / w
+    scores = []
+
+    sub = (row) -> rows[row].children[w + 1]
+    tot = (row) -> rows[row].children[w + 2]
+    num = (s) -> if s == '' or isNaN parseInt s then 0 else parseInt s
+    timer = 0
+
+    set_score = (col, row, score) ->
+        if score != scores[row * w + col]
+            scores[row * w + col] = score
+            clearTimeout timer
+            timer = setTimeout (-> render row), 50
+            true
         else
-            localStorage.removeItem('colored-scores')
-
-    if window.hasOwnProperty('localStorage') and localStorage.getItem('colored-scores')
-        $('#match').addClass('colored')
-        $('#toggle-colored').addClass('active')
+            false
+
+    render = (dirty_row) ->
+        subtotal = 0
+        subtotal += scores[dirty_row * w + col] for col in [0...w]
+        sub(dirty_row).innerHTML = subtotal
+
+        total = if dirty_row then num tot(dirty_row - 1).innerHTML else 0
+        for row in [dirty_row...h]
+            total += num sub(row).innerHTML
+            tot(row).innerHTML = total
+
+        match_total.innerHTML = total
+        match_avg.innerHTML = Math.round(total / inputs.length * 10) / 10
+
+    for input, i in inputs
+        scores.push num input.value
+        ((col, row) ->
+            cell = input.parentNode
+            cb = ->
+                value = num @.value
+                if set_score col, row, value
+                    cell.className = cell.className.replace /val-\d+/, 'val-' + value
+            input.addEventListener 'change', cb
+            input.addEventListener 'keyup', cb
+        )(i % w, Math.floor i / w)
+
+    render 0
+    table.querySelector('input[value=""]')?.focus()
+
+# notes area grows automatically with each added line
+if notes = document.getElementById('notes')
+    cb = ->
+        @.style.height = 0
+        @.style.height = @.scrollHeight + 'px'
+    notes.addEventListener 'keyup', cb
+    cb.call notes
+
+# color toggling + persistence in local storage
+match = document.getElementById 'match'
+toggle_color = document.getElementById('toggle-colored')
+
+if 'localStorage' of window and localStorage.getItem 'colored-scores'
+    match.classList.add 'colored'
+    toggle_color.classList.add 'active'
+
+toggle_color.addEventListener 'click', ->
+    @.classList.toggle 'active'
+    @.blur()
+    match.classList.toggle 'colored'
+
+    if 'localStorage' of window
+        if match.classList.contains 'colored'
+            localStorage.setItem 'colored-scores', true
+        else
+            localStorage.removeItem 'colored-scores'

templates/layout.latte

@@ -46,9 +46,6 @@
         <div class="container">
             {include content}
         </div>
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-        {*<script src="js/netteForms.js"></script>*}
         <script src="js/forms.js"></script>
         {ifset #scripts}
         {include scripts}

templates/match/list.latte

@@ -19,8 +19,8 @@
         <a href="match" class="btn btn-sm btn-default" title="{_'Add new match'}">
             <span class="glyphicon glyphicon-plus"></span>
         </a>
-        <a data-toggle="collapse" href="#filter" title="{_'Filter'}"
-                class="btn btn-sm btn-default">
+        <a href="#filter" class="btn btn-sm btn-default" title="{_'Filter'}"
+                data-toggle="collapse" data-target="#filter">
             <span class="glyphicon glyphicon-filter"></span>
         </a>
     </div>

templates/match/scores.latte

@@ -60,8 +60,8 @@
         <h3 class="panel-title">{_'Notes'}</h3>
     </div>
     <div class="panel-body">
-        <textarea name="notes" wrap="hard" placeholder="{_'Click here to make a note'}"
-            >{$match->notes}</textarea>
+        <textarea id="notes" name="notes" wrap="hard"
+            placeholder="{_'Click here to make a note'}">{$match->notes}</textarea>
     </div>
 </div>
 

templates/user/plot.latte

@@ -10,11 +10,12 @@
 {/block}
 
 {block scripts}
-<script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
-<script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script>
-<script type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
-<script type="text/javascript" src="jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
-<script type="text/javascript">
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+<script src="jqplot/jquery.jqplot.min.js"></script>
+<script src="jqplot/plugins/jqplot.highlighter.min.js"></script>
+<script src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
+<script src="jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
+<script>
     window.data = [
         {foreach $matches as $match}
         [{$match->created_at|date:'%Y-%m-%d %H:%M'}, {match_avg_score($match)}],
@@ -24,5 +25,5 @@
         title: {_'Average arrow score over time'}
     };
 </script>
-<script type="text/javascript" src="js/plot.js"></script>
+<script src="js/plot.js"></script>
 {/block}