Полезные пользовательские скрипты (UserScript) для форума

[Alex11223]

Вставляет видеоплеер под ссылками на youtube или coub (теги типа [video] не нужны).

Специально для min@y™.

ссылка на загрузку/установку (должно вывестись окно установки при наличии Greasemonkey/Tampermonkey)

// ==UserScript==
// @name         ProgrammersForumVideoEmbed
// @namespace    http://programmersforum.ru/
// @version      0.51
// @description  replaces youtube and coub links with embedded video player frames
// @author       Alex P
// @include      http://programmersforum.ru/*
// @include      http://www.programmersforum.ru/*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @grant        none
// @downloadURL  https://github.com/AlexP11223/ProgForumRuUserscripts/raw/master/pf_video_embed.user.js
// ==/UserScript==

(function() {
    'use strict';

    if (window.videoEmbedInitialized)
        return;
    window.videoEmbedInitialized = true;

    var YOUTUBE_EMBED_TEMPLATE = '<iframe src="https://www.youtube.com/embed/_ID_" width="560" height="315" frameborder="0" allowfullscreen></iframe>';
    var COUB_EMBED_TEMPLATE = '<iframe src="//coub.com/embed/_ID_?muted=false&autostart=false&originalSize=false&startWithHD=true" width="640" height="270" frameborder="0" allowfullscreen></iframe>';

    function insertEmbed(origLinkNode, embedTemplate, id) {
        var html = '<br/>' + embedTemplate.replace('_ID_', id) + '<br/>';

        $(html).insertAfter(origLinkNode);
        origLinkNode.addClass('_embedded');
    }

    function parseURL(url) {
        var parser = document.createElement('a');
        var searchDict = {};

        parser.href = url;

        var queries = parser.search.replace(/^\?/, '').split('&');
        var i;
        for (i = 0; i < queries.length; i++) {
            var parts = queries[i].split('=');
            searchDict[parts[0]] = parts[1];
        }

        return {
            protocol: parser.protocol,
            host: parser.host,
            hostname: parser.hostname,
            port: parser.port,
            pathname: parser.pathname,
            search: parser.search,
            hash: parser.hash,
            searchDict: searchDict,
            pathParts: parser.pathname.substring(1).split('/')
        };
    }

    function containsAny(str, substrings) {
        for (var i = 0; i != substrings.length; i++) {
            var substring = substrings[i];
            if (str.indexOf(substring) != -1) {
                return true;
            }
        }
        return false;
    }

    function parseYoutube(href) {
        function parseId(url) {
            if (url.hostname.indexOf('youtu.be') != -1)
                return url.pathParts[0];

            if (url.searchDict['v'])
                return url.searchDict['v'];

            if (['watch', 'embed', 'v'].indexOf(url.pathParts[0]) != -1)
                return url.pathParts[1];

            return false;
        }

        function parseTime(s) {
            try {
                var parts = s.replace(/[^0-9]+/g, ' ').split(' ');
                parts = $.grep(parts, function(el) { return el !== '';});

                if (parts.length === 1) {
                    return parseInt(parts[0], 10);
                } else if (parts.length === 2) {
                    return parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
                } else if (parts.length === 3) {
                    return parseInt(parts[0], 10) * 3600 + parseInt(parts[1], 10) * 60 + parseInt(parts[2], 10);
                }
            } catch (e) {
            }
            return 0;
        }

        var url = parseURL(href);

        var domains = ['youtube.com', 'youtu.be'];

        if (!containsAny(url.hostname, domains))
            return false;

        var id = parseId(url);

        if (id) {
            var ret = { id: id, params: { } };

            if (url.searchDict['t']) {
                var t = parseTime(url.searchDict['t']);
                if (t) {
                    ret.params.start = t;
                }
            }

            return ret;
        }

        return false;
    }

    function parseCoubId(href) {
        var url = parseURL(href);

        var domains = ['coub.com'];

        if (!containsAny(url.hostname, domains))
            return false;

        if (['view', 'embed'].indexOf(url.pathParts[0]) != -1)
            return url.pathParts[1];

        return false;
    }

    var postBlocks = $('#posts, #post, td.alt1:has(hr)');

    $.each(postBlocks.find('a[href*="youtu"], a[href*="coub"]'), function (i, link) {
        if (!$(link).is(':visible') || $(link).is('._embedded'))
            return;

        // skip signature
        if ($(link).parents('div').eq(0).is(':contains("__________________")'))
            return;

        var url = $(link).attr('href');

        var youtube = parseYoutube(url);
        if (youtube) {
            var paramsStr = '';
            if (!$.isEmptyObject(youtube.params)) {
                paramsStr = '?' + $.param(youtube.params);
            }
            insertEmbed($(link), YOUTUBE_EMBED_TEMPLATE, youtube.id + paramsStr);
        }

        var coubId = parseCoubId(url);
        if (coubId) {
            insertEmbed($(link), COUB_EMBED_TEMPLATE, coubId);
        }
    });
})();

[BDA]

Вот так в отпуск на пару недель уедешь, а тут уже всё и сделано

[Alar]

Сообщение от BDA

Вот так в отпуск на пару недель уедешь, а тут уже всё и сделано

почему всё. предлагаю доделать скрипты так, чтобы залить на сервер и я их подключу для других не дефолтных стилей.

[Alex11223]

Какие стили? Их же 2, и на обоих работает.

Подключать по идее почти можно и так, кроме тех, где GM_setClipboard и GM_addStyle. Но вместо addStyle наверно лучше просто отдельно добавить css.

[Alar]

также подключить как подключен через скрипт код подсветки

просто ссылкой на срипт. рассказать как сделано?

