/loggerhead/trunk

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/loggerhead/trunk

« back to all changes in this revision

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

  • Committer: Ubuntu One Auto Copilot
  • Author(s): Colin Watson
  • Date: 2022-09-21 12:08:21 UTC
  • mfrom: (539.1.2 fix-tox)
  • Revision ID: otto-copilot@canonical.com-20220921120821-fan53lzjaborq3h1
Fix running tests in tox.

Merged from https://code.launchpad.net/~cjwatson/loggerhead/fix-tox/+merge/430053

Show diffs side-by-side

added added

removed removed

Lines of Context:
loggerhead/static/javascript/custom.js
1
 
Y = YUI().use("base", "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()
 
4
$(function()
9
5
  {
10
 
    var search_box = Y.get('#q');
11
 
    if (!Y.Lang.isNull(search_box))
 
6
    var search_box = $('#q');
 
7
    if (search_box != undefined)
12
8
    {
13
9
      function get_suggestions() {
14
 
        var query = search_box.get('value');
 
10
        var query = search_box.value;
15
11
        var url = global_path + 'search?query=' + query;
16
12
 
17
 
        if (!Y.Lang.isNull(global_search_request))
 
13
        if (global_search_request != undefined)
18
14
        {
19
15
          global_search_request.abort();
20
16
        }
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
 
      }
 
17
        global_search_request = $.get(url, {'query': query}).done(cool_search);
 
18
 
 
19
        var current_query = search_box.value;
 
20
 
 
21
        $('#search_terms').css({
 
22
            'display': 'block',
 
23
            'position': 'absolute',
 
24
            'left': search_box.left,
 
25
            'top': search_box.bottom,
 
26
            'innerHTML': 'Loading...',
 
27
      });
38
28
      search_box.on(
39
29
        "keyup",
40
30
        function(event)
41
31
        {
42
 
          if(search_box.get('value') == '')
 
32
          if(search_box.value == '')
43
33
          {
44
 
            Y.get('#search_terms').setStyle('display', 'none');
 
34
            $('#search_terms').css({'display': 'none'});
45
35
          }
46
36
          else
47
37
          {
52
42
            global_timeout_id = setTimeout(get_suggestions, 200);
53
43
          }
54
44
        });
 
45
      }
55
46
    }
56
 
  });
 
47
});
57
48
 
58
49
function cool_search(tid, response, query)
59
50
{
60
 
  var q = Y.get('#q');
61
 
  var region = q.get('region');
62
 
  var current_query = q.get('value');
 
51
  var q = $('#q');
 
52
  var current_query = q.value;
63
53
  if (current_query == query)
64
54
  {
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);
 
55
    $('#search_terms').html(response.responseText);
 
56
    $('#search_terms').css({
 
57
       'display': 'block',
 
58
       'position': 'absolute',
 
59
       'left': q.left,
 
60
       'top': q.bottom,
 
61
    });
70
62
  }
71
63
}
72
64
 
73
65
function hide_search()
74
66
{
75
 
  setTimeout("Y.get('#search_terms').setStyle('display','none')", 300);
 
67
  setTimeout("$('#search_terms').css({'display': 'none'})", 300);
76
68
}
77
69
 
78
70
function Collapsable(config)
90
82
}
91
83
 
92
84
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');
 
85
  $(node).css({
 
86
     'position': 'absolute',
 
87
     'top': -1000000000,
 
88
     'display': 'block',
 
89
  });
 
90
  var height = $(node).height;
 
91
  $(node).css({
 
92
     'display': 'none',
 
93
     'position': 'static',
 
94
     'top': 'auto',
 
95
  });
100
96
  return height;
101
97
}
102
98
 
104
100
{
105
101
  if (this.anim) this.anim.stop();
106
102
 
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);
 
103
  this.anim = $(this.container).animate(
 
104
     {marginBottom: 0 }, 0.2, "swing" , function(event) {
 
105
       this.anim = null;
 
106
       if (this._loading) return;
 
107
       if (callback) callback();
 
108
       this.is_open = true;
 
109
     }.bind(this));
