Mercurial > hg > MPIWGWeb
annotate js/mpiwg.js @ 103:79a198e7b1b7
foldable table rows.
| author | casties |
|---|---|
| date | Mon, 27 May 2013 11:32:30 +0200 |
| parents | 04a26a5d3d1d |
| children | bf3dc3a12147 782477730916 |
| rev | line source |
|---|---|
|
66
68b3d71eed27
formatting for preprint list. javascript for foldable divs.
casties
parents:
diff
changeset
|
1 /* |
|
68b3d71eed27
formatting for preprint list. javascript for foldable divs.
casties
parents:
diff
changeset
|
2 * Javascript for MPIWG website |
| 88 | 3 */ |
|
66
68b3d71eed27
formatting for preprint list. javascript for foldable divs.
casties
parents:
diff
changeset
|
4 |
|
68b3d71eed27
formatting for preprint list. javascript for foldable divs.
casties
parents:
diff
changeset
|
5 $(document).ready(function() { |
| 88 | 6 /* |
| 7 * autosubmit forms | |
| 8 */ | |
| 9 $('form.autosubmit').find('.autosubmit').change(function() { | |
| 10 this.form.submit(); | |
| 11 }); | |
| 12 // hide submit button | |
| 13 $('form.autosubmit input[type="submit"].autosubmit').hide(); | |
| 14 | |
| 15 /* | |
| 16 * foldout divs | |
| 103 | 17 * |
| 18 * foldable: .foldable is ancestor of .fold_head and .fold_body | |
| 19 * that are folded simultaneously. | |
| 20 * | |
| 21 * foldableById: .foldableById is ancestor of multiple .fold_head and .fold_body | |
| 22 * where each pair has a common unique .foldId_xxx. | |
| 23 * | |
| 24 * Clicking on .fold_head folds and unfolds .fold_body. | |
| 25 * | |
| 26 * If .foldable has .initially_open .fold_body is initially shown, else its | |
| 27 * initally hidden. | |
| 88 | 28 */ |
| 103 | 29 $('.foldable').each(function () { |
| 88 | 30 var $this = $(this); |
| 31 var $head = $this.find('.fold_head'); | |
| 32 var $img = $head.find('img'); | |
| 33 var $body = $this.find('.fold_body'); | |
| 103 | 34 $head.on('click', function () { |
| 88 | 35 $body.slideToggle('fast'); |
| 36 $img.toggle(); | |
| 37 }).css('cursor', 'pointer'); | |
| 38 if (! $this.hasClass('initially_open')) { | |
| 39 // hide body initially | |
| 40 $body.hide(); | |
| 41 $img.toggle(); | |
| 42 } | |
| 43 }); | |
| 103 | 44 $('.foldableById').each(function () { |
| 45 var $container = $(this); | |
| 46 var io = $container.hasClass('initially_open'); | |
| 47 var $heads = $container.find('.fold_head'); | |
| 48 $heads.each(function () { | |
| 49 var $this = $(this); | |
| 50 var $img = $this.find('img'); | |
| 51 var id = null; | |
| 52 // find id in class | |
| 53 var cls = $this.attr('class').split(' '); | |
| 54 for (var i = 0; i < cls.length; ++i) { | |
| 55 var c = cls[i]; | |
| 56 if (c.startsWith('foldId_')) { | |
| 57 id = c; | |
| 58 break; | |
| 59 } | |
| 60 } | |
| 61 if (id == null) return; | |
| 62 // get body using id | |
| 63 var $body = $container.find('.fold_body.'+id); | |
| 64 $this.on('click', function () { | |
| 65 $body.slideToggle('fast'); | |
| 66 $img.toggle(); | |
| 67 }); | |
| 68 if (!io) { | |
| 69 // hide body initially | |
| 70 $body.hide(); | |
| 71 $img.toggle(); | |
| 72 } | |
| 73 }).css('cursor', 'pointer'); | |
| 74 }); | |
| 88 | 75 }); |