Mercurial > hg > MPIWGWeb
annotate js/mpiwg.js @ 221:e8431f86ac70
anker fuer direkte spruenge in thesaurus
| author | dwinter |
|---|---|
| date | Thu, 24 Oct 2013 15:32:51 +0200 |
| parents | 5ffb9e7167b6 |
| children | 4eddd388d490 |
| 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 |
| 112 | 3 * (C) 2013 MPIWG Berlin |
| 88 | 4 */ |
|
66
68b3d71eed27
formatting for preprint list. javascript for foldable divs.
casties
parents:
diff
changeset
|
5 |
| 112 | 6 /* |
| 7 * AjaxSlider plugin. | |
| 8 */ | |
|
108
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
9 (function ($) { |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
10 $.fn.AjaxSlider = function (opts) { |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
11 var settings = $.extend({ |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
12 dataUrl : null, |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
13 dataSel : '', |
| 112 | 14 windowSel : 'div.slidewindow', |
| 15 contentSel : 'div.row', | |
| 117 | 16 minHeight : 0, |
| 112 | 17 buttonWidth : '20px', |
|
108
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
18 scrollBy: '100px', |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
19 }, opts); |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
20 var url = settings.dataUrl + ' ' + settings.dataSel; |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
21 var $slider = this; |
| 116 | 22 var winW = this.width() - 2 * settings.buttonWidth; |
|
108
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
23 var sliderH = this.height(); |
| 144 | 24 // load HTML from dataUrl into $slider |
|
108
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
25 this.load(url, function () { |
| 112 | 26 var $window = $slider.find(settings.windowSel); |
| 116 | 27 var $content = $slider.find(settings.contentSel); |
| 112 | 28 // fix window width and height and hide overflow |
| 117 | 29 var winH = Math.max($content.height(), settings.minHeight); |
| 116 | 30 $window.css({'width':winW, 'height':winH, 'margin':'0 '+settings.buttonWidth, |
| 112 | 31 'overflow':'hidden', 'position':'relative'}); |
|
108
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
32 // content will be moved |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
33 $content.css({'position':'absolute', 'left':'0'}); |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
34 $slider.find('.slidebutton.prev').show().on('click', function () { |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
35 $content.animate({'left':'+='+settings.scrollBy}, 'fast'); |
| 144 | 36 }).css('cursor', 'pointer'); |
|
108
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
37 $slider.find('.slidebutton.next').show().on('click', function () { |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
38 $content.animate({'left':'-='+settings.scrollBy}, 'fast'); |
| 144 | 39 }).css('cursor', 'pointer'); |
|
108
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
40 }); |
| 119 | 41 |
| 42 | |
| 43 | |
| 113 | 44 }; |
|
108
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
45 }(jQuery)); |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
46 |
|
782477730916
CLOSED - # 57: Research/ Research Units: Karussell f?r die Projekte in einem Department
casties
parents:
103
diff
changeset
|
47 |
| 119 | 48 /* experimental function for adding swiping functionallities to the slider */ |
| 49 | |
| 50 var startX; | |
| 51 var startY; | |
| 52 var endX | |
| 53 var endY | |
| 54 | |
| 55 function touchStart(event){ | |
| 56 startX = event.touches[0].pageX; | |
| 57 startY = event.touches[0].pageY; | |
| 58 }; | |
| 59 | |
| 60 function touchMove(event){ | |
| 61 endX = event.targetTouches[0].pageX; | |
| 62 endY = event.targetTouches[0].pageY; | |
| 63 }; | |
| 64 function touchEnd(event){ | |
| 65 var scrollBy='143px'; | |
| 66 var contentSel = 'div.row'; | |
| 67 | |
| 68 //slider = document.getElementById('newBooksSlider'); | |
| 69 slider=event.currentTarget; | |
| 70 | |
| 71 content = $(slider).find(contentSel); | |
| 72 | |
| 73 if((startX-endX) > 0){ | |
| 74 | |
| 75 content.animate({'left':'-='+scrollBy}, 'fast'); | |
| 76 | |
| 77 } | |
| 78 if((startX-endX) < 0){ | |
| 79 content.animate({'left':'+='+scrollBy}, 'fast'); | |
| 80 } | |
| 81 } | |
| 82 | |
| 83 function initialize_swipe(selector){ | |
| 84 | |
| 85 $('.ajaxSlider').each(function(){ | |
| 86 this.addEventListener("touchstart",touchStart,false); | |
| 87 this.addEventListener("touchend",touchEnd,false); | |
| 88 this.addEventListener("touchmove",touchMove,false); | |
| 89 | |
| 90 } ); | |
| 91 }; | |
| 92 | |
| 219 | 93 function getURLParameter(name) { |
| 94 return (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20')||null | |
| 95 | |
| 96 } | |
| 97 | |
| 98 function openSelected(){ | |
| 99 // oeffne im folgenden die tags die zur kategorie "open" gehoeren | |
| 100 var open = getURLParameter("open"); | |
| 101 | |
| 221 | 102 var head = $('#'+open).parent().parent() |
| 219 | 103 |
| 104 var img = $(head).find('img'); | |
| 105 | |
| 106 // tag auf level 1 ebene | |
| 107 if ($(head).hasClass('fold_head')){ | |
| 108 var body = $(head).parent().find('.fold_body'); | |
| 109 | |
| 110 body.slideToggle('fast'); | |
| 111 img.toggle(); | |
| 112 } | |
| 113 | |
| 114 //tag auf level 2 ebne | |
| 221 | 115 if ($(head).hasClass('foldable2')){ |
| 219 | 116 |
| 117 //oeffne erst den darueberliegenden level | |
| 221 | 118 var par = $(head).parent().parent(); |
| 119 var img_level1 = $(head).parent().parent().find('li.fold_head img'); | |
| 219 | 120 |
| 121 var level1 = par.find('.fold_body'); | |
| 122 level1.slideToggle('fast'); | |
| 123 img_level1.toggle() | |
| 124 | |
| 125 | |
| 126 //jetzt den level selbst | |
| 127 var body2 = $(head).parent().find('.fold_body2'); | |
| 128 | |
| 129 body2.slideToggle('fast'); | |
| 130 img.toggle(); | |
| 131 } | |
| 132 | |
| 133 } | |
| 134 | |
|
66
68b3d71eed27
formatting for preprint list. javascript for foldable divs.
casties
parents:
diff
changeset
|
135 $(document).ready(function() { |
| 157 | 136 /* |
| 137 * show javascriptonly | |
| 138 */ | |
| 139 $('.javascriptonly').show(); | |
| 140 | |
| 88 | 141 /* |
| 142 * autosubmit forms | |
| 143 */ | |
| 144 $('form.autosubmit').find('.autosubmit').change(function() { | |
| 145 this.form.submit(); | |
| 146 }); | |
| 147 // hide submit button | |
| 148 $('form.autosubmit input[type="submit"].autosubmit').hide(); | |
| 149 | |
| 150 /* | |
| 151 * foldout divs | |
| 103 | 152 * |
| 153 * foldable: .foldable is ancestor of .fold_head and .fold_body | |
| 197 | 154 * all children are folded simultaneously. |
| 103 | 155 * |
| 156 * foldableById: .foldableById is ancestor of multiple .fold_head and .fold_body | |
| 157 * where each pair has a common unique .foldId_xxx. | |
| 158 * | |
| 159 * Clicking on .fold_head folds and unfolds .fold_body. | |
| 160 * | |
| 161 * If .foldable has .initially_open .fold_body is initially shown, else its | |
| 162 * initally hidden. | |
| 88 | 163 */ |
| 103 | 164 $('.foldable').each(function () { |
| 88 | 165 var $this = $(this); |
| 166 var $head = $this.find('.fold_head'); | |
| 167 var $img = $head.find('img'); | |
| 168 var $body = $this.find('.fold_body'); | |
| 103 | 169 $head.on('click', function () { |
| 88 | 170 $body.slideToggle('fast'); |
| 171 $img.toggle(); | |
| 172 }).css('cursor', 'pointer'); | |
| 173 if (! $this.hasClass('initially_open')) { | |
| 174 // hide body initially | |
| 175 $body.hide(); | |
| 176 $img.toggle(); | |
| 177 } | |
| 178 }); | |
| 107 | 179 $('.foldable2').each(function () { |
| 180 var $this = $(this); | |
| 181 var $head = $this.find('.fold_head2'); | |
| 182 var $img = $head.find('img'); | |
| 183 var $body = $this.find('.fold_body2'); | |
| 184 $head.on('click', function () { | |
| 185 $body.slideToggle('fast'); | |
| 186 $img.toggle(); | |
| 187 }).css('cursor', 'pointer'); | |
| 188 if (! $this.hasClass('initially_open')) { | |
| 189 // hide body initially | |
| 190 $body.hide(); | |
| 191 $img.toggle(); | |
| 192 } | |
| 193 }); | |
| 103 | 194 $('.foldableById').each(function () { |
| 195 var $container = $(this); | |
| 196 var io = $container.hasClass('initially_open'); | |
| 197 var $heads = $container.find('.fold_head'); | |
| 198 $heads.each(function () { | |
| 199 var $this = $(this); | |
| 200 var $img = $this.find('img'); | |
| 201 var id = null; | |
| 202 // find id in class | |
| 203 var cls = $this.attr('class').split(' '); | |
| 204 for (var i = 0; i < cls.length; ++i) { | |
| 205 var c = cls[i]; | |
| 206 if (c.startsWith('foldId_')) { | |
| 207 id = c; | |
| 208 break; | |
| 209 } | |
| 210 } | |
| 211 if (id == null) return; | |
| 212 // get body using id | |
| 213 var $body = $container.find('.fold_body.'+id); | |
| 214 $this.on('click', function () { | |
| 215 $body.slideToggle('fast'); | |
| 216 $img.toggle(); | |
| 217 }); | |
| 218 if (!io) { | |
| 219 // hide body initially | |
| 220 $body.hide(); | |
| 221 $img.toggle(); | |
| 222 } | |
| 223 }).css('cursor', 'pointer'); | |
| 219 | 224 |
| 103 | 225 }); |
| 197 | 226 |
| 219 | 227 |
| 197 | 228 /* |
| 229 * flyout divs | |
| 198 | 230 * |
| 231 * currently only for div.flyout in col in row.triple. | |
| 232 * | |
| 233 * div.flyout contains img.flyout_open and img.flyout_close. | |
| 234 * | |
| 235 * div.flyout gets additional class .flying when open. | |
| 236 * | |
| 237 * div.folded will be shown when open. | |
| 238 * | |
| 197 | 239 */ |
| 240 $('.flyout').each(function () { | |
| 198 | 241 // flyout target size |
| 242 var tw = 300; | |
| 243 var th = 400; | |
| 197 | 244 var $flyout = $(this); |
| 198 | 245 var $buttons = $flyout.find('.flyout_open, .flyout_close'); |
| 197 | 246 // size up to parent in folded state |
| 198 | 247 var dh = $flyout.parent().height() - $flyout.outerHeight(); |
| 197 | 248 if (dh > 0) { |
| 249 $flyout.height($flyout.height()+dh); | |
| 250 } | |
| 198 | 251 // save original size |
| 252 var ow = $flyout.width(); | |
| 253 var oh = $flyout.height(); | |
| 254 // handle click on open button | |
| 197 | 255 $flyout.find('.flyout_open').on('click', function () { |
| 256 $flyout.addClass('flying'); | |
| 257 $flyout.css('position','absolute'); | |
| 198 | 258 $flyout.animate({'width': tw, 'height': th}, 'fast'); |
| 259 // change open to close button | |
| 260 $buttons.toggle(); | |
| 197 | 261 }).css('cursor', 'pointer'); |
| 198 | 262 // handle click on close button |
| 263 $flyout.find('.flyout_close').on('click', function () { | |
| 264 $flyout.animate({'width': ow, 'height': oh}, { | |
| 265 'duration': 'fast', | |
| 266 'complete': function () { | |
| 267 $flyout.removeClass('flying'); | |
| 268 $flyout.css('position','relative'); | |
| 269 // change close to open button | |
| 270 $buttons.toggle(); | |
| 271 } | |
| 272 }); | |
| 273 }).css('cursor', 'pointer'); | |
| 197 | 274 }); |
| 219 | 275 |
| 276 openSelected(); | |
| 88 | 277 }); |