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

אשתדל לכתוב את המדריך מפורט כמה שיותר
הקרדיט לא מגיע לי אלא ל@yossiz שכתב זאת במקצועות

הפורום כאן גודל מיום ליום ויוצא שאנחנו צריכים לפתוח הרבה נושאים שהכותרת שלהם לא ברורה

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

בכדי שהסקריפט יעבוד יש שני חלקים שצריכים לעשות
1 לבנות סקריפט JS
2 לבנות סקריפט CSS

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

אז מתחילים
נתקין את התוסף Tampermonkey
לדפדפן כרום
לדפדפן פיירפוקס

לאחר ההתקנה נלחץ על התוסף בצד שמאל למעלה
שם נלחץ על זה

(התמונה באדיבות פישל ולא@yossiz )
שזה הוספת סקריפט חדש

בחלון שנפתח נעשה קונטרל+A
נמחק הכול שם
ונדביק את זה

// ==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);

})();

נלחץ file ואז save

כעת נוכל לראות שזה כבר עובד אבל לא במקום
כעת נשאר רק להעמיד אותו במקום

נתקין את התוסף ל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: 1111;
    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
}

נלחץ על איפה שיש 3

נאפשר אותו

אפשר לראות בתמונה שהוא מכיל את הנתונים על האתר תחומים (https://tchumim.com/)
נוכל לסגור את החלון נפתח את נושאים שלא נקראו
וואלה

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

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

תחומים - פורום חרדי מקצועי

פישל