Split metadataui into multiple file

Add example metadata UI into multiple categorized files.
And document how to load it using custom.js.

IPython/frontend/html/notebook/static/js/examples/metaui.example.js

@@ -0,0 +1,184 b''
+//----------------------------------------------------------------------------
+//  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.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// MetaUI Example
+//============================================================================
+
+/**
+ * Example Use for the MetaUI library
+ * add the following to your custom.js to load
+ * metadata UI for slideshow
+ *
+ * ```
+ * $.getScript('/static/js/examples/metaui.example.js');
+ * ```
+ */
+ // IIFE without asignement, we don't modifiy the IPython namespace
+(function (IPython) {
+    "use strict";
+
+    var MetaUI = IPython.MetaUI;
+
+
+    var raw_edit = function(cell){
+
+        var md = cell.metadata
+
+        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("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
+                        )
+                        .append($('<br/>'))
+                        .append(
+                            textarea
+                        )
+                    )
+            );
+        var editor = CodeMirror.fromTextArea(textarea[0], {
+            lineNumbers: true,
+            matchBrackets: true,
+        });
+        $(dialogform).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                buttons: {
+                    "Ok": function() {
+                        //validate json and set it
+                        try {
+                           var json = JSON.parse(editor.getValue());
+                           cell.metadata = json;
+                           $( this ).dialog( "close" );
+                        }
+                        catch(e)
+                        {
+                           alert('invalid json');
+                        }
+                    },
+                    Cancel: function() {
+                        $( this ).dialog( "close" );
+                    }
+                },
+                close: function() {
+                    //cleanup on close
+                    $(this).remove();
+                }
+        });
+        editor.refresh();
+    }
+
+    var add_raw_edit_button = function(div, cell) {
+        var button_container = $(div)
+        var button = $('<div/>').button({label:'Raw Edit'})
+                .click(function(){raw_edit(cell); return false;})
+        button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.rawedit',add_raw_edit_button);
+    var example_preset = []
+    example_preset.push('example.rawedit');
+
+
+    var simple_button = function(div, cell) {
+        var button_container = $(div);
+        var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
+        var fun = function(value){
+                try{
+                    if(value){
+                        cell.code_mirror.setOption('readOnly','nocursor')
+                        button.button('option','icons',{primary:'ui-icon-locked'})
+                    } else {
+                        cell.code_mirror.setOption('readOnly','false')
+                        button.button('option','icons',{primary:'ui-icon-unlocked'})
+                    }
+                } catch(e){}
+
+        }
+            fun(cell.metadata.ro)
+            button.click(function(){
+                    var v = cell.metadata.ro;
+                    var locked = !v;
+                    cell.metadata.ro = locked;
+                    fun(locked)
+                    })
+                .css('height','16px')
+                .css('width','35px');
+        button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.lock',simple_button);
+    example_preset.push('example.lock');
+
+    var toggle_test =  function(div, cell) {
+        var button_container = $(div)
+        var button = $('<div/>').button({label:String(cell.metadata.foo)});
+        button.click(function(){
+                    var v = cell.metadata.foo;
+                    cell.metadata.foo = !v;
+                    button.button("option","label",String(!v));
+                })
+       button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.toggle',toggle_test);
+    example_preset.push('example.toggle');
+
+    var checkbox_test =  function(div, cell) {
+        var button_container = $(div)
+
+        var chkb = $('<input/>').attr('type','checkbox');
+        var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
+        lbl.append(chkb);
+        chkb.attr("checked",cell.metadata.bar);
+        chkb.click(function(){
+                    var v = cell.metadata.bar;
+                    cell.metadata.bar = !v;
+                    chkb.attr("checked",!v);
+                })
+       button_container.append($('<div/>').append(lbl));
+
+    }
+
+    MetaUI.register_callback('example.checkbox',checkbox_test);
+    example_preset.push('example.checkbox');
+
+    var select_test =  function(div, cell) {
+        var button_container = $(div)
+
+        var select = $('<select/>');
+
+        select.append($('<option/>').attr('value','foo').text('foo'));
+        select.append($('<option/>').attr('value','bar').text('bar'));
+        select.append($('<option/>').attr('value','qux').text('qux'));
+        select.append($('<option/>').attr('value','zip').text('zip'));
+        select.val(cell.metadata.option);
+        select.change(function(){
+                cell.metadata.option = select.val();
+                });
+       button_container.append($('<div/>').append(select));
+
+    }
+
+    MetaUI.register_callback('example.select',select_test);
+    example_preset.push('example.select');
+
+    MetaUI.register_preset('example',example_preset);
+    MetaUI.set_preset('example');
+    console.log('Example extension for metadata editting loaded.');
+
+}(IPython));

IPython/frontend/html/notebook/static/js/examples/metaui.slideshow.js

@@ -0,0 +1,63 b''
+//----------------------------------------------------------------------------
+//  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.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// MetaUI Example
+//============================================================================
+
+/**
+ * Example Use for the MetaUI library
+ * add the following to your custom.js to load
+ * metadata UI for slideshow
+ *
+ * ```
+ * $.getScript('/static/js/examples/metaui.slideshow.js');
+ * ```
+ */
+ // IIFE without asignement, we don't modifiy the IPython namespace
+(function (IPython) {
+    "use strict";
+
+    var MetaUI = IPython.MetaUI;
+    var slideshow_preset = [];
+
+    var hslide = MetaUI.utils.checkbox_ui_generator('New Section',
+            function(md,value){
+                if (md.slideshow == undefined){md.slideshow = {}}
+                return md.slideshow.new_section = value},
+            function(md){ var ns = md.slideshow;
+                return (ns == undefined)? undefined: ns.new_section});
+
+    var vslide = MetaUI.utils.checkbox_ui_generator('New Subsection',
+            function(md,value){
+                if (md.slideshow == undefined){md.slideshow = {}}
+                return md.slideshow.new_subsection = value},
+            function(md){ var ns = md.slideshow;
+                return (ns == undefined)? undefined: ns.new_subsection});
+
+    var fragment = MetaUI.utils.checkbox_ui_generator('New Fragment',
+            function(md,value){
+                if (md.slideshow == undefined){md.slideshow = {}}
+                return md.slideshow.new_fragment = value},
+            function(md){ var ns = md.slideshow;
+                return (ns == undefined)? undefined: ns.new_fragment});
+
+
+    MetaUI.register_callback('slideshow.hslide',hslide);
+    MetaUI.register_callback('slideshow.vslide',vslide);
+    MetaUI.register_callback('slideshow.fragment',fragment);
+
+    slideshow_preset.push('slideshow.fragment');
+    slideshow_preset.push('slideshow.vslide');
+    slideshow_preset.push('slideshow.hslide');
+
+
+    MetaUI.register_preset('slideshow',slideshow_preset);
+    MetaUI.set_preset('slideshow');
+    console.log('Slideshow extension for metadata editting loaded.');
+
+}(IPython));

IPython/frontend/html/notebook/static/js/custom.js

@@ -28,6 +28,18 b''
  *            ]);
  *    });
  *
