← Back to branch summary

~loggerhead-team/loggerhead/trunk-rich

« back to all changes in this revision

Viewing changes to loggerhead/static/javascript/custom.js

  • Committer: Martin Albisetti
  • Date: 2008-12-22 19:54:58 UTC
  • Revision ID: argentina@gmail.com-20081222195458-90zxzpeymmhgzpqo
Tags: loggerhead-1.10
Update version number

Show diffs side-by-side

added added

removed removed

Lines of Context:
loggerhead/static/javascript/custom.js
1
 
Y = YUI().use("node", "io-base", "anim");
2
 
 
3
1
var global_timeout_id = null;
4
2
var global_search_request = null;
5
3
 
6
 
Y.on(
7
 
  'domready',
8
 
  function()
9
 
  {
10
 
    var search_box = Y.get('#q');
11
 
    if (!Y.Lang.isNull(search_box))
 
4
window.addEvent('domready', function() 
 
5
{
 
6
    var search_box = $('q');
 
7
    if ($defined(search_box))
12
8
    {
13
 
      function get_suggestions() {
14
 
        var query = search_box.get('value');
15
 
        var url = global_path + 'search?query=' + query;
16
 
 
17
 
        if (!Y.Lang.isNull(global_search_request))
18
 
        {
19
 
          global_search_request.abort();
20
 
        }
21
 
        global_search_request = Y.io(
22
 
          url,
23
 
          {
24
 
            on: {complete: cool_search},
25
 
            arguments: [query]
26
 
          }
27
 
        );
28
 
 
29
 
        var region = search_box.get('region');
30
 
        var current_query = search_box.get('value');
31
 
 
32
 
        Y.get('#search_terms').setStyle('display', 'block');
33
 
        Y.get('#search_terms').setStyle('position', 'absolute');
34
 
        Y.get('#search_terms').setStyle('left', region.left);
35
 
        Y.get('#search_terms').setStyle('top', region.bottom);
36
 
        Y.get('#search_terms').set('innerHTML','Loading...');
37
 
      }
38
 
      search_box.on(
39
 
        "keyup",
40
 
        function(event)
41
 
        {
42
 
          if(search_box.get('value') == '')
43
 
          {
44
 
            Y.get('#search_terms').setStyle('display', 'none');
45
 
          }
46
 
          else
47
 
          {
48
 
            if (null != global_timeout_id)
49
 
            {
50
 
              clearTimeout(global_timeout_id);
 
9
        search_box.removeEvents();
 
10
        search_box.addEvents(
 
11
        {
 
12
            keyup: function()
 
13
            {
 
14
                if($('q').value == '')
 
15
                {
 
16
                    $('search_terms').setStyle('display','none');
 
17
                }
 
18
                else
 
19
                {
 
20
                    if (null != global_timeout_id)
 
21
                    {
 
22
                        clearTimeout(global_timeout_id);
 
23
                    }
 
24
                        global_timeout_id = setTimeout('$("q").fireEvent("search",$("q").value)',200);
 
25
                }
 
26
            },
 
27
 
 
28
            search: function(query)
 
29
            {
 
30
                url = global_path + 'search?query=' + query;
 
31
 
 
32
                if ($defined(global_search_request))
 
33
                {
 
34
                    global_search_request.cancel();
 
35
                }
 
36
                global_search_request = new Request({'url':url,'method':'get','onComplete':function(response)
 
37
                  {
 
38
                     cool_search(response,query);
 
39
                 }});
 
40
 
 
41
                global_search_request.send('');
 
42
                var posicion = search_box.getPosition();
 
43
                var size     = search_box.getSize();
 
44
 
 
45
                $('search_terms').setStyle('position','absolute');
 
46
                $('search_terms').setStyle('left',posicion.x);
 
47
                $('search_terms').setStyle('top',posicion.y + size.y);
 
48
                $('search_terms').setStyle('display','block');
 
49
                $('search_terms').set('html','Loading...');
 
50
 
 
51
                new Request({'url':url,'method':'get','onComplete':cool_search}).send('');
 
52
 
 
53
 
51
54
            }
52
 
            global_timeout_id = setTimeout(get_suggestions, 200);
53
 
          }
54
55
        });
55
56
    }
56
 
  });
 
57
});
57
58
 
58
 
function cool_search(tid, response, query)
 
59
function cool_search(response, query)
59
60
{
60
 
  var q = Y.get('#q');
61
 
  var region = q.get('region');
62
 
  var current_query = q.get('value');
63
 
  if (current_query == query)
64
 
  {
65
 
    Y.get('#search_terms').set('innerHTML', response.responseText);
66
 
    Y.get('#search_terms').setStyle('display', 'block');
67
 
    Y.get('#search_terms').setStyle('position', 'absolute');
68
 
    Y.get('#search_terms').setStyle('left', region.left);
69
 
    Y.get('#search_terms').setStyle('top', region.bottom);
70
 
  }
 
61
        var posicion = $('q').getPosition();
 
62
        var size     = $('q').getSize();
 
63
    var current_query = $('q').get('value');
 
64
    if (current_query == query)
 
65
    {
 
66
            $('search_terms').set('html',response);
 
67
            $('search_terms').setStyle('display','block');
 
68
            $('search_terms').setStyle('position','absolute');
 
69
            $('search_terms').setStyle('left',posicion.x);
 
70
            $('search_terms').setStyle('top',posicion.y + size.y);
 
71
    }
71
72
}
72
73
 
73
74
function hide_search()
74
75
{
75
 
  setTimeout("Y.get('#search_terms').setStyle('display','none')", 300);
76
 
}
77
 
 
78
 
function Collapsable(config)
79
 
{
80
 
  this.is_open = config.is_open;
81
 
  this.open_node = config.open_node;
82
 
  this.close_node = config.close_node;
83
 
  this.expand_icon = config.expand_icon;
84
 
  this.source = config.source;
85
 
  this.loading = config.loading;
86
 
  this.node_process = config.node_process;
87
 
  this.container = null;
88
 
  this.anim = null;
89
 
  this._loading = false;
90
 
}
91
 
 
92
 
function get_height(node) {
93
 
  node.setStyle('position', 'absolute');
94
 
  node.setStyle('top', -1000000000);
95
 
  node.setStyle('display', 'block');
96
 
  var height = node.get('region').height;
97
 
  node.setStyle('display', 'none');
98
 
  node.setStyle('position', 'static');
99
 
  node.setStyle('top', 'auto');
100
 
  return height;
101
 
}
102
 
 
103
 
Collapsable.prototype._animate = function (callback)
104
 
{
105
 
  if (this.anim) this.anim.stop();
106
 
 
107
 
  this.anim = new Y.Anim(
108
 
    {
109
 
      node: this.container,
110
 
      from: {
111
 
        marginBottom: this.container.getStyle('marginBottom')
112
 
      },
113
 
      to: {
114
 
        marginBottom: 0
115
 
      },
116
 
      duration: 0.2
117
 
    });
118
 
 
119
 
  this.anim.run();
120
 
  this.anim.on('end', this.animComplete, this, callback);
121
 
}
122
 
 
123
 
Collapsable.prototype._load_finished = function(tid, res, args)
124
 
{
125
 
  var l = res.responseText.split('\n');
126
 
  l.splice(0, 1);
127
 
  var newNode = Y.Node.create(l.join(''));
128
 
  if (this.node_process)
129
 
    this.node_process(newNode);
130
 
  this.source = null;
131
 
  newNode.setStyle('display', 'none');
132
 
  this.loading.ancestor().insertBefore(newNode, this.loading);
133
 
  var delta = this.loading.get('region').height - get_height(newNode);
134
 
  newNode.setStyle('display', 'block');
135
 
  this.container.setStyle('marginBottom', parseFloat(this.container.getStyle('marginBottom')) + delta);
136
 
  this.loading.ancestor().removeChild(this.loading);
137
 
  this._animate(args[0]);
138
 
};
139
 
 
140
 
Collapsable.prototype._ensure_container = function(callback)
141
 
{
142
 
  if (this.container == null) {
143
 
    this.container = Y.Node.create('<div></div>');
144
 
    if (this.closed_node) {
145
 
      this.closed_node.ancestor().replaceChild(
146
 
        this.container, this.closed_node);
147
 
      this.container.appendChild(this.closed_node);
148
 
      if (this.open_node) {
149
 
        this.container.appendChild(this.open_node);
150
 
      }
151
 
    }
152
 
    else {
153
 
      this.open_node.ancestor().replaceChild(
154
 
        this.container, this.open_node);
155
 
      this.container.appendChild(this.open_node);
156
 
    }
157
 
    var outer = Y.Node.create('<div style="overflow:hidden;"></div>');
158
 
    this.container.ancestor().replaceChild(outer, this.container);
159
 
    outer.appendChild(this.container);
160
 
  }
161
 
}
162
 
 
163
 
/* What happens when you click open.
164
 
 *
165
 
 * 1. The arrow flips to the expanded position.
166
 
 *
167
 
 * 2. If necessary, the div which will be running the animation is
168
 
 * created and the open/closed content stuffed into it (and has height
169
 
 * set to the height of the closed content).
170
 
 *
171
 
 * 3. The open content is shown and the closed content is closed.
172
 
 *
173
 
 * 4. The animation to expose all of the open content is started.
174
 
 *
175
 
 * 5. If we have to do ajax to load content, start the request.
176
 
 *
177
 
 * 6. When the request completes, parse the content into a node, run
178
 
 * the node_process callback over it and replace the spinner (assumed
179
 
 * to be appropriately contained in the open node) with the new node.
180
 
 *
181
 
 * 7. If the animation showing the open content has not completed,
182
 
 * stop it.
183
 
 *
184
 
 * 8. Start a new animation to show the rest of the new content.
185
 
 */
186
 
 
187
 
Collapsable.prototype.open = function(callback)
188
 
{
189
 
  this.expand_icon.set('src', expanded_icon_path);
190
 
 
191
 
  this._ensure_container();
192
 
 
193
 
  var open_height = get_height(this.open_node);
194
 
 
195
 
  var close_height;
196
 
  if (this.close_node) {
197
 
    close_height = this.close_node.get('region').height;
198
 
  }
199
 
  else {
200
 
    close_height = 0;
201
 
  }
202
 
 
203
 
  this.container.setStyle('marginBottom', close_height - open_height);
204
 
  if (this.close_node) {
205
 
    this.close_node.setStyle('display', 'none');
206
 
  }
207
 
  this.open_node.setStyle('display', 'block');
208
 
 
209
 
  this._animate(callback);
210
 
 
211
 
  if (this.source) {
212
 
    Y.io(
213
 
      this.source,
214
 
      {
215
 
        on: {complete: this._load_finished},
216
 
        arguments: [callback],
217
 
        context: this
218
 
      });
219
 
    return;
220
 
  }
221
 
 
222
 
};
223
 
 
224
 
Collapsable.prototype.animComplete = function(evt, callback)
225
 
{
226
 
  this.anim = null;
227
 
  if (this._loading) return;
228
 
  if (callback) callback();
229
 
  this.is_open = true;
230
 
};
231
 
 
232
 
Collapsable.prototype.close = function()
233
 
{
234
 
  this._ensure_container();
235
 
 
236
 
  var open_height = this.open_node.get('region').height;
237
 
 
238
 
  var close_height;
239
 
  if (this.close_node) {
240
 
    close_height = get_height(this.close_node);
241
 
  }
242
 
  else {
243
 
    close_height = 0;
244
 
  }
245
 
 
246
 
  var anim = new Y.Anim(
247
 
    {
248
 
      node: this.container,
249
 
      from: {
250
 
        marginBottom: 0
251
 
      },
252
 
      to: {
253
 
        marginBottom: close_height - open_height
254
 
      },
255
 
      duration: 0.2
256
 
    });
257
 
  anim.on("end", this.closeComplete, this);
258
 
  anim.run();
259
 
};
260
 
 
261
 
Collapsable.prototype.closeComplete = function () {
262
 
  this.open_node.setStyle('display', 'none');
263
 
  if (this.close_node) {
264
 
    this.close_node.setStyle('display', 'block');
265
 
  }
266
 
  this.container.setStyle('marginBottom', 0);
267
 
  this.expand_icon.set('src', collapsed_icon_path);
268
 
  this.is_open = false;
269
 
};
270
 
 
271
 
Collapsable.prototype.toggle = function()
272
 
{
273
 
  if (this.is_open)
274
 
  {
275
 
    this.close();
276
 
  }
277
 
  else
278
 
  {
279
 
    this.open();
280
 
  }
281
 
};
 
76
    hide_div = setTimeout("$('search_terms').setStyle('display','none')", 300);
 
77
}
 
78
var Colapsable = new Class({
 
79
    initialize: function(item,expand_icon,open_content,close_content,is_open)
 
80
    {
 
81
        this.is_open = false;
 
82
        if ($defined(is_open))
 
83
        {
 
84
            this.is_open = is_open;
 
85
        }
 
86
        this.item = item;
 
87
        item.set('colapsable',this);
 
88
        this.open_content  = open_content;
 
89
        this.close_content = close_content;
 
90
        this.expand_icon   = expand_icon;
 
91
 
 
92
        var expander = new Fx.Slide(this.item, { duration: 200 } );
 
93
        if (!this.is_open)
 
94
        {
 
95
            expander.hide();
 
96
            if ($defined(this.expand_icon))
 
97
            {
 
98
                this.expand_icon.set('src',this.expand_icon.title);
 
99
            }
 
100
        }
 
101
        else
 
102
        {
 
103
            if ($defined(this.expand_icon))
 
104
            {
 
105
                this.expand_icon.set('src',this.expand_icon.alt);
 
106
            }
 
107
        }
 
108
    },
 
109
 
 
110
    open: function()
 
111
    {
 
112
        this.item.setStyle('display', 'block');
 
113
        var expander = this.item.get('slide');
 
114
        expander.slideIn();
 
115
        if ($defined(this.open_content))
 
116
        {
 
117
            for (var i=0;i<this.open_content.length;++i)
 
118
            {
 
119
                this.open_content[i].setStyle('display','block');
 
120
            }
 
121
                }
 
122
                
 
123
        if ($defined(this.close_content))
 
124
        {
 
125
            for (var i=0;i<this.close_content.length;++i)
 
126
            {
 
127
                this.close_content[i].setStyle('display','none');
 
128
            }
 
129
        }
 
130
 
 
131
        if ($defined(this.expand_icon))
 
132
        {
 
133
            this.expand_icon.set('src',this.expand_icon.alt);
 
134
        }
 
135
        this.is_open = true;
 
136
    },
 
137
 
 
138
    close: function()
 
139
    {
 
140
        var expander = this.item.get('slide');
 
141
        expander.slideOut();
 
142
        if ($defined(this.open_content))
 
143
        {
 
144
            for (var i=0;i<this.open_content.length;++i)
 
145
            {
 
146
                this.open_content[i].setStyle('display','none');
 
147
            }
 
148
        }
 
149
 
 
150
        if ($defined(this.close_content))
 
151
        {
 
152
            for (var i=0;i<this.close_content.length;++i)
 
153
            {
 
154
                this.close_content[i].setStyle('display','block');
 
155
            }
 
156
        }
 
157
        if ($defined(this.expand_icon))
 
158
        {
 
159
            this.expand_icon.set('src',this.expand_icon.title);
 
160
        }
 
161
        this.is_open = false;
 
162
    },
 
163
 
 
164
    isOpen : function()
 
165
    {
 
166
        return this.is_open;
 
167
    },
 
168
 
 
169
    toggle: function()
 
170
    {
 
171
        if (this.isOpen())
 
172
        {
 
173
            this.close();
 
174
        }
 
175
        else
 
176
        {
 
177
            this.open();
 
178
        }
 
179
    }
 
180
    });
 
181
 
 
182
 
 
183
window.addEvent('domready', function()
 
184
{
 
185
    $$('.revision_log').each(function(item, i)
 
186
    {
 
187
        var item_slide = item.getElement('.revisioninfo');
 
188
        var open_content  = new Array();
 
189
        var close_content = new Array();
 
190
        open_content.push(item.getElement('.long_description'));
 
191
        close_content.push(item.getElement('.short_description'));
 
192
        var expand_icon = item.getElement('.expand_icon');
 
193
        var colapsable = new Colapsable(item_slide,expand_icon,open_content,close_content);
 
194
        
 
195
        item.getElement('.expand_revisioninfo').addEvent('click',function(){colapsable.toggle();});
 
196
        item.colapsable = colapsable;
 
197
    });
 
198
 
 
199
    $$('.diffBox').each(function(item, i)
 
200
    {
 
201
        var item_slide = item.getNext('.diffinfo');
 
202
        var expand_icon = item.getElement( '.expand_diff' );
 
203
        var colapsable = new Colapsable(item_slide,expand_icon,null,null,true);
 
204
        item.getElement( '.expand_diff' ).addEvent( 'click', function(){colapsable.toggle();});
 
205
        item.colapsable=colapsable;
 
206
    });
 
207
});
 
208
 
 
209
function toggle_expand_all(action)
 
210
{
 
211
    $$('.revision_log').each(function(item, i)
 
212
    {
 
213
        var colapsable = item.colapsable;
 
214
        if(action == 'close')
 
215
        {
 
216
            $('expand_all').setStyle('display','block');
 
217
            $('collapse_all').setStyle('display','none');
 
218
            colapsable.close();
 
219
        }
 
220
        else if(action == 'open')
 
221
        {
 
222
            $('expand_all').setStyle('display','none');
 
223
            $('collapse_all').setStyle('display','block');
 
224
            colapsable.open();
 
225
        }
 
226
    });
 
227
}
 
228
 
 
229
function toggle_expand_all_revisionview(action)
 
230
{
 
231
    $$('.diffBox').each(function(item, i)
 
232
    {
 
233
        var colapsable = item.colapsable;
 
234
        if(action == 'close')
 
235
        {
 
236
            $('expand_all').setStyle('display','block');
 
237
            $('collapse_all').setStyle('display','none');
 
238
            colapsable.close();
 
239
        }
 
240
        else if(action == 'open')
 
241
        {
 
242
            $('expand_all').setStyle('display','none');
 
243
            $('collapse_all').setStyle('display','block');
 
244
            colapsable.open();
 
245
        }
 
246
    });
 
247
}
282
248