gdsx/WebRoot/Html5/Script/plugin/ht-menu.js

!function(L, H) {
    "use strict";
    var M = "ht"
      , d = L[M]
      , P = "innerHTML"
      , n = "className"
      , q = null
      , k = "px"
      , E = d.Default
      , N = E.getInternal()
      , u = "0"
      , t = function() {
        return document
    }
      , x = function(B) {
        return t().createElement(B)
    }
      , z = function() {
        return x("canvas")
    }
      , e = function(k, E, o) {
        k.style.setProperty(E, o, q)
    }
      , h = function(F, t, M) {
        E.def(d.widget[F], t, M)
    }
      , Y = function(v, F) {
        v.appendChild(F)
    }
      , s = function(g, p) {
        g.removeChild(p)
    }
      , $ = function(k, E, h, I) {
        k.addEventListener(E, h, !!I)
    }
      , i = function(f, A, g, z) {
        f.removeEventListener(A, g, !!z)
    }
      , v = E.isTouchable;
    N.addMethod(E, {
        menuLabelFont: (v ? "16" : "13") + "px arial, sans-serif",
        menuLabelColor: "#000",
        menuBackground: "#F0EFEE",
        menuHoverBackground: "#648BFE",
        menuHoverLabelColor: "#fff",
        menuSeparatorWidth: 1,
        menuSeparatorColor: "#999"
    }, !0),
    d.widget.Menu = function(W) {
        var v = this
          , O = v._view = N.createView(null, v)
          , g = v.$1g = new d.widget.ContextMenu
          , D = x("ul");
        g._r = !0,
        g._view[n] += " ht-widget-dropdownmenu",
        O[n] = "ht-widget-menu",
        D[n] = "header",
        e(O, "margin", u),
        e(O, "padding", u),
        e(O, "background", E.menuBackground),
        e(O, "-webkit-user-select", "none"),
        e(O, "-moz-user-select", "none"),
        e(O, "user-select", "none"),
        e(O, "text-align", "left"),
        e(O, "border-bottom", E.menuSeparatorWidth + "px solid " + E.menuSeparatorColor),
        e(O, "cursor", "default"),
        e(O, "overflow", "auto"),
        e(O, "white-space", "nowrap"),
        e(O, "font", E.menuLabelFont),
        e(O, "color", E.menuLabelColor),
        e(O, "box-sizing", "border-box"),
        e(O, "-moz-box-sizing", "border-box"),
        e(D, "list-style", "none"),
        e(D, "margin", u),
        e(D, "padding", u),
        e(D, "display", "inline-block"),
        Y(O, D),
        v.setItems(W),
        v.$2g = function(A) {
            v.$3g(A)
        }
        ,
        v.$4g = function(_) {
            v.$5g(_)
        }
        ,
        v.$6g = function(B) {
            v.$7g(B)
        }
        ,
        v.$8g = function(y) {
            v.$9g(y)
        }
        ,
        v.$9b = function(T) {
            v.$10g(T)
        }
        ,
        v._autoShow = !0,
        v.setAutoShow(!1),
        g.afterHide = function() {
            v.$11g()
        }
        ,
        g.afterShow = function() {
            v.$12g()
        }
        ,
        i(t(), "keydown", g.$3b),
        v.$3b = function($) {
            v.$13g($)
        }
        ,
        v.invalidate()
    }
    ,
    h("Menu", H, {
        _items: q,
        $14g: E.menuHoverBackground,
        $15g: E.menuHoverLabelColor,
        $16g: {},
        _enableGlobalKey: !1,
        ms_v: 1,
        $21g: "smallicons",
        $22g: 0,
        $23g: 0,
        $24g: "left",
        getDropDownMenu: function() {
            return this.$1g
        },
        setLayout: function(b) {
            var $ = this;
            if ($.$21g = b,
            $.setItems($._items),
            "largeicons" === b) {
                for (var N = $._view.querySelectorAll(".header-item"), G = 0, M = 0; M < N.length; M++) {
                    var E = N[M];
                    G = Math.max(G, E.clientWidth)
                }
                for (var M = 0; M < N.length; M++) {
                    var E = N[M];
                    e(E, "min-width", G + k)
                }
            }
            this.invalidate()
        },
        getLayout: function() {
            return this.$21g
        },
        setHeaderItemHGap: function(y) {
            this.$22g = y;
            for (var r = this._view.querySelectorAll(".header-item"), Z = 0; Z < r.length; Z++) {
                var F = r[Z];
                e(F, "margin-left", y + k),
                e(F, "margin-right", y + k)
            }
        },
        getHeaderItemHGap: function() {
            return this.$22g
        },
        setHeaderItemVGap: function(l) {
            this.$23g = l;
            for (var P = this._view.querySelectorAll(".header-item"), U = 0; U < P.length; U++) {
                var A = P[U];
                e(A, "margin-top", l + k),
                e(A, "margin-bottom", l + k)
            }
        },
        getHeaderItemVGap: function() {
            return this.$24g
        },
        setHeaderItemAlign: function(o) {
            this.$24g = o,
            e(this._view, "text-align", o)
        },
        getHeaderItemAlign: function() {
            return this.$23g
        },
        enableGlobalKey: function() {
            var i = this
              , O = i._enableGlobalKey;
            O === !1 && ($(t(), "keydown", i.$3b),
            i._enableGlobalKey = !0)
        },
        disableGlobalKey: function() {
            this._enableGlobalKey = !1,
            i(t(), "keydown", this.$3b)
        },
        setItemBackground: function (j) {
            this.$99g = j;
        },
        setHoverBackground: function(J) {
            this.$14g = J
        },
        setHoverColor: function(I) {
            this.$15g = I
        },
        setItems: function(D) {
            var l = this
              , C = l._view
              , h = l.$21g;
            if (l._items = D,
            C.children[0][P] = "",
            l.$16g = {},
            D && D.length) {
                for (var b = C.children[0], d = 0, c = t().createDocumentFragment(); d < D.length; d++) {
                    var w = D[d]
                      , o = x("li")
                      , J = x("span");
                    if (w.icon) {
                        var s = z();
                        s[n] = "menu-item-icon",
                        "smallicons" === h ? (e(s, "height", "1.2em"),
                        e(s, "width", "1.2em"),
                        e(s, "vertical-align", "middle")) : (e(s, "height", "32px"),
                        e(s, "width", "32px"),
                        e(s, "display", "block"),
                        e(s, "margin", "0 auto")),
                        s.$20g = w.icon,
                        Y(o, s)
                    }
                    if (w.hoverIcon) {
                        var _s = z();
                        _s[n] = "menu-item-icon menu-item-icon-hover",
                        "smallicons" === h ? (e(_s, "height", "1.2em"),
                        e(_s, "width", "1.2em"),
                        e(_s, "vertical-align", "middle")) : (e(_s, "height", "32px"),
                        e(_s, "width", "32px"),
                        e(_s, "display", "none"),
                        e(_s, "margin", "0 auto")),
                        _s.$20g = w.hoverIcon,
                        Y(o, _s)
                    }
                    o[n] = "header-item",
                    e(o, "display", "inline-block"),
                    e(o, "vertical-align", "top"),
                    e(o, "padding", "0 1.2em"),
                    e(o, "line-height", "1.8em"),
                    e(o, 'overflow', 'hidden'),
                    "largeicons" === h && e(o, "text-align", "center"),
                    e(o, "background-color", "rgba(0,0,0,0)"),
                    o.setAttribute("data-index", d),
                    l.$16g[d] = w.items,
                    J[P] = w.label,
                    "iconsonly" !== h && Y(o, J);
                    w.background && e(o, "background", w.background);
                    if (w.isCurrent) {
                        o[n] = "header-item";
                        o.id = 'header-item-current';
                    }
                    Y(c, o);
                }
                Y(b, c)
            }
        },
        showDropdownMenu: function(i) {
            var U = this
              , S = U.$16g[i]
              , Y = U.$1g
              , r = U._view.children[0].children[i]
              , g = U.$17g;
            if (r && r !== g) {
                g && U.hideDropdownMenu();
                var c = r.getBoundingClientRect()
                  , Z = E.getWindowInfo();
                U.$17g = r,
                Y.setItems(S),
                Y.show(c.left + Z.left, c.top + c.height + Z.top, !1)
            }
        },
        hideDropdownMenu: function() {
            this.$1g.hide()
        },
        getItemByProperty: function(l, U) {
            var L = this
              , J = L._items;
            return J && 0 !== J.length ? L.$1g.getItemByProperty(l, U, J) : q
        },
        $12g: function() {
            var E = this
              , n = E.$17g;
            n.style.background = E.$14g,
            n.style.color = E.$15g,
            E._autoShow || $(t(), v ? "touchstart" : "mousedown", E.$9b)
        },
        $11g: function() {
            var C = this
              , V = C.$17g;
            V && (V.style.background = C.$99g,
            V.style.color = "",
            C.$17g = q),
            i(t(), v ? "touchstart" : "mousedown", C.$9b)
        },
        $10g: function(y) {
            var u = this
              , C = u._view
              , S = u.$1g
              , x = C.children[0];
            !t().body.contains(C) || x.contains(y.target) || S._view.contains(y.target) || u.hideDropdownMenu()
        },
        $13g: function(D) {
            var l = this
              , c = l.$1g;
            t().body.contains(l._view) && c.$13b.$4b.call(c.$13b, D, l._items)
        },
        setAutoShow: function(n) {
            var u = this
              , D = u.$1g
              , f = u._view;
            u._autoShow !== n && (u._autoShow ? (i(f, "mouseover", u.$2g),
            i(f, "mouseout", u.$4g),
            i(D._view, "mouseout", u.$4g),
            v || ($(f, "mouseover", u.$8g),
            $(f, "mouseout", u.$8g)),
            $(f, v ? "touchstart" : "mousedown", u.$6g)) : (i(f, "mouseover", u.$8g),
            i(f, "mouseout", u.$8g),
            i(f, v ? "touchstart" : "mousedown", u.$6g),
            i(t(), v ? "touchstart" : "mousedown", u.$9b),
            v || ($(f, "mouseover", u.$2g),
            $(f, "mouseout", u.$4g),
            $(D._view, "mouseout", u.$4g))),
            u._autoShow = n)
        },
        $3g: function(R) {
            var k = this
              , C = k._view.children[0]
              , W = R.target;
            if (C !== W && C.contains(W)) {
                for (; "header-item" !== W[n]; )
                    W = W.parentNode;
                k.showDropdownMenu(W.getAttribute("data-index"))
            }
        },
        $5g: function(v) {
            var B = this
              , L = B._view.children[0]
              , N = B.$1g
              , w = v.target
              , C = v.relatedTarget;
            !L.contains(w) && !N._view.contains(w) || L.contains(C) || N._view.contains(C) || B.hideDropdownMenu()
        },
        $7g: function(r) {
            r.preventDefault();
            var L = this
              , d = L._view.children[0]
              , O = L.$1g
              , o = r.target;
            if (E.isLeftButton(r) && d !== o && d.contains(o))
                if (v) {
                    for (; "header-item" !== o[n]; )
                        o = o.parentNode;
                    var y = o.getAttribute("data-index")
                      , O = L.$1g
                      , F = L._view.children[0].children[y]
                      , p = L.$17g;
                    O.isShowing() && L.hideDropdownMenu(),
                    F !== p && L.showDropdownMenu(y)
                } else if (O.isShowing())
                    L.hideDropdownMenu();
                else {
                    for (; "header-item" !== o[n]; )
                        o = o.parentNode;
                    L.showDropdownMenu(o.getAttribute("data-index"))
                }
        },
        $9g: function(X) {
            var V = this
              , B = V._view
              , Z = V.$1g
              , I = X.target;
            if (B.contains(I)) {
                for (var m = B.querySelectorAll(".header-item"), t = q, v = 0; v < m.length; v++) {
                    var P = m[v];
                    P.style.background = V.$99g,
                    P.style.color = "",
                    "mouseover" === X.type ? P.contains(I) && (t = P) : "mouseout" === X.type && Z.isShowing() && V.$17g === P && (t = P)
                }
                Z.isShowing() && (t || (t = V.$17g),
                V.showDropdownMenu(t.getAttribute("data-index"))),
                t && (t.style.background = V.$14g,
                t.style.color = V.$15g)
            }
        },
        getShowingMenuIndex: function() {
            var u = this.$17g;
            return u ? u.getAttribute("data-index") : -1
        },
        addTo: function(_) {
            var $ = this
              , R = $._view;
            Y(_, R),
            $.invalidate()
        },
        dispose: function() {
            var W = this
              , P = W._view
              , R = W.$1g;
            P && (W._autoShow ? (i(P, "mouseover", W.$2g),
            i(P, "mouseout", W.$4g),
            i(R._view, "mouseout", W.$4g)) : (i(P, "mouseover", W.$8g),
            i(P, "mouseout", W.$8g),
            i(P, v ? "touchstart" : "mousedown", W.$6g),
            i(t(), v ? "touchstart" : "mousedown", W.$9b)),
            i(t(), "keydown", W.$3b),
            R.dispose(),
            P.parentNode && s(P.parentNode, P),
            W._view = W.$1g = W.$16g = W._items = W.$17g = W.$2g = W.$4g = W.$6g = W.$8g = W.$9b = W.$3b = q)
        },
        $19g: function(I, v, w, Z) {
            var e = N.initContext(I);
            N.translateAndScale(e, 0, 0, 1),
            e.clearRect(0, 0, w, Z),
            E.drawStretchImage(e, E.getImage(v), "fill", 0, 0, w, Z),
            e.restore()
        },
        validateImpl: function() {
            var I, U, T, c = this, Z = c._view, $ = Z.querySelectorAll(".menu-item-icon"), $hoverIcon = Z.querySelectorAll('.menu-item-icon-hover');
            for (T = 0; T < $.length; T++) {
                var K = $[T];
                I = K.clientWidth,
                U = K.clientHeight,
                I && U && (N.setCanvas(K, I, U),
                c.$19g(K, E.getImage(K.$20g), I, U))
            }
            for (var i = 0, len = $hoverIcon.length; i < len; i++) {
                var hicon = $hoverIcon[i];
                c.$19g(hicon, E.getImage(hicon.$20g), I, U);
                hicon.style.position = 'absolute';
                hicon.style.left = '-80px';
                // hicon.style.top = '50%';
                // hicon.style.marginTop = '-' + U * 0.5 + 'px';
            }
        }
    })
}("undefined" != typeof global ? global : "undefined" != typeof self ? self : "undefined" != typeof window ? window : this, Object);