← 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: Michael Hudson
  • Date: 2009-03-16 06:23:00 UTC
  • Revision ID: michael.hudson@canonical.com-20090316062300-xzqamcrbksg4url4
fix minor visual issue caused by IE compatibility work

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
 
1
3
var global_timeout_id = null;
2
4
var global_search_request = null;
3
5
 
4
 
window.addEvent('domready', function() 
5
 
{
6
 
    var search_box = $('q');
7
 
    if ($defined(search_box))
 
6
Y.on(
 
7
  'domready',
 
8
  function()
 
9
  {
 
10
    var search_box = Y.get('#q');
 
11
    if (!Y.Lang.isNull(search_box))
8
12
    {
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
 
 
 
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);
54
51
            }
 
52
            global_timeout_id = setTimeout(get_suggestions, 200);
 
53
          }
55
54
        });
56
55
    }
57
 
});
 
56
  });
58
57
 
59
 
function cool_search(response, query)
 
58
function cool_search(tid, response, query)
60
59
{
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
 
    }
 
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
  }
72
71
}
73
72
 
74
73
function hide_search()
75
74
{
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
 
}
 
75
  setTimeout("Y.get('#search_terms').setStyle('display','none')", 300);
 
76
}
 
77
 
 
78
function Collapsable(item, expand_icon, open_content, close_content, is_open)
 
79
{
 
80
  this.is_open = is_open;
 
81
  this.item = item;
 
82
  this.open_content  = open_content;
 
83
  this.close_content = close_content;
 
84
  this.expand_icon   = expand_icon;
 
85
 
 
86
  if (this.is_open) {
 
87
    this.height = item.get('region').height;
 
88
  }
 
89
  else {
 
90
    this.height = null;
 
91
  }
 
92
 
 
93
  //var expander = new Fx.Slide(this.item, { duration: 200 } );
 
94
  if (!this.is_open)
 
95
  {
 
96
    this.expand_icon.set('src',this.expand_icon.get('title'));
 
97
  }
 
98
  else
 
99
  {
 
100
    this.expand_icon.set('src',this.expand_icon.get('alt'));
 
101
  }
 
102
}
 
103
 
 
104
function get_height(node) {
 
105
  node.setStyle('position', 'absolute');
 
106
  node.setStyle('top', -1000000000);
 
107
  node.setStyle('display', 'block');
 
108
  var height = node.get('region').height;
 
109
  node.setStyle('display', 'none');
 
110
  node.setStyle('position', 'static');
 
111
  node.setStyle('top', 'auto');
 
112
  return height;
 
113
}
 
114
 
 
115
Collapsable.prototype.open = function()
 
116
{
 
117
  if (this.height == null) {
 
118
    this.height = get_height(this.item);
 
119
  }
 
120
 
 
121
  var anim = new Y.Anim(
 
122
    {
 
123
      node: this.item,
 
124
      from: {
 
125
        height: 0
 
126
      },
 
127
      to: {
 
128
        height: this.height
 
129
      },
 
130
      duration: 0.2
 
131
    });
 
132
  anim.on('end', this.openComplete, this);
 
133
  this.item.setStyle('height', 0);
 
134
  this.item.setStyle('display', 'block');
 
135
  anim.run();
 
136
};
 
137
 
 
138
Collapsable.prototype.openComplete = function()
 
139
{
 
140
  for (var i=0;i<this.open_content.length;++i)
 
141
  {
 
142
    this.open_content[i].setStyle('display','block');
 
143
  }
 
144
 
 
145
  for (var i=0;i<this.close_content.length;++i)
 
146
  {
 
147
    this.close_content[i].setStyle('display','none');
 
148
  }
 
149
 
 
150
  this.expand_icon.set('src',this.expand_icon.get('alt'));
 
151
  this.is_open = true;
 
152
};
 
153
 
 
154
Collapsable.prototype.close = function()
 
155
{
 
156
  var item = this.item;
 
157
  var anim = new Y.Anim(
 
158
    {
 
159
      node: this.item,
 
160
      from: {
 
161
        height: this.height
 
162
      },
 
163
      to: {
 
164
        height: 0
 
165
      },
 
166
      duration: 0.2
 
167
    });
 
168
  anim.on("end", this.closeComplete, this);
 
169
  anim.run();
 
170
};
 
171
 
 
172
Collapsable.prototype.closeComplete = function () {
 
173
  this.item.setStyle('display', 'none');
 
174
  var i;
 
175
  for (i=0;i<this.open_content.length;++i)
 
176
  {
 
177
    this.open_content[i].setStyle('display','none');
 
178
  }
 
179
 
 
180
  for (i=0;i<this.close_content.length;++i)
 
181
  {
 
182
    this.close_content[i].setStyle('display','block');
 
183
  }
 
184
  this.expand_icon.set('src',this.expand_icon.get('title'));
 
185
  this.is_open = false;
 
186
};
 
187
 
 
188
Collapsable.prototype.isOpen = function()
 
189
{
 
190
  return this.is_open;
 
191
};
 
192
 
 
193
Collapsable.prototype.toggle = function()
 
194
{
 
195
  if (this.isOpen())
 
196
  {
 
197
    this.close();
 
198
  }
 
199
  else
 
200
  {
 
201
    this.open();
 
202
  }
 
203
};
248
204