site.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  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. e.preventDefault();
  43. var $this = $(this);
  44. $href = $this.attr("href");
  45. url = $href.split("/");
  46. page = url[1];
  47. cat = url[2];
  48. project_name = url[3];
  49. var $link_txt = $('#text_figli a#'+cat);
  50. var $link_item = $('#item_list.'+cat);
  51. var $link_card = $('.card > #'+project_name + ' a');
  52. if ($link_txt.hasClass('open') && $link_card.parent().hasClass('open') ) {
  53. anchor($href);
  54. }else if ($link_txt.hasClass('open')) {
  55. anchor($href);
  56. $.ajax({
  57. url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
  58. type : 'GET', // Le type de la requête HTTP
  59. dataType:'html',
  60. // async: false,
  61. success: function(data) {
  62. $('#item_list.'+cat+' .card-image.open #item').remove();
  63. $('#item_list.'+cat+' .card-image').removeClass('open');
  64. $(data).find('#item').addClass(cat).insertAfter($link_card);
  65. $link_card.parent().addClass('open');
  66. lazy();
  67. },
  68. complete: function(data) {
  69. marg_item(project_name);
  70. closeAjax();
  71. },
  72. });
  73. } else {
  74. $('#item_list').remove();
  75. $('.open').removeClass('open');
  76. $.ajax({
  77. url : '/' + page + '/' + cat, // La ressource ciblée
  78. type : 'GET', // Le type de la requête HTTP
  79. dataType:'html',
  80. // async: false,
  81. success: function(data) {
  82. $(data).find('#item_list').addClass(cat).insertAfter($link_txt);
  83. $link_txt.addClass('open');
  84. lazy();
  85. $('.card a').click(function (e) {
  86. e.preventDefault()
  87. })
  88. click_img(e, $this, $href, url, page, cat, project_name)
  89. },
  90. complete: function(data) {
  91. console.log('cat', cat);
  92. var $link_card = $('.card > #'+project_name + ' a');
  93. setTimeout( function(){
  94. console.log('project_name', project_name);
  95. console.log('$link_card', $link_card);
  96. if ($link_card.hasClass('open')) {
  97. }else {
  98. anchor($href);
  99. $.ajax({
  100. url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
  101. type : 'GET', // Le type de la requête HTTP
  102. dataType:'html',
  103. success: function(data) {
  104. $(data).find('#item').addClass(cat).insertAfter($link_card);
  105. $link_card.parent().addClass('open');
  106. lazy();
  107. },
  108. complete: function(data) {
  109. marg_item(project_name);
  110. closeAjax();
  111. anchor($href);
  112. },
  113. });
  114. }
  115. }, 500);
  116. }
  117. });
  118. }
  119. });
  120. }
  121. function click_img(e, $this, $href, url, page, cat, project_name) {
  122. $('section.' + cat +' .card-image > a').click(function(e) {
  123. var $this = $(this);
  124. $href = $this.attr("href");
  125. url = $href.split("/");
  126. page = url[1];
  127. cat = url[2];
  128. project_name = url[3];
  129. var $loader = $(this).parents('.card').find('.loader');
  130. e.preventDefault();
  131. if ($this.parent().hasClass('open')) {
  132. $this.parent().removeClass('open');
  133. $($this.parent().find('#item.'+ cat)).remove();
  134. } else {
  135. $loader.css('display','inline-block');
  136. $.ajax({
  137. url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
  138. type : 'GET', // Le type de la requête HTTP
  139. dataType:'html',
  140. success: function(data) {
  141. $('#item_list.'+cat+' .card-image.open #item').remove();
  142. $('#item_list.'+cat+' .card-image').removeClass('open');
  143. $(data).find('#item').addClass(cat).insertAfter($this);
  144. $this.parent().addClass('open');
  145. marg_item(project_name);
  146. anchor($href);
  147. lazy();
  148. },
  149. complete:function() {
  150. closeAjax();
  151. $('.loader').hide();
  152. scrollTop();
  153. }
  154. });
  155. }
  156. });
  157. }
  158. function anchor($href) {
  159. var aTag = $("a[href='"+ $href +"']");
  160. // console.log('aTag.offset()', aTag.offset().top+10);
  161. $('html,body').animate({scrollTop: aTag.offset().top-7},'slow');
  162. }
  163. function animate() {
  164. var $item_list = $('#item_list .card > .card-image');
  165. $item_list.fadeIn( "slow" );
  166. }
  167. function marg_item(project_name) {
  168. var $item = $('.card-image#'+project_name+' #item');
  169. var $card = $item.parents('.card');
  170. var pos_card = $card.offset().left-8;
  171. $item.css('margin-left', '-'+pos_card +'px');
  172. $(window).resize(function() {
  173. var pos_card = $card.offset().left-8;
  174. $item.css('margin-left', '-'+pos_card +'px');
  175. })
  176. }
  177. function mouseHover() {
  178. $link_cat = $('#text_figli p > a');
  179. $link_cat.mouseenter(function() {
  180. link_id = $(this).attr("id");
  181. $('html').append("<div class=circle_hover ></div>");
  182. console.log('link_id',link_id);
  183. setTimeout(function () {
  184. $('.circle_hover').addClass('open '+ link_id);
  185. }, 10);
  186. mousePos();
  187. })
  188. .mouseleave(function() {
  189. $('html').find(".circle_hover").remove();
  190. });
  191. function mousePos() {
  192. var currentMousePos = { x: 0, y: 0 };
  193. var $circle = $('.circle_hover');
  194. $(document).mousemove(function(event) {
  195. currentMousePos.x = event.pageX;
  196. currentMousePos.y = event.pageY;
  197. $circle.css('left', currentMousePos.x );
  198. $circle.css('top', currentMousePos.y );
  199. });
  200. }
  201. };
  202. function lazy() {
  203. $('img.lazy').Lazy({
  204. effect: "fadeIn",
  205. effectTime: 500,
  206. threshold: 0
  207. });
  208. }
  209. function redirection() {
  210. var url = document.location.href;
  211. console.log(url);
  212. if (url != 'https://figureslibres.kevintessier.net/') {
  213. document.location.href="https://figureslibres.kevintessier.net/"
  214. }
  215. }
  216. function animate_burger() {
  217. 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)};
  218. var hamburgers = document.querySelectorAll(".hamburger");
  219. var $hamburger = $('button.hamburger');
  220. if (hamburgers.length > 0) {
  221. forEach(hamburgers, function(hamburger) {
  222. hamburger.addEventListener("click", function() {
  223. this.classList.toggle("is-active");
  224. }, false);
  225. });
  226. }
  227. $hamburger.click(function() {
  228. $('.sidebar-right').toggleClass("is-active");
  229. })
  230. }
  231. function closeAjax() {
  232. var $button = $('#item #icone_list');
  233. $button.click(function() {
  234. $(this).parent().remove();
  235. $('.card-image').removeClass("open");
  236. });
  237. }
  238. function croix() {
  239. var $link = $("#text_figli p > a");
  240. 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>"
  241. var loader = "<div class='loader'></div>"
  242. $link.append(hamburger);
  243. $link.append(loader);
  244. }
  245. function scrollTop() {
  246. var $body = $("html, body");
  247. $('#item #top').click(function() {
  248. $body.stop().animate({scrollTop:0}, 500, 'swing', function() {
  249. });
  250. })
  251. }
  252. $(document).ready(function($){
  253. // redirection();
  254. click_link();
  255. click_list();
  256. mouseHover();
  257. animate_burger();
  258. croix();
  259. });