Эффект фото ленты 2 (разбор HR_PhotoLine.js)

[hrjs]

Здравствуйте читатели!
Продолжим разбор нашей фото ленты. После того, как мы разобрались с вставкой свойств фото ленты на страницу, теперь пришло время разобрать сам файл HR_PhotoLine.js Как я уже писал этот файл можно скачать тут.
Создание объекта HelpeR.
var HelpeR = function() {
this.pics_array = ln_photos;
this.pics_big_array = ln_big_photos;
this.pics_title = ln_titles;
this.pic_dir = pic_dir;
this.lenta_pics = ln_all_pics;
this.speed = ln_speed;
this.step = ln_step;
this.pic_pos = 0;
this.timer = null;
this.HR_Blackout = HR_Blackout;
this.HR_Blackout_src = HR_Blackout_src;
Создаем его var HelpeR = function(). Далее мы присваиваем уже свойствам объекта HelpeR значения полученные из глобальных переменных, которые были вынесены для пользователя.
А теперь для удобства я начал объявлять свойства как объекты. Каждое свойство предназначено для отдельного элементы фото ленты.
this.pic_params = {
width : pic_width + 'px', // ширина рисунка
height : pic_height + 'px', // высота рисунка
padding : pic_padding + 'px',
border : '0px',
cursor : 'pointer'
};

this.td = {
backgroundColor : ln_bgcolor, // цвет фона ленты
border : ln_border //толщина вид и цвет соответственно рамки
};

this.desc_params = {
fontFamily : desc_font, // шрифт текста описания
fontSize : desc_font_size + 'px', // размер шрифта описания
color : desc_color, // цвет шрифта
textAlign : desc_align,
paddingBottom : pic_padding + 'px',
cssFloat : 'left',
styleFloat : 'left'
};

this.table_params = {
border : '0',
cellspacing : '0',
cellpadding : '0',
id : 'HR_lenta_table'
};

this.arrows_params = {
left : {
lnk : {
href : 'javascript:HR_lenta.next();',
id : 'HR_link_left'
},
img : {
src : ln_left_arrow, // рисунок левой стрелки
width : ln_left_arrow_width, // ширина рисунка
height : ln_left_arrow_height, // высота рисунка
border : '0px'
}
},

right : {
lnk : {
href : 'javascript:HR_lenta.previous();',
id : 'HR_link_right'
},
img : {
src : ln_right_arrow, // рисунок правой стрелки
width : ln_right_arrow_width, // ширина рисунка
height : ln_right_arrow_height, // высота рисунка
border : '0px'
}
}
};
}
На этом создание объекта HelpeR с его свойствами заканчивается, теперь приступаем к созданию его методов.
Так же для удобства я внедрил все методы в его прототип, объявив его как объект HelpeR.prototype = {
Первый метод называется table. Он отвечает за создание таблицы и вставку его в страницу.
Опишу его более подробно.
1) Создаем таблицу var tbl = document.createElement('table');
2) Создаем ее ряд var row = tbl.insertRow(0); (при использовании var row = document.createElement('tr') и tbl.appendChild(row); не работает в IE)
3) Далее присваиваем свойства для таблицы. for(var i in this.table_params) {
tbl.setAttribute(i,this.table_params[i]);
}
4) Создаем ячейки таблицы. Нам требуется три. Крайние две для вставки стрелок, а в центральной будут находится фотографии.
for(var c = 0; c < 3; c++) {
row.insertCell(c).setAttribute('valign','middle');
tbl.rows[0].cells[c].setAttribute('align','left');
}
5) Создаем стрелки и оформляем центральную ячейку для фото. Стрелки создаются с помощью метода mkarrow, которой передается агрумент left или right, который указывает какую стрелку следует создать. Его мы разберем позже.
var left_link = this.mkarrow('left');
var right_link = this.mkarrow('right');
tbl.rows[0].cells[0].appendChild(left_link);
tbl.rows[0].cells[2].appendChild(right_link);
for(var i in this.td) {
eval("tbl.rows[0].cells[1].style." + i + " ='" + this.td[i] + "';");
}
Тут для присвоения свойств стиля ячейки c использованием цикла мне пришлось использовать функцию eval. Если у вас будут другие варианты пишите буду рад.
6) И наконец последний шаг это замена дива который вставлен на страницу пользователем, а если див не вставлен, то пользователя информируют, что див не вствлен на страницу.
var replace_node = document.getElementById('HR_lenta_DIV');
if(replace_node) {
replace_node.parentNode.replaceChild(tbl,replace_node);
return true;
}
else {
alert("Ошибка!\nВставьте код
на страницу для отображения ленты!");
return false;
}
Теперь перейдем к методам для создания стрелок.
Тут создается объем рисунка Img и ссылка для вызова функция прокрутки. Далее присваиваются атрибуты для рисунка и ссылки. И под конец мы устанавливаем рисунок как дочерний узел для ссылки и возвращаем объект.
mkarrow : function(dir) {
var img = new Image();
var lnk = document.createElement('a');
for(var i in this.arrows_params[dir]['img']) {
img.setAttribute(i,this.arrows_params[dir]['img'][i]);
}

for(var c in this.arrows_params[dir]['lnk']) {
lnk.setAttribute(c,this.arrows_params[dir]['lnk'][c]);
}
lnk.appendChild(img);
return lnk;
},
На этом этапе мы разобрали можно сказать самые легкие методы объекта HelpeR. В следующем посте мы разберем более сложные методы отвечающие за прокрутку рисунков и создание самой ленты.