ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Добавление скриптов и css трюков для MYBB

Сообщений 141 страница 148 из 148

1

В каталоге запрещено создавать новые темы, т.к. скриптов очень много, а мы стараемся делать хорошую навигацию по разделу и добавлять их упорядоченно. Скрипты, которых еще нет в этом разделе можно выкладывать в этой теме. И модератор добавит их на форум.

+1

141

#p171446,Emerael написал(а):

может таки прикручу к этой штуке как раз яшкину библиотеку и научу людей лепить в постах кастомные плееры хд

Научи, я не умею  :blush:  Буду очень рада!

+1

142

#p171468,marusya написал(а):
#p171446,Emerael написал(а):

может таки прикручу к этой штуке как раз яшкину библиотеку и научу людей лепить в постах кастомные плееры хд

Научи, я не умею  :blush:  Буду очень рада!

в итоге не совсем к этой штуке, мне лениво стало, хотя она и поприятнее хд
оффтоп: да, я как-то начала по приколу пилить недоклон вк просто развлечения ради, да, я его забросила, это все равно было в стол хд
нооо родилось такое
кастомизируемый плеер

Где надо плеер

В data-tracks кладем ссылки на mp3, разделенные сочетанием <>
Разделитель выбран так, чтобы его точно не было в url

Код:
<div class='playerNode' data-tracks="https://forumstatic.ru/files/001b/b4/4f/80926.mp3<>https://forumstatic.ru/files/001b/b4/4f/87787.mp3<>https://forumstatic.ru/files/001b/b4/4f/24169.mp3"></div>
Стили, либо рядом с плеером, чтобы их не потерять при выпиливании, либо в стиль без тегов style, либо в html-верх

Классы:
player-wrapper - все, что содержит плеер собсно
play-pause - кнопка плеепаузы, для конкретно кнопки в состоянии "паузы" юзаем селектор .play-pause.paused
.track - прогрессбар трека
.volume - полоска громкости
.thumb - кружочки внутри предыдущих 2 пунктов

