Merge pull request #1109 from Dogfalo/dropdown/sibling

Dropdown/sibling
Dogfalo · Apr 6, 2015 · 1e2cde9 · 1e2cde9
2 parents 9591f6d + 48e5368
commit 1e2cde9
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 63 deletions.
diff --git a/bin/materialize.css b/bin/materialize.css
@@ -5675,9 +5675,6 @@ button.btn-floating {
   .btn-large i {
     font-size: 1.6rem; }
 
-.dropdown-button {
-  position: relative; }
-
 .dropdown-content {
   background-color: #FFFFFF;
   margin: 0;

diff --git a/bin/materialize.js b/bin/materialize.js
diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
@@ -5675,9 +5675,6 @@ button.btn-floating {
   .btn-large i {
     font-size: 1.6rem; }
 
-.dropdown-button {
-  position: relative; }
-
 .dropdown-content {
   background-color: #FFFFFF;
   margin: 0;

diff --git a/js/dropdown.js b/js/dropdown.js
@@ -42,15 +42,7 @@
     updateOptions();
 
     // Attach dropdown to its activator
-    if (origin.hasClass('select-dropdown')) {
-      origin.after(activates)
-    }
-    else {
-      origin.append(activates);
-    }
-
-
-
+    origin.after(activates);
 
     /*
       Helper function to position and resize dropdown.
@@ -60,6 +52,9 @@
       // Check html data attributes
       updateOptions();
 
+      // Set Dropdown state
+      activates.addClass('active');
+
       // Constrain width
       if (options.constrain_width == true) {
         activates.css('width', origin.outerWidth());
@@ -71,7 +66,6 @@
 
       // Handle edge alignment
       var offsetLeft = origin.offset().left;
-
       var width_difference = 0;
       var gutter_spacing = options.gutter;
 
@@ -80,23 +74,15 @@
         width_difference = origin.innerWidth() - activates.innerWidth();
         gutter_spacing = gutter_spacing * -1;
       }
-      // If fixed placement
-      if (Materialize.elementOrParentIsFixed(origin[0])) {
-        activates.css({
-          top: 0 + offset,
-          left: 0 + width_difference + gutter_spacing
-        });
-      }
-      // If relative placement
-      else {
 
-        activates.css({
-          position: 'absolute',
-          top: 0 + offset,
-          left: 0 + width_difference + gutter_spacing
-        });
+      // Position dropdown
+      activates.css({
+        position: 'absolute',
+        top: origin.position().top + offset,
+        left: origin.position().left + width_difference + gutter_spacing
+      });
+
 
-      }
 
       // Show dropdown
       activates.stop(true, true).css('opacity', 0)
@@ -109,59 +95,62 @@
         }
       })
         .animate( {opacity: 1}, {queue: false, duration: options.inDuration, easing: 'easeOutSine'});
-
-
     }
 
-
     function hideDropdown() {
       activates.fadeOut(options.outDuration);
+      activates.removeClass('active');
     }
 
-    activates.on('hover', function(e) {
-      e.stopPropagation();
-    });
-
     // Hover
     if (options.hover) {
+      var open = false;
       origin.unbind('click.' + origin.attr('id'));
       // Hover handler to show dropdown
       origin.on('mouseenter', function(e){ // Mouse over
-        placeDropdown();
+        if (open === false) {
+          placeDropdown();
+          open = true
+        }
+      });
+      origin.on('mouseleave', function(e){
+        // If hover on origin then to something other than dropdown content, then close
+        if(!$(e.toElement).closest('.dropdown-content').is(activates)) {
+          activates.stop(true, true);
+          hideDropdown();
+          open = false;
+        }
       });
 
-      origin.on('mouseleave', function(e){ // Mouse out
-        activates.stop(true, true);
-        hideDropdown();
+      activates.on('mouseleave', function(e){ // Mouse out
+        if(!$(e.toElement).closest('.dropdown-button').is(origin)) {
+          activates.stop(true, true);
+          hideDropdown();
+          open = false;
+        }
       });
 
     // Click
     } else {
-      var open = false;
 
       // Click handler to show dropdown
       origin.unbind('click.' + origin.attr('id'));
       origin.bind('click.'+origin.attr('id'), function(e){
-        // Handles case for select plugin
-        if (origin.hasClass('select-dropdown')) {
-          return false;
-        }
+
         if ( origin[0] == e.currentTarget && ($(e.target).closest('.dropdown-content').length === 0) ) {
           e.preventDefault(); // Prevents button click from moving window
           placeDropdown();
-          open = true;
 
         }
         // If origin is clicked and menu is open, close menu
         else {
-          if (open === true) {
+          if (origin.hasClass('active')) {
             hideDropdown();
             $(document).unbind('click.' + activates.attr('id'));
-            open = false;
           }
         }
         // If menu open, add click close handler to document
-        if (open === true) {
+        if (activates.hasClass('active')) {
           $(document).bind('click.'+ activates.attr('id'), function (e) {
             if (!activates.is(e.target) && !origin.is(e.target) && (!origin.find(e.target).length > 0) ) {
               hideDropdown();

diff --git a/sass/components/_dropdown.scss b/sass/components/_dropdown.scss
@@ -1,6 +1,3 @@
-.dropdown-button {
-  position: relative;
-}
 .dropdown-content {
   @extend .z-depth-1;
   background-color: #FFFFFF;

diff --git a/test/html/dropdown.html b/test/html/dropdown.html
@@ -36,13 +36,18 @@
                 </a>
             </li>
             <li>
-                <a style="position: relative;" class="dropdown-button" href="#!" data-activates="2" id="button2">
-                    Relative<i class="mdi-navigation-arrow-drop-down right"></i>
+                <a style="position: relative;" class="dropdown-button" href="#!" data-hover="true" data-activates="11" id="button11">
+                    Relative Hover<i class="mdi-navigation-arrow-drop-down right"></i>
                 </a>
             </li>
             <li>
-                <a class="dropdown-button" href="#!" data-activates="3" id="button3">
-                    Long<i class="mdi-navigation-arrow-drop-down right"></i>
+                <a style="position: relative;" class="dropdown-button" href="#!" data-beloworigin="true" data-hover="true" data-activates="2" id="button2">
+                    Relative Under Origin<i class="mdi-navigation-arrow-drop-down right"></i>
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-button" href="#!"  data-hover="true" data-beloworigin="true" data-activates="3" id="button3">
+                    Long Under Origin<i class="mdi-navigation-arrow-drop-down right"></i>
                 </a>
             </li>
         </ul>
@@ -63,8 +68,8 @@
                 </a>
             </li>
             <li>
-                <a class="dropdown-button" href="#!" data-activates="6" id="button6">
-                    Long<i class="mdi-navigation-arrow-drop-down right"></i>
+                <a class="dropdown-button waves-effect" href="#!" data-activates="6" id="button6">
+                    Overflow Hidden With Waves<i class="mdi-navigation-arrow-drop-down right"></i>
                 </a>
             </li>
         </ul>
@@ -323,6 +328,20 @@
         <a href="http://myapp.dev/things/manage">Very Long Menu Item That Should Overflow</a>
     </li>
 </ul>
+<ul id="11" class="dropdown-content">
+    <li>
+        <a href="http://myapp.dev/admin/users">Users</a>
+    </li>
+    <li>
+        <a href="http://myapp.dev/admin/user/create">Create User</a>
+    </li>
+    <li>
+        <a href="http://myapp.dev/admin/invitations/new">Invite User</a>
+    </li>
+    <li>
+        <a href="http://myapp.dev/things/manage">Very Long Menu Item That Should Overflow</a>
+    </li>
+</ul>