/* ===== 'popup.js' ===== */ /* --- 'popup.js' - всплывающее окно с определённым содержимым (содержимое блока, оригинальный размер изображения, галерея изображений) Copyright © 2011, OOO "КасперСистемс" (http://www.kasper.by/) Версия: 1.1 Дата: 18.02.2011 Примечание: без использования фреймворков Изменения: - добавление событий 'onload'/'onresize' сделал через 'addEventListener'/'attachEvent'; --- */ // Добавляем событие с помощью 'addEventListener', т.к. 'onload'/'onresize' уже может быть объявлен --> if (window.addEventListener) { // Для нормальных броузеров --> window.addEventListener('load', function(){ popup.init(); // Инициализация скрипта --> }, false) // Документ полностью загружен --> window.addEventListener('resize', function(){ if (popup.keeper) { // Проверяем, создано ли всплывающее окно (есть ли что центрировать?) --> setTimeout(function(){ // Задержка перед выполнением из-за тех броузеров, которые не успевают быстро пересчитать изменения размеров документа (в частности IE) --> popup.centering(); // Центрирование содержимого при "ресайзе" окна --> }, 10); } }, false) // Документ изменил свои размеры --> } else{ // Для IE --> window.attachEvent('onload', function(){ popup.init(); // Инициализация скрипта --> }) // Документ полностью загружен --> window.attachEvent('onresize', function(){ if (popup.keeper) { // Проверяем, создано ли всплывающее окно (есть ли что центрировать?) --> setTimeout(function(){ // Задержка перед выполнением из-за тех броузеров, которые не успевают быстро пересчитать изменения размеров документа (в частности IE) --> popup.centering(); // Центрирование содержимого при "ресайзе" окна --> }, 10); } }) // Документ изменил свои размеры --> } // --> // Самый главный объект-родитель --> var popup = { /* opener: , // Ссылка на родителя всего 'popup' (т.е. та ссылка, с которой был совершён вызов всплывающего окна) --> method: , // Метод отображения ("text"/"image") --> name: , // Содержимое в "[]" (если присутствует) --> defSelect: , // Массив с названиями классов 'select' по умолчанию (если присутствуют) --> gallery: , // Массив ссылок для создания конкретной галереи (наименований должно быть больше 1) --> keeper: , // Блок-обёртка для всего содержимого (используется просто как "враппер", для того, чтобы рассчитать размеры затемняемой области) --> eclipse: , // Блок, который затемняет экран --> wrapper: , // Блок-обёртка для основного содержимого (весь контент, который будет центрироваться относительно области просмотра) --> defSize: , // Высота блока 'PopUpWrap' после загрузки изображения (запоминаем, чтобы блок не "прыгал" при перелистывании изображений). Применяется в галерее, после перелистывания изображений --> shiftX: ; // Положение полосы прокрутки (смещение) по оси Х --> shiftY: ; // Положение полосы прокрутки (смещение) по оси Y --> */ minSize: 400, // Минимальная ширина блока 'PopUpWrap' (в "px") (также дублируется в CSS). Применяется в галерее, при перелистывании изображений --> imgPath: '/kscms/img/public/scripts/popup_1.1/img/', // Путь к изображениям для оформления всплывающего окна --> timeoutDelay: 250, // Задержка перед функциями прозрачности (в "ms") --> translation: { // Массив с переводами фраз --> btnClose: 'Закрыть', btnPrev: 'Предыдущее', btnNext: 'Следующее', imgLoading: 'Загрузка...', imgBroken: 'Изображение отсутствует!' }, // Инициализация скрипта --> init: function(){ var array = document.getElementsByTagName('a'); for (var i=0; i popup.clickEvent(el, 'text'); // Событие вынес в отдельную функцию (чтобы не пробегать по ссылкам заново, когда нужно будет повторно вызывать скрипт) --> } else if (el.rel == 'PopupImage' || (el.rel.slice(0, 11) == 'PopupImage[' && el.rel.charAt(el.rel.length-1) == ']') ) { // Нужная нам ссылка 'PopupImage' или 'PopupImage[...]' --> popup.clickEvent(el, 'image'); // Событие вынес в отдельную функцию (чтобы не пробегать по ссылкам заново, когда нужно будет повторно вызывать скрипт) --> } } }, // --> // Описание события, которое происходит при 'click'-е по ссылке --> clickEvent: function(obj, method) { obj.onclick = function(){ /* obj // Ссылка, удовлетворяющая условиям (см. 'popup.init();') --> method // Метод отображения ("text"/"image") --> */ popup.opener = this; // Ссылка на родителя всего 'popup' (т.е. та ссылка, с которой был совершён вызов всплывающего окна) --> popup.method = method; // Метод отображения ("text"/"image") --> popup.defSelect = []; // Массив с названиями классов 'select' по умолчанию (если присутствуют) --> // Получаем и запоминаем положение полосы прокрутки (смещение) по осям Х/Y --> if (window.innerWidth) { // Для нормальных броузеров --> popup.shiftX = pageXOffset; // Положение полосы прокрутки (смещение) по оси Х --> popup.shiftY = pageYOffset; // Положение полосы прокрутки (смещение) по оси Y --> } else{ // Для IE --> popup.shiftX = document.documentElement.scrollLeft; // Положение полосы прокрутки (смещение) по оси Х --> popup.shiftY = document.documentElement.scrollTop; // Положение полосы прокрутки (смещение) по оси Y --> } if (method == 'text') { // Показываем блок с определённым содержанием --> popup.name = this.rel.slice(10, -1); // Содержимое в "[]" (id элемента, сожержимое которого будем показывать) --> if (!document.getElementById(popup.name)) { // Если элемент, с указанным id не найден... --> return true; // ...переходим по 'href' ссылки (в идеале, эта ссылка должна вести на страницу с содержанием, аналогичным тому, которое мы хотели показать во всплывающем окне) --> } } else if (method == 'image') { // Показываем оригинальный размер изображения --> popup.defSize = false; // Высота блока 'PopUpWrap' по умолчанию (чтобы блок не "прыгал"). Т.е. данное значение - только для первого изображения в галерее (при перелистывании изменяется) --> if (this.rel == 'PopupImage') { // Показываем одиночное изображение --> popup.name = false; // Не существует "[]" --> } else{ // Показываем галерею изображений --> popup.name = this.rel.slice(11, -1); // Содержимое в "[]" (это будет название галереи) --> if (popup.name) { popup.gallery = []; // Массив ссылок для создания конкретной галереи --> var array = document.getElementsByTagName('a'); for (var i=0; i popup.gallery.push(el); // ...и заносим элементы в массив --> } } if (popup.gallery.length == 1) { // Если наименование одно) --> popup.name = false; // Содержимое в "[]" существует, но т.к. оно одно - показываем одиночное изображение --> } } else{ popup.name = false; // Содержимое в "[]" отсутствует. Показываем одиночное изображение --> } } } this.onclick = function(){ // Запрещаем повторное создание всплывающего окна (пока не будет закрыто уже имеющееся) --> return false; } popup.selectbug('hide'); // Исправление бага в ie. Скрываем все 'select'-ы на странице (т.к. их невозможно ничем перекрыть) --> popup.carcas(); // Формирование каркаса для всплывающего окна --> popup.data.init(); // Инициализация содержимого --> return false; } }, // --> // Исправление бага в ie. Скрываем все 'select'-ы на странице (т.к. их невозможно ничем перекрыть) --> selectbug: function(method) { /* method // Метод отображения ("hide"/"show") --> */ var array = document.getElementsByTagName('select'); for (var i=0; i this.defSelect[i] = el.className; // Запоминаем оригинальные названия классов в массиве --> el.className = el.className+' invisible'; // Скрываем 'select'-ы, присваивая им новый 'class' --> } else if (method == 'show') { // Если показываем 'select'-ы --> el.className = this.defSelect[i]; // Возвращаем названия классов из массива --> } } }, // --> // Формирование каркаса для всплывающего окна --> carcas: function(){ this.keeper = document.createElement('div'); // Блок-обёртка для всего содержимого (используется просто как "враппер", для того, чтобы рассчитать размеры затемняемой области) --> this.keeper.id = 'Keeper'; this.keeper.className = 'keeper'; this.keeper.innerHTML = '\ \ \
\ \ \ \ \ \ \ '; document.body.appendChild(this.keeper); // Добавление 'Keeper' в документ. В самый конец --> this.eclipse = document.getElementById('Eclipse'); // Блок, который затемняет экран --> this.wrapper = document.getElementById('PopUpWrap'); // Блок-обёртка для основного содержимого (весь контент, который будет центрироваться относительно области просмотра) --> var destroyer = document.getElementById('PopUpClose'); destroyer.onclick = function(){ this.onclick = function(){ // Запрещаем повторное нажатие кнопки "Закрыть" --> return false; } popup.opacity.move(popup.keeper, 'hide', 0, 100); // Плавное изменение прозрачности --> return false; } }, // --> // Центрирование содержимого --> centering: function(){ this.keeper.style.width = this.keeper.style.height = '100%'; // Сбрасываем значения, чтобы броузер смог пересчитать размеры документа --> this.eclipse.style.width = this.eclipse.style.height = '100%'; // Сбрасываем значения, чтобы броузер смог пересчитать размеры документа --> var screenWidth = document.documentElement.clientWidth; // Оригинальная ширина элемента ('html'), т.е. размеры области просмотра --> var screenHeight = document.documentElement.clientHeight; // Оригинальная высота элемента ('html'), т.е. размеры области просмотра --> var elWidth = this.wrapper.offsetWidth+60; // Оригинальная ширина элемента ('PopUpWrap') с полями (2x) --> var elHeight = this.wrapper.offsetHeight+60; // Оригинальная высота элемента ('PopUpWrap') с полями (2x) --> if (elWidth < screenWidth) { // Содержимое помещается в области просмотра (по ширине) --> var posX = ((screenWidth-elWidth)/2)+this.shiftX; // Получаем координаты, учитывая положение полосы прокрутки (смещение) по оси Х --> } else{ // Содержимое не помещается в области просмотра (по ширине) --> var posX = this.shiftX; // Получаем координаты, учитывая положение полосы прокрутки (смещение) по оси Х --> } if (elHeight < screenHeight) { // Содержимое помещается в области просмотра (по высоте) --> var posY = ((screenHeight-elHeight)/2)+this.shiftY; // Получаем координаты, учитывая положение полосы прокрутки (смещение) по оси Y --> } else{ // Содержимое не помещается в области просмотра (по высоте) --> var posY = this.shiftY; // Получаем координаты, учитывая положение полосы прокрутки (смещение) по оси Y --> } this.wrapper.style.left = posX+'px'; // Располагаем содержимое (горизонталь), учитывая полученные выше координаты --> this.wrapper.style.top = posY+'px'; // Располагаем содержимое (вертикаль), учитывая полученные выше координаты --> var shiftWidth = document.documentElement.scrollWidth; // Оригинальная ширина элемента ('html') с полосой прокрутки (если она присутствует) --> var shiftHeight = document.documentElement.scrollHeight; // Оригинальная высота элемента ('html') с полосой прокрутки (если она присутствует) --> if (screenWidth < shiftWidth) { // Если имеется горизонтальная полоса прокрутки... --> this.keeper.style.width = shiftWidth+'px'; // ...изменяем ширину 'Keeper' --> } else{ // Иначе... --> this.keeper.style.width = screenWidth+'px'; // ...изменяем ширину 'Keeper' --> } if (screenHeight < shiftHeight) { // Если имеется вертикальныя полоса прокрутки... --> this.keeper.style.height = shiftHeight+'px'; // ...изменяем высоту 'Keeper' --> } else{ // Иначе... --> this.keeper.style.height = screenHeight+'px'; // ...изменяем высоту 'Keeper' --> } if ((elWidth+this.shiftX) > this.keeper.offsetWidth) { // Если изображение шире, чем доступная область с броузере... --> this.keeper.style.width = (elWidth+this.shiftX)+'px'; // ...изменяем ширину 'Keeper' --> } if ((elHeight+this.shiftY) > this.keeper.offsetHeight) { // Если изображение выше, чем доступная область с броузере... --> this.keeper.style.height = (elHeight+this.shiftY)+'px'; // ...изменяем высоту 'Keeper' --> } this.eclipse.style.width = (this.keeper.offsetWidth-0.01)+'px'; // Указываем до сотых, для "правильного" отображения в FF3.0 --> this.eclipse.style.height = (this.keeper.offsetHeight-0.01)+'px'; // Указываем до сотых, для "правильного" отображения в FF3.0 --> }, // --> data: new Data(), // Подготавливаем и показываем содержимое --> opacity: new Opacity() // Плавное изменение прозрачности --> }; // --> // Подготавливаем и показываем содержимое --> function Data(){ /* this.content: , // Основной блок с абсолютно всем содержимым --> this.loader: , // Блок "Загрузка..." --> this.container: , // Блок для вывода содержимого (в зависимости от метода отображения) --> this.actualObj: , // Ссылка на следующее изображение. Применяется в галерее, при перелистывании изображений --> */ // Инициализация содержимого --> this.init = function(){ this.content = document.getElementById('PopUpContent'); // Основной блок с абсолютно всем содержимым --> this.loader = document.getElementById('PopUpLoader'); // Блок "Загрузка..." --> this.container = document.getElementById('PopupItem'); // Блок для вывода содержимого (в зависимости от метода отображения) --> popup.wrapper.className = popup.wrapper.className+' method-'+popup.method; // Смена класса для 'PopUpWrap' (в зависимости от метода отображения), т.е. изменяем ширину --> popup.centering(); // Центрирование содержимого --> popup.opacity.move(popup.keeper, 'show', 0, 100); // Плавное изменение прозрачности --> } // --> // Отображение содержимого. Метод отображения - "text" --> this.text = function(){ this.container.innerHTML = document.getElementById(popup.name).cloneNode(true).innerHTML; // Копируем содержимое из шаблона во всплывающее окно --> popup.centering(); // Центрирование содержимого --> this.loader.className = this.loader.className+' hide'; // Скрываем блок "Загрузка..." при показе содержимого --> popup.opacity.move(this.container, 'show', 0, 100); // Плавное изменение прозрачности --> } // --> // Отображение содержимого. Метод отображения - "image" --> this.image = function(obj) { /* obj // Ссылка на элемент с оригинальным размером изображения --> */ // Формируем само изображение. Без 'scr' (оно загрузится позже), но с параметрами 'title' и 'alt' --> var dataIndex = '\ \ '; if (obj.title) { // Название изображения (заголовок). Отображается, если у ссылки ('a') прописан 'title' --> var dataTitle = '\ \ '; } else{ // Если название изображения (заголовок) отсутствует - не учитываем --> var dataTitle = ''; } if (obj.firstChild.alt) { // Подпись к изображению (описание). Отображается, если у картинки ('img') прописан 'alt' --> var dataDescr = '\ \ '; } else{ // Если подпись к изображению (описание) отсутствует - не учитываем --> var dataDescr = ''; } if (popup.name) { // Если нужно организовать галерею изображений... --> var dataNav = '\ \ '; } else{ // ...иначе не учитываем --> var dataNav = ''; } if (popup.defSize != false) { // Проверяем значение переменной 'popup.defSize'. Значение по умолчанию - 'false' (т.е. условие сработает только при наличии галереи). Обязательно устанавливаем высоту перед тем, как внести сформированное содержимое в 'PopupItem' --> popup.wrapper.style.height = popup.defSize+'px'; // Устанавливаем высоту блока 'PopUpWrap' перед загрузкой изображения (чтобы блок не "прыгал"), т.к. ранее высота было 'auto' --> this.content.style.height = popup.defSize-20+'px'; // Так же растягиваем и 'PopUpContent' на всю высоту 'PopUpWrap' --> } this.container.innerHTML = dataIndex+dataTitle+dataDescr+dataNav; // Вносим сформированное содержимое в 'PopupItem' --> popup.centering(); // Центрирование содержимого --> if (popup.name) { // Если массив 'popup.name' имеет хотя бы 2 элемента - организовываем галерею изображений --> var prevLink = document.getElementById('GalleryPrev'); prevLink.onclick = function(){ this.onclick = function(){ // Запрещаем повторное нажатие кнопки "Предыдущее" --> return false; } popup.data.switching(obj, 'prev'); // Переключение между изображениями --> return false; } var nextLink = document.getElementById('GalleryNext'); nextLink.onclick = function(){ this.onclick = function(){ // Запрещаем повторное нажатие кнопки "Следующее" --> return false; } popup.data.switching(obj, 'next'); // Переключение между изображениями --> return false; } } var image = document.getElementById('GalleryImg'); image.onload = function(){ // Изображение полностью загрузилось (сработает в любом случае, даже после 'onerror'!) --> if (this.offsetWidth >= popup.minSize) { // Корректировка ширины блока ('PopUpWrap') (т.к. имеется минимальная ширина) --> popup.wrapper.style.width = this.offsetWidth+20+'px'; // Блок ('PopUpWrap') равен оригинальной ширине изображения с отступами (2х) --> } else{ popup.wrapper.style.width = popup.minSize+'px'; // Блок ('PopUpWrap') равен ширине по умолчанию (минимальная ширина) --> } popup.wrapper.style.height = popup.data.content.style.height = 'auto'; // Корректировка высоты блока ('PopUpWrap'). Сбрасываем значение 'popup.defSize' --> popup.defSize = popup.wrapper.offsetHeight; // Высота блока 'PopUpWrap' после загрузки изображения (запоминаем, чтобы блок не "прыгал" при перелистывании изображений) --> popup.centering(); // Центрирование содержимого --> popup.data.loader.className = popup.data.loader.className+' hide'; // Скрываем блок "Загрузка..." при показе содержимого --> popup.opacity.move(popup.data.container, 'show', 0, 100); // Плавное изменение прозрачности --> } image.onerror = function(){ // Изображение не загрузилось (как правило, это "битая" ссылка) --> var array = ['GalleryTitle', 'GalleryDescr']; // Список id тех элементов, которые не нужно показывать --> for (var i=0; i } } this.src = popup.imgPath+'popup_broken.gif'; this.width = 400; this.height = 250; this.alt = this.title = popup.translation.imgBroken; } image.src = obj.href; // (Смена 'src' обязательно должна быть после установки событий 'onload' и 'onerror') --> } // --> // Переключение между изображениями --> this.switching = function(obj, direction) { /* obj // Ссылка на элемент с оригинальным размером изображения --> direction // Направление переключения ("prev"/"next") --> */ // Ищем позицию текущего изображения в массиве конкретной галереи --> for (var i=0; i } } // Направление переключения: уменьшаем позицию, если жмём на "Предыдущее" --> if (direction == 'prev') { var res = curr-1; } // Направление переключения: увеличиваем позицию, если жмём на "Следующее" --> else if (direction == 'next') { var res = curr+1; } // Корректировка результата, если следующая позиция меньше первой (организуем "цикличность") --> if (res < 0) { res = popup.gallery.length-1; } // Корректировка результата, если следующая позиция больше последней (организуем "цикличность") --> else if (res > popup.gallery.length-1) { res = 0; } this.actualObj = popup.gallery[res]; // Ссылка на следующее изображение, которое нужно показать --> popup.opacity.move(this.container, 'hide', 0, 100); // Плавное изменение прозрачности --> } // --> } // --> // Плавное изменение прозрачности --> function Opacity(){ // Функция изменение прозрачности --> this.move = function(obj, method, startPoint, finishPoint) { setTimeout(function(){ /* obj // Ссылка на объект? к которомц будет применяться прощрачность --> method // Метод анимации ("show"/"hide") --> startPoint // Начальное значение прозрачности --> finishPoint // Конечное значение прозрачности --> */ var time = 650; // Длительность анимации (в "ms") --> var startDate = new Date().getTime(); // Время начала анимации --> setTimeout(function(){ var nowDate = (new Date().getTime()) - startDate; // Временной шаг var progress = nowDate/time; // Прогресс анимации var result = Math.round((finishPoint - startPoint) * popup.opacity.funct(method, progress) + startPoint); // Округляем результат --> if (method == 'show') { // Метод анимации: показать блок --> if (result > finishPoint) { // Корректировка результата --> result = finishPoint; } } else if (method == 'hide') { // Метод анимации: скрыть блок --> if (result < startPoint) { // Корректировка результата --> result = startPoint; } } obj.style.opacity = result/100; // Устаначливаем полученное значение. Для нормальных броузеров --> obj.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+result+')'; // Устаначливаем полученное значение. Для IE --> if (progress < 1){ // Если анимация не закончилась... --> setTimeout(arguments.callee, 10); } else{ // ...иначе если закончиолась --> if ((obj == popup.keeper) && (method == 'show')) { // Показать блок-обёртку ('Keeper') со всем содержимым --> if (popup.method == 'text') { // Метод отображения: для текста --> popup.data.text(); // Инициализация содержимого --> } else if (popup.method == 'image') { // Метод отображения: для изображения --> popup.data.image(popup.opener); // Инициализация содержимого --> } } else if ((obj == popup.keeper) && (method == 'hide')) { // Скрыть блок-обёртку ('Keeper') со всем содержимым --> popup.keeper.parentNode.removeChild(popup.keeper); // Удаление 'popup.keeper' из DOM --> popup.selectbug('show'); // Исправление бага в ie. Возвращаем все 'select'-ы на странице --> popup.clickEvent(popup.opener, popup.method); // Описание события, которое происходит при 'click'-е по ссылке --> } else if ((obj == popup.data.container) && (method == 'hide')) { // Скрыть содержимое элемента галереи ('PopupItem'), перед показам следующего --> popup.data.loader.className = 'popup-loader'; // Показываем блок "Загрузка..." после того, как скрыли содержимое --> popup.data.image(popup.data.actualObj); // Отображение содержимого. Метод отображения - "image" --> } } }, 10); }, popup.timeoutDelay); } // --> // Функция анимирования (закон) --> this.funct = function(method, progress) { /* method // Метод анимации ("show"/"hide") --> progress // Прогресс анимации --> */ if (method == 'show') { // Метод анимации: показать блок --> return progress; } else if (method == 'hide') { // Метод анимации: скрыть блок --> return 1-progress; } } // --> } // --> /* --- © Tarik, 2011 --- */ /* ===== // 'popup.js' // ===== */