Код:
<style>
.player-wrapper{background: aliceblue;width: 500px; height: 40px;}
.play-pause.paused{background: url(https://forumstatic.ru/files/001b/b4/4f/58193.svg) no-repeat; background-size: contain}
.play-pause{background: url(https://forumstatic.ru/files/001b/b4/4f/30007.svg?v=1) no-repeat; background-size: contain; border: 0; width: 38px; height: 38px;padding: 0;}
.track, .volume{height: 100%; background: linear-gradient(0deg, transparent 0, transparent 50%, black 50%, transparent calc(50% + 1px), transparent); display: inline-block; margin-left: 10px; position: relative;}
.track {
    width: calc(80% - 60px);
}
.volume {
    width: 20%;
}
.thumb {
    width: 8px;
    height: 8px;
    top: calc(50% - 4px);
    background: black;
    border-radius: 50%;
    position: absolute;
}
</style>
Г... код, заставляющий это дело работать

Ставить строго после первой части
Для более чем одного плеера на странице (к применению в постах не относится, там все в фреймы забарикадировано) меняем класс в первой части и в const selector = '.playerNode'; (уже не надо, я допилила, но пусть фраза для истории останется)

Код:
<script>
(() => {
    const selector = '.playerNode';
    const targets = document.querySelectorAll(selector);
targets.forEach((target) => {
    const tracks = target.dataset.tracks?.split('<>').filter(Boolean);
    const audio = document.createElement('audio');
    audio.src = tracks[0];
    let index = 0;
    const getNext = () => {
        index = (tracks.length - index + 1) % tracks.length;
        return index;
    };
    audio.addEventListener('ended',function(){
        audio.src = tracks[getNext()];
        audio.pause();
        audio.load();
        audio.play();
    });
    
    audio.addEventListener('timeupdate', function(){
        const part = audio.currentTime / audio.duration || 0;
         track.querySelector('.thumb').style.left = (part * 100).toFixed(2) + '%';
    });
    const play = document.createElement('button');
    play.classList.add('play-pause');
    play.classList.add('paused');
    play.addEventListener('click', () => {
        if(play.classList.contains('paused')){
            audio.play();
            play.classList.remove('paused');
        } else {
            audio.pause();
            play.classList.add('paused');
        }
    })
    const track = document.createElement('div');
    const thumb = document.createElement('div');
    track.classList.add('track');
    thumb.classList.add('thumb');
    track.append(thumb);
    track.addEventListener('click', (evt) => {
         const part = evt.offsetX / track.offsetWidth;
         audio.currentTime = part * audio.duration;
         thumb.style.left = (part * 100).toFixed(2) + '%';
    })
    
    const volume = document.createElement('div');
    const volumeThumb = document.createElement('div');
    volumeThumb.classList.add('thumb');
    volume.classList.add('volume');
    volume.append(volumeThumb);
    volumeThumb.style.left = 'calc(100% - 8px)';
    volume.addEventListener('click', (evt) => {
         const part = evt.offsetX / volume.offsetWidth;
         audio.volume = part.toFixed(2);
         volumeThumb.style.left = (part * 100).toFixed(2) + '%';
    });
    const wrapper = document.createElement('div');
    wrapper.classList.add('player-wrapper');
    wrapper.append(audio, play, track, volume);
    target.append(wrapper);
})
})();
</script>

Отредактировано Emerael (21.10.22 00:32)

+3

143

Emerael
Спасибо большущее за вклад, выложила: Кастомизируемый плеер (CSS, JS)

Надеюсь поняла всё правильно?

0

144

#p174921,Automation Baby написал(а):

Emerael
Спасибо большущее за вклад, выложила: Кастомизируемый плеер (CSS, JS)

Надеюсь поняла всё правильно?

ага

+1

145

Да здравствует трешак!
Перенос инфы про форум в окошко, появляющееся по наведению на иконку
(Иконка должна быть, логично, да?)
потыкаться
(я чуть не упоролась искать что-то, где есть иконки и мне не лень придумывать, что туда вкорячить, как же мне за него стыдно, какой фейспалмовый привет из 2017 :D)
Просто идея для использования: категория в виде полки с книгами, по наведению - "титульник этой книги"

В стили без тегов или в верх
Код:
<style>
    .category-info .tc2:before {
        content: 'Тем: ';
    }
    .category-info .tc3:before {
        content: 'Постов: ';
    }
    .category thead {
        display: none;
    }
    
    .category .tc2, .category .tc3, .category .tcr, .category .tcl .tclcon {
        display: none;
    }
    .punbb .main .category-info > * {
        width: auto;
        text-align: left;
    }

    .category tr {
        display: inline-block;
    }
    
    .category-info {
        background: aliceblue;
        padding: .5em;
        z-index: 9999;
        display: none;
    }
    .category-info.visible {
        display: block;
    }
</style>
В HTML-низ
Код:
<script>
        const hint = document.createElement('div');
        hint.classList.add('category-info');
        const main = document.querySelector('#pun-main');
        main.append(hint);
        document.querySelectorAll('.category tbody tr').forEach(el => {
            el.querySelector('.tcl').addEventListener('mouseenter', (e) => {
                hint.innerHTML = '';
                hint.classList.add('visible');
                const hintContent = [];
                el.querySelectorAll('.tc2, .tc3, .tcr, .tcl .tclcon')
                    .forEach(cell => {
                        const newEl = document.createElement('div');
                        newEl.innerHTML = cell.innerHTML;
                        newEl.className = cell.className;
                        hintContent.push(newEl);
                    });
                hint.append(...hintContent);
                hint.style.position = 'fixed';
                const {left, top, height} = el.getBoundingClientRect();
                hint.style.top = (top + height) + 'px';
                hint.style.left = left + 'px';
                main.addEventListener('mouseleave', (ev) => {hint.innerHTML = '';hint.classList.remove('visible')});
            });
        });
</script>

Отредактировано Emerael (03.11.22 20:11)

+2

146

#p175551,Emerael написал(а):

Да здравствует трешак!

Зря ты так, скрипт хороший, идея суперская. Добавлено конечно, спасибо в очередной раз: Перенос информации о разделе в иконку

0

147

Ну-с, очередное самописное
Форма постинга рекламы без поиска кнопки для логина
//Для тех, кто устал кастомизировать/вписывать в дизайн кнопку пиар-входа
Потыкать можно:
Правильно названная тема в рекламном разделе
Правильно названная тема НЕ в рекламном разделе (формы не будет)
Случайно названная тема в рекламном разделе (формы не будет)
Что оно делает?
Добавляет в начинающуюся с определенной последовательности символов тему видную только гостям форму, в которой есть поле для ссылки на взаимную рекламу и поле для, собственно, кода чужой рекламы. Пиарщик размещает вашу рекламу, вставляет (или нет) ссылку (см. ниже), вставляет свой код, нажимает "отправить" - пиарщик великолепен.

Что оно не умеет делать, но когда-нибудь у меня может быть дойдут руки
Пока оно не умеет проверять ссылку на взаимную рекламу, т.е. сейчас оно рассчитано на КРИСТАЛЬНУЮ честность пиарщиков (ссылку все еще можно оставить вообще пустой, да - кажется, это честнее, чем дать опцию положить туда любую ссылку, хоть на яндекс хд)
Как оно будет ее проверять? - возьмет пост из шапки темы, вытащит из него рекламы, попытается сходить за постом из ссылки в "ответной" (в ней должен быть postId и адрес форума, этого вроде достаточно чтобы достать мессагу из открытого топика -_-), попытается найти совпадение хоть с одной из реклам
Открытый вопрос - что делать с рекламами не на майбб и комании (существуют еще камр, форум 2х2 и вот это вот все, причем у некоторых из них настроен запрет просто так брать и кидать запросы с других адресов:с)

Как этим пользоваться?
Вы ставите код, меняете значение piarTopicsPrefix (то, которое '[Реклама]') на желаемое начало тем для выкладывания реклам, указываете id форума с рекламными темами в piarForumId (КАВЫЧКИ ВОКРУГ ЭТО ВАЖНО), создаете тему, НАЗВАНИЕ КОТОРОЙ НАЧИНАЕТСЯ С УКАЗАННОГО РАНЕЕ ЗНАЧЕНИЯ piarTopicsPrefix, меняете piarLogin и piarPassword на свои - готово.

Как оно работает (больше для тех, кто захочет и сможет допилить для себя, например, сделать, чтобы форма появлялась для всех)?
Берет значения из формы, сохраняет их в кэш, логинится под пиар-пользователем, видит, что в кэше есть данные из формы, берет их, сует в форму ответа код рекламы, два переноса строки, ссылку на вашу рекламу с пометкой "ваша", выпиливает данные из кэша, постит рекламу, выходит из пиар-пользователя

Ставить в HTML-низ
Код:
<script>
    const piarTopicsPrefix = '[Реклама]'; //начало названия топиков, в которых будет форма
    const piarForumId = '5'; //id форума, в котором лежат топики, в которых будет форма
    const isPiarTopic = FORUM.topic?.subject.startsWith(piarTopicsPrefix) && FORUM.topic?.forum_id === piarForumId;
    if (location.pathname === '/viewtopic.php' && isPiarTopic) {
        const saveToLS = (data) => localStorage.setItem('pr_values', JSON.stringify(data));
        const getFromLS = () => JSON.parse(localStorage.getItem('pr_values') || "false");
        const removeFromLS = () => localStorage.removeItem('pr_values');
        if (GroupID === 3){
            const piarLogin = 'Пиарщик?'; //логин пиар-аккаунта
            const piarPassword = '111111'; //пароль пиар-аккаунта
            let linkError = '';
            let codeError = '';
            const validateFields = (fields) => true;
            const markup = `
            <div id='piar_reply_emulator' class='container'>
                <form>
                    <fieldset>
                        <legend>Разместить рекламу</legend>
                        <p style="display: grid; grid-template-columns: 1fr;"${linkError ? " class=has-error" : ""}>
                	<label for="our_piar_link">Ссылка на ответную рекламу</label>
                	${linkError}
                	<input type="text" id="our_piar_link" name="our_piar_link">
                </p>
                
                        <p${codeError ? " class=has-error" : ""}>
                	<label for="your_piar_code">Код вашей рекламы</label><br>
                	${codeError}
                	<textarea id="your_piar_code" name="your_piar_code" rows="13"></textarea>
                </p>
            </fieldset>
                    <p><input type="submit"></p>
                </form>
            </div>`;
            const bottomPagination = document.querySelector('.linksb');
            bottomPagination.insertAdjacentHTML('afterend', markup);
            const piarReplyEmulatorForm = bottomPagination.nextElementSibling.querySelector('form');
            piarReplyEmulatorForm.addEventListener('submit', async (ev) => {
                ev.preventDefault();
                const values = {};
                for(let elem of piarReplyEmulatorForm){
                    if(['text', 'textarea'].includes(elem.type))
                    values[elem.name] = elem.value || ''
                }
                
                if (!validateFields(values)) return false;
                saveToLS(values);
                const loginFormMarkup = `
                <form id="login" class="container" method="post" action="https://vpomoike.mybb.ru/login.php?action=in" onsubmit="return true">
            <input type="hidden" name="form_sent" value="1">
            <input type="hidden" name="redirect_url" value="${window.location.href}">
            <input type="text" id="fld1" name="req_username" size="25" maxlength="25" value="${piarLogin}">
            <input type="password" id="fld2" name="req_password" size="16" maxlength="16" value="${piarPassword}">
        </form>`;
            const container = document.createElement('div');
            container.innerHTML = loginFormMarkup;
            document.querySelector('body').append(container);
                const event = new Event("submit");
                container.querySelector('form').submit();
            })
        } else {
            const pr_data = getFromLS();
            if(pr_data) {
                document.querySelector('#main-reply').value = `
${pr_data.your_piar_code}

[b]Ваша:[/b] ${pr_data.our_piar_link}`.trim();
                removeFromLS();
                document.querySelector('#post-form #post').submit?.click()
                const logoutUrl = `${document.location.origin}/login.php?action=out&id=${window.UserID}`
                fetch(logoutUrl);
            }
        }
    }
</script>

Отредактировано Emerael (11.11.22 03:55)

+3

148

Emerael
Добавлено - Форма постинга рекламы без поиска кнопки для логина (JS)

Спасибо в очередной раз!

0