121
110
}
122
111
 
123
 
Collapsable.prototype._load_finished = function(tid, res, args)
 
112
Collapsable.prototype._load_finished = function(data, callback)
124
113
{
125
 
  var l = res.responseText.split('\n');
 
114
  var l = data.split('\n');
126
115
  l.splice(0, 1);
127
 
  var newNode = Y.Node.create(l.join(''));
 
116
  var newNode = $(l.join(''));
128
117
  if (this.node_process)
129
118
    this.node_process(newNode);
130
119
  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]);
 
120
  newNode.css({'display': 'none'});
 
121
  newNode.insertBefore(this.loading);
 
122
  var delta = this.loading.height - get_height(newNode);
 
123
  newNode.css({'display': 'block'});
 
124
  this.container.css({'marginBottom': parseFloat(this.container.css('marginBottom')) + delta});
 
125
  this.loading.remove();
 
126
  this._animate(callback);
138
127
};
139
128
 
140
129
Collapsable.prototype._ensure_container = function(callback)
141
130
{
142
131
  if (this.container == null) {
143
 
    this.container = Y.Node.create('<div></div>');
 
132
    this.container = $('<div></div>');
144
133
    if (this.closed_node) {
145
134
      this.closed_node.ancestor().replaceChild(
146
135
        this.container, this.closed_node);
150
139
      }
151
140
    }
152
141
    else {
153
 
      this.open_node.ancestor().replaceChild(
154
 
        this.container, this.open_node);
155
 
      this.container.appendChild(this.open_node);
 
142
      $(this.open_node).replaceWith(this.container);
 
143
      $(this.container).append(this.open_node);
156
144
    }
157
 
    var outer = Y.Node.create('<div style="overflow:hidden;"></div>');
158
 
    this.container.ancestor().replaceChild(outer, this.container);
159
 
    outer.appendChild(this.container);
 
145
    var outer = $('<div style="overflow:hidden;"></div>');
 
146
    this.container.replaceWith(outer);
 
147
    $(outer).append(this.container);
160
148
  }
161
149
}
162
150
 
186
174
 
187
175
Collapsable.prototype.open = function(callback)
188
176
{
189
 
  this.expand_icon.set('src', expanded_icon_path);
 
177
  this.expand_icon[0].src = expanded_icon_path;
190
178
 
191
179
  this._ensure_container();
192
180
 
194
182
 
195
183
  var close_height;
196
184
  if (this.close_node) {
197
 
    close_height = this.close_node.get('region').height;
 
185
    close_height = this.close_node.height;
198
186
  }
199
187
  else {
200
188
    close_height = 0;
201
189
  }
202
190
 
203
 
  this.container.setStyle('marginBottom', close_height - open_height);
 
191
  $(this.container).css({'marginBottom': close_height - open_height});
204
192
  if (this.close_node) {
205
 
    this.close_node.setStyle('display', 'none');
 
193
    $(this.close_node).css({'display': 'none'});
206
194
  }
207
 
  this.open_node.setStyle('display', 'block');
 
195
  $(this.open_node).css({'display': 'block'});
208
196
 
209
197
  this._animate(callback);
210
198
 
 
199
  var collapsable = this;
 
200
 
211
201
  if (this.source) {
212
 
    Y.io(
213
 
      this.source,
214
 
      {
215
 
        on: {complete: this._load_finished},
216
 
        arguments: [callback],
217
 
        context: this
 
202
      $.get(this.source, function(data) {
 
203
            collapsable._load_finished(data, callback);
218
204
      });
219
205
    return;
220
206
  }
221
207
 
222
208
};
223
209
 
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
210
Collapsable.prototype.close = function()
233
211
{
234
212
  this._ensure_container();
235
213
 
236
 
  var open_height = this.open_node.get('region').height;
 
214
  var open_height = this.open_node.height;
237
215
 
238
216
  var close_height;
239
217
  if (this.close_node) {
243
221
    close_height = 0;
244
222
  }
245
223
 
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();
 
224
  var anim = $(this.container).animate(
 
225
      { marginBottom: [0, close_height - open_height]},
 
226
      0.2, "swing", this.closeComplete.bind(this));
259
227
};
260
228
 
261
229
Collapsable.prototype.closeComplete = function () {
262
 
  this.open_node.setStyle('display', 'none');
 
230
  $(this.open_node).css({'display': 'none'});
263
231
  if (this.close_node) {
264
 
    this.close_node.setStyle('display', 'block');
 
232
    $(this.close_node).css({'display': 'block'});
265
233
  }
266
 
  this.container.setStyle('marginBottom', 0);
267
 
  this.expand_icon.set('src', collapsed_icon_path);
 
234
  $(this.container).css({'marginBottom': 0});
 
235
  this.expand_icon[0].src = collapsed_icon_path;
268
236
  this.is_open = false;
269
237
};
270
238
 
305
273
        }
306
274
    }
