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