move edit_metadata to IPython.dialog

IPython/html/static/base/js/dialog.js

@@ -1,84 +1,143
 //----------------------------------------------------------------------------
 //  Copyright (C) 2013  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Utility for modal dialogs with bootstrap
 //============================================================================
 
 IPython.namespace('IPython.dialog');
 
 IPython.dialog = (function (IPython) {
     "use strict";
     
     var modal = function (options) {
         var dialog = $("<div/>").addClass("modal").attr("role", "dialog");
         dialog.append(
             $("<div/>")
                 .addClass("modal-header")
                 .append($("<button>")
                     .addClass("close")
                     .attr("data-dismiss", "modal")
                     .html("&times;")
                 ).append(
                     $("<h3/>").text(options.title || "")
                 )
         ).append(
             $("<div/>").addClass("modal-body").append(
                 options.body || $("<p/>")
             )
         );
         
         var footer = $("<div/>").addClass("modal-footer");
         
         for (var label in options.buttons) {
             var btn_opts = options.buttons[label];
             var button = $("<button/>")
                 .addClass("btn")
                 .attr("data-dismiss", "modal")
                 .text(label);
             if (btn_opts.click) {
                 button.click($.proxy(btn_opts.click, dialog));
             }
             if (btn_opts.class) {
                 button.addClass(btn_opts.class);
             }
             footer.append(button);
         }
         dialog.append(footer);
         // hook up on-open event
         dialog.on("shown", function() {
             setTimeout(function() {
                 footer.find("button").last().focus();
                 if (options.open) {
                     $.proxy(options.open, dialog)();
                 }
             }, 0);
         });
         
         // destroy dialog on hide, unless explicitly asked not to
-        if (options.destroy == undefined || options.destroy) {
+        if (options.destroy === undefined || options.destroy) {
             dialog.on("hidden", function () {
                 dialog.remove();
             });
         }
         if (options.reselect_cell !== false) {
             dialog.on("hidden", function () {
                 if (IPython.notebook) {
                     var cell = IPython.notebook.get_selected_cell();
                     if (cell) cell.select();
                 }
             });
         }
         
         return dialog.modal(options);
-    }
+    };
+
+    var edit_metadata = function (md, callback, name) {
+        name = name || "Cell";
+        var error_div = $('<div/>').css('color', 'red');
+        var message = 
+            "Manually edit the JSON below to manipulate the metadata for this " + name + "." +
+            " We recommend putting custom metadata attributes in an appropriately named sub-structure," +
+            " so they don't conflict with those of others.";
+
+        var textarea = $('<textarea/>')
+            .attr('rows', '13')
+            .attr('cols', '80')
+            .attr('name', 'metadata')
+            .text(JSON.stringify(md || {}, null, 2));
+        
+        var dialogform = $('<div/>').attr('title', 'Edit the metadata')
+            .append(
+                $('<form/>').append(
+                    $('<fieldset/>').append(
+                        $('<label/>')
+                        .attr('for','metadata')
+                        .text(message)
+                        )
+                        .append(error_div)
+                        .append($('<br/>'))
+                        .append(textarea)
+                    )
+            );
+        var editor = CodeMirror.fromTextArea(textarea[0], {
+            lineNumbers: true,
+            matchBrackets: true,
+            indentUnit: 2,
+            autoIndent: true,
+            mode: 'application/json',
+        });
+        IPython.dialog.modal({
+            title: "Edit " + name + " Metadata",
+            body: dialogform,
+            buttons: {
+                OK: { class : "btn-primary",
+                    click: function() {
+                        // validate json and set it
+                        var new_md;
+                        try {
+                            new_md = JSON.parse(editor.getValue());
+                        } catch(e) {
+                            console.log(e);
+                            error_div.text('WARNING: Could not save invalid JSON.');
+                            return false;
+                        }
+                        callback(new_md);
+                    }
+                },
+                Cancel: {}
+            }
+        });
+        editor.refresh();
+    };
     
     return {
         modal : modal,
+        edit_metadata : edit_metadata,
     };
 
 }(IPython));

IPython/html/static/notebook/js/celltoolbarpresets/default.js

@@ -1,90 +1,46
 //----------------------------------------------------------------------------
 //  Copyright (C) 2012  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CellToolbar Default
 //============================================================================
 
 /**
  * Example Use for the CellToolbar library
  */
  // IIFE without asignement, we don't modifiy the IPython namespace
 (function (IPython) {
     "use strict";
 
     var CellToolbar = IPython.CellToolbar;
 
     var raw_edit = function(cell){
-
-        var md = cell.metadata
-        var error_div = $('<div/>').css('color','red')
-
-        var textarea = $('<textarea/>')
-            .attr('rows','13')
-            .attr('cols','75')
-            .attr('name','metadata')
-            .text(JSON.stringify(md, null,4)||'');
-        var dialogform = $('<div/>').attr('title','Edit the metadata')
-            .append(
-                $('<form/>').append(
-                    $('<fieldset/>').append(
-                        $('<label/>')
-                        .attr('for','metadata')
-                        .text("Manually edit the JSON below to manipulate the metadata for this cell. This assumes you know what you are doing and won't complain if it breaks your notebook. We also recommend putting your metadata attributes in an appropriately named sub-structure, so they don't conflict with those of others.")
-                        )
-                        .append(error_div)
-                        .append($('<br/>'))
-                        .append(
-                            textarea
-                        )
-                    )
-            );
-        var editor = CodeMirror.fromTextArea(textarea[0], {
-            lineNumbers: true,
-            matchBrackets: true,
-        });
-        IPython.dialog.modal({
-            title: "Edit Cell Metadata",
-            body: dialogform,
-                buttons: {
-                    "OK": { class : "btn-primary",
-                        click: function() {
-                        //validate json and set it
-                        try {
-                           var json = JSON.parse(editor.getValue());
-                           cell.metadata = json;
-                        } catch(e) {
-                           error_div.text('Warning, invalid json, not saved');
-                           return false;
-                        }
-                    }},
-                    Cancel: {}
-                }
+        IPython.dialog.edit_metadata(cell.metadata, function (md) {
+            cell.metadata = md;
         });
-        editor.refresh();
-    }
+    };
 
     var add_raw_edit_button = function(div, cell) {
         var button_container = div;
         var button = $('<button/>')
             .addClass("btn btn-mini")
             .text("Raw Edit")
             .click( function () {
                 raw_edit(cell);
                 return false;
             });
         button_container.append(button);
-    }
+    };
 
-    CellToolbar.register_callback('default.rawedit',add_raw_edit_button);
-    var example_preset = []
+    CellToolbar.register_callback('default.rawedit', add_raw_edit_button);
+    var example_preset = [];
     example_preset.push('default.rawedit');
 
-    CellToolbar.register_preset('Default',example_preset);
+    CellToolbar.register_preset('Default', example_preset);
     console.log('Default extension for metadata editing loaded.');
 
 }(IPython));