Реалізація загального обробника кліків для відкриття відео в модальному вікні на сторінках SharePoint 2013

8 Березня 2024 в 23:14 52

Відкриття відео в модальному вікні є досить поширеною функціональністю на веб-сайтах. Зазвичай, для цього потрібно написати код JavaScript для кожної сторінки окремо. Але чи можливо створити загальний обробник кліків, який можна буде використовувати на будь-якій сторінці, зокрема на платформі SharePoint 2013?

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

У багатьох випадках, веб-розробники вирішують цю задачу, написавши код JavaScript, який додає обробник кліків до кожного посилання на сторінці, перевіряючи, чи веде це посилання на відео файл. Якщо так, то вони перешкоджають браузеру переходити за цим посиланням та відкривають відео в модальному вікні.

Проте, такий підхід має свої недоліки. По-перше, він вимагає додавання однакового коду на кожну сторінку, що ускладнює його управління та підтримку. Крім того, якщо потрібно змінити логіку відкриття відео в модальному вікні, то доведеться вносити зміни на всіх сторінках.

Однак, на щастя, існує більш ефективний підхід – використання загального обробника кліків. Замість того, щоб додавати код на кожну сторінку, ми можемо створити один загальний скрипт, який буде відповідати за обробку кліків на будь-якій сторінці сайту. Такий підхід спрощує управління кодом і забезпечує його однаковість на всьому сайті.

Для реалізації загального обробника кліків нам знадобиться JavaScript код, який буде відстежувати кліки на посилання та перевіряти, чи вони ведуть на відео файли. Якщо так, то він перешкодить браузеру переходити за посиланням і відкриє відео в модальному вікні.

(function() {
    document.addEventListener('click', function(event) {
        var target = event.target;
        if (target.tagName === 'A') {
            if (target.href.endsWith('.mp4') || target.href.endsWith('.avi') || target.href.endsWith('.mov')) {
                event.preventDefault();
                openVideoModal(target.href);
            }
        }
    });
    function openVideoModal(videoUrl) {
        // код для відкриття модального вікна з відео
    }
})();

(function() {

document.addEventListener('click', function(event) {

var target = event.target;

if (target.tagName === 'A') {

if (target.href.endsWith('.mp4') || target.href.endsWith('.avi') || target.href.endsWith('.mov')) {

event.preventDefault();

openVideoModal(target.href);

}

});

function openVideoModal(videoUrl) {

// код для відкриття модального вікна з відео

}

})();

Звичайно, перед тим як використовувати цей код на сторінках SharePoint 2013, необхідно впевнитися, що він дозволяє вбудовувати власний JavaScript. Крім того, може бути корисно створити окрему бібліотеку скриптів, яка буде містити цей обробник кліків разом з іншими загальними функціями для сайту.

Використання загального обробника кліків для відкриття відео в модальному вікні на сторінках SharePoint 2013 спрощує управління кодом та забезпечує однаковий функціонал на всьому сайті. Це дозволяє ефективно використовувати ресурси та полегшує розробку та підтримку веб-сайту.

JavaScript, SharePoint 201