xref: /plugin/mikioplugin/script.js (revision ca3a0da5c7257688fe21f36c817d5ecd5b408145) 
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
18        jQuery(this).siblings('.mikiop-accordian-body').slideToggle();
19    });
20
21    jQuery('.mikiop-alert-close').on('click', function (event) {
22        event.preventDefault();
23        jQuery(this).closest('.mikiop-alert').hide();
24    });
25
26    jQuery('.mikiop-carousel').each(function () {
27        var items = jQuery(this).find('.mikiop-carousel-item');
28        var indicators = '';
29        var active = false;
30
31        for (var i = 0; i < items.length; i++) {
32            if (jQuery(items[i]).hasClass('mikiop-active')) {
33                active = true;
34                indicators += '<li class="mikiop mikiop-carousel-indicator mikiop-active"></li>';
35            } else {
36                indicators += '<li class="mikiop mikiop-carousel-indicator"></li>';
37            }
38        };
39
40        jQuery(this).find('.mikiop-carousel-indicators').html(indicators);
41
42        if (!active) {
43            jQuery(this).find('.mikiop-carousel-item').first().addClass('mikiop-active');
44            jQuery(this).find('.mikiop-carousel-indicator').first().addClass('mikiop-active');
45        }
46
47        if (jQuery(this).attr('data-auto-start') == 'true') {
48            var carousel = jQuery(this);
49            timeout = carousel.find('.mikiop-carousel-item.mikiop-active').attr('data-interval');
50
51            if (timeout == 0) {
52                timeout = 3;
53            }
54
55            var nextSlide = function () {
56                var timeout = carouselNext(carousel);
57
58                if (timeout == 0) {
59                    timeout = 3;
60                }
61
62                window.setTimeout(nextSlide, (timeout * 1000) + 500);
63            };
64
65            window.setTimeout(nextSlide, (timeout * 1000) + 500);
66        }
67    });
68
69    jQuery('.mikiop-carousel-control-prev').on('click', function (event) {
70        event.preventDefault();
71
72        var parent = jQuery(this).parent();
73        carouselPrev(parent);
74    });
75
76    function carouselPrev(parent) {
77
78        var slides = parent.find('.mikiop-carousel-item');
79
80        for (var i = 0; i < slides.length; i++) {
81            if (jQuery(slides[i]).hasClass('mikiop-active')) {
82                var target = null;
83                var next = 0;
84
85                if (i == 0) {
86                    next = slides.length - 1;
87                } else {
88                    next = i - 1;
89                }
90                target = jQuery(slides[next]);
91
92                if (jQuery(parent).hasClass('mikiop-transition-fade')) {
93                    target.css('z-index', 0).addClass('mikiop-active');
94                    jQuery(slides[i]).fadeOut(function () {
95                        jQuery(this).removeClass('mikiop-active').css('display', '');
96                        target.css('z-index', '');
97                    });
98                } else if (jQuery(parent).hasClass('mikiop-transition-slide')) {
99                    target.css('left', '-100%').addClass('mikiop-active');
100                    target.animate({ left: '0' }, 500);
101                    jQuery(slides[i]).animate({ left: '100%' }, 500, function () {
102                        jQuery(this).removeClass('mikiop-active').css('left', '');
103                        target.css('left', '');
104                    })
105                } else {
106                    target.addClass('mikiop-active');
107                    jQuery(slides[i]).removeClass('mikiop-active');
108                }
109
110                parent.find('.mikiop-carousel-indicator').removeClass('mikiop-active');
111                parent.find('.mikiop-carousel-indicator:nth-child(' + (next + 1) + ')').addClass('mikiop-active');
112
113                break;
114            }
115        }
116    };
117
118    jQuery('.mikiop-carousel-control-next').on('click', function (event) {
119        event.preventDefault();
120        var parent = jQuery(this).parent();
121
122        carouselNext(parent);
123    });
124
125    function carouselNext(parent) {
126        var slides = parent.find('.mikiop-carousel-item');
127        var delay = 0;
128
129        for (var i = 0; i < slides.length; i++) {
130
131
132            if (jQuery(slides[i]).hasClass('mikiop-active')) {
133                var target = null;
134                var next = 0;
135
136
137                if (i == slides.length - 1) {
138                    next = 0;
139                } else {
140                    next = i + 1;
141                }
142                target = jQuery(slides[next]);
143
144                delay = target.attr('data-interval');
145                if (typeof delay == 'undefined') {
146                    delay = 0;
147                }
148
149                if (jQuery(parent).hasClass('mikiop-transition-fade')) {
150                    target.css('z-index', 0).addClass('mikiop-active');
151                    jQuery(slides[i]).fadeOut(function () {
152                        jQuery(this).removeClass('mikiop-active').css('display', '');
153                        target.css('z-index', '');
154                    });
155                } else if (jQuery(parent).hasClass('mikiop-transition-slide')) {
156                    target.css('left', '100%').addClass('mikiop-active');
157                    target.animate({ left: '0' }, 500);
158                    jQuery(slides[i]).animate({ left: '-100%' }, 500, function () {
159                        jQuery(this).removeClass('mikiop-active').css('left', '');
160                        target.css('left', '');
161                    })
162                } else {
163                    target.addClass('mikiop-active');
164                    jQuery(slides[i]).removeClass('mikiop-active');
165                }
166
167                parent.find('.mikiop-carousel-indicator').removeClass('mikiop-active');
168                parent.find('.mikiop-carousel-indicator:nth-child(' + (next + 1) + ')').addClass('mikiop-active');
169
170                break;
171            }
172        }
173
174        return(delay);
175    };
176
177    jQuery('.mikiop-carousel-indicator').on('click', function (event) {
178        event.preventDefault();
179
180        var parent = jQuery(this).closest('.mikiop-carousel-indicators');
181        if (parent) {
182            var group = jQuery(this).closest('.mikiop-carousel');
183            if (group) {
184                var items = jQuery(group).find('.mikiop-carousel-indicator');
185
186                var item = -1;
187                var active = 0;
188                for (var i = 0; i < items.length; i++) {
189                    if (jQuery(items[i]).hasClass('mikiop-active')) {
190                        active = i;
191                    }
192
193                    if (items[i] == jQuery(this)[0]) {
194                        item = i;
195                    }
196                }
197
198                if (item != active) {
199                    if (jQuery(group).hasClass('mikiop-transition-fade')) {
200                        var target = jQuery(group).find('.mikiop-carousel-item:nth-child(' + (item + 1) + ')');
201
202                        target.css('z-index', 0).addClass('mikiop-active');
203                        jQuery(group).find('.mikiop-carousel-item:nth-child(' + (active + 1) + ')').fadeOut(function () {
204                            jQuery(this).removeClass('mikiop-active').css('display', '');
205                            target.css('z-index', '');
206                        });
207
208                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (item + 1) + ')').addClass('mikiop-active');
209                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (active + 1) + ')').removeClass('mikiop-active');
210                    } else if (jQuery(group).hasClass('mikiop-transition-slide')) {
211                        var target = jQuery(group).find('.mikiop-carousel-item:nth-child(' + (item + 1) + ')');
212
213                        if (item < active) {
214                            target.css('left', '-100%').addClass('mikiop-active');
215                            target.animate({ left: '0' }, 500);
216                            jQuery(group).find('.mikiop-carousel-item:nth-child(' + (active + 1) + ')').animate({ left: '100%' }, 500, function () {
217                                jQuery(this).removeClass('mikiop-active').css('left', '');
218                                target.css('left', '');
219                            });
220                        } else {
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                        }
228
229                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (item + 1) + ')').addClass('mikiop-active');
230                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (active + 1) + ')').removeClass('mikiop-active');
231                    } else {
232                        jQuery(group).find('.mikiop-carousel-item:nth-child(' + (item + 1) + ')').addClass('mikiop-active');
233                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (item + 1) + ')').addClass('mikiop-active');
234                        jQuery(group).find('.mikiop-carousel-item:nth-child(' + (active + 1) + ')').removeClass('mikiop-active');
235                        jQuery(group).find('.mikiop-carousel-indicator:nth-child(' + (active + 1) + ')').removeClass('mikiop-active');
236                    }
237                }
238            }
239        }
240    });
241
242    jQuery('.mikiop-tab-item a').on('click', function (event) {
243        event.preventDefault();
244
245        var parent = jQuery(this).closest('.mikiop-tab-item');
246        if (parent) {
247            var group = jQuery(parent).closest('.mikiop-tab-group');
248            if (group) {
249                var items = jQuery(group).find('.mikiop-tab-item');
250
251                var item = -1;
252                for (var i = 0; i < items.length; i++) {
253                    if (items[i] == parent[0]) {
254                        item = i;
255                        break;
256                    }
257                }
258
259                if (item != -1) {
260                    var panes = jQuery(group).siblings('.mikiop-tab-content').find('.mikiop-tab-pane');
261
262                    if (panes.length > item) {
263                        if (!jQuery(panes[item]).hasClass('mikiop-show')) {
264                            jQuery(panes).removeClass('mikiop-show');
265                            jQuery(panes[item]).addClass('mikiop-show');
266
267                            jQuery(items).find('a').removeClass('mikiop-active');
268                            jQuery(items[item]).find('a').addClass('mikiop-active');
269                        }
270                    }
271                }
272            }
273        }
274    });
275
276    // Quiz
277    jQuery('.mikiop-quiz').each(function () {
278        jQuery(this).find('.mikiop-quiz-button-prev').attr('disabled', true);
279        jQuery(this).find('.mikiop-quiz-result').hide();
280
281        var status = jQuery(this).attr('data-status');
282        status = status.replace('$1', '1');
283        status = status.replace('$2', jQuery(this).children('.mikiop-quiz-item').length);
284        jQuery(this).find('.mikiop-quiz-status-text').html(status);
285
286        if (jQuery(this).children('.mikiop-quiz-item').length == 1) {
287            jQuery(this).find('.mikiop-quiz-button-next').attr('disabled', true);
288        }
289
290        jQuery(this).children('.mikiop-quiz-item').not(':first-child').hide();
291
292    });
293
294    jQuery('.mikiop-quiz-button-prev').on('click', function (event) {
295        var parent = jQuery(this).closest('.mikiop-quiz');
296        var questions = parent.children('.mikiop-quiz-item');
297        parent.find('.mikiop-quiz-button-next').attr('disabled', false);
298
299        for (var i = 0; i < questions.length; i++) {
300            if (jQuery(questions[i]).is(':visible')) {
301                i--;
302
303                if (i <= 0) {
304                    jQuery(this).attr('disabled', true);
305                }
306
307                jQuery(questions[i + 1]).hide();
308                jQuery(questions[i]).show();
309                parent.find('.mikiop-quiz-status-number').html(i + 1);
310
311                var status = parent.attr('data-status');
312                status = status.replace('$1', i + 1);
313                status = status.replace('$2', parent.children('.mikiop-quiz-item').length);
314                parent.find('.mikiop-quiz-status-text').html(status);
315
316                break;
317            }
318        }
319    });
320
321    jQuery('.mikiop-quiz-button-next').on('click', function (event) {
322        var parent = jQuery(this).closest('.mikiop-quiz');
323        var questions = parent.children('.mikiop-quiz-item');
324        parent.find('.mikiop-quiz-button-prev').attr('disabled', false);
325
326        for (var i = 0; i < questions.length; i++) {
327            if (jQuery(questions[i]).is(':visible')) {
328                i++;
329
330                if (i >= questions.length - 1) {
331                    jQuery(this).attr('disabled', true);
332                }
333
334                jQuery(questions[i - 1]).hide();
335                jQuery(questions[i]).show();
336
337                var status = parent.attr('data-status');
338                status = status.replace('$1', i + 1);
339                status = status.replace('$2', parent.children('.mikiop-quiz-item').length);
340                parent.find('.mikiop-quiz-status-text').html(status);
341
342                break;
343            }
344        }
345    });
346
347    jQuery('.mikiop-quiz-button-submit').on('click', function (event) {
348        var parent = jQuery(this).closest('.mikiop-quiz');
349        var questions = parent.children('.mikiop-quiz-item');
350        var correct = 0;
351        var result = '<div class="mikiop-quiz-question">Result</div>';
352
353        parent.find('.mikiop-quiz-button-prev').attr('disabled', true);
354        parent.find('.mikiop-quiz-button-next').attr('disabled', true);
355        parent.find('.mikiop-quiz-button-submit').attr('disabled', true);
356        parent.find('.mikiop-quiz-status-text').html('');
357
358        for (var i = 0; i < questions.length; i++) {
359            var question = jQuery(questions[i]).attr('data-question');
360            var answer = jQuery(questions[i]).attr('data-answer');
361
362            result += '<p><strong>' + question + '</strong><br>';
363
364            var value = jQuery(questions[i]).find("input:radio:checked").val();
365            if (typeof value == 'undefined') {
366                result += 'Not answered';
367            } else {
368                result += value + ' - ';
369
370                if (answer.localeCompare(value) == 0) {
371                    correct++;
372                    result += 'Correct';
373                } else {
374                    result += 'Incorrect';
375                }
376            }
377
378            result += '</p>';
379
380            jQuery(questions[i]).hide();
381        }
382
383        var status = parent.attr('data-result');
384        status = status.replace('$1', correct);
385        status = status.replace('$2', questions.length);
386        result += '<p>' + status + '</p>';
387
388        parent.find('.mikiop-quiz-result').html(result).show();
389    });
390
391    // Pagenation
392    var pages = jQuery('.mikiop-pagenation').find('li');
393    if (pages.length > 0) {
394        var active = -1;
395        var found = -1;
396        var location = window.location.pathname + window.location.search;
397
398        if (window.location.search == '') {
399            location += '?id=start';
400        }
401
402        for (i = 1; i < pages.length - 1; i++) {
403            if (jQuery(pages[i]).hasClass('mikiop-active')) {
404                if (active != -1) {
405                    jQuery(pages[i]).removeClass('mikiop-active')
406                } else {
407                    active = i;
408                }
409            }
410
411            var link = jQuery(pages[i]).find('a').attr('href');
412            link = link.replace('id=:', 'id=');
413
414            if (location.localeCompare(link) == 0) {
415                found = i;
416            }
417        }
418
419        if (active == -1 && found != -1) {
420            active = found;
421            jQuery(pages[found]).addClass('mikiop-active');
422        }
423
424        if (active != -1) {
425            if (active == 1) {
426                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
427            } else {
428                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').find('a').attr('href', jQuery(pages[active - 1]).find('a').attr('href'));
429            }
430
431            if (active == pages.length - 2) {
432                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
433            } else {
434                jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').find('a').attr('href', jQuery(pages[active + 1]).find('a').attr('href'));
435            }
436        } else {
437            jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
438            jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
439        }
440    } else {
441        jQuery('.mikiop-pagenation').find('.mikiop-pagenation-prev').addClass('mikiop-disabled');
442        jQuery('.mikiop-pagenation').find('.mikiop-pagenation-next').addClass('mikiop-disabled');
443    }
444
445    // Reveal
446    jQuery('.mikiop-box').on('mouseenter', function () {
447        jQuery(this).children('.mikiop-reveal').fadeOut();
448    });
449
450    jQuery('.mikiop-box').on('mouseleave', function () {
451        jQuery(this).children('.mikiop-reveal').fadeIn();
452    });
453
454    // Tooltip
455    jQuery('.mikiop-tooltip').hover(function (event) {
456        jQuery('<div class="mikiop-tooltip-banner">' + jQuery(this).attr('data-tooltip') + '</div>').appendTo('body');
457        }, function () {
458            jQuery('.mikiop-tooltip-banner').remove();
459    });
460
461    jQuery('.mikiop-tooltip').on('mousemove', function (event) {
462        var moveLeft = 20;
463        var moveDown = 10;
464        jQuery('.mikiop-tooltip-banner').css('top', event.pageY + moveDown).css('left', event.pageX + moveLeft);
465    });
466
467
468
469    jQuery('.mikiop-collapse').hide();
470});
471
472
473// jQuery(function(){
474//     jQuery('[data-toggle="tooltip"]').tooltip();
475// });
476