שיתוף: סקריפטים ותוספים עבור פורומים מבוססי נודביבי (NodeBB)


  • מומחה PRO p P ניהול

    לאור הגידול האקספוננציאלי של פורומי נודביבי שצצים לאחרונה כפטריות אחרי הגשם...
    אני משתף בזה כמה סקריפטים ותוספים שיש באמתחתי.

    בעז"ה נוסיף לכאן עוד סקריפטים אם וכאשר יהיו בעז"ה הזדמנויות.

    🎉 וכאן אני רוצה להודות ל @GolanArt שעודדני והמריצני בתחילת דרכי בכתיבת סקריפטים ובזכותו סקריפטים אלו באו לעולם.

    אין שום תמיכה

    אני שם אותם פה AS IS.

    🔴 למען הסדר הטוב, נא לא להגיב כאן אלא באשכול ייעודי לתגובות

    וזה יצא ראשונה (זה גם הסקריפט הראשון שכתבתי):

    סקריפט תצוגה מקדימה לנושאים

    הסקריפט בנוי מ2 חלקים, ה-JS וה-CSS.
    אפשר להריץ את ה-JS מתוך סימניה, או על ידי תוסף כמו Tampermonkey או אם אתה מנהל הפורום תוכל להטמיע את הקוד בפורום.
    את ה-CSS צריך להוסיף, או על ידי תוסף דוגמת CSS Live Editor ודומיו, או אם אתה בעל האתר תוכל להטמיע אותו באתר.

    JS

    (מותאם ל-Tampermonkey)

    // ==UserScript==
    // @name         Nodebb topic preview
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Add a preview bubble when hovering over topic titles in Nodebb based forums
    // @author       yossizahn
    // @match        https://tchumim.com/*
    // @match        http://forum.netfree.link/*
    // @grant        none
    // ==/UserScript==
    
    (function() {
        'use strict';
        function onhover() {
            /* globals require, $, socket, app */
            var self = $(this);
            if (!self.data('preview-loaded')) {
                socket.emit('topics.loadMore', {
                    tid: self.data('my-tid'),
                    after: 0,
                    count: 1,
                    direction: 1
                }, (e, d) => {
                    self.data('preview-loaded', 1);
                    require('translator').translate(e ? '<span style="color:red;">שגיאה: </span>' + e.message : d.mainPost.content,
                                                    (d) => {
                        if (app.user.uid === 0) {
                            d = d.replace(/\|\|.*\|\|/g,'<a href="https://mitmachim.top/login">תוכן מוסתר - לצפיה הרשמו או התחברו</a>');
                        } else {
                            d = d.replace(/\|\|/g,'');
                        }
                        $('#preview-' + self.data('my-tid')).children().html(d.replace(/\|\|/g,''));
                    });
                }
                           );
            }
            $('#preview-' + self.data('my-tid')).stop(true).delay(500).fadeIn();
        }
    
        function onunhover() {
            $('#preview-' + $(this).data('my-tid')).stop(true).fadeOut();
        }
    
        $(window).on('action:topics.loaded', (event, data) => {
            for (let topic of data.topics) {
                let topicElem = $('[data-tid="' + topic.tid + '"]');
                createPreview(topicElem);
            }
        });
    
        function addTopicTools() {
            let topicelems = $('[component="category/topic"]');
            topicelems.each((i, elem) => {
                createPreview($(elem));
            });
        }
    
        function createPreview(topicElem) {
            let tid = parseInt(topicElem.attr('data-tid'));
            if (!$('#preview-' + tid).length) {
                topicElem.find('.content').append('<div class="post-preview" id="preview-' + tid + '"><div class="wrap-post-preview">טוען...</div></div>');
                topicElem.find('.post-preview').hover(function(){$(this).stop(true).fadeIn();},function(){$(this).delay(600).fadeOut();});
                topicElem.find('[itemprop="url"]').data('my-tid', tid).hover(
                    onhover,
                    onunhover
                );
            }
        }
    
        $(window).on('action:ajaxify.end', addTopicTools);
    
    })();
    

    CSS

    .post-preview {
        position: absolute;
        background: white;
        border-radius: 5px;
        box-shadow: 2px 2px 13px 4px rgba(0,0,0,0.5);
        right: 100px;
        padding: 10px 15px;
        bottom: calc(100% + 10px);
        z-index: 101;
        max-height: 200px;
        display: none;
        max-width: 400px;
    }
     
    .wrap-post-preview::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
     
    .wrap-post-preview::-webkit-scrollbar-thumb {
      background: #666;
      border-radius: 20px;
    }
     
    .wrap-post-preview::-webkit-scrollbar-track {
      background: #ddd;
      border-radius: 20px;
    }
     
    .post-preview p {
    	font-size: 14px
    }
     
    .post-preview p:last-of-type {
        margin: 0;
    }
     
    .wrap-post-preview {
    	max-height: 160px;
    	overflow: auto;
    	padding: 0 0 0 7px;
    }
     
    .post-preview li {
    	border-bottom: 0;
    	height: max-content !important;
    	outline: none;
    	font-size: 10px;
    	padding: 10px;
    	border: none;
    	box-shadow: none
    }
     
    .post-preview .category-item {
    	outline: none;
    	border: none;
    	box-shadow: none
    }
     
    .post-preview .emoji {
    	width: 23px !important;
    	height: 23px !important
    }
     
    .post-preview img {
    	width: auto !important;
    	height: auto !important;
    	max-width: 300px !important;
    	display: inline !important;
    	border-radius: 0 !important
    }
    

  • מומחה PRO p P ניהול

    הוספת קיצורי מקשים למודגש ונטוי

    // ==UserScript==
    // @name         NodeBB composer shortcuts
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Add some keyboard shortcuts to nodebb composer
    // @author       yossizahn
    // @match        https://tchumim.com/*
    // @match        http://forum.netfree.link/*
    // @match        https://xn--9dbazrsfz.com/*
    // @grant        none
    // ==/UserScript==
    
    (function() {
        'use strict';
        /* globals $ */
        $(window).on('action:composer.loaded', function(e, data) {
            var composer = $('[data-uuid='+ data.post_uuid +'] .write');
            composer.on("keydown", function(event) {
                if (event.ctrlKey && event.which === 66) {
                    let boldButton = $('[data-uuid='+ data.post_uuid +'] [data-format="bold"]');
                    boldButton.click();
                    return false;
                }
                else if (event.ctrlKey && event.keyCode === 73) {
                    let italicButton = $('[data-uuid='+ data.post_uuid +'] [data-format="italic"]');
                    italicButton.click();
                    return false;
                }
                return true;
            });
        });
    })();
    

  • מומחה PRO p P ניהול

    ניהול הרשאות צ'אט למשתמשים

    (ואפשרות צפייה עבור המנהל בצאטים של משתמשים)

    אני חוזר ומזהיר שאין שום תמיכה בסקריפט זה
    קצת מסובך להתקין אותו ואני לא מעוניין לעזור לאף אחד בזה. קמצן שכמותי...

    מי שמייבין יבין מה לעשות עם זה, ומי שלא שיסתדר לבד...

    nodebb-plugin-chat-perms.zip

    יש בפנים בקובץ lib.js הגדרות שצריך להגדיר. ההגדרות מתועדות בקיצור.
    מראה מקום איך להתקין תוסף פרטי: https://docs.nodebb.org/development/plugins/#linking-the-plugin


  • מומחה PRO p P ניהול

    סקריפט חדש!

    הוספת לחצן להעתקת קטעי קוד

    JS

    // ==UserScript==
    // @name         Nodebb copy code
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Add a copy button to code areas
    // @author       yossizahn
    // @match        https://tchumim.com/*
    // @match        http://forum.netfree.link/*
    // @match        https://xn--9dbazrsfz.com/*
    // @grant        none
    // ==/UserScript==
    
    (function() {
        /* globals require, $ */
        'use strict';
        require(['clipboard'], clipboard => {
            new clipboard('.copy-code', { target: trigger => trigger.previousElementSibling })
                .on('success', e => {
                e.clearSelection();
                $(e.trigger).attr('data-original-title', 'הועתק!').tooltip('fixTitle').tooltip('show');
                setTimeout(() => $(e.trigger).attr('data-original-title', 'העתק').tooltip('fixTitle').tooltip('hide'), 1000);
            });
        });
        $(window).on('action:posts.loaded action:topic.loaded action:posts.edited', () => {
            $('[component="post/content"]>pre').wrap('<div class="pre-wrapper"><div>').after('<i class="copy-code fa fa-copy"></i>');
            $('.copy-code').attr('title', 'העתק').tooltip({ container: 'body' });
        });
    })();
    

    CSS

    .copy-code {
        background-color: #3c3c3c;
        border-radius: 5px;
        padding: 10px;
        color: #ffffff;
        display: none;
        position: absolute;
        top: 20px;
        right: 20px;
        opacity: 50%;
        cursor: pointer;
    }
    .copy-code:hover {
        opacity: 100%;
    }
    .pre-wrapper {
        position: relative;
    }
    .pre-wrapper:hover .copy-code {
        display: block;
    }
    

    4ca51f4b-6e9e-459b-bdd2-11043fa7219e-image.png


  • מומחה PRO p P ניהול

    הוספת לחצן "קוד" ליצירת קוד - inline.

    (function () {
      'use strict';
      /* globals require, $ */
      require(['composer/formatting'], function (formatting) {
        require(['composer/controls'], function (controls) {
          formatting.addButton('fa fa-terminal', function (textarea, selectionStart, selectionEnd) {
            if (selectionStart === selectionEnd) {
              var block = controls.getBlockData(textarea, '`', selectionStart);
              if (block.in && block.atEnd) {
                controls.updateTextareaSelection(textarea, selectionStart + 1, selectionStart + 1);
              } else {
                controls.insertIntoTextarea(textarea, `\`code\``);
                controls.updateTextareaSelection(textarea, selectionStart + 1, selectionStart + 'code'.length + 1);
              }
            } else {
              var wrapDelta = controls.wrapSelectionInTextareaWith(textarea, '`');
              controls.updateTextareaSelection(textarea, selectionStart + 1 + wrapDelta[0], selectionEnd + 1 - wrapDelta[1]);
            }
          }, 'code'); 
        });
      });
    })();
    

    6973631f-ebfd-4f75-b0d1-fdb41e498875-image.png


  • מומחה PRO p P ניהול

    ⭐ 🆕

    ציטוט נוח

    בעקבות האתגר ש@ישראל-חבר הציב לי (או ה"הרמה להנחתה", מאיפה המילים האלו מגיעים? 🤔)

    הנה התוצאה:

    2020-06-09-20-00-16.gif

    הקוד:

    (function () {
        let timeOut = null;
        let processing = false;
        document.addEventListener('selectionchange', () => {
            if (processing || !document.body.classList.contains('page-topic')) return;
            setTimeout(()=> {
                $('.quoter').tooltip('destroy').remove();
            }, 100);
            if (timeOut) clearTimeout(timeOut);
            $('#quoter-anchor').remove();
            timeOut = setTimeout(showQuoter, 250);
        });
        let mouseDown = 0;
        document.addEventListener('mousedown', () => {
            ++mouseDown;
        });
        document.addEventListener('mouseup', () => {
            --mouseDown;
        });
        function showQuoter () {
            if (mouseDown) return setTimeout(showQuoter, 250);
            let selection = document.getSelection();
            if (selection.isCollapsed) return;
            let anchorElement = selection.anchorNode.nodeType === 3 ? selection.anchorNode.parentNode : selection.anchorNode;
            let focusElement = selection.focusNode.nodeType === 3 ? selection.focusNode.parentNode : selection.focusNode;
            let postElement = focusElement.closest('[component="post"]');
            let postContentElement = postElement.querySelector('[component="post/content"]');
            let selectionRange = selection.getRangeAt(0);
            if (postElement && anchorElement.closest('[component="post"]') === postElement /* the selection doesn't span more than 1 post */) {
                processing = true;
                let selectionIsBackward = selection.anchorNode !== selectionRange.startContainer ||
                    (selection.anchorNode === selection.focusNode && selection.anchorOffset > selection.focusOffset);
                // clamp selection to the post content, and make sure that the focus is within a text node
                let count = 0; // make sure not to loop forever...
                while (selection.focusNode.nodeType !== 3 || focusElement.closest('[component="post/content"]') === null) {
                    if (count > 100) break;
                    if (selectionIsBackward) {
                        selection.modify('extend', 'forward', 'character');
                    } else {
                        selection.modify('extend', 'backward', 'character');
                    }
                    focusElement = selection.focusNode.nodeType === 3 ? selection.focusNode.parentNode : selection.focusNode;
                    count++;
                }
                setTimeout(() => processing = false);
                selectionRange = selection.getRangeAt(0).cloneRange();
                selectionRange.collapse(selectionIsBackward);
                selectionRange.insertNode($('<span id="quoter-anchor"></span>')[0]);
                let quoterAnchor = document.getElementById('quoter-anchor');
                let { top, left } = $(quoterAnchor).offset();
                let quoter = $(`<i title="צטט" style="display: hidden" class="fa fa-quote-right quoter"></i>`);
                $(document.body).append(quoter);
                if (selectionIsBackward) {
                    top -= quoter[0].clientHeight + 4;
                } else {
                    top += parseFloat(getComputedStyle(quoterAnchor).lineHeight);
                }
                left -= quoter[0].clientWidth / 2;
    
                quoter.css({ top: top + 'px', left: left + 'px' })
                    .tooltip()
                    .click((e) => {
                    console.log(document.getSelection());
                    postElement.querySelector('[component="post/quote"]').click();
                });
            }
        }
    })();
    

    CSS

    .quoter {
        position: absolute;
        padding: 7px;
        color: white;
        background-color: #ff3366;
        border-radius: 5px;
        cursor: pointer;
        user-select: none;
        opacity: 50%;
    }
    
    .quoter:hover {
        opacity: 100%;
    }
    

התחבר כדי לפרסם תגובה
 

עיצוב: GolanArt

9
מחובר

2.1k
משתמשים

4.0k
נושאים

31.3k
פוסטים