main.js 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582
  1. (function($, Drupal, drupalSettings) {
  2. EdlpTheme = function(){
  3. var _ajax_settings = drupalSettings.edlp_ajax;
  4. var _$body = $('body');
  5. // var _is_front = drupalSettings.path.isFront;
  6. var _corpus_ready = false;
  7. var _$corpus_canvas;
  8. var _$row = $('main[role="main"]>.layout-content>.row');
  9. var _$ajaxLinks;
  10. var _audioPlayer;
  11. var _randomPlayer;
  12. var _compoPlayer;
  13. var _ajax_timing = {
  14. start:0,
  15. end:0
  16. };
  17. var _corpus_promise;
  18. // ___ _ _
  19. // |_ _|_ _ (_) |_
  20. // | || ' \| | _|
  21. // |___|_||_|_|\__|
  22. function init(){
  23. console.log("EdlpTheme init()");
  24. if(!drupalSettings.path.isFront)
  25. return;
  26. _deferred = initEvents();
  27. _audioPlayer = new AudioPlayer();
  28. _compoPlayer = new CompoPlayer();
  29. initAjaxLinks();
  30. initHistory();
  31. // if(!drupalSettings.path.isFront)
  32. // return;
  33. //
  34. // initEvents();
  35. };
  36. // ___ _
  37. // | __|_ _____ _ _| |_ ___
  38. // | _|\ V / -_) ' \ _(_-<
  39. // |___|\_/\___|_||_\__/__/
  40. function initEvents(){
  41. // https://www.html5rocks.com/en/tutorials/async/deferred/
  42. var $corpus_df = $.Deferred();
  43. _corpus_promise = $corpus_df.promise();
  44. _$body
  45. .on('corpus-map-ready', function(e){
  46. onCorpusMapReady(e);
  47. $corpus_df.resolve();
  48. })
  49. .on('on-studio-chutier-updated', initAjaxLinks)
  50. .on('studio-initialized', function(e){
  51. _compoPlayer.newCompo();
  52. })
  53. .on('studio-not-active', function(e){
  54. _compoPlayer.deactivate();
  55. })
  56. .on('on-studio-compo-updated', function(e){
  57. initAjaxLinks();
  58. _compoPlayer.refresh();
  59. })
  60. .on('on-studio-compo-opened', function(e){
  61. initAjaxLinks();
  62. _compoPlayer.newCompo();
  63. })
  64. .on('search-results-loaded', initAjaxLinks)
  65. // do not close index or notice modale on entree click
  66. .on('open_entree', function(e){
  67. console.log('on_open_entree : e', e);
  68. closeAllModals();
  69. // add body class for currently loaded content
  70. // var body_classes = [
  71. // 'path-'+sys_path.replace(/\//g, '-'),
  72. // 'entity-type-'+data.entity_type,
  73. // 'bundle-'+data.bundle,
  74. // 'view-mode-'+data.view_mode
  75. // ];
  76. _$body.removeClass();//.addClass(body_classes.join(' '));
  77. // record new history state
  78. if(typeof e.url != 'undefined'){
  79. // var state = {
  80. // ajax_path:null,
  81. // sys_path:null,
  82. // entree_tid:e.tid
  83. // };
  84. var state = getSysPathState(e.sys_path);
  85. history.pushState(state, null, e.url);
  86. // piwik
  87. if(typeof _paq !== 'undefined'){
  88. // page tracking
  89. // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
  90. _paq.push(['setCustomUrl', e.url]);
  91. _paq.push(['setDocumentTitle', e.title]);
  92. _paq.push(['trackPageView']);
  93. // js event
  94. // trackEvent(category, action, [name], [value])
  95. // _paq.push(['trackEvent', 'AjaxNav', 'loaded', state.url]);
  96. }
  97. }
  98. })
  99. .on('close_entree', function(e){
  100. backToFrontPage();
  101. });
  102. }
  103. // ___ _ _ ___
  104. // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
  105. // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
  106. // |___/\__|_| \___/_|_|___/\__,_|_| /__/
  107. function initScrollbars(){
  108. // console.log("initScrollbars");
  109. // TODO: find a better js scroll than overlayScrollbars which does not handle well max-height + overflow-y:auto;
  110. // $('.os-scroll').overlayScrollbars({
  111. // overflowBehavior:{
  112. // x:'h',
  113. // y:'scroll',
  114. // clipAlways:false
  115. // }
  116. // });
  117. };
  118. // _ _
  119. // /_\ (_)__ ___ __
  120. // / _ \ | / _` \ \ /
  121. // /_/ \_\/ \__,_/_\_\
  122. // |__/
  123. function getSysPathState(sys_path, view_mode){
  124. // console.log('Theme : getSysPathState', sys_path);
  125. var state = {
  126. 'sys_path':sys_path,
  127. 'ajax_path': sys_path
  128. };
  129. // convert node link to edlp_ajax_node module links
  130. var node_match = state.ajax_path.match(/^\/?(node\/(\d+))$/i);
  131. console.log('node_match', node_match);
  132. var term_match = state.ajax_path.match(/^\/?(taxonomy\/term\/(\d+))$/i);
  133. console.log('term_match', term_match);
  134. if(node_match){
  135. // TODO: detect audio links which will open audioplayer and wont load any ajax content unless view_mode "article" or "transcript"
  136. state.ajax_path = _ajax_settings.entityjson_path+'/'+node_match[1];
  137. state.node_nid = node_match[2];
  138. // check for viewmode attribute
  139. if(view_mode){
  140. state.ajax_path += '/'+view_mode;
  141. state.view_mode = view_mode;
  142. }
  143. }else if(term_match){
  144. // terms are always entrees, there's no other vocabulary links in front
  145. state.ajax_path = _ajax_settings.entityjson_path+'/'+term_match[1];
  146. state.ajax_path = state.ajax_path.replace(/taxonomy\/term/, 'taxonomy_term');
  147. state.entree_tid = term_match[2];
  148. // check for viewmode attribute
  149. if(view_mode){
  150. state.ajax_path += '/'+view_mode;
  151. state.view_mode = view_mode;
  152. }else{
  153. state.ajax_path = null;
  154. }
  155. }else{
  156. // convert other link to ajax
  157. // TODO: we assume that other links (no node, no term) are all from own modules (e.g. productions) !! may not be true !!
  158. state.ajax_path += '/ajax'
  159. }
  160. return state;
  161. };
  162. function ajaxLoadContent(state){
  163. console.log('ajaxLoadContent : state', state);
  164. _$body.addClass('ajax-loading');
  165. _ajax_timing.start = performance.now();
  166. var path = window.location.origin + Drupal.url(state.ajax_path);
  167. $.getJSON(path, {})
  168. .done(function(data){
  169. onAjaxLoaded(data, state);
  170. })
  171. .fail(function(jqxhr, textStatus, error){
  172. onAjaxLoadError(jqxhr, textStatus, error, state.sys_path);
  173. });
  174. };
  175. function onAjaxLoadError(jqxhr, textStatus, error, sys_path){
  176. console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
  177. $('.ajax-loading').removeClass('ajax-loading');
  178. _$body.removeClass('ajax-loading');
  179. };
  180. function onAjaxLoaded(data, state){
  181. console.log('ajax loaded : state', state);
  182. // console.log(data);
  183. // reset all style may been added by other pages (like masonry for productions)
  184. // and replace all content with newly loaded
  185. // TODO: build a system to replace or append contents (like studio + search)
  186. if(data.entity_type == "node" && data.bundle == "evenement"){
  187. if(_$row.find('.col.event').length){
  188. _$row.find('.col.event').replaceWith(data.rendered);
  189. }else if(_$row.find('.col.aside').length){
  190. _$row.find('.col.aside').replaceWith(data.rendered);
  191. }else{
  192. _$row.append(data.rendered);
  193. }
  194. }else{
  195. _$row.removeAttr('style').html(data.rendered);
  196. }
  197. // add body class for currently loaded content
  198. var body_classes = [
  199. 'path-'+state.sys_path.replace(/\//g, '-'),
  200. 'entity-type-'+data.entity_type,
  201. 'bundle-'+data.bundle,
  202. 'view-mode-'+data.view_mode
  203. ];
  204. _$body.removeClass().addClass(body_classes.join(' '));
  205. // id node add a generic path-node class to body
  206. // m = state.sys_path.match(/^\/?(node\/\d+)$/g);
  207. // if(m)
  208. if(state.node_nid)
  209. _$body.addClass('path-edlp-node');
  210. // handle clicked link classes
  211. $('.ajax-loading').removeClass('ajax-loading');
  212. $('.ajax-link.is-active').removeClass('is-active');
  213. $('.is-active-trail').removeClass('is-active-trail');
  214. if(typeof state.selector != 'undefined'){
  215. // in case of entree link (actualy, selector is used only for entries links)
  216. // TODO: unfortunatly on initFirstLoad there is no selector property
  217. console.log('selector', state.selector);
  218. $('a[selector="'+state.selector+'"]').addClass('is-active');
  219. initAudioLinksInContent();
  220. }else{
  221. if(typeof state.view_mode != 'undefined'){
  222. $('a[viewmode="'+state.view_mode+'"][data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
  223. }else{
  224. $('a[data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');
  225. }
  226. // as new content is not related to entree, we trigger close entree
  227. _$body.trigger({'type':'new-content-not-entree-ajax-loaded'});
  228. }
  229. // if bundle page (productions) activate production links
  230. if (typeof data.bundle != 'undefined' && data.bundle == "page") {
  231. $('a[data-drupal-link-system-path="productions"]').addClass('is-active-trail');
  232. }
  233. // if node is in production menu tree, set first level of tree active, e.g. pieces sonores
  234. if (typeof data.menu_parents != 'undefined') {
  235. for (var i = 0; i < data.menu_parents.length; i++) {
  236. var menu_sys_path = data.menu_parents[i];
  237. $('a[data-drupal-link-system-path="'+menu_sys_path+'"]').addClass('is-active-trail');
  238. }
  239. }
  240. // if entity has corpus-map's linked document call a filter to corpus map
  241. if(typeof data.documents_lies != 'undefined'){
  242. if(_corpus_ready){
  243. _$body.trigger({
  244. type:'ajax-node-loaded-linked-documents',
  245. nids:data.documents_lies
  246. });
  247. }else{
  248. _corpus_promise.done(function(){
  249. _$body.trigger({
  250. type:'ajax-node-loaded-linked-documents',
  251. nids:data.documents_lies
  252. });
  253. });
  254. }
  255. }
  256. // if block attached (eg : from edlp_productions module)
  257. // not used anymore as production block is always present (but not visible)
  258. if(typeof data.block != 'undefined'){
  259. // if block not already added
  260. if(!$('#'+data.block.id, '.region-'+data.block.region).length){
  261. $('.region-'+data.block.region).append(data.block.rendered);
  262. }
  263. }
  264. // initScrollbars();
  265. if(state.sys_path == "productions"){
  266. initProductions();
  267. }else{
  268. addCloseModalBtnToCols();
  269. }
  270. // enregistrement transcription
  271. if(data.entity_type == "node" && data.bundle == "enregistrement" && data.view_mode == "transcript"){
  272. // window.requestAnimationFrame(initEnregistrementTranscript);
  273. initEnregistrementTranscript();
  274. }
  275. // update the language switcher block if it comes in the response
  276. if(typeof data.translations_links != 'undefined'){
  277. console.log('state',state);
  278. var lang_code = drupalSettings.path.currentLanguage;
  279. var $links = $(data.translations_links);
  280. // set active link
  281. $links.find('li[hreflang="'+lang_code+'"]').addClass('is-active').find('a').addClass('is-active');
  282. if(state.view_mode){
  283. $links.find('a').each(function(i,e){
  284. var $a = $(this);
  285. $a.attr('href', $a.attr('href')+'#'+state.view_mode);
  286. });
  287. }
  288. // if(state.selector){
  289. // $links.find('a').attr('selector', state.selector);
  290. // }
  291. $('ul','.block.language-switcher-language-url').replaceWith($links);
  292. }
  293. initAjaxLinks();
  294. checkVisibleCorpusMapSpace();
  295. // trigger other modules behaviours
  296. _$body.trigger({'type':'new-content-ajax-loaded'});
  297. // and call druapl behaviours
  298. Drupal.attachBehaviors(_$row[0]);
  299. _$body.attr('booted', 'booted');
  300. _$body.removeClass('ajax-loading');
  301. // url is null means that we are loading content on popState event
  302. // so we don't record the state again
  303. if(state.url){
  304. // var state = {
  305. // ajax_path:ajax_path,
  306. // sys_path:sys_path,
  307. // };
  308. // console.log('url:'+url+' ; state',state);
  309. // console.log(window.location);
  310. // /!\ we can not pushestate with absolute url /!\
  311. history.pushState(state, null, state.url);
  312. // piwik
  313. if(typeof _paq !== 'undefined'){
  314. // page tracking
  315. // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
  316. _paq.push(['setCustomUrl', state.url]);
  317. _paq.push(['setDocumentTitle', data.title]);
  318. // TODO: piwik track load time
  319. _ajax_timing.end = performance.now();
  320. _paq.push(['setGenerationTimeMs', _ajax_timing.end-_ajax_timing.start]);
  321. _paq.push(['trackPageView']);
  322. // js event
  323. // trackEvent(category, action, [name], [value])
  324. // _paq.push(['trackEvent', 'AjaxNav', 'loaded', state.url]);
  325. }
  326. }
  327. };
  328. function initAudioLinksInContent(){
  329. _$row.find('a.audio-link')
  330. .on('mouseover', function(event) {
  331. event.preventDefault();
  332. if(_corpus_ready){
  333. _$corpus_canvas.trigger({
  334. type:'mouseover-audio-link',
  335. nid:$(this).attr('nid')
  336. });
  337. }
  338. })
  339. .on('mouseout', function(event) {
  340. event.preventDefault();
  341. if(_corpus_ready){
  342. _$corpus_canvas.trigger({
  343. type:'mouseout-audio-link',
  344. nid:$(this).attr('nid')
  345. });
  346. }
  347. });
  348. };
  349. function addCloseModalBtnToCols(){
  350. $('.col', _$row).each(function(index, el) {
  351. if($('span.close-col-btn', this).length)
  352. return true;
  353. $(this).children('.wrapper').prepend($('<span>')
  354. .addClass('close-col-btn')
  355. .on('click', onCloseModal)
  356. );
  357. });
  358. };
  359. function onCloseModal(e){
  360. // check for theme attribute and emmit event
  361. var $col = $(this).parents('.col');
  362. var theme = $col.attr('theme');
  363. if(theme != ''){
  364. _$body.trigger({'type':theme+'-col-closed'});
  365. }
  366. // remove the col
  367. $col.remove();
  368. checkRowEmpty();
  369. checkVisibleCorpusMapSpace();
  370. };
  371. // _ _ ___ _ _
  372. // /_\ (_)__ ___ __ | _ ) |___ __| |__ ___
  373. // / _ \ | / _` \ \ / | _ \ / _ \/ _| / /(_-<
  374. // /_/ \_\/ \__,_/_\_\ |___/_\___/\__|_\_\/__/
  375. // |__/
  376. // NOT USED (YET)
  377. function refreshAllBlocks(){
  378. var path = window.location.origin + Drupal.url(_ajax_settings.blocksjson_path);
  379. $.getJSON(path, {})
  380. .done(function(data){
  381. onAjaxBlockLoaded(data);
  382. })
  383. .fail(function(jqxhr, textStatus, error){
  384. onAjaxBlockLoadError(jqxhr, textStatus, error);
  385. });
  386. };
  387. function onAjaxBlockLoadError(jqxhr, textStatus, error){
  388. console.warn('ajax block load failed: '+error, jqxhr.responseText);
  389. };
  390. function onAjaxBlockLoaded(data){
  391. console.log('onAjaxBlockLoaded', data);
  392. // TODO: update each blocks (exepted language switcher)
  393. for (var blockname in data.blocks) {
  394. var block = data.blocks[blockname];
  395. console.log(blockname, block);
  396. $(block.id).replaceWith(block.rendered);
  397. }
  398. };
  399. // _ _ _ _
  400. // | || (_)__| |_ ___ _ _ _ _
  401. // | __ | (_-< _/ _ \ '_| || |
  402. // |_||_|_/__/\__\___/_| \_, |
  403. // |__/
  404. function initHistory(){
  405. initFirstLoad();
  406. window.addEventListener('popstate', onHistoryPopState);
  407. };
  408. function initFirstLoad(){
  409. console.log('theme : initFirstLoad()');
  410. // var origin_sys_path = window.localStorage.getItem('edlp_origin_path');
  411. var edlp_origin = JSON.parse(window.localStorage.getItem('edlp_origin'));
  412. console.log('edlp_origin', edlp_origin);
  413. if(edlp_origin != null && edlp_origin.sys_path){
  414. // hash is used as viewmode for taxonomy term entrees load (index or notice)
  415. // and for audio contents (article|transcript)
  416. var view_mode = edlp_origin.hash.replace('#', '');
  417. // create history state
  418. var state = getSysPathState(edlp_origin.sys_path, view_mode);
  419. // open entree tray in case of entree index|notice
  420. // (index or notice will be opened with ajaxLoadContent)
  421. // refactorized with new infos from edlp_origin
  422. // if(view_mode){
  423. if(edlp_origin.entity_type == "taxonomy_term"
  424. && edlp_origin.entity_bundle == "entrees"
  425. && view_mode){
  426. // var $link = $('[href="'+edlp_origin.url+'"][viewmode="'+view_mode+'"]');
  427. // var selector = $link.attr('selector') || null;
  428. // record the selector in the state for actions after ajaxContentLoaded
  429. state.selector = 'entree-'+view_mode+'-link-'+edlp_origin.entity_id; // entree-index-link-125
  430. // if(selector){
  431. // in case of entree link (actualy, selector is used only for entries links)
  432. // TODO: use a promise
  433. // TODO: but what if corpus ready before onAjaxLoaded >> use a promise !!
  434. if(_corpus_ready){
  435. _$corpus_canvas.trigger({
  436. type:'open-entree',
  437. // tid:$link.attr('tid')
  438. tid:edlp_origin.entity_id
  439. });
  440. }else{
  441. // else : EdlpCorpus will check when ready if entry item (notice or index) is already .is-active
  442. // .is-active class is added by onAjaxLoaded() (when content is loaded)
  443. // $('li.entree[tid="'+$link.attr('tid')+'"] a.term-link').addClass('is-active');
  444. $('li.entree[tid="'+edlp_origin.entity_id+'"] a.term-link').addClass('is-active');
  445. }
  446. // }
  447. }
  448. // check if audio link
  449. if(edlp_origin.audio_url){
  450. var node = {
  451. nid:edlp_origin.entity_id,
  452. audio_url:edlp_origin.audio_url
  453. };
  454. _audioPlayer.openDocument(node, 'history_first_load');
  455. if(view_mode == ""){
  456. // if audio only record in state
  457. state.audio = true;
  458. state.node = node;
  459. // we don't laod ajax content so we boot the home
  460. _$body.attr('booted', 'booted');
  461. }else{
  462. // ajax load content for audio only if article or transcript
  463. ajaxLoadContent(state);
  464. }
  465. }
  466. // only if not entree path
  467. // only if not audio (without article or transcript) path
  468. else if(state.ajax_path){
  469. // load content through ajax
  470. // ajaxLoadContent(null, state.sys_path, state.ajax_path, selector);
  471. ajaxLoadContent(state);
  472. }
  473. if(state.entree_tid){
  474. openEntree(state.entree_tid);
  475. }
  476. // record history state
  477. history.replaceState(state, null, edlp_origin.url+edlp_origin.hash);
  478. // reset the storage
  479. window.localStorage.removeItem("edlp_origin");
  480. // window.localStorage.removeItem("edlp_origin_url");
  481. }else{
  482. history.replaceState({home:true}, null, window.location.pathname);
  483. _$body.attr('booted', 'booted');
  484. }
  485. };
  486. function onHistoryPopState(e){
  487. console.log('onPopState',e.state);
  488. if(e.state.home){
  489. backToFrontPage(true);
  490. }
  491. else if (e.state.audio) {
  492. _audioPlayer.openDocument(e.state.node, 'popstate', e.state.historic_index);
  493. }
  494. else{
  495. if(e.state.entree_tid){
  496. openEntree(e.state.entree_tid);
  497. }
  498. if(e.state.ajax_path){
  499. e.state.url = null;
  500. // ajaxLoadContent(null, e.state.sys_path, e.state.ajax_path)
  501. ajaxLoadContent(e.state);
  502. }
  503. }
  504. };
  505. // _ _ _ _ _
  506. // /_\ (_)__ ___ _| | (_)_ _ | |__ ___
  507. // / _ \ | / _` \ \ / |__| | ' \| / /(_-<
  508. // /_/ \_\/ \__,_/_\_\____|_|_||_|_\_\/__/
  509. // |__/
  510. function initAjaxLinks(){
  511. // console.log('initAjaxLinks');
  512. $('a.site-name', '#block-edlptheme-branding')
  513. .add('a', '#block-mainnavigation')
  514. // .add('a', '.block.language-switcher-language-url')
  515. .add('a', '#block-footer.menu--footer')
  516. .add('a', '#block-productions')
  517. .add('a', 'article.node:not(.node--type-enregistrement) h2.node-title')
  518. // .add('a', 'article.node--type-evenement.node--view-mode-teaser .field--name-field-page-liee')
  519. .add('a', '.productions-subtree')
  520. .add('a', '.productions-parent')
  521. // .add('a.index-link, a.notice-link', '#block-edlpentreesblock')
  522. .add('a', '.field--name-field-son')
  523. .addClass('ajax-link');
  524. _$ajaxLinks = $('.ajax-link:not(.ajax-enabled)')
  525. .each(function(i,e){
  526. var $this = $(this);
  527. // avoid already ajaxified links
  528. if($this.is('.ajax-enable')) return;
  529. if($this.attr('data-drupal-link-system-path') || $this.is('[type^="audio"]')){
  530. $this.on('click', onClickAjaxLink).addClass('ajax-enable');
  531. }
  532. });
  533. };
  534. function onClickAjaxLink(e){
  535. e.preventDefault();
  536. var $link = $(this);
  537. if($link.is('.is-active'))
  538. return false;
  539. // Audio links
  540. // launch audio player and stop here
  541. if($link.is('.audio-link')){
  542. _audioPlayer
  543. .emmit('stop-shuffle')
  544. .openDocument({
  545. nid:$link.attr('nid'),
  546. audio_url:$link.attr('audio_url'),
  547. title:$link.find('.field--name-title').html()
  548. });
  549. return false;
  550. }
  551. // other sounds playing
  552. if($link.is('[type^="audio"]')){
  553. _audioPlayer
  554. .emmit('stop-shuffle')
  555. .openSound($link.attr('href'), $link.html());
  556. return false;
  557. }
  558. // NOT USED ( YET ? )
  559. // if($link.is('.language-link')){
  560. // TODO: change global site current language
  561. // load all blocks translated (exepted language switcher) ... :/
  562. // refreshAllBlocks();
  563. // TODO: use a promise to initAjaxLinks again after blocks updated
  564. // then let load the content
  565. // }
  566. // other links
  567. var sys_path = $(this).attr('data-drupal-link-system-path');
  568. // front page
  569. // just remove contents and stop here
  570. if(sys_path == '<front>'){
  571. backToFrontPage();
  572. return false;
  573. }
  574. var view_mode = $link.attr('viewmode');
  575. var state = getSysPathState(sys_path, view_mode);
  576. state.url = $(this).attr('href');
  577. if(view_mode){
  578. state.url += "#"+view_mode;
  579. }
  580. if($link.is('[selector]')){
  581. state.selector = $link.attr('selector');
  582. }
  583. $link.addClass('ajax-loading');
  584. // ajaxLoadContent(url, sys_path, state.ajax_path, selector);
  585. ajaxLoadContent(state);
  586. return false;
  587. };
  588. // ___
  589. // / __|___ _ _ _ __ _ _ ___
  590. // | (__/ _ \ '_| '_ \ || (_-<
  591. // \___\___/_| | .__/\_,_/__/
  592. // |_|
  593. function onCorpusMapReady(e){
  594. //console.log('theme : onCorpusReady', e);
  595. _corpus_ready = true;
  596. _$corpus_canvas = $('canvas#corpus-map');
  597. _$corpus_canvas
  598. .on('corpus-cliked-on-map', function(e) {
  599. //console.log('theme : corpus-cliked-on-map');
  600. backToFrontPage();
  601. })
  602. .on('corpus-cliked-on-node', function(e) {
  603. //console.log('theme : corpus-cliked-on-node', e);
  604. _audioPlayer
  605. .emmit('stop-shuffle')
  606. .setAutoOpenArticle(e.article)
  607. .openDocument(e.target_node);
  608. });
  609. _randomPlayer = new RandomPlayer(e.playlist);
  610. _$body.attr('corpus-map', 'ready');
  611. }
  612. function openEntree(tid){
  613. if(tid){
  614. closeAllModals();
  615. _$body.removeClass();//.addClass(body_classes.join(' '));
  616. // open entree
  617. if(_corpus_ready){
  618. _$corpus_canvas.trigger({
  619. type:'open-entree',
  620. tid:tid
  621. });
  622. }else{
  623. // else : EdlpCorpus will check when ready if entry item (notice or index) is already .is-active
  624. $('li.entree[tid="'+tid+'"] a.term-link').addClass('is-active');
  625. }
  626. }
  627. };
  628. function checkVisibleCorpusMapSpace(){
  629. var left_limit = 0, right_limit = 0;
  630. _$row.find('.col').each(function(i,e){
  631. var $col = $(this);
  632. var offset = $col.offset();
  633. switch(true){
  634. case $col.is('.float-right'):
  635. right_limit = Math.max(right_limit, Math.abs(offset.left-window.innerWidth));
  636. break;
  637. default:
  638. left_limit = Math.max(left_limit, offset.left+$col.width());
  639. break;
  640. }
  641. });
  642. console.log('checkVisibleCorpusMapSpace left_limit:'+left_limit+" right_limit:"+right_limit);
  643. if(_corpus_ready){
  644. _$body.trigger({
  645. type:'visible-space-changed',
  646. left_limit:left_limit,
  647. right_limit:right_limit
  648. });
  649. }else{
  650. _corpus_promise.done(function(){
  651. _$body.trigger({
  652. type:'visible-space-changed',
  653. left_limit:left_limit,
  654. right_limit:right_limit
  655. });
  656. });
  657. }
  658. };
  659. // _ _ _
  660. // /_\ _ _ __| (_)___
  661. // / _ \ || / _` | / _ \
  662. // /_/ \_\_,_\__,_|_\___/
  663. //
  664. // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
  665. // https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
  666. // https://www.binarytides.com/using-html5-audio-element-javascript/
  667. function AudioPlayer(){
  668. var that = this;
  669. this.fid;
  670. this.audio = new Audio();
  671. // audio events
  672. this.audio_events = ["loadedmetadata","canplay","playing","pause","timeupdate","ended","error"];
  673. // UI dom objects
  674. this.$container = $('<div id="audio-player">');
  675. // btns
  676. this.$btns = $('<div>').addClass('btns').appendTo(this.$container);
  677. this.$previous = $('<div>').addClass('previous').appendTo(this.$btns);
  678. this.$playpause = $('<div>').addClass('play-pause').appendTo(this.$btns);
  679. this.$next = $('<div>').addClass('next').appendTo(this.$btns);
  680. // timeline
  681. this.$timelinecont= $('<div>').addClass('time-line-container').appendTo(this.$container);
  682. this.$timeline = $('<div>').addClass('time-line').appendTo(this.$timelinecont);
  683. this.$loader = $('<div>').addClass('loader').appendTo(this.$timeline);
  684. this.$cursor = $('<div>').addClass('cursor').appendTo(this.$timeline);
  685. // time
  686. this.$time = $('<div>').addClass('time').appendTo(this.$container);
  687. this.$currentTime = $('<div>').addClass('current-time').html('00:00').appendTo(this.$time);
  688. this.$duration = $('<div>').addClass('duration').html('00:00').appendTo(this.$time);
  689. // favoris
  690. this.$fav = $('<div>').addClass('favoris').appendTo(this.$container);
  691. // cartel
  692. this.$cartel = $('<div>').addClass('cartel').appendTo(this.$container);
  693. // hiding
  694. this.hideTimer = false;
  695. this.hideTimeMS = 10000;
  696. // history
  697. this.currentHistoricIndex = null;
  698. this.historic = [];
  699. this.shuffle_is_active = false;
  700. // artciles
  701. this.auto_open_article = false;
  702. // object events
  703. this.event_handlers = {
  704. 'audio-open-document':[],
  705. 'audio-play':[],
  706. 'audio-pause':[],
  707. 'audio-play-next':[],
  708. 'audio-ended':[],
  709. 'stop-shuffle':[]
  710. };
  711. this.init();
  712. };
  713. AudioPlayer.prototype = {
  714. init(){
  715. this.$container_parent = $('header[role="banner"] .region-header');
  716. // append ui to document
  717. this.$container.appendTo(this.$container_parent);
  718. // record timeline width
  719. this.timeline_w = parseInt(this.$timeline.width());
  720. // init audio events
  721. var fn = '';
  722. for (var i = 0; i < this.audio_events.length; i++) {
  723. fn = this.audio_events[i];
  724. // capitalize first letter of event (only cosmetic :p )
  725. fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
  726. this.audio.addEventListener(
  727. this.audio_events[i],
  728. this[fn].bind(this),
  729. true);
  730. }
  731. // init btns events
  732. this.$previous.on('click', this.playPrevious.bind(this));
  733. this.$playpause.on('click', this.togglePlayPause.bind(this));
  734. this.$next.on('click', this.playNext.bind(this));
  735. },
  736. openDocument(node, caller, historic_index){
  737. // console.log('AudioPlayer openDocument', node);
  738. if(typeof node == 'undefined'
  739. || typeof node.nid == 'undefined'
  740. || typeof node.audio_url == 'undfined'
  741. || typeof node.document_url == 'undfined'){
  742. console.warn('AudioPlayer openDocument() node is malformed', node);
  743. return false;
  744. }
  745. // if we don't come from history popstate
  746. if(typeof caller == 'undefined' || caller != 'popstate'){
  747. this.historic.push(node);
  748. this.currentHistoricIndex = this.historic.length-1;
  749. // this.shuffle_mode = shuffle_mode || false;
  750. // add the document opening to history to be able to share and play audio from any where
  751. if(caller != "history_first_load"){
  752. var state = {
  753. audio:true,
  754. node:{
  755. nid:node.nid,
  756. audio_url:node.audio_url,
  757. document_url:node.document_url,
  758. title:node.title || null,
  759. },
  760. historic_index : this.currentHistoricIndex,
  761. };
  762. history.pushState(state, null, node.document_url);
  763. }
  764. }else{
  765. // if the call commes from popstate, we update the current position of index
  766. this.currentHistoricIndex = historic_index;
  767. }
  768. this.emmit('audio-open-document', {caller:caller});
  769. // piwik
  770. // debugger;
  771. if(typeof _paq !== 'undefined'){
  772. // page tracking
  773. // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
  774. // _paq.push(['setCustomUrl', state.url]);
  775. // _paq.push(['setDocumentTitle', data.title]);
  776. // _paq.push(['trackPageView']);
  777. // js event
  778. // trackEvent(category, action, [name], [value])
  779. if(typeof node.title != 'undefined'){
  780. _paq.push(['trackEvent', 'Audio', 'play', node.title]);
  781. }
  782. }
  783. this.launch();
  784. },
  785. launch(){
  786. this.clearTimeOutToHide();
  787. this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
  788. this.loadNode(this.historic[this.currentHistoricIndex].nid);
  789. // emmit new playing doc (e.g.: corpus map nowing that audio played from RandomPlayer)
  790. try {
  791. _$corpus_canvas.trigger({
  792. 'type':'audio-node-opened',
  793. 'nid':this.historic[this.currentHistoricIndex].nid
  794. });
  795. } catch (e) {
  796. console.info('AudioPlayer : _$corpus_canvas does not exists');
  797. }
  798. this.showHidePreviousBtn();
  799. this.showHideNextBtn();
  800. this.show();
  801. },
  802. openSound(url, title){
  803. this.hide();
  804. this.clearTimeOutToHide();
  805. this.$cartel.html("");
  806. this.setSRC(url);
  807. this.show();
  808. if(typeof _paq !== 'undefined'){
  809. _paq.push(['trackEvent', 'Audio', 'play', url]);
  810. }
  811. },
  812. // audio functions
  813. setSRC(url){
  814. console.log('AudioPlayer setSRC : url', url);
  815. this.audio.src = url;
  816. },
  817. onLoadedmetadata(){
  818. var rem = parseInt(this.audio.duration, 10),
  819. mins = Math.floor(rem/60,10),
  820. secs = rem - mins*60;
  821. this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
  822. this.updateLoadingBar();
  823. },
  824. updateLoadingBar(){
  825. // if (this.audio.readyState === 4){
  826. if(this.audio.buffered.length>0){
  827. this.$loader.css({
  828. 'width':parseInt((100 * this.audio.buffered.end(0) / this.audio.duration), 10)+'%'
  829. });
  830. if( this.audio.buffered.end(0) < this.audio.duration ){
  831. // loop through this function until file is fully loaded
  832. var that = this;
  833. window.requestAnimationFrame(that.updateLoadingBar.bind(that));
  834. }else{
  835. //console.log('Audio fully loaded');
  836. }
  837. }
  838. },
  839. onCanplay(){
  840. this.play();
  841. },
  842. onError(){
  843. console.warn("Audio Error " + this.audio.error.code + "; details: " + this.audio.error.message);
  844. },
  845. play(){
  846. this.clearTimeOutToHide();
  847. this.audio.play();
  848. },
  849. playPrevious(){
  850. if(this.currentHistoricIndex > 0){
  851. this.currentHistoricIndex -= 1;
  852. this.launch();
  853. }
  854. },
  855. playNext(){
  856. if(this.currentHistoricIndex < this.historic.length-1){
  857. this.currentHistoricIndex += 1;
  858. this.launch();
  859. }else{
  860. this.emmit('audio-play-next');
  861. }
  862. },
  863. togglePlayPause(e){
  864. if(this.audio.paused){
  865. this.audio.play();
  866. }else{
  867. this.audio.pause();
  868. }
  869. },
  870. stop(){
  871. // console.log('AudioPlayer stop()');
  872. // debugger;
  873. this.audio.pause();
  874. // don't close player if article or transcript is open
  875. if(!(_$body.is('.path-node-'+this.historic[this.currentHistoricIndex].nid)
  876. && (_$body.is('.view-mode-article') || _$body.is('.view-mode-transcript')))){
  877. this.timeOutToHide();
  878. }
  879. },
  880. // audio events
  881. onPlaying(){
  882. this.$btns.addClass('is-playing');
  883. this.emmit('audio-play');
  884. },
  885. onPause(){
  886. this.$btns.removeClass('is-playing');
  887. this.emmit('audio-pause');
  888. },
  889. onTimeupdate(){
  890. // move cursor
  891. this.$cursor.css({
  892. 'left':(this.audio.currentTime/this.audio.duration * this.timeline_w)+"px"
  893. });
  894. // update time text display
  895. var rem = parseInt(this.audio.currentTime, 10),
  896. mins = Math.floor(rem/60,10),
  897. secs = rem - mins*60;
  898. this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
  899. },
  900. onEnded(){
  901. console.log('AudioPlayer onEnded()');
  902. this.emmit('audio-ended');
  903. this.stop();
  904. },
  905. // cartel functions
  906. loadNode(nid){
  907. this.$cartel.addClass('loading');
  908. var vm = 'player_cartel';
  909. var ajax_path = _ajax_settings.entityjson_path+'/node/'+nid+'/'+vm;
  910. var path = window.location.origin + Drupal.url(ajax_path);
  911. $.getJSON(path, {})
  912. .done(this.onNodeLoaded.bind(this))
  913. .fail(this.onNodeLoadFail.bind(this));
  914. },
  915. onNodeLoaded(data){
  916. // console.log('AudioPlayer node loaded');
  917. this.$cartel.html(data.rendered).removeClass('loading');
  918. _$body.trigger({'type':'new-audio-cartel-loaded'});
  919. initAjaxLinks();
  920. if(this.auto_open_article){
  921. this.$cartel.find('a.link-article').trigger('click');
  922. this.auto_open_article = false;
  923. }
  924. },
  925. onNodeLoadFail(jqxhr, textStatus, error){
  926. console.warn('AudioPlayer node load failed', jqxhr.responseText);
  927. this.$cartel.removeClass('loading').html('');
  928. },
  929. setAutoOpenArticle(art){
  930. this.auto_open_article = art;
  931. return this;
  932. },
  933. // global
  934. show(){
  935. this.$container_parent.addClass('audio-player-visible');
  936. this.$container.addClass('visible');
  937. },
  938. showHidePreviousBtn(){
  939. if(this.historic.length > 1 && this.currentHistoricIndex > 0){
  940. this.$previous.addClass('is-active');
  941. }else{
  942. this.$previous.removeClass('is-active');
  943. }
  944. },
  945. showHideNextBtn(){
  946. if(this.currentHistoricIndex < this.historic.length-1 || this.shuffle_is_active){
  947. this.$next.addClass('is-active');
  948. }else{
  949. this.$next.removeClass('is-active');
  950. }
  951. },
  952. timeOutToHide(){
  953. // console.log('AudioPlayer timeOutToHide()');
  954. this.clearTimeOutToHide();
  955. this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
  956. },
  957. clearTimeOutToHide(){
  958. // console.log('AudioPlayer clearTimeOutToHide()',this.hideTimer);
  959. if(this.hideTimer){
  960. clearTimeout(this.hideTimer);
  961. this.hideTimer = false;
  962. }
  963. },
  964. hide(){
  965. // console.log('AudioPlayer hide()');
  966. this.$container_parent.removeClass('audio-player-visible');
  967. this.$container.removeClass('visible');
  968. // trigger highlighted node remove on corpus map
  969. try {
  970. _$corpus_canvas.trigger('audio-node-closed');
  971. } catch (e) {
  972. console.info('AudioPlayer hide() : _$corpus_canvas does not exists');
  973. }
  974. },
  975. // object events
  976. on(event_name, handler){
  977. if(typeof this.event_handlers[event_name] == 'undefined'){
  978. console.warn('AudioPlayer : event '+event_name+' does not exists');
  979. }
  980. this.event_handlers[event_name].push(handler);
  981. return this;
  982. },
  983. emmit(event_name, args){
  984. // console.log('AudioPlayer emmit() event_name', event_name);
  985. // console.log('AudioPlayer emmit() handlers', this.event_handlers[event_name]);
  986. var handler;
  987. var args = args || {};
  988. for (var i = this.event_handlers[event_name].length-1; i >= 0 ; i--) {
  989. handler = this.event_handlers[event_name][i];
  990. // console.log('AudioPlayer emmit() loop handler', handler);
  991. setTimeout(function(){
  992. // console.log('AudioPlayer emmit() timeout handler', handler);
  993. handler(args);
  994. }, 0);
  995. }
  996. return this;
  997. },
  998. }
  999. // ___ _ ___ _
  1000. // | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _ ___ _ _
  1001. // | / _` | ' \/ _` / _ \ ' \| _/ / _` | || / -_) '_|
  1002. // |_|_\__,_|_||_\__,_\___/_|_|_|_| |_\__,_|\_, \___|_|
  1003. // |__/
  1004. function RandomPlayer(playlist){
  1005. this.active = false;
  1006. this.playlist = playlist;
  1007. this.$btn = $('<a>').html('Shuffle').addClass('random-player-btn');
  1008. this.init();
  1009. };
  1010. RandomPlayer.prototype = {
  1011. init(){
  1012. // this.shuffle();
  1013. $('<div>')
  1014. .addClass('block random-player')
  1015. .append(this.$btn)
  1016. // .insertAfter('#block-userlogin, #block-studiolinkblock');
  1017. .prependTo('.region-footer-right');
  1018. // events
  1019. this.$btn.on('click', this.toggleActive.bind(this));
  1020. // attach an event on AudioPlayer
  1021. _audioPlayer
  1022. .on('audio-ended', this.onAudioPlayerEnded.bind(this))
  1023. .on('audio-play-next', this.onAudioPlayNext.bind(this))
  1024. .on('stop-shuffle', this.stop.bind(this));
  1025. _$corpus_canvas
  1026. .on('update-random-playlist', this.updatePlaylist.bind(this));
  1027. },
  1028. updatePlaylist(e){
  1029. // debugger;
  1030. this.playlist = e.playlist;
  1031. this.shuffle();
  1032. },
  1033. shuffle(){
  1034. var tempPLaylist = [];
  1035. for (var i = this.playlist.length-1; i >= 0 ; i--) {
  1036. tempPLaylist.push(this.playlist[i]);
  1037. }
  1038. this.shuffledPlaylist = [];
  1039. while(tempPLaylist.length > 0){
  1040. var r = Math.floor(Math.random() * tempPLaylist.length);
  1041. this.shuffledPlaylist.push(tempPLaylist.splice(r,1)[0]);
  1042. }
  1043. //console.log('RandomPlayer, this.shuffledPlaylist', this.shuffledPlaylist);
  1044. },
  1045. toggleActive(e){
  1046. if (this.active) {
  1047. this.stop();
  1048. }else{
  1049. this.start();
  1050. }
  1051. },
  1052. start(){
  1053. this.active = _audioPlayer.shuffle_is_active = true;
  1054. this.$btn.addClass('is-active');
  1055. this.shuffle();
  1056. this.next();
  1057. // piwik
  1058. if(typeof _paq !== 'undefined'){
  1059. // trackEvent(category, action, [name], [value])
  1060. _paq.push(['trackEvent', 'RandomPlayer', 'start']);
  1061. }
  1062. },
  1063. stop(){
  1064. this.active = _audioPlayer.shuffle_is_active = false;
  1065. this.$btn.removeClass('is-active');
  1066. // stop audio player
  1067. // _audioPlayer.stop();
  1068. if(typeof _paq !== 'undefined'){
  1069. // trackEvent(category, action, [name], [value])
  1070. _paq.push(['trackEvent', 'RandomPlayer', 'stop']);
  1071. }
  1072. },
  1073. next(){
  1074. if(this.active && this.shuffledPlaylist.length > 0)
  1075. _audioPlayer.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
  1076. },
  1077. onAudioPlayNext(){
  1078. //console.log('RandomPlayer : onAudioPlayNext()');
  1079. this.next();
  1080. },
  1081. onAudioPlayerEnded(){
  1082. //console.log('RandomPlayer : onAudioPlayerEnded()');
  1083. this.next();
  1084. }
  1085. };
  1086. // ___ ___ _
  1087. // / __|___ _ __ _ __ ___| _ \ |__ _ _ _ ___ _ _
  1088. // | (__/ _ \ ' \| '_ \/ _ \ _/ / _` | || / -_) '_|
  1089. // \___\___/_|_|_| .__/\___/_| |_\__,_|\_, \___|_|
  1090. // |_| |__/
  1091. function CompoPlayer(){
  1092. this.active = false;
  1093. this.playing = false;
  1094. this.paused = false;
  1095. this.playlist = [];
  1096. this.current_index = 0;
  1097. this.$composer = null;
  1098. this.$compo = null;
  1099. this.$controls = null;
  1100. this.init();
  1101. };
  1102. CompoPlayer.prototype = {
  1103. init(){
  1104. // console.log('CompoPlayer init()');
  1105. // attach an event on AudioPlayer
  1106. _audioPlayer
  1107. .on('audio-open-document', this.onAudioOpenDocument.bind(this))
  1108. .on('audio-play', this.onAudioPlayerPlay.bind(this))
  1109. .on('audio-pause', this.onAudioPlayerPause.bind(this))
  1110. .on('audio-ended', this.onAudioPlayerEnded.bind(this));
  1111. // .on('audio-play-next', this.onAudioPlayNext.bind(this));
  1112. // this.newCompo();
  1113. },
  1114. newCompo(){
  1115. //console.log('CompoPlayer newCompo()');
  1116. // this.$compo = $('.composition_ui .composer .composition');
  1117. this.initControls();
  1118. },
  1119. initControls(){
  1120. //console.log('CompoPlayer initControls()');
  1121. this.$composer = $('.composition_ui .composer');
  1122. this.$compo = $('.composition_ui .composer .composition');
  1123. this.$controls = $('.composition_ui .composer .compo-player-controls');
  1124. if(!this.$controls.is('.ready') && this.$compo){
  1125. this.$previous = $('<div>').addClass('previous')
  1126. .on('click', this.prev.bind(this))
  1127. .appendTo(this.$controls);
  1128. this.$playpause = $('<div>').addClass('play-pause')
  1129. .on('click', this.togglePlayPause.bind(this))
  1130. .appendTo(this.$controls);
  1131. this.$next = $('<div>').addClass('next')
  1132. .on('click', this.next.bind(this))
  1133. .appendTo(this.$controls);
  1134. this.$controls.addClass('ready');
  1135. this.refresh();
  1136. this.active = true;
  1137. // this.newCompo();
  1138. }
  1139. },
  1140. refresh(){
  1141. // console.log('CompoPlayer refresh(), this', this);
  1142. this.stop();
  1143. // load new playlist
  1144. this.playlist = [];
  1145. var that = this;
  1146. $('.field--name-documents .field__item',this.$compo).each(function(i,el){
  1147. var $link = $('a.audio-link',this);
  1148. that.playlist.push({
  1149. item:$(this),
  1150. audio_url:$link.attr("audio_url"),
  1151. nid:$link.attr("nid"),
  1152. });
  1153. });
  1154. this.showHideControls();
  1155. },
  1156. togglePlayPause(){
  1157. // console.log('CompoPlayer togglePlayPause');
  1158. if (this.playing && !this.paused) {
  1159. this.pause();
  1160. }else{
  1161. if(this.playing && this.paused){
  1162. this.play();
  1163. }else{
  1164. this.start();
  1165. }
  1166. }
  1167. },
  1168. start(){
  1169. //console.log('start');
  1170. // console.log('CompoPlayer start()');
  1171. this.playing = true;
  1172. this.play();
  1173. },
  1174. play(){
  1175. // console.log('play');
  1176. if(this.paused){
  1177. this.paused = false;
  1178. _audioPlayer.play();
  1179. }else{
  1180. _audioPlayer.openDocument(this.playlist[this.current_index], this);
  1181. }
  1182. this.setActiveItem().showHideControls();
  1183. },
  1184. pause(){
  1185. //console.log('pause');
  1186. this.paused = true;
  1187. this.showHideControls();
  1188. _audioPlayer.stop();
  1189. },
  1190. next(){
  1191. // console.log('CompoPlayer next()');
  1192. if(this.playing){
  1193. this.current_index += 1;
  1194. if(this.current_index < this.playlist.length){
  1195. this.play();
  1196. }else{
  1197. this.stop();
  1198. }
  1199. }
  1200. },
  1201. prev(){
  1202. // console.log('CompoPlayer prev()');
  1203. if(this.playing){
  1204. this.current_index -= 1;
  1205. if(this.current_index >= 0){
  1206. this.play();
  1207. }else{
  1208. this.stop();
  1209. }
  1210. }
  1211. },
  1212. stop(){
  1213. if(this.playing){
  1214. _audioPlayer.stop();
  1215. }
  1216. this.reset();
  1217. },
  1218. reset(){
  1219. this.playing = false;
  1220. this.paused = false;
  1221. this.resetIndex();
  1222. },
  1223. resetIndex(){
  1224. this.current_index = 0;
  1225. this.showHideControls().resetActiveItems();
  1226. },
  1227. setActiveItem(){
  1228. this.resetActiveItems();
  1229. if(this.playing && this.current_index >= 0){
  1230. this.playlist[this.current_index].item.addClass('is-active');
  1231. }
  1232. // this call shoud not be here
  1233. this.showHideControls();
  1234. return this;
  1235. },
  1236. resetActiveItems(){
  1237. for (var n = 0; n < this.playlist.length; n++) {
  1238. // console.log('node',node);
  1239. this.playlist[n].item.removeClass('is-active');
  1240. }
  1241. return this;
  1242. },
  1243. showHideControls(){
  1244. // console.log('CompoPlayer showHideNextBtn(), playing:'+this.playing+', paused:'+this.paused);
  1245. // global playing
  1246. if(this.$controls){
  1247. if(this.playing && !this.paused){
  1248. this.$controls.addClass('is-playing');
  1249. }else{
  1250. this.$controls.removeClass('is-playing');
  1251. }
  1252. }
  1253. // playpause
  1254. if(this.$playpause){
  1255. if(this.playlist.length > 0){
  1256. this.$playpause.addClass('is-active');
  1257. }else{
  1258. this.$playpause.removeClass('is-active');
  1259. }
  1260. }
  1261. // next
  1262. if(this.$next){
  1263. if(this.playing && this.playlist.length > 1 && this.current_index < this.playlist.length -1){
  1264. this.$next.addClass('is-active');
  1265. }else{
  1266. this.$next.removeClass('is-active');
  1267. }
  1268. }
  1269. // previous
  1270. if(this.$previous){
  1271. if(this.playing && this.playlist.length > 1 && this.current_index > 0){
  1272. this.$previous.addClass('is-active');
  1273. }else{
  1274. this.$previous.removeClass('is-active');
  1275. }
  1276. }
  1277. return this;
  1278. },
  1279. deactivate(){
  1280. this.stop();
  1281. this.active = false;
  1282. },
  1283. // _audioPlayer events
  1284. onAudioOpenDocument(args){
  1285. if(args.caller !== this){
  1286. // console.log('CompoPlayer onAudioOpenDocument() called by other');
  1287. this.reset();
  1288. }
  1289. // else{
  1290. // // console.log('CompoPlayer onAudioOpenDocument() self calling');
  1291. // }
  1292. },
  1293. onAudioPlayerPlay(){
  1294. if(this.playing && this.paused){
  1295. this.paused = false;
  1296. this.showHideControls();
  1297. }
  1298. },
  1299. onAudioPlayerPause(){
  1300. if(this.playing && !this.paused){
  1301. this.paused = true;
  1302. this.showHideControls();
  1303. }
  1304. },
  1305. onAudioPlayerEnded(){
  1306. this.next();
  1307. },
  1308. // onAudioPlayNext(){
  1309. // this.next();
  1310. // }
  1311. };
  1312. // ___ _ _ _
  1313. // | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
  1314. // | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
  1315. // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
  1316. function initProductions(){
  1317. console.log('theme : initProductions');
  1318. _$row.find('.col').addClass('offfield');
  1319. var $grid = $('.grid',_$row).masonry({
  1320. itemSelector:'.col',
  1321. columnWidth:'.col-2',
  1322. horizontalOrder: true,
  1323. containerStyle: null,
  1324. transitionDuration:0,//'0.2s',
  1325. // stagger:30,
  1326. // disable initial layout
  1327. // initLayout: false,
  1328. });
  1329. // bind event
  1330. // $grid.masonry( 'on', 'layoutComplete', function() {
  1331. // console.log('layout is complete');
  1332. // });
  1333. // layout Masonry after each image loads
  1334. $grid.imagesLoaded().progress( function() {
  1335. $grid.masonry('layout');
  1336. });
  1337. $grid.imagesLoaded(function(){
  1338. $grid.masonry('layout');
  1339. // checkProductionBlockVisible();
  1340. });
  1341. $grid.on('layoutComplete', checkProductionBlockVisible);
  1342. };
  1343. function checkProductionBlockVisible(e,items){
  1344. console.log('checkProductionBlockVisible', e, items);
  1345. for (var i in items) {
  1346. if(!items[i].isTransitioning){
  1347. if(items[i].position.y+items[i].size.outerHeight < _$row.height()){
  1348. $(items[i].element).removeClass('offfield');
  1349. }else{
  1350. $(items[i].element).addClass('offfield');
  1351. }
  1352. }
  1353. }
  1354. }
  1355. // ___ _ _ _
  1356. // | __|_ _ _ _ ___ __ _(_)__| |_ _ _ ___ _ __ ___ _ _| |_
  1357. // | _|| ' \| '_/ -_) _` | (_-< _| '_/ -_) ' \/ -_) ' \ _|
  1358. // |___|_||_|_| \___\__, |_/__/\__|_| \___|_|_|_\___|_||_\__|
  1359. // |___/
  1360. function initEnregistrementTranscript(){
  1361. console.log('initEnregistrementTranscript');
  1362. var $node = _$row.find('article.node--type-enregistrement.node--view-mode-transcript');
  1363. var $nav = $('<nav>').prependTo($node);
  1364. $node.find('.field--name-field-transcript-vo').addClass('visible').find('.field__label')
  1365. .clone().appendTo($nav).addClass('is-active')
  1366. .attr('field_target', '.field--name-field-transcript-vo');
  1367. $node.find('.field--name-field-transcript-trad').find('.field__label')
  1368. .clone().appendTo($nav)
  1369. .attr('field_target', '.field--name-field-transcript-trad');
  1370. $nav.find('.field__label').on('click', function(){
  1371. var $this = $(this).addClass('is-active');
  1372. $this.siblings('.is-active').removeClass('is-active');
  1373. $this.parents('article.node').find('.field.visible').removeClass('visible');
  1374. $this.parents('article.node').find($this.attr('field_target')).addClass('visible');
  1375. });
  1376. };
  1377. // ___ _ ___
  1378. // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
  1379. // | _| '_/ _ \ ' \ _| _/ _` / _` / -_)
  1380. // |_||_| \___/_||_\__|_| \__,_\__, \___|
  1381. // |___/
  1382. function backToFrontPage(pop_state){
  1383. console.log('backToFrontPage', pop_state);
  1384. closeAllModals();
  1385. // assume we are going back to front page
  1386. $('body').removeClass().addClass('path-frontpage');
  1387. $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
  1388. // close entrees
  1389. _$corpus_canvas.trigger({'type':'close-all-entree'});
  1390. _$corpus_canvas.trigger({'type':'scramble-collection'});
  1391. if(typeof pop_state == "undefined" || !pop_state){
  1392. console.log('backToFrontPage push state');
  1393. history.pushState({home:true}, null, drupalSettings.path.baseUrl+drupalSettings.path.currentLanguage);
  1394. }
  1395. }
  1396. function initHome(){
  1397. addCloseModalBtnToCols();
  1398. // console.log('theme : initHome');
  1399. // console.log('theme : initProductions');
  1400. var $grid = $('.grid',_$row).masonry({
  1401. itemSelector:'.col',
  1402. columnWidth:'.col-2',
  1403. horizontalOrder: true,
  1404. containerStyle: null,
  1405. // disable initial layout
  1406. // initLayout: false,
  1407. });
  1408. // bind event
  1409. // $grid.masonry( 'on', 'layoutComplete', function() {
  1410. // console.log('layout is complete');
  1411. // });
  1412. // layout Masonry after each image loads
  1413. $grid.imagesLoaded().progress( function() {
  1414. $grid.masonry('layout');
  1415. });
  1416. $grid.imagesLoaded(function(){
  1417. $grid.masonry('layout');
  1418. });
  1419. }
  1420. // __ __ _ _
  1421. // | \/ |___ __| |__ _| |___
  1422. // | |\/| / _ \/ _` / _` | (_-<
  1423. // |_| |_\___/\__,_\__,_|_/__/
  1424. function closeAllModals(){
  1425. //console.log('theme : closeAllModals');
  1426. // TODO: animate the remove
  1427. _$row.html('');
  1428. _$ajaxLinks.removeClass('is-active');
  1429. _$body.trigger({'type':'all-modal-closed'});
  1430. // checkRowEmpty();
  1431. };
  1432. function checkRowEmpty(){
  1433. // if row is empty and we are not in productions or entree notice|index call closeAllModals()
  1434. if(!$('.col', _$row).length){
  1435. if(!_$body.is('.entity-type-taxonomy_term.bundle-entrees')){
  1436. if(!_$body.is('.entity-type-node.bundle-page')){
  1437. // we weren't on production or entree, so go back to front page
  1438. backToFrontPage();
  1439. }else{
  1440. // if we were on production page just scramble collection in case of map was filtered
  1441. _$corpus_canvas.trigger({'type':'scramble-collection'});
  1442. }
  1443. }else{
  1444. // remove is-active class from index or notice entree links
  1445. $('.entree-content a.is-active').removeClass('is-active');
  1446. // TODO: remove the hash index or notice
  1447. }
  1448. }
  1449. };
  1450. init();
  1451. } // end EdlpTheme()
  1452. $(document).ready(function($) {
  1453. if(drupalSettings.path.isFront){
  1454. var edlptheme = new EdlpTheme();
  1455. }else{
  1456. $('body').attr('booted', 'booted');
  1457. }
  1458. });
  1459. })(jQuery, Drupal, drupalSettings);