Remove last jQuery refs and jQuery itself.

src/_h5ai/private/conf/options.json

@@ -93,13 +93,6 @@
         "interval": 5000
     },
 
-    /*
-    Enable a context menu (right-click) on some elements.
-    */
-    "contextmenu": {
-        "enabled": false
-    },
-
     /*
     Show a clickable breadcrumb.
     */

src/_h5ai/public/css/lib/ext/contextmenu.less

@@ -1,5 +1,4 @@
 #cm-overlay {
-    display: none;
     position: fixed;
     left: 0;
     top: 0;

src/_h5ai/public/js/lib/ext/contextmenu.js

@@ -1,65 +1,71 @@
-const {each} = require('../util');
-const {win, jq} = require('../globals');
+const {each, dom} = require('../util');
 const resource = require('../core/resource');
 const allsettings = require('../core/settings');
 
-const doc = win.document;
 const settings = Object.assign({
     enabled: false
 }, allsettings.contextmenu);
-const templateOverlay = '<div id="cm-overlay"/>';
-const templatePanel = '<div class="cm-panel"><ul/></div>';
-const templateSep = '<li class="cm-sep"/>';
-const templateEntry = '<li class="cm-entry"><span class="cm-icon"><img/></span><span class="cm-text"/></li>';
-const templateLabel = '<li class="cm-label"><span class="cm-text"/></li>';
+const tplOverlay = '<div id="cm-overlay"></div>';
+const tplPanel = '<div class="cm-panel"><ul></ul></div>';
+const tplSep = '<li class="cm-sep"></li>';
+const tplEntry = '<li class="cm-entry"><span class="cm-icon"><img/></span><span class="cm-text"></span></li>';
+const tplLabel = '<li class="cm-label"><span class="cm-text"></span></li>';
 
 
-function createOverlay(callback) {
-    const $overlay = jq(templateOverlay);
+const closestId = el => {
+    while (!el._cmId && el.parentNode) {
+        el = el.parentNode;
+    }
+    return el._cmId;
+};
 
-    $overlay
-        .on('click contextmenu', ev => {
-            ev.stopPropagation();
-            ev.preventDefault();
+const createOverlay = callback => {
+    const $overlay = dom(tplOverlay);
 
-            const cmId = jq(ev.target).closest('.cm-entry').data('cm-id');
+    const handle = ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
 
-            if (ev.target === $overlay[0] || cmId !== undefined) {
-                $overlay.remove();
-                callback(cmId);
-            }
-        });
+        const cmId = closestId(ev.target);
 
-    return $overlay;
-}
+        if (ev.target === $overlay[0] || cmId !== undefined) {
+            $overlay.rm();
+            callback(cmId);
+        }
+    };
 
-function createPanel(menu) {
-    const $panel = jq(templatePanel);
+    return $overlay
+        .on('contextmenu', handle)
+        .on('click', handle);
+};
+
+const createPanel = menu => {
+    const $panel = dom(tplPanel);
     const $ul = $panel.find('ul');
     let $li;
 
     each(menu, entry => {
         if (entry.type === '-') {
-            jq(templateSep).appendTo($ul);
+            dom(tplSep).appTo($ul);
         } else if (entry.type === 'l') {
-            jq(templateLabel).appendTo($ul)
+            dom(tplLabel).appTo($ul)
                 .find('.cm-text').text(entry.text);
         } else if (entry.type === 'e') {
-            $li = jq(templateEntry).appendTo($ul);
-            $li.data('cm-id', entry.id);
+            $li = dom(tplEntry).appTo($ul);
+            $li[0]._cmId = entry.id;
             $li.find('.cm-text').text(entry.text);
             if (entry.icon) {
                 $li.find('.cm-icon img').attr('src', resource.icon(entry.icon));
             } else {
-                $li.find('.cm-icon').addClass('no-icon');
+                $li.find('.cm-icon').addCls('no-icon');
             }
         }
     });
 
     return $panel;
-}
+};
 