+ * Example :
+ *
+ *  Use `jQuery.getScript(url [, success(script, textStatus, jqXHR)] );`
+ *  to load custom script into the notebook.
+ *
+ *    // to load the metadata ui extension example.
+ *    $.getScript('/static/js/examples/metaui.example.js');
+ *    // or
+ *    // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert
+ *    $.getScript('/static/js/examples/metaui.slideshow.js');
+ *
+ *
  * @module IPython
  * @namespace IPython
  * @class customjs

IPython/frontend/html/notebook/static/js/metaui.js

@@ -369,79 +369,6 b' var IPython = (function (IPython) {'
 
         }
     }
-    var hslide = MetaUI.utils.checkbox_ui_generator('New Section',
-            function(md,value){
-                if (md.slideshow == undefined){md.slideshow = {}}
-                return md.slideshow.new_section = value},
-            function(md){ var ns = md.slideshow;
-                return (ns == undefined)? undefined: ns.new_section});
-
-    var vslide = MetaUI.utils.checkbox_ui_generator('New Subsection',
-            function(md,value){
-                if (md.slideshow == undefined){md.slideshow = {}}
-                return md.slideshow.new_subsection = value},
-            function(md){ var ns = md.slideshow;
-                return (ns == undefined)? undefined: ns.new_subsection});
-
-    var fragment = MetaUI.utils.checkbox_ui_generator('New Fragment',
-            function(md,value){
-                if (md.slideshow == undefined){md.slideshow = {}}
-                return md.slideshow.new_fragment = value},
-            function(md){ var ns = md.slideshow;
-                return (ns == undefined)? undefined: ns.new_fragment});
-
-
-    MetaUI.register_callback('slideshow.hslide',hslide);
-    MetaUI.register_callback('slideshow.vslide',vslide);
-    MetaUI.register_callback('slideshow.fragment',fragment);
-
-    example_preset.push('slideshow.fragment');
-    example_preset.push('slideshow.vslide');
-    example_preset.push('slideshow.hslide');
-
-
-    var checkbox_test =  function(div, cell) {
-        var button_container = $(div)
-
-        var chkb = $('<input/>').attr('type','checkbox');
-        var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
-        lbl.append(chkb);
-        chkb.attr("checked",cell.metadata.bar);
-        chkb.click(function(){
-                    var v = cell.metadata.bar;
-                    cell.metadata.bar = !v;
-                    chkb.attr("checked",!v);
-                })
-       button_container.append($('<div/>').append(lbl));
-
-    }
-
-    MetaUI.register_callback('example.checkbox',checkbox_test);
-    example_preset.push('example.checkbox');
-
-    var select_test =  function(div, cell) {
-        var button_container = $(div)
-
-        var select = $('<select/>');
-
-        select.append($('<option/>').attr('value','foo').text('foo'));
-        select.append($('<option/>').attr('value','bar').text('bar'));
-        select.append($('<option/>').attr('value','qux').text('qux'));
-        select.append($('<option/>').attr('value','zip').text('zip'));
-        select.val(cell.metadata.option);
-        select.change(function(){
-                cell.metadata.option = select.val();
-                });
-       button_container.append($('<div/>').append(select));
-
-    }
-
-    MetaUI.register_callback('example.select',select_test);
-    example_preset.push('example.select');
-
-    MetaUI.register_preset('example',example_preset);
-    MetaUI.register_preset('foo',['example.select','example.select']);
-    MetaUI.set_preset('example');
 
     IPython.MetaUI = MetaUI;