307
275
    var id_selector = "#" + target_id;
308
 
    var main = Y.get(id_selector);
309
 
    notification_node = Y.Node.create('<div></div>')
 
276
    var main = $(id_selector);
 
277
    notification_node = $('<div></div>')
310
278
        .addClass('global-notification');
311
279
    if (hidden) {
312
280
        notification_node.addClass('hidden');
313
281
    }
314
 
    var notification_span = Y.Node.create('<span></span>')
 
282
    var notification_span = $('<span></span>')
315
283
        .addClass('sprite')
316
284
        .addClass('notification-private');
317
285
    notification_node.set('innerHTML', notification_text);
324
292
     this is because we have no way to use feature flags in
325
293
     css directly. This should be removed if the feature
326
294
     is accepted. */
327
 
    var body = Y.get('body');
 
295
    var body = $(document.body);
328
296
    body.addClass('feature-flag-bugs-private-notification-enabled');
329
297
    // Set the visible flag so that the content moves down.
330
298
    body.addClass('global-notification-visible');
331
299
 
332
300
    setup_privacy_notification();
333
 
    var global_notification = Y.get('.global-notification');
 
301
    var global_notification = $('.global-notification');
334
302
    if (global_notification.hasClass('hidden')) {
335
303
        global_notification.addClass('transparent');
336
304
        global_notification.removeClass('hidden');
337
305
 
338
 
        var fade_in = new Y.Anim({
339
 
            node: global_notification,
340
 
            to: {opacity: 1},
341
 
            duration: 0.3
342
 
        });
343
 
        var body_space = new Y.Anim({
344
 
            node: 'body',
345
 
            to: {'paddingTop': '40px'},
346
 
            duration: 0.2,
347
 
            easing: Y.Easing.easeOut
348
 
        });
349
 
        var black_link_space = new Y.Anim({
350
 
            node: '.black-link',
351
 
            to: {'top': '45px'},
352
 
            duration: 0.2,
353
 
            easing: Y.Easing.easeOut
354
 
        });
355
 
 
356
 
        fade_in.run();
357
 
        body_space.run();
358
 
        black_link_space.run();
 
306
        $(global_notification).animate({
 
307
            opacity: 1,
 
308
        }, 0.3);
 
309
        $(document.body).animate(
 
310
            {'paddingTop': '40px'}, 0.2, "easeOutBounce");
 
311
        $('.black-link').animate(
 
312
            {'top': '45px'}, 0.2, "easeOutBounce");
359
313
    }
360
314
};
361
315
 
362
 
Y.on('domready', function() {
363
 
    var body = Y.get('body');
 
316
$(function() {
 
317
    var body = $(document.body);
364
318
    if (body.hasClass('private')) {
365
319
        setup_privacy_notification();
366
320
        display_privacy_notification();