В каталоге запрещено создавать новые темы, т.к. скриптов очень много, а мы стараемся делать хорошую навигацию по разделу и добавлять их упорядоченно. Скрипты, которых еще нет в этом разделе можно выкладывать в этой теме. И модератор добавит их на форум.
Добавление скриптов и css трюков для MYBB
Сообщений 141 страница 148 из 148
Поделиться14115.08.22 00:03
может таки прикручу к этой штуке как раз яшкину библиотеку и научу людей лепить в постах кастомные плееры хд
Научи, я не умею Буду очень рада!
Поделиться14221.10.22 00:19
#p171446,Emerael написал(а):может таки прикручу к этой штуке как раз яшкину библиотеку и научу людей лепить в постах кастомные плееры хд
Научи, я не умею Буду очень рада!
в итоге не совсем к этой штуке, мне лениво стало, хотя она и поприятнее хд
оффтоп: да, я как-то начала по приколу пилить недоклон вк просто развлечения ради, да, я его забросила, это все равно было в стол хд
нооо родилось такое
кастомизируемый плеер
В 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>
Классы:
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)
Поделиться14321.10.22 13:44
Emerael
Спасибо большущее за вклад, выложила: Кастомизируемый плеер (CSS, JS)
Надеюсь поняла всё правильно?
Поделиться14421.10.22 13:46
Emerael
Спасибо большущее за вклад, выложила: Кастомизируемый плеер (CSS, JS)Надеюсь поняла всё правильно?
ага
Поделиться14501.11.22 20:12
Да здравствует трешак!
Перенос инфы про форум в окошко, появляющееся по наведению на иконку
(Иконка должна быть, логично, да?)
потыкаться
(я чуть не упоролась искать что-то, где есть иконки и мне не лень придумывать, что туда вкорячить, как же мне за него стыдно, какой фейспалмовый привет из 2017 )
Просто идея для использования: категория в виде полки с книгами, по наведению - "титульник этой книги"
Код:<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>
Код:<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)
Поделиться14603.11.22 22:14
Да здравствует трешак!
Зря ты так, скрипт хороший, идея суперская. Добавлено конечно, спасибо в очередной раз: Перенос информации о разделе в иконку
Поделиться14711.11.22 03:20
Ну-с, очередное самописное
Форма постинга рекламы без поиска кнопки для логина
//Для тех, кто устал кастомизировать/вписывать в дизайн кнопку пиар-входа
Потыкать можно:
Правильно названная тема в рекламном разделе
Правильно названная тема НЕ в рекламном разделе (формы не будет)
Случайно названная тема в рекламном разделе (формы не будет)
Что оно делает?
Добавляет в начинающуюся с определенной последовательности символов тему видную только гостям форму, в которой есть поле для ссылки на взаимную рекламу и поле для, собственно, кода чужой рекламы. Пиарщик размещает вашу рекламу, вставляет (или нет) ссылку (см. ниже), вставляет свой код, нажимает "отправить" - пиарщик великолепен.
Что оно не умеет делать, но когда-нибудь у меня может быть дойдут руки
Пока оно не умеет проверять ссылку на взаимную рекламу, т.е. сейчас оно рассчитано на КРИСТАЛЬНУЮ честность пиарщиков (ссылку все еще можно оставить вообще пустой, да - кажется, это честнее, чем дать опцию положить туда любую ссылку, хоть на яндекс хд)
Как оно будет ее проверять? - возьмет пост из шапки темы, вытащит из него рекламы, попытается сходить за постом из ссылки в "ответной" (в ней должен быть postId и адрес форума, этого вроде достаточно чтобы достать мессагу из открытого топика -_-), попытается найти совпадение хоть с одной из реклам
Открытый вопрос - что делать с рекламами не на майбб и комании (существуют еще камр, форум 2х2 и вот это вот все, причем у некоторых из них настроен запрет просто так брать и кидать запросы с других адресов:с)
Как этим пользоваться?
Вы ставите код, меняете значение piarTopicsPrefix (то, которое '[Реклама]') на желаемое начало тем для выкладывания реклам, указываете id форума с рекламными темами в piarForumId (КАВЫЧКИ ВОКРУГ ЭТО ВАЖНО), создаете тему, НАЗВАНИЕ КОТОРОЙ НАЧИНАЕТСЯ С УКАЗАННОГО РАНЕЕ ЗНАЧЕНИЯ piarTopicsPrefix, меняете piarLogin и piarPassword на свои - готово.
Как оно работает (больше для тех, кто захочет и сможет допилить для себя, например, сделать, чтобы форма появлялась для всех)?
Берет значения из формы, сохраняет их в кэш, логинится под пиар-пользователем, видит, что в кэше есть данные из формы, берет их, сует в форму ответа код рекламы, два переноса строки, ссылку на вашу рекламу с пометкой "ваша", выпиливает данные из кэша, постит рекламу, выходит из пиар-пользователя
Код:<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)
Поделиться14811.11.22 18:03
Emerael
Добавлено - Форма постинга рекламы без поиска кнопки для логина (JS)
Спасибо в очередной раз!