Merge pull request #19 from firebase/namespace-classes

Namespace dropdown / tab classes
FirebaseExtended · Sep 7, 2014 · 0028171 · 0028171
2 parents 3ae8d25 + 1afdaad
commit 0028171
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 49 deletions.
diff --git a/src/js/firechat-ui.js b/src/js/firechat-ui.js
@@ -522,7 +522,7 @@
     // Upon click of the dropdown, autofocus the input field and trigger list population.
     $(document).delegate('[data-event="firechat-user-search-btn"]', 'click', function(event) {
       event.stopPropagation();
-      var $input = $(this).next('div.dropdown-menu').find('input');
+      var $input = $(this).next('div.firechat-dropdown-menu').find('input');
       $input.focus();
       $input.trigger(jQuery.Event('keyup'));
     });
@@ -689,7 +689,7 @@
     var self = this,
         show = function($el) {
           var $this = $el,
-              $ul = $this.closest('ul:not(.dropdown-menu)'),
+              $ul = $this.closest('ul:not(.firechat-dropdown-menu)'),
               selector = $this.attr('data-target'),
               previous = $ul.find('.active:last a')[0],
               $target,
@@ -725,7 +725,7 @@
           function next() {
             $active
               .removeClass('active')
-              .find('> .dropdown-menu > .active')
+              .find('> .firechat-dropdown-menu > .active')
               .removeClass('active');
 
             element.addClass('active');
@@ -736,8 +736,8 @@
               element.removeClass('fade');
             }
 
-            if (element.parent('.dropdown-menu')) {
-              element.closest('li.dropdown').addClass('active');
+            if (element.parent('.firechat-dropdown-menu')) {
+              element.closest('li.firechat-dropdown').addClass('active');
             }
 
             if (callback) {
@@ -754,7 +754,7 @@
           $active.removeClass('in');
       };
 
-    $(document).delegate('[data-toggle="tab"]', 'click', function(event) {
+    $(document).delegate('[data-toggle="firechat-tab"]', 'click', function(event) {
       event.preventDefault();
       show($(this));
     });
@@ -767,7 +767,7 @@
    */
   FirechatUI.prototype._setupDropdowns = function() {
     var self = this,
-        toggle = '[data-toggle=dropdown]',
+        toggle = '[data-toggle=firechat-dropdown]',
         toggleDropdown = function(event) {
           var $this = $(this),
               $parent = getParent($this),
@@ -786,7 +786,7 @@
           return false;
         },
         clearMenus = function() {
-          $('[data-toggle=dropdown]').each(function() {
+          $('[data-toggle=firechat-dropdown]').each(function() {
             getParent($(this)).removeClass('open');
           });
         },
@@ -808,8 +808,8 @@
 
       $(document)
         .bind('click', clearMenus)
-        .delegate('.dropdown-menu', 'click', function(event) { event.stopPropagation(); })
-        .delegate('[data-toggle=dropdown]', 'click', toggleDropdown);
+        .delegate('.firechat-dropdown-menu', 'click', function(event) { event.stopPropagation(); })
+        .delegate('[data-toggle=firechat-dropdown]', 'click', toggleDropdown);
   };
 
   /**
@@ -964,7 +964,7 @@
     this.$tabList.children('li').css('width', tabWidth);
 
     // Automatically select the next tab if there is one.
-    this.$tabList.find('[data-toggle=tab]').first().trigger('click');
+    this.$tabList.find('[data-toggle="firechat-tab"]').first().trigger('click');
 
     // Update the room listing to reflect that we're now in the room.
     this.$roomList.children('[data-room-id=' + roomId + ']').children('a').removeClass('highlight');

diff --git a/src/less/styles.less b/src/less/styles.less
@@ -244,7 +244,7 @@
   }
 }
 
-/* Component: Dropdowns
+/* Component: dropdowns
 ============================================================ */
 #firechat {
   .caret {
@@ -259,10 +259,10 @@
     margin-top: 8px;
     margin-left: 2px;
   }
-  .dropdown {
+  .firechat-dropdown {
     position: relative;
   }
-  .dropdown-toggle {
+  .firechat-dropdown-toggle {
     .user-select(none);
     text-decoration: none;
     &:focus,
@@ -275,7 +275,7 @@
       height: 22px;
     }
   }
-  .dropdown-menu {
+  .firechat-dropdown-menu {
     .clearfix();
     .border-radii(0, 4px, 4px, 0);
     z-index: 1000;
@@ -298,13 +298,13 @@
     padding: 0;
     margin: -1px 0 0;
   }
-  .dropdown-menu ul {
+  .firechat-dropdown-menu ul {
     background-color: #ffffff;
     list-style: none;
     overflow-y: scroll;
     max-height: 300px;
   }
-  .dropdown-menu ul > li > a {
+  .firechat-dropdown-menu ul > li > a {
     display: block;
     padding: 1px 1px 1px 3px;
     clear: both;
@@ -313,36 +313,36 @@
     color: #333333;
     white-space: nowrap;
   }
-  .dropdown-menu ul > li > a.highlight {
+  .firechat-dropdown-menu ul > li > a.highlight {
     background-color: #d9edf7;
   }
-  .dropdown-menu ul > li > a:hover,
-  .dropdown-menu ul > li > a:focus,
-  .dropdown-menu ul > .active > a,
-  .dropdown-menu ul > .active > a:hover,
-  .dropdown-menu ul > .active > a:focus {
+  .firechat-dropdown-menu ul > li > a:hover,
+  .firechat-dropdown-menu ul > li > a:focus,
+  .firechat-dropdown-menu ul > .active > a,
+  .firechat-dropdown-menu ul > .active > a:hover,
+  .firechat-dropdown-menu ul > .active > a:focus {
     text-decoration: none;
     color: #000000;
     background-color: #d9edf7;
     outline: 0;
   }
-  .dropdown-menu ul > .disabled > a,
-  .dropdown-menu ul > .disabled > a:hover,
-  .dropdown-menu ul > .disabled > a:focus {
+  .firechat-dropdown-menu ul > .disabled > a,
+  .firechat-dropdown-menu ul > .disabled > a:hover,
+  .firechat-dropdown-menu ul > .disabled > a:focus {
     color: #999999;
     text-decoration: none;
     background-color: transparent;
     background-image: none;
     cursor: default;
   }
-  .dropdown-header {
+  .firechat-dropdown-header {
     position: relative;
     width: 100%;
     padding: 10px 0;
     background-color: #eeeeee;
     border-bottom: 1px solid #cccccc;
   }
-  .dropdown-footer {
+  .firechat-dropdown-footer {
     position: relative;
     width: 100%;
     padding: 10px 0px;
@@ -353,13 +353,13 @@
   .open {
     *z-index: 1000;
   }
-  .open > .dropdown-menu {
+  .open > .firechat-dropdown-menu {
     display: block;
     border: 1px solid #cccccc;
     .border-radii(0, 4px, 4px, 0);
   }
 
-  .open > .dropdown-toggle {
+  .open > .firechat-dropdown-toggle {
     outline: none;
     text-decoration: none;
     .border-radii(4px, 0, 0, 4px);
@@ -658,7 +658,7 @@
     vertical-align: middle;
     padding-bottom: 5px;
   }
-  .tab-pane-menu .dropdown {
+  .tab-pane-menu .firechat-dropdown {
     margin: 5px 0 0 5px;
   }
   .tab-pane-menu > .icon {

diff --git a/templates/layout-full.html b/templates/layout-full.html
@@ -2,39 +2,39 @@
   <div id='firechat-header' class='clearfix'>
     <div class='clearfix'>
 
-      <div class='half dropdown' style=''>
-        <a id='firechat-btn-rooms' class='dropdown-toggle btn full' data-toggle="dropdown" href='#'>
+      <div class='half firechat-dropdown' style=''>
+        <a id='firechat-btn-rooms' class='firechat-dropdown-toggle btn full' data-toggle="firechat-dropdown" href='#'>
           <span class='icon user-chat'></span>
           Chat Rooms
           <span class='caret'></span>
         </a>
-        <div class='dropdown-menu full' role='menu'>
+        <div class='firechat-dropdown-menu full' role='menu'>
 
           <ul id='firechat-room-list'></ul>
 
-          <div class='dropdown-footer aligncenter'>
+          <div class='firechat-dropdown-footer aligncenter'>
             <button type='button' class='btn twothird center' id='firechat-btn-create-room-prompt'>Create Room</button>
           </div>
 
         </div>
 
       </div>
-      <div class='half dropdown' style=''>
-        <a data-event='firechat-user-search-btn' class='btn full dropdown-toggle' data-toggle="dropdown" href='#'>
+      <div class='half firechat-dropdown' style=''>
+        <a data-event='firechat-user-search-btn' class='btn full firechat-dropdown-toggle' data-toggle="firechat-dropdown" href='#'>
           <span class='icon user-group'></span>
           Visitors
           <span class='caret'></span>
         </a>
-        <div class='dropdown-menu' role='menu'>
-          <div class='dropdown-header aligncenter clearfix'>
+        <div class='firechat-dropdown-menu' role='menu'>
+          <div class='firechat-dropdown-header aligncenter clearfix'>
             <div class='search-wrapper'>
               <span class='icon search'></span>
               <input type='text' data-event='firechat-user-search' data-template='templates/user-search-list-item.html' data-target='firechat-user-search' data-controls='firechat-user-search-controls' class='center fivesixth'>
             </div>
           </div>
           <ul id='firechat-user-search'></ul>
 
-          <div class='dropdown-footer aligncenter clearfix'>
+          <div class='firechat-dropdown-footer aligncenter clearfix'>
             <div id='firechat-user-search-controls' class='clearfix'>
               <span class="quarter"></span>
               <button type='button' class='btn half' data-event='firechat-user-search' data-toggle='firechat-pagination-next' data-template='templates/user-search-list-item.html' data-target='firechat-user-search' data-controls='firechat-user-search-controls' disabled=disabled>Next</button>

diff --git a/templates/tab-content.html b/templates/tab-content.html
@@ -1,34 +1,34 @@
 <div id='<%- id %>' data-room-id='<%- id %>' class='tab-pane'>
   <div class='tab-pane-menu clearfix'>
 
-    <div class='dropdown twofifth'>
-      <a data-event='firechat-user-room-list-btn' class='full btn dropdown-toggle' data-toggle="dropdown" href='#' data-target='firechat-room-user-list-<%- id %>'>
+    <div class='firechat-dropdown twofifth'>
+      <a data-event='firechat-user-room-list-btn' class='full btn firechat-dropdown-toggle' data-toggle="firechat-dropdown" href='#' data-target='firechat-room-user-list-<%- id %>'>
         <span class='icon user-group'></span>
         In Room
         <span class='caret'></span>
       </a>
-      <div class='dropdown-menu' role='menu'>
+      <div class='firechat-dropdown-menu' role='menu'>
         <ul id='firechat-room-user-list-<%- id %>' class='full'></ul>
       </div>
     </div>
 
-    <div class='dropdown twofifth'>
-      <a data-event='firechat-user-search-btn' class='full btn dropdown-toggle' data-toggle="dropdown" href='#'>
+    <div class='firechat-dropdown twofifth'>
+      <a data-event='firechat-user-search-btn' class='full btn firechat-dropdown-toggle' data-toggle="firechat-dropdown" href='#'>
         <span class='icon plus'>+</span>
         Invite
         <span class='caret'></span>
       </a>
 
-      <div class='dropdown-menu' role='menu'>
-        <div class='dropdown-header aligncenter clearfix'>
+      <div class='firechat-dropdown-menu' role='menu'>
+        <div class='firechat-dropdown-header aligncenter clearfix'>
           <div class='search-wrapper'>
             <span class='icon search'></span>
             <input type='text' data-event='firechat-user-search' data-template='templates/room-user-search-list-item.html' data-target='firechat-room-user-search-<%- id %>' data-controls='firechat-room-user-search-controls-<%- id %>' class='center fivesixth'>
           </div>
         </div>
         <ul id='firechat-room-user-search-<%- id %>'></ul>
 
-        <div class='dropdown-footer aligncenter clearfix'>
+        <div class='firechat-dropdown-footer aligncenter clearfix'>
           <div id='firechat-room-user-search-controls-<%- id %>' class='clearfix'>
 
             <span class="quarter"></span>

diff --git a/templates/tab-menu-item.html b/templates/tab-menu-item.html
@@ -1,3 +1,3 @@
 <li data-room-id='<%- id %>'>
-  <a href='#<%- id %>' data-toggle='tab' title='<%- name %>'><%- name %></a>
+  <a href='#<%- id %>' data-toggle='firechat-tab' title='<%- name %>'><%- name %></a>
 </li>