gooey.min.js 7.45 KB
Newer Older
旭艳's avatar
旭艳 committed
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
/* jquery gooey menu pluggins
 * gooey menu v1.0.0 (http://http://dominicdomu.blogspot.in/p/gooy.html)
 * source: //dreamidea.in
 * Created on : Apr 6, 2016, 1:30:02 PM
    Author     : Dominic George
    site       : //dominicdomu.blospot.in
 *   */
import jQuery from 'jquery'
(function(g) {
  g.gooeymenu = function(h, q) {
    var k = g(h); k.addClass('navimenu'); var b = this; var 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 }; var f = { small: 1.3, medium: 1.6, large: 2.1 }; var 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; var f; var c; var e; var m; var h; var n; var r = b.els.item.length; var l = a.transitionStep; var q = Math.PI; var t = 360 / r; var 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: a <
        90 || a > 270 ? '' : '-', y: a > 180 ? '' : '-' }
    }, linear: function(d) {
      k.trigger('open'); var f = a.style === 'horizontal' ? a.horizontal.menuItemPosition : a.vertical.menuItemPosition; var c = d[f].init; var e = a.transitionStep; b.els.item.each(function() {
        b.els.checkbox.is(':checked') ? a.style === 'horizontal' ? (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) : a.style === 'vertical' && (g(this).css({ 'transition-duration': e + 'ms', '-moz-transition-duration': e + 'ms', '-o-transition-duration': e + 'ms', '-webkit-transition-duration': e + 'ms' }), a.vertical.direction === 'down' ? 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)' }) : a.vertical.direction === 'up' && 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 =
        window.innerWidth > 0 ? window.innerWidth : screen.width; d >= 320 && d <= 480 ? (a.size /= 1.4, a.circle.radius /= 1.2) : d > 480 && d <= 768 ? a.size /= 1.2 : d > 780 && d <= 1024 && (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'); var 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.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 },
    // eslint-disable-next-line new-cap
    horizontal: { menuItemPosition: 'glue' }, vertical: { menuItemPosition: 'spaced', direction: 'up' }, open: function() {}, close: function() {} }; g.fn.gooeymenu = function(h) { void 0 === h && (h = {}); if (h && typeof h === 'object') return this.each(function() { new g.gooeymenu(this, h) }) }
})(jQuery)