|
1
|
|
|
define([ |
|
2
|
|
|
'jquery', |
|
3
|
|
|
'jquery/ui' |
|
4
|
|
|
], function ($) { |
|
5
|
|
|
'use strict'; |
|
6
|
|
|
|
|
7
|
|
|
$.widget('mageprince.faq', { |
|
8
|
|
|
options: { |
|
9
|
|
|
faqCollectionSelector: '.mageprince-faq-collection', |
|
10
|
|
|
faqLoaderSelector: '.mageprince-faq-loader', |
|
11
|
|
|
groupLinkSelector: '.group-link', |
|
12
|
|
|
pageTypeScroll: 'scroll', |
|
13
|
|
|
uiAccordionContentSelector: '.ui-accordion-content', |
|
14
|
|
|
uiAccordionHeaderSelector: '.ui-accordion-header', |
|
15
|
|
|
faqAccordionSelector: '.faq-accordion', |
|
16
|
|
|
collapseFaqsSelector: '#collapse-faqs', |
|
17
|
|
|
expandFaqsSelector: '#expand-faqs' |
|
18
|
|
|
}, |
|
19
|
|
|
|
|
20
|
|
|
_create: function() { |
|
21
|
|
|
this._bind(); |
|
22
|
|
|
}, |
|
23
|
|
|
|
|
24
|
|
|
_bind: function() { |
|
25
|
|
|
var self = this; |
|
26
|
|
|
self._setAccordian(); |
|
27
|
|
|
|
|
28
|
|
|
$(this.options.faqCollectionSelector).show(); |
|
29
|
|
|
$(this.options.faqLoaderSelector).hide(); |
|
30
|
|
|
|
|
31
|
|
|
$(this.options.groupLinkSelector).on('click', function(event) { |
|
32
|
|
|
event.preventDefault(); |
|
33
|
|
|
if (self.options.page_type == self.options.pageTypeScroll) { |
|
34
|
|
|
self._scrollToGroup(this); |
|
35
|
|
|
} else { |
|
36
|
|
|
var groupId = $(this).attr('groupid'); |
|
37
|
|
|
var groupUrl = self.options.ajax_url; |
|
38
|
|
|
var currentElem = this; |
|
39
|
|
|
$.ajax({ |
|
40
|
|
|
url: groupUrl, |
|
41
|
|
|
type: 'POST', |
|
42
|
|
|
dataType: 'json', |
|
43
|
|
|
showLoader: true, |
|
44
|
|
|
data: { |
|
45
|
|
|
groupId: groupId |
|
46
|
|
|
}, |
|
47
|
|
|
complete: function(response) { |
|
48
|
|
|
$('#faq-content').html(response.responseJSON.faq); |
|
49
|
|
|
self._setAccordian(); |
|
50
|
|
|
self._scrollToGroup(currentElem); |
|
51
|
|
|
} |
|
52
|
|
|
}); |
|
53
|
|
|
} |
|
54
|
|
|
}); |
|
55
|
|
|
|
|
56
|
|
|
$(this.options.collapseFaqsSelector).on('click', function(e) { |
|
57
|
|
|
e.preventDefault(); |
|
58
|
|
|
$(self.options.uiAccordionContentSelector).hide(100); |
|
59
|
|
|
$(self.options.uiAccordionHeaderSelector).removeClass('ui-state-active'); |
|
60
|
|
|
$(self.options.uiAccordionHeaderSelector).removeClass('ui-accordion-header-active'); |
|
61
|
|
|
}); |
|
62
|
|
|
|
|
63
|
|
|
$(this.options.expandFaqsSelector).on('click', function(e) { |
|
64
|
|
|
e.preventDefault(); |
|
65
|
|
|
$(self.options.uiAccordionContentSelector).show(100); |
|
66
|
|
|
$(self.options.uiAccordionHeaderSelector).addClass('ui-state-active'); |
|
67
|
|
|
$(self.options.uiAccordionHeaderSelector).addClass('ui-accordion-header-active'); |
|
68
|
|
|
}); |
|
69
|
|
|
}, |
|
70
|
|
|
|
|
71
|
|
|
_setAccordian: function() { |
|
72
|
|
|
$(this.options.faqAccordionSelector).accordion({ |
|
73
|
|
|
collapsible: true, |
|
74
|
|
|
heightStyle: "content", |
|
75
|
|
|
active: '', |
|
76
|
|
|
animate: 500 |
|
77
|
|
|
}); |
|
78
|
|
|
}, |
|
79
|
|
|
|
|
80
|
|
|
_scrollToGroup(data) { |
|
81
|
|
|
var target = $(data.getAttribute('href')); |
|
82
|
|
|
if(target.length) { |
|
83
|
|
|
$('html, body').stop().animate({ |
|
84
|
|
|
scrollTop: target.offset().top |
|
85
|
|
|
}, 1000); |
|
86
|
|
|
} |
|
87
|
|
|
} |
|
88
|
|
|
}); |
|
89
|
|
|
|
|
90
|
|
|
return $.mageprince.faq; |
|
91
|
|
|
}); |
|
92
|
|
|
|
mageprince /
magento2-FAQ
