zena 1.2.7 → 1.2.8

data/public/javascripts/grid.js

@@ -17,6 +17,28 @@ Grid.log = function(what, msg) {
   log.innerHTML = log.innerHTML + '<br/><b>' + what + '</b> ' + msg
 }
 
+Grid.showValue = function(grid, attr, value) {
+  var show_h = grid.show[attr]
+  if (show_h == undefined) {
+    // try to find value from select
+    if (grid.helper) {
+      var pos = grid.pos[attr]
+      var input = grid.helper[pos]
+      if (input && input.tagName == 'SELECT') {
+        show_h = {}
+        grid.show[attr] = show_h
+        input.select('option').each(function(el) {
+          show_h[el.value] = el.innerHTML
+        })
+      }
+    }
+    if (!show_h) grid.show[attr] = false;
+  }
+
+  // cell.setAttribute('data-v', value)
+  return show_h ? show_h[value] : undefined
+}
+
 Grid.changed = function(cell, val, prev, skip_html) {
   var row = cell.up('tr')
   var table = row.up('table')
@@ -27,7 +49,7 @@ Grid.changed = function(cell, val, prev, skip_html) {
   var attr, id
   if (grid.attr_name) {
     attr = pos;
-    id = Grid.pos(row) - 1;
+    id = Grid.pos(row);
   } else {
     attr = grid.attr[pos];
     id = row.id;
@@ -38,9 +60,8 @@ Grid.changed = function(cell, val, prev, skip_html) {
   }
   
   if (!skip_html) {
-    var show_h = grid.show[attr] || {}
-    if (cell.hasAttribute('data-v')) cell.setAttribute('data-v', val.value)
-    cell.innerHTML = show_h[val.value] || val.show
+    var show = Grid.showValue(grid, attr, val.value)
+    cell.innerHTML = show || val.show
   }
   
   if (grid.onChange) {
@@ -53,8 +74,9 @@ Grid.changed = function(cell, val, prev, skip_html) {
       if (cell.hasAttribute('data-v')) cell.setAttribute('data-v', val.value)
     } 
   }
-  
+
   if (prev.value == val.value) return;
+
   if (cell.orig_value == val.value) {
     cell.removeClassName('changed')
     if (row.select('.changed').length == 0) {
@@ -112,9 +134,26 @@ Grid.buildObj = function(grid, row) {
   return id
 }
 
+Grid.selectAll = function(elem) {
+  var range, selection;
+  if (document.body.createTextRange) {
+    range = document.body.createTextRange()
+    range.moveToElementText(elem)
+    range.select()
+  } else if (window.getSelection) {
+    selection = window.getSelection()
+    range = document.createRange()
+    range.selectNodeContents(elem)
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
+}
+
 Grid.closeCell = function(e) {
   if (Grid.no_blur) return
-  var cell = e.tagName ? e : e.element().up()
+  var cell = e.tagName ? e : e.element()
+  if (cell.tagName != 'TD' && cell.tagName != 'TH') cell = cell.up('td') || cell.up('th')
+  if (!cell.hasClassName('in')) return
   var table = cell.up('table')
   var prev = cell.prev_value
   var val  = Grid.getValue(cell)
@@ -126,7 +165,10 @@ Grid.closeCell = function(e) {
       cell.removeClassName('on')
     }
   }
+  // 'input' is added when we have a form element
   cell.removeClassName('input')
+  // 'in' is added during edit
+  cell.removeClassName('in')
 
   Grid.changed(cell, val, prev)
 
@@ -145,9 +187,14 @@ Grid.pos = function(elem) {
   }
 }
 
-Grid.paste = function(event) {
+Grid.pasteTable = function(event) {
   var input = event.element();
-  var start_cell  = input.up();
+  var start_cell
+  if (input.tagName == 'TD') {
+    start_cell = input
+  } else {
+    start_cell = input.up();
+  }
   var row   = start_cell.up();
   var table = row.up('table');
   var row_offset = Grid.pos(row);
@@ -182,7 +229,11 @@ Grid.paste = function(event) {
     }
     if (lines.length == 1 && lines[0].length == 1) {
       // simple case
-      input.value = lines[0][0];
+      if (input == start_cell) {
+        start_cell.innerHTML = lines[0][0]
+      } else {
+        input.value = lines[0][0]
+      }
     } else {
       // copy/paste from spreadsheet
       table.grid.changes.push('start')
@@ -212,7 +263,11 @@ Grid.paste = function(event) {
           }
           var val = {value:tabs[j], show:tabs[j]}
           if (i==0 && j==0) {
-            input.value = val.value
+            if (input == cell) {
+              cell.innerHTML = lines[0][0]
+            } else {
+              input.value = val.value
+            }
             Grid.changed(cell, val, cell.prev_value, true)
             cell.prev_value = val
           } else if (!Grid.isReadOnly(cell)) {
@@ -234,7 +289,14 @@ Grid.paste = function(event) {
 Grid.keydown = function(event) {
   var input = event.element()
   var key = event.keyCode
-  var cell = input.up()
+  var cell
+  if (input.tagName == 'TD' || input.tagName == 'TH') {
+    // contenteditable
+    cell = input
+  } else {
+    cell = input.up()
+  }
+
   var grid = cell.up('table').grid
   if (grid.keydown && grid.keydown(event, key)) {
     event.stop()
@@ -247,34 +309,54 @@ Grid.keydown = function(event) {
       // wrap around on tab
       var row = cell.up('tr').nextSiblings()[0];
       if (!row) {
-        row = cell.up('tbody').childElements()[1];
+        row = cell.up('tbody').childElements()[grid.firstRow];
       }
       next = row.childElements()[0];
     }
-    Grid.openCell(next);
     event.stop();
+    Grid.openCell(next, false, true);
   } else if ((false && key == 37) || (key == 9 && event.shiftKey)) {
     // shift-tab + left key
     var prev = cell.previousSiblings()[0];
     if (!prev) {
       // wrap back around on shift+tab
       var row = cell.up('tr').previousSiblings()[0]
-      if (!row || row.hasClassName('action')) {
+      if (!row || (row.hasClassName('header') && !grid.attr_name) || row.hasClassName('action')) {
         row = cell.up('tbody').childElements().last();
       }
       prev = row.childElements().last();
       if (prev.hasClassName('action'))
         prev = prev.previousSiblings()[0];
     }
-    Grid.openCell(prev);
+    Grid.openCell(prev, true, true);
+    event.stop();
+  } else if ((key == 13 && event.shiftKey)) {
+	  // insert return
+		return true;
+  } else if ((false && key == 38)) {
+    // up
+    if (cell.childElements().first().tagName == 'SELECT' && event.shiftKey) {
+      return
+    }
+    var row = cell.up();
+    if (Grid.pos(row) == 1) {
+      // stop
+    } else {
+      var pos = Grid.pos(cell);
+      // move up
+      row = row.previousSiblings().first();
+      var next = row.childElements()[pos];
+      Grid.openCell(next, false, true);
+    }
     event.stop();
-  } else if ((key == 40 && event.altKey) || (key == 13 && !event.shiftKey)) {
+  } else if ((key == 40 && event.altKey) || (key == 13)) {
     // down
+    var input = cell.childElements().first()
     if (event.altKey) {
       Grid.copy(cell, 'down')
       event.stop()
       return false
-    } else if (cell.childElements().first().tagName == 'SELECT' && event.shiftKey) {
+    } else if (input && input.tagName == 'SELECT' && event.shiftKey) {
       return
     } else if (grid.autoSave) {
       // this will close cell
@@ -294,28 +376,12 @@ Grid.keydown = function(event) {
         row = crow.nextSiblings().first();
         var next = row.childElements()[0];
         setTimeout(function() {
-          Grid.openCell(next);      
+          Grid.openCell(next, false, true);      
         }, 100);
       }
     } else {
        next = row.childElements()[pos];
-       Grid.openCell(next);
-    }
-    event.stop();
-  } else if ((false && key == 38) || (key == 13 && event.shiftKey)) {
-    // up
-    if (cell.childElements().first().tagName == 'SELECT' && event.shiftKey) {
-      return
-    }
-    var row = cell.up();
-    if (Grid.pos(row) == 1) {
-      // stop
-    } else {
-      var pos = Grid.pos(cell);
-      // move up
-      row = row.previousSiblings().first();
-      var next = row.childElements()[pos];
-      Grid.openCell(next);
+       Grid.openCell(next, false, true);
     }
     event.stop();
   }
@@ -323,7 +389,20 @@ Grid.keydown = function(event) {
 }
 
 Grid.isReadOnly = function(cell) {
-  return cell.select('a').length > 0 || cell.getAttribute('data-m') == 'r' || cell.hasClassName('action')
+  return Grid.cellMode(cell) == 'r'
+}
+
+Grid.cellMode = function(cell) {
+  if (cell.hasAttribute('data-m')) return cell.getAttribute('data-m');
+
+  if (cell.select('a').length > 0 || cell.hasClassName('action') || cell.up('tr').hasClassName('action')) {
+    return 'r'
+  }
+  var col  = Grid.pos(cell)
+  var head = cell.up('table').select('th')[col]
+  var attr = head.getAttribute('data-a')
+  if (attr && (parseInt(attr) + '' == attr)) return 'a'; // column contains id to link
+  return head.getAttribute('data-m');
 }
 
 Grid.closeCheckbox = function() {
@@ -332,16 +411,82 @@ Grid.closeCheckbox = function() {
     Grid.need_close = false
   }
 }
-Grid.openCell = function(cell, get_next) {
+
+Grid.makeInput = function(cell, table, value) {
+  var w = cell.getWidth() - 5
+  var h = cell.getHeight() - 5
+  cell.addClassName('in')
+  
+  // Try to find a form for the cell
+  var input
+  if (table.grid.helper && cell.tagName != 'TH') {
+    var pos = Grid.pos(cell)
+    input = table.grid.helper[pos]
+    if (input) {
+      input = Element.clone(input, true)
+      cell.update(input)
+      if (input.type == 'checkbox') {
+        if (value == input.value) {
+          input.checked = true
+        }
+      } else {
+        if (value && value.strip() != '') input.value = value
+      }
+    }
+  }
+  
+  if (!input && !table.grid.contenteditable) {
+    // default input field
+    cell.update(Grid.default_input)
+    input = cell.childElements()[0]
+    input.value = value
+  }
+
+  if (input) {
+    cell.setAttribute('contenteditable', false)
+    // need blur on input field, etc...
+    cell.addClassName('input')
+    input.setStyle({
+      width: w + 'px',
+      height: h + 'px'
+    })
+    
+    if (input.type == 'checkbox') {
+      Grid.need_close = cell
+      // we cannot use 'blur' on checkbox because a click on the input does:
+      // BLUR + CLICK
+    } else {
+      input.observe('blur', Grid.closeCell)
+    }
+    input.observe('keydown', Grid.keydown)
+    if (table.grid.pasteTable) {
+      input.observe('paste', Grid.pasteTable)
+    }
+    input.focus()
+    input.select()
+  } else {
+    // contenteditable listener
+    if (table.grid.contenteditable) {
+      cell.setAttribute('contenteditable', true)
+    }
+    cell.observe('keydown', Grid.keydown)
+    if (table.grid.pasteTable) {
+      cell.observe('paste', Grid.pasteTable)
+    }
+    cell.observe('blur', Grid.closeCell)
+  }
+}
+
+Grid.openCell = function(cell, get_next, focus, event) {
   var get_next = get_next == undefined ? true : get_next
   Grid.closeCheckbox()
   
-  if (cell.hasClassName('input')) return;
+  if (cell.hasClassName('in')) return;
   if (Grid.isReadOnly(cell)) {
     if (get_next) {
       var n = Element.next(cell) || cell.up().nextSiblings().first().childElements()[0]
       if (n) {
-        return Grid.openCell(n)
+        return Grid.openCell(n, false, focus)
       } else {
         return false
       }
@@ -355,57 +500,23 @@ Grid.openCell = function(cell, get_next) {
   var value = val.value
   var table = cell.up('table')
 
-  if (table.grid.is_list) {
+  if (table.grid.is_list && Grid.cellMode(cell) == 'a') {
     if (value == 'on') {
       cell.setAttribute('data-v', 'off')
     } else {
       cell.setAttribute('data-v', 'on')
     }
+    cell.addClassName('in')
     Grid.closeCell(cell)
-  } else {
-    var w = cell.getWidth() - 5
-    var h = cell.getHeight() - 5
-    cell.addClassName('input')
-    
-    // Try to find a form for the cell
-    var input
-    if (table.grid.helper && cell.tagName != 'TH') {
-      var pos = Grid.pos(cell)
-      input = table.grid.helper[pos]
-      if (input) {
-        input = Element.clone(input, true)
-        cell.update(input)
-        if (input.type == 'checkbox') {
-          if (value == input.value) {
-            input.checked = true
-          }
-        } else {
-          if (value && value.strip() != '') input.value = value
-        }
-      }
-    }
-    
-    if (!input) {
-      // default input field
-      cell.update(Grid.default_input)
-      input = cell.childElements()[0]
-      input.value = value
-    }
-
-    input.setStyle({
-      width: w + 'px',
-      height: h + 'px'
-    })
-    
-    if (input.type == 'checkbox') {
-      Grid.need_close = cell
-    } else {
-      input.observe('blur', Grid.closeCell)
+    if (event.altKey) {
+      Grid.copy(cell, 'down', true)
     }
-    input.observe('keydown', Grid.keydown)
-    input.observe('paste', Grid.paste)
-    input.focus()
-    input.select()
+  } else {
+    Grid.makeInput(cell, table, val.value)
+  }
+  if (focus && cell.up('table').grid.contenteditable) {
+    cell.focus()
+    Grid.selectAll(cell)
   }
   return true
 }
@@ -425,20 +536,27 @@ Grid.click = function(event) {
     Grid.sort(cell)
     Event.stop(event)
   } else {
-    if (event.element().tagName == 'INPUT') return;
-    if (Grid.openCell(cell, false)) {
+    if (cell.hasClassName('in')) {
+      if (event.element().tagName == 'INPUT') {
+        // keep focus on checkbox
+        event.element().focus()
+      }
+      return;
+    }
+    if (Grid.openCell(cell, false, false, event)) {
       Event.stop(event)
     }
   }
 }
 
-Grid.valueFromInput = function(input) {
+Grid.valueFromInput = function(input, cell) {
   var val = {}
   if (input.tagName == 'SELECT') {
     val.value = input.value
     val.show  = input.select('option[value="'+val.value+'"]').first().innerHTML
   } else {
     if (input.type == 'checkbox') {
+      var cell = cell || input.up('td')
       val.value = input.checked ? input.value : (input.getAttribute('data-off') || cell.getAttribute('data-v'))
     } else {
       val.value = input.value
@@ -450,16 +568,18 @@ Grid.valueFromInput = function(input) {
 
 Grid.getValue = function(cell) {
   if (cell.hasClassName('input')) {
-    return Grid.valueFromInput(cell.childElements()[0])
+    return Grid.valueFromInput(cell.childElements()[0], cell)
   }
   var val = {}
   val.show = cell.innerHTML
   val.value = cell.getAttribute('data-v') || val.show
-  if (!cell.orig_value) cell.orig_value = val.value
+  if (cell.orig_value == undefined) {
+    cell.orig_value = val.value
+  }
   return val
 }
 
-Grid.copy = function(cell) {
+Grid.copy = function(cell, dir, is_list) {
   var table = cell.up('table')
   var row = cell.up()
   var pos = Grid.pos(cell)
@@ -476,9 +596,20 @@ Grid.copy = function(cell) {
   var len = rows.length
   for (var i = 0; i < len; i++) {
     var c = rows[i].childElements()[pos]
-    if (!Grid.isReadOnly(c)) {
+    if (c && !Grid.isReadOnly(c)) {
       var prev = Grid.getValue(c)
-      if (prev.value != val.value) Grid.changed(c, val, prev)
+      if (prev.value != val.value) {
+        if (is_list) {
+          if (val.value == 'on') {
+            c.addClassName('on')
+            c.setAttribute('data-v', 'on')
+          } else {
+            c.removeClassName('on')
+            c.setAttribute('data-v', 'off')
+          }
+        }
+        Grid.changed(c, val, prev)
+      }
     }
   }
   table.grid.changes.push('end')
@@ -495,8 +626,9 @@ Grid.addRow = function(table, row) {
     row_str = row_str + $(grid.newRow).innerHTML
   } else {
     var cells = row.childElements()
+    var td = grid.contenteditable ? '<td contenteditable="true"></td>' : '<td></td>'
     for (var i = 0; i < cells.length -1; i++) {
-      row_str = row_str + '<td></td>'
+      row_str = row_str + td
     }
   }
   row_str = row_str + Grid.Buttons(table.grid) + '</tr>';
@@ -527,9 +659,10 @@ Grid.addCol = function(table, cell) {
         after: "<th>[title]</th>"
       });
     } else {
+      var td = table.grid.contenteditable ? '<td contenteditable="true"></td>' : '<td></td>'
       cells = rows[i].select('td');
       cells[pos].insert({
-        after: "<td></td>"
+        after: td
       });
     }
   }
@@ -563,6 +696,11 @@ Grid.delRow = function(grid, row) {
 
 Grid.action = function(event, cell, row, is_col) {
   var span = event.findElement('span')
+  if (!span) {
+    Grid.closeCheckbox()
+    return
+  }
+  
   var table = event.findElement('table')
   var grid = table.grid
   if (span.hasClassName('add')) {
@@ -570,7 +708,8 @@ Grid.action = function(event, cell, row, is_col) {
       Grid.addCol(table, cell);
     } else {
       var new_row = Grid.addRow(table, row);
-      Grid.openCell(new_row.childElements()[0]);
+      var cell = new_row.childElements()[0]
+      Grid.openCell(cell, false, true)
     }
   } else if (span.hasClassName('del')) {
     if (is_col) {
@@ -732,6 +871,12 @@ Grid.addButtons = function(table) {
   return data
 }
 
+Grid.onSuccess = function(grid, id, method, done_count, todo_count) {
+	$$('.grid_done_'+grid.id).each(function(e) {
+		e.update(grid.msg.saved + ' ' + done_count + '/' + todo_count)
+	})
+}
+
 Grid.onFailure = function(grid, id, errors) {
   var cells = $(id).select('td')
   errors.each(function(pair) {
@@ -786,7 +931,7 @@ Grid.make = function(table, opts) {
     fdate: opts.fdate || table.getAttribute('data-fdate'),
     newRow: opts.newRow,
     counter: 0, // Used to create dom_ids for new objects
-    onSuccess: opts.onSuccess,
+    onSuccess: opts.onSuccess || Grid.onSuccess,
     onFailure: opts.onFailure || Grid.onFailure,
     onStart: opts.onStart || Grid.onStart,
     onChange: opts.onChange,
@@ -797,6 +942,9 @@ Grid.make = function(table, opts) {
     remove: opts.remove || opts.remove == undefined,
     keydown: opts.keydown,
     show: opts.show || {},
+		msg: opts.msg || {saved:'Saved'},
+    pasteTable: opts.pasteTable == undefined ? true : opts.pasteTable,
+    contenteditable: opts.contenteditable == undefined ? true : opts.contenteditable,
   };
   table.grid = grid
   grid.table = table
@@ -815,11 +963,15 @@ Grid.make = function(table, opts) {
     table.innerHTML = "<tr><th>" + msg + "</th></tr><tr><td></td></tr>";
   }
   
+  // Make sure header row has 'header' class
+  table.select('tr').first().addClassName('header')
   Grid.makeAttrPos(table)
   Grid.addButtons(table)
   
 
   if (grid.attr_name) {
+    // action buttons, header (editable), first row
+    grid.firstRow = 1
     table.insert({
       after: "<p class='grid_btn'><a class='undo' href='javascript:' onclick='Grid.undo(" + Grid.grid_c + ")'>undo</a></p>"
     });
@@ -831,6 +983,8 @@ Grid.make = function(table, opts) {
     grid.input = $("grid_a_" + Grid.grid_c);
     if (!empty) grid.input.value = Grid.serialize(table);
   } else {
+    // header, first row
+    grid.firstRow = 1
     // Otherwise each row is a new object and each column
     // corresponds to a different attribute (defined in the 
     // 'th' of the table).
@@ -844,11 +998,19 @@ Grid.make = function(table, opts) {
     }
     if (!grid.autoSave) {
       table.insert({
-        after: "<p class='grid_btn'><a class='save' href='javascript:' onclick='Grid.save(" + Grid.grid_c + ")'>save</a> <a class='undo' href='javascript:' onclick='Grid.undo(" + Grid.grid_c + ")'>undo</a></p>"
+        after: "<p class='grid_done grid_done_"+Grid.grid_c+"'></p><p class='grid_btn'><a class='save' href='javascript:' onclick='Grid.save(" + Grid.grid_c + ")'>save</a> <a class='undo' href='javascript:' onclick='Grid.undo(" + Grid.grid_c + ")'>undo</a></p>"
       });
     }
   }
 
+  if (grid.contenteditable) {
+    table.select('td').each(function(cell) {
+      var mode = Grid.cellMode(cell);
+      if (mode != 'r' && mode != 'a') {
+        cell.setAttribute('contenteditable', true)
+      }
+    })
+  }
   table.observe('click', Grid.click);
 }
 
@@ -958,7 +1120,7 @@ Grid.save = function(grid_id) {
             Grid.notify(table, attrs)
             Grid.clearChanges(grid.changes, id)
             if (grid.onSuccess) {
-              grid.onSuccess(id, 'put', done_count, todo_count)
+              grid.onSuccess(grid, id, 'put', done_count, todo_count)
             }
           },
           method: 'put'
@@ -985,7 +1147,14 @@ Grid.undo = function(grid_id, skip_undone) {
   var old = change._old
   for (attr in change) {
     if (attr == 'id' || attr == '_old') continue
-    var cell = $(change.id).childElements()[grid.pos[attr]]
+    var cell
+    if (grid.attr_name) {
+      // id = row position, attr = cell position
+      var row = grid.table.select('tr')[change.id]
+      cell = row.childElements()[attr]
+    } else {
+      cell = $(change.id).childElements()[grid.pos[attr]]
+    }
     var val  = old
     var value = old.value
     cell.innerHTML = val.show || ''
@@ -1139,7 +1308,7 @@ Grid.notify = function(table, changes) {
     var row
     if (grid.attr_name) {
       // attr table
-      row = rows[parseInt(obj_id)+1]
+      row = rows[parseInt(obj_id)]
     } else {
       row = $(obj_id)
     }
@@ -1201,7 +1370,8 @@ Grid.notify = function(table, changes) {
         cell.removeClassName('changed')
         cell.removeClassName('error')
         if (cell.getAttribute('data-v') != change[attr]) {
-          cell.innerHTML = change[attr]
+          var show = Grid.showValue(grid, attr, change[attr])
+          cell.innerHTML = show || change[attr]
         }
         cell.orig_value = change[attr]
         cell.prev_value = undefined
@@ -1232,6 +1402,7 @@ Grid.simulateClick = function(l) {
 }
 
 Grid.sort = function(cell) {
+  var numeric = cell.hasClassName('numeric')
   var table = cell.up('table')
   var desc = false
   if (cell.hasClassName('asc')) {
@@ -1242,15 +1413,21 @@ Grid.sort = function(cell) {
     table.select('.asc, .desc').each(function(e) { e.removeClassName('asc').removeClassName('desc') })
     cell.addClassName('asc')
   }
+  // TODO move buttons, headers in theaders and simply select('tbody').first()
+  // no need for splice then.
   var body = table.childElements()[0]
   var rows = body.select('tr')
   rows.splice(0,1)
   var col_i = Grid.pos(cell)
 
   rows.sort(function(a, b) {
-    var atxt = a.childElements()[col_i].innerHTML.stripTags().toLowerCase()
-    var btxt = b.childElements()[col_i].innerHTML.stripTags().toLowerCase()
-    return atxt.localeCompare(btxt) * (desc ? -1 : 1)
+    var atxt = a.childElements()[col_i].innerHTML.stripTags().strip().toLowerCase()
+    var btxt = b.childElements()[col_i].innerHTML.stripTags().strip().toLowerCase()
+    if (numeric) {
+      return ((parseFloat(atxt)||0) - (parseFloat(btxt)||0)) * (desc ? -1 : 1)
+    } else {
+      return atxt.localeCompare(btxt) * (desc ? -1 : 1)
+    }
   }).each(Element.prototype.appendChild, body)
 }       
 
@@ -1303,4 +1480,3 @@ Tags.make = function(elem, opts) {
   })
 }
 
-