Skip to content

Commit

Permalink
add possibility to modify collapase, in and collapsing default classes
Browse files Browse the repository at this point in the history
  • Loading branch information
borja andrés committed Jun 16, 2015
1 parent 0226b2a commit ff89650
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 31 deletions.
34 changes: 34 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,40 @@ Default: `active`
});
```

#### collapseClass
Type: `String`
Default: `collapse`


```javascript
$("#menu").metisMenu({
collapseClass: 'collapse'
});
```

#### collapseInClass
Type: `String`
Default: `in`


```javascript
$("#menu").metisMenu({
collapseInClass: 'in'
});
```


#### collapsingClass
Type: `String`
Default: `collapsing`


```javascript
$("#menu").metisMenu({
collapsingClass: 'collapsing'
});
```

### Testing
```bash
npm install
Expand Down
41 changes: 26 additions & 15 deletions dist/metisMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,27 +74,32 @@
MetisMenu.DEFAULTS = {
toggle: true,
doubleTapToGo: false,
activeClass: 'active'
activeClass: 'active',
collapseClass: 'collapse',
collapseInClass: 'in',
collapsingClass: 'collapsing'
};

MetisMenu.prototype.init = function() {
var $this = this;
var activeClass = this.options.activeClass;
var collapseClass = this.options.collapseClass;
var collapseInClass = this.options.collapseInClass;

this
.$element
.find('li.' + activeClass)
.has('ul')
.children('ul')
.addClass('collapse in');
.addClass(collapseClass + ' ' + collapseInClass);

this
.$element
.find('li')
.not('.' + activeClass)
.has('ul')
.children('ul')
.addClass('collapse');
.addClass(collapseClass);

//add the 'doubleTapToGo' class to active items if needed
if (this.options.doubleTapToGo) {
Expand Down Expand Up @@ -156,28 +161,31 @@

MetisMenu.prototype.show = function(el) {
var activeClass = this.options.activeClass;
var collapseClass = this.options.collapseClass;
var collapseInClass = this.options.collapseInClass;
var collapsingClass = this.options.collapsingClass;
var $this = $(el);
var $parent = $this.parent('li');
if (this.transitioning || $this.hasClass('in')) {
if (this.transitioning || $this.hasClass(collapseInClass)) {
return;
}

$parent.addClass(activeClass);

if (this.options.toggle) {
this.hide($parent.siblings().children('ul.in'));
this.hide($parent.siblings().children('ul.' + collapseInClass));
}

$this
.removeClass('collapse')
.addClass('collapsing')
.removeClass(collapseClass)
.addClass(collapsingClass)
.height(0);

this.transitioning = 1;
var complete = function() {
$this
.removeClass('collapsing')
.addClass('collapse in')
.removeClass(collapsingClass)
.addClass(collapseClass + ' ' + collapseInClass)
.height('');
this.transitioning = 0;
};
Expand All @@ -192,27 +200,30 @@

MetisMenu.prototype.hide = function(el) {
var activeClass = this.options.activeClass;
var collapseClass = this.options.collapseClass;
var collapseInClass = this.options.collapseInClass;
var collapsingClass = this.options.collapsingClass;
var $this = $(el);

if (this.transitioning || !$this.hasClass('in')) {
if (this.transitioning || !$this.hasClass(collapseInClass)) {
return;
}

$this.parent('li').removeClass(activeClass);
$this.height($this.height())[0].offsetHeight;

$this
.addClass('collapsing')
.removeClass('collapse')
.removeClass('in');
.addClass(collapsingClass)
.removeClass(collapseClass)
.removeClass(collapseInClass);

this.transitioning = 1;

var complete = function() {
this.transitioning = 0;
$this
.removeClass('collapsing')
.addClass('collapse');
.removeClass(collapsingClass)
.addClass(collapseClass);
};

if (!$transition) {
Expand Down
2 changes: 1 addition & 1 deletion dist/metisMenu.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

41 changes: 26 additions & 15 deletions src/metisMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,27 +65,32 @@
MetisMenu.DEFAULTS = {
toggle: true,
doubleTapToGo: false,
activeClass: 'active'
activeClass: 'active',
collapseClass: 'collapse',
collapseInClass: 'in',
collapsingClass: 'collapsing'
};

MetisMenu.prototype.init = function() {
var $this = this;
var activeClass = this.options.activeClass;
var collapseClass = this.options.collapseClass;
var collapseInClass = this.options.collapseInClass;

this
.$element
.find('li.' + activeClass)
.has('ul')
.children('ul')
.addClass('collapse in');
.addClass(collapseClass + ' ' + collapseInClass);

this
.$element
.find('li')
.not('.' + activeClass)
.has('ul')
.children('ul')
.addClass('collapse');
.addClass(collapseClass);

//add the 'doubleTapToGo' class to active items if needed
if (this.options.doubleTapToGo) {
Expand Down Expand Up @@ -147,28 +152,31 @@

MetisMenu.prototype.show = function(el) {
var activeClass = this.options.activeClass;
var collapseClass = this.options.collapseClass;
var collapseInClass = this.options.collapseInClass;
var collapsingClass = this.options.collapsingClass;
var $this = $(el);
var $parent = $this.parent('li');
if (this.transitioning || $this.hasClass('in')) {
if (this.transitioning || $this.hasClass(collapseInClass)) {
return;
}

$parent.addClass(activeClass);

if (this.options.toggle) {
this.hide($parent.siblings().children('ul.in'));
this.hide($parent.siblings().children('ul.' + collapseInClass));
}

$this
.removeClass('collapse')
.addClass('collapsing')
.removeClass(collapseClass)
.addClass(collapsingClass)
.height(0);

this.transitioning = 1;
var complete = function() {
$this
.removeClass('collapsing')
.addClass('collapse in')
.removeClass(collapsingClass)
.addClass(collapseClass + ' ' + collapseInClass)
.height('');
this.transitioning = 0;
};
Expand All @@ -183,27 +191,30 @@

MetisMenu.prototype.hide = function(el) {
var activeClass = this.options.activeClass;
var collapseClass = this.options.collapseClass;
var collapseInClass = this.options.collapseInClass;
var collapsingClass = this.options.collapsingClass;
var $this = $(el);

if (this.transitioning || !$this.hasClass('in')) {
if (this.transitioning || !$this.hasClass(collapseInClass)) {
return;
}

$this.parent('li').removeClass(activeClass);
$this.height($this.height())[0].offsetHeight;

$this
.addClass('collapsing')
.removeClass('collapse')
.removeClass('in');
.addClass(collapsingClass)
.removeClass(collapseClass)
.removeClass(collapseInClass);

this.transitioning = 1;

var complete = function() {
this.transitioning = 0;
$this
.removeClass('collapsing')
.addClass('collapse');
.removeClass(collapsingClass)
.addClass(collapseClass);
};

if (!$transition) {
Expand Down

0 comments on commit ff89650

Please sign in to comment.