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