在java中右键单击上下文菜单获取目标名称div变量

Posted 2023-03-05

【中文标题】在java中右键单击上下文菜单获取目标名称div变量

【英文标题】：Contextmenu right click in java get target name div variable

【发布时间】：2022-01-21 03:09:34

【问题描述】：

我有简单的 html5 cgi 生成的文件网页，但我需要在 google 中有带有搜索选项的右键单击上下文菜单。

每个文件 div 看起来像这样：

if [[ $file =~ \.jpg$ || $file =~ \.JPG$ || $file =~ \.jpeg$ || $file =~ \.png$ || $file =~ \.PNG$ || $file =~ \.webp$ || $file =~ \.bmp$ ]]; then
        
        echo '<div class=''"'lightbox-file'"'' data-src=''"'$file'"'' data-sub-html=''"'$file'"''>'
        echo '          <div class="filemanager-photo">'
        echo '              <a href=''"'$file'"''>'
        echo '                  <img src=''"'./.tmp/thumb - $file.jpg'"'' />'
        echo '                  <div class='"'filemanager-photo-name'"'>'$filename'</div>'
        echo '              </a>'
        echo '          </div>'
        echo '</div>'
         >> "$url_local_path"/.tmp/list_photo

上下文菜单脚本：

# Context menu
echo '      <script src="/js/context-menu.js"></script>                                                                         '
echo '      <script>                                                                                                                '
echo '        var items = [                                                                                                      '
echo "           name: 'Pobierz', fn: function(target)  console.log('Pobierz', target); ,                                               "
echo "           name: 'Udostepnij', fn: function(target)  window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href); ,                                         "
echo '          ,                                                                                                              '
echo "           name: 'Google', fn: function(target)  window.open('https://www.google.com/search?q=' + filemanager-photo-name??????????????????); ,                                "
echo '          ,                                                                                                              '
echo "           name: 'Usuń', fn: function(target)  console.log('Usuń', target); ,                                           "
echo '        ];                                                                                                                    '

echo "        var cm1 = new ContextMenu('.filemanager-photo-name', items);                                                                  "

#echo "       var cm2 = new ContextMenu('.minimal', items,  className: 'ContextMenu--theme-custom', minimalStyling: true );      "

echo "        cm1.on('shown', () => console.log('Context menu shown'));                                                           "
echo '      </script>                                                                                                              '

当我右键单击页面上的照片链接时，我应该放什么来获得谷歌正确的关键字，即 $filemanager-photo-name 变量？

echo "  name: 'Google', fn: function(target)  window.open('https://www.google.com/search?q=' + filemanager-photo-name??????????????????); , "

【问题讨论】：

当我点击 div 到 java 变量时，如何将 div 与名称一起传递？我认为首先我需要将 div 名称变量传递给 contextmenu 列表，然后我可以在菜单选项中使用该变量

【参考方案1】：

/js/context-menu.js

!function(e, t) 
    "object" == typeof exports && "undefined" != typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define(t) : e.ContextMenu = t()

