site.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. function click_link() {
  2. $link = $('#text_figli p > a');
  3. $link.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. $loader.css('display','inline-block');
  17. $.ajax({
  18. url : '/' + page + '/' + cat, // La ressource ciblée
  19. type : 'GET', // Le type de la requête HTTP
  20. dataType:'html',
  21. success: function(data) {
  22. $(data).find('#item_list').addClass(cat).insertAfter($this);
  23. $this.addClass('open');
  24. lazy();
  25. },
  26. complete: function(data) {
  27. console.log('cat', cat);
  28. $loader.hide();
  29. click_img(e, $this, $href, url, page, cat, project_name);
  30. closeAjax();
  31. },
  32. });
  33. }
  34. });
  35. };
  36. function click_list() {
  37. var $link = $('.list-projets li > a');
  38. $link.click(function(e) {
  39. e.preventDefault();
  40. var $this = $(this);
  41. $href = $this.attr("href");
  42. url = $href.split("/");
  43. page = url[1];
  44. cat = url[2];
  45. project_name = url[3];
  46. var $link_txt = $('#text_figli a#'+cat);
  47. var $link_item = $('#item_list.'+cat);
  48. var $link_card = $('.card > #'+project_name + ' a');
  49. if ($link_txt.hasClass('open') && $link_card.parent().hasClass('open') ) {
  50. anchor($href);
  51. }else if ($link_txt.hasClass('open')) {
  52. anchor($href);
  53. $.ajax({
  54. url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
  55. type : 'GET', // Le type de la requête HTTP
  56. dataType:'html',
  57. // async: false,
  58. success: function(data) {
  59. $('#item_list.'+cat+' .card-image.open #item').remove();
  60. $('#item_list.'+cat+' .card-image').removeClass('open');
  61. $(data).find('#item').addClass(cat).insertAfter($link_card);
  62. $link_card.parent().addClass('open');
  63. lazy();
  64. },
  65. complete: function(data) {
  66. marg_item(project_name);
  67. closeAjax();
  68. },
  69. });
  70. } else {
  71. $.ajax({
  72. url : '/' + page + '/' + cat, // La ressource ciblée
  73. type : 'GET', // Le type de la requête HTTP
  74. dataType:'html',
  75. // async: false,
  76. success: function(data) {
  77. $(data).find('#item_list').addClass(cat).insertAfter($link_txt);
  78. $link_txt.addClass('open');
  79. lazy();
  80. anchor($href);
  81. $('.card a').click(function (e) {
  82. e.preventDefault()
  83. })
  84. click_img(e, $this, $href, url, page, cat, project_name)
  85. },
  86. complete: function(data) {
  87. console.log('cat', cat);
  88. var $link_card = $('.card > #'+project_name + ' a');
  89. setTimeout( function(){
  90. console.log('project_name', project_name);
  91. console.log('$link_card', $link_card);
  92. if ($link_card.hasClass('open')) {
  93. }else {
  94. anchor($href);
  95. $.ajax({
  96. url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
  97. type : 'GET', // Le type de la requête HTTP
  98. dataType:'html',
  99. success: function(data) {
  100. $(data).find('#item').addClass(cat).insertAfter($link_card);
  101. $link_card.parent().addClass('open');
  102. lazy();
  103. },
  104. complete: function(data) {
  105. marg_item(project_name);
  106. closeAjax();
  107. },
  108. });
  109. }
  110. }, 500);
  111. }
  112. });
  113. }
  114. });
  115. }
  116. function click_img(e, $this, $href, url, page, cat, project_name) {
  117. $('section.' + cat +' .card-image > a').click(function(e) {
  118. var $this = $(this);
  119. $href = $this.attr("href");
  120. url = $href.split("/");
  121. page = url[1];
  122. cat = url[2];
  123. project_name = url[3];
  124. var $loader = $(this).parents('.card').find('.loader');
  125. e.preventDefault();
  126. if ($this.parent().hasClass('open')) {
  127. $this.parent().removeClass('open');
  128. $($this.parent().find('#item.'+ cat)).remove();
  129. } else {
  130. $loader.css('display','inline-block');
  131. $.ajax({
  132. url : '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
  133. type : 'GET', // Le type de la requête HTTP
  134. dataType:'html',
  135. // async: false,
  136. success: function(data) {
  137. $('#item_list.'+cat+' .card-image.open #item').remove();
  138. $('#item_list.'+cat+' .card-image').removeClass('open');
  139. $(data).find('#item').addClass(cat).insertAfter($this);
  140. $this.parent().addClass('open');
  141. marg_item(project_name);
  142. anchor($href);
  143. lazy();
  144. },
  145. complete:function() {
  146. // var $projet = $("#text_figli .card #item");
  147. // 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>"
  148. // $projet.prepend(hamburger);
  149. closeAjax();
  150. $loader.hide();
  151. }
  152. });
  153. }
  154. });
  155. }
  156. function anchor($href) {
  157. var aTag = $("a[href='"+ $href +"']");
  158. // console.log('aTag.offset()', aTag.offset().top+10);
  159. $('html,body').animate({scrollTop: aTag.offset().top-7},'slow');
  160. }
  161. function animate() {
  162. var $item_list = $('#item_list .card > .card-image');
  163. $item_list.fadeIn( "slow" );
  164. }
  165. function marg_item(project_name) {
  166. var $item = $('.card-image#'+project_name+' #item');
  167. var $item_offset = $item.offset().left-8;
  168. var $card = $item.parents('.card');
  169. var $item_list = $item.parents('#item_list');
  170. var pos_card = $card.offset().left;
  171. var margin_right = $item_list.width() - (pos_card + $card.width());
  172. console.log('$card.width()',$card.width());
  173. console.log('pos_card',pos_card);
  174. console.log('$item_list',$item_list.width());
  175. $item.css('margin-left', '-'+$item_offset +'px');
  176. // $item.parents('.card').css('margin-right', margin_right);
  177. }
  178. function mouseHover() {
  179. $link_cat = $('#text_figli p > a');
  180. $link_cat.mouseenter(function() {
  181. link_id = $(this).attr("id");
  182. $('html').append("<div class=circle_hover ></div>");
  183. console.log('link_id',link_id);
  184. setTimeout(function () {
  185. $('.circle_hover').addClass('open '+ link_id);
  186. }, 10);
  187. mousePos();
  188. })
  189. .mouseleave(function() {
  190. $('html').find(".circle_hover").remove();
  191. });
  192. function mousePos() {
  193. var currentMousePos = { x: 0, y: 0 };
  194. var $circle = $('.circle_hover');
  195. $(document).mousemove(function(event) {
  196. currentMousePos.x = event.pageX;
  197. currentMousePos.y = event.pageY;
  198. $circle.css('left', currentMousePos.x );
  199. $circle.css('top', currentMousePos.y );
  200. });
  201. }
  202. };
  203. function lazy() {
  204. $('img.lazy').Lazy({
  205. effect: "fadeIn",
  206. effectTime: 500,
  207. threshold: 0
  208. });
  209. }
  210. function redirection() {
  211. var url = document.location.href;
  212. console.log(url);
  213. if (url != 'https://figureslibres.kevintessier.net/') {
  214. document.location.href="https://figureslibres.kevintessier.net/"
  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. });
  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. $(document).ready(function($){
  246. // redirection();
  247. click_link();
  248. click_list();
  249. mouseHover();
  250. animate_burger();
  251. croix();
  252. });