site.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. function click_link() {
  2. $link = $('#text_figli p > a');
  3. $link.on('click',function(e) {
  4. e.preventDefault();
  5. var $loader = $(this).find('.loader');
  6. var $this = $(this);
  7. $href = $this.attr("href");
  8. url = $href.split("/");
  9. page = url[1];
  10. cat = url[2];
  11. project_name = url[3];
  12. if ($this.hasClass('open')) {
  13. $this.removeClass('open');
  14. $('#item_list.'+ cat).remove();
  15. } else {
  16. $('#item_list').remove();
  17. $('.open').removeClass('open');
  18. $loader.css('display','inline-block');
  19. $.ajax({
  20. url : '/' + page + '/' + cat, // La ressource ciblée
  21. type : 'GET', // Le type de la requête HTTP
  22. dataType:'html',
  23. async: false,
  24. success: function(data) {
  25. $(data).find('#item_list').addClass(cat).insertAfter($this);
  26. $this.addClass('open');
  27. lazy();
  28. },
  29. complete: function(data) {
  30. // console.log('cat', cat);
  31. $loader.hide();
  32. click_img(e, $this, $href, url, page, cat, project_name);
  33. closeAjax();
  34. },
  35. });
  36. }
  37. });
  38. };
  39. function click_list() {
  40. var $link = $('.list-projets li > a');
  41. $link.click(function(e) {
  42. $('.sidebar-right, .sidebar-right button.hamburger').removeClass('is-active');
  43. e.preventDefault();
  44. var $this = $(this);
  45. $href = $this.attr("href");
  46. url = $href.split("/");
  47. page = url[1];
  48. cat = url[2];
  49. project_name = url[3];
  50. var $link_txt = $('#text_figli a#'+cat);
  51. var $link_item = $('#item_list.'+cat);
  52. var $link_card = $('.card > #'+project_name + ' a');
  53. if ($link_txt.hasClass('open') && $link_card.parent().hasClass('open') ) {
  54. anchor($href);
  55. } else if ($link_txt.hasClass('open')) {
  56. anchor($href);
  57. $.ajax({
  58. url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
  59. type : 'GET', // Le type de la requête HTTP
  60. dataType:'html',
  61. // async: false,
  62. success: function(data) {
  63. $('#item_list.'+cat+' .card-image.open #item').remove();
  64. $('#item_list.'+cat+' .card-image').removeClass('open');
  65. $(data).find('#item').addClass(cat).insertAfter($link_card);
  66. $link_card.parent().addClass('open');
  67. lazy();
  68. },
  69. complete: function(data) {
  70. marg_item(project_name);
  71. closeAjax();
  72. anchor($href);
  73. },
  74. });
  75. } else {
  76. $('#item_list').remove();
  77. $('.open').removeClass('open');
  78. $.ajax({
  79. url : '/' + page + '/' + cat, // La ressource ciblée
  80. type : 'GET', // Le type de la requête HTTP
  81. dataType:'html',
  82. // async: false,
  83. success: function(data) {
  84. $(data).find('#item_list').addClass(cat).insertAfter($link_txt);
  85. $link_txt.addClass('open');
  86. lazy();
  87. $('.card a').click(function (e) {
  88. e.preventDefault()
  89. })
  90. click_img(e, $this, $href, url, page, cat, project_name)
  91. },
  92. complete: function(data) {
  93. // console.log('cat', cat);
  94. var $link_card = $('.card > #'+project_name + ' a');
  95. setTimeout( function(){
  96. // console.log('project_name', project_name);
  97. // console.log('$link_card', $link_card);
  98. if ($link_card.hasClass('open')) {
  99. }else {
  100. anchor($href);
  101. $.ajax({
  102. url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
  103. type : 'GET', // Le type de la requête HTTP
  104. dataType:'html',
  105. success: function(data) {
  106. $(data).find('#item').addClass(cat).insertAfter($link_card);
  107. $link_card.parent().addClass('open');
  108. lazy();
  109. },
  110. complete: function(data) {
  111. marg_item(project_name);
  112. closeAjax();
  113. anchor($href);
  114. scrollTop();
  115. },
  116. });
  117. }
  118. }, 500);
  119. }
  120. });
  121. }
  122. });
  123. }
  124. function click_img(e, $this, $href, url, page, cat, project_name) {
  125. $('section.' + cat +' .card-image > a').click(function(e) {
  126. var $this = $(this);
  127. $href = $this.attr("href");
  128. url = $href.split("/");
  129. page = url[1];
  130. cat = url[2];
  131. project_name = url[3];
  132. var $loader = $(this).parents('.card').find('.loader');
  133. e.preventDefault();
  134. if ($this.parent().hasClass('open')) {
  135. $this.parent().removeClass('open');
  136. $($this.parent().find('#item.'+ cat)).remove();
  137. } else {
  138. $loader.css('display','inline-block');
  139. $.ajax({
  140. url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
  141. type : 'GET', // Le type de la requête HTTP
  142. dataType:'html',
  143. success: function(data) {
  144. $('#item_list.'+cat+' .card-image.open #item').remove();
  145. $('#item_list.'+cat+' .card-image').removeClass('open');
  146. $(data).find('#item').addClass(cat).insertAfter($this);
  147. $this.parent().addClass('open');
  148. marg_item(project_name);
  149. anchor($href);
  150. lazy();
  151. scrollTop();
  152. // ScrollReveal().reveal($('#item_list > .card'), {
  153. // duration: 1000,
  154. // distance: '10px',
  155. // });
  156. },
  157. complete:function() {
  158. closeAjax();
  159. $('.loader').hide();
  160. }
  161. });
  162. }
  163. });
  164. }
  165. function anchor($href) {
  166. var aTag = $("#text_figli a[href='"+ $href +"']");
  167. console.log(aTag);
  168. // console.log('aTag.offset()', aTag.offset().top+10);
  169. $('html,body').animate({scrollTop: aTag.offset().top - 7},'slow');
  170. }
  171. function animate() {
  172. var $item_list = $('#item_list .card > .card-image');
  173. $item_list.fadeIn( "slow" );
  174. }
  175. function marg_item(project_name) {
  176. var $item = $('.card-image#'+project_name+' #item');
  177. var $card = $item.parents('.card');
  178. var pos_card = $card.offset().left-8;
  179. $item.css('margin-left', '-'+pos_card +'px');
  180. $(window).resize(function() {
  181. var pos_card = $card.offset().left-8;
  182. $item.css('margin-left', '-'+pos_card +'px');
  183. })
  184. }
  185. function mouseHover() {
  186. $link_cat = $('#text_figli p > a');
  187. $link_cat.mouseenter(function() {
  188. link_id = $(this).attr("id");
  189. $('html').append("<div class=circle_hover ></div>");
  190. // console.log('link_id',link_id);
  191. setTimeout(function () {
  192. $('.circle_hover').addClass('open '+ link_id);
  193. }, 10);
  194. mousePos();
  195. })
  196. .mouseleave(function() {
  197. $('html').find(".circle_hover").remove();
  198. });
  199. function mousePos() {
  200. var currentMousePos = { x: 0, y: 0 };
  201. var $circle = $('.circle_hover');
  202. $(document).mousemove(function(event) {
  203. currentMousePos.x = event.pageX;
  204. currentMousePos.y = event.pageY;
  205. $circle.css('left', currentMousePos.x );
  206. $circle.css('top', currentMousePos.y );
  207. });
  208. }
  209. };
  210. function lazy() {
  211. $('img.lazy').Lazy({
  212. effect: "fadeIn",
  213. effectTime: 500,
  214. threshold: 0
  215. });
  216. }
  217. function animate_burger() {
  218. var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
  219. var hamburgers = document.querySelectorAll(".hamburger");
  220. var $hamburger = $('button.hamburger');
  221. if (hamburgers.length > 0) {
  222. forEach(hamburgers, function(hamburger) {
  223. hamburger.addEventListener("click", function() {
  224. this.classList.toggle("is-active");
  225. }, false);
  226. });
  227. }
  228. $hamburger.click(function() {
  229. $('.sidebar-right').toggleClass("is-active");
  230. })
  231. }
  232. function closeAjax() {
  233. var $button = $('#item #icone_list');
  234. $button.click(function() {
  235. $(this).parent().remove();
  236. $('.card-image').removeClass("open");
  237. });
  238. }
  239. function croix() {
  240. var $link = $("#text_figli p > a");
  241. var hamburger = "<div id='icone_list'><button class='hamburger hamburger--slider is-active' type='button'><span class='hamburger-box'><span class='hamburger-inner'></span></span></button></div>"
  242. var loader = "<div class='loader'></div>"
  243. $link.append(hamburger);
  244. $link.append(loader);
  245. }
  246. function scrollTop() {
  247. var $body = $("html, body");
  248. $('#item #top').click(function() {
  249. $body.stop().animate({scrollTop:0}, 500, 'swing', function() {
  250. });
  251. })
  252. }
  253. function imgmouse() {
  254. var currentMousePos = { x: 0, y: 0 };
  255. var $img = $('.list-projets .img');
  256. $(document).mousemove(function(event) {
  257. currentMousePos.x = event.pageX;
  258. currentMousePos.y = event.pageY;
  259. $img.css('left', currentMousePos.x );
  260. $img.css('top', currentMousePos.y );
  261. });
  262. }
  263. function scrollreveal() {
  264. var $txt = $('#text_figli p');
  265. ScrollReveal().reveal($txt, {
  266. duration: 1000,
  267. distance: '10px',
  268. });
  269. var $button = $('.sidebar button');
  270. var $title_menu = $('.title-menu h2');
  271. $button.click(function() {
  272. ScrollReveal().destroy($txt, {
  273. duration: 1000,
  274. distance: '10px',
  275. });
  276. });
  277. }
  278. function clickmenu() {
  279. var $menu = $('.sidebar-right button');
  280. $menu.click(function() {
  281. $('#text_figli').toggleClass('hidden');
  282. })
  283. }
  284. $(document).ready(function($){
  285. scrollreveal();
  286. click_link();
  287. click_list();
  288. mouseHover();
  289. animate_burger();
  290. croix();
  291. imgmouse();
  292. clickmenu();
  293. });