стиль легко клонируется.

[Alex11223]

Я о том, что доделывать по идее особо ничего не надо, все кроме копирования ссылки должны и так работать, только подключить jQuery и CSS из addStyle вынести в отдельный файл.

Ну и в зависимости от того как подключать может быть надо засунуть это в DOMContentLoaded/$(document).ready.

Сообщение от Alar

рассказать как сделано?

Ну оно вроде бы подключается только на страницах тем (кстати не работает в предпросмотре и при просмотре отдельного сообщения), так что наверно где-то в стиле добавлено.

Так что сделать надо, чтоб можно было подключить?

[Alar]

сделать js файл который кидается на сервер.

и ссылку вызова его, которым можно вызвать и выполнить с передачей или без передачи параметров вызова.

[Вадим Мошев]

Скрипт, который уменьшает изображения, если их ширина или высота (хотя бы одно из измерений) превышает 640 или 480 пикселей соответственно. В этом случае, изображение уменьшается, сохраняя при этом пропорции. Если изображение уменьшается, перед ним появляется надпись: "Это изображение было отмасштабировано. Нажмите сюда, чтобы просмотреть оригинальное изображение (ширинаИзображения X высотаИзображения) [Откроется в новой вкладке]", где синий подчёркнутый текст - ссылка на оригинал изображения.

Скрипт обрабатывает любые изображения в сообщении, вставленные через тег IMG или через вложения (тег ATTACH). Изображения, вставленные через вложения, но без использования тега ATTACH моим скриптом не обрабатываются, хотя я разобрался, как их можно было также обработать. В любом случае, изображения, вставленные таким образом, насколько я понимаю, масштабируются и без моего скрипта, сами. Правда там порог масштабирования больше.

Вынужден был воспользоваться JQuery, но он используется лишь однажды, для регистрации события загрузки страницы (аналог на JS не работал почему-то, надо покурить JQ, чтобы понять, в чём дело).

Есть небольшой баг - если вы редактируете своё сообщение через быстрый редактор кода и нажимаете "сохранить", то в том сообщении масштабирование изображений пропадёт, то есть, изображения будут иметь оригинальный размер. Исправляется обновлением страницы.


Итак, вот сам код

// ==UserScript==
// @name largePicturesZoomer
// @author Vadim Moshev
// @version 0.1
// @include *programmersforum.ru/showthread.php*

// ==/UserScript==

$(document).ready(function() {
    'use strict';

    function getNofticationForScaledImage(originalWidth, originalHeight, href) {
        var widthXHeightString = originalWidth + ' X ' + originalHeight;
        var d = document;

        var thisImageWasScaledCaption = d.createElement('span');
        thisImageWasScaledCaption.innerHTML = 'Это изображение было отмасштабировано.';

        var linkToOriginalImage = d.createElement('a');
        linkToOriginalImage.href = href;
        linkToOriginalImage.innerHTML = ' Нажмите сюда, чтобы просмотреть оригинальное изображение ('+
            widthXHeightString +'). [Откроется в новой вкладке]';
        linkToOriginalImage.target = '_blank';

        var nofticationContainer = d.createElement('div');
        nofticationContainer.appendChild( thisImageWasScaledCaption );
        nofticationContainer.appendChild( linkToOriginalImage );
        nofticationContainer.style.fontWeight = 'bold';
        nofticationContainer.style.textAlign = 'left';

        return nofticationContainer;
    }

    var MAX_WIDTH = 640;
    var MAX_HEIGHT = 480;

    var allDivs = document.getElementsByTagName('div');

      var messages = [];
      for (var i = 0; i < allDivs.length; i++) {
        if ( /post_message_\d+/.test( allDivs[i].id ) ) {
          messages.push( allDivs[i] );
        }
      }

      for (i = 0; i < messages.length; i++) {
            var currentMessage = messages[i];
            var imagesInCurrentMessage = currentMessage.getElementsByTagName('img');

            for (var j = 0; j < imagesInCurrentMessage.length; j++) {
                var currentImage = imagesInCurrentMessage[j];

                var w = currentImage.width;
                var h = currentImage.height;

                if ( ( w <= MAX_WIDTH ) && (h <= MAX_HEIGHT) ) {
                  continue;
                }

                var maxDimension = ( w > h ) ? 'width' : 'height';
                if ( maxDimension == 'width' ) {
                  currentImage.width = MAX_WIDTH;
                } else {
                  currentImage.height = MAX_HEIGHT;
                }

                var elementToInsertBefore;
                var elementToInsertInside;

                var imageWasScaledNoftication = getNofticationForScaledImage(
                    w,
                    h,
                    currentImage.src
                );

                var parentElementForImage = currentImage.parentElement;
                if ( parentElementForImage.tagName == 'A' ) {
                    elementToInsertBefore = parentElementForImage;
                    elementToInsertInside = parentElementForImage.parentElement;
                } else {
                    elementToInsertBefore = currentImage;
                    elementToInsertInside = currentImage.parentElement;
                }

                elementToInsertInside.insertBefore( imageWasScaledNoftication, elementToInsertBefore );

            }
      }
});

Итак, можете попробовать скрипт прямо здесь.
Вот изображение с размером 1600x900

[Alex11223]

Сообщение от Вадим Мошев

Есть небольшой баг - если вы редактируете своё сообщение через быстрый редактор кода и нажимаете "сохранить", то в том сообщении масштабирование изображений пропадёт, то есть, изображения будут иметь оригинальный размер. Исправляется обновлением страницы.

Да это есть в большинстве скриптов тут, и даже в не пользовательских скриптах форума.

[Вадим Мошев]

Просто мутация DOM не обрабатывается, насколько я понимаю...