From c2f71f83dd4d53af1086723aa394b5d2716bb091 Mon Sep 17 00:00:00 2001 From: Banana Date: Mon, 1 Aug 2011 10:28:24 +0200 Subject: [PATCH] DOMTree working. window on load needed and the functions replaced --- javascript/mif-tree/Demos/DOMTree/demo.css | 294 +++++++++++++++++++ javascript/mif-tree/Demos/DOMTree/demo.js | 91 ++++++ javascript/mif-tree/Demos/DOMTree/index.html | 20 ++ javascript/mif-tree/Demos/index.html | 6 +- 4 files changed, 409 insertions(+), 2 deletions(-) create mode 100755 javascript/mif-tree/Demos/DOMTree/demo.css create mode 100755 javascript/mif-tree/Demos/DOMTree/demo.js create mode 100755 javascript/mif-tree/Demos/DOMTree/index.html diff --git a/javascript/mif-tree/Demos/DOMTree/demo.css b/javascript/mif-tree/Demos/DOMTree/demo.css new file mode 100755 index 0000000..7e6941f --- /dev/null +++ b/javascript/mif-tree/Demos/DOMTree/demo.css @@ -0,0 +1,294 @@ +#tree_container{ +height:300px; +width:200px; +position:relative; +border:solid 1px #c7c7c7; +} + +.mif-tree-wrapper{ +font-family:verdana; +font-size:11px; +} + +.mif-tree-name{ +margin-left:0; +padding-left:4px; +} + +.dom-array{ +color:#6f6893; +font-weight:bold; +} + +.dom-object{ +color:#000; +font-weight:bold; +} + +.dom-string{ +color:#f35454; +font-weight:bold; +} + +.dom-number{ +color:#23268d; +font-weight:bold; +} + +.dom-function{ +color:#409d4b; +font-weight:bold; +} + +.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; +text-decoration:underline; +} + + +/*@global*/ + +.mif-tree-wrapper{ +position: absolute; +width: 100%; +height:100%; +margin:0; +padding:0; +overflow:auto; +font-family:sans-serif; +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:inherit; +} + +.mif-tree-children{ +padding-left: 18px; +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:4px; +} + +.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-highlighter{ +height:18px; +overflow:hidden; +width:100%; +background:#b64553; +position:absolute; +} + + + +/*@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/DOMTree/demo.js b/javascript/mif-tree/Demos/DOMTree/demo.js new file mode 100755 index 0000000..b03d9dd --- /dev/null +++ b/javascript/mif-tree/Demos/DOMTree/demo.js @@ -0,0 +1,91 @@ +window.addEvent('domready',function(){ + DOMTree = new Mif.Tree({ + container: $('tree_container'), + types: { + folder: { + cls: 'dom-object', + loadable: true + }, + array: { + loadable: true, + cls: 'dom-array' + }, + string: { + hoverClass: 'empty', + selectClass: 'empty', + loadable: true, + cls: 'dom-string' + }, + number: { + hoverClass: 'empty', + selectClass: 'empty', + loadable: true, + cls: 'dom-number' + } + }, + sortable: true, + dfltType: 'folder', + height: 18, + initialize: function(){ + this.initSortable(); + new Mif.Tree.KeyNav(this); + } + }).load({ + json: [{ + property: { + name: 'window' + }, + data:{ + dom: window + } + }] + }); + DOMTree.loadOptions = function(node){ + var json = []; + var dom = node.data.dom; + Function.attempt(function(){ + var type = typeOf(dom); + switch(type){ + case 'string': + case 'number': + json.push({ + property: { + name: dom, + loadable: false + }, + type: type + }); + break; + case 'array': + dom.each(function(el, i){ + json.push({ + property: { + name: i + }, + type: 'array', + data: { + dom: el + } + }); + }); + break; + default: + for(var p in dom){ + Function.attempt(function(){ + var child = { + property:{ + name: p + }, + data: { + dom: dom[p] + } + }; + if(typeof dom == 'function') child.property.cls = 'dom-function'; + json.push(child); + }); + } + } + }); + return {json: json}; + }; +}); diff --git a/javascript/mif-tree/Demos/DOMTree/index.html b/javascript/mif-tree/Demos/DOMTree/index.html new file mode 100755 index 0000000..e45b63b --- /dev/null +++ b/javascript/mif-tree/Demos/DOMTree/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 a925de4..7f01fd0 100755 --- a/javascript/mif-tree/Demos/index.html +++ b/javascript/mif-tree/Demos/index.html @@ -23,8 +23,10 @@
  • Tree select event demo
  • Tree toggle event demo
  • Tree other style
    • -
  • Add/remove node type demo -
  • set icon using url instead class +
  • Add/remove node type demo
    • +
  • set icon using url instead class
    • +
  • File Tree ( left since it requires a webserver )
    • +
  • DOM Tree