(this, function() 
    "use strict";
    !function(e, t) 
        void 0 == = t && (t = );
        var n = t.insertAt;
        if (e && "undefined" != typeof document) 
            var i = document.head || document.getElementsByTagName("head")[0], o = document.createElement("style");
            o.type = "text/css", "top" == = n && i.firstChild ? i.insertBefore(o, i.firstChild) : i.appendChild(o), o.styleSheet ? o.styleSheet.cssText = e : o.appendChild(document.createTextNode(e))
        
    
    (".ContextMenudisplay:none;list-style:none;margin:0;max-width:250px;min-width:125px;padding:0;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none.ContextMenu--theme-defaultbackground-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 2px 5px rgba(0,0,0,.15);box-shadow:0 2px 5px rgba(0,0,0,.15);font-size:13px;outline:0;padding:2px 0.ContextMenu--theme-default .ContextMenu-itempadding:6px 12px.ContextMenu--theme-default .ContextMenu-item:focus,.ContextMenu--theme-default .ContextMenu-item:hoverbackground-color:rgba(0,0,0,.05).ContextMenu--theme-default .ContextMenu-item:focusoutline:0.ContextMenu--theme-default .ContextMenu-dividerbackground-color:rgba(0,0,0,.15).ContextMenu.is-opendisplay:block.ContextMenu-itemcursor:pointer;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap.ContextMenu-dividerheight:1px;margin:4px 0");
    var e = [], t = 0;
    function n(e, t, n) 
        void 0 == = n && (n = );
        var i = document.createEvent("Event");
        Object.keys(n).forEach(function(e) 
            i[e] = n[e]
        ), i.initEvent(t, !0, !0), e.dispatchEvent(i)
    
    Element.prototype.matches || (Element.prototype.matches = Element.prototype.msMatchesSelector);
    var i = function(n, i, o) 
        void 0 == = o && (o = className: "", minimalStyling: !1), this.selector = n, this.items = i, this.options = o, this.id = t++, this.target = null, this.create(), e.push(this)
    ;
    return i.prototype.create = function() var e = this; this.menu = document.createElement("ul"), this.menu.className = "ContextMenu", this.menu.setAttribute("data-contextmenu", this.id), this.menu.setAttribute("tabindex", -1), this.menu.addEventListener("keyup", function(t) 
            switch (t.which) 
            case 38:
                e.moveFocus(-1);
                break;
            case 40:
                e.moveFocus(1);
                break;
            case 27:
                e.hide()
            
        ), this.options.minimalStyling || this.menu.classList.add("ContextMenu--theme-default"), this.options.className && this.options.className.split(" ").forEach(function(t) 
            return e.menu.classList.add(t)
        ), this.items.forEach(function(t, n) 
            var i = document.createElement("li"); "name"
            in t ? (i.className = "ContextMenu-item", i.textContent = t.name, i.setAttribute("data-contextmenuitem", n), i.setAttribute("tabindex", 0), i.addEventListener("click", e.select.bind(e, i)),
            i.addEventListener("keyup", function(t) 
                13 == = t.which && e.select(i)
            )): i.className = "ContextMenu-divider", e.menu.appendChild(i)
        ), document.body.appendChild(this.menu), n(this.menu, "created")
    , i.prototype.show = function(e) this.menu.style.left = e.pageX + "px", this.menu.style.top = e.pageY + "px", this.menu.classList.add("is-open"), this.target = e.target, this.menu.focus(), e.preventDefault(), n(this.menu, "shown"), i.prototype.hide
    = function() this.menu.classList.remove("is-open"), this.target = null, n(this.menu, "hidden"), i.prototype.select = function(e) var t = e.getAttribute("data-contextmenuitem"); this.items[t] && this.items[t].fn(this.target), this.hide(), n(this.menu, "itemselected"), i.prototype.moveFocus
    = function(e) void 0 == = e && (e = 1); var t, n = this.menu.querySelector("[data-contextmenuitem]:focus"); n && (t = function e(t, n, i) 
            void 0 == = i && (i = 1);
            var o = i > 0 ? t.nextElementSibling : t.previousElementSibling;
            return!o || o.matches(n) ? o : e(o, n, i)
        (n, "[data-contextmenuitem]", e)), t || (t = e > 0 ? this.menu.querySelector("[data-contextmenuitem]:first-child") : this.menu.querySelector("[data-contextmenuitem]:last-child")), t && t.focus()
    , i.prototype.on = function(e, t) this.menu.addEventListener(e, t), i.prototype.off = function(e, t) this.menu.removeEventListener(e, t), i.prototype.destroy = function() this.menu.parentElement.removeChild(this.menu), this.menu = null, e.splice(e.indexOf(this), 1), document.addEventListener("contextmenu",
    function(t) 
        e.forEach(function(e) 
            t.target.matches(e.selector) && e.show(t)
        )
    ), document.addEventListener("click", function(t) 
        e.forEach(function(e) 
            t.target.matches('[data-contextmenu="' + e.id + '"], [data-contextmenu="' + e.id + '"] *') || e.hide()
        )
    ), i
);
//# sourceMappingURL=context-menu.js.map