xref: /plugin/mikioplugin/script.js (revision 32ba3092c9f943b82c5625489719c603ed8dcb65) 
1
2
3jQuery().ready(function () {
4    jQuery('.mikiop-button').on('click', function (event) {
5        if (jQuery(this).hasClass('mikiop-disabled')) {
6            event.preventDefault();
7        }
8
9        if (jQuery(this).attr('data-toggle') == 'collapse') {
10            event.preventDefault();
11            jQuery(jQuery(this).attr('data-target')).slideToggle();
12        }
13    });
14
15    jQuery('.mikiop-accordian-title').on('click', function (event) {
16        event.preventDefault();
17        let accordianBody = jQuery(this).siblings('.mikiop-accordian-body');
18        if (!accordianBody.is(':visible')) {
19            let accordian = jQuery(this).closest('.mikiop-accordian');
20            if (accordian.hasClass('mikiop-autoclose')) {
21                accordian.find('.mikiop-accordian-body:visible').slideUp();
22            }
23        }
24
25        jQuery(this).siblings('.mikiop-accordian-body').slideToggle();
26    });
27
28    jQuery('.mikiop-alert-close').on('click', function (event) {
29        event.preventDefault();
30        jQuery(this).closest('.mikiop-alert').hide();
31    });
32
33    jQuery('.mikiop-carousel').each(function () {
34        var items = jQuery(this).find('.mikiop-carousel-item');
35        var indicators = '';
36        var active = false;
37
38        for (var i = 0; i < items.length; i++) {
39            if (jQuery(items[i]).hasClass('mikiop-active')) {
40                active = true;
41                indicators += '<li class="mikiop mikiop-carousel-indicator mikiop-active"></li>';
42            } else {
43                indicators += '<li class="mikiop mikiop-carousel-indicator"></li>';
44            }
45        };
46
47        jQuery(this).find('.mikiop-carousel-indicators').html(indicators);
48
49        if (!active) {
50            jQuery(this).find('.mikiop-carousel-item').first().addClass('mikiop-active');
51            jQuery(this).find('.mikiop-carousel-indicator').first().addClass('mikiop-active');
52        }
53
54        if (jQuery(this).attr('data-auto-start') == 'true') {
55            var carousel = jQuery(this);
56            timeout = carousel.find('.mikiop-carousel-item.mikiop-active').attr('data-interval');
57
58            if (timeout == 0) {
59                timeout = 3;
60            }
61
62            var nextSlide = function () {
63                var timeout = carouselNext(carousel);
64
65                if (timeout == 0) {
66                    timeout = 3;
67                }
68
69                window.setTimeout(nextSlide, (timeout * 1000) + 500);
70            };
71
72            window.setTimeout(nextSlide, (timeout * 1000) + 500);
73        }
74    });
75
76    jQuery('.mikiop-carousel-control-prev').on('click', function (event) {
77        event.preventDefault();
78
79        var parent = jQuery(this).parent();
80        carouselPrev(parent);
81    });
82
83    function carouselPrev(parent) {
84
85        var slides = parent.find('.mikiop-carousel-item');
86
87        for (var i = 0; i < slides.length; i++) {
88            if (jQuery(slides[i]).hasClass('mikiop-active')) {
89                var target = null;
90                var next = 0;
91
92                if (i == 0) {
93                    next = slides.length - 1;
94                } else {
95                    next = i - 1;
96                }
97                target = jQuery(slides[next]);
98
99                if (jQuery(parent).hasClass('mikiop-transition-fade')) {
100                    target.css('z-index', 0).addClass('mikiop-active');
101                    jQuery(slides[i]).fadeOut(function () {
102                        jQuery(this).removeClass('mikiop-active').css('display', '');
103                        target.css('z-index', '');
104                    });
105                } else if (jQuery(parent).hasClass('mikiop-transition-slide')) {
106                    target.css('left', '-100%').addClass('mikiop-active');
107                    target.animate({ left: '0' }, 500);
108                    jQuery(slides[i]).animate({ left: '100%' }, 500, function () {
109                        jQuery(this).removeClass('mikiop-active').css('left', '');
110                        target.css('left', '');
111                    })
112                } else {
113                    target.addClass('mikiop-active');
114                    jQuery(slides[i]).removeClass('mikiop-active');
115                }
116
117                parent.find('.mikiop-carousel-indicator').removeClass('mikiop-active');
118                parent.find('.mikiop-carousel-indicator:nth-child(' + (next + 1) + ')').addClass('mikiop-active');
119
120                break;
121            }
122        }
123    };
124
125    jQuery('.mikiop-carousel-control-next').on('click', function (event) {
126        event.preventDefault();
127        var parent = jQuery(this).parent();
128
129        carouselNext(parent);
130    });
131
132    function carouselNext(parent) {
133        var slides = parent.find('.mikiop-carousel-item');
134        var delay = 0;
135
136        for (var i = 0; i < slides.length; i++) {
137
138
139            if (jQuery(slides[i]).hasClass('mikiop-active')) {
140                var target = null;
141                var next = 0;
142
143
144                if (i == slides.length - 1) {
145                    next = 0;
146                } else {
147                    next = i + 1;
148                }
149                target = jQuery(slides[next]);
150
151                delay = target.attr('data-interval');
152                if (typeof delay == 'undefined') {
153                    delay = 0;
154                }
155
156                if (jQuery(parent).hasClass('mikiop-transition-fade')) {
157                    target.css('z-index', 0).addClass('mikiop-active');
158                    jQuery(slides[i]).fadeOut(function () {
159                        jQuery(this).removeClass('mikiop-active').css('display', '');
160                        target.css('z-index', '');
161                    });
162                } else if (jQuery(parent).hasClass('mikiop-transition-slide')) {
163                    target.css('left', '100%').addClass('mikiop-active');
164                    target.animate({ left: '0' }, 500);
165                    jQuery(slides[i]).animate({ left: '-100%' }, 500, function () {
166                        jQuery(this).removeClass('mikiop-active').css('left', '');
167                        target.css('left', '');
168                    })
169                } else {
170                    target.addClass('mikiop-active');
171                    jQuery(slides[i]).removeClass('mikiop-active');
172                }
173
174                parent.find('.mikiop-carousel-indicator').removeClass('mikiop-active');
175                parent.find('.mikiop-carousel-indicator:nth-child(' + (next + 1) + ')').addClass('mikiop-active');
176
177                break;
178            }
179        }
180
181        return (delay);
182    };
183
184    jQuery('.mikiop-carousel-indicator').on('click', function (event) {
185        event.preventDefault();
186
187        var parent = jQuery(this).closest('.mikiop-carousel-indicators');
188        if (parent) {
189            var group = jQuery(this).closest('.mikiop-carousel');
190            if (group) {
191                var items = jQuery(group).find('.mikiop-carousel-indicator');
192
193                var item = -1;
194                var active = 0;
195                for (var i = 0; i < items.length; i++) {
196                    if (jQuery(items[i]).hasClass('mikiop-active')) {
197                        active = i;
198                    }
199
200                    if (items[i] == jQuery(this)[0]) {
201                        item = i;
202                    }
203                }
204
205                if (item != active) {
206                    if (jQuery(group).hasClass('mikiop-transition-fade')) {
207                        var target = jQuery(group).find('.mikiop-carousel-item:nth-child(' + (item + 1) + ')');
208
209                        target.css('z-index', 0).addClass('mikiop-active');
210                        jQuery(group).find('.mikiop-carousel-item:nth-child(' + (active + 1) + ')').fadeOut(function () {
211                            jQuery(this).removeClass('mikiop-active').css('display', '');
212                            target.css('z-index', '');
213                        });
214
215                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (item + 1) + ')').addClass('mikiop-active');
216                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (active + 1) + ')').removeClass('mikiop-active');
217                    } else if (jQuery(group).hasClass('mikiop-transition-slide')) {
218                        var target = jQuery(group).find('.mikiop-carousel-item:nth-child(' + (item + 1) + ')');
219
220                        if (item < active) {
221                            target.css('left', '-100%').addClass('mikiop-active');
222                            target.animate({ left: '0' }, 500);
223                            jQuery(group).find('.mikiop-carousel-item:nth-child(' + (active + 1) + ')').animate({ left: '100%' }, 500, function () {
224                                jQuery(this).removeClass('mikiop-active').css('left', '');
225                                target.css('left', '');
226                            });
227                        } else {
228                            target.css('left', '100%').addClass('mikiop-active');
229                            target.animate({ left: '0' }, 500);
230                            jQuery(group).find('.mikiop-carousel-item:nth-child(' + (active + 1) + ')').animate({ left: '-100%' }, 500, function () {
231                                jQuery(this).removeClass('mikiop-active').css('left', '');
232                                target.css('left', '');
233                            });
234                        }
235
236                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (item + 1) + ')').addClass('mikiop-active');
237                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (active + 1) + ')').removeClass('mikiop-active');
238                    } else {
239                        jQuery(group).find('.mikiop-carousel-item:nth-child(' + (item + 1) + ')').addClass('mikiop-active');
240                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (item + 1) + ')').addClass('mikiop-active');
241                        jQuery(group).find('.mikiop-carousel-item:nth-child(' + (active + 1) + ')').removeClass('mikiop-active');
242                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (active + 1) + ')').removeClass('mikiop-active');
243                    }
244                }
245            }
246        }
247    });
248
249    jQuery('.mikiop-tab-item a').on('click', function (event) {
250        event.preventDefault();
251
252        var parent = jQuery(this).closest('.mikiop-tab-item');
253        if (parent) {
254            var group = jQuery(parent).closest('.mikiop-tab-group');
255            if (group) {
256                var items = jQuery(group).find('.mikiop-tab-item');
257
258                var item = -1;
259                for (var i = 0; i < items.length; i++) {
260                    if (items[i] == parent[0]) {
261                        item = i;
262                        break;
263                    }
264                }
265
266                if (item != -1) {
267                    var panes = jQuery(group).siblings('.mikiop-tab-content').find('.mikiop-tab-pane');
268
269                    if (panes.length > item) {
270                        if (!jQuery(panes[item]).hasClass('mikiop-show')) {
271                            jQuery(panes).removeClass('mikiop-show');
272                            jQuery(panes[item]).addClass('mikiop-show');
273
274                            jQuery(items).find('a').removeClass('mikiop-active');
275                            jQuery(items[item]).find('a').addClass('mikiop-active');
276                        }
277                    }
278                }
279            }
280        }
281    });
282
283    // Quiz
284    var quizReset = function(quizRef) {
285        quizRef.find('.mikiop-quiz-button-prev').attr('disabled', true);
286        quizRef.find('.mikiop-quiz-result').hide();
287        quizRef.find('.mikiop-quiz-button-submit').show().attr('disabled', false);
288        quizRef.find('.mikiop-quiz-button-reset').hide();
289
290        var status = quizRef.attr('data-status');
291        status = status.replace('$1', '1');
292        status = status.replace('$2', quizRef.children('.mikiop-quiz-item').length);
293        quizRef.find('.mikiop-quiz-status-text').html(status);
294
295        if (quizRef.children('.mikiop-quiz-item').length == 1) {
296            quizRef.find('.mikiop-quiz-button-next').attr('disabled', true);
297        } else {
298            quizRef.find('.mikiop-quiz-button-next').attr('disabled', false);
299        }
300
301        quizRef.children('.mikiop-quiz-item').find('input[type="radio"], input[type="checkbox"]').prop('checked', false);
302
303        var full = quizRef.attr('data-full');
304        if(!full) {
305            quizRef.children('.mikiop-quiz-item').not(':first-child').hide();
306            quizRef.children('.mikiop-quiz-item:first-child').show();
307        } else {
308            quizRef.children('.mikiop-quiz-item').show();
309        }
310    };
311
312    jQuery('.mikiop-quiz').each(function () {
313        quizReset(jQuery(this));
314    });
315
316    jQuery('.mikiop-quiz-button-prev').on('click', function (event) {
317        var parent = jQuery(this).closest('.mikiop-quiz');
318        var questions = parent.children('.mikiop-quiz-item');
319        parent.find('.mikiop-quiz-button-next').attr('disabled', false);
320
321        for (var i = 0; i < questions.length; i++) {
322            if (jQuery(questions[i]).is(':visible')) {
323                i--;
324
325                if (i <= 0) {
326                    jQuery(this).attr('disabled', true);
327                }
328
329                jQuery(questions[i + 1]).hide();
330                jQuery(questions[i]).show();
331                parent.find('.mikiop-quiz-status-number').html(i + 1);
332
333                var status = parent.attr('data-status');
334                status = status.replace('$1', i + 1);
335                status = status.replace('$2', parent.children('.mikiop-quiz-item').length);
336                parent.find('.mikiop-quiz-status-text').html(status);
337
338                break;
339            }
340        }
341    });
342
343    jQuery('.mikiop-quiz-button-next').on('click', function (event) {
344        var parent = jQuery(this).closest('.mikiop-quiz');
345        var questions = parent.children('.mikiop-quiz-item');
346        parent.find('.mikiop-quiz-button-prev').attr('disabled', false);
347
348        for (var i = 0; i < questions.length; i++) {
349            if (jQuery(questions[i]).is(':visible')) {
350                i++;
351
352                if (i >= questions.length - 1) {
353                    jQuery(this).attr('disabled', true);
354                }
355
356                jQuery(questions[i - 1]).hide();
357                jQuery(questions[i]).show();
358
359                var status = parent.attr('data-status');
360                status = status.replace('$1', i + 1);
361                status = status.replace('$2', parent.children('.mikiop-quiz-item').length);
362                parent.find('.mikiop-quiz-status-text').html(status);
363
364                break;
365            }
366        }
367    });
368
369    jQuery('.mikiop-quiz-button-submit').on('click', function (event) {
370        var parent = jQuery(this).closest('.mikiop-quiz');
371        var questions = parent.children('.mikiop-quiz-item');
372        var correct = 0;
373        var totalScore = 0;
374        var result = '<div class="mikiop-quiz-question">Result</div>';
375
376        var usingScoring = false;
377        var usingCorrect = false;
378        var questionCount = 0;
379
380        parent.find('.mikiop-quiz-button-prev').attr('disabled', true);
381        parent.find('.mikiop-quiz-button-next').attr('disabled', true);
382        parent.find('.mikiop-quiz-button-submit').attr('disabled', true);
383        parent.find('.mikiop-quiz-status-text').html('');
384
385        var resetButton = parent.find('.mikiop-quiz-button-reset');
386        if(resetButton.length > 0) {
387            parent.find('.mikiop-quiz-button-submit').hide();
388            resetButton.show();
389        }
390
391
392        for (var i = 0; i < questions.length; i++) {
393            var showNewLine = true;
394            var question = stripHtml(jQuery(questions[i]).attr('data-question'));
395            var regex = /^((\w+ ?)*[):])/;
396
397            if (regex.test(question)) {
398                question = question.match(regex)[1];
399                showNewLine = false;
400            }
401
402            result += '<p class="mikiop-quiz-result-question"><strong>' + question + '</strong>' + (showNewLine ? '<br>' : ' ');
403
404            var checked = jQuery(questions[i]).find("input:checked");
405            var answer = jQuery(questions[i]).attr('data-answer');
406            var value = checked.val();
407
408            if(answer != undefined) {
409                usingCorrect = true;
410                questionCount++;
411            }
412
413            if (typeof value == 'undefined') {
414                result += 'Not answered';
415            } else {
416                var totalItemScore = 0;
417                var selectedItems = [];
418                var itemIsScored = false;
419
420                checked.each(function() {
421                    var item = jQuery(this);
422
423                    var score = item.attr('data-score');
424
425                    if(score != undefined && score.length > 0) {
426                        usingScoring = true;
427                        itemIsScored = true;
428                        totalItemScore += parseInt(score, 10);
429                    } else if(answer != undefined) {
430                        usingCorrect = true;
431                        selectedItems.push(item.val());
432                    }
433                });
434
435                if(itemIsScored) {
436                    var scorePlaceholder = parent.attr('data-result-score');
437                    result += scorePlaceholder.replace('$1', totalItemScore);
438                    totalScore += totalItemScore;
439                } else {
440                    var correctText = parent.attr('data-correct');
441                    var incorrectText = parent.attr('data-incorrect');
442
443                    result += selectedItems.join(", ") + ' - ';
444
445                    if(answer == undefined) {
446                        result += "No answer set for question";
447                    } else if(answer.indexOf('|') !== -1) {
448                        var answerArray = answer.split('|');
449                        if(answerArray.length == selectedItems.length) {
450                            var totalMatch = true;
451                            answerArray.forEach(function(answerItem) {
452                                var matching = selectedItems.some(function(selectedItem) {
453                                    return answerItem.localeCompare(selectedItem) === 0;
454                                });
455
456                                if(!matching) {
457                                    totalMatch = false;
458                                }
459                            });
460
461                            if(totalMatch) {
462                                correct++;
463                                result += correctText;
464                            } else {
465                                result += incorrectText;
466                            }
467                        } else {
468                            result += incorrectText;
469                        }
470                    } else {
471                        if (selectedItems.length > 0 && answer.localeCompare(selectedItems[0]) == 0) {
472                            correct++;
473                            result += correctText;
474                        } else {
475                            result += incorrectText;
476                        }
477                    }
478                }
479            }
480
481            result += '</p>';
482
483            jQuery(questions[i]).hide();
484        }
485
486        var status = [];
487
488        if(usingScoring) {
489            status.push(parent.attr('data-result-score-total').replace('$1', totalScore));
490        }
491
492        if(usingCorrect) {
493            status.push(parent.attr('data-result-correct').replace('$1', correct).replace('$2', questionCount));
494        }
495
496        result += '<p class="mikiop-quiz-result-total">' + status.join('<br>') + '</p>';
497
498        parent.find('.mikiop-quiz-result').html(result).show();
499    });
500
501    jQuery('.mikiop-quiz-button-reset').on('click', function (event) {
502        quizReset(jQuery(this).closest('.mikiop-quiz'));
503    });
504
505    // Pagenation
506    var pages = jQuery('.mikiop-pagenation').find('li');
507    if (pages.length > 0) {
508        var active = -1;
509        var found = -1;
510        var location = window.location.pathname + window.location.search;
511
512        if (window.location.search == '') {
513            location += '?id=start';
514        }
515
516        for (i = 1; i < pages.length - 1; i++) {
517            if (jQuery(pages[i]).hasClass('mikiop-active')) {
518                if (active != -1) {
519                    jQuery(pages[i]).removeClass('mikiop-active')
520                } else {
521                    active = i;
522                }
523            }
524
525            var link = jQuery(pages[i]).find('a').attr('href');
526            link = link.replace('id=:', 'id=');
527
528            if (location.localeCompare(link) == 0) {
529                found = i;
530            }
531        }
532
533        if (active == -1 && found != -1) {
534            active = found;
535            jQuery(pages[found]).addClass('mikiop-active');
536        }
537
538        if (active != -1) {
539            if (active == 1) {
540                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
541            } else {
542                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').find('a').attr('href', jQuery(pages[active - 1]).find('a').attr('href'));
543            }
544
545            if (active == pages.length - 2) {
546                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
547            } else {
548                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').find('a').attr('href', jQuery(pages[active + 1]).find('a').attr('href'));
549            }
550        } else {
551            jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
552            jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
553        }
554    } else {
555        jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
556        jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
557    }
558
559    // Reveal
560    jQuery('.mikiop-box').on('mouseenter', function () {
561        jQuery(this).children('.mikiop-reveal').fadeOut();
562    });
563
564    jQuery('.mikiop-box').on('mouseleave', function () {
565        jQuery(this).children('.mikiop-reveal').fadeIn();
566    });
567
568    // Tooltip
569    jQuery('.mikiop-tooltip').hover(function (event) {
570        jQuery('<div class="mikiop-tooltip-banner">' + jQuery(this).attr('data-tooltip') + '</div>').appendTo('body');
571    }, function () {
572        jQuery('.mikiop-tooltip-banner').remove();
573    });
574
575    jQuery('.mikiop-tooltip').on('mousemove', function (event) {
576        var moveLeft = 20;
577        var moveDown = 10;
578        jQuery('.mikiop-tooltip-banner').css('top', event.pageY + moveDown).css('left', event.pageX + moveLeft);
579    });
580
581    // Nav
582    jQuery('.mikiop-nav').on('click', function (event) {
583        jQuery(this).toggleClass('mikiop-nav-open');
584    });
585    jQuery(document).on('click', function (event) {
586        if (!jQuery(event.target).closest('.mikiop-nav').length) {
587            // Hide the dropdown if clicked outside
588            jQuery('.mikiop-nav').removeClass('mikiop-nav-open');
589        }
590    });
591
592    var stripHtml = function(htmlString) {
593        var tempDiv = document.createElement("div");
594        tempDiv.innerHTML = htmlString;
595        return tempDiv.textContent || tempDiv.innerText || "";
596    };
597
598    jQuery('.mikiop-collapse').hide();
599});
600