From 7033428ded1555a4c92a6949e7e11ddabe182752 Mon Sep 17 00:00:00 2001 From: Banana Date: Mon, 1 Aug 2011 10:35:52 +0200 Subject: [PATCH] html tree demo. window.onload was missing and replace $A function with new one --- javascript/mif-tree/Demos/HTMLTree/demo.css | 293 ++++++++++++++++++ javascript/mif-tree/Demos/HTMLTree/demo.js | 194 ++++++++++++ javascript/mif-tree/Demos/HTMLTree/index.html | 20 ++ javascript/mif-tree/Demos/index.html | 1 + 4 files changed, 508 insertions(+) create mode 100755 javascript/mif-tree/Demos/HTMLTree/demo.css create mode 100755 javascript/mif-tree/Demos/HTMLTree/demo.js create mode 100755 javascript/mif-tree/Demos/HTMLTree/index.html diff --git a/javascript/mif-tree/Demos/HTMLTree/demo.css b/javascript/mif-tree/Demos/HTMLTree/demo.css new file mode 100755 index 0000000..8f363ae --- /dev/null +++ b/javascript/mif-tree/Demos/HTMLTree/demo.css @@ -0,0 +1,293 @@ +.warning{ +background-color:#ad4b3a; +color:#e0e93f; +margin:20px; +font-weight:bold; +font-size:16px; +padding-left:2em; +} + + +#tree_container{ +height:300px; +margin:0 20px; +position:relative; +border:solid 1px #c7c7c7; +} + +.mif-tree-wrapper{ +font-family:verdana; +font-size:11px; +} + +.mif-tree-name{ +margin-left:0; +padding-left:4px; +} + +.tag-close{ + +} + +.attr-value{ +color:#e9441b; +} + +.value{ +color:#000; +} + +.mif-tree-wrapper span.tag{ +cursor:pointer; +} + +.mif-tree-wrapper .mif-tree-gadjet{ +cursor:default; +} + +.mif-tree-empty-icon{ +padding-right:0; +} + +.mif-tree-hover-gadjet .mif-tree-name, .mif-tree-hover-name .mif-tree-name, .mif-tree-hover-icon .mif-tree-name{ +color:blue; + +} + + +/*@global*/ + +.mif-tree-wrapper{ +position: absolute; +width: 100%; +height:100%; +margin:0; +padding:0; +overflow:auto; +font-family:Tahoma; +color:#3147e6; +font-size:11px; +line-height:18px;/******Tree node height******/ +white-space:nowrap; +cursor:default; +} + +.mif-tree-bg{ +width:100%; +height:100%; +position:absolute; +overflow:hidden; +} + +.mif-tree-bg-container{ +width:100%; +display:none; +} + +.mif-tree-bg-node{ +width:100%; +height:18px; +} + +.mif-tree-bg-selected{ +background-color:#dcd7ab; +} + +.mif-tree-wrapper:focus{ +outline:0; +} + +.mif-tree-wrapper span{ +padding-bottom:2px; +padding-top:2px; +cursor:text; +} + +.mif-tree-children{ +padding-left: 25px; +width:auto; +} + +.mif-tree-node{ +/*background:url('../assets/images/line.gif') repeat-y 8px 0px;*/ +} + +.mif-tree-node-last{ +/*background:url('../assets/images/line.gif') no-repeat 8px 0px;*/ +} + +.mif-tree-name{ +cursor: default; +overflow:hidden; +margin-left:0px; +} + +.mif-tree-name a{ +color:red; +} + +.mif-tree-name a:hover{ +color:blue; +} + + +.mif-tree-node-wrapper{ +/*background:url('../assets/images/horizontal-line.gif') no-repeat 9px center;*/ +} + +/*@gadjets*/ + +.mif-tree-gadjet{ +background-image:url('../assets/images/twistyGadjets.gif'); +padding-right: 16px; +z-index:1; +overflow:hidden; +background-repeat:no-repeat; +cursor:default; +} + +.mif-tree-gadjet-none{ +background:none; +} + +.mif-tree-gadjet-minus{ +background-position: 0px 50%; +} + +.mif-tree-gadjet-plus{ +background-position: -18px 50%; +} + +/* +.mif-tree-gadjet-hover .mif-tree-gadjet-minus{ +background-position: -54px 50%; +} + +.mif-tree-gadjet-hover .mif-tree-gadjet-plus{ +background-position: -72px 50%; +} + +*/ + + +/*.mif-tree-gadjet-hover{ +background-image:url('../assets/images/gadjets-hover.gif'); +}*/ + + + + +/*@icons*/ +.mif-tree-icon{ + +} + + +/*@selection*/ + +.mif-tree-node-selected .mif-tree-name{ +background-color: #010161; +color:#fff; +text-transform:italic; +} + +.mif-tree-node-selected .attr-value, .mif-tree-node-selected .value{ +color:#fff; +} +/*@d'n'd*/ +.mif-tree-pointer{ +height:1px; +overflow: hidden; +position: absolute; +background-image:url('../assets/images/1.gif'); +background-repeat:repeat-x; +background-color:#292fef; +} + + +.mif-tree-ghost{ +background-color:#fff; +border:solid 2px #e8e8f7; +padding-left:2px; +} + +.mif-tree-ghost .mif-tree-node-wrapper{ +background:none; +} + +.mif-tree-ghost span.mif-tree-text{ +padding-top:1px; +padding-bottom:1px; +} + +.mif-tree-ghost-icon{ +padding-left:16px; +background-color:#fff; +background-repeat:no-repeat; +background-image:url('../assets/images/dropzone.gif'); +} + +.mif-tree-ghost-after{ +background-position:-64px 2px; +} + +.mif-tree-ghost-before{ +background-position:-48px 2px; +} + +.mif-tree-ghost-between{ +background-position:-16px 2px; +} + +.mif-tree-ghost-inside{ +background-position:-0px 2px; +} + +.mif-tree-ghost-notAllowed{ +background-position:-32px 2px; +} + +.mif-tree-drag-current{ +background-color:#cfcfd8; +} + +.mif-tree-replace{ +background-color:#99c8fb; +} + + +/*@checkbox*/ +.mif-tree-checkbox{ +padding-left:18px; +} + +.mif-tree-node-checked, .mif-tree-node-checked .mif-tree-checkbox{ +background:url('../assets/images/checked.gif') center 2px no-repeat; +} + +.mif-tree-node-unchecked, .mif-tree-node-unchecked .mif-tree-checkbox{ +background:url('../assets/images/unchecked.gif') center 2px no-repeat; +} + +.mif-tree-node-checked-selected{ +background:url('../assets/images/checked_selected.gif') center 2px no-repeat; +} + +.mif-tree-node-unchecked-selected{ +background:url('../assets/images/unchecked_selected.gif') center 2px no-repeat; +} + + + +/*@rename*/ +.mif-tree-rename{ +display: inline; +line-height: 14px; +height:14px; +cursor: default; +overflow:hidden; +font-family:sans-serif; +font-size:11px; +padding:1px 0; +border:solid 1px black; +} \ No newline at end of file diff --git a/javascript/mif-tree/Demos/HTMLTree/demo.js b/javascript/mif-tree/Demos/HTMLTree/demo.js new file mode 100755 index 0000000..3b09534 --- /dev/null +++ b/javascript/mif-tree/Demos/HTMLTree/demo.js @@ -0,0 +1,194 @@ +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: '<html>' + }, + data:{ + el: $(document.documentElement) + } + }, + { + property: { + name: '</html>' + }, + 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 + '="' + attr.nodeValue + '"'; + }); + var hasChildren = child.getChildren().length > 0; + var name; + if(!hasChildren){ + var text = child.firstChild ? child.firstChild.nodeValue : ''; + name = '<' + child.get('tag') + '' + attrs + '>' + text + '</' + child.get('tag') + '>'; + var loadable = false; + }else{ + name = '<' + child.get('tag') + '' + attrs + '>'; + loadable = true; + } + json.push({ + property: { + name: name, + loadable: loadable + }, + data: { + el: child + } + }); + json.push({ + property: { + name: '</' + child.get('tag') + '>' + }, + 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'); +}; +}); \ No newline at end of file diff --git a/javascript/mif-tree/Demos/HTMLTree/index.html b/javascript/mif-tree/Demos/HTMLTree/index.html new file mode 100755 index 0000000..e45b63b --- /dev/null +++ b/javascript/mif-tree/Demos/HTMLTree/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + Mif.Tree DOM Tree Demo + + +

DOM Tree example

+
+

+ Back +

+ + diff --git a/javascript/mif-tree/Demos/index.html b/javascript/mif-tree/Demos/index.html index 7f01fd0..040d149 100755 --- a/javascript/mif-tree/Demos/index.html +++ b/javascript/mif-tree/Demos/index.html @@ -27,6 +27,7 @@
  • set icon using url instead class
  • File Tree ( left since it requires a webserver )
  • DOM Tree
    • +
  • HTML Tree