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-expand').each(function () {
  61             $(this).shorten({
  62                 showChars: 150,
  63                 moreText: "więcej",
  64                 lessText: "mniej"
  65             });
  66         });
  67
  68
  69         $('.carousel').on('cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
  70             $("iframe", outgoingSlideEl).attr("src", '');
  71             $("iframe", incomingSlideEl).attr("src", $("iframe", incomingSlideEl).attr('data-src'));
  72         });
  73         $('.carousel section').first().each(function() {
  74             $("iframe", this).attr("src", $("iframe", this).attr('data-src'));
  75         });
  76
  77         $(".carousel").each(function() {
  78             opts = {};
  79             if ($('html').hasClass('media-eink')) {
  80                 opts.fx = 'none'
  81             }
  82             $(this).cycle(opts);
  83         });
  84
  85
  86         (function() {
  87             var $current = null;
  88             var menu_loaded = false;
  89             $('.hidden-box-wrapper').each(function() {
  90                 var $hidden = $('.hidden-box', this);
  91                 $('.hidden-box-trigger', this).click(function(event) {
  92                     event.preventDefault();
  93                     if ($current == $hidden) {
  94                         $current = null;
  95                         $hidden.hide('fast');
  96                     } else {
  97                         $current && $current.hide('fast');
  98                         $hidden.show('fast');
  99                         $current = $hidden;
 100                         if ($(this).hasClass('load-menu') && !menu_loaded) {
 101                             $.ajax({
 102                                 url: '/katalog/' + LANGUAGE_CODE + '.json',
 103                                 dataType: "json"
 104                             }).done(function(data) {
 105                                 $.each(data, function(index, value) {
 106                                     var $menuitem = $('#menu-' + index);
 107                                     $menuitem.html(value);
 108                                     var $minisearch = $("<input class='mini-search' style='margin-bottom: 1em' />");
 109                                     $minisearch.keyup(function() {
 110                                         var s = $(this).val().toLowerCase();
 111                                         if (s) {
 112                                             $("li", $menuitem).each(function() {
 113                                                 if ($("a", this).text().toLowerCase().indexOf(s) != -1)
 114                                                     $(this).show();
 115                                                 else
 116                                                     $(this).hide();
 117                                             });
 118                                         }
 119                                         else {
 120                                             $("li", $menuitem).css("display", "");
 121                                         }
 122                                     });
 123                                     $menuitem.prepend($minisearch);
 124                                 });
 125                                 menu_loaded = true;
 126                             });
 127                         }
 128                     }
 129                 });
 130             });
 131             /* this kinda breaks the whole page. */
 132             $('body').click(function(e) {
 133                 if ($current == null) return;
 134                 var p = $(e.target);
 135                 while (p.length) {
 136                     if (p == $current)
 137                         return;
 138                     if (p.hasClass('hidden-box-trigger')
 139                         || p.hasClass('simple-toggler')
 140                         || p.hasClass('mini-search'))
 141                         return;
 142                     p = p.parent();
 143                 }
 144                 $current.hide('fast');
 145                 $current = null;
 146             });
 147         })();
 148
 149
 150         $('#show-menu').click(function(event) {
 151             event.preventDefault();
 152             //$('#menu').toggle('fast');
 153             $('body').toggleClass('menu-on');
 154         });
 155
 156
 157         $('#book-list-nav').find('h2').click(function(event) {
 158             event.preventDefault();
 159             $('#book-list-nav-index').toggle();
 160         });
 161
 162
 163         $('#themes-list-toggle').click(function(event) {
 164             event.preventDefault();
 165             $('#themes-list').toggle('fast');
 166         });
 167
 168
 169         $('.book-list-index').click(function(){
 170             $('.book-list-show-index').hide('fast');
 171             var books_ul = $(this).parent().next().children().first();
 172             if(books_ul.first().is(':hidden')){
 173                 books_ul.toggle('fast');
 174             }
 175             return false;
 176         });
 177
 178         $('.hoverclick').click(function() {$(this).closest('.hoverget').toggleClass('hover');});
 179         $('.hoverclick').keydown(function(event){
 180             var keyCode = (event.keyCode ? event.keyCode : event.which);
 181             if (keyCode == 13) {
 182                 $(this).trigger('click');
 183             }
 184         });
 185
 186         $(function(){
 187             $("#search").search();
 188         });
 189
 190         $('body').on('click', '.simple-toggler' , function(ev) {
 191             ev.preventDefault();
 192             var scope = $(this).closest('.simple-toggler-scope');
 193             scope.find('.simple-hidden-box').each(function() {
 194                 var $this = $(this);
 195                 if ($this.is(':hidden')) {
 196                     $this.show();
 197                 } else {
 198                     $this.hide();
 199                 }
 200             });
 201         });
 202
 203
 204         $('.tabbed-filter').each(function() {
 205             var tf = this;
 206             $('.tab').click(function() {
 207                 if ($(this).hasClass('active')) {
 208                     $(this).removeClass('active');
 209                     $('#' + $(this).attr('data-id')).hide();
 210                 }
 211                 else {
 212                     var $active = $('.active', tf);
 213                     $active.removeClass('active');
 214                     $('#' + $active.attr('data-id')).hide();
 215                     $(this).addClass('active');
 216                     $('#' + $(this).attr('data-id')).show();
 217                 }
 218             });
 219         });
 220
 221
 222         $('.plain-list-paged').each(function() {
 223             // should change on resize?
 224             var $plc = $(this);
 225             var $pl = $('.plain-list', this);
 226
 227             var $items = $('p', $pl);
 228
 229             if ($items.length > 40) {
 230                 $items.hide();
 231                 var prev = [0, 0];
 232
 233                 $('.pager', $plc).paging($items.length, {
 234                     format: '[< ncnnn >]', // define how the navigation should look like and in which order onFormat() get's called
 235                     perpage: 40,
 236                     lapping: 0, // don't overlap pages for the moment
 237                     page: 1, // start at page, can also be "null" or negative
 238                     onSelect: function (page) {
 239                         var data = this.slice;
 240                         $items.slice(prev[0], prev[1]).hide();
 241                         $items.slice(data[0], data[1]).show();
 242                         prev = data;
 243                     },
 244                     onFormat: function (type) {
 245                         switch (type) {
 246                             case 'block': // n and c
 247                                 return ' <li><a href="#"' + (this.value == this.page ? ' class="current"' : '') + '>' +
 248                                     this.value + '</a></li>';
 249                             case 'next': // >
 250                                 return '<li><a href="#">&rsaquo;</a></li>';
 251                             case 'prev': // <
 252                                 return '<li><a href="#">&lsaquo;</a></li>';
 253                             case 'first': // [
 254                                 return '<li><a href="#">&laquo;</a></li>';
 255                             case 'last': // ]
 256                                 return '<li><a href="#">&raquo;</a></li>';
 257                         }
 258                     }
 259                 });
 260             }
 261         });
 262
 263         /* global tlite */
 264         tlite(function (el) {
 265             return $(el).hasClass('tlite-tooltip');
 266         });
 267
 268         /* more/less switch from https://codepen.io/JoshBlackwood/pen/pEwHe */
 269         // Hide the extra content initially, using JS so that if JS is disabled, no problemo:
 270         $('.read-more-content').addClass('hide');
 271         $('.read-more-show, .read-more-hide').removeClass('hide');
 272
 273         // Set up the toggle effect:
 274         $('.read-more-show').on('click', function(e) {
 275           $(this).next('.read-more-content').removeClass('hide');
 276           $(this).addClass('hide');
 277           e.preventDefault();
 278         });
 279
 280         // Changes contributed by @diego-rzg
 281         $('.read-more-hide').on('click', function(e) {
 282           var p = $(this).parent('.read-more-content');
 283           p.addClass('hide');
 284           p.prev('.read-more-show').removeClass('hide'); // Hide only the preceding "Read More"
 285           e.preventDefault();
 286         });
 287
 288
 289         function update_info() {
 290             var amount = parseInt($("#id_amount").val());
 291             var monthly =  $("#id_monthly").val() == 'True';
 292             if (monthly) slug = "monthly";
 293             else if (amount >= parseInt($("#plan-single").attr('data-min-for-year'))) slug = 'single-year';
 294             else slug = 'single';
 295
 296             var chunk = $('.club-form-info .chunk-' + slug);
 297             if (chunk.css('display') == 'none') {
 298                 $('.chunk-alt').css('height', $('.chunk-alt').height());
 299                 $('.chunk-alt .chunk').css('position', 'absolute');
 300
 301                 $('.club-form-info .chunk').fadeOut();
 302                 $('.club-form-info .chunk.chunk-' + slug).fadeIn(function() {
 303                     $('.chunk-alt .chunk').css('position', 'static');
 304                     $('.chunk-alt').css('height', 'auto');
 305                 });
 306                 $('.chunk-alt').animate({height: chunk.height()}, 100);
 307             }
 308         }
 309
 310         $("#id_amount").val($("#plan-monthly").attr('data-amount'));
 311
 312         $(".button.kwota").click(function() {
 313             var plan = $(this).closest('.plan');
 314             $('.kwota', plan).removeClass('active')
 315             $('.inna', plan).removeClass('active')
 316             $(this).addClass('active');
 317
 318             var amount = $(this).text();
 319             plan.attr("data-amount", amount);
 320             $("#id_amount").val(amount);
 321
 322             update_info();
 323             return false;
 324         });
 325
 326         $(".plan-toggle").click(function() {
 327             $(".plan-toggle").removeClass('active');
 328             $(this).addClass('active')
 329             $(".plan").hide();
 330             var plan = $("#" + $(this).attr('data-plan'));
 331             plan.show();
 332             $("#id_amount").val(plan.attr('data-amount'));
 333             $("#id_monthly").val(plan.attr('data-monthly'));
 334
 335             update_info();
 336             return false;
 337         });
 338
 339         $(".inna .button").click(function() {
 340             var plan = $(this).closest('.plan');
 341             $('.kwota', plan).removeClass('active');
 342             $(this).parent().addClass('active');
 343             $('input', plan).focus();
 344
 345             var amount = $('input', $(this).parent()).val();
 346             plan.attr("data-amount", amount);
 347             $("#id_amount").val(amount);
 348
 349             update_info();
 350             return false;
 351         });
 352
 353         $(".inna input").on('input', function() {
 354             var plan = $(this).closest('.plan');
 355             $('.kwota', plan).removeClass('active');
 356             var amount = $(this).val();
 357             plan.attr("data-amount", amount);
 358             $("#id_amount").val(amount);
 359
 360             update_info();
 361             return false;
 362         });
 363
 364         $("#id_method").val('payu-re');
 365         $(".methods .button").click(function() {
 366             $("#id_method").val($(this).attr('data-method'));
 367             $(".methods .button").removeClass('active');
 368             $(this).addClass("active");
 369         });
 370
 371
 372         $("#skiplink-search").click(function() {
 373             console.log('skiplink search');
 374             $("#search").focus();
 375             return false;
 376         });
 377
 378         // experiments
 379         $(".experiment input").on('change', function() {
 380             let name = $(this).attr('name');
 381             let val = $(this).val();
 382             document.cookie = 'EXPERIMENT_' + name + '=' + val + '; path=/; max-age=31536000';
 383             window.location.reload(true);
 384         });
 385     });
 386 })(jQuery);
 387