xref: /plugin/mikioplugin/script.js (revision 4d21e14836aefa3e73fe3ba22067c4af4c1fd79a) 
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        quizRef.children('.mikiop-quiz-item').not(':first-child').hide();
303        quizRef.children('.mikiop-quiz-item:first-child').show();
304    };
305
306    jQuery('.mikiop-quiz').each(function () {
307        quizReset(jQuery(this));
308    });
309
310    jQuery('.mikiop-quiz-button-prev').on('click', function (event) {
311        var parent = jQuery(this).closest('.mikiop-quiz');
312        var questions = parent.children('.mikiop-quiz-item');
313        parent.find('.mikiop-quiz-button-next').attr('disabled', false);
314
315        for (var i = 0; i < questions.length; i++) {
316            if (jQuery(questions[i]).is(':visible')) {
317                i--;
318
319                if (i <= 0) {
320                    jQuery(this).attr('disabled', true);
321                }
322
323                jQuery(questions[i + 1]).hide();
324                jQuery(questions[i]).show();
325                parent.find('.mikiop-quiz-status-number').html(i + 1);
326
327                var status = parent.attr('data-status');
328                status = status.replace('$1', i + 1);
329                status = status.replace('$2', parent.children('.mikiop-quiz-item').length);
330                parent.find('.mikiop-quiz-status-text').html(status);
331
332                break;
333            }
334        }
335    });
336
337    jQuery('.mikiop-quiz-button-next').on('click', function (event) {
338        var parent = jQuery(this).closest('.mikiop-quiz');
339        var questions = parent.children('.mikiop-quiz-item');
340        parent.find('.mikiop-quiz-button-prev').attr('disabled', false);
341
342        for (var i = 0; i < questions.length; i++) {
343            if (jQuery(questions[i]).is(':visible')) {
344                i++;
345
346                if (i >= questions.length - 1) {
347                    jQuery(this).attr('disabled', true);
348                }
349
350                jQuery(questions[i - 1]).hide();
351                jQuery(questions[i]).show();
352
353                var status = parent.attr('data-status');
354                status = status.replace('$1', i + 1);
355                status = status.replace('$2', parent.children('.mikiop-quiz-item').length);
356                parent.find('.mikiop-quiz-status-text').html(status);
357
358                break;
359            }
360        }
361    });
362
363    jQuery('.mikiop-quiz-button-submit').on('click', function (event) {
364        var parent = jQuery(this).closest('.mikiop-quiz');
365        var questions = parent.children('.mikiop-quiz-item');
366        var correct = 0;
367        var totalScore = 0;
368        var result = '<div class="mikiop-quiz-question">Result</div>';
369
370        var usingScoring = false;
371        var usingCorrect = false;
372        var questionCount = 0;
373
374        parent.find('.mikiop-quiz-button-prev').attr('disabled', true);
375        parent.find('.mikiop-quiz-button-next').attr('disabled', true);
376        parent.find('.mikiop-quiz-button-submit').attr('disabled', true);
377        parent.find('.mikiop-quiz-status-text').html('');
378
379        var resetButton = parent.find('.mikiop-quiz-button-reset');
380        if(resetButton.length > 0) {
381            parent.find('.mikiop-quiz-button-submit').hide();
382            resetButton.show();
383        }
384
385
386        for (var i = 0; i < questions.length; i++) {
387            var showNewLine = true;
388            var question = jQuery(questions[i]).attr('data-question');
389            var regex = /^((\w+ ?)*[):])/;
390
391            if (regex.test(question)) {
392                question = question.match(regex)[1];
393                showNewLine = false;
394            }
395
396            result += '<p><strong>' + question + '</strong>' + (showNewLine ? '<br>' : ' ');
397
398            var checked = jQuery(questions[i]).find("input:checked");
399            var answer = jQuery(questions[i]).attr('data-answer');
400            var value = checked.val();
401
402            if(answer != undefined) {
403                usingCorrect = true;
404                questionCount++;
405            }
406
407            if (typeof value == 'undefined') {
408                result += 'Not answered';
409            } else {
410                var totalItemScore = 0;
411                var selectedItems = [];
412                var itemIsScored = false;
413
414                checked.each(function() {
415                    var item = jQuery(this);
416
417                    var score = item.attr('data-score');
418
419                    if(score != undefined && score.length > 0) {
420                        usingScoring = true;
421                        itemIsScored = true;
422                        totalItemScore += parseInt(score, 10);
423                    } else if(answer != undefined) {
424                        usingCorrect = true;
425                        selectedItems.push(item.val());
426                    }
427                });
428
429                if(itemIsScored) {
430                    var scorePlaceholder = parent.attr('data-result-score');
431                    result += scorePlaceholder.replace('$1', totalItemScore);
432                    totalScore += totalItemScore;
433                } else {
434                    var correctText = parent.attr('data-correct');
435                    var incorrectText = parent.attr('data-incorrect');
436
437                    result += selectedItems.join(", ") + ' - ';
438
439                    if(answer.indexOf('|') !== -1) {
440                        var answerArray = answer.split('|');
441                        console.log(answerArray);
442                        console.log(selectedItems);
443                        if(answerArray.length == selectedItems.length) {
444                            var totalMatch = true;
445                            answerArray.forEach(function(answerItem) {
446                                var matching = selectedItems.some(function(selectedItem) {
447                                    return answerItem.localeCompare(selectedItem) === 0;
448                                });
449
450                                if(!matching) {
451                                    totalMatch = false;
452                                }
453                            });
454
455                            if(totalMatch) {
456                                correct++;
457                                result += correctText;
458                            } else {
459                                result += incorrectText;
460                            }
461                        } else {
462                            result += incorrectText;
463                        }
464                    } else {
465                        if (selectedItems.length > 0 && answer.localeCompare(selectedItems[0]) == 0) {
466                            correct++;
467                            result += correctText;
468                        } else {
469                            result += incorrectText;
470                        }
471                    }
472                }
473            }
474
475            result += '</p>';
476
477            jQuery(questions[i]).hide();
478        }
479
480        var status = [];
481
482        if(usingScoring) {
483            status.push(parent.attr('data-result-score-total').replace('$1', totalScore));
484        }
485
486        if(usingCorrect) {
487            status.push(parent.attr('data-result-correct').replace('$1', correct).replace('$2', questionCount));
488        }
489
490        result += '<p>' + status.join('<br>') + '</p>';
491
492        parent.find('.mikiop-quiz-result').html(result).show();
493    });
494
495    jQuery('.mikiop-quiz-button-reset').on('click', function (event) {
496        quizReset(jQuery(this).closest('.mikiop-quiz'));
497    });
498
499    // Pagenation
500    var pages = jQuery('.mikiop-pagenation').find('li');
501    if (pages.length > 0) {
502        var active = -1;
503        var found = -1;
504        var location = window.location.pathname + window.location.search;
505
506        if (window.location.search == '') {
507            location += '?id=start';
508        }
509
510        for (i = 1; i < pages.length - 1; i++) {
511            if (jQuery(pages[i]).hasClass('mikiop-active')) {
512                if (active != -1) {
513                    jQuery(pages[i]).removeClass('mikiop-active')
514                } else {
515                    active = i;
516                }
517            }
518
519            var link = jQuery(pages[i]).find('a').attr('href');
520            link = link.replace('id=:', 'id=');
521
522            if (location.localeCompare(link) == 0) {
523                found = i;
524            }
525        }
526
527        if (active == -1 && found != -1) {
528            active = found;
529            jQuery(pages[found]).addClass('mikiop-active');
530        }
531
532        if (active != -1) {
533            if (active == 1) {
534                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
535            } else {
536                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').find('a').attr('href', jQuery(pages[active - 1]).find('a').attr('href'));
537            }
538
539            if (active == pages.length - 2) {
540                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
541            } else {
542                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').find('a').attr('href', jQuery(pages[active + 1]).find('a').attr('href'));
543            }
544        } else {
545            jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
546            jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
547        }
548    } else {
549        jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
550        jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
551    }
552
553    // Reveal
554    jQuery('.mikiop-box').on('mouseenter', function () {
555        jQuery(this).children('.mikiop-reveal').fadeOut();
556    });
557
558    jQuery('.mikiop-box').on('mouseleave', function () {
559        jQuery(this).children('.mikiop-reveal').fadeIn();
560    });
561
562    // Tooltip
563    jQuery('.mikiop-tooltip').hover(function (event) {
564        jQuery('<div class="mikiop-tooltip-banner">' + jQuery(this).attr('data-tooltip') + '</div>').appendTo('body');
565    }, function () {
566        jQuery('.mikiop-tooltip-banner').remove();
567    });
568
569    jQuery('.mikiop-tooltip').on('mousemove', function (event) {
570        var moveLeft = 20;
571        var moveDown = 10;
572        jQuery('.mikiop-tooltip-banner').css('top', event.pageY + moveDown).css('left', event.pageX + moveLeft);
573    });
574
575    // Nav
576    jQuery('.mikiop-nav').on('click', function (event) {
577        jQuery(this).toggleClass('mikiop-nav-open');
578    });
579    jQuery(document).on('click', function (event) {
580        if (!jQuery(event.target).closest('.mikiop-nav').length) {
581            // Hide the dropdown if clicked outside
582            jQuery('.mikiop-nav').removeClass('mikiop-nav-open');
583        }
584    });
585
586    jQuery('.mikiop-collapse').hide();
587});
588
589
590// jQuery(function(){
591//     jQuery('[data-toggle="tooltip"]').tooltip();
592// });
593