← 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-19 00:18:46 UTC
  • mto: (308.1.1 sorry-rob)
  • mto: This revision was merged to the branch mainline in revision 310.
  • Revision ID: michael.hudson@canonical.com-20090319001846-bb7mxqekw4gdjrdb
continue detachment of the file_changes from the entry

Show diffs side-by-side

added added

removed removed

Lines of Context:
loggerhead/static/javascript/custom.js
 
1
Y = YUI().use("node", "io-base", "io-queue", "anim");
 
2
 
 
3
Y.io.queue.size(2);
 
4
 
1
5
var global_timeout_id = null;
2
6
var global_search_request = null;
3
7
 
4
 
window.addEvent('domready', function() 
5
 
{
6
 
    var search_box = $('q');
7
 
    search_box.removeEvents();
8
 
    search_box.addEvents(
 
8
Y.on(
 
9
  'domready',
 
10
  function()
 
11
  {
 
12
    var search_box = Y.get('#q');
 
13
    if (!Y.Lang.isNull(search_box))
9
14
    {
10
 
        keyup: function()
11
 
        {
12
 
            if($('q').value == '')
13
 
            {
14
 
                $('search_terms').setStyle('display','none');
15
 
            }
16
 
            else
17
 
            {
18
 
                if (null != global_timeout_id)
19
 
                {
20
 
                    clearTimeout(global_timeout_id);
21
 
                }
22
 
                    global_timeout_id = setTimeout('$("q").fireEvent("search",$("q").value)',200);
23
 
            }
24
 
        },
25
 
 
26
 
        search: function(query)
27
 
        {
28
 
            url = global_path + 'search?query=' + query;
29
 
 
30
 
            if ($defined(global_search_request))
31
 
            {
32
 
                global_search_request.cancel();
33
 
            }
34
 
            global_search_request = new Request({'url':url,'method':'get','onComplete':function(response)
35
 
              {
36
 
                 cool_search(response,query);
37
 
             }});
38
 
 
39
 
            global_search_request.send('');
40
 
            var posicion = search_box.getPosition();
41
 
            var size     = search_box.getSize();
42
 
 
43
 
            $('search_terms').setStyle('position','absolute');
44
 
            $('search_terms').setStyle('left',posicion.x);
45
 
            $('search_terms').setStyle('top',posicion.y + size.y);
46
 
            $('search_terms').setStyle('display','block');
47
 
            $('search_terms').set('html','Loading...');
48
 
 
49
 
            new Request({'url':url,'method':'get','onComplete':cool_search}).send('');
50
 
 
51
 
 
 
15
      function get_suggestions() {
 
16
        var query = search_box.get('value');
 
17
        var url = global_path + 'search?query=' + query;
 
18
 
 
19
        if (!Y.Lang.isNull(global_search_request))
 
20
        {
 
21
          global_search_request.abort();
52
22
        }
53
 
    });
54
 
});
55
 
 
56
 
function cool_search(response, query)
57
 
{
58
 
        var posicion = $('q').getPosition();
59
 
        var size     = $('q').getSize();
60
 
    var current_query = $('q').get('value');
61
 
    if (current_query == query)
62
 
    {
63
 
            $('search_terms').set('html',response);
64
 
            $('search_terms').setStyle('display','block');
65
 
            $('search_terms').setStyle('position','absolute');
66
 
            $('search_terms').setStyle('left',posicion.x);
67
 
            $('search_terms').setStyle('top',posicion.y + size.y);
 
23
        global_search_request = Y.io(
 
24
          url,
 
25
          {
 
26
            on: {complete: cool_search},
 
27
            arguments: [query]
 
28
          }
 
29
        );
 
30
 
 
31
        var region = search_box.get('region');
 
32
        var current_query = search_box.get('value');
 
33
 
 
34
        Y.get('#search_terms').setStyle('display', 'block');
 
35
        Y.get('#search_terms').setStyle('position', 'absolute');
 
36
        Y.get('#search_terms').setStyle('left', region.left);
 
37
        Y.get('#search_terms').setStyle('top', region.bottom);
 
38
        Y.get('#search_terms').set('innerHTML','Loading...');
 
39
      }
 
40
      search_box.on(
 
41
        "keyup",
 
42
        function(event)
 
43
        {
 
44
          if(search_box.get('value') == '')
 
45
          {
 
46
            Y.get('#search_terms').setStyle('display', 'none');
 
47
          }
 
48
          else
 
49
          {
 
50
            if (null != global_timeout_id)
 
51
            {
 
52
              clearTimeout(global_timeout_id);
 
53
            }
 
54
            global_timeout_id = setTimeout(get_suggestions, 200);
 
55
          }
 
56
        });
68
57
    }
 
58
  });
 
59
 
 
60
function cool_search(tid, response, query)
 
61
{
 
62
  var q = Y.get('#q');
 
63
  var region = q.get('region');
 
64
  var current_query = q.get('value');
 
65
  if (current_query == query)
 
66
  {
 
67
    Y.get('#search_terms').set('innerHTML', response.responseText);
 
68
    Y.get('#search_terms').setStyle('display', 'block');
 
69
    Y.get('#search_terms').setStyle('position', 'absolute');
 
70
    Y.get('#search_terms').setStyle('left', region.left);
 
71
    Y.get('#search_terms').setStyle('top', region.bottom);
 
72
  }
69
73
}
70
74
 
71
75
function hide_search()
72
76
{
73
 
    hide_div = setTimeout("$('search_terms').setStyle('display','none')", 300);
74
 
}
75
 
var Colapsable = new Class({
76
 
    initialize: function(item,expand_icon,open_content,close_content,is_open)
77
 
    {
78
 
        this.is_open = false;
79
 
        if ($defined(is_open))
80
 
        {
81
 
            this.is_open = is_open;
82
 
        }
83
 
        this.item = item;
84
 
        item.set('colapsable',this);
85
 
        this.open_content  = open_content;
86
 
        this.close_content = close_content;
87
 
        this.expand_icon   = expand_icon;
88
 
 
89
 
        var expander = new Fx.Slide(this.item, { duration: 200 } );
90
 
        if (!this.is_open)
91
 
        {
92
 
            expander.hide();
93
 
            if ($defined(this.expand_icon))
94
 
            {
95
 
                this.expand_icon.set('src',this.expand_icon.title);
96
 
            }
97
 
        }
98
 
        else
99
 
        {
100
 
            if ($defined(this.expand_icon))
101
 
            {
102
 
                this.expand_icon.set('src',this.expand_icon.alt);
103
 
            }
104
 
        }
105
 
    },
106
 
 
107
 
    open: function()
108
 
    {
109
 
        this.item.setStyle('display', 'block');
110
 
        var expander = this.item.get('slide');
111
 
        expander.slideIn();
112
 
        if ($defined(this.open_content))
113
 
        {
114
 
            for (var i=0;i<this.open_content.length;++i)
115
 
            {
116
 
                this.open_content[i].setStyle('display','block');
117
 
            }
118
 
                }
119
 
                
120
 
        if ($defined(this.close_content))
121
 
        {
122
 
            for (var i=0;i<this.close_content.length;++i)
123
 
            {
124
 
                this.close_content[i].setStyle('display','none');
125
 
            }
126
 
        }
127
 
 
128
 
        if ($defined(this.expand_icon))
129
 
        {
130
 
            this.expand_icon.set('src',this.expand_icon.alt);
131
 
        }
132
 
        this.is_open = true;
133
 
    },
134
 
 
135
 
    close: function()
136
 
    {
137
 
        var expander = this.item.get('slide');
138
 
        expander.slideOut();
139
 
        if ($defined(this.open_content))
140
 
        {
141
 
            for (var i=0;i<this.open_content.length;++i)
142
 
            {
143
 
                this.open_content[i].setStyle('display','none');
144
 
            }
145
 
        }
146
 
 
147
 
        if ($defined(this.close_content))
148
 
        {
149
 
            for (var i=0;i<this.close_content.length;++i)
150
 
            {
151
 
                this.close_content[i].setStyle('display','block');
152
 
            }
153
 
        }
154
 
        if ($defined(this.expand_icon))
155
 
        {
156
 
            this.expand_icon.set('src',this.expand_icon.title);
157
 
        }
158
 
        this.is_open = false;
159
 
    },
160
 
 
161
 
    isOpen : function()
162
 
    {
163
 
        return this.is_open;
164
 
    },
165
 
 
166
 
    toggle: function()
167
 
    {
168
 
        if (this.isOpen())
169
 
        {
170
 
            this.close();
171
 
        }
172
 
        else
173
 
        {
174
 
            this.open();
175
 
        }
176
 
    }
177
 
    });
178
 
 
179
 
 
180
 
window.addEvent('domready', function()
181
 
{
182
 
    $$('.revision_log').each(function(item, i)
183
 
    {
184
 
        var item_slide = item.getElement('.revisioninfo');
185
 
        var open_content  = new Array();
186
 
        var close_content = new Array();
187
 
        open_content.push(item.getElement('.long_description'));
188
 
        close_content.push(item.getElement('.short_description'));
189
 
        var expand_icon = item.getElement('.expand_icon');
190
 
        var colapsable = new Colapsable(item_slide,expand_icon,open_content,close_content);
191
 
        
192
 
        item.getElement('.expand_revisioninfo').addEvent('click',function(){colapsable.toggle();});
193
 
        item.colapsable = colapsable;
194
 
    });
195
 
 
196
 
    $$('.diffBox').each(function(item, i)
197
 
    {
198
 
        var item_slide = item.getNext('.diffinfo');
199
 
        var expand_icon = item.getElement( '.expand_diff' );
200
 
        var colapsable = new Colapsable(item_slide,expand_icon,null,null,true);
201
 
        item.getElement( '.expand_diff' ).addEvent( 'click', function(){colapsable.toggle();});
202
 
        item.colapsable=colapsable;
203
 
    });
204
 
});
205
 
 
206
 
function toggle_expand_all(action)
207
 
{
208
 
    $$('.revision_log').each(function(item, i)
209
 
    {
210
 
        var colapsable = item.colapsable;
211
 
        if(action == 'close')
212
 
        {
213
 
            $('expand_all').setStyle('display','block');
214
 
            $('collapse_all').setStyle('display','none');
215
 
            colapsable.close();
216
 
        }
217
 
        else if(action == 'open')
218
 
        {
219
 
            $('expand_all').setStyle('display','none');
220
 
            $('collapse_all').setStyle('display','block');
221
 
            colapsable.open();
222
 
        }
223
 
    });
224
 
}
225
 
 
226
 
function toggle_expand_all_revisionview(action)
227
 
{
228
 
    $$('.diffBox').each(function(item, i)
229
 
    {
230
 
        var colapsable = item.colapsable;
231
 
        if(action == 'close')
232
 
        {
233
 
            $('expand_all').setStyle('display','block');
234
 
            $('collapse_all').setStyle('display','none');
235
 
            colapsable.close();
236
 
        }
237
 
        else if(action == 'open')
238
 
        {
239
 
            $('expand_all').setStyle('display','none');
240
 
            $('collapse_all').setStyle('display','block');
241
 
            colapsable.open();
242
 
        }
243
 
    });
244
 
}
 
77
  setTimeout("Y.get('#search_terms').setStyle('display','none')", 300);
 
78
}
 
79
 
 
80
function Collapsable(config)
 
81
{
 
82
  this.is_open = config.is_open;
 
83
  this.source_target = config.source_target;
 
84
  this.open_node = config.open_node;
 
85
  this.close_node = config.close_node;
 
86
  this.expand_icon = config.expand_icon;
 
87
  this.source = config.source;
 
88
  this.loading = config.loading;
 
89
  this.node_process = config.node_process;
 
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._load_finished = function(tid, res, args)
 
104
{
 
105
  var newNode = Y.Node.create(res.responseText.split('\n').splice(1).join(''));
 
106
  if (this.node_process)
 
107
    this.node_process(newNode);
 
108
  this.source_target.ancestor().replaceChild(newNode, this.source_target);
 
109
  this.source_target = null;
 
110
  this.source = null;
 
111
  this.loading.setStyle('display', 'none');
 
112
  this.open(args[0]);
 
113
};
 
114
 
 
115
Collapsable.prototype.open = function(callback)
 
116
{
 
117
  if (this.source) {
 
118
    this.loading.setStyle('display', 'block');
 
119
    Y.io.queue(
 
120
      this.source,
 
121
      {
 
122
        on: {complete: this._load_finished},
 
123
        arguments: [callback],
 
124
        context: this
 
125
      });
 
126
    return;
 
127
  }
 
128
 
 
129
  var open_height = get_height(this.open_node);
 
130
 
 
131
  var close_height;
 
132
  if (this.close_node) {
 
133
    close_height = this.close_node.get('region').height;
 
134
  }
 
135
  else {
 
136
    close_height = 0;
 
137
  }
 
138
 
 
139
  var container = this.open_node.ancestor('.container');
 
140
 
 
141
  var anim = new Y.Anim(
 
142
    {
 
143
      node: container,
 
144
      from: {
 
145
        marginBottom: close_height - open_height
 
146
      },
 
147
      to: {
 
148
        marginBottom: 0
 
149
      },
 
150
      duration: 0.2
 
151
    });
 
152
 
 
153
  anim.on('end', this.openComplete, this, callback);
 
154
  container.setStyle('marginBottom', close_height - open_height);
 
155
  if (this.close_node) {
 
156
    this.close_node.setStyle('display', 'none');
 
157
  }
 
158
  this.open_node.setStyle('display', 'block');
 
159
  this.expand_icon.set('src', this.expand_icon.get('alt'));
 
160
  anim.run();
 
161
};
 
162
 
 
163
Collapsable.prototype.openComplete = function(evt, callback)
 
164
{
 
165
  if (callback) callback();
 
166
  this.is_open = true;
 
167
};
 
168
 
 
169
Collapsable.prototype.close = function()
 
170
{
 
171
  var container = this.open_node.ancestor('.container');
 
172
 
 
173
  var open_height = this.open_node.get('region').height;
 
174
 
 
175
  var close_height;
 
176
  if (this.close_node) {
 
177
    close_height = get_height(this.close_node);
 
178
  }
 
179
  else {
 
180
    close_height = 0;
 
181
  }
 
182
 
 
183
  var anim = new Y.Anim(
 
184
    {
 
185
      node: container,
 
186
      from: {
 
187
        marginBottom: 0
 
188
      },
 
189
      to: {
 
190
        marginBottom: close_height - open_height
 
191
      },
 
192
      duration: 0.2
 
193
    });
 
194
  anim.on("end", this.closeComplete, this);
 
195
  anim.run();
 
196
};
 
197
 
 
198
Collapsable.prototype.closeComplete = function () {
 
199
  this.open_node.setStyle('display', 'none');
 
200
  if (this.close_node) {
 
201
    this.close_node.setStyle('display', 'block');
 
202
  }
 
203
  this.open_node.ancestor('.container').setStyle('marginBottom', 0);
 
204
  this.expand_icon.set('src', this.expand_icon.get('title'));
 
205
  this.is_open = false;
 
206
};
 
207
 
 
208
Collapsable.prototype.toggle = function()
 
209
{
 
210
  if (this.is_open)
 
211
  {
 
212
    this.close();
 
213
  }
 
214
  else
 
215
  {
 
216
    this.open();
 
217
  }
 
218
};
245
219