diff --git a/src/_h5ai/css/inc/context-menu.less b/src/_h5ai/css/inc/context-menu.less new file mode 100644 index 00000000..25b8ff91 --- /dev/null +++ b/src/_h5ai/css/inc/context-menu.less @@ -0,0 +1,37 @@ + +#extended .context-menu { + + display: block; + position: absolute; + right: 0; + top: 0; + background-color: rgb(241,241,241); + // border: 1px solid rgb(210,210,210); + border: 2px solid rgb(210,210,210); + color: #999; + z-index: 10; + font-size: 0.9em; + .border-radius(4px); + + ul { + margin: 0; + padding: 0; + list-style: none; + text-align: left; + + li { + // padding: 8px 12px 10px 12px; + padding: 4px 4px 4px 4px; + white-space: nowrap; + border-top: 1px solid rgb(231,231,231); + .transition(all 0.2s ease-in-out); + .border-radius(4px); + + &:hover { + color: #e80; + background-color: rgba(255,255,255,0.8); + } + } + } +} + diff --git a/src/_h5ai/css/styles.less b/src/_h5ai/css/styles.less index 427acd71..d1e5d46d 100644 --- a/src/_h5ai/css/styles.less +++ b/src/_h5ai/css/styles.less @@ -23,6 +23,7 @@ body { @import "inc/content"; @import "inc/extended"; +@import "inc/context-menu"; @import "inc/dropbox"; @import "inc/bottombar"; diff --git a/src/_h5ai/js/inc/ext/context-menu.js b/src/_h5ai/js/inc/ext/context-menu.js new file mode 100644 index 00000000..d0e3942d --- /dev/null +++ b/src/_h5ai/js/inc/ext/context-menu.js @@ -0,0 +1,84 @@ + +modulejs.define('ext/context-menu', ['_', '$', 'core/settings', 'core/entry', 'core/event', 'core/resource'], function (_, $, allsettings, entry, event, resource) { + + var defaults = { + enabled: false, + deleteBtn: false + }, + + settings = _.extend({}, defaults, allsettings['context-menu']), + + template = '
' + + '' + + '
', + + // deleteTmp = '
  • delete
  • ', + deleteTmp = '
  • delete
  • ', + // deleteTmp = '
  • ', + + + createDeleteBtn = function (entry, $ul) { + + var $del = $(deleteTmp).appendTo($ul); + + $del.on('click', function (event) { + + console.log('delete', entry.label); + $.ajax({ + url: resource.api(), + data: { + action: 'delete', + href: entry.absHref + }, + dataType: 'json', + success: function (json) { + + } + }); + }); + }, + + createMenu = function (entry) { + + var $html = $(template), + $ul = $html.find('ul'); + + $html.on('click', function (event) { + + event.stopPropagation(); + event.preventDefault(); + }); + + createDeleteBtn(entry, $ul); + + entry.$extended.find('a').append($html); + }, + + init = function () { + + if (!settings.enabled) { + return; + } + + event.sub('entry.mouseenter', function (entry) { + + if (!entry.isFolder()) { + var ctx = entry.$extended.find('.context-menu'); + if (ctx.length) { + ctx.show(); + } else { + createMenu(entry); + } + } + }); + + event.sub('entry.mouseleave', function (entry) { + + // entry.$extended.find('.context-menu').remove(); + entry.$extended.find('.context-menu').hide(); + }); + + }; + + init(); +}); diff --git a/src/_h5ai/js/inc/main.js b/src/_h5ai/js/inc/main.js index 6821c3e2..c7ad2afe 100644 --- a/src/_h5ai/js/inc/main.js +++ b/src/_h5ai/js/inc/main.js @@ -24,6 +24,7 @@ // @include "view/viewmode.js" // @include "ext/autoupdate.js" + // @include "ext/context-menu.js" // @include "ext/crumb.js" // @include "ext/custom.js" // @include "ext/download.js"