modules/metadataEditor/metadataEditor.js

   1 define([\r
   2 'libs/jquery-1.9.1.min',\r
   3 'libs/underscore-min',\r
   4 './transformations',\r
   5 'libs/text!./templates/main.html',\r
   6 'libs/text!./templates/item.html'\r
   7 ], function($, _, transformations, mainTemplate, itemTemplate) {\r
   8 \r
   9 'use strict';\r
  10 \r
  11 return function(sandbox) {\r
  12 \r
  13     \r
  14     var view = {\r
  15         node: $(_.template(mainTemplate)()),\r
  16         setup: function() {\r
  17             var metaTable = this.metaTable = this.node.find('table');\r
  18             \r
  19             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {\r
  20                 var newRow = view._addMetaRow('', '');\r
  21                 $(newRow.find('td div')[0]).focus();\r
  22                 //isDirty = true;\r
  23             });\r
  24             \r
  25             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {\r
  26                 $(e.target).closest('tr').remove();\r
  27                 //isDirty = true;\r
  28             });\r
  29             \r
  30             this.metaTable.on('keydown', '[contenteditable]', function(e) {\r
  31                 console.log(e.which);\r
  32                 if(e.which === 13) { \r
  33                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {\r
  34                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();\r
  35                     } else {\r
  36                         var input = $('<input>');\r
  37                         input.appendTo('body').focus()\r
  38                         view.node.find('.rng-module-metadataEditor-addBtn').focus();\r
  39                         input.remove();\r
  40                     }\r
  41                     e.preventDefault();\r
  42                 }\r
  43                 \r
  44             });\r
  45         },\r
  46         getMetaData: function() {\r
  47             var toret = {};\r
  48             this.node.find('tr').each(function() {\r
  49                 var tr = $(this);\r
  50                 var inputs = $(this).find('td [contenteditable]');\r
  51                 var key = $(inputs[0]).text();\r
  52                 var value = $(inputs[1]).text();\r
  53                 toret[key] = value;\r
  54             });\r
  55             return toret;\r
  56         },\r
  57         setMetadata: function(metadata) {\r
  58             var view = this;\r
  59             this.metaTable.find('tr').remove();\r
  60             _.each(_.keys(metadata), function(key) {    \r
  61                 view._addMetaRow(key, metadata[key]);\r
  62             });\r
  63         },\r
  64         _addMetaRow: function(key, value) {\r
  65             var newRow = $(_.template(itemTemplate)({key: key || '', value: value || ''}));\r
  66             newRow.appendTo(this.metaTable);\r
  67             return newRow;\r
  68         }\r
  69     }\r
  70     \r
  71     view.setup();\r
  72     \r
  73     return {\r
  74         start: function() {\r
  75             sandbox.publish('ready');\r
  76         },\r
  77         setMetadata: function(xml) {\r
  78             view.setMetadata(transformations.getMetadata(xml));\r
  79         },\r
  80         getMetadata: function() {\r
  81             return view.getMetadata();\r
  82         },\r
  83         getView: function() {\r
  84             return view.node;\r
  85         }\r
  86         \r
  87     };\r
  88 }\r
  89 \r
  90 });