Socket
Socket
Sign inDemoInstall

bigslide

Package Overview
Dependencies
0
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.10.0 to 0.11.0

2

bigSlide.jquery.json

@@ -5,3 +5,3 @@ {

"description": "A tiny jQuery plugin for creating off-screen slide panel navigation.",
"version": "0.10.0",
"version": "0.11.0",
"homepage": "http://ascott1.github.io/bigSlide.js/",

@@ -8,0 +8,0 @@ "author": {

2

bower.json
{
"name": "bigSlide",
"version": "0.10.0",
"version": "0.11.0",
"homepage": "http://ascott1.github.io/bigSlide.js/",

@@ -5,0 +5,0 @@ "authors": [

100

dist/bigSlide.js

@@ -1,2 +0,2 @@

/*! bigSlide - v0.10.0 - 2016-03-30
/*! bigSlide - v0.11.0 - 2016-04-13
* http://ascott1.github.io/bigSlide.js/

@@ -53,4 +53,6 @@ * Copyright (c) 2016 Adam D. Scott; Licensed MIT */

'shrink': ('.shrink'),
'hiddenThin': ('.hiddenThin'),
'side': 'left',
'menuWidth': '15.625em',
'semiOpenMenuWidth': '4em',
'speed': '300',

@@ -61,2 +63,4 @@ 'state': 'closed',

'saveState': false,
'semiOpenStatus': false,
'semiOpenScreenWidth': 480,
'beforeOpen': function () {},

@@ -124,3 +128,5 @@ 'afterOpen': function() {},

this.$shrink = $(settings.shrink);
this.$hiddenThin = $(settings.hiddenThin);
this.width = settings.menuWidth;
this.semiOpenMenuWidth = settings.semiOpenMenuWidth;

@@ -174,9 +180,23 @@ // CSS for how the menu will be positioned off screen

this.$menu.css(positionOffScreen);
var initialScreenWidth = $(window).width();
if (initialState === 'closed') {
this.$push.css(settings.side, '0');
if (settings.semiOpenStatus && initialScreenWidth > settings.semiOpenScreenWidth) {
this.$hiddenThin.hide();
this.$menu.css(settings.side, '0');
this.$menu.css('width', this.semiOpenMenuWidth);
this.$push.css(settings.side, this.semiOpenMenuWidth);
this.$shrink.css({
'width': 'calc(100% - ' + this.semiOpenMenuWidth + ')'
});
this.$menu.addClass('semiOpen');
} else {
this.$push.css(settings.side, '0');
}
} else if (initialState === 'open') {
this.$menu.css(settings.side, '0');
this.$push.css(settings.side, this.width);
this.$shrink.css('width', '100%').css('width', '-=' + this.$menu.width());
this.$shrink.css({
'width': 'calc(100% - ' + this.width + ')'
});
menuLink.addClass(settings.activeBtn);

@@ -205,2 +225,30 @@ }

// register a window resize listener for tracking the semi open status states
// This could be more efficently or even there are people that could consider it unnecessary. We can think about it
if (settings.semiOpenStatus) {
$(window).resize(function() {
var screenWidth = $(window).width();
if (screenWidth > settings.semiOpenScreenWidth) {
if (controller.getState() === 'closed') {
that.$hiddenThin.hide();
that.$menu.css({ width: that.semiOpenMenuWidth});
that.$menu.css(settings.side, '0');
that.$push.css(settings.side, that.semiOpenMenuWidth);
that.$shrink.css({
'width': 'calc(100% - ' + that.semiOpenMenuWidth + ')'
});
that.$menu.addClass('semiOpen');
}
} else {
that.$menu.removeClass('semiOpen');
if (controller.getState() === 'closed') {
that.$menu.css(settings.side, '-' + that.width).css({width: that.width});
that.$push.css(settings.side, '0');
that.$shrink.css('width', '100%');
that.$hiddenThin.show();
}
}
});
}
// this makes my eyes bleed, but adding it back in as it's a highly requested feature

@@ -251,5 +299,3 @@ if (settings.easyClose) {

controller.changeState();
this.$menu.css(settings.side, '0');
this.$push.css(settings.side, this.width);
this.$shrink.css('width', '100%').css('width', '-=' + this.$menu.width());
view.applyOpenStyles();
menuLink.addClass(settings.activeBtn);

@@ -268,5 +314,3 @@ settings.afterOpen();

controller.changeState();
this.$menu.css(settings.side, '-' + this.width);
this.$push.css(settings.side, '0');
this.$shrink.css('width', '100%');
view.applyClosedStyles();
menuLink.removeClass(settings.activeBtn);

@@ -279,2 +323,38 @@ settings.afterClose();

}
},
applyOpenStyles: function() {
var screenWidth = $(window).width();
if (settings.semiOpenStatus && screenWidth > settings.semiOpenScreenWidth) {
this.$hiddenThin.show();
this.$menu.animate({ width: this.width}, {duration: Math.abs(settings.speed - 100), easing: 'linear'});
this.$push.css(settings.side, this.width);
this.$shrink.css({
'width': 'calc(100% - ' + this.width + ')'
});
this.$menu.removeClass('semiOpen');
} else {
this.$menu.css(settings.side, '0');
this.$push.css(settings.side, this.width);
this.$shrink.css({
'width': 'calc(100% - ' + this.width + ')'
});
}
},
applyClosedStyles: function() {
var screenWidth = $(window).width();
if (settings.semiOpenStatus && screenWidth > settings.semiOpenScreenWidth) {
this.$hiddenThin.hide();
this.$menu.animate({ width: this.semiOpenMenuWidth}, {duration: Math.abs(settings.speed - 100), easing: 'linear'});
this.$push.css(settings.side, this.semiOpenMenuWidth);
this.$shrink.css({
'width': 'calc(100% - ' + this.semiOpenMenuWidth + ')'
});
this.$menu.addClass('semiOpen');
} else {
this.$menu.css(settings.side, '-' + this.width);
this.$push.css(settings.side, '0');
this.$shrink.css('width', '100%');
}
}

@@ -281,0 +361,0 @@

4

dist/bigSlide.min.js

@@ -1,4 +0,4 @@

/*! bigSlide - v0.10.0 - 2016-03-30
/*! bigSlide - v0.11.0 - 2016-04-13
* http://ascott1.github.io/bigSlide.js/
* Copyright (c) 2016 Adam D. Scott; Licensed MIT */
!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(a,b){for(var c,d=a.split(";"),e=b.split(" "),f="",g=0,h=d.length;h>g;g++){c=!0;for(var i=0,j=e.length;j>i;i++)(""===d[g]||-1!==d[g].indexOf(e[i]))&&(c=!1);c&&(f+=d[g]+"; ")}return f}a.fn.bigSlide=function(c){var d=this,e=a.extend({menu:"#menu",push:".push",shrink:".shrink",side:"left",menuWidth:"15.625em",speed:"300",state:"closed",activeBtn:"active",easyClose:!1,saveState:!1,beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){}},c),f="transition -o-transition -ms-transition -moz-transitions webkit-transition "+e.side,g={menuCSSDictionary:f+" position top bottom height width",pushCSSDictionary:f,state:e.state},h={init:function(){i.init()},_destroy:function(){return i._destroy(),delete d.bigSlideAPI,d},changeState:function(){"closed"===g.state?g.state="open":g.state="closed"},setState:function(a){g.state=a},getState:function(){return g.state}},i={init:function(){this.$menu=a(e.menu),this.$push=a(e.push),this.$shrink=a(e.shrink),this.width=e.menuWidth;var b={position:"fixed",top:"0",bottom:"0",height:"100%"},c={"-webkit-transition":e.side+" "+e.speed+"ms ease","-moz-transition":e.side+" "+e.speed+"ms ease","-ms-transition":e.side+" "+e.speed+"ms ease","-o-transition":e.side+" "+e.speed+"ms ease",transition:e.side+" "+e.speed+"ms ease"},f={"-webkit-transition":"all "+e.speed+"ms ease","-moz-transition":"all "+e.speed+"ms ease","-ms-transition":"all "+e.speed+"ms ease","-o-transition":"all "+e.speed+"ms ease",transition:"all "+e.speed+"ms ease"},g=!1;b[e.side]="-"+e.menuWidth,b.width=e.menuWidth;var j="closed";e.saveState?(j=localStorage.getItem("bigSlide-savedState"),j||(j=e.state)):j=e.state,h.setState(j),this.$menu.css(b),"closed"===j?this.$push.css(e.side,"0"):"open"===j&&(this.$menu.css(e.side,"0"),this.$push.css(e.side,this.width),this.$shrink.css("width","100%").css("width","-="+this.$menu.width()),d.addClass(e.activeBtn));var k=this;d.on("click.bigSlide touchstart.bigSlide",function(a){g||(k.$menu.css(c),k.$push.css(c),k.$shrink.css(f),g=!0),a.preventDefault(),"open"===h.getState()?i.toggleClose():i.toggleOpen()}),e.easyClose&&a(document).on("click.bigSlide",function(b){a(b.target).parents().andSelf().is(d)||a(b.target).closest(e.menu).length||"open"!==h.getState()||i.toggleClose()})},_destroy:function(){this.$menu.each(function(){var c=a(this);c.attr("style",b(c.attr("style"),g.menuCSSDictionary).trim())}),this.$push.each(function(){var c=a(this);c.attr("style",b(c.attr("style"),g.pushCSSDictionary).trim())}),this.$shrink.each(function(){var c=a(this);c.attr("style",b(c.attr("style"),g.pushCSSDictionary).trim())}),d.removeClass(e.activeBtn).off("click.bigSlide touchstart.bigSlide"),this.$menu=null,this.$push=null,this.$shrink=null,localStorage.removeItem("bigSlide-savedState")},toggleOpen:function(){e.beforeOpen(),h.changeState(),this.$menu.css(e.side,"0"),this.$push.css(e.side,this.width),this.$shrink.css("width","100%").css("width","-="+this.$menu.width()),d.addClass(e.activeBtn),e.afterOpen(),e.saveState&&localStorage.setItem("bigSlide-savedState","open")},toggleClose:function(){e.beforeClose(),h.changeState(),this.$menu.css(e.side,"-"+this.width),this.$push.css(e.side,"0"),this.$shrink.css("width","100%"),d.removeClass(e.activeBtn),e.afterClose(),e.saveState&&localStorage.setItem("bigSlide-savedState","closed")}};return h.init(),this.bigSlideAPI={settings:e,model:g,controller:h,view:i,destroy:h._destroy},this}});
!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(a,b){for(var c,d=a.split(";"),e=b.split(" "),f="",g=0,h=d.length;h>g;g++){c=!0;for(var i=0,j=e.length;j>i;i++)(""===d[g]||-1!==d[g].indexOf(e[i]))&&(c=!1);c&&(f+=d[g]+"; ")}return f}a.fn.bigSlide=function(c){var d=this,e=a.extend({menu:"#menu",push:".push",shrink:".shrink",hiddenThin:".hiddenThin",side:"left",menuWidth:"15.625em",semiOpenMenuWidth:"4em",speed:"300",state:"closed",activeBtn:"active",easyClose:!1,saveState:!1,semiOpenStatus:!1,semiOpenScreenWidth:480,beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){}},c),f="transition -o-transition -ms-transition -moz-transitions webkit-transition "+e.side,g={menuCSSDictionary:f+" position top bottom height width",pushCSSDictionary:f,state:e.state},h={init:function(){i.init()},_destroy:function(){return i._destroy(),delete d.bigSlideAPI,d},changeState:function(){g.state="closed"===g.state?"open":"closed"},setState:function(a){g.state=a},getState:function(){return g.state}},i={init:function(){this.$menu=a(e.menu),this.$push=a(e.push),this.$shrink=a(e.shrink),this.$hiddenThin=a(e.hiddenThin),this.width=e.menuWidth,this.semiOpenMenuWidth=e.semiOpenMenuWidth;var b={position:"fixed",top:"0",bottom:"0",height:"100%"},c={"-webkit-transition":e.side+" "+e.speed+"ms ease","-moz-transition":e.side+" "+e.speed+"ms ease","-ms-transition":e.side+" "+e.speed+"ms ease","-o-transition":e.side+" "+e.speed+"ms ease",transition:e.side+" "+e.speed+"ms ease"},f={"-webkit-transition":"all "+e.speed+"ms ease","-moz-transition":"all "+e.speed+"ms ease","-ms-transition":"all "+e.speed+"ms ease","-o-transition":"all "+e.speed+"ms ease",transition:"all "+e.speed+"ms ease"},g=!1;b[e.side]="-"+e.menuWidth,b.width=e.menuWidth;var j="closed";e.saveState?(j=localStorage.getItem("bigSlide-savedState"),j||(j=e.state)):j=e.state,h.setState(j),this.$menu.css(b);var k=a(window).width();"closed"===j?e.semiOpenStatus&&k>e.semiOpenScreenWidth?(this.$hiddenThin.hide(),this.$menu.css(e.side,"0"),this.$menu.css("width",this.semiOpenMenuWidth),this.$push.css(e.side,this.semiOpenMenuWidth),this.$shrink.css({width:"calc(100% - "+this.semiOpenMenuWidth+")"}),this.$menu.addClass("semiOpen")):this.$push.css(e.side,"0"):"open"===j&&(this.$menu.css(e.side,"0"),this.$push.css(e.side,this.width),this.$shrink.css({width:"calc(100% - "+this.width+")"}),d.addClass(e.activeBtn));var l=this;d.on("click.bigSlide touchstart.bigSlide",function(a){g||(l.$menu.css(c),l.$push.css(c),l.$shrink.css(f),g=!0),a.preventDefault(),"open"===h.getState()?i.toggleClose():i.toggleOpen()}),e.semiOpenStatus&&a(window).resize(function(){var b=a(window).width();b>e.semiOpenScreenWidth?"closed"===h.getState()&&(l.$hiddenThin.hide(),l.$menu.css({width:l.semiOpenMenuWidth}),l.$menu.css(e.side,"0"),l.$push.css(e.side,l.semiOpenMenuWidth),l.$shrink.css({width:"calc(100% - "+l.semiOpenMenuWidth+")"}),l.$menu.addClass("semiOpen")):(l.$menu.removeClass("semiOpen"),"closed"===h.getState()&&(l.$menu.css(e.side,"-"+l.width).css({width:l.width}),l.$push.css(e.side,"0"),l.$shrink.css("width","100%"),l.$hiddenThin.show()))}),e.easyClose&&a(document).on("click.bigSlide",function(b){a(b.target).parents().andSelf().is(d)||a(b.target).closest(e.menu).length||"open"!==h.getState()||i.toggleClose()})},_destroy:function(){this.$menu.each(function(){var c=a(this);c.attr("style",b(c.attr("style"),g.menuCSSDictionary).trim())}),this.$push.each(function(){var c=a(this);c.attr("style",b(c.attr("style"),g.pushCSSDictionary).trim())}),this.$shrink.each(function(){var c=a(this);c.attr("style",b(c.attr("style"),g.pushCSSDictionary).trim())}),d.removeClass(e.activeBtn).off("click.bigSlide touchstart.bigSlide"),this.$menu=null,this.$push=null,this.$shrink=null,localStorage.removeItem("bigSlide-savedState")},toggleOpen:function(){e.beforeOpen(),h.changeState(),i.applyOpenStyles(),d.addClass(e.activeBtn),e.afterOpen(),e.saveState&&localStorage.setItem("bigSlide-savedState","open")},toggleClose:function(){e.beforeClose(),h.changeState(),i.applyClosedStyles(),d.removeClass(e.activeBtn),e.afterClose(),e.saveState&&localStorage.setItem("bigSlide-savedState","closed")},applyOpenStyles:function(){var b=a(window).width();e.semiOpenStatus&&b>e.semiOpenScreenWidth?(this.$hiddenThin.show(),this.$menu.animate({width:this.width},{duration:Math.abs(e.speed-100),easing:"linear"}),this.$push.css(e.side,this.width),this.$shrink.css({width:"calc(100% - "+this.width+")"}),this.$menu.removeClass("semiOpen")):(this.$menu.css(e.side,"0"),this.$push.css(e.side,this.width),this.$shrink.css({width:"calc(100% - "+this.width+")"}))},applyClosedStyles:function(){var b=a(window).width();e.semiOpenStatus&&b>e.semiOpenScreenWidth?(this.$hiddenThin.hide(),this.$menu.animate({width:this.semiOpenMenuWidth},{duration:Math.abs(e.speed-100),easing:"linear"}),this.$push.css(e.side,this.semiOpenMenuWidth),this.$shrink.css({width:"calc(100% - "+this.semiOpenMenuWidth+")"}),this.$menu.addClass("semiOpen")):(this.$menu.css(e.side,"-"+this.width),this.$push.css(e.side,"0"),this.$shrink.css("width","100%"))}};return h.init(),this.bigSlideAPI={settings:e,model:g,controller:h,view:i,destroy:h._destroy},this}});

2

package.json
{
"name": "bigslide",
"version": "0.10.0",
"version": "0.11.0",
"description": "A tiny slide panel navigation jQuery plugin with big dreams",

@@ -5,0 +5,0 @@ "author": "Adam D. Scott <hello@adamdscott.com>",

4

README.md

@@ -73,2 +73,4 @@ [![Build Status](https://travis-ci.org/ascott1/bigSlide.js.png?branch=master)](https://travis-ci.org/ascott1/bigSlide.js)

| activeBtn | active | This class is added to the menu button when it is open. By default the class is `.active` |
| semiOpenStatus | false | Set this to `true` to collapse the menu instead of closing it seeing only part of it |
| semiOpenScreenWidth | 480 | The minimum necessary screen width in pixels to allow the semiOpenStatus |
| beforeOpen | function() {} | A method called before the trigger open event |

@@ -97,3 +99,3 @@ | afterOpen | function() {} | A method called after the trigger open event |

If you want to shrink the main container div instead of only pushing it with the `.push` class so you can work in the application with the navbar open, the `.shrink` class will do the work.
If you want to shrink the main container div instead of only pushing it, which will allow you to work in the application with the navbar open, apply the `.shrink` class in place of `.push`.

@@ -100,0 +102,0 @@ ## License

98

src/jquery.big-slide.js

@@ -50,4 +50,6 @@ (function (factory) {

'shrink': ('.shrink'),
'hiddenThin': ('.hiddenThin'),
'side': 'left',
'menuWidth': '15.625em',
'semiOpenMenuWidth': '4em',
'speed': '300',

@@ -58,2 +60,4 @@ 'state': 'closed',

'saveState': false,
'semiOpenStatus': false,
'semiOpenScreenWidth': 480,
'beforeOpen': function () {},

@@ -121,3 +125,5 @@ 'afterOpen': function() {},

this.$shrink = $(settings.shrink);
this.$hiddenThin = $(settings.hiddenThin);
this.width = settings.menuWidth;
this.semiOpenMenuWidth = settings.semiOpenMenuWidth;

@@ -171,9 +177,23 @@ // CSS for how the menu will be positioned off screen

this.$menu.css(positionOffScreen);
var initialScreenWidth = $(window).width();
if (initialState === 'closed') {
this.$push.css(settings.side, '0');
if (settings.semiOpenStatus && initialScreenWidth > settings.semiOpenScreenWidth) {
this.$hiddenThin.hide();
this.$menu.css(settings.side, '0');
this.$menu.css('width', this.semiOpenMenuWidth);
this.$push.css(settings.side, this.semiOpenMenuWidth);
this.$shrink.css({
'width': 'calc(100% - ' + this.semiOpenMenuWidth + ')'
});
this.$menu.addClass('semiOpen');
} else {
this.$push.css(settings.side, '0');
}
} else if (initialState === 'open') {
this.$menu.css(settings.side, '0');
this.$push.css(settings.side, this.width);
this.$shrink.css('width', '100%').css('width', '-=' + this.$menu.width());
this.$shrink.css({
'width': 'calc(100% - ' + this.width + ')'
});
menuLink.addClass(settings.activeBtn);

@@ -202,2 +222,30 @@ }

// register a window resize listener for tracking the semi open status states
// This could be more efficently or even there are people that could consider it unnecessary. We can think about it
if (settings.semiOpenStatus) {
$(window).resize(function() {
var screenWidth = $(window).width();
if (screenWidth > settings.semiOpenScreenWidth) {
if (controller.getState() === 'closed') {
that.$hiddenThin.hide();
that.$menu.css({ width: that.semiOpenMenuWidth});
that.$menu.css(settings.side, '0');
that.$push.css(settings.side, that.semiOpenMenuWidth);
that.$shrink.css({
'width': 'calc(100% - ' + that.semiOpenMenuWidth + ')'
});
that.$menu.addClass('semiOpen');
}
} else {
that.$menu.removeClass('semiOpen');
if (controller.getState() === 'closed') {
that.$menu.css(settings.side, '-' + that.width).css({width: that.width});
that.$push.css(settings.side, '0');
that.$shrink.css('width', '100%');
that.$hiddenThin.show();
}
}
});
}
// this makes my eyes bleed, but adding it back in as it's a highly requested feature

@@ -248,5 +296,3 @@ if (settings.easyClose) {

controller.changeState();
this.$menu.css(settings.side, '0');
this.$push.css(settings.side, this.width);
this.$shrink.css('width', '100%').css('width', '-=' + this.$menu.width());
view.applyOpenStyles();
menuLink.addClass(settings.activeBtn);

@@ -265,5 +311,3 @@ settings.afterOpen();

controller.changeState();
this.$menu.css(settings.side, '-' + this.width);
this.$push.css(settings.side, '0');
this.$shrink.css('width', '100%');
view.applyClosedStyles();
menuLink.removeClass(settings.activeBtn);

@@ -276,2 +320,38 @@ settings.afterClose();

}
},
applyOpenStyles: function() {
var screenWidth = $(window).width();
if (settings.semiOpenStatus && screenWidth > settings.semiOpenScreenWidth) {
this.$hiddenThin.show();
this.$menu.animate({ width: this.width}, {duration: Math.abs(settings.speed - 100), easing: 'linear'});
this.$push.css(settings.side, this.width);
this.$shrink.css({
'width': 'calc(100% - ' + this.width + ')'
});
this.$menu.removeClass('semiOpen');
} else {
this.$menu.css(settings.side, '0');
this.$push.css(settings.side, this.width);
this.$shrink.css({
'width': 'calc(100% - ' + this.width + ')'
});
}
},
applyClosedStyles: function() {
var screenWidth = $(window).width();
if (settings.semiOpenStatus && screenWidth > settings.semiOpenScreenWidth) {
this.$hiddenThin.hide();
this.$menu.animate({ width: this.semiOpenMenuWidth}, {duration: Math.abs(settings.speed - 100), easing: 'linear'});
this.$push.css(settings.side, this.semiOpenMenuWidth);
this.$shrink.css({
'width': 'calc(100% - ' + this.semiOpenMenuWidth + ')'
});
this.$menu.addClass('semiOpen');
} else {
this.$menu.css(settings.side, '-' + this.width);
this.$push.css(settings.side, '0');
this.$shrink.css('width', '100%');
}
}

@@ -278,0 +358,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc