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
  61
  62         (function() {
  63             var $current = null;
  64             var menu_loaded = false;
  65             $('.hidden-box-wrapper').each(function() {
  66                 var $hidden = $('.hidden-box', this);
  67                 $('.hidden-box-trigger', this).click(function(event) {
  68                     event.preventDefault();
  69                     if ($current == $hidden) {
  70                         $current = null;
  71                         $hidden.hide('fast');
  72                     } else {
  73                         $current && $current.hide('fast');
  74                         $hidden.show('fast');
  75                         $current = $hidden;
  76                         if ($(this).hasClass('load-menu') && !menu_loaded) {
  77                             $.ajax({
  78                                 url: '/katalog/' + LANGUAGE_CODE + '.json',
  79                                 dataType: "json"
  80                             }).done(function(data) {
  81                                 $.each(data, function(index, value) {
  82                                     var $menuitem = $('#menu-' + index);
  83                                     $menuitem.html(value);
  84                                     var $minisearch = $("<input class='mini-search' style='margin-bottom: 1em' />");
  85                                     $minisearch.keyup(function() {
  86                                         var s = $(this).val().toLowerCase();
  87                                         if (s) {
  88                                             $("li", $menuitem).each(function() {
  89                                                 if ($("a", this).text().toLowerCase().indexOf(s) != -1)
  90                                                     $(this).show();
  91                                                 else
  92                                                     $(this).hide();
  93                                             });
  94                                         }
  95                                         else {
  96                                             $("li", $menuitem).css("display", "");
  97                                         }
  98                                     });
  99                                     $menuitem.prepend($minisearch);
 100                                 });
 101                                 menu_loaded = true;
 102                             });
 103                         }
 104                     }
 105                 });
 106             });
 107             /* this kinda breaks the whole page. */
 108             $('body').click(function(e) {
 109                 if ($current == null) return;
 110                 var p = $(e.target);
 111                 while (p.length) {
 112                     if (p == $current)
 113                         return;
 114                     if (p.hasClass('hidden-box-trigger')
 115                         || p.hasClass('simple-toggler')
 116                         || p.hasClass('mini-search'))
 117                         return;
 118                     p = p.parent();
 119                 }
 120                 $current.hide('fast');
 121                 $current = null;
 122             });
 123         })();
 124
 125
 126         $('#show-menu').click(function(event) {
 127             event.preventDefault();
 128             //$('#menu').toggle('fast');
 129             $('body').toggleClass('menu-on');
 130         });
 131
 132
 133         $('#book-list-nav').find('h2').click(function(event) {
 134             event.preventDefault();
 135             $('#book-list-nav-index').toggle();
 136         });
 137
 138
 139         $('#themes-list-toggle').click(function(event) {
 140             event.preventDefault();
 141             $('#themes-list').toggle('fast');
 142         });
 143
 144
 145         $('.book-list-index').click(function(){
 146             $('.book-list-show-index').hide('fast');
 147             var books_ul = $(this).parent().next().children().first();
 148             if(books_ul.first().is(':hidden')){
 149                 books_ul.toggle('fast');
 150             }
 151             return false;
 152         });
 153
 154         $('.hoverclick').click(function() {$(this).closest('.hoverget').toggleClass('hover');});
 155
 156         $(function(){
 157             $("#search").search();
 158         });
 159
 160         $('body').on('click', '.simple-toggler' , function(ev) {
 161             ev.preventDefault();
 162             var scope = $(this).closest('.simple-toggler-scope');
 163             scope.find('.simple-hidden-box').each(function() {
 164                 var $this = $(this);
 165                 if ($this.is(':hidden')) {
 166                     $this.show();
 167                 } else {
 168                     $this.hide();
 169                 }
 170             });
 171         });
 172
 173
 174         $('.tabbed-filter').each(function() {
 175             var tf = this;
 176             $('.tab').click(function() {
 177                 if ($(this).hasClass('active')) {
 178                     $(this).removeClass('active');
 179                     $('#' + $(this).attr('data-id')).hide();
 180                 }
 181                 else {
 182                     var $active = $('.active', tf);
 183                     $active.removeClass('active');
 184                     $('#' + $active.attr('data-id')).hide();
 185                     $(this).addClass('active');
 186                     $('#' + $(this).attr('data-id')).show();
 187                 }
 188             });
 189         });
 190
 191
 192         $('.plain-list-paged').each(function() {
 193             // should change on resize?
 194             var $plc = $(this);
 195             var $pl = $('.plain-list', this);
 196
 197             var $items = $('p', $pl);
 198
 199             if ($items.length > 40) {
 200                 $items.hide();
 201                 var prev = [0, 0];
 202
 203                 $('.pager', $plc).paging($items.length, {
 204                     format: '[< ncnnn >]', // define how the navigation should look like and in which order onFormat() get's called
 205                     perpage: 40,
 206                     lapping: 0, // don't overlap pages for the moment
 207                     page: 1, // start at page, can also be "null" or negative
 208                     onSelect: function (page) {
 209                         var data = this.slice;
 210                         $items.slice(prev[0], prev[1]).hide();
 211                         $items.slice(data[0], data[1]).show();
 212                         prev = data;
 213                     },
 214                     onFormat: function (type) {
 215                         switch (type) {
 216                             case 'block': // n and c
 217                                 return ' <li><a href="#"' + (this.value == this.page ? ' class="current"' : '') + '>' +
 218                                     this.value + '</a></li>';
 219                             case 'next': // >
 220                                 return '<li><a href="#">&rsaquo;</a></li>';
 221                             case 'prev': // <
 222                                 return '<li><a href="#">&lsaquo;</a></li>';
 223                             case 'first': // [
 224                                 return '<li><a href="#">&laquo;</a></li>';
 225                             case 'last': // ]
 226                                 return '<li><a href="#">&raquo;</a></li>';
 227                         }
 228                     }
 229                 });
 230             }
 231         });
 232
 233         /* global tlite */
 234         tlite(function (el) {
 235             return $(el).hasClass('tlite-tooltip');
 236         });
 237
 238         /* more/less switch from https://codepen.io/JoshBlackwood/pen/pEwHe */
 239         // Hide the extra content initially, using JS so that if JS is disabled, no problemo:
 240         $('.read-more-content').addClass('hide');
 241         $('.read-more-show, .read-more-hide').removeClass('hide');
 242
 243         // Set up the toggle effect:
 244         $('.read-more-show').on('click', function(e) {
 245           $(this).next('.read-more-content').removeClass('hide');
 246           $(this).addClass('hide');
 247           e.preventDefault();
 248         });
 249
 250         // Changes contributed by @diego-rzg
 251         $('.read-more-hide').on('click', function(e) {
 252           var p = $(this).parent('.read-more-content');
 253           p.addClass('hide');
 254           p.prev('.read-more-show').removeClass('hide'); // Hide only the preceding "Read More"
 255           e.preventDefault();
 256         });
 257     });
 258 })(jQuery);
 259