/**
* Created by Mitina on 16.12.2015.
*/
(function() {
'use strict';
var isMobile = window.mheContpract.libs['browser'].platform.Mobile;
var event = window.mheContpract.libs['event'].user;
var symbols = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
var ReviewSlide = function(section) {
this.section = section;
this.section.points_possible = 1;
this.section.points_earned = 0;
this.section.section_completed = false;
section.jq.addClass('hover_review');
this.reviewedItems = [];
this.currentItem = null;
this.node = this.section.jq[0];
// set heading role to section title
this.node.querySelector('div[data-block_type="section_title"] p').setAttribute('role','heading');
this.labels = this.node.querySelectorAll('.review_label');
this.items = this.node.querySelectorAll('.review_items p');
this.text = this.node.querySelectorAll('.container1 p');
this.itemsSvg = findAllSvgItems(this.node);
// Add aria element for each item
addAriaItems.call(this);
addAriaDescribe.call( this );
// Counters
addCounter.call(this);
addEvents.call(this);
};
var addEvents = function() {
var i, j;
// Mobile
if ( isMobile ) {
for (i = 0; i < this.items.length; i++) {
this.labels[i].addEventListener(event.mousedown, hoverLabelHandler.bind(this, i));
for (j = 0; this.itemsSvg[i] && j < this.itemsSvg[i].length; j++) {
this.itemsSvg[i][j].addEventListener(event.mousedown, hoverLabelHandler.bind(this, i));
}
}
}
// Desktop
else {
for (i = 0; i < this.items.length; i++) {
this.labels[i].addEventListener('mouseenter', showItem.bind(this, i));
this.labels[i].addEventListener('mouseleave', hideItem.bind(this, i));
for (j = 0; this.itemsSvg[i] && j < this.itemsSvg[i].length; j++) {
this.itemsSvg[i][j].addEventListener('mouseenter', showItem.bind(this, i));
this.itemsSvg[i][j].addEventListener('mouseleave', hideItem.bind(this, i));
}
}
}
};
var generateID = function( str ){
str = str ? str + "_" : "";
var
min = 5,
max = 10,
i = 0,
idLength = Math.floor( Math.random() * ( max - min ) + min),
rnd;
for( i; i < idLength; i++ ){
rnd = Math.floor( Math.random() * symbols.length );
str += symbols[rnd];
}
return str;
};
var addAriaDescribe = function(){
var ids = [], id, i;
for( i = 0; i < this.items.length; i++ ){
id = generateID( "describe" );
ids.push( id );
this.items[i].id = id;
this.labels[i].setAttribute( "aria-describedby", id );
}
};
var addCounter = function() {
var counters = $('
');
var itemsCounter = $('Items: ' + this.items.length + '
');
this.reviewedCounter = $('Reviewed: 0
');
this.liveRegionCounter = $('Reviewed 0 out of ' + this.items.length + '
');
counters.append( itemsCounter, this.reviewedCounter, this.liveRegionCounter );
this.section.jq.find('.container').append(counters);
};
var updateCounter = function(i) {
if ( this.reviewedItems.indexOf(i) === -1 ) {
this.reviewedItems.push(i);
}
this.reviewedCounter.text('Reviewed: ' + this.reviewedItems.length);
this.liveRegionCounter.text( 'Reviewed ' + this.reviewedItems.length + ' out of ' + this.items.length );
if ( this.reviewedItems.length === this.items.length ) {
finishSlide.call(this);
}
};
var addAriaItems = function() {
this.ariaItems = [];
var container = this.node.querySelector('.review_items');
for (var j = 0; j < this.text.length; j++) {
var text = this.text[j];
text.style.display = 'none';
}
for (var i = 0; i < this.items.length; i++) {
var item = this.items[i];
item.style.display = 'none';
var ariaItem = $('');
ariaItem[0].addEventListener('focus', showItem.bind(this, i));
ariaItem[0].addEventListener('blur', hideItem.bind(this, i));
container.appendChild(ariaItem[0]);
this.ariaItems.push(ariaItem[0]);
}
// Set focus on next button after the last item
this.ariaItems[this.ariaItems.length - 1].addEventListener('keydown', function(e) {
e = e || window.event;
if ( !e.shiftKey && e.keyCode === 9 ) { // !Shift + Tab key
e.preventDefault();
document.querySelector('.navigation_button.next_button').focus();
}
});
};
var findAllSvgItems = function(node) {
var itemsSvg = [];
var allItems = node.querySelectorAll('.review_item');
for (var i = 0; i < allItems.length; i++) {
var item = allItems[i];
item.style.opacity = 0;
var j = Number(item.getAttribute('data-item'));
if ( !itemsSvg[j] ) { itemsSvg[j] = []; }
itemsSvg[j].push(item);
}
return itemsSvg;
};
var hoverLabelHandler = function(i) {
if ( i === this.currentItem ) { return; }
showItem.call(this, i);
};
var showItem = function(i) {
hideItem.call(this, this.currentItem);
this.currentItem = i;
var j, text;
for ( j = 0; j < this.text.length; j++) {
text = this.text[j];
text.style.display = 'none';
}
this.labels[i].addClass('selected');
this.items[i].style.display = '';
if ( this.text.length !== 0 ) {
this.text[i].style.display = '';
}
if ( this.itemsSvg[i] ) {
this.itemsSvg[i].forEach(function(item) {
item.style.opacity = 1;
});
}
updateCounter.call(this, i);
};
var hideItem = function(i) {
if ( i === null ) { return; }
this.labels[i].removeClass('selected');
this.items[i].style.display = 'none';
if ( this.itemsSvg[i] ) {
this.itemsSvg[i].forEach(function(item) {
item.style.opacity = 0;
});
}
};
var finishSlide = function() {
this.section.points_earned = this.section.points_possible;
this.section.section_completed = true;
player.activity.grade_activity();
player.update_section_status();
};
ReviewSlide.prototype.showSlide = function() {
this.section.jq.focus();
};
window.mheContpract = window.mheContpract || {};
window.mheContpract['hover_review_custom'] = {
initialize: function(section) {
section.slide = new ReviewSlide(section);
},
show: function(section) {
section.slide.showSlide();
}
};
})();