123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- window.addEvent('domready',function(){
- Mif.Tree.implement({
- getTarget: function(event){
- var target = event.target;
- var cls = target.className;
- while(!(/mif-tree/).test(target.className)){
- target = target.parentNode;
- }
- var test = target.className.match(/mif-tree-(gadjet)-[^n]|mif-tree-(name)/);
- if(!test){
- return {
- node: false,
- target: 'node'
- };
- }
- for(var i = 3; i > 0; i--){
- if(test[i]){
- var type = test[i];
- break;
- }
- }
- if(type == 'name' && cls != 'tag'){
- return {
- node: false,
- target: 'node'
- };
- }
- return {
- node: Mif.Tree.Nodes[target.getAttribute('uid')],
- target: type
- };
- }
- });
- Mif.Tree.Node.prototype.getNextVisible_ = Mif.Tree.Node.prototype.getNextVisible;
- Mif.Tree.Node.prototype.getPreviousVisible_ = Mif.Tree.Node.prototype.getPreviousVisible;
- Mif.Tree.Node.implement({
- hide: function(){
- this.state.hidden = true;
- this.getDOM('node').style.display = 'none';
- },
-
- show: function(){
- this.state.hidden = false;
- this.getDOM('node').style.display = 'block';
- },
-
- isHide: function(){
- return this.state.hidden;
- },
-
- getNextVisible: function(){
- var node = this;
- do{
- node = node.getNextVisible_();
- if(!node) return false;
- }while(node.isHide())
- return node;
- },
-
- getPreviousVisible: function(){
- var node = this;
- do{
- node = node.getPreviousVisible_();
- if(!node) return false;
- }while(node.isHide())
- return node;
- }
- });
- Mif.Tree.KeyNav.implement({
- goForward: function(current){
- var forward = current;
- do{
- forward = forward.getNextVisible();
- if(!forward) return;
- }while(forward.type == 'close');
- if( forward ) this.tree.select(forward);
- },
-
- goBack: function(current){
- var back = current;
- do{
- back = back.getPreviousVisible();
- if(!back) return;
- }while(back.type == 'close');
- if (back) this.tree.select(back);
- }
- });
- DOMTree = new Mif.Tree({
- container: $('tree_container'),
- forest: true,
- types: {
- open:{
- cls: 'tag-open',
- loadable: true
- },
- close:{
- loadable: false,
- cls: 'tag-close'
- }
- },
- dfltType: 'open',
- height: 18,
- initialize: function(){
- new Mif.Tree.KeyNav(this);
- },
- onToggle: function(node, state){
- var next = node.getNext();
- if(!next) return;
- next[state ? 'show' : 'hide']();
- },
- onDrawChildren: function(parent){
- parent.children.each(function(child){
- if(child.type != 'close') return;
- child.hide();
- });
- },
- onSelect: function(node){
- if(node.type == 'close'){
- node.tree.select(node.getPrevious());
- }
- this.wrapper.focus();
- }
- })
- .load({
- json: [{
- property: {
- name: '<<span class="tag">html</span>>'
- },
- data:{
- el: $(document.documentElement)
- }
- },
- {
- property: {
- name: '</<span class="tag">html</span>>'
- },
- type: 'close'
- }]
- });
- DOMTree.loadOptions = function(node){
- var json = [];
- var el = node.data.el;
- el.getChildren().each(function(child){
- var attrs = '';
- Array.from(child.attributes).each(function(attr){
- attrs += " " + attr.nodeName + '="<span class="attr-value">' + attr.nodeValue + '</span>"';
- });
- var hasChildren = child.getChildren().length > 0;
- var name;
- if(!hasChildren){
- var text = child.firstChild ? child.firstChild.nodeValue : '';
- name = '<<span class="tag">' + child.get('tag') + '</span>' + attrs + '><span class="value">' + text + '</span></<span class="tag">' + child.get('tag') + '</span>>';
- var loadable = false;
- }else{
- name = '<<span class="tag">' + child.get('tag') + '</span>' + attrs + '>';
- loadable = true;
- }
- json.push({
- property: {
- name: name,
- loadable: loadable
- },
- data: {
- el: child
- }
- });
- json.push({
- property: {
- name: '</<span class="tag">' + child.get('tag') + '</span>>'
- },
- type: 'close'
- });
- });
- return {json: json};
- };
- if(Browser.ie){
- (new Element('div', {styles:{color: 'red', fontSize: '20px', paddingLeft: '20px'}}).set('html', 'LOL IE')).inject($('tree_container'),'before');
- };
- });
|