Changeset 10359


Ignore:
Timestamp:
12/19/10 23:51:30 (17 months ago)
Author:
SvenDowideit
Message:

Item10175: add jquery plugin from  http://jadesoul.org/projects/jsoneditor/index.html

Location:
trunk/JSONEditorJQueryPlugin
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/JSONEditorJQueryPlugin/lib/Foswiki/Plugins/JSONEditorJQueryPlugin/MANIFEST

    r10348 r10359  
    11# Release manifest for JSONEditorJQueryPlugin 
    2 data/System/JSONEditorJQueryPlugin.txt 0644 Documentation 
    3 lib/Foswiki/Plugins/JSONEditorJQueryPlugin.pm 0644 Perl module 
    4  
     2lib/Foswiki/Plugins/JSONEditorJQueryPlugin/JSONEDITOR.pm 
     3lib/Foswiki/Plugins/JSONEditorJQueryPlugin.pm 
     4data/System/JSONEditorJQueryPlugin.txt 
     5data/System/JQueryJSONEditor.txt 
     6pub/System/JSONEditorJQueryPlugin/jquery.json-2.2.min.js 
     7pub/System/JSONEditorJQueryPlugin/jsoneditor/images/icon-list-new.gif 
     8pub/System/JSONEditorJQueryPlugin/jsoneditor/images/tree_folder-open.gif 
     9pub/System/JSONEditorJQueryPlugin/jsoneditor/images/arrows.gif 
     10pub/System/JSONEditorJQueryPlugin/jsoneditor/images/icon-list-new-green.gif 
     11pub/System/JSONEditorJQueryPlugin/jsoneditor/images/icon-folder-new-green.gif 
     12pub/System/JSONEditorJQueryPlugin/jsoneditor/images/tree_empty.gif 
     13pub/System/JSONEditorJQueryPlugin/jsoneditor/images/icon-folder-new.gif 
     14pub/System/JSONEditorJQueryPlugin/jsoneditor/images/icon-list.gif 
     15pub/System/JSONEditorJQueryPlugin/jsoneditor/images/delete.gif 
     16pub/System/JSONEditorJQueryPlugin/jsoneditor/images/tree_folder_closed.gif 
     17pub/System/JSONEditorJQueryPlugin/jsoneditor/jsoneditor.css 
     18pub/System/JSONEditorJQueryPlugin/jsoneditor/jquery.jsoneditor.js 
     19pub/System/JSONEditorJQueryPlugin/index.html 
     20pub/System/JSONEditorJQueryPlugin/json-editor-demo.js 

  • trunk/JSONEditorJQueryPlugin/pub/System/JSONEditorJQueryPlugin/jsoneditor/jquery.jsoneditor.js

    r10350 r10359  
    1 %META:TOPICINFO{author="ProjectContributor" date="1258383446" format="1.1" version="1.2"}% 
    2 %META:TOPICPARENT{name="JSONEditorJQueryPlugin"}% 
    3 ---+ %TOPIC% 
    4 %JQPLUGINS{"jsoneditor" 
    5   format=" 
    6     Homepage: $homepage <br /> 
    7     Author(s): $author <br /> 
    8     Version: $version 
    9   " 
    10 }% 
     1/* 
     2 * Json Editor plugin for jQuery 
     3 * 
     4 * Licensed under the Apache License: 
     5 * http://www.apache.org/licenses/LICENSE-2.0 
     6 *  
     7 * $Date: 2010-5-10 $ 
     8 * $Author: Jadesoul $ 
     9 * (Home Page: http://jadesoul.org , Blog: http://www.jadesoul.org) 
     10 */ 
    1111 
    12 %STARTSECTION{"summary"}% 
    1312 
    14 %ENDSECTION{"summary"}% 
     13$.fn.jsoneditor = function(cmd, options) { 
     14        if (cmd=='init') { 
     15                 
     16                if (options) { 
     17                        $.extend($.jsoneditor.options, options); 
     18                         
     19                } else { 
     20                        if ($(this).children('div.je-node').length!=0) return; 
     21                         
     22                        if ($(this).children('textarea').length==1) { 
     23                                try{ 
     24                                        var json=$.evalJSON($(this).children('textarea:first').val()); 
     25                                        $.jsoneditor.options.data=json; 
     26                                } catch(e) {} 
    1527 
    16 ---++ Examples 
     28                        } else if ($(this).children('div.je-node').length==0) { 
     29                                try{ 
     30                                        json=$.evalJSON($(this).html()); 
     31                                        $.jsoneditor.options.data=json; 
     32                                } catch(e) {} 
     33                        } 
     34                } 
    1735 
     36                $(this).html($.jsoneditor.initUI($.jsoneditor.options)); 
     37        } else if (cmd=='input') { 
     38                if ($(this).children('div.je-node').length==0) return; 
     39                var json=$.jsoneditor.dumpNode($(this).children('div.je-node:first')); 
     40                $.jsoneditor.options.data=json; 
     41                $(this).html('<textarea style="width:95%; height:500px">'+$.toJSON(json)+'</textarea>'); 
     42        } else if (cmd=='dump') { 
     43                if ($(this).children('div.je-node').length==0) return; 
     44                var json=$.jsoneditor.dumpNode($(this).children('div.je-node:first')); 
     45                $.jsoneditor.options.data=json; 
     46                $(this).html($.toJSON(json)); 
     47                 
     48        } else if (cmd=='getjson') { 
     49                var json={}; 
     50                if ($(this).children('div.je-node').length!=0) { 
     51                        var json=$.jsoneditor.dumpNode($(this).children('div.je-node:first')); 
     52                } else { 
     53                        var json=$.jsoneditor.options.data; 
     54                } 
     55                return json; 
     56        } 
     57}; 
     58 
     59 
     60 
     61$.jsoneditor = { 
     62         
     63        options:{root:'json', data:{}}, 
     64         
     65        initUI:function(options) { 
     66                var html=this.parseNode(options.root, options.data, 0, true); 
     67                return html; 
     68        }, 
     69         
     70        parseNode:function(key, node, layer, root) { 
     71                var children=[]; 
     72                 
     73 
     74                for (var i in node) { 
     75                        var el=node[i]; 
     76                        if (typeof(el)==='object') children.push(this.parseNode(i, el, layer+1)); 
     77                        else if (typeof(el)==='string' || typeof(el)==='number') children.push(this.parseLeaf(i, el, layer+1)); 
     78                } 
     79                var html='<div class="je-node">'; 
     80                 
     81                html+=this.repeat('<span class="je-tab"></span>', layer); 
     82                 
     83                html+='<span class="je-tree-minus-icon" onclick="$.jsoneditor.toggleNode(this);"></span>'; 
     84                html+='<span class="je-tree-node-open-icon"></span>'; 
     85                 
     86                if (!root) html+='<span class="je-key"><input class="je-key-input" type="text" value="'+key+'"/></span>'; 
     87                else html+='<span class="je-key"><input style="border:none;background:#FFF;" disabled="disabled" class="je-key-input" type="text" value="'+key+'"/></span>'; 
     88                 
     89                html+='<span class="je-node-op">'; 
     90                 
     91                if (!root) html+='<span class="je-insert-node-brother" onclick="$.jsoneditor.insertNodeBrother(this);" title="insert a node before this node"></span><span class="je-insert-leaf-brother" onclick="$.jsoneditor.insertLeafBrother(this);"  title="insert a leaf before this node"></span>'; 
     92                html+='<span class="je-add-node-child" onclick="$.jsoneditor.addNodeChild(this);" title="append a child node"></span><span class="je-add-leaf-child" onclick="$.jsoneditor.addLeafChild(this);" title="append a child leaf"></span>'; 
     93                if (!root) html+='<span class="je-del" onclick="$.jsoneditor.del(this);"  title="delete this node"></span>'; 
     94                 
     95                html+='</span>'; 
     96                 
     97                html+='<div class="je-children">'+children.join('')+'</div>'; 
     98                 
     99                html+='</div>'; 
     100                 
     101                return html; 
     102        }, 
     103        parseLeaf:function(key, val, layer) { 
     104                var html='<div class="je-leaf">'; 
     105                 
     106                html+=this.repeat('<span class="je-tab"></span>', layer+1); 
     107 
     108                html+='<span class="je-tree-leaf-icon"></span>'; 
     109                 
     110                html+='<span class="je-key"><input class="je-key-input" type="text" value="'+key+'"/></span>'; 
     111                html+=' : <span class="je-val"><input class="je-val-input" type="text" value="'+val+'"/></span>'; 
     112                 
     113                html+='<span class="je-leaf-op"><span class="je-insert-node-brother" onclick="$.jsoneditor.insertNodeBrother(this);" title="insert a node before this leaf"></span><span class="je-insert-leaf-brother" onclick="$.jsoneditor.insertLeafBrother(this);"  title="insert a leaf before this leaf"></span><span class="je-del" onclick="$.jsoneditor.del(this);"  title="delete this leaf"></span></span>'; 
     114 
     115                html+='</div>'; 
     116                 
     117                return html; 
     118        }, 
     119         
     120        repeat:function(str, count) { 
     121                var s=''; 
     122                for (var i=0; i<count; i++) s+=str; 
     123                return s; 
     124        }, 
     125         
     126        toggleNode:function(node) { 
     127                if ($(node).hasClass('je-tree-plus-icon')) { 
     128                        $(node).nextAll('.je-tree-node-closed-icon:first').toggleClass('je-tree-node-closed-icon').toggleClass('je-tree-node-open-icon'); 
     129                } else { 
     130                        $(node).nextAll('.je-tree-node-open-icon:first').toggleClass('je-tree-node-closed-icon').toggleClass('je-tree-node-open-icon'); 
     131                } 
     132                $(node).toggleClass('je-tree-minus-icon').toggleClass('je-tree-plus-icon').nextAll('div.je-children:first').slideToggle('fast'); 
     133        }, 
     134         
     135        len:function(obj) { 
     136                var count=0; 
     137                for (var i in obj) { 
     138                        count++; 
     139                } 
     140                return count; 
     141        }, 
     142         
     143        addNodeChild:function(span) { 
     144                var layer=$(span).parent().prevAll('span.je-tab').size(); 
     145                $(span).parent().nextAll('div.je-children:first').append(this.parseNode('', {}, layer+1, false)).show(); 
     146        }, 
     147         
     148        addLeafChild:function(span) { 
     149                var layer=$(span).parent().prevAll('span.je-tab').size(); 
     150                $(span).parent().nextAll('div.je-children:first').append(this.parseLeaf('', '', layer+1)).show(); 
     151        }, 
     152         
     153        insertNodeBrother:function(span) { 
     154                var layer=$(span).parent().prevAll('span.je-tab').size(); 
     155                 
     156                if ($(span).parent().hasClass('je-leaf-op')) { 
     157                        $(span).parent().parent().before(this.parseNode('', {}, layer-1, false)); 
     158                } else { 
     159                        $(span).parent().parent().before(this.parseNode('', {}, layer, false)); 
     160                } 
     161        }, 
     162         
     163        insertLeafBrother:function(span) { 
     164                var layer=$(span).parent().prevAll('span.je-tab').size(); 
     165                 
     166                if ($(span).parent().hasClass('je-leaf-op')) { 
     167                        $(span).parent().parent().before(this.parseLeaf('', '', layer-1)); 
     168                } else { 
     169                        $(span).parent().parent().before(this.parseLeaf('', '', layer)); 
     170                } 
     171        }, 
     172         
     173        del:function(span) { 
     174                $(span).parent().parent().fadeOut("fast",function(){ 
     175                        $(this).remove(); 
     176                }); 
     177        }, 
     178         
     179        dumpNode:function(node) { 
     180                var json={}; 
     181                var key=node.children('span.je-key:first').children('input:first').val();//no useness 
     182                var children=node.children('div.je-children:first').children('div.je-node , div.je-leaf'); 
     183                for (var i=0; i<children.length; i++) { 
     184                        if ($(children[i]).hasClass('je-node')) { 
     185                                var key1=$(children[i]).children('span.je-key:first').children('input:first').val(); 
     186                                json[key1]=this.dumpNode($(children[i])); 
     187                        } else { 
     188                                var key2=$(children[i]).children('span.je-key:first').children('input:first').val(); 
     189                                var val2=$(children[i]).children('span.je-val:first').children('input:first').val(); 
     190                                json[key2]=val2; 
     191                        } 
     192                } 
     193                return json; 
     194        } 
     195                 
     196}; 
     197 
Note: See TracChangeset for help on using the changeset viewer.