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 view = this;\r
  18             var metaTable = this.metaTable = this.node.find('table');\r
  19             \r
  20             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {\r
  21                 var newRow = view._addMetaRow('', '');\r
  22                 $(newRow.find('td div')[0]).focus();\r
  23                 sandbox.publish('metadataChanged', view.getMetadata());\r
  24             });\r
  25             \r
  26             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {\r
  27                 $(e.target).closest('tr').remove();\r
  28                 sandbox.publish('metadataChanged', view.getMetadata());\r
  29             });\r
  30             \r
  31             this.metaTable.on('keydown', '[contenteditable]', function(e) {\r
  32                 console.log(e.which);\r
  33                 if(e.which === 13) { \r
  34                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {\r
  35                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();\r
  36                     } else {\r
  37                         var input = $('<input>');\r
  38                         input.appendTo('body').focus();\r
  39                         view.node.find('.rng-module-metadataEditor-addBtn').focus();\r
  40                         input.remove();\r
  41                     }\r
  42                     e.preventDefault();\r
  43                 }\r
  44             });\r
  45             \r
  46             \r
  47             var onKeyUp = function(e) {\r
  48                 if(e.which !== 13)\r
  49                     sandbox.publish('metadataChanged', view.getMetadata());\r
  50             };\r
  51             this.metaTable.on('keyup', '[contenteditable]', _.throttle(onKeyUp, 500));\r
  52         },\r
  53         getMetadata: function() {\r
  54             var toret = {};\r
  55             this.node.find('tr').each(function() {\r
  56                 var tr = $(this);\r
  57                 var inputs = $(this).find('td [contenteditable]');\r
  58                 var key = $(inputs[0]).text();\r
  59                 var value = $(inputs[1]).text();\r
  60                 toret[key] = value;\r
  61             });\r
  62             return toret;\r
  63         },\r
  64         setMetadata: function(metadata) {\r
  65             var view = this;\r
  66             this.metaTable.find('tr').remove();\r
  67             _.each(_.keys(metadata), function(key) {    \r
  68                 view._addMetaRow(key, metadata[key]);\r
  69             });\r
  70         },\r
  71         _addMetaRow: function(key, value) {\r
  72             var newRow = $(_.template(itemTemplate)({key: key || '', value: value || ''}));\r
  73             newRow.appendTo(this.metaTable);\r
  74             return newRow;\r
  75         }\r
  76     };\r
  77     \r
  78     view.setup();\r
  79     \r
  80     return {\r
  81         start: function() {\r
  82             sandbox.publish('ready');\r
  83         },\r
  84         setDocument: function(xml) {\r
  85             view.setMetadata(transformations.getMetadata(xml));\r
  86             sandbox.publish('metadataSet');\r
  87         },\r
  88         getMetadata: function() {\r
  89             return transformations.getXML(view.getMetadata());\r
  90         },\r
  91         getView: function() {\r
  92             return view.node;\r
  93         },\r
  94         attachMetadata: function(document) {\r
  95             var toret = $('<div>');\r
  96             toret.append($(document));\r
  97             var meta = $('<metadata></metadata>\n').append(transformations.getXML(view.getMetadata()));\r
  98             \r
  99             var metadata = toret.find('metadata');\r
 100             if(metadata.length === 0) {\r
 101                 var section = toret.find('section');\r
 102                 section = section.length ? $(section[0]) : null;\r
 103                 if(section) {\r
 104                     section.prepend(meta);\r
 105                 }\r
 106             } else {\r
 107                 metadata.replaceWith(meta);\r
 108             }\r
 109             return toret.html();\r
 110         }\r
 111         \r
 112     };\r
 113 };\r
 114 \r
 115 });