-function positionPanel($overlay, $panel, x, y) {
+const positionPanel = ($overlay, $panel, x, y) => {
     const margin = 4;
 
     $panel.css({
@@ -69,17 +75,16 @@ function positionPanel($overlay, $panel, x, y) {
     });
     $overlay.show();
 
-    const overlayOffset = $overlay.offset();
-    const overlayLeft = overlayOffset.left;
-    const overlayTop = overlayOffset.top;
-    const overlayWidth = $overlay.outerWidth(true);
-    const overlayHeight = $overlay.outerHeight(true);
+    const or = $overlay[0].getBoundingClientRect();
+    const pr = $panel[0].getBoundingClientRect();
 
-    // const panelOffset = $panel.offset();
-    // const panelLeft = panelOffset.left;
-    // const panelTop = panelOffset.top;
-    let panelWidth = $panel.outerWidth(true);
-    let panelHeight = $panel.outerHeight(true);
+    const overlayLeft = or.left;
+    const overlayTop = or.top;
+    const overlayWidth = or.width;
+    const overlayHeight = or.height;
+
+    let panelWidth = pr.width;
+    let panelHeight = pr.height;
 
     let posLeft = x;
     let posTop = y;
@@ -111,54 +116,42 @@ function positionPanel($overlay, $panel, x, y) {
     }
 
     $panel.css({
-        left: posLeft,
-        top: posTop,
-        width: panelWidth,
-        height: panelHeight,
+        left: posLeft + 'px',
+        top: posTop + 'px',
+        width: panelWidth + 'px',
+        height: panelHeight + 'px',
         opacity: 1
     });
-}
+};
 
-function showMenuAt(x, y, menu, callback) {
+const showMenuAt = (x, y, menu, callback) => {
     const $overlay = createOverlay(callback);
     const $panel = createPanel(menu);
-    $overlay.append($panel).appendTo('body');
+    $overlay.hide().app($panel).appTo('body');
     positionPanel($overlay, $panel, x, y);
-}
+};
 
-function init() {
+const init = () => {
     if (!settings.enabled) {
         return;
     }
 
-    jq(doc).on('contextmenu', ev => {
-        ev.stopPropagation();
-        ev.preventDefault();
-        jq(ev.target).trigger(jq.Event('h5ai-contextmenu', {
-            originalEvent: ev,
-            showMenu: (menu, callback) => {
-                showMenuAt(ev.pageX, ev.pageY, menu, callback);
-            }
-        }));
-    });
+    const menu = [
+        {type: 'e', id: 'e1', text: 'testing context menus'},
+        {type: 'e', id: 'e2', text: 'another entry'},
+        {type: 'e', id: 'e3', text: 'one with icon', icon: 'folder'},
+        {type: '-'},
+        {type: 'e', id: 'e4', text: 'one with icon', icon: 'x'},
+        {type: 'e', id: 'e5', text: 'one with icon', icon: 'img'}
+    ];
 
-    // const menu = [
-    //     {type: 'e', id: 'e1', text: 'testing context menus'},
-    //     {type: 'e', id: 'e2', text: 'another entry'},
-    //     {type: 'e', id: 'e3', text: 'one with icon', icon: 'folder'},
-    //     {type: '-'},
-    //     {type: 'e', id: 'e4', text: 'one with icon', icon: 'x'},
-    //     {type: 'e', id: 'e5', text: 'one with icon', icon: 'img'}
-    // ];
-    // const callback = res => {
-    //     console.log('>> CB-RESULT >> ' + res);
-    // };
-    //
-    // jq(doc).on('h5ai-contextmenu', '#items .item.folder', ev => {
-    //     console.log('CM', ev);
-    //     ev.showMenu(menu, callback);
-    // });
-}
+
+    dom('#view').on('contextmenu', ev => {
+        ev.preventDefault();
+        // showMenuAt(ev.pageX, ev.pageY, menu, res => console.log('>> CB-RESULT >> ' + res));
+        showMenuAt(ev.pageX, ev.pageY, menu);
+    });
+};
 
 
 init();

src/_h5ai/public/js/lib/ext/preview-vid.js

@@ -1,5 +1,5 @@
-const {each, map, includes, compact} = require('../util');
-const {win, jq} = require('../globals');
+const {each, includes, compact, dom} = require('../util');
+const {win} = require('../globals');
 const event = require('../core/event');
 const allsettings = require('../core/settings');
 const preview = require('./preview');
@@ -9,84 +9,92 @@ const settings = Object.assign({
     types: []
 }, allsettings['preview-vid']);
 
-function preloadVideo(src, callback) {
-    const $video = jq('<video/>')
-        .one('loadedmetadata', () => {
+const preloadVideo = (src, callback) => {
+    const $video = dom('<video/>')
+        .on('loadedmetadata', () => {
             callback($video);
-            // win.setTimeout(function () { callback($video); }, 1000); // for testing
+            // win.setTimeout(() => {callback($video);}, 1000); // for testing
         })
         .attr('autoplay', 'autoplay')
         .attr('controls', 'controls')
         .attr('src', src);
-}
+};
 
-function onEnter(items, idx) {
+const onEnter = (items, idx) => {
     const currentItems = items;
     let currentIdx = idx;
     let currentItem = items[idx];
 
-    function onAdjustSize() {
-        const $content = jq('#pv-content');
-        const $vid = jq('#pv-vid-video');
+    const onAdjustSize = () => {
+        const $content = dom('#pv-content');
+        const $vid = dom('#pv-vid-video');
 
-        if ($vid.length) {
-            $vid.css({
-                left: String(($content.width() - $vid.width()) * 0.5) + 'px',
-                top: String(($content.height() - $vid.height()) * 0.5) + 'px'
-            });
+        const contentW = $content[0].offsetWidth;
+        const contentH = $content[0].offsetHeight;
+        const vidW = ($vid[0] || {}).offsetWidth;
+        const vidH = ($vid[0] || {}).offsetHeight;
 
-            preview.setLabels([
-                currentItem.label,
-                String($vid[0].videoWidth) + 'x' + String($vid[0].videoHeight),
-                String((100 * $vid.width() / $vid[0].videoWidth).toFixed(0)) + '%'
-            ]);
+        if ($vid.length === 0) {
+            return;
         }
-    }
 
-    function onIdxChange(rel) {
+        $vid.css({
+            left: (contentW - vidW) * 0.5 + 'px',
+            top: (contentH - vidH) * 0.5 + 'px'
+        });
+
+        const vidVW = $vid[0].videoWidth;
+        const vidVH = $vid[0].videoHeight;
+
+        preview.setLabels([
+            currentItem.label,
+            String(vidVW) + 'x' + String(vidVH),
+            String((100 * vidW / vidVW).toFixed(0)) + '%'
+        ]);
+    };
+
+    const onIdxChange = rel => {
         currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
         currentItem = currentItems[currentIdx];
 
         const spinnerTimeout = win.setTimeout(() => preview.showSpinner(true), 200);
 
-        if (jq('#pv-vid-video').length) {
-            jq('#pv-vid-video')[0].pause();
+        if (dom('#pv-vid-video').length) {
+            dom('#pv-vid-video')[0].pause();
         }
 
-        function updateMeta() {
+        const updateMeta = () => {
             onAdjustSize();
             preview.setIndex(currentIdx + 1, currentItems.length);
             preview.setRawLink(currentItem.absHref);
-        }
+        };
 
-        function swap(nuContent) {
-            jq('#pv-content').empty().append(nuContent.attr('id', 'pv-vid-video')).fadeIn(200);
-            // small timeout, so nuContent is visible and therefore its width is available
-            win.setTimeout(updateMeta, 10);
-        }
-
-        function onReady($preloadedContent) {
+        const onReady = $preloadedContent => {
             win.clearTimeout(spinnerTimeout);
             preview.showSpinner(false);
 
-            jq('#pv-content').fadeOut(100, () => swap($preloadedContent));
-        }
+            dom('#pv-content')
+                .clr()
+                .app($preloadedContent.attr('id', 'pv-vid-video'))
+                .show();
+            updateMeta();
+        };
 
         preloadVideo(currentItem.absHref, onReady);
-    }
+    };
 
     onIdxChange(0);
     preview.setOnIndexChange(onIdxChange);
     preview.setOnAdjustSize(onAdjustSize);
     preview.enter();
-}
+};
 
-function initItem(item) {
+const initItem = item => {
     if (item.$view && includes(settings.types, item.type)) {
         item.$view.find('a').on('click', ev => {
             ev.preventDefault();
 
-            const matchedItems = compact(map(jq('#items .item'), el => {
+            const matchedItems = compact(dom('#items .item').map(el => {
                 const matchedItem = el._item;
                 return includes(settings.types, matchedItem.type) ? matchedItem : null;
             }));
@@ -94,18 +102,18 @@ function initItem(item) {
             onEnter(matchedItems, matchedItems.indexOf(item));
         });
     }
-}
+};
 
-function onViewChanged(added) {
+const onViewChanged = added => {
     each(added, initItem);
-}
+};
 
-function init() {
+const init = () => {
     if (!settings.enabled) {
         return;
     }
 
     event.sub('view.changed', onViewChanged);
-}
+};
 
 init();

src/_h5ai/public/js/lib/globals.js

@@ -8,7 +8,6 @@ const publish = (id, name) => {
 };
 
 publish('window', 'win');
-publish('jQuery', 'jq');
 publish('kjua', 'kjua');
 publish('marked', 'marked');
 publish('Prism', 'prism');