public/js/explore.js

   1 'use strict';
   2
   3 require('./utils/font-setup');
   4
   5 var appEvents = require('./utils/appevents');
   6 var onready = require('./utils/onready');
   7 var toggleClass = require('./utils/toggle-class');
   8 var ExploreView = require('./views/explore/explore-view');
   9
  10 require('./utils/tracking');
  11
  12 require('@gitterhq/styleguide/css/components/buttons.css');
  13 require('@gitterhq/styleguide/css/components/headings.css');
  14
  15 onready(function() {
  16   new ExploreView({
  17     el: '.explore-page-wrap'
  18   });
  19   //exploreView.render();
  20
  21   var tagPillElements = document.querySelectorAll('.js-explore-tag-pill');
  22   var roomCardElements = document.querySelectorAll('.js-explore-room-card');
  23   var showMoreElemnts = document.querySelectorAll('.js-explore-show-more-tag-pills');
  24   var tagPillListElements = document.querySelectorAll('.js-explore-tag-pills-list');
  25
  26   Array.prototype.forEach.call(roomCardElements, function(roomItemElement) {
  27     roomItemElement.addEventListener('click', function() {
  28       // Tracking
  29       appEvents.trigger('track-event', 'explore_room_click');
  30     });
  31   });
  32
  33   var activeClass = 'is-active';
  34
  35   var updateRoomCardListVisibility = function() {
  36     // Grab the active tags
  37     var activeTags = {};
  38     Array.prototype.filter
  39       .call(tagPillElements, function(tagPillElement) {
  40         return tagPillElement.classList.contains(activeClass);
  41       })
  42       .forEach(function(tagPillElement) {
  43         (tagPillElement.getAttribute('data-tags') || '').split(',').forEach(function(tag) {
  44           activeTags[tag] = true;
  45         });
  46       });
  47
  48     Array.prototype.forEach.call(roomCardElements, function(roomItemElement) {
  49       (roomItemElement.getAttribute('data-tags') || '').split(',').some(function(roomTag) {
  50         var hasActiveTag = activeTags[roomTag];
  51         toggleClass(roomItemElement, 'is-hidden', !hasActiveTag);
  52         return hasActiveTag;
  53       });
  54     });
  55   };
  56   // Initially call it
  57   updateRoomCardListVisibility();
  58
  59   /* * /
  60   // Hook up our pills to update the card list
  61   var toggleTagPillActive = function(el, state) {
  62     toggleClass(el, activeClass, state);
  63     el.setAttribute('aria-selected', state);
  64   }
  65   Array.prototype.forEach.call(tagPillElements, function(tagPillElement) {
  66     tagPillElement.addEventListener('click', function() {
  67       // Redirect to new page (we don't have a API to query client-side yet)
  68       //window.location.href = tagPillElement.getAttribute('href');
  69
  70       // Only one tag can be selected at a time so
  71       // unselect all of the tags
  72       Array.prototype.forEach.call(tagPillElements, function(tagPillElement) {
  73         toggleTagPillActive(tagPillElement, false);
  74       });
  75       // Select the tag we just clicked
  76       toggleTagPillActive(tagPillElement, true);
  77
  78       updateRoomCardListVisibility();
  79
  80       // Tracking
  81       appEvents.trigger('track-event', 'explore_pills_click', {
  82         tag: tagPillElement.textContent.toLowerCase()
  83       });
  84     });
  85   });
  86   /* */
  87
  88   // Expand/Collapse tag pill list
  89   Array.prototype.forEach.call(showMoreElemnts, function(showMoreElement) {
  90     showMoreElement.addEventListener('click', function() {
  91       var state = toggleClass(showMoreElement, 'is-expanded');
  92
  93       Array.prototype.forEach.call(tagPillListElements, function(pillListElement) {
  94         toggleClass(pillListElement, 'is-expanded', state);
  95         pillListElement.setAttribute('aria-selected', state);
  96       });
  97     });
  98   });
  99 });