Skip to content

Commit

Permalink
Dropdown smooth animation and toggler issue
Browse files Browse the repository at this point in the history 
- Dropdown smooth animation
- Dropdown toggler issue in device ( Shows dot below dropdown )
  • Loading branch information
@sunil-digicorp
sunil-digicorp committed Mar 6, 2017
1 parent fa8fce9 commit 26f7356
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 43 deletions.
5 changes: 3 additions & 2 deletions components/dropdown/css/dropdown.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@

/*!
* Propeller v1.0.0 (http://propeller.in)
* Propeller v1.0.0 (http://propeller.in): dropdown.css
* Copyright 2016-2017 Digicorp, Inc.
* Licensed under MIT (http://propeller.in/LICENSE)
*/

/* Dropdown container */
.pmd-dropdown-menu-container{position: absolute; z-index: 999;}
.pmd-dropdown-menu-bg{background-color: hsl(0, 0%, 100%); border: 1px solid hsl(0, 0%, 100%); border-radius: 0; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .175); box-shadow: 0 0 5px rgba(0, 0, 0, .175);}
.pmd-dropdown-menu-bg{background-color: hsl(0, 0%, 100%); border: 1px solid hsl(0, 0%, 100%); border-radius: 0; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .175); box-shadow: 0 0 5px rgba(0, 0, 0, .175); border:none;}
.pmd-dropdown-menu-bg{background-color: #fff; transform: scale(0); transform-origin:left top; transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s, opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s; will-change: transform; position: absolute;}
.pmd-dropdown .dropdown-menu { background-color:transparent; top:0; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow:none; opacity:0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; clip:rect(0 0 0 0);}

Expand Down
101 changes: 60 additions & 41 deletions components/dropdown/js/dropdown.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@

/*!
* Propeller v1.0.0 (http://propeller.in)
* Propeller v1.0.0 (http://propeller.in): dropdown.js
* Copyright 2016-2017 Digicorp, Inc.
* Licensed under MIT (http://propeller.in/LICENSE)
*/

// Dropdown -----------------------------------------------------------------//
(function($) {
$('.pmd-dropdown .dropdown-menu').wrap( "<div class='pmd-dropdown-menu-container'></div>" );
$('.pmd-dropdown .dropdown-menu').before('<div class="pmd-dropdown-menu-bg"></div>');

var dropdown = $('.pmd-dropdown');
var pmdsidebardropdown = function() {
if ( $(window).width() < 767) {
var w = dropdown.find('.dropdown-menu').outerWidth();
var h = dropdown.find('.dropdown-menu').outerHeight();
dropdown.find('.dropdown-menu-right').css("clip","rect(0 "+w+"px 0 "+w+"px)");
dropdown.find('.pmd-dropdown-menu-top-left').css("clip","rect("+h+"px 0 "+h+"px 0)");
dropdown.find('.pmd-dropdown-menu-top-right').css("clip","rect("+h+"px "+w+"px "+h+"px "+w+"px)");
// Add slidedown animation to dropdown
dropdown.off('show.bs.dropdown');
dropdown.on('show.bs.dropdown', function(e){
dropdown.on('show.bs.dropdown', function(){
var that = $(this).find('.dropdown-menu');
var w = that.outerWidth();
var h = that.outerHeight();
var dcdmc = that.closest('.pmd-dropdown-menu-container');
var dcdmbg = dcdmc.find('.pmd-dropdown-menu-bg');
$dataSidebar = $(this).find('.dropdown-toggle').attr("data-sidebar");
var $dataSidebar = $(this).find('.dropdown-toggle').attr("data-sidebar");
var dropdowncenter = that.hasClass('pmd-dropdown-menu-center');
if ( $dataSidebar == 'true') {
that.first().stop(true, true).slideDown(300);
Expand All @@ -28,25 +34,36 @@
$('.dropdown-menu').removeAttr('style');
that.first().stop(true, true).slideDown(300);
} else {
// that.first().stop(true, true).show();
dcdmc.css({'width':w + 'px', 'height':h + 'px'}, 0);
dcdmc.find('.pmd-dropdown-menu-bg').css({'width':w + 'px', 'height':h + 'px'});
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
dcdmc.css({'width':w + 'px', 'height':h + 'px'});
dcdmbg.css({'width':w + 'px', 'height':h + 'px'});
if( that.hasClass('dropdown-menu-right')){
dcdmbg.addClass('pmd-dropdown-menu-bg-right');
dcdmc.css({"right":"0", "left":"auto"})
setTimeout( function(){
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
}, 10);
dcdmbg.addClass('pmd-dropdown-menu-bg-right');
dcdmc.css({"right":"0", "left":"auto"})
} else if (that.hasClass('pmd-dropdown-menu-top-left')){
setTimeout( function(){
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
},10);
dcdmbg.addClass('pmd-dropdown-menu-bg-bottom-left');
} else if (that.hasClass('pmd-dropdown-menu-top-right')){
setTimeout( function(){
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
},10);
dcdmbg.addClass('pmd-dropdown-menu-bg-bottom-right');
dcdmc.css({"right":"0", "left":"auto"})
}
} else {
setTimeout( function(){
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
},10);
}
}
});
// Add slideup animation to dropdown
dropdown.off('hide.bs.dropdown');
dropdown.on('hide.bs.dropdown', function(e){
$dataSidebar = $(this).find('.dropdown-toggle').attr("data-sidebar");
dropdown.on('hide.bs.dropdown', function(){
var $dataSidebar = $(this).find('.dropdown-toggle').attr("data-sidebar");
var dropdowncenter = $(this).find('.dropdown-menu').hasClass('pmd-dropdown-menu-center');
var that = $(this).find('.dropdown-menu');
var w = that.outerWidth();
Expand All @@ -62,28 +79,33 @@
that.css("clip","rect(0 0 0 0)");
dcdmc.removeAttr('style');
dcdmbg.removeAttr('style');
if(that.hasClass('dropdown-menu-right')){
if( that.hasClass('dropdown-menu-right')){
that.css("clip","rect(0 "+w+"px 0 "+w+"px)");
} else if (that.hasClass('pmd-dropdown-menu-top-left')){
that.css("clip","rect("+h+"px 0 "+h+"px 0)");
} else if (that.hasClass('pmd-dropdown-menu-top-right')){
that.css("clip","rect(0 "+w+"px 0 "+w+"px)");
that.css("clip","rect("+h+"px "+w+"px "+h+"px "+w+"px)");
}
}
});
} else {
// Add slidedown animation to dropdown
$('.dropdown-menu').removeAttr('style');
var we = dropdown.find('.dropdown-menu').outerWidth();
var he = dropdown.find('.dropdown-menu').outerHeight();
dropdown.find('.dropdown-menu-right').css("clip","rect(0 "+we+"px 0 "+we+"px)");
dropdown.find('.pmd-dropdown-menu-top-left').css("clip","rect("+he+"px 0 "+he+"px 0)");
dropdown.find('.pmd-dropdown-menu-top-right').css("clip","rect("+he+"px "+we+"px "+he+"px "+we+"px)");

dropdown.off('show.bs.dropdown');
dropdown.on('show.bs.dropdown', function(e){
// $('.dropdown-menu').css({'clip':'rect(0 0 0 0)'});
$dataSidebar = $(this).find('.dropdown-toggle').attr("data-sidebar");
dropdown.on('show.bs.dropdown', function(){
var hassidebar = $(this).closest('.pmd-sidebar').hasClass('pmd-sidebar');
var dropdowncenter = $(this).find('.dropdown-menu').hasClass('pmd-dropdown-menu-center');
var that = $(this).find('.dropdown-menu');
var w = that.outerWidth();
var h = that.outerHeight();
var dcdmc = that.closest('.pmd-dropdown-menu-container');
var dcdmbg = dcdmc.find('.pmd-dropdown-menu-bg');

if (hassidebar) {
that.first().stop(true, true).slideDown();
} else if ( dropdowncenter ) {
Expand All @@ -92,38 +114,38 @@
}
that.first().stop(true, true).slideDown();
} else {
// that.show();
if(!$(this).parents().hasClass("pmd-sidebar")){
$('.dropdown-menu').removeAttr('style');
$('.pmd-sidebar .open .dropdown-menu').css('display','block');
}
dcdmc.css({'width':w + 'px', 'height':h + 'px'}, 200);
dcdmc.css({'width':w + 'px', 'height':h + 'px'});
dcdmbg.css({'width':w + 'px', 'height':h + 'px'});
if( that.hasClass('dropdown-menu-right')){
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
dcdmbg.addClass('pmd-dropdown-menu-bg-right');
dcdmc.css({"right":"0", "left":"auto"})
setTimeout( function(){
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
}, 10);
dcdmbg.addClass('pmd-dropdown-menu-bg-right');
dcdmc.css({"right":"0", "left":"auto"})
} else if (that.hasClass('pmd-dropdown-menu-top-left')){
setTimeout( function(){
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
},10);
dcdmbg.addClass('pmd-dropdown-menu-bg-bottom-left');
} else if (that.hasClass('pmd-dropdown-menu-top-right')){
setTimeout( function(){
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
},10);
dcdmbg.addClass('pmd-dropdown-menu-bg-bottom-right');
dcdmc.css({"right":"0", "left":"auto"})
} else {
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
setTimeout( function(){
that.css("clip","rect(0 "+w+"px "+h+"px 0)");
},10);
}
}
this.closable = false;
});
dropdown.on('click', function(e){
// $('.dropdown-menu').removeAttr('style');
dropdown.on('click', function(){
var hassidebar = $(this).closest('.pmd-sidebar').hasClass('pmd-sidebar');
var that = $(this).find('.dropdown-menu');
if (hassidebar && !$(this).hasClass("open")) {
dropdown.removeClass("open");
$('.dropdown-menu').slideUp(300);
// $(this).addClass("open");
}else if($(this).parents("aside").hasClass("pmd-sidebar")){
$('.dropdown-menu').slideUp(300);
}
Expand All @@ -132,12 +154,11 @@
});
// Add slideup animation to dropdown
dropdown.off('hide.bs.dropdown');
dropdown.on('hide.bs.dropdown', function(e){
dropdown.on('hide.bs.dropdown', function(){
if($(this).parents("aside").hasClass("pmd-sidebar")) {
return this.closable;
}
else{
$dataSidebar = $(this).find('.dropdown-toggle').attr("data-sidebar");
var hassidebar = $(this).closest('.pmd-sidebar').hasClass('pmd-sidebar');
var dropdowncenter = $(this).find('.dropdown-menu').hasClass('pmd-dropdown-menu-center');
var that = $(this).find('.dropdown-menu');
Expand All @@ -154,17 +175,15 @@
}
that.first().stop(true, true).slideUp(300);
} else {
if(!$(this).parents().hasClass("pmd-sidebar")){
$('.dropdown-menu').removeAttr('style');
$('.pmd-sidebar .open .dropdown-menu').css('display','block');
}
that.css("clip","rect(0 0 0 0)");
dcdmc.removeAttr('style');
dcdmbg.removeAttr('style');
if(that.hasClass('dropdown-menu-right')){
if( that.hasClass('dropdown-menu-right')){
that.css("clip","rect(0 "+w+"px 0 "+w+"px)");
} else if (that.hasClass('pmd-dropdown-menu-top-left')){
that.css("clip","rect("+h+"px 0 "+h+"px 0)");
} else if (that.hasClass('pmd-dropdown-menu-top-right')){
that.css("clip","rect(0 "+w+"px 0 "+w+"px)");
that.css("clip","rect("+h+"px "+w+"px "+h+"px "+w+"px)");
}
}
}
Expand Down

0 comments on commit 26f7356

Please sign in to comment.