← 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-17 22:31:42 UTC
  • Revision ID: michael.hudson@canonical.com-20090317223142-mcvjsllsn7q21e19
mention new dependency on simplejson

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");
 
1
Y = YUI().use("node", "io-base", "io-queue", "anim");
 
2
 
 
3
Y.io.queue.size(2);
2
4
 
3
5
var global_timeout_id = null;
4
6
var global_search_request = null;
78
80
function Collapsable(config)
79
81
{
80
82
  this.is_open = config.is_open;
 
83
  this.source_target = config.source_target;
81
84
  this.open_node = config.open_node;
82
85
  this.close_node = config.close_node;
83
86
  this.expand_icon = config.expand_icon;
84
87
  this.source = config.source;
85
88
  this.loading = config.loading;
86
 
  this.node_process = config.node_process;
87
 
  this.container = null;
88
 
  this.anim = null;
89
 
  this._loading = false;
90
89
}
91
90
 
92
91
function get_height(node) {
100
99
  return height;
101
100
}
102
101
 
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);
 
102
Collapsable.prototype._load_finished = function(tid, res)
 
103
{
 
104
  var newNode = Y.Node.create(res.responseText.split('\n').splice(1).join(''));
 
105
  this.source_target.ancestor().replaceChild(newNode, this.source_target);
 
106
  this.source_target = null;
130
107
  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]);
 
108
  this.loading.setStyle('display', 'none');
 
109
  this.open();
138
110
};
139
111
 
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
 
 
 
112
Collapsable.prototype.open = function()
 
113
{
211
114
  if (this.source) {
212
 
    Y.io(
 
115
    this.loading.setStyle('display', 'block');
 
116
    Y.io.queue(
213
117
      this.source,
214
118
      {
215
119
        on: {complete: this._load_finished},
216
 
        arguments: [callback],
217
120
        context: this
218
121
      });
219
122
    return;
220
123
  }
221
124
 
 
125
  var open_height = get_height(this.open_node);
 
126
 
 
127
  var close_height;
 
128
  if (this.close_node) {
 
129
    close_height = this.close_node.get('region').height;
 
130
  }
 
131
  else {
 
132
    close_height = 0;
 
133
  }
 
134
 
 
135
  var container = this.open_node.ancestor('.container');
 
136
 
 
137
  var anim = new Y.Anim(
 
138
    {
 
139
      node: container,
 
140
      from: {
 
141
        marginBottom: close_height - open_height
 
142
      },
 
143
      to: {
 
144
        marginBottom: 0
 
145
      },
 
146
      duration: 0.2
 
147
    });
 
148
 
 
149
  anim.on('end', this.openComplete, this);
 
150
  container.setStyle('marginBottom', close_height - open_height);
 
151
  if (this.close_node) {
 
152
    this.close_node.setStyle('display', 'none');
 
153
  }
 
154
  this.open_node.setStyle('display', 'block');
 
155
  this.expand_icon.set('src', this.expand_icon.get('alt'));
 
156
  anim.run();
222
157
};
223
158
 
224
 
Collapsable.prototype.animComplete = function(evt, callback)
 
159
Collapsable.prototype.openComplete = function()
225
160
{
226
 
  this.anim = null;
227
 
  if (this._loading) return;
228
 
  if (callback) callback();
229
161
  this.is_open = true;
230
162
};
231
163
 
232
164
Collapsable.prototype.close = function()
233
165
{
234
 
  this._ensure_container();
 
166
  var container = this.open_node.ancestor('.container');
235
167
 
236
168
  var open_height = this.open_node.get('region').height;
237
169
 
245
177
 
246
178
  var anim = new Y.Anim(
247
179
    {
248
 
      node: this.container,
 
180
      node: container,
249
181
      from: {
250
182
        marginBottom: 0
251
183
      },
263
195
  if (this.close_node) {
264
196
    this.close_node.setStyle('display', 'block');
265
197
  }
266
 
  this.container.setStyle('marginBottom', 0);
267
 
  this.expand_icon.set('src', collapsed_icon_path);
 
198
  this.open_node.ancestor('.container').setStyle('marginBottom', 0);
 
199
  this.expand_icon.set('src', this.expand_icon.get('title'));
268
200
  this.is_open = false;
269
201
};
270
202