materio_flag.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  1. // @codekit-prepend "gui.js"
  2. (function($) {
  3. MaterioFlag = function(){
  4. var _isLoadingList = false ;
  5. /**
  6. * init()
  7. */
  8. function init(){
  9. trace('MaterioFlag :: init MaterioFlag');
  10. buildBlocks();
  11. $(document)
  12. .bind('flagGlobalAfterLinkUpdate', onFlaging)
  13. .bind('resultscompleted resultschanged', onResultsUpdated)
  14. .bind('init-scroller-pager', onInitScrollerPager)
  15. .bind('load-scroller-pager', onLoadScrollerPager)
  16. .bind('view-mode-changed', onViewModeChanged)
  17. .bind('history-state-change', onHistoryStateChange);
  18. ajaxifyLinks();
  19. // trigger updated event for direct html loading
  20. if(isList()){
  21. setTimeout(function(){
  22. triggerContentChanged();
  23. }, 10);
  24. }
  25. };
  26. function onFlaging(event){
  27. trace('MaterioFlag :: onFlaging', event);
  28. refreshBlocks();
  29. };
  30. function onResultsUpdated(event){
  31. trace('MaterioFlag :: onResultsUpdated', event);
  32. ajaxifyLinks(event.container);
  33. };
  34. function buildBlocks(activename){
  35. trace('MaterioFlag :: buildBlocks', activename);
  36. // nav block
  37. $('a.open-list:not(.ajax-processed)', '#block-materio-flag-materio-flag-mylists-nav').each(function(index){
  38. $this = $(this)
  39. .bind('click', onClickOpenLink)
  40. .addClass('ajax-processed');
  41. var name = $this.attr('class').match(/flag_lists_[^_]+_[0-9]+/);
  42. // trace('MaterioFlag :: name', name);
  43. $('<span class="preview">open preview</span>').attr('name', name).insertAfter($this).bind('click', onClickShowPreview);
  44. });
  45. // preview block
  46. $('section.flag-list:not(.ajax-processed)', '#block-materio-flag-materio-flag-mylists').each(function(index){
  47. var name = $(this).attr('class').match(/flag_lists_[^_]+_[0-9]+/);
  48. $('<i class="icon-remove"></i>').appendTo($('h2.listname', this)).attr('name', name).bind('click', onClickClosePreview);
  49. $('a.open-list', this).bind('click', onClickOpenLink);
  50. }).addClass('ajax-processed');
  51. // trace('MaterioFlag :: activename', activename);
  52. if(activename == undefined)
  53. activename = readCookie('materiomyflaglistsopened');
  54. // trace('MaterioFlag :: activename', activename);
  55. if(activename)
  56. showPreview(activename);
  57. };
  58. function refreshBlocks(name){
  59. trace('MaterioFlag :: refreshBlocks | name', name);
  60. if($('#block-materio-flag-materio-flag-mybookmarks').length){
  61. var type = 'bookmarks';
  62. }else if($('#block-materio-flag-materio-flag-mylists').length){
  63. var type = 'lists';
  64. }
  65. if(type != undefined){
  66. var id = '#block-materio-flag-materio-flag-my'+type;
  67. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/refresh/block/'+type;
  68. $.getJSON(url, function(json){
  69. trace('MaterioFlag :: block refreshed '+type, json);
  70. $(id).replaceWith(json.block);
  71. $('#block-materio-flag-materio-flag-mylists-nav').replaceWith(json.block_nav);
  72. buildBlocks(name);
  73. $.event.trigger({
  74. type : 'my'+type+'-block-updated',
  75. listname : name
  76. });
  77. });
  78. }
  79. ajaxifyLinks();
  80. };
  81. function ajaxifyLinks(container){
  82. trace('MaterioFlag :: ajaxifyLinks', container);
  83. container = ((container != null) ? container : 'body');
  84. // trace('MaterioFlag :: typeof Drupal.flagLink', typeof Drupal.flagLink);
  85. if (typeof Drupal.flagLink != 'undefined')
  86. Drupal.flagLink(container);
  87. $('a.flag-lists-create:not(.ajax-processed)', container)
  88. .bind('click', onClickCreatLink)
  89. .addClass('ajax-processed');
  90. };
  91. /**
  92. * show hide preview
  93. */
  94. function onClickShowPreview(event){
  95. trace('MaterioFlag :: onClickShowPreview', event);
  96. showPreview($(this).attr('name'));
  97. };
  98. function showPreview(name){
  99. trace('MaterioFlag :: showPreview', name);
  100. $('section.'+name, '#block-materio-flag-materio-flag-mylists').addClass('active')
  101. .siblings('section').removeClass('active');
  102. createCookie('materiomyflaglistsopened', name, 1);
  103. $.event.trigger('init-layout');
  104. };
  105. function onClickClosePreview(event){
  106. trace('MaterioFlag :: onClickClosePreview', event);
  107. eraseCookie('materiomyflaglistsopened');
  108. $(this).parents('section.flag-list').removeClass('active');
  109. $.event.trigger('init-layout');
  110. };
  111. /**
  112. * onClickOpenLink
  113. */
  114. function onClickOpenLink(event){
  115. event.preventDefault();
  116. var $link = $(event.currentTarget);
  117. var fid = $link.attr('href').match(/lists\/([0-9]+)$/);
  118. // trace('MaterioFlag :: type', type);
  119. loadList(fid[1]);
  120. return false;
  121. };
  122. function loadList(fid){
  123. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/ajax/list/'+fid;
  124. $.event.trigger('loading-content');
  125. $.getJSON(url, function(json){
  126. trace('MaterioFlag :: json', json);
  127. changeContent(json);
  128. });
  129. };
  130. function changeContent(json){
  131. if(json.return){
  132. $('.inner-content','#content').html(json.return);
  133. $.event.trigger('loaded-content');
  134. // no need of ajaxifylinks because it's triggered with resultschanged
  135. // ajaxifyLinks('#content');
  136. var path = Drupal.settings.basePath + Drupal.settings.pathPrefix + json.path;
  137. $.event.trigger({
  138. type : 'new-history-page',
  139. path : path,
  140. title : json.title,
  141. content : json.return
  142. });
  143. // TODO: change language links for folders
  144. // for (language in Drupal.settings.materio_search_api_ajax.languages) {
  145. // var l = Drupal.settings.materio_search_api_ajax.languages[language];
  146. // $('#block-locale-language li.'+language+' a').attr('href', Drupal.settings.basePath + l.prefix+'/' + json.search_path + '/' + json.keys)
  147. // };
  148. triggerContentChanged();
  149. }else{
  150. trace('MaterioFlag :: no results');
  151. }
  152. };
  153. function triggerContentChanged(){
  154. $.event.trigger({
  155. type: 'resultschanged',
  156. container : '#content .flaglist-items'
  157. });
  158. };
  159. /**
  160. * onClickCreatLink(event)
  161. */
  162. function onClickCreatLink(event){
  163. event.preventDefault();
  164. var $link = $(event.currentTarget);
  165. var type = $link.attr('href').match(/[^\/]*$/);
  166. // trace('MaterioFlag :: type', type);
  167. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/createlist/form/'+type[0];
  168. $.getJSON(url, function(json){
  169. trace('MaterioFlag :: json', json);
  170. showCreateListForm(json, $link);
  171. });
  172. return false;
  173. };
  174. function showCreateListForm(json, $link){
  175. // google analytics
  176. $.event.trigger({
  177. type:"record-stat",
  178. categorie:"flagLists",
  179. action: 'show create form'
  180. });
  181. var $modal = $('<div id="modal" class="modal"/>').appendTo('body');
  182. $modal
  183. .css({
  184. position:'absolute',
  185. top:'40%', left:'50%',
  186. marginLeft:'-150px', width:'300px',
  187. zIndex:"99999"
  188. })
  189. .append(json.return)
  190. .find('input[type="submit"]', '#materio-flag-create-list-form').bind('click', function(event) {
  191. event.preventDefault();
  192. switch($(this).attr('name')){
  193. case 'cancel':
  194. trace('MaterioFlag :: cancel',event);
  195. $(this).parents('#modal').remove();
  196. // google analytics
  197. $.event.trigger({
  198. type:"record-stat",
  199. categorie:"flagLists",
  200. action: 'cancel create form'
  201. });
  202. break;
  203. case 'create':
  204. trace('MaterioFlag :: create',event);
  205. var title = $(this).parents('form').find('input[name*="flag-lists-name"]').val();
  206. var type = $(this).parents('form').find('input[name*="type"]').val();
  207. // google analytics
  208. $.event.trigger({
  209. type : "record-stat",
  210. categorie : "flagLists",
  211. action : "submit create form",
  212. label : 'title : '+title
  213. });
  214. createList($modal, type, title, $link);
  215. break;
  216. }
  217. return false;
  218. })
  219. .parents('form').find('input[type="text"]').focus();
  220. // TODO: esc keypressed close the form
  221. };
  222. function createList($modal, type, title, $link){
  223. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'flag-lists/add/'+type+'/js';
  224. $.getJSON(url, {name:title}, function(data) {
  225. if (data.error) {
  226. trace(data.error);
  227. }
  228. else {
  229. // select.append('<option value="'+data.flag.fid+'">'+data.flag.title+'</option>');
  230. // $('input.name', $(this)).val('');
  231. // dialog.dialog('close');
  232. trace('MaterioFlag :: created list : data', data);
  233. flagEntityWithList(data.flag.name, $link.attr('nid'), $link.attr('token'));
  234. $modal.remove();
  235. }
  236. });
  237. };
  238. function flagEntityWithList(name, nid, token){
  239. // var ret;
  240. // Send POST request
  241. $.ajax({
  242. type: 'POST',
  243. url: Drupal.settings.basePath+Drupal.settings.pathPrefix+'flag-lists/flag/'+name+'/'+nid,
  244. data: { js: true, token: token },
  245. dataType: 'json',
  246. success: function (data2) {
  247. trace('MaterioFlag :: node taged with newly created list : data2', data2)
  248. if (data2.status) {
  249. // google analytics
  250. $.event.trigger({
  251. type : "record-stat",
  252. categorie : 'FlagLists',
  253. action : 'node flaged',
  254. label : 'nid : '+nid+' | flag : '+name
  255. });
  256. refreshBlocks(name);
  257. refreshNodeLinks();
  258. }else {
  259. // Failure.
  260. alert(data2.errorMessage);
  261. }
  262. },
  263. error: function (xmlhttp) {
  264. alert('An HTTP error '+ xmlhttp.status +' occurred.\n'+ element.href);
  265. }
  266. });
  267. };
  268. function refreshNodeLinks(){
  269. var nids = new Array();
  270. $('.flag-lists-entity-links').parents('.node').each(function(index) {
  271. nids.push($(this).attr('class').match(/node-([0-9]+)/)[1]);
  272. });
  273. // trace('MaterioFlag :: nids', nids);
  274. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/nodelinks';
  275. $.getJSON(url, {nids:nids.join(";")}, function(data) {
  276. // trace('MaterioFlag :: data', data);
  277. for(nid in data.links){
  278. // trace('MaterioFlag :: nid', nid);
  279. // trace('MaterioFlag :: data.links[nid]', data.links[nid]);
  280. $('.node-'+nid+' .flag-lists-entity-links').replaceWith(data.links[nid]);
  281. // trace('MaterioFlag :: typeof Drupal.flagLink', typeof Drupal.flagLink);
  282. // if (typeof Drupal.flagLink != 'undefined')
  283. // Drupal.flagLink($('.node-'+nid+' .flag-lists-entity-links'));
  284. ajaxifyLinks('.node-'+nid+' .flag-lists-entity-links');
  285. }
  286. });
  287. $.event.trigger({
  288. type : 'materioflag-nodelinks-updated',
  289. nids : nids
  290. });
  291. };
  292. function onInitScrollerPager(event){
  293. // trace('MaterioFlag :: MaterioFlag :: onInitScrollerPager');
  294. if (isList()){
  295. // trace('MaterioFlag :: event.pager', event);
  296. event.pager.hide();
  297. }
  298. };
  299. function onLoadScrollerPager(event){
  300. if (isList())
  301. loadNextListPage(event.href);
  302. };
  303. function loadNextListPage(href){
  304. // trace('MaterioFlag :: loadNextListPage', href);
  305. if(!_isLoadingList){
  306. var fid = href.match(/lists\/([^\/|\?]+)/);
  307. var page = href.match(/\?page=([0-9]+)/);
  308. var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materioflag/ajax/list/'+fid[1]+'/'+page[1];
  309. // trace('MaterioFlag :: url', url);
  310. loadNextPage(url, $('.materio-flags-list', '#content'), '.flaglist-items');
  311. }
  312. };
  313. function loadNextPage(url, $container, target){
  314. trace('MaterioFlag :: loadNextPage');
  315. _isLoadingList = true;
  316. $container.addClass('loading');
  317. $.getJSON(url, function(json){
  318. trace('json', json);
  319. _isLoadingList = false;
  320. $container.removeClass('loading');
  321. addNextpage(json, target);
  322. });
  323. };
  324. function addNextpage(json, container_class){
  325. var $newcontent = $(json.return),
  326. $newitems = $(container_class, $newcontent).children('article').addClass('just-added'),
  327. $newpager = $('ul.pager', $newcontent);
  328. $(container_class, '#content').append($newitems);
  329. $('ul.pager', '#content').replaceWith($newpager.hide());
  330. // TODO: animation, this should be on theme side
  331. $(container_class, '#content').children('.just-added').each(function(i){
  332. // $(this).delay(5000*i).removeClass('just-added');
  333. var $this = $(this);
  334. setTimeout(function(){
  335. $this.removeClass('just-added');
  336. }, 150*i);
  337. });
  338. $.event.trigger({
  339. type : 'resultscompleted',
  340. container : $(container_class, '#content')
  341. });
  342. };
  343. function onViewModeChanged(event){
  344. if (isList())
  345. loadList(getFid());
  346. };
  347. /**
  348. * history
  349. */
  350. function onHistoryStateChange(event){
  351. if(isList())
  352. triggerContentChanged();
  353. };
  354. /**
  355. * Helpers
  356. */
  357. function getFid(){
  358. return $('.materio-flags-list', '#content').attr('fid');;
  359. };
  360. function isList(){
  361. return $('.materio-flags-list', '#content').length;
  362. };
  363. /**
  364. * cookies
  365. */
  366. function createCookie(name,value,days) {
  367. if (days) {
  368. var date = new Date();
  369. date.setTime(date.getTime()+(days*24*60*60*1000));
  370. var expires = "; expires="+date.toGMTString();
  371. }
  372. else var expires = "";
  373. document.cookie = name+"="+value+expires+"; path=/";
  374. }
  375. function readCookie(name) {
  376. var nameEQ = name + "=";
  377. var ca = document.cookie.split(';');
  378. for(var i=0;i < ca.length;i++) {
  379. var c = ca[i];
  380. while (c.charAt(0)==' ') c = c.substring(1,c.length);
  381. if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  382. }
  383. return null;
  384. }
  385. function eraseCookie(name) {
  386. createCookie(name,"",-1);
  387. }
  388. init();
  389. };
  390. var materioflag = new MaterioFlag();
  391. })(jQuery);