From e9b6bc15277413753daace3e66c87548ab058b7f Mon Sep 17 00:00:00 2001 From: Banana Date: Mon, 1 Aug 2011 13:56:53 +0200 Subject: [PATCH] cookie storage working --- .../mif-tree/Demos/CookieStorage/demo.css | 295 ++++++++++++++++++ .../mif-tree/Demos/CookieStorage/demo.js | 281 +++++++++++++++++ .../mif-tree/Demos/CookieStorage/index.html | 21 ++ javascript/mif-tree/Demos/index.html | 1 + 4 files changed, 598 insertions(+) create mode 100755 javascript/mif-tree/Demos/CookieStorage/demo.css create mode 100755 javascript/mif-tree/Demos/CookieStorage/demo.js create mode 100755 javascript/mif-tree/Demos/CookieStorage/index.html diff --git a/javascript/mif-tree/Demos/CookieStorage/demo.css b/javascript/mif-tree/Demos/CookieStorage/demo.css new file mode 100755 index 0000000..1a963ac --- /dev/null +++ b/javascript/mif-tree/Demos/CookieStorage/demo.css @@ -0,0 +1,295 @@ +#tree_container{ +height:200px; +width:200px; +position:relative; +border:solid 1px #b7b7b7; +} + +#tree_container2{ +height:200px; +width:200px; +position:relative; +border:solid 1px #b7b7b7; +margin-top:10px; +} + +/*@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:18px; +} + +.mif-tree-node{ +width:18px; +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/gadjets.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{ +padding-right:18px; +background-position:0 50%; +background-repeat:no-repeat; +cursor:inherit; +} + +.mif-tree-open-icon{ +background-image:url('../assets/images/openicon.gif') +} + +.mif-tree-close-icon{ +background-image:url('../assets/images/closeicon.gif') +} + + +.mif-tree-loader-open-icon,.mif-tree-loader-close-icon{ +background-image:url('../assets/images/mootree_loader.gif'); +} + +.mif-tree-book-icon{ +background-image:url('../assets/images/book_icon.gif'); +} + +.mif-tree-bin-open-icon{ +background-image:url('../assets/images/bin_open_icon.gif'); +} + +.mif-tree-bin-close-icon{ +background-image:url('../assets/images/bin_close_icon.gif'); +} + + + + + +/*@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; +background-image:url('../assets/images/checkboxes.gif'); +background-repeat: no-repeat; +} + +.mif-tree-node-checked{ +background-position:0px center; +} + +.mif-tree-node-unchecked{ +background-position:-18px center; +} + +.mif-tree-node-nochecked{ +background-position:-108px center; +} + +.mif-tree-hover-checkbox .mif-tree-node-checked{ +background-position:-36px center; +} + +.mif-tree-hover-checkbox .mif-tree-node-unchecked{ +background-position:-54px center; +} + + + +/*@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/CookieStorage/demo.js b/javascript/mif-tree/Demos/CookieStorage/demo.js new file mode 100755 index 0000000..77de025 --- /dev/null +++ b/javascript/mif-tree/Demos/CookieStorage/demo.js @@ -0,0 +1,281 @@ +window.addEvent('domready',function(){ + + Mif.Tree.Node.implement({ + + switchSelect: function(state){ + this.tree[state ? 'select' : 'unselect'](this); + } + + }); + + tree = new Mif.Tree({ + id: 'tree1', + container: $('tree_container'),// tree container + initialize: function(){ + this.initCheckbox('simple'); + var storage = new Mif.Tree.CookieStorage(this); + var switchStorage = new Mif.Tree.CookieStorage(this, {event: 'switch', action: 'switch'}); + var selectStorage = new Mif.Tree.CookieStorage(this, {event: 'selectChange', action: 'switchSelect'}); + this.addEvent('load', function(){ + storage.restore(); + switchStorage.restore(); + selectStorage.restore(); + }).addEvent('loadChildren', function(){ + storage.restore(); + switchStorage.restore(); + selectStorage.restore(); + }); + }, + types: {// node types + folder: { + openIcon: 'mif-tree-open-icon',//css class open icon + closeIcon: 'mif-tree-close-icon'// css class close icon + } + }, + dfltType: 'folder',//default node type + height: 18//node height + }); + + tree2 = new Mif.Tree({ + id: 'tree2', + container: $('tree_container2'),// tree container + initialize: function(){ + this.initCheckbox('simple'); + var storage = new Mif.Tree.CookieStorage(this); + var switchStorage = new Mif.Tree.CookieStorage(this, {event: 'switch', action: 'switch'}); + var selectStorage = new Mif.Tree.CookieStorage(this, {event: 'selectChange', action: 'switchSelect'}); + this.addEvent('load', function(){ + storage.restore(); + switchStorage.restore(); + selectStorage.restore(); + }).addEvent('loadChildren', function(){ + storage.restore(); + switchStorage.restore(); + selectStorage.restore(); + }); + }, + types: {// node types + folder: { + openIcon: 'mif-tree-open-icon',//css class open icon + closeIcon: 'mif-tree-close-icon'// css class close icon + } + }, + dfltType: 'folder',//default node type + height: 18//node height + }); + + var children = [ + { + "property": { + "name": "cnode1", + "id": "cnode1" + } + }, + { + "property": { + "name": "cnode2", + "id": "cnode2" + }, + "children": [ + { + "property":{ + "name": "cnodeX", + "id": "cnodeXXXX" + } + }, + { + "property":{ + "name": "cnodeY", + "id": "cnodeY" + }, + "children":[ + { + "property":{ + "name": "cnodeZ", + "id": "cnodeZ" + } + }, + { + "property":{ + "name": "cnodeL", + "id": "cnodeL" + } + } + ] + } + ] + }, + { + "property":{ + "name": "cnode3", + "id": "cnode3" + } + } + ]; + + var json = [ + { + "property": { + "name": "root", + "id": "root" + }, + "children": [ + { + "property": { + "name": "node1", + "id": "node1" + } + }, + { + "property": { + "name": "node2", + "id": "node2" + }, + "children":[ + { + "property": { + "name": "node2.1", + "id": "node2.1" + } + }, + { + "property": { + "name": "node2.2", + "id": "node2.2" + }, + "children":[ + { + "property": { + "name": "node2.2.1", + "id": "node2.2.1" + } + }, + { + "property": { + "name": "node2.2.2", + "id": "node2.2.2" + } + } + ] + } + ] + }, + { + "property": { + "name": "node4", + "id": "node4" + }, + "children": [ + { + "property":{ + "name": "nodeX", + "id": "nodeXXXX" + } + }, + { + "property":{ + "name": "nodeY", + "id": "nodeY" + } + } + ] + }, + { + "property": { + "name": "node3 loadable", + "id": "node3", + "loadable": true, + "loadOptions": {"json": children} + } + } + ] + } + ]; + + var json2 = [ + { + "property": { + "name": "root", + "id": "root_2" + }, + "children": [ + { + "property": { + "name": "node1", + "id": "node1_2" + } + }, + { + "property": { + "name": "node2", + "id": "node2_2" + }, + "children":[ + { + "property": { + "name": "node2.1", + "id": "node2.1_2" + } + }, + { + "property": { + "name": "node2.2", + "id": "node2.2_2" + }, + "children":[ + { + "property": { + "name": "node2.2.1", + "id": "node2.2.1_2" + } + }, + { + "property": { + "name": "node2.2.2", + "id": "node2.2.2_2" + } + } + ] + } + ] + }, + { + "property": { + "name": "node4", + "id": "node4_2" + }, + "children": [ + { + "property":{ + "name": "nodeX", + "id": "nodeXXXX_2" + } + }, + { + "property":{ + "name": "nodeY", + "id": "nodeY_2" + } + } + ] + }, + { + "property": { + "name": "node3 loadable", + "id": "node3_2" + } + } + ] + } + ]; + + // load tree from json. + tree.load({ + json: json + }); + + tree2.load({ + json: json2 + }); + +}); \ No newline at end of file diff --git a/javascript/mif-tree/Demos/CookieStorage/index.html b/javascript/mif-tree/Demos/CookieStorage/index.html new file mode 100755 index 0000000..4761b1c --- /dev/null +++ b/javascript/mif-tree/Demos/CookieStorage/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + + Mif.Tree Demo + + +

Cookie Storage example

+
+
+

+ Back +

+ + diff --git a/javascript/mif-tree/Demos/index.html b/javascript/mif-tree/Demos/index.html index 2882041..ddaf1b4 100755 --- a/javascript/mif-tree/Demos/index.html +++ b/javascript/mif-tree/Demos/index.html @@ -40,6 +40,7 @@
  • Add node
  • Another add node demo
  • reload children and update clicked node name
    • +
  • cookie storage