MediaWiki:Common.js
De Observatoire
Révision datée du 20 juillet 2021 à 12:44 par Admin (discussion | contributions)
Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac).
- Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac).
- Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5.
- Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité et sécurité → Effacer les données d’exploration → Images et fichiers en cache.
/* Tout JavaScript ici sera chargé avec chaque page accédée par n’importe quel utilisateur. */ //<nowiki> (function(){ $( ".mw-wiki-logo.fallback" ).attr('href', 'https://observatoire.hype13.fr/home') console.log('bonjour le wiki'); }()); (function(){ $(".ActiviteObservee").each(function(){ number = $(this).text().match(/\d/g).join(""); if(number){ if(number > 6){ $(this).css("color", "green"); $(this).css("font-size", "2em"); }else if(number > 0 && number < 2){ $(this).css("color", "#fc4e03"); $(this).css("font-size", "2em"); }else if(number >= 2 && number <= 6){ $(this).css("color", "#429ef5"); $(this).css("font-size", "2em"); }else if(number == 0){ $(this).css("color", "red"); $(this).css("font-size", "2em"); } } }); }()); var nbOptions = 8; var angleStart = -360; // jquery rotate animation function rotate(li,d) { $({d:angleStart}).animate({d:d}, { step: function(now) { $(li) .css({ transform: 'rotate('+now+'deg)' }) .find('label') .css({ transform: 'rotate('+(-now)+'deg)' }); }, duration: 0 }); } // show / hide the options function toggleOptions(s) { $(s).toggleClass('open'); var li = $(s).find('li'); var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length; for(var i=0; i<li.length; i++) { var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg; $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart); } } $('.selector button').click(function(e) { toggleOptions($(this).parent()); }); setTimeout(function() { toggleOptions('.selector'); }, 100);//@ sourceURL=pen.js var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36251023-1']); _gaq.push(['_setDomainName', 'jqueryscript.net']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); /* const center = { x: 325, y: 175 }; const serv_dist = 250; const pointer_dist = 172; const pointer_time = 2; const icon_size = 42; const circle_radius = 38; const text_top_margin = 18; const tspan_delta = 16; //name is used as the title for the bubble //icon is the id of the corresponding svg symbol const services_data = [ { name: "Industries", icon: "industries" }, { name: "Validation\n(C&Q and CSV)", icon: "validation" }, { name: "Engineering", icon: "engineering" }, { name: "Project\nManagement", icon: "management" }, { name: "Manufacturing\nIT", icon: "manufacturing" }, { name: "Technical\nServices", icon: "technical" }, { name: "Process\nAutomation", icon: "process" }]; const services = document.getElementById("service-collection"); const nav_container = document.getElementById("circle-nav-services"); const symbol_copy = document.getElementById("circle-nav-copy"); const use_copy = document.querySelector("use.nav-copy"); //Keeps code DRY avoiding namespace for element creation function createSVGElement(el) { return document.createElementNS("http://www.w3.org/2000/svg", el); } //Quick setup for multiple attributes function setAttributes(el, options) { Object.keys(options).forEach(function (attr) { el.setAttribute(attr, options[attr]); }); } //Service bubbles are created dynamically function addService(serv, index) { let group = createSVGElement("g"); group.setAttribute("class", "service serv-" + index); // This group is needed to apply animations in // the icon and its background at the same time let icon_group = createSVGElement("g"); icon_group.setAttribute("class", "icon-wrapper"); let circle = createSVGElement("circle"); setAttributes(circle, { r: circle_radius, cx: center.x, cy: center.y }); let circle_shadow = circle.cloneNode(); setAttributes(circle, { class: 'shadow' }); icon_group.appendChild(circle_shadow); icon_group.appendChild(circle); let symbol = createSVGElement("use"); setAttributes(symbol, { 'x': center.x - icon_size / 2, 'y': center.y - icon_size / 2, 'width': icon_size, 'height': icon_size }); symbol.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#" + serv.icon); icon_group.appendChild(symbol); group.appendChild(icon_group); let text = createSVGElement("text"); setAttributes(text, { x: center.x, y: center.y + circle_radius + text_top_margin }); let tspan = createSVGElement("tspan"); if (serv.name.indexOf('\n') >= 0) { let tspan2 = tspan.cloneNode(); let name = serv.name.split('\n'); jQuery(tspan).text(name[0]); jQuery(tspan2).text(name[1]); setAttributes(tspan2, { x: center.x, dy: tspan_delta }); text.appendChild(tspan); text.appendChild(tspan2); } else { jQuery(tspan).text(serv.name); text.appendChild(tspan); } group.appendChild(text); services.appendChild(group); let service_bubble = jQuery(".serv-" + index); //Uses tween to look for right position twn_pivot_path.seek(index); TweenLite.set(service_bubble, { x: pivot_path.x, y: pivot_path.y, transformOrigin: "center center" }); service_bubble.click(serviceClick); } //Creates pointer function createPointer() { let service_pointer = createSVGElement("circle"); setAttributes(service_pointer, { cx: center.x - pointer_dist, cy: center.y, r: 12, class: "pointer" }); nav_container.appendChild(service_pointer); service_pointer = document.querySelector("svg .pointer"); let pointer_circle = [ { x: 0, y: 0 }, { x: pointer_dist, y: pointer_dist }, { x: pointer_dist * 2, y: 0 }, { x: pointer_dist, y: -pointer_dist }, { x: 0, y: 0 }]; twn_pointer_path.to(service_pointer, pointer_time, { bezier: { values: pointer_circle, curviness: 1.5 }, ease: Power0.easeNone, transformOrigin: "center center" }); } //Defines behavior for service bubbles function serviceClick(ev) { //There's always an active service jQuery(".service.active").removeClass("active"); let current = jQuery(ev.currentTarget); current.addClass("active"); //There's a "serv-*" class for each bubble let current_class = current.attr("class").split(" ")[1]; let class_index = current_class.split('-')[1]; //Hides current text of the main bubble jQuery(use_copy).addClass("changing"); //Sets pointer to the right position twn_pointer_path.tweenTo(class_index * (pointer_time / (2 * 6))); //After it's completely hidden, the text changes and becomes visible setTimeout(() => { let viewBoxY = 300 * class_index; symbol_copy.setAttribute("viewBox", "0 " + viewBoxY + " 300 300"); jQuery(use_copy).removeClass("changing"); }, 250); } //Array describes points for a whole circle in order to get //the right curve let half_circle = [ { x: -serv_dist, y: 0 }, { x: 0, y: serv_dist }, { x: serv_dist, y: 0 }, { x: 0, y: -serv_dist }, { x: -serv_dist, y: 0 }]; //A simple object is used in the tween to retrieve its values var pivot_path = { x: half_circle[0].x, y: half_circle[0].y }; //The object is animated with a duration based on how many bubbles //should be placed var twn_pivot_path = TweenMax.to(pivot_path, 12, { bezier: { values: half_circle, curviness: 1.5 }, ease: Linear.easeNone }); services_data.reduce((count, serv) => { addService(serv, count); return ++count; }, 0); //The variable is modified inside the function //but its also used later to toggle its class var twn_pointer_path = new TimelineMax({ paused: true }); createPointer(); //Adding it immediately triggers a bug for the transform setTimeout(() => jQuery("#service-collection .serv-0").addClass("active"), 200); */ //</nowiki>