main.js 52 KB

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