Removing more dependencies

2025-10-29 18:00:23 +00:00 · 2018-03-13 20:59:01 +01:00
parent f566a19857
commit 714b885dc5
8 changed files with 178 additions and 72 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,11 +5,11 @@ var gulp    = require('gulp'),

 gulp.task('js', function () {
    gulp.src(['server/VERSION.js', 'server/config/api_key.js', 'server/public/assets/js/*.js', '!server/public/assets/js/embed*', '!server/public/assets/js/token*', '!server/public/assets/js/remotecontroller.js', '!server/public/assets/js/callback.js'])
-        .pipe(uglify({
+        /*.pipe(uglify({
        	mangle: true,
            compress: true,
        	enclose: true
-        }))
+        }))*/
        .pipe(concat('main.min.js'))
        .pipe(gulp.dest('server/public/assets/dist'));
 });
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -2066,15 +2066,42 @@ nav ul li:hover, nav ul li.active {
    margin-right: 0 !important;
 }

+#context-menu-overlay {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: 99999999;
+}
+
 .context-menu-list {
-    z-index: 99999999 !important;
+    position: absolute;
+}
+
+.context-menu-list {
+    z-index: 999999999 !important;
    background: #2d2d2d;
    border: 1px solid #2d2d2d;
+    width: 200px;
+    border-radius: 3px;
+}
+
+.context-menu-separator {
+    background: white !important;
+    height: 1px;
+    padding: 0px !important;
 }

 .context-menu-item {
    color:white;
+    padding: 5px 15px;
    background: #2d2d2d;
+    cursor: pointer;
+}
+
+.context-menu-item:hover {
+    background: rgba(0,0,0,.5);
 }

 .context-menu-item.context-menu-hover {
@@ -2083,6 +2110,7 @@ nav ul li:hover, nav ul li.active {

 .context-menu-item.context-menu-disabled {
    background-color: #353535 !important;
+    cursor: auto;
 }

 .close-settings{
--- a/server/public/assets/js/admin.js
+++ b/server/public/assets/js/admin.js
@@ -10,6 +10,7 @@ var Admin = {
        if(adminpass == undefined || adminpass == "") {
            //adminpass = Crypt.get_pass(chan.toLowerCase());
        }
+        $(".delete-context-menu").removeClass("context-menu-disabled");
        names     = ["vote","addsongs","longsongs","frontpage", "allvideos",
        "removeplay", "skip", "shuffle", "userpass"];
        //Crypt.set_pass(chan.toLowerCase(), Crypt.tmp_pass);
@@ -144,6 +145,9 @@ var Admin = {
        }
        $("#admin-lock").removeClass("clickable");
        $("#password").attr("placeholder", "Enter admin password");
+        if(!$(".delete-context-menu").hasClass("context-menu-disabled")) {
+            $(".delete-context-menu").addClass("context-menu-disabled");
+        }
    },

    save: function(userpass) {
--- a/server/public/assets/js/channel.js
+++ b/server/public/assets/js/channel.js
@@ -416,65 +416,22 @@ var Channel = {
    },

    add_context_menu: function() {
-        $.contextMenu({
-            selector: '.playlist-element',
-            reposition: true,
-            autoHide: true,
-            items: {
-                copy: {
-                    name: "Copy link",
-                    callback: function(key, opt){
-                        var this_id = $(this[0]).attr("data-video-id");
-                        var this_url = "https://www.youtube.com/watch?v=" + this_id;
-                        $(".copy_video_id").css("display", "block");
-                        $(".copy_video_id").text(this_url);
-                        var copyTextarea = document.querySelector('.copy_video_id');
-                        copyTextarea.select();
-                        var successful = document.execCommand('copy');
-                        if(successful) {
-                            Materialize.toast("Copied!", 2000, "green lighten");
-                        } else {
-                            Materialize.toast("Error copying..", 2000, "red lighten");
-                        }
-                        $(".copy_video_id").css("display", "none");
-                    }
-                },
-                similar: {
-                    name: "Find Similar",
-                    callback: function(key, opt) {
-                        var this_id = $(this[0]).attr("data-video-id");
-                        Search.search(this_id, false, true);
-                        if(Helper.contains($(".search-container").attr("class").split(" "), "hide")) {
-                            Search.showSearch();
-                        }
-                    }
-                },
-                "sep1": "---------",
-                delete: {
-                    name: "Delete",
-                    callback: function(key, opt) {
-                        var this_id = $(this[0]).attr("data-video-id");
-                        var this_type = $(this[0]).attr("data-video-type");
+        $(document).on("contextmenu", ".vote-container", function(e) {
+            e.preventDefault();
+            var that = this;
+            contextListener(that, e);
+        });

-                        if(this_type == "suggested") {
-                            number_suggested = number_suggested - 1;
-                            if(number_suggested < 0) number_suggested = 0;
+        $(document).on("contextmenu", ".add-suggested", function(e) {
+            e.preventDefault();
+            var that = this;
+            contextListener(that, e);
+        });

-                            var to_display = number_suggested > 9 ? "9+" : number_suggested;
-                            if(!$(".suggested-link span.badge.new.white").hasClass("hide") && to_display == 0){
-                                $(".suggested-link span.badge.new.white").addClass("hide");
-                            }
-
-                            $(".suggested-link span.badge.new.white").text(to_display);
-                        }
-
-                        List.vote(this_id, "del");
-                    },
-                    disabled: function(key, opt) {
-                        return w_p;
-                    }
-                }
-            }
+        $(document).on("click", ".list-remove", function(e) {
+            e.preventDefault();
+            var that = this;
+            contextListener(that, e);
        });
    },

@@ -543,7 +500,7 @@ var Channel = {
            var channel_before_move = chan.toLowerCase();
            clearTimeout(timed_remove_check);
            changing_to_frontpage = true;
-            $.contextMenu( 'destroy', ".playlist-element" );
+            //$.contextMenu( 'destroy', ".playlist-element" );
            user_change_password = false;
            clearTimeout(width_timeout);
            if(fireplace_initiated){
@@ -659,7 +616,7 @@ var Channel = {
                    $(".page-footer").removeClass("padding-bottom-novideo");
                    $("#favicon").attr("href", "/assets/images/favicon-32x32.png");

-                    $(".context-menu-list").remove();
+                    //$(".context-menu-list").remove();
                    Helper.log(["Socket", socket]);
                    if($("#alreadyfp").length == 1){
                        Frontpage.init();
--- a/server/public/assets/js/functions.js
+++ b/server/public/assets/js/functions.js
@@ -181,7 +181,6 @@ function get_list_ajax() {
            }
        },
        error: function(response) {
-            console.log(response);
            if(response.responseJSON.status == 403) {
                start_auth();
            } else if(response.responseJSON.status == 429) {
@@ -195,6 +194,44 @@ function get_list_ajax() {
    });
 }

+function contextListener(that, e) {
+    var parent = $(that).parent();
+    var suggested = false;
+    if(parent.attr("id").indexOf("suggested-") > -1) suggested = true;
+    $(".context-menu-root").attr("data-suggested", suggested);
+    $(".context-menu-root").attr("data-id", parent.attr("id").replace("suggested-", ""));
+    $("#context-menu-overlay").removeClass("hide");
+    var left = e.pageX - $(".context-menu-root").width() / 2;
+    var top = e.pageY;
+    if(left + $(".context-menu-root").width() > $(window).width()) {
+        left = $(window).width() - $(".context-menu-root").width() - 15;
+    } else if (left < 0) {
+        left = 11;
+    }
+    if(top + $(".context-menu-root").width() > $(window).height()) {
+        top = $(window).height() - $(".context-menu-root").height() - 15;
+    } else if(top < 0) {
+        top = 15;
+    }
+    $(".context-menu-root").css({left: left,top:top});
+    $(".context-menu-root").removeClass("hide");
+    if(!Helper.mobilecheck()) {
+        mouseContext(left, top);
+    }
+}
+
+function mouseContext(left, top) {
+    $(document).off("mousemove");
+    $(document).mousemove(function( event ) {
+       if(event.pageX < left - 60 || event.pageX > left + $(".context-menu-root").width() + 60 ||
+          event.pageY < top - 60 || event.pageY > top + $(".context-menu-root").height() + 60) {
+           $(".context-menu-root").addClass("hide");
+           $("#context-menu-overlay").addClass("hide");
+           $(document).off("mousemove");
+       }
+    });
+}
+
 function get_np_ajax() {
    /*var c = Crypt.get_userpass(chan.toLowerCase());
    if(c == undefined) c = "";*/
--- a/server/public/assets/js/listeners.js
+++ b/server/public/assets/js/listeners.js
@@ -447,11 +447,6 @@ $(document).on("click", "#chat_submit", function(e){
    $("#chatForm").submit();
 });

-$(document).on("click", ".list-remove", function(e) {
-    e.preventDefault();
-    $('#' + $(this).parent().attr("id")).contextMenu();
-});
-
 $(document).on("mouseleave", ".card.sticky-action", function(e){
    var that = this;
    $(that).find(".card-reveal").attr("style", "display: block;transform: translateY(0%);");
@@ -524,6 +519,76 @@ $(document).on("click", ".extra-button-delete", function(e){
    }
 });

+$(document).on("click", "#context-menu-overlay", function(e) {
+    $(".context-menu-root").addClass("hide");
+    $("#context-menu-overlay").addClass("hide");
+    $(".context-menu-root").attr("data-id", "");
+});
+
+$(document).on("click", ".copy-context-menu", function(e) {
+    e.preventDefault();
+    var that = this;
+    var parent = $(that).parent();
+    var id = parent.attr("data-id");
+    if(id != "") {
+        $(".copy_video_id").css("display", "block");
+        $(".copy_video_id").text("https://www.youtube.com/watch?v=" + id);
+        var copyTextarea = document.querySelector('.copy_video_id');
+        copyTextarea.select();
+        var successful = document.execCommand('copy');
+        if(successful) {
+            Materialize.toast("Copied!", 2000, "green lighten");
+        } else {
+            Materialize.toast("Error copying..", 2000, "red lighten");
+        }
+        $(".copy_video_id").css("display", "none");
+    }
+    $(".context-menu-root").addClass("hide");
+    $("#context-menu-overlay").addClass("hide");
+    $(".context-menu-root").attr("data-id", "");
+});
+
+$(document).on("click", ".find-context-menu", function(e) {
+    e.preventDefault();
+    var that = this;
+    var parent = $(that).parent();
+    var id = parent.attr("data-id");
+    Search.search(id, false, true);
+    if(Helper.contains($(".search-container").attr("class").split(" "), "hide")) {
+        Search.showSearch();
+    }
+    $(".context-menu-root").addClass("hide");
+    $("#context-menu-overlay").addClass("hide");
+    $(".context-menu-root").attr("data-id", "");
+});
+
+$(document).on("click", ".delete-context-menu", function(e) {
+    var that = this;
+    if($(that).hasClass("context-menu-disabled")) {
+        return;
+    }
+    var parent = $(that).parent();
+    var id = parent.attr("data-id");
+    var suggested = parent.attr("data-suggested");
+
+    if(suggested == "true") {
+        number_suggested = number_suggested - 1;
+        if(number_suggested < 0) number_suggested = 0;
+
+        var to_display = number_suggested > 9 ? "9+" : number_suggested;
+        if(!$(".suggested-link span.badge.new.white").hasClass("hide") && to_display == 0){
+            $(".suggested-link span.badge.new.white").addClass("hide");
+        }
+
+        $(".suggested-link span.badge.new.white").text(to_display);
+    }
+
+    List.vote(id, "del");
+    $(".context-menu-root").addClass("hide");
+    $("#context-menu-overlay").addClass("hide");
+    $(".context-menu-root").attr("data-id", "");
+})
+
 $(document).on("click", "#closePlayer", function(e){
    e.preventDefault();
    socket.emit("change_channel");
@@ -589,6 +654,10 @@ $(document).on("click", ".change_user_pass_btn", function(e) {
    $("#user-pass-input").focus();
 });

+$(document).on("contextmenu", "#context-menu-overlay", function(e) {
+    e.preventDefault();
+});
+
 $(document).on("click", ".submit-user-password", function(e) {
    e.preventDefault();
    if(user_auth_started) {
@@ -1199,7 +1268,7 @@ $(document).on( "click", ".add-suggested", function(e){
    var title 	= $(this).attr("data-video-title");
    var length 	= $(this).attr("data-video-length");
    var added_by = $(this).attr("data-added-by");
-    Search.submit(id, title, length, false, 0, 1, 0, length);
+    Search.submit(id, title, parseInt(length), false, 0, 1, 0, parseInt(length));
    if(added_by == "user") {
        number_suggested = number_suggested - 1;
        if(number_suggested < 0) number_suggested = 0;
--- a/server/public/layouts/client/channel.handlebars
+++ b/server/public/layouts/client/channel.handlebars
@@ -15,3 +15,17 @@
        </div>-->
    </main>
 </div>
+<ul class="context-menu-list context-menu-root hide">
+    <li class="context-menu-item copy-context-menu">
+        <span>Copy link</span>
+    </li>
+    <li class="context-menu-item find-context-menu">
+        <span>Find Similar</span>
+    </li>
+    <li class="context-menu-item context-menu-separator context-menu-not-selectable">
+    </li>
+    <li class="context-menu-item delete-context-menu context-menu-disabled">
+        <span>Delete</span>
+    </li>
+</ul>
+<div id="context-menu-overlay" class="hide"></div>
--- a/server/public/layouts/client/main.handlebars
+++ b/server/public/layouts/client/main.handlebars
@@ -26,7 +26,6 @@
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        {{#if embed}}
        {{else}}
-            <link type="text/css" rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" />
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
            <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
            <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
@@ -43,8 +42,6 @@
        {{#if embed}}
        {{else}}
            <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
-            <script type="text/javascript" src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
-            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
            <script async type="text/javascript">
                if(window.location.hostname != "localhost") {
                    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){