xref: /plugin/mikioplugin/script.js (revision b007ca42f5dcac2e4da8e8ce8426ac9f91496844) 
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    jQuery('.mikiop-quiz').each(function () {
285        jQuery(this).find('.mikiop-quiz-button-prev').attr('disabled', true);
286        jQuery(this).find('.mikiop-quiz-result').hide();
287
288        var status = jQuery(this).attr('data-status');
289        status = status.replace('$1', '1');
290        status = status.replace('$2', jQuery(this).children('.mikiop-quiz-item').length);
291        jQuery(this).find('.mikiop-quiz-status-text').html(status);
292
293        if (jQuery(this).children('.mikiop-quiz-item').length == 1) {
294            jQuery(this).find('.mikiop-quiz-button-next').attr('disabled', true);
295        }
296
297        jQuery(this).children('.mikiop-quiz-item').not(':first-child').hide();
298
299    });
300
301    jQuery('.mikiop-quiz-button-prev').on('click', function (event) {
302        var parent = jQuery(this).closest('.mikiop-quiz');
303        var questions = parent.children('.mikiop-quiz-item');
304        parent.find('.mikiop-quiz-button-next').attr('disabled', false);
305
306        for (var i = 0; i < questions.length; i++) {
307            if (jQuery(questions[i]).is(':visible')) {
308                i--;
309
310                if (i <= 0) {
311                    jQuery(this).attr('disabled', true);
312                }
313
314                jQuery(questions[i + 1]).hide();
315                jQuery(questions[i]).show();
316                parent.find('.mikiop-quiz-status-number').html(i + 1);
317
318                var status = parent.attr('data-status');
319                status = status.replace('$1', i + 1);
320                status = status.replace('$2', parent.children('.mikiop-quiz-item').length);
321                parent.find('.mikiop-quiz-status-text').html(status);
322
323                break;
324            }
325        }
326    });
327
328    jQuery('.mikiop-quiz-button-next').on('click', function (event) {
329        var parent = jQuery(this).closest('.mikiop-quiz');
330        var questions = parent.children('.mikiop-quiz-item');
331        parent.find('.mikiop-quiz-button-prev').attr('disabled', false);
332
333        for (var i = 0; i < questions.length; i++) {
334            if (jQuery(questions[i]).is(':visible')) {
335                i++;
336
337                if (i >= questions.length - 1) {
338                    jQuery(this).attr('disabled', true);
339                }
340
341                jQuery(questions[i - 1]).hide();
342                jQuery(questions[i]).show();
343
344                var status = parent.attr('data-status');
345                status = status.replace('$1', i + 1);
346                status = status.replace('$2', parent.children('.mikiop-quiz-item').length);
347                parent.find('.mikiop-quiz-status-text').html(status);
348
349                break;
350            }
351        }
352    });
353
354    jQuery('.mikiop-quiz-button-submit').on('click', function (event) {
355        var parent = jQuery(this).closest('.mikiop-quiz');
356        var questions = parent.children('.mikiop-quiz-item');
357        var correct = 0;
358        var result = '<div class="mikiop-quiz-question">Result</div>';
359
360        parent.find('.mikiop-quiz-button-prev').attr('disabled', true);
361        parent.find('.mikiop-quiz-button-next').attr('disabled', true);
362        parent.find('.mikiop-quiz-button-submit').attr('disabled', true);
363        parent.find('.mikiop-quiz-status-text').html('');
364
365        for (var i = 0; i < questions.length; i++) {
366            var question = jQuery(questions[i]).attr('data-question');
367            var answer = jQuery(questions[i]).attr('data-answer');
368
369            result += '<p><strong>' + question + '</strong><br>';
370
371            var value = jQuery(questions[i]).find("input:radio:checked").val();
372            if (typeof value == 'undefined') {
373                result += 'Not answered';
374            } else {
375                result += value + ' - ';
376
377                if (answer.localeCompare(value) == 0) {
378                    correct++;
379                    result += 'Correct';
380                } else {
381                    result += 'Incorrect';
382                }
383            }
384
385            result += '</p>';
386
387            jQuery(questions[i]).hide();
388        }
389
390        var status = parent.attr('data-result');
391        status = status.replace('$1', correct);
392        status = status.replace('$2', questions.length);
393        result += '<p>' + status + '</p>';
394
395        parent.find('.mikiop-quiz-result').html(result).show();
396    });
397
398    // Pagenation
399    var pages = jQuery('.mikiop-pagenation').find('li');
400    if (pages.length > 0) {
401        var active = -1;
402        var found = -1;
403        var location = window.location.pathname + window.location.search;
404
405        if (window.location.search == '') {
406            location += '?id=start';
407        }
408
409        for (i = 1; i < pages.length - 1; i++) {
410            if (jQuery(pages[i]).hasClass('mikiop-active')) {
411                if (active != -1) {
412                    jQuery(pages[i]).removeClass('mikiop-active')
413                } else {
414                    active = i;
415                }
416            }
417
418            var link = jQuery(pages[i]).find('a').attr('href');
419            link = link.replace('id=:', 'id=');
420
421            if (location.localeCompare(link) == 0) {
422                found = i;
423            }
424        }
425
426        if (active == -1 && found != -1) {
427            active = found;
428            jQuery(pages[found]).addClass('mikiop-active');
429        }
430
431        if (active != -1) {
432            if (active == 1) {
433                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
434            } else {
435                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').find('a').attr('href', jQuery(pages[active - 1]).find('a').attr('href'));
436            }
437
438            if (active == pages.length - 2) {
439                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
440            } else {
441                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').find('a').attr('href', jQuery(pages[active + 1]).find('a').attr('href'));
442            }
443        } else {
444            jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
445            jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
446        }
447    } else {
448        jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
449        jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
450    }
451
452    // Reveal
453    jQuery('.mikiop-box').on('mouseenter', function () {
454        jQuery(this).children('.mikiop-reveal').fadeOut();
455    });
456
457    jQuery('.mikiop-box').on('mouseleave', function () {
458        jQuery(this).children('.mikiop-reveal').fadeIn();
459    });
460
461    // Tooltip
462    jQuery('.mikiop-tooltip').hover(function (event) {
463        jQuery('<div class="mikiop-tooltip-banner">' + jQuery(this).attr('data-tooltip') + '</div>').appendTo('body');
464    }, function () {
465        jQuery('.mikiop-tooltip-banner').remove();
466    });
467
468    jQuery('.mikiop-tooltip').on('mousemove', function (event) {
469        var moveLeft = 20;
470        var moveDown = 10;
471        jQuery('.mikiop-tooltip-banner').css('top', event.pageY + moveDown).css('left', event.pageX + moveLeft);
472    });
473
474
475
476    jQuery('.mikiop-collapse').hide();
477});
478
479
480// jQuery(function(){
481//     jQuery('[data-toggle="tooltip"]').tooltip();
482// });
483