vue-side-nav
Version:
side-nav - done in vue
332 lines (330 loc) • 9.13 kB
JavaScript
;(function(){
module.exports = {
components: {
"drag-handle": require("vue-drag-handle")
},
created: function() {
return this.overlay = require("vue-overlay")(this.Vue);
},
mixins: [require("vue-mixins/vue"), require("vue-mixins/onWindowResize"), require("vue-mixins/setCss"), require("vue-mixins/isOpened2"), require("vue-mixins/class"), require("vue-mixins/style")],
props: {
id: {
type: String
},
"class": {
"default": function() {
return ["side-nav"];
}
},
style: {
"default": function() {
return [];
}
},
width: {
type: Number,
coerce: Number,
"default": 240
},
opacity: {
type: Number,
"default": 0.5,
coerce: Number
},
right: {
type: Boolean,
"default": false
},
notDismissable: {
type: Boolean,
"default": false
},
closeOnClick: {
type: Boolean,
"default": false
},
fixed: {
type: Boolean,
"default": false
},
fixedScreenSize: {
type: Number,
coerce: Number,
"default": 992
},
transition: {
type: Function,
"default": function(arg) {
var cb, el, style;
el = arg.el, style = arg.style, cb = arg.cb;
this.position = style[this.side].replace("px", "");
return cb();
}
},
zIndex: {
type: Number,
"default": 1000,
coerce: Number
}
},
computed: {
side: function() {
if (this.right) {
return "right";
} else {
return "left";
}
},
otherSide: function() {
if (this.right) {
return "left";
} else {
return "right";
}
},
mergeClass: function() {
return {
fixed: this.fixed
};
},
mergeStyle: function() {
var style;
style = {
position: "fixed",
width: this.width + "px",
top: "0",
margin: "0",
height: "100%",
zIndex: this.overlayZIndex + 1,
boxSizing: "border-box",
transform: "translateX(0)"
};
style[this.side] = this.position + "px";
return style;
},
realWidth: function() {
var width;
if (this.computedStyle[1] != null) {
width = this.computedStyle[1].width;
}
if (width == null) {
width = this.computedStyle[0].width;
}
return width;
}
},
watch: {
fixed: "processFixed",
fixedScreenSize: "processFixed",
side: "setParentMargin"
},
data: function() {
return {
isFixed: null,
position: -1 * (this.width + 10),
overlayZIndex: 1001
};
},
methods: {
makeFixed: function(fixed) {
if (fixed !== this.isFixed) {
this.isFixed = fixed;
this.setParentMargin();
return this.$emit("fixed", fixed);
}
},
setParentMargin: function() {
var el, i, len, ref, results, width;
if (this.$el.parentElement) {
if (this.isFixed) {
width = this.realWidth;
} else {
width = null;
}
ref = this.$el.parentElement.children;
results = [];
for (i = 0, len = ref.length; i < len; i++) {
el = ref[i];
if (el !== this.$el) {
this.setCss(el, "margin-" + this.side, width);
results.push(this.setCss(el, "margin-" + this.otherSide, null));
} else {
results.push(void 0);
}
}
return results;
}
},
processFixed: function() {
if (this.fixed) {
this.makeFixed(window.innerWidth > this.fixedScreenSize);
if (this.isFixed) {
this.position = 0;
} else {
this.position = -1 * (this.width + 10);
}
this.disposeWindowResize = this.onWindowResize((function(_this) {
return function() {
if (window.innerWidth > _this.fixedScreenSize) {
if (!_this.isFixed) {
if (_this.opened) {
_this.close(true);
_this.wasOpened = true;
} else {
_this.show(false);
}
return _this.makeFixed(true);
}
} else {
if (_this.isFixed) {
if (_this.wasOpened) {
_this.open(true);
} else {
_this.hide(false);
}
return _this.makeFixed(false);
}
}
};
})(this));
} else {
this.makeFixed(false);
if (this.opened) {
this.position = 0;
} else {
this.position = -1 * (this.width + 10);
}
if (typeof this.disposeWindowResize === "function") {
this.disposeWindowResize();
}
}
return this.setParentMargin();
},
onClick: function(e) {
if (this.closeOnClick) {
return this.dismiss(e);
}
},
dismiss: function(e) {
if (!e.defaultPrevented) {
if (!this.notDismissable && !this.isFixed) {
this.close();
return e.preventDefault();
}
}
},
move: function(position) {
var fac;
fac = this.right ? -1 : 1;
return this.position = -this.width + fac * position;
},
show: function(animate) {
var style;
if (animate == null) {
animate = true;
}
this.$emit("before-enter");
if (animate) {
style = {};
style[this.side] = "0";
return this.transition({
el: this.$refs.nav,
style: style,
cb: (function(_this) {
return function() {
_this.setCss(_this.$refs.nav, "transform", "translateX(0)");
_this.setOpened();
return _this.$emit("after-enter");
};
})(this)
});
} else {
this.position = 0;
this.setOpened();
return this.$emit("after-enter");
}
},
hide: function(animate) {
var style;
if (animate == null) {
animate = true;
}
this.wasOpened = false;
this.$emit("before-leave");
if (animate) {
style = {};
style[this.side] = -1 * (this.width + 10) + "px";
return this.transition({
el: this.$refs.nav,
style: style,
cb: (function(_this) {
return function() {
_this.setClosed();
return _this.$emit("after-leave");
};
})(this)
});
} else {
this.position = -1 * (this.width + 10);
this.setClosed();
return this.$emit("after-leave");
}
},
open: function(restoreOverlay) {
var close, ref, zIndex;
if (this.opened && !restoreOverlay) {
return;
}
ref = this.overlay.open({
zIndex: this.zIndex,
opacity: this.opacity,
onBeforeClose: (function(_this) {
return function() {
return _this.close();
};
})(this)
}), zIndex = ref.zIndex, close = ref.close;
this.overlayZIndex = zIndex;
this.closeOverlay = close;
if (!restoreOverlay) {
return this.show();
}
},
close: function(restoreNav) {
if (!this.opened) {
return;
}
if (typeof this.closeOverlay === "function") {
this.closeOverlay(false);
}
this.closeOverlay = null;
if (!restoreNav) {
return this.hide();
}
},
toggle: function() {
if (this.isFixed) {
return this.opened = this.isOpened;
} else {
if (this.opened) {
return this.close();
} else {
return this.open();
}
}
}
},
mounted: function() {
return this.$nextTick(function() {
return this.processFixed();
});
},
beforeDestory: function() {
return typeof this.closeOverlay === "function" ? this.closeOverlay() : void 0;
}
};
})()
if (module.exports.__esModule) module.exports = module.exports.default
var __vue__options__ = (typeof module.exports === "function"? module.exports.options: module.exports)
__vue__options__.render = function(){with(this){return _h('div',[_h('drag-handle',{style:({width: '20px',left:right ? null : '0',right:right ? '0' : null}),attrs:{"disabled":opened || isFixed,"max-right":right ? null : width,"max-left":right ? width : null,"z-index":overlayZIndex},on:{"move":move,"max":function($event){open(false)},"aborted":hide}}),_h('drag-handle',{style:({left:'0',right:'0'}),attrs:{"disabled":!opened || isFixed,"max-right":right ? width : null,"max-left":right ? null : width,"offset":right ? -width : width,"z-index":overlayZIndex},on:{"move":move,"max":function($event){close(false)},"aborted":show,"clean-click":dismiss}}),_h('ul',{ref:"nav",class:computedClass,style:(computedStyle),attrs:{"id":id},on:{"click":onClick,"keyup":function($event){if($event.keyCode!==27)return;dismiss($event)}}},[_t("default")])])}}
__vue__options__.staticRenderFns = []