bdb5fbee7cdb618f0372cc1a9de6cc6e1b66cef6
[wolnelektury.git] / src / wolnelektury / static / js / base.js
1 (function($) {
2     $(function() {
3         $.fn.toggle_slide = function(p) {
4             var cont = $(this);
5             var short_el = p['short_el'] || $(':first-child', this);
6             var long_el = p['long_el'] || short_el.next();
7             var button = p['button'];
8             var short_text = p['short_text'];
9             var long_text = p['long_text'];
10
11             var toggle_fun = function(cont, short_el, long_el, button, short_text, long_text) {
12                 return function () {
13                     if (cont.hasClass('short')) {
14                         cont.animate({"height": long_el.attr("cont_h") + 'px'}, {duration: "fast"})
15                             .removeClass('short');
16                         short_el.hide();
17                         long_el.show();
18                         if (button && long_text) button.html(long_text);
19                     } else {
20                         cont.animate({"height": short_el.attr("cont_h") + 'px'}, {duration: "fast"}).addClass('short');
21                         long_el.hide();
22                         short_el.show();
23                         if (button && short_text) button.html(short_text);
24                     }
25                     return false;
26                 };
27             };
28             if (long_el.html().length <= short_el.html().length)
29                 return;
30
31             // ensure long element shown first
32             long_el.show();short_el.hide();
33             long_el.attr("cont_h", $(this).height()).hide();
34             short_el.show().attr("cont_h", $(this).height());
35             $(this).addClass('short');
36
37             if (button && short_text)
38                 button.html(short_text);
39             if (button)
40                 button.click(toggle_fun(cont, short_el, long_el, button, short_text, long_text));
41         };
42
43
44         // Fragments
45         $('.fragment-with-short').each(function() {
46             $(this).toggle_slide({
47                 short_el: $('.fragment-short-text', this),
48                 long_el: $('.fragment-long-text', this),
49                 button: $('.toggle', this)
50             })
51         });
52         $('#description').each(function() {
53             $(this).toggle_slide({
54                 short_el: $('#description-short', this),
55                 long_el: $('#description-long', this),
56                 button: $(this)
57             })
58         });
59
60         $('.more').each(function () {
61             $(this).shorten({
62                 showChars: 150,
63                 moreText: "wiÄ™cej",
64                 lessText: "mniej"
65             });
66         });
67
68
69
70         (function() {
71             var $current = null;
72             var menu_loaded = false;
73             $('.hidden-box-wrapper').each(function() {
74                 var $hidden = $('.hidden-box', this);
75                 $('.hidden-box-trigger', this).click(function(event) {
76                     event.preventDefault();
77                     if ($current == $hidden) {
78                         $current = null;
79                         $hidden.hide('fast');
80                     } else {
81                         $current && $current.hide('fast');
82                         $hidden.show('fast');
83                         $current = $hidden;
84                         if ($(this).hasClass('load-menu') && !menu_loaded) {
85                             $.ajax({
86                                 url: '/katalog/' + LANGUAGE_CODE + '.json',
87                                 dataType: "json"
88                             }).done(function(data) {
89                                 $.each(data, function(index, value) {
90                                     var $menuitem = $('#menu-' + index);
91                                     $menuitem.html(value);
92                                     var $minisearch = $("<input class='mini-search' style='margin-bottom: 1em' />");
93                                     $minisearch.keyup(function() {
94                                         var s = $(this).val().toLowerCase();
95                                         if (s) {
96                                             $("li", $menuitem).each(function() {
97                                                 if ($("a", this).text().toLowerCase().indexOf(s) != -1)
98                                                     $(this).show();
99                                                 else
100                                                     $(this).hide();
101                                             });
102                                         }
103                                         else {
104                                             $("li", $menuitem).css("display", "");
105                                         }
106                                     });
107                                     $menuitem.prepend($minisearch);
108                                 });
109                                 menu_loaded = true;
110                             });
111                         }
112                     }
113                 });
114             });
115             /* this kinda breaks the whole page. */
116             $('body').click(function(e) {
117                 if ($current == null) return;
118                 var p = $(e.target);
119                 while (p.length) {
120                     if (p == $current)
121                         return;
122                     if (p.hasClass('hidden-box-trigger')
123                         || p.hasClass('simple-toggler')
124                         || p.hasClass('mini-search'))
125                         return;
126                     p = p.parent();
127                 }
128                 $current.hide('fast');
129                 $current = null;
130             });
131         })();
132
133
134         $('#show-menu').click(function(event) {
135             event.preventDefault();
136             //$('#menu').toggle('fast');
137             $('body').toggleClass('menu-on');
138         });
139
140
141         $('#book-list-nav').find('h2').click(function(event) {
142             event.preventDefault();
143             $('#book-list-nav-index').toggle();
144         });
145
146
147         $('#themes-list-toggle').click(function(event) {
148             event.preventDefault();
149             $('#themes-list').toggle('fast');
150         });
151
152
153         $('.book-list-index').click(function(){
154             $('.book-list-show-index').hide('fast');
155             var books_ul = $(this).parent().next().children().first();
156             if(books_ul.first().is(':hidden')){
157                 books_ul.toggle('fast');
158             }
159             return false;
160         });
161
162         $('.hoverclick').click(function() {$(this).closest('.hoverget').toggleClass('hover');});
163
164         $(function(){
165             $("#search").search();
166         });
167
168         $('body').on('click', '.simple-toggler' , function(ev) {
169             ev.preventDefault();
170             var scope = $(this).closest('.simple-toggler-scope');
171             scope.find('.simple-hidden-box').each(function() {
172                 var $this = $(this);
173                 if ($this.is(':hidden')) {
174                     $this.show();
175                 } else {
176                     $this.hide();
177                 }
178             });
179         });
180
181
182         $('.tabbed-filter').each(function() {
183             var tf = this;
184             $('.tab').click(function() {
185                 if ($(this).hasClass('active')) {
186                     $(this).removeClass('active');
187                     $('#' + $(this).attr('data-id')).hide();
188                 }
189                 else {
190                     var $active = $('.active', tf);
191                     $active.removeClass('active');
192                     $('#' + $active.attr('data-id')).hide();
193                     $(this).addClass('active');
194                     $('#' + $(this).attr('data-id')).show();
195                 }
196             });
197         });
198
199
200         $('.plain-list-paged').each(function() {
201             // should change on resize?
202             var $plc = $(this);
203             var $pl = $('.plain-list', this);
204
205             var $items = $('p', $pl);
206
207             if ($items.length > 40) {
208                 $items.hide();
209                 var prev = [0, 0];
210
211                 $('.pager', $plc).paging($items.length, {
212                     format: '[< ncnnn >]', // define how the navigation should look like and in which order onFormat() get's called
213                     perpage: 40,
214                     lapping: 0, // don't overlap pages for the moment
215                     page: 1, // start at page, can also be "null" or negative
216                     onSelect: function (page) {
217                         var data = this.slice;
218                         $items.slice(prev[0], prev[1]).hide();
219                         $items.slice(data[0], data[1]).show();
220                         prev = data;
221                     },
222                     onFormat: function (type) {
223                         switch (type) {
224                             case 'block': // n and c
225                                 return ' <li><a href="#"' + (this.value == this.page ? ' class="current"' : '') + '>' +
226                                     this.value + '</a></li>';
227                             case 'next': // >
228                                 return '<li><a href="#">&rsaquo;</a></li>';
229                             case 'prev': // <
230                                 return '<li><a href="#">&lsaquo;</a></li>';
231                             case 'first': // [
232                                 return '<li><a href="#">&laquo;</a></li>';
233                             case 'last': // ]
234                                 return '<li><a href="#">&raquo;</a></li>';
235                         }
236                     }
237                 });
238             }
239         });
240
241         /* global tlite */
242         tlite(function (el) {
243             return $(el).hasClass('tlite-tooltip');
244         });
245
246         /* more/less switch from https://codepen.io/JoshBlackwood/pen/pEwHe */
247         // Hide the extra content initially, using JS so that if JS is disabled, no problemo:
248         $('.read-more-content').addClass('hide');
249         $('.read-more-show, .read-more-hide').removeClass('hide');
250
251         // Set up the toggle effect:
252         $('.read-more-show').on('click', function(e) {
253           $(this).next('.read-more-content').removeClass('hide');
254           $(this).addClass('hide');
255           e.preventDefault();
256         });
257
258         // Changes contributed by @diego-rzg
259         $('.read-more-hide').on('click', function(e) {
260           var p = $(this).parent('.read-more-content');
261           p.addClass('hide');
262           p.prev('.read-more-show').removeClass('hide'); // Hide only the preceding "Read More"
263           e.preventDefault();
264         });
265     });
266 })(jQuery);
267