Spaces:
Runtime error
Runtime error
File size: 12,382 Bytes
c2ea21f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 |
(function (g) {
g.gooeymenu = function (h, q) {
var k = g(h);
k.addClass("navimenu");
var b = this, a = b.options = g.extend({}, g.gooeymenu.defaults, q);
b.els = {item: k.find(".gooey-menu-item"), checkbox: k.find(".menu-open"), button: k.find(".open-button")};
b.methods = {
setup: function () {
var d = {small: 1.4, medium: 1.8, large: 2.1}, f = {small: 1.3, medium: 1.6, large: 2.1}, c;
for (c in d) a.margin === c ? a.margin = d[c] : null;
for (var e in f) a.bounceLength === e ? a.bounceLength = f[e] : null;
b.methods.responsiveStyles();
// b.els.item.hover(function () {
// a.currentBg =
// // b.els.item.css("background-color");
// g(this).css("background-color", a.hover)
// }, function () {
// g(this).css("background-color", a.currentBg)
// });
!0 === a.bounce && b.methods.bounce()
}, setEvents: function () {
["open", "close"].forEach(function (d, b) {
k.on(d, function () {
a[d] && a[d].apply(this, arguments)
})
})
}, bounce: function () {
if (!0 === a.bounce) {
var d = b.els.item.css("transition-timing-function");
b.els.checkbox.on("change", function () {
g(this).is(":checked") ? b.els.item.css({
"transition-timing-function": "cubic-bezier(0.8, 0.84, 0.44, " +
a.bounceLength + ")",
"-o-transition-timing-function": "cubic-bezier(0.8, 0.84, 0.44, " + a.bounceLength + ")",
"-moz-transition-timing-function": "cubic-bezier(0.8, 0.84, 0.44, " + a.bounceLength + ")",
"-webkit-transition-timing-function": "cubic-bezier(0.8, 0.84, 0.44, " + a.bounceLength + ")",
"-ms-transition-timing-function": "cubic-bezier(0.8, 0.84, 0.44, " + a.bounceLength + ")"
}) : b.els.item.css({
"transition-timing-function": d,
"-moz-transition-timing-function": d,
"-o-transition-timing-function": d,
"-webkit-transition-timing-function": d
})
})
}
},
circle: function () {
k.trigger("open");
var d, f, c, e, m, h, n, r = b.els.item.length, l = a.transitionStep, q = Math.PI, t = 360 / r,
p = t = 360 / r;
f = a.circle.radius;
b.els.item.each(function () {
b.els.checkbox.is(":checked") ? (d = q * p / 180, c = Math.abs(Math.cos(d)), e = f * c, m = Math.sqrt(f * f - e * e), h = b.methods.periodCalc(p).x, n = b.methods.periodCalc(p).y, g(this).css({
transform: "translate3d(" + h + e + "px," + n + m + "px,0)",
"-o-transform": "translate3d(" + h + e + "px," + n + m + "px,0)",
"-webkit-transform": "translate3d(" + h + e + "px," + n + m + "px,0)",
"-moz-transform": "translate3d(" +
h + e + "px," + n + m + "px,0)",
"-ms-transform": "translate3d(" + h + e + "px," + n + m + "px,0)",
"transition-duration": l + "ms",
"-o-transition-duration": l + "ms",
"-webkit-transition-duration": l + "ms",
"-moz-transition-duration": l + "ms"
}), p += t, l += a.transitionStep) : (b.els.item.css({
transform: "translate3d(0, 0, 0)",
"-moz-transform": "translate3d(0, 0, 0)",
"-webkit-transform": "translate3d(0, 0, 0)",
"-ms-transform": "translate3d(0, 0, 0)",
"-o-transform": "translate3d(0, 0, 0)"
}), p = 360 / r, l = a.transitionStep, k.trigger("close"))
})
}, periodCalc: function (a) {
return {
x: 90 >
a || 270 < a ? "" : "-", y: 180 < a ? "" : "-"
}
}, linear: function (d) {
k.trigger("open");
var f = "horizontal" === a.style ? a.horizontal.menuItemPosition : a.vertical.menuItemPosition,
c = d[f].init, e = a.transitionStep;
b.els.item.each(function () {
b.els.checkbox.is(":checked") ? "horizontal" === a.style ? (g(this).css({
transform: "translate3d(" + c + "px, 0, 0)",
"-ms-transform": "translate3d(" + c + "px, 0, 0)",
"-o-transform": "translate3d(" + c + "px, 0, 0)",
"-moz-transform": "translate3d(" + c + "px, 0, 0)",
"-webkit-transform": "translate3d(" + c + "px, 0, 0)",
"transition-duration": e + "ms",
"-o-transition-duration": e + "ms",
"-webkit-transition-duration": e + "ms",
"-moz-transition-duration": e + "ms"
}), c += d[f].init, e += a.transitionStep) : "vertical" === a.style && (g(this).css({
"transition-duration": e + "ms",
"-moz-transition-duration": e + "ms",
"-o-transition-duration": e + "ms",
"-webkit-transition-duration": e + "ms"
}), "down" === a.vertical.direction ? g(this).css({
transform: "translate3d(0, " + c + "px, 0)",
"-moz-transform": "translate3d(0, " + c + "px, 0)",
"-o-transform": "translate3d(0, " + c +
"px, 0)",
"-webkit-transform": "translate3d(0, " + c + "px, 0)",
"-ms-transform": "translate3d(0, " + c + "px, 0)"
}) : "up" === a.vertical.direction && g(this).css({
transform: "translate3d(0,-" + c + "px, 0)",
"-moz-transform": "translate3d(0,-" + c + "px, 0)",
"-webkit-transform": "translate3d(0,-" + c + "px, 0)",
"-o-transform": "translate3d(0,-" + c + "px, 0)",
"-ms-transform": "translate3d(0,-" + c + "px, 0)"
}), c += d[f].init, e += a.transitionStep) : (b.els.item.css({
transform: "translate3d(0, 0, 0)",
"-moz-transform": "translate3d(0, 0, 0)",
"-webkit-transform": "translate3d(0, 0, 0)",
"-ms-transform": "translate3d(0, 0, 0)",
"-o-transform": "translate3d(0, 0, 0)"
}), c = d[f].init, e = a.transitionStep, k.trigger("close"))
})
}, translate: function () {
var d = {glue: {init: a.size}, spaced: {init: a.size * a.margin}};
b.els.checkbox.on("change", function () {
b._callbacks[a.style](d)
})
}, createOn: function (a, b, c, e) {
b = document.createElementNS("http://www.w3.org/2000/svg", b);
for (var g in c) c.hasOwnProperty(g) && b.setAttribute(g, c[g]);
e && b.appendChild(document.createTextNode(e));
return a.appendChild(b)
}, responsiveStyles: function () {
var d =
0 < window.innerWidth ? window.innerWidth : screen.width;
320 <= d && 480 >= d ? (a.size /= 1.4, a.circle.radius /= 1.2) : 480 < d && 768 >= d ? a.size /= 1.2 : 780 < d && 1024 >= d && (a.circle.radius /= 1.2, a.size /= 1.1);
b.els.item.css({
width: a.size + "px",
height: a.size + "px",
color: a.contentColor,
// "background-color": a.bgColor,
"line-height": a.size + "px"
});
b.els.button.css({
width: a.size + "px",
height: a.size + "px",
// "background-color": a.bgColor,
"line-height": a.size + "px"
});
k.find(".burger").css({
"font-size": ".8em", width: a.size / 2 + "px", height: "3px", left: a.size /
4 + "px"
})
}
};
b._callbacks = {vertical: b.methods.linear, horizontal: b.methods.linear, circle: b.methods.circle};
b.init = function () {
var a = document.createElementNS("http://www.w3.org/2000/svg", "svg"), f = g(".navimenu").index(k);
a.setAttribute("id", "gooeySVG" + f);
a.setAttribute("class", "gooeySVG");
k.append(a);
a = document.getElementById("gooeySVG" + f);
b.methods.createOn(a, "defs", {id: "defs" + f});
a = document.getElementById("defs" + f);
b.methods.createOn(a, "filter", {id: "goo-shadow" + f, overflow: "hidden"});
var c = document.getElementById("goo-shadow" +
f);
b.methods.createOn(c, "feGaussianBlur", {"in": "SourceGraphic", result: "blur", stdDeviation: "10"});
b.methods.createOn(c, "feColorMatrix", {
"in": "blur",
mode: "matrix",
values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8",
result: "goo"
});
b.methods.createOn(c, "feGaussianBlur", {"in": "goo", stdDeviation: "2", result: "shadow"});
b.methods.createOn(c, "feColorMatrix", {
"in": "shadow",
mode: "matrix",
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0",
result: "shadow"
});
b.methods.createOn(c, "feOffset", {
"in": "shadow", dx: "1",
dy: "1", result: "shadow"
});
b.methods.createOn(c, "feComposite", {in2: "shadow", "in": "goo", result: "goo"});
b.methods.createOn(c, "feComposite", {in2: "goo", "in": "SourceGraphic", result: "mix"});
b.methods.createOn(a, "filter", {id: "goo" + f});
a = document.getElementById("goo" + f);
b.methods.createOn(a, "feGaussianBlur", {"in": "SourceGraphic", result: "blur", stdDeviation: "10"});
b.methods.createOn(a, "feColorMatrix", {
"in": "blur",
mode: "matrix",
values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7",
result: "goo"
});
b.methods.createOn(a,
"feComposite", {in2: "goo", "in": "SourceGraphic", result: "mix"});
k.css({
"-webkit-filter": "url('#goo-shadow" + f + "')",
filter: "url('#goo-shadow" + f + "')",
"-ms-filter": "url('#goo-shadow" + f + "')",
"-o-filter": "url('#goo-shadow" + f + "')"
});
b.methods.setEvents();
b.methods.setup();
b.methods.translate.apply(this, arguments)
};
b.init()
};
g.gooeymenu.defaults = {
style: "horizontal",
size: 70,
margin: "medium",
// bgColor: "steelblue",
contentColor: "white",
transitionStep: 100,
bounce: !1,
bounceLength: "medium",
hover: "white",
circle: {radius: 80},
horizontal: {menuItemPosition: "glue"},
vertical: {menuItemPosition: "spaced", direction: "up"},
open: function () {
},
close: function () {
}
};
g.fn.gooeymenu = function (h) {
void 0 === h && (h = {});
if (h && "object" === typeof h) return this.each(function () {
new g.gooeymenu(this, h)
})
}
})(jQuery);
|