https://www.plantruffe.fr/Files/15269/productTabs.js

1(function ($)
2{
3
4
5    $.fn.productAddTabs = function (options)
6    {
7        if ($('.wbe-editor-toolbar-wrapper').length)
8            return this;
9
10        var defaults = {
11            target: 'itemTabs',
12            anchor: 'ol',
13            urlParam: 'tab',
14            tabTitle: 'h1, h2, h3, h4, h5, h6',
15            tabTag: null,
16            defaultName: 'Onglet #n', // le #n sera remplacé par le numéro de l'onglet : "Onglet 1", "Onglet 2", etc.
17            autoSlide: false,
18            crossTransition: false,
19            autoHeight: false,
20            autoWidth: false,
21            timeToSlide: 3000,
22            slideSpeed: 500,
23            stopAfterFirstClick: false,
24            htmlTemplate: '<div class="list"></div><div class="zone"></div>',
25            tabContainer: 'ul',
26            tabLister: 'li',
27            zIndex: 10,
28            reviewsTab: false
29        };
30
31        var opts = $.extend(defaults, options);
32        var domElements = $(this);
33        
34        productAddTabs(domElements, opts);
35
36        function isArray(testObject)
37        {
38            return testObject && !(testObject.propertyIsEnumerable('length')) && typeof testObject === 'object' && typeof testObject.length === 'number';
39        }
40
41        function productAddTabs(domElements, options)
42        {
43
44            //On s'accroche à l'encre si spécifiée
45
46            if (options.anchor && $(options.anchor).length)
47            {
48                $(options.anchor).replaceWith('<div id="' + options.target + '"/>');
49            }
50
51            if (!options.anchor && !$('#' + options.target).length)
52            {
53                domElements.wrapAll('<div id="' + options.target + '"/>');
54            }
55
56            var tags = [],
57                    zone = [],
58                    x = 0,
59                    y = 0,
60                    i = 1,
61                    tempContent,
62                    regTab,
63                    testTab;
64
65
66            $('#' + options.target).css({
67                'position': 'relative'
68            });
69
70            // récupération des élemetns du texte enrichi
71            domElements.each(function ()
72            {
73
74                var thisZone = $(this),
75                        thisTag = (options.tabTitle) ? $(options.tabTitle, this).eq(0) : null,
76                        titleTag = "",
77                        noTag = true;
78
79                if (options.autoWidth)
80                    x = Math.max(thisZone.width(), x);
81                if (options.autoHeight)
82                    y = Math.max(thisZone.height(), y);
83
84                // utilisation des onglets personnalsiés balises
85                if (thisTag && thisTag.length)
86                {
87                    titleTag = thisTag.detach().html();
88                    noTag = false;
89                }
90
91                // utilisation des onglets personnalsiés tabTag
92                if (options.tabTag)
93                {
94
95                    function testTag()
96                    {
97                        tempContent = thisZone.html();
98                        //  if (window.console) console.log ('tempContent', tempContent);
99                        if (!tempContent)
100                            return;
101                        regTab = new RegExp(options.tabTag, 'gi');
102                        testTab = regTab.exec(tempContent);
103                        // if (window.console) console.log ('testTab', testTab);
104                        if (!testTab || !testTab.length > 1)
105                            return;
106                        titleTag = testTab[1];
107                        // if (window.console) console.log ('titleTag', titleTag);
108                        noTag = false;
109                        thisZone.html(tempContent.replace(testTab[0], ''));
110                    }
111
112                    testTag();
113                }
114
115                // utilisation des onglets par défaut  
116                if (noTag)
117                {
118                    var Tag = options.defaultName;
119                    if (isArray(Tag))
120                    {
121                        var arrayLength = Tag.length;
122                        var j = (i > arrayLength) ? arrayLength : i;
123                        titleTag = Tag[j - 1];
124                    }
125                    else
126                    {
127                        titleTag = options.defaultName;
128                    }
129
130                    if (titleTag.match(/#n/g))
131                        titleTag = titleTag.replace(/#n/g, i);
132                }
133
134                tags.push('<' + options.tabLister + ' class="tagListElements" ><a class="tagLinks tagLink' + i + '"><span>' + titleTag + '</span></a></' + options.tabLister + '>');
135                thisZone.wrapInner('<div class="tagsZone tagZone' + i + '" />');
136                var tempZoneChild = thisZone.children().detach();
137                zone.push(tempZoneChild);
138                i++;
139            });
140            
141            if (options.reviewsTab && tags.length && $('.viewReviews').length)
142            {
143                var reviewsIndex = i;
144                var titleTag = $('#ProductReviews .PBReviewTitle').html();
145                tags.push('<' + options.tabLister + ' class="tagListElements" ><a class="tagLinks tagLink' + i + '"><span>' + titleTag + '</span></a></' + options.tabLister + '>');
146                $('#ProductReviews').wrapInner('<div class="tagsZone tagZone' + i + '" />');
147                $('#ProductReviews .PBReviewTitle').remove();
148                var tempZoneChild = $('#ProductReviews').children().detach();
149                zone.push(tempZoneChild);
150                $('.viewReviews').remove();
151            }
152
153
154            // Position initiale diaporama
155            var numberOfItems = tags.length,
156                    timeOut,
157                    uriCourant = document.location.href,
158                    reg = new RegExp("[&\\?]" + this.urlParam + "=(\\d+)", "g"),
159                    infosInUrl = reg.exec(uriCourant);
160
161            var current = null,
162                    next = (infosInUrl && infosInUrl.length > 0 && parseInt(infosInUrl[1]) > 0 && parseInt(infosInUrl[1]) <= numberOfItems) ? parseInt(infosInUrl[1]) : 1;
163
164            //création HTML
165            $('#' + options.target).html(options.htmlTemplate);
166
167            $('#' + options.target + ' .zone:first').replaceWith('<div class="tagsListZone" style="position:relative;"></div>');
168            $('#' + options.target + ' .list:first').replaceWith('<' + options.tabContainer + ' class="tagsList">' + tags.join('') + '</' + options.tabContainer + '>');
169            for (var j = 0; j < numberOfItems; j++)
170            {
171                $('#' + options.target + ' .tagsListZone:first').append(zone[j]);
172            }
173
174            var zones = $('#' + options.target + ' .tagsListZone:first .tagsZone');
175
176            zones.css({
177                'opacity': 0
178            });
179
180            zones.css({
181                'left': 0,
182                'top': 0,
183                'position': 'absolute'
184            })
185                    .hide();
186
187            if (options.autoHeight)
188                $('#' + options.target + ' .tagsListZone:first .tagsZone').height(y);
189            if (options.autoWidth)
190                $('#' + options.target + ' .tagsListZone:first .tagsZone').width(x);
191
192
193            shadeIt(1);
194            // fonction de transition fondu/enchainé :
195            function shadeIt(speed)
196            {
197
198                if (current == next)
199                    return;
200                if (current)
201                {
202                    var currentZone = $('#' + options.target + ' .tagsListZone:first > .tagZone' + current);
203
204                    if (options.crossTransition)
205                    {
206                        currentZone.css({
207                            'position': 'absolute'
208                        });
209                    }
210
211                    currentZone.animate({
212                        'opacity': 0,
213                        'z-index': 0
214                    }, {
215                        duration: speed,
216                        complete: function ()
217                        {
218                            $(this)
219                                    .css({
220                                        'position': 'absolute'
221                                    })
222                                    .hide();
223                            if (!options.crossTransition)
224                                showNext();
225                        }
226                    });
227
228
229                    $('#' + options.target + ' .tagsList:first > .tagListElements > .tagLink' + current).removeClass('taghighlighted');
230                }
231
232                $('#' + options.target + ' .tagsList:first > .tagListElements > .tagLink' + next).addClass('taghighlighted');
233
234                if (options.crossTransition || !current)
235                    showNext();
236
237                function showNext()
238                {
239                    var toMove = $('#' + options.target + ' .tagsListZone:first > .tagZone' + next);
240
241                    toMove
242                            .css({
243                                'position': 'relative'
244                            })
245                            .show();
246
247                    toMove.animate({
248                        'opacity': 1,
249                        'z-index': options.zIndex
250                    }, {
251                        duration: speed,
252                        complete: function ()
253                        {
254                            if (this.style.removeAttribute)
255                                this.style.removeAttribute('filter');
256                        }
257                    });
258                }
259                current = next;
260            }
261
262            // affichage zone correspondante lors du clic sur un élement du carousel

263            $('#' + options.target + ' .tagsList:first .tagLinks').bind('click', function ()
264            {
265                var meAgain = $(this).attr('class'),
266                        reg = new RegExp('tagLink(\\d+)', 'g');
267                next = parseInt(reg.exec(meAgain)[1], 10);
268
269                if (options.autoSlide)
270                {
271                    clearTimeout(timeOut);
272                }
273                if (options.autoSlide && !options.stopAfterFirstClick)
274                {
275                    autoscroll();
276                }
277                shadeIt(options.slideSpeed);
278            });
279
280            //auto défilement
281            function autoscroll()
282            {
283                timeOut = setTimeout(function ()
284                {
285                    next = (next < numberOfItems) ? next + 1 : 1;
286                    shadeIt(options.slideSpeed);
287                    autoscroll();
288                }, options.timeToSlide);
289            }
290
291            if (options.autoSlide)
292            {
293                autoscroll();
294            }
295
296            function showTab(index)
297            {
298                next = index;
299
300                if (options.autoSlide)
301                {
302                    clearTimeout(timeOut);
303                }
304                if (options.autoSlide && !options.stopAfterFirstClick)
305                {
306                    autoscroll();
307                }
308                shadeIt(options.slideSpeed);
309            }
310
311            function moveToTabs()
312            {
313                $('body, html').animate({
314                    scrollTop: $('#' + options.target + ' .tagsList:first').offset().top - 60
315                }, 400);
316            }
317
318            // gestion des actions sur les avis
319            if (options.reviewsTab && tags.length)
320            {
321                // check if we need to go to reviews tab
322                // if params tab is present in url go to reviews tab
323                if (/^#ProductReviews$/i.test(window.location.hash))
324                {
325                    showTab(reviewsIndex);
326                    setTimeout(function(){
327                        moveToTabs();
328                    }, options.slideSpeed);
329                }
330
331                // clic sur la note globale du produit
332                $('#OxReviewsAvg .PBLink').click(function ()
333                {
334                    showTab(reviewsIndex);
335                    setTimeout(function(){
336                        moveToTabs();
337                    }, options.slideSpeed);
338                });
339            }
340        }
341
342        return this;
343    };
344
345})(jQuery);