main.js 52 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557
  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', '.productions-subtree')
  519. .add('a', '.productions-parent')
  520. // .add('a.index-link, a.notice-link', '#block-edlpentreesblock')
  521. .addClass('ajax-link');
  522. _$ajaxLinks = $('.ajax-link:not(.ajax-enabled)')
  523. .each(function(i,e){
  524. var $this = $(this);
  525. // avoid already ajaxified links
  526. if($this.is('.ajax-enable')) return;
  527. if($this.attr('data-drupal-link-system-path')){
  528. $this.on('click', onClickAjaxLink).addClass('ajax-enable');
  529. }
  530. });
  531. };
  532. function onClickAjaxLink(e){
  533. e.preventDefault();
  534. var $link = $(this);
  535. if($link.is('.is-active'))
  536. return false;
  537. // Audio links
  538. // launch audio player and stop here
  539. if($link.is('.audio-link')){
  540. _audioPlayer
  541. .emmit('stop-shuffle')
  542. .openDocument({
  543. nid:$link.attr('nid'),
  544. audio_url:$link.attr('audio_url'),
  545. title:$link.find('.field--name-title').html()
  546. });
  547. return false;
  548. }
  549. // NOT USED ( YET ? )
  550. // if($link.is('.language-link')){
  551. // TODO: change global site current language
  552. // load all blocks translated (exepted language switcher) ... :/
  553. // refreshAllBlocks();
  554. // TODO: use a promise to initAjaxLinks again after blocks updated
  555. // then let load the content
  556. // }
  557. // other links
  558. var sys_path = $(this).attr('data-drupal-link-system-path');
  559. // front page
  560. // just remove contents and stop here
  561. if(sys_path == '<front>'){
  562. backToFrontPage();
  563. return false;
  564. }
  565. var view_mode = $link.attr('viewmode');
  566. var state = getSysPathState(sys_path, view_mode);
  567. state.url = $(this).attr('href');
  568. if(view_mode){
  569. state.url += "#"+view_mode;
  570. }
  571. if($link.is('[selector]')){
  572. state.selector = $link.attr('selector');
  573. }
  574. $link.addClass('ajax-loading');
  575. // ajaxLoadContent(url, sys_path, state.ajax_path, selector);
  576. ajaxLoadContent(state);
  577. return false;
  578. };
  579. // ___
  580. // / __|___ _ _ _ __ _ _ ___
  581. // | (__/ _ \ '_| '_ \ || (_-<
  582. // \___\___/_| | .__/\_,_/__/
  583. // |_|
  584. function onCorpusMapReady(e){
  585. //console.log('theme : onCorpusReady', e);
  586. _corpus_ready = true;
  587. _$corpus_canvas = $('canvas#corpus-map');
  588. _$corpus_canvas
  589. .on('corpus-cliked-on-map', function(e) {
  590. //console.log('theme : corpus-cliked-on-map');
  591. backToFrontPage();
  592. })
  593. .on('corpus-cliked-on-node', function(e) {
  594. //console.log('theme : corpus-cliked-on-node', e);
  595. _audioPlayer
  596. .emmit('stop-shuffle')
  597. .setAutoOpenArticle(e.article)
  598. .openDocument(e.target_node);
  599. });
  600. _randomPlayer = new RandomPlayer(e.playlist);
  601. _$body.attr('corpus-map', 'ready');
  602. }
  603. function openEntree(tid){
  604. if(tid){
  605. closeAllModals();
  606. _$body.removeClass();//.addClass(body_classes.join(' '));
  607. // open entree
  608. if(_corpus_ready){
  609. _$corpus_canvas.trigger({
  610. type:'open-entree',
  611. tid:tid
  612. });
  613. }else{
  614. // else : EdlpCorpus will check when ready if entry item (notice or index) is already .is-active
  615. $('li.entree[tid="'+tid+'"] a.term-link').addClass('is-active');
  616. }
  617. }
  618. };
  619. function checkVisibleCorpusMapSpace(){
  620. var left_limit = 0, right_limit = 0;
  621. _$row.find('.col').each(function(i,e){
  622. var $col = $(this);
  623. var offset = $col.offset();
  624. switch(true){
  625. case $col.is('.float-right'):
  626. right_limit = Math.max(right_limit, Math.abs(offset.left-window.innerWidth));
  627. break;
  628. default:
  629. left_limit = Math.max(left_limit, offset.left+$col.width());
  630. break;
  631. }
  632. });
  633. console.log('checkVisibleCorpusMapSpace left_limit:'+left_limit+" right_limit:"+right_limit);
  634. if(_corpus_ready){
  635. _$body.trigger({
  636. type:'visible-space-changed',
  637. left_limit:left_limit,
  638. right_limit:right_limit
  639. });
  640. }else{
  641. _corpus_promise.done(function(){
  642. _$body.trigger({
  643. type:'visible-space-changed',
  644. left_limit:left_limit,
  645. right_limit:right_limit
  646. });
  647. });
  648. }
  649. };
  650. // _ _ _
  651. // /_\ _ _ __| (_)___
  652. // / _ \ || / _` | / _ \
  653. // /_/ \_\_,_\__,_|_\___/
  654. //
  655. // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
  656. // https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
  657. // https://www.binarytides.com/using-html5-audio-element-javascript/
  658. function AudioPlayer(){
  659. var that = this;
  660. this.fid;
  661. this.audio = new Audio();
  662. // audio events
  663. this.audio_events = ["loadedmetadata","canplay","playing","pause","timeupdate","ended","error"];
  664. // UI dom objects
  665. this.$container = $('<div id="audio-player">');
  666. // btns
  667. this.$btns = $('<div>').addClass('btns').appendTo(this.$container);
  668. this.$previous = $('<div>').addClass('previous').appendTo(this.$btns);
  669. this.$playpause = $('<div>').addClass('play-pause').appendTo(this.$btns);
  670. this.$next = $('<div>').addClass('next').appendTo(this.$btns);
  671. // timeline
  672. this.$timelinecont= $('<div>').addClass('time-line-container').appendTo(this.$container);
  673. this.$timeline = $('<div>').addClass('time-line').appendTo(this.$timelinecont);
  674. this.$loader = $('<div>').addClass('loader').appendTo(this.$timeline);
  675. this.$cursor = $('<div>').addClass('cursor').appendTo(this.$timeline);
  676. // time
  677. this.$time = $('<div>').addClass('time').appendTo(this.$container);
  678. this.$currentTime = $('<div>').addClass('current-time').html('00:00').appendTo(this.$time);
  679. this.$duration = $('<div>').addClass('duration').html('00:00').appendTo(this.$time);
  680. // favoris
  681. this.$fav = $('<div>').addClass('favoris').appendTo(this.$container);
  682. // cartel
  683. this.$cartel = $('<div>').addClass('cartel').appendTo(this.$container);
  684. // hiding
  685. this.hideTimer = false;
  686. this.hideTimeMS = 10000;
  687. // history
  688. this.currentHistoricIndex = null;
  689. this.historic = [];
  690. this.shuffle_is_active = false;
  691. // artciles
  692. this.auto_open_article = false;
  693. // object events
  694. this.event_handlers = {
  695. 'audio-open-document':[],
  696. 'audio-play':[],
  697. 'audio-pause':[],
  698. 'audio-play-next':[],
  699. 'audio-ended':[],
  700. 'stop-shuffle':[]
  701. };
  702. this.init();
  703. };
  704. AudioPlayer.prototype = {
  705. init(){
  706. this.$container_parent = $('header[role="banner"] .region-header');
  707. // append ui to document
  708. this.$container.appendTo(this.$container_parent);
  709. // record timeline width
  710. this.timeline_w = parseInt(this.$timeline.width());
  711. // init audio events
  712. var fn = '';
  713. for (var i = 0; i < this.audio_events.length; i++) {
  714. fn = this.audio_events[i];
  715. // capitalize first letter of event (only cosmetic :p )
  716. fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
  717. this.audio.addEventListener(
  718. this.audio_events[i],
  719. this[fn].bind(this),
  720. true);
  721. }
  722. // init btns events
  723. this.$previous.on('click', this.playPrevious.bind(this));
  724. this.$playpause.on('click', this.togglePlayPause.bind(this));
  725. this.$next.on('click', this.playNext.bind(this));
  726. },
  727. openDocument(node, caller, historic_index){
  728. // console.log('AudioPlayer openDocument', node);
  729. if(typeof node == 'undefined'
  730. || typeof node.nid == 'undefined'
  731. || typeof node.audio_url == 'undfined'
  732. || typeof node.document_url == 'undfined'){
  733. console.warn('AudioPlayer openDocument() node is malformed', node);
  734. return false;
  735. }
  736. // if we don't come from history popstate
  737. if(typeof caller == 'undefined' || caller != 'popstate'){
  738. this.historic.push(node);
  739. this.currentHistoricIndex = this.historic.length-1;
  740. // this.shuffle_mode = shuffle_mode || false;
  741. // add the document opening to history to be able to share and play audio from any where
  742. if(caller != "history_first_load"){
  743. var state = {
  744. audio:true,
  745. node:{
  746. nid:node.nid,
  747. audio_url:node.audio_url,
  748. document_url:node.document_url,
  749. title:node.title || null,
  750. },
  751. historic_index : this.currentHistoricIndex,
  752. };
  753. history.pushState(state, null, node.document_url);
  754. }
  755. }else{
  756. // if the call commes from popstate, we update the current position of index
  757. this.currentHistoricIndex = historic_index;
  758. }
  759. this.emmit('audio-open-document', {caller:caller});
  760. // piwik
  761. // debugger;
  762. if(typeof _paq !== 'undefined'){
  763. // page tracking
  764. // https://matomo.org/blog/2017/02/how-to-track-single-page-websites-using-piwik-analytics/
  765. // _paq.push(['setCustomUrl', state.url]);
  766. // _paq.push(['setDocumentTitle', data.title]);
  767. // _paq.push(['trackPageView']);
  768. // js event
  769. // trackEvent(category, action, [name], [value])
  770. if(typeof node.title != 'undefined'){
  771. _paq.push(['trackEvent', 'Audio', 'play', node.title]);
  772. }
  773. }
  774. this.launch();
  775. },
  776. launch(){
  777. this.clearTimeOutToHide();
  778. this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
  779. this.loadNode(this.historic[this.currentHistoricIndex].nid);
  780. // emmit new playing doc (e.g.: corpus map nowing that audio played from RandomPlayer)
  781. try {
  782. _$corpus_canvas.trigger({
  783. 'type':'audio-node-opened',
  784. 'nid':this.historic[this.currentHistoricIndex].nid
  785. });
  786. } catch (e) {
  787. console.info('AudioPlayer : _$corpus_canvas does not exists');
  788. }
  789. this.showHidePreviousBtn();
  790. this.showHideNextBtn();
  791. this.show();
  792. },
  793. // audio functions
  794. setSRC(url){
  795. console.log('AudioPlayer setSRC : url', url);
  796. this.audio.src = url;
  797. },
  798. onLoadedmetadata(){
  799. var rem = parseInt(this.audio.duration, 10),
  800. mins = Math.floor(rem/60,10),
  801. secs = rem - mins*60;
  802. this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
  803. this.updateLoadingBar();
  804. },
  805. updateLoadingBar(){
  806. // if (this.audio.readyState === 4){
  807. if(this.audio.buffered.length>0){
  808. this.$loader.css({
  809. 'width':parseInt((100 * this.audio.buffered.end(0) / this.audio.duration), 10)+'%'
  810. });
  811. if( this.audio.buffered.end(0) < this.audio.duration ){
  812. // loop through this function until file is fully loaded
  813. var that = this;
  814. window.requestAnimationFrame(that.updateLoadingBar.bind(that));
  815. }else{
  816. //console.log('Audio fully loaded');
  817. }
  818. }
  819. },
  820. onCanplay(){
  821. this.play();
  822. },
  823. onError(){
  824. console.warn("Audio Error " + this.audio.error.code + "; details: " + this.audio.error.message);
  825. },
  826. play(){
  827. this.clearTimeOutToHide();
  828. this.audio.play();
  829. },
  830. playPrevious(){
  831. if(this.currentHistoricIndex > 0){
  832. this.currentHistoricIndex -= 1;
  833. this.launch();
  834. }
  835. },
  836. playNext(){
  837. if(this.currentHistoricIndex < this.historic.length-1){
  838. this.currentHistoricIndex += 1;
  839. this.launch();
  840. }else{
  841. this.emmit('audio-play-next');
  842. }
  843. },
  844. togglePlayPause(e){
  845. if(this.audio.paused){
  846. this.audio.play();
  847. }else{
  848. this.audio.pause();
  849. }
  850. },
  851. stop(){
  852. // console.log('AudioPlayer stop()');
  853. // debugger;
  854. this.audio.pause();
  855. // don't close player if article or transcript is open
  856. if(!(_$body.is('.path-node-'+this.historic[this.currentHistoricIndex].nid)
  857. && (_$body.is('.view-mode-article') || _$body.is('.view-mode-transcript')))){
  858. this.timeOutToHide();
  859. }
  860. },
  861. // audio events
  862. onPlaying(){
  863. this.$btns.addClass('is-playing');
  864. this.emmit('audio-play');
  865. },
  866. onPause(){
  867. this.$btns.removeClass('is-playing');
  868. this.emmit('audio-pause');
  869. },
  870. onTimeupdate(){
  871. // move cursor
  872. this.$cursor.css({
  873. 'left':(this.audio.currentTime/this.audio.duration * this.timeline_w)+"px"
  874. });
  875. // update time text display
  876. var rem = parseInt(this.audio.currentTime, 10),
  877. mins = Math.floor(rem/60,10),
  878. secs = rem - mins*60;
  879. this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
  880. },
  881. onEnded(){
  882. console.log('AudioPlayer onEnded()');
  883. this.emmit('audio-ended');
  884. this.stop();
  885. },
  886. // cartel functions
  887. loadNode(nid){
  888. this.$cartel.addClass('loading');
  889. var vm = 'player_cartel';
  890. var ajax_path = _ajax_settings.entityjson_path+'/node/'+nid+'/'+vm;
  891. var path = window.location.origin + Drupal.url(ajax_path);
  892. $.getJSON(path, {})
  893. .done(this.onNodeLoaded.bind(this))
  894. .fail(this.onNodeLoadFail.bind(this));
  895. },
  896. onNodeLoaded(data){
  897. // console.log('AudioPlayer node loaded');
  898. this.$cartel.html(data.rendered).removeClass('loading');
  899. _$body.trigger({'type':'new-audio-cartel-loaded'});
  900. initAjaxLinks();
  901. if(this.auto_open_article){
  902. this.$cartel.find('a.link-article').trigger('click');
  903. this.auto_open_article = false;
  904. }
  905. },
  906. onNodeLoadFail(jqxhr, textStatus, error){
  907. console.warn('AudioPlayer node load failed', jqxhr.responseText);
  908. this.$cartel.removeClass('loading').html('');
  909. },
  910. setAutoOpenArticle(art){
  911. this.auto_open_article = art;
  912. return this;
  913. },
  914. // global
  915. show(){
  916. this.$container_parent.addClass('audio-player-visible');
  917. this.$container.addClass('visible');
  918. },
  919. showHidePreviousBtn(){
  920. if(this.historic.length > 1 && this.currentHistoricIndex > 0){
  921. this.$previous.addClass('is-active');
  922. }else{
  923. this.$previous.removeClass('is-active');
  924. }
  925. },
  926. showHideNextBtn(){
  927. if(this.currentHistoricIndex < this.historic.length-1 || this.shuffle_is_active){
  928. this.$next.addClass('is-active');
  929. }else{
  930. this.$next.removeClass('is-active');
  931. }
  932. },
  933. timeOutToHide(){
  934. // console.log('AudioPlayer timeOutToHide()');
  935. this.clearTimeOutToHide();
  936. this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
  937. },
  938. clearTimeOutToHide(){
  939. // console.log('AudioPlayer clearTimeOutToHide()',this.hideTimer);
  940. if(this.hideTimer){
  941. clearTimeout(this.hideTimer);
  942. this.hideTimer = false;
  943. }
  944. },
  945. hide(){
  946. // console.log('AudioPlayer hide()');
  947. this.$container_parent.removeClass('audio-player-visible');
  948. this.$container.removeClass('visible');
  949. // trigger highlighted node remove on corpus map
  950. try {
  951. _$corpus_canvas.trigger('audio-node-closed');
  952. } catch (e) {
  953. console.info('AudioPlayer hide() : _$corpus_canvas does not exists');
  954. }
  955. },
  956. // object events
  957. on(event_name, handler){
  958. if(typeof this.event_handlers[event_name] == 'undefined'){
  959. console.warn('AudioPlayer : event '+event_name+' does not exists');
  960. }
  961. this.event_handlers[event_name].push(handler);
  962. return this;
  963. },
  964. emmit(event_name, args){
  965. // console.log('AudioPlayer emmit() event_name', event_name);
  966. // console.log('AudioPlayer emmit() handlers', this.event_handlers[event_name]);
  967. var handler;
  968. var args = args || {};
  969. for (var i = this.event_handlers[event_name].length-1; i >= 0 ; i--) {
  970. handler = this.event_handlers[event_name][i];
  971. // console.log('AudioPlayer emmit() loop handler', handler);
  972. setTimeout(function(){
  973. // console.log('AudioPlayer emmit() timeout handler', handler);
  974. handler(args);
  975. }, 0);
  976. }
  977. return this;
  978. },
  979. }
  980. // ___ _ ___ _
  981. // | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _ ___ _ _
  982. // | / _` | ' \/ _` / _ \ ' \| _/ / _` | || / -_) '_|
  983. // |_|_\__,_|_||_\__,_\___/_|_|_|_| |_\__,_|\_, \___|_|
  984. // |__/
  985. function RandomPlayer(playlist){
  986. this.active = false;
  987. this.playlist = playlist;
  988. this.$btn = $('<a>').html('Shuffle').addClass('random-player-btn');
  989. this.init();
  990. };
  991. RandomPlayer.prototype = {
  992. init(){
  993. // this.shuffle();
  994. $('<div>')
  995. .addClass('block random-player')
  996. .append(this.$btn)
  997. // .insertAfter('#block-userlogin, #block-studiolinkblock');
  998. .prependTo('.region-footer-right');
  999. // events
  1000. this.$btn.on('click', this.toggleActive.bind(this));
  1001. // attach an event on AudioPlayer
  1002. _audioPlayer
  1003. .on('audio-ended', this.onAudioPlayerEnded.bind(this))
  1004. .on('audio-play-next', this.onAudioPlayNext.bind(this))
  1005. .on('stop-shuffle', this.stop.bind(this));
  1006. _$corpus_canvas
  1007. .on('update-random-playlist', this.updatePlaylist.bind(this));
  1008. },
  1009. updatePlaylist(e){
  1010. // debugger;
  1011. this.playlist = e.playlist;
  1012. this.shuffle();
  1013. },
  1014. shuffle(){
  1015. var tempPLaylist = [];
  1016. for (var i = this.playlist.length-1; i >= 0 ; i--) {
  1017. tempPLaylist.push(this.playlist[i]);
  1018. }
  1019. this.shuffledPlaylist = [];
  1020. while(tempPLaylist.length > 0){
  1021. var r = Math.floor(Math.random() * tempPLaylist.length);
  1022. this.shuffledPlaylist.push(tempPLaylist.splice(r,1)[0]);
  1023. }
  1024. //console.log('RandomPlayer, this.shuffledPlaylist', this.shuffledPlaylist);
  1025. },
  1026. toggleActive(e){
  1027. if (this.active) {
  1028. this.stop();
  1029. }else{
  1030. this.start();
  1031. }
  1032. },
  1033. start(){
  1034. this.active = _audioPlayer.shuffle_is_active = true;
  1035. this.$btn.addClass('is-active');
  1036. this.shuffle();
  1037. this.next();
  1038. // piwik
  1039. if(typeof _paq !== 'undefined'){
  1040. // trackEvent(category, action, [name], [value])
  1041. _paq.push(['trackEvent', 'RandomPlayer', 'start']);
  1042. }
  1043. },
  1044. stop(){
  1045. this.active = _audioPlayer.shuffle_is_active = false;
  1046. this.$btn.removeClass('is-active');
  1047. // stop audio player
  1048. // _audioPlayer.stop();
  1049. if(typeof _paq !== 'undefined'){
  1050. // trackEvent(category, action, [name], [value])
  1051. _paq.push(['trackEvent', 'RandomPlayer', 'stop']);
  1052. }
  1053. },
  1054. next(){
  1055. if(this.active && this.shuffledPlaylist.length > 0)
  1056. _audioPlayer.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
  1057. },
  1058. onAudioPlayNext(){
  1059. //console.log('RandomPlayer : onAudioPlayNext()');
  1060. this.next();
  1061. },
  1062. onAudioPlayerEnded(){
  1063. //console.log('RandomPlayer : onAudioPlayerEnded()');
  1064. this.next();
  1065. }
  1066. };
  1067. // ___ ___ _
  1068. // / __|___ _ __ _ __ ___| _ \ |__ _ _ _ ___ _ _
  1069. // | (__/ _ \ ' \| '_ \/ _ \ _/ / _` | || / -_) '_|
  1070. // \___\___/_|_|_| .__/\___/_| |_\__,_|\_, \___|_|
  1071. // |_| |__/
  1072. function CompoPlayer(){
  1073. this.active = false;
  1074. this.playing = false;
  1075. this.paused = false;
  1076. this.playlist = [];
  1077. this.current_index = 0;
  1078. this.$composer = null;
  1079. this.$compo = null;
  1080. this.$controls = null;
  1081. this.init();
  1082. };
  1083. CompoPlayer.prototype = {
  1084. init(){
  1085. // console.log('CompoPlayer init()');
  1086. // attach an event on AudioPlayer
  1087. _audioPlayer
  1088. .on('audio-open-document', this.onAudioOpenDocument.bind(this))
  1089. .on('audio-play', this.onAudioPlayerPlay.bind(this))
  1090. .on('audio-pause', this.onAudioPlayerPause.bind(this))
  1091. .on('audio-ended', this.onAudioPlayerEnded.bind(this));
  1092. // .on('audio-play-next', this.onAudioPlayNext.bind(this));
  1093. // this.newCompo();
  1094. },
  1095. newCompo(){
  1096. //console.log('CompoPlayer newCompo()');
  1097. // this.$compo = $('.composition_ui .composer .composition');
  1098. this.initControls();
  1099. },
  1100. initControls(){
  1101. //console.log('CompoPlayer initControls()');
  1102. this.$composer = $('.composition_ui .composer');
  1103. this.$compo = $('.composition_ui .composer .composition');
  1104. this.$controls = $('.composition_ui .composer .compo-player-controls');
  1105. if(!this.$controls.is('.ready') && this.$compo){
  1106. this.$previous = $('<div>').addClass('previous')
  1107. .on('click', this.prev.bind(this))
  1108. .appendTo(this.$controls);
  1109. this.$playpause = $('<div>').addClass('play-pause')
  1110. .on('click', this.togglePlayPause.bind(this))
  1111. .appendTo(this.$controls);
  1112. this.$next = $('<div>').addClass('next')
  1113. .on('click', this.next.bind(this))
  1114. .appendTo(this.$controls);
  1115. this.$controls.addClass('ready');
  1116. this.refresh();
  1117. this.active = true;
  1118. // this.newCompo();
  1119. }
  1120. },
  1121. refresh(){
  1122. // console.log('CompoPlayer refresh(), this', this);
  1123. this.stop();
  1124. // load new playlist
  1125. this.playlist = [];
  1126. var that = this;
  1127. $('.field--name-documents .field__item',this.$compo).each(function(i,el){
  1128. var $link = $('a.audio-link',this);
  1129. that.playlist.push({
  1130. item:$(this),
  1131. audio_url:$link.attr("audio_url"),
  1132. nid:$link.attr("nid"),
  1133. });
  1134. });
  1135. this.showHideControls();
  1136. },
  1137. togglePlayPause(){
  1138. // console.log('CompoPlayer togglePlayPause');
  1139. if (this.playing && !this.paused) {
  1140. this.pause();
  1141. }else{
  1142. if(this.playing && this.paused){
  1143. this.play();
  1144. }else{
  1145. this.start();
  1146. }
  1147. }
  1148. },
  1149. start(){
  1150. //console.log('start');
  1151. // console.log('CompoPlayer start()');
  1152. this.playing = true;
  1153. this.play();
  1154. },
  1155. play(){
  1156. // console.log('play');
  1157. if(this.paused){
  1158. this.paused = false;
  1159. _audioPlayer.play();
  1160. }else{
  1161. _audioPlayer.openDocument(this.playlist[this.current_index], this);
  1162. }
  1163. this.setActiveItem().showHideControls();
  1164. },
  1165. pause(){
  1166. //console.log('pause');
  1167. this.paused = true;
  1168. this.showHideControls();
  1169. _audioPlayer.stop();
  1170. },
  1171. next(){
  1172. // console.log('CompoPlayer next()');
  1173. if(this.playing){
  1174. this.current_index += 1;
  1175. if(this.current_index < this.playlist.length){
  1176. this.play();
  1177. }else{
  1178. this.stop();
  1179. }
  1180. }
  1181. },
  1182. prev(){
  1183. // console.log('CompoPlayer prev()');
  1184. if(this.playing){
  1185. this.current_index -= 1;
  1186. if(this.current_index >= 0){
  1187. this.play();
  1188. }else{
  1189. this.stop();
  1190. }
  1191. }
  1192. },
  1193. stop(){
  1194. if(this.playing){
  1195. _audioPlayer.stop();
  1196. }
  1197. this.reset();
  1198. },
  1199. reset(){
  1200. this.playing = false;
  1201. this.paused = false;
  1202. this.resetIndex();
  1203. },
  1204. resetIndex(){
  1205. this.current_index = 0;
  1206. this.showHideControls().resetActiveItems();
  1207. },
  1208. setActiveItem(){
  1209. this.resetActiveItems();
  1210. if(this.playing && this.current_index >= 0){
  1211. this.playlist[this.current_index].item.addClass('is-active');
  1212. }
  1213. // this call shoud not be here
  1214. this.showHideControls();
  1215. return this;
  1216. },
  1217. resetActiveItems(){
  1218. for (var n = 0; n < this.playlist.length; n++) {
  1219. // console.log('node',node);
  1220. this.playlist[n].item.removeClass('is-active');
  1221. }
  1222. return this;
  1223. },
  1224. showHideControls(){
  1225. // console.log('CompoPlayer showHideNextBtn(), playing:'+this.playing+', paused:'+this.paused);
  1226. // global playing
  1227. if(this.$controls){
  1228. if(this.playing && !this.paused){
  1229. this.$controls.addClass('is-playing');
  1230. }else{
  1231. this.$controls.removeClass('is-playing');
  1232. }
  1233. }
  1234. // playpause
  1235. if(this.$playpause){
  1236. if(this.playlist.length > 0){
  1237. this.$playpause.addClass('is-active');
  1238. }else{
  1239. this.$playpause.removeClass('is-active');
  1240. }
  1241. }
  1242. // next
  1243. if(this.$next){
  1244. if(this.playing && this.playlist.length > 1 && this.current_index < this.playlist.length -1){
  1245. this.$next.addClass('is-active');
  1246. }else{
  1247. this.$next.removeClass('is-active');
  1248. }
  1249. }
  1250. // previous
  1251. if(this.$previous){
  1252. if(this.playing && this.playlist.length > 1 && this.current_index > 0){
  1253. this.$previous.addClass('is-active');
  1254. }else{
  1255. this.$previous.removeClass('is-active');
  1256. }
  1257. }
  1258. return this;
  1259. },
  1260. deactivate(){
  1261. this.stop();
  1262. this.active = false;
  1263. },
  1264. // _audioPlayer events
  1265. onAudioOpenDocument(args){
  1266. if(args.caller !== this){
  1267. // console.log('CompoPlayer onAudioOpenDocument() called by other');
  1268. this.reset();
  1269. }
  1270. // else{
  1271. // // console.log('CompoPlayer onAudioOpenDocument() self calling');
  1272. // }
  1273. },
  1274. onAudioPlayerPlay(){
  1275. if(this.playing && this.paused){
  1276. this.paused = false;
  1277. this.showHideControls();
  1278. }
  1279. },
  1280. onAudioPlayerPause(){
  1281. if(this.playing && !this.paused){
  1282. this.paused = true;
  1283. this.showHideControls();
  1284. }
  1285. },
  1286. onAudioPlayerEnded(){
  1287. this.next();
  1288. },
  1289. // onAudioPlayNext(){
  1290. // this.next();
  1291. // }
  1292. };
  1293. // ___ _ _ _
  1294. // | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
  1295. // | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
  1296. // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
  1297. function initProductions(){
  1298. // console.log('theme : initProductions');
  1299. var $grid = $('.grid',_$row).masonry({
  1300. itemSelector:'.col',
  1301. columnWidth:'.col-2',
  1302. horizontalOrder: true,
  1303. containerStyle: null,
  1304. // disable initial layout
  1305. // initLayout: false,
  1306. });
  1307. // bind event
  1308. // $grid.masonry( 'on', 'layoutComplete', function() {
  1309. // console.log('layout is complete');
  1310. // });
  1311. // layout Masonry after each image loads
  1312. $grid.imagesLoaded().progress( function() {
  1313. $grid.masonry('layout');
  1314. });
  1315. $grid.imagesLoaded(function(){
  1316. $grid.masonry('layout');
  1317. });
  1318. };
  1319. // ___ _ _ _
  1320. // | __|_ _ _ _ ___ __ _(_)__| |_ _ _ ___ _ __ ___ _ _| |_
  1321. // | _|| ' \| '_/ -_) _` | (_-< _| '_/ -_) ' \/ -_) ' \ _|
  1322. // |___|_||_|_| \___\__, |_/__/\__|_| \___|_|_|_\___|_||_\__|
  1323. // |___/
  1324. function initEnregistrementTranscript(){
  1325. console.log('initEnregistrementTranscript');
  1326. var $node = _$row.find('article.node--type-enregistrement.node--view-mode-transcript');
  1327. var $nav = $('<nav>').prependTo($node);
  1328. $node.find('.field--name-field-transcript-vo').addClass('visible').find('.field__label')
  1329. .clone().appendTo($nav).addClass('is-active')
  1330. .attr('field_target', '.field--name-field-transcript-vo');
  1331. $node.find('.field--name-field-transcript-trad').find('.field__label')
  1332. .clone().appendTo($nav)
  1333. .attr('field_target', '.field--name-field-transcript-trad');
  1334. $nav.find('.field__label').on('click', function(){
  1335. var $this = $(this).addClass('is-active');
  1336. $this.siblings('.is-active').removeClass('is-active');
  1337. $this.parents('article.node').find('.field.visible').removeClass('visible');
  1338. $this.parents('article.node').find($this.attr('field_target')).addClass('visible');
  1339. });
  1340. };
  1341. // ___ _ ___
  1342. // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
  1343. // | _| '_/ _ \ ' \ _| _/ _` / _` / -_)
  1344. // |_||_| \___/_||_\__|_| \__,_\__, \___|
  1345. // |___/
  1346. function backToFrontPage(pop_state){
  1347. console.log('backToFrontPage', pop_state);
  1348. closeAllModals();
  1349. // assume we are going back to front page
  1350. $('body').removeClass().addClass('path-frontpage');
  1351. $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
  1352. // close entrees
  1353. _$corpus_canvas.trigger({'type':'close-all-entree'});
  1354. _$corpus_canvas.trigger({'type':'scramble-collection'});
  1355. if(typeof pop_state == "undefined" || !pop_state){
  1356. console.log('backToFrontPage push state');
  1357. history.pushState({home:true}, null, drupalSettings.path.baseUrl+drupalSettings.path.currentLanguage);
  1358. }
  1359. }
  1360. function initHome(){
  1361. addCloseModalBtnToCols();
  1362. // console.log('theme : initHome');
  1363. // console.log('theme : initProductions');
  1364. var $grid = $('.grid',_$row).masonry({
  1365. itemSelector:'.col',
  1366. columnWidth:'.col-2',
  1367. horizontalOrder: true,
  1368. containerStyle: null,
  1369. // disable initial layout
  1370. // initLayout: false,
  1371. });
  1372. // bind event
  1373. // $grid.masonry( 'on', 'layoutComplete', function() {
  1374. // console.log('layout is complete');
  1375. // });
  1376. // layout Masonry after each image loads
  1377. $grid.imagesLoaded().progress( function() {
  1378. $grid.masonry('layout');
  1379. });
  1380. $grid.imagesLoaded(function(){
  1381. $grid.masonry('layout');
  1382. });
  1383. }
  1384. // __ __ _ _
  1385. // | \/ |___ __| |__ _| |___
  1386. // | |\/| / _ \/ _` / _` | (_-<
  1387. // |_| |_\___/\__,_\__,_|_/__/
  1388. function closeAllModals(){
  1389. //console.log('theme : closeAllModals');
  1390. // TODO: animate the remove
  1391. _$row.html('');
  1392. _$ajaxLinks.removeClass('is-active');
  1393. _$body.trigger({'type':'all-modal-closed'});
  1394. // checkRowEmpty();
  1395. };
  1396. function checkRowEmpty(){
  1397. // if row is empty and we are not in productions or entree notice|index call closeAllModals()
  1398. if(!$('.col', _$row).length){
  1399. if(!_$body.is('.entity-type-taxonomy_term.bundle-entrees')){
  1400. if(!_$body.is('.entity-type-node.bundle-page')){
  1401. // we weren't on production or entree, so go back to front page
  1402. backToFrontPage();
  1403. }else{
  1404. // if we were on production page just scramble collection in case of map was filtered
  1405. _$corpus_canvas.trigger({'type':'scramble-collection'});
  1406. }
  1407. }else{
  1408. // remove is-active class from index or notice entree links
  1409. $('.entree-content a.is-active').removeClass('is-active');
  1410. // TODO: remove the hash index or notice
  1411. }
  1412. }
  1413. };
  1414. // _ _ _
  1415. // | || |___| |_ __ ___ _ _ ___
  1416. // | __ / -_) | '_ \/ -_) '_(_-<
  1417. // |_||_\___|_| .__/\___|_| /__/
  1418. // |_|
  1419. // https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
  1420. // function getCookie(name) {
  1421. // var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
  1422. // return v ? v[2] : null;
  1423. // }
  1424. // function setCookie(name, value, days) {
  1425. // var d = new Date;
  1426. // d.setTime(d.getTime() + 24*60*60*1000*days);
  1427. // document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
  1428. // }
  1429. // function deleteCookie(name) { setCookie(name, '', -1); }
  1430. init();
  1431. } // end EdlpTheme()
  1432. $(document).ready(function($) {
  1433. if(drupalSettings.path.isFront){
  1434. var edlptheme = new EdlpTheme();
  1435. }
  1436. });
  1437. })(jQuery, Drupal, drupalSettings);