karmi (owner)

Revisions

gist: 189004 Download_button fork
public
Public Clone URL: git://gist.github.com/189004.git
Embed All Files: show embed
application.js #
raw 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

// * Add initialize() handler
document.observe("dom:loaded", function() { try {Application.initialize()} catch(e) { alert('Error when initializing application! \n' + e); } });
 
Application = {
 
  initialize : function(options) {
    
    this.options = options;
    this.window = document.viewport.getDimensions();
 
    this.TreeView.initialize();
 
    // if (DEBUG) { setTimeout( 'TreeViewTest.run()', 1000 ) }
 
  },
 
  TreeView : {
    initialize : function() {
      // console.profile()
      this.container = $('treeview');
      this.json     = null;
      this.__load_folders();
      this.__add_folders_overlay_element();
      // console.profileEnd()
    },
 
    __load_folders : function() {
      new Ajax.Request('/folders.json', {
        method : 'get',
        parameters : 'authenticity_token='+authenticity_token,
        onSuccess  : function(transport) {
                       Application.TreeView.json = transport.responseJSON;
                       Application.TreeView.__load_dom_elements(); }
      })
    },
 
    __load_dom_elements : function() {
      this.container.select('li').each( function(element) { new Application.TreeView.Node(element, null) } );
    },
 
    __add_folders_overlay_element : function() {
      if (!this.container) return false
      this.overlay = new Element('id',
                         { 'id':'folders_overlay',
                           'class':'rounded_10',
                           'style': 'width:'+$('content').getWidth()+'px; height:'+($('left').getHeight()+40)+'px;' }).setOpacity(0.6).hide()
      this.container.insert({'after':this.overlay})
      this.container.observe(
          'mouseenter', function(event) { Application.TreeView.overlay.setStyle({'display':'block'})}
        )
      this.overlay.observe(
          'mouseleave', function(event) { Application.TreeView.overlay.hide()}
        )
    },
 
    Node: Class.create({
      initialize : function(element, attributes) {
        if (element) {
          var element = this.element = element;
          var id = this.id = this.__get_folder_id();
        } else {
          var element = this.element = this.__create_element(attributes);
          var id = this.id = attributes.id;
        }
        this.expanded = false
        this.url = Application.TreeView.json.select( function(n) { return n.id == id } ).first().url
        this.children = Application.TreeView.json.select( function(n) { return n.parent_id == id } )
        this.tree = new Element('ul', { 'class' : 'tree' })
        this.tree.hide()
        this.element.insert(this.tree)
        this.__add_handlers(this)
        if (this.children.size() > 0) { this.element.addClassName('has_children') }
        if (document.location.href == this.url) { this.element.addClassName('active') }
        return this.element
      },
      __create_element : function(attributes) {
        return new Element('li', { 'id':'treeview_folder_'+attributes.id }).update('<a href="'+attributes.href+'">' + attributes.name + '</a>');
      },
      __get_folder_id : function() {
        return parseInt( this.element.identify().gsub(/treeview_folder_/, '') );
      },
      __add_handlers : function(instance) {
        instance.element.observe(
          'mouseenter',
            function(event) {
              instance.expanded = true
              instance.__show_children()
            }).observe(
          'mouseleave',
            function(event) {
              instance.expanded = false
              window.setTimeout( function() { if (!instance.expanded) instance.__hide_children() }, 500 );
            }).observe(
          'mouseover',
            function(event) {
            }
            )
      },
      __show_children : function() {
        // console.info('Showing children', this.children)
        this.children.each( function(node) {
          if (!$('treeview_folder_'+node.id)) {
            this.tree.insert( new Application.TreeView.Node( null, {'id':node.id, 'name':node.name, 'href':node.url} ).element ) }
          this.tree.show()
        }.bind(this) )
      },
      __hide_children : function() {
        Effect.Fade(this.tree, {duration:0.2})
      }
    })
  }
}
 
folders.html #
raw 
1
2
3
4
5
6
7

<div id="treeview" class="folders">
  <ul>
    <li id="treeview_folder_367983911" class="active"><a href="/folders/367983911">Folder 2</a></li>
    <li id="treeview_folder_528414713"><a href="/folders/528414713">Folder etc</a></li>
  </ul>
</div><!-- /treeview -->
 
folders.json #
raw 
1
2
3
4
5
6

[
  {"name": "Folder 1", "url": "http://localhost:3000/folders/112710902", "id": 112710902, "parent_id": 367983911},
  {"name": "Folder 2", "url": "http://localhost:3000/folders/367983911", "id": 367983911, "parent_id": null},
  {"name": "Folder etc", "url": "http://localhost:3000/folders/528414713", "id": 528414713, "parent_id": null}
]