Created
February 12, 2015 13:41
-
-
Save olivmonnier/212c2950d090aeba9ea4 to your computer and use it in GitHub Desktop.
Guided tour
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="guided-tour"> | |
| <div id="tour-user" class="produit tour"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| initTour(tour, chapters, "#tour-user"); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function initTour(tour, chapters, elem) { | |
| var chapterWidth = function() { | |
| var widths = []; | |
| for (var key in tour) { | |
| widths.push(tour[key].width); | |
| } | |
| return Math.max.apply(Math, widths); | |
| }; | |
| var currentChapter; | |
| var routes = new Routes(); | |
| $(document).ready(function() { | |
| // var chapter = getUrlVars()["produit"]; | |
| // var section = getUrlVars()["image"]; | |
| // var tip = getUrlVars()["fonction"] - 1; | |
| var chapter, section, tip = void 0; | |
| loadTour(); | |
| $("[data-tour-chapter], [data-tour-section], [data-tour-tip]").on( | |
| "click", | |
| function(e) { | |
| e.preventDefault(); | |
| globalScroll.to_target("tour"); | |
| showTourAt($(this).attr("data-tour-chapter"), $(this).attr( | |
| "data-tour-section"), $(this).attr("data-tour-tip") - | |
| 1); | |
| }); | |
| $(document).on("click", elem + " div.tour_indexes span", function() { | |
| var section = getInClasses("section", $(this).attr("class")); | |
| $(elem + " div.screens div.chapter_" + currentChapter + | |
| " div.screen.active").fadeOut(700).deactivate(); | |
| $(elem + " div.screens div.chapter_" + currentChapter + | |
| " div.section_" + | |
| section).fadeIn(700).activate(); | |
| $(elem + " div.tour_indexes div.chapter_" + currentChapter + | |
| " span.active").deactivate(); | |
| $(elem + " div.tour_indexes div.chapter_" + currentChapter + | |
| " span.section_" + section).activate(); | |
| startQtipAt(currentChapter, section); | |
| }); | |
| $(elem + " span.tour_arrow").click(function() { | |
| if ($(this).hasClass("next")) { | |
| showNextSection(); | |
| } else if ($(this).hasClass("previous")) { | |
| showPreviousSection(); | |
| }; | |
| }); | |
| $(document).on("click", "div.qtip-content span.next", | |
| function() { | |
| if ($(this).closest(elem).length != 0) { | |
| var chapter = getInClasses("chapter", $(this).attr("class")); | |
| var section = getInClasses("section", $(this).attr("class")); | |
| var tip = getInClasses("tip", $(this).attr("class")); | |
| $(elem + " div.screens div.chapter_" + chapter + | |
| " div.section_" + | |
| section + " div.tip_" + tip).qtip("hide").removeClass( | |
| "active"); | |
| var nextTip = $(elem + " div.screens div.chapter_" + chapter + | |
| " div.section_" + section + " div.tip_" + (parseInt(tip) + | |
| 1)); | |
| if (nextTip.length > 0) { | |
| nextTip.click().addClass("active"); | |
| } else { | |
| showNextSection(); | |
| dataLayer.push({ | |
| 'event': 'visite', | |
| 'eventCategory': 'Visite', | |
| 'eventAction': 'bouton next', | |
| 'eventLabel': chapter | |
| }); | |
| }; | |
| } | |
| }); | |
| $(document).on("click", elem + " div.screen", function() { | |
| $(elem + " div.tip").qtip("hide"); | |
| }); | |
| $(document).on("click", | |
| elem + " .navigation ul li:not(.active, .first)", | |
| function() { | |
| var chapter = getInClasses("chapter", $(this).attr("class")); | |
| showTourAt(chapter); | |
| $(this).removeClass("preview"); | |
| dataLayer.push({ | |
| 'event': 'visite', | |
| 'eventCategory': 'Visite', | |
| 'eventAction': 'barre', | |
| 'eventLabel': chapter | |
| }); | |
| }); | |
| $(".navigation ul li a").on("click", function(event) { | |
| event.preventDefault(); | |
| }); | |
| // $(elem + " .navigation ol li:not(.active, .first)").on({ | |
| // mouseenter: function() { | |
| // $(this).removeClass("expandable").addClass( | |
| // "preview sfhover").css("width", chapterWidth()); | |
| // $(elem + " .navigation ol li.active").addClass( | |
| // "expandable truncated"); | |
| // return false; | |
| // }, | |
| // mouseleave: function() { | |
| // $(this).addClass("expandable truncated").removeClass( | |
| // "preview sfhover"); | |
| // $(elem + " .navigation ol li.active").removeClass( | |
| // "expandable"); | |
| // return false; | |
| // } | |
| // }); | |
| // $(elem + " .navigation ol li").bind( | |
| // "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", | |
| // function() { | |
| // $(this).not(".expandable").removeClass("truncated"); | |
| // }); | |
| // | |
| // | |
| // if ($(".lt-ie7").length) { | |
| // $( | |
| // elem + " .tour_arrow," + elem + " .tour_indexes span.inactive," + | |
| // elem + " div.qtip-content span.next," + elem + | |
| // " div.tour div.screen div.tip" | |
| // ).hover( | |
| // function() { | |
| // $(this).addClass("sfhover"); | |
| // }, | |
| // function() { | |
| // $(this).removeClass("sfhover"); | |
| // } | |
| // ); | |
| // }; | |
| showTourAt(chapter, section, tip); | |
| $(document).on("click", elem + " div.tip", function() { | |
| $(this).addClass("active"); | |
| $(elem + ' div.tip').not($(this)).removeClass("active"); | |
| dataLayer.push({ | |
| 'event': 'visite', | |
| 'eventCategory': 'Visite', | |
| 'eventAction': 'bouton bulle', | |
| 'eventLabel': getInClasses("chapter", $( | |
| elem + " .navigation ul li.active").attr( | |
| "class")) || getFirstKey(tour) | |
| }); | |
| }); | |
| }); | |
| function loadTour() { | |
| for (var chapter in tour) { | |
| $(elem + " div.screens").append("<div class='chapter_" + chapter + | |
| "'></div>"); | |
| $(elem + " div.tour_indexes").append("<div class='chapter_" + chapter + | |
| " invisible'></div>"); | |
| $(elem + " div.navigation ul").append( | |
| "<li class='chapter_" + chapter + "'>" + | |
| "<a href='#'>" + tour[chapter].name + "</a>" + "</li>"); | |
| for (var section in tour[chapter].content) { | |
| $(elem + " div.screens div.chapter_" + chapter).append( | |
| "<div class='section_" + section + | |
| " screen inactive'><img src='" + tour[chapter].content[ | |
| section] | |
| .img + "'></div>"); | |
| $(elem + " div.tour_indexes div.chapter_" + chapter).append( | |
| "<span class='section_" + section + " inactive'></span>"); | |
| var tips = tour[chapter].content[section].tips; | |
| for (var i = 0, len = tips.length; i < len; i++) { | |
| var corner = tips[i].corner; | |
| $(elem + " div.screens div.chapter_" + chapter + " div.section_" + | |
| section).append("<div class='tip tip_" + i + | |
| "' style='left: " + tips[i].x + "px; top: " + tips[i].y + | |
| "px;' title=''>" + (i + 1) + "</div>"); | |
| /* | |
| $("div.screens div.chapter_" + chapter + " div.section_" + section + " div.tip_" + i).qtip({ | |
| content: tips[i].text + "<span class='btn btn-primary next chapter_" + chapter + " section_" + section + " tip_" + i + "'>Suivant</span>", | |
| show: 'click', | |
| hide: 'click', | |
| style: { | |
| name: 'cream', | |
| color: "#444", | |
| tip: corner | |
| }, | |
| position: { | |
| corner: { | |
| target: getTipPosition(corner), | |
| tooltip: corner | |
| } | |
| } | |
| });*/ | |
| $(elem + " div.screens div.chapter_" + chapter + " div.section_" + | |
| section + " div.tip_" + i).qtip({ | |
| content: tips[i].text + | |
| "<br/><span class='btn btn-primary next chapter_" + | |
| chapter + " section_" + section + " tip_" + i + "'>" + | |
| btn_next + "</span>", | |
| position: { | |
| container: $(elem), | |
| my: getTipCorner(corner), | |
| at: getTipPosition(corner) | |
| }, | |
| show: { | |
| event: "click" | |
| }, | |
| hide: { | |
| event: "click" | |
| }, | |
| style: { | |
| classes: "qtip-dark", | |
| } | |
| }); | |
| }; | |
| }; | |
| }; | |
| }; | |
| function showTourAt(chapter, section, tip) { | |
| console.log(chapter, section, tip); | |
| if (chapter == undefined || !tour.hasOwnProperty(chapter)) { | |
| chapter = getFirstKey(tour) | |
| }; | |
| if (section == undefined || !tour[chapter].content.hasOwnProperty( | |
| section)) { | |
| section = getFirstKey(tour[chapter].content); | |
| }; | |
| if (tip == undefined || tour[chapter].content[section].tips[tip] == | |
| undefined) { | |
| tip = 0; | |
| } | |
| hideTourAt(currentChapter); | |
| currentChapter = chapter; | |
| // if (chapter == chapters[chapters.length - 1]) { | |
| // $(elem + " .navigation div.background").show(); | |
| // } else { | |
| // $(elem + " .navigation div.background").hide(); | |
| // }; | |
| // var newChapter = $(elem + " .navigation ol li.chapter_" + | |
| // chapter); | |
| // $(elem + " .navigation ol li").not(".chapter_" + chapter).not( | |
| // ".first").addClass("expandable truncated").removeClass("active"); | |
| // $(elem + " .navigation ol li").removeClass("following"); | |
| // newChapter.css({ | |
| // "width": chapterWidth() | |
| // }).removeClass("expandable").addClass("active"); | |
| // newChapter.next("li").addClass("following"); | |
| if (routes.current_membre) { | |
| $(elem + " div.chapter_presentation").html(tour[chapter].presentation) | |
| .show(); | |
| } else { | |
| $(elem + " div.banner .container").html(tour[chapter].presentation); | |
| }; | |
| $(elem + " div.screens div.chapter_" + chapter + " div.section_" + | |
| section) | |
| .fadeIn( | |
| 700).activate(); | |
| $(elem + " div.tour_indexes div.chapter_" + chapter).removeClass( | |
| "invisible"); | |
| $(elem + " div.tour_indexes div.chapter_" + chapter + | |
| " span.section_" + | |
| section).activate(); | |
| startQtipAt(chapter, section, tip); | |
| /* | |
| if (chapter == "gestion") { | |
| $("div.tip.active").qtip("hide"); | |
| $("div.tour_alert").fadeIn( 500, function(){ startQtipAt(chapter, section, tip); } ); | |
| }else{ | |
| $("div.tip.active").qtip("hide"); | |
| $("div.tour_alert").fadeOut( 500, function(){ startQtipAt(chapter, section, tip); } ); | |
| };*/ | |
| }; | |
| function hideTourAt(chapter) { | |
| $(elem + " div.screens div.chapter_" + chapter + " div.screen.active").fadeOut( | |
| 700).deactivate(); | |
| $(elem + " div.tour_indexes div.chapter_" + chapter).addClass( | |
| "invisible"); | |
| $(elem + " div.tour_indexes div.chapter_" + chapter + " span.active").deactivate(); | |
| }; | |
| function startQtipAt(chapter, section, index) { | |
| if (index == undefined) index = 0; | |
| $(elem + " div.tip").qtip("hide").removeClass("active"); | |
| $(elem + " div.screens div.chapter_" + chapter + " div.section_" + | |
| section + | |
| " div.tip_" + index).click().addClass("active"); | |
| }; | |
| function showNextSection() { | |
| var activeSection = $(elem + " div.screens div.chapter_" + | |
| currentChapter + | |
| " div.screen.active"); | |
| if (activeSection.next("div").length > 0) { | |
| var newSection = activeSection.next("div"); | |
| activeSection.fadeOut(700).deactivate(); | |
| newSection.fadeIn(700).activate(); | |
| $(elem + " div.tour_indexes div.chapter_" + currentChapter + | |
| " span.active").deactivate() | |
| .next("span").activate(); | |
| startQtipAt(currentChapter, getInClasses("section", newSection.attr( | |
| "class"))); | |
| } else { | |
| var nextChapter = (currentChapter == chapters[chapters.length - 1]) ? | |
| chapters[0] : chapters[$.inArray(currentChapter, chapters) + 1]; | |
| showTourAt(nextChapter); | |
| }; | |
| }; | |
| function showPreviousSection() { | |
| var activeSection = $(elem + " div.screens div.chapter_" + | |
| currentChapter + | |
| " div.screen.active"); | |
| if (activeSection.prev("div").length > 0) { | |
| var newSection = activeSection.prev("div"); | |
| activeSection.fadeOut(700).deactivate(); | |
| newSection.fadeIn(700).activate(); | |
| $(elem + " div.tour_indexes div.chapter_" + currentChapter + | |
| " span.active").deactivate() | |
| .prev("span").activate(); | |
| startQtipAt(currentChapter, getInClasses("section", newSection.attr( | |
| "class"))); | |
| } else { | |
| var previousChapter = (currentChapter == chapters[0]) ? chapters[ | |
| chapters.length - 1] : chapters[$.inArray(currentChapter, | |
| chapters) - 1]; | |
| showTourAt(previousChapter, lastSections[previousChapter]); | |
| }; | |
| }; | |
| function getFirstKey(data) { | |
| for (el in data) | |
| return el; | |
| }; | |
| function getInClasses(element, classes) { | |
| if (classes != undefined) return eval("/" + element + "_\\w+/").exec( | |
| classes)[0].replace(element + "_", ""); | |
| }; | |
| function getTipPosition(corner) { | |
| switch (corner) { | |
| case "topLeft": | |
| return "right bottom"; | |
| break; | |
| case "topRight": | |
| return "bottom left"; | |
| break; | |
| case "bottomLeft": | |
| return "top right"; | |
| break; | |
| case "bottomRight": | |
| return "top left"; | |
| break; | |
| default: | |
| return "right bottom"; | |
| break; | |
| }; | |
| }; | |
| function getTipCorner(corner) { | |
| switch (corner) { | |
| case "topLeft": | |
| return "top left"; | |
| break; | |
| case "topRight": | |
| return "top right"; | |
| break; | |
| case "bottomLeft": | |
| return "bottom left"; | |
| break; | |
| case "bottomRight": | |
| return "bottom right"; | |
| break; | |
| default: | |
| return "top left"; | |
| break; | |
| }; | |
| }; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment