%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* Makes sure we have all the required levels on the Tribe Object
*
* @since 4.9.4
*
* @type {PlainObject}
*/
tribe.events = tribe.events || {};
tribe.events.views = tribe.events.views || {};
/**
* Configures Month Grid Object in the Global Tribe variable
*
* @since 4.9.4
*
* @type {PlainObject}
*/
tribe.events.views.monthGrid = {};
/**
* Initializes in a Strict env the code that manages the Event Views
*
* @since 4.9.4
*
* @param {PlainObject} $ jQuery
* @param {PlainObject} obj tribe.events.views.monthGrid
*
* @return {void}
*/
( function( $, obj ) {
'use strict';
var $document = $( document );
/**
* Selectors used for configuration and setup
*
* @since 4.9.4
*
* @type {PlainObject}
*/
obj.selectors = {
grid: '[data-js="tribe-events-month-grid"]',
row: '[data-js="tribe-events-month-grid-row"]',
cell: '[data-js="tribe-events-month-grid-cell"]',
focusable: '[tabindex]',
focused: '[tabindex="0"]',
};
/**
* Object of key codes
*
* @since 4.9.4
*
* @type {PlainObject}
*/
obj.keyCode = {
END: 35,
HOME: 36,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
};
/**
* Check if cell described by row and col is valid
*
* @since 4.9.4
*
* @param {array} grid 2-dimensional array of grid
* @param {integer} row row number of cell, 0 index
* @param {integer} col column number of cell, 0 index
*
* @return {boolean} true if cell is valid, false otherwise
*/
obj.isValidCell = function( grid, row, col ) {
return (
! isNaN( row ) &&
! isNaN( col ) &&
row >= 0 &&
col >= 0 &&
grid &&
grid.length &&
row < grid.length &&
col < grid[ row ].length
);
};
/**
* Get next cell from current row, current column, and direction changes
*
* @since 4.9.4
*
* @param {array} grid 2-dimensional array of grid
* @param {integer} currentRow index of current row
* @param {integer} currentCol index of current column
* @param {integer} directionX number of steps to take in the X direction
* @param {integer} directionY number of steps to take in the Y direction
*
* @return {PlainObject} object containing next row and column indices
*/
obj.getNextCell = function( grid, currentRow, currentCol, directionX, directionY ) {
var row = currentRow + directionY;
var col = currentCol + directionX;
if ( obj.isValidCell( grid, row, col ) ) {
return {
row: row,
col: col,
};
}
return {
row: currentRow,
col: currentCol,
};
};
/**
* Set focus pointer to given row and column
*
* @since 4.9.8
*
* @param {jQuery} $grid jQuery object of grid
* @param {integer} row index of row
* @param {integer} col index of column
*
* @return {boolean} boolean of whether focus pointer was set or not
*/
obj.setFocusPointer = function( $grid, row, col ) {
var state = $grid.data( 'tribeEventsState' );
if ( obj.isValidCell( state.grid, row, col ) ) {
state.grid[ state.currentRow ][ state.currentCol ].attr( 'tabindex', '-1' );
state.grid[ row ][ col ].attr( 'tabindex', '0' );
state.currentRow = row;
state.currentCol = col;
$grid.data( 'tribeEventsState', state );
return true;
}
return false;
};
/**
* Focus cell at given row and column
*
* @since 4.9.8
*
* @param {jQuery} $grid jQuery object of grid
* @param {integer} row index of row
* @param {integer} col index of column
*
* @return {void}
*/
obj.focusCell = function( $grid, row, col ) {
if ( obj.setFocusPointer( $grid, row, col ) ) {
var state = $grid.data( 'tribeEventsState' );
state.grid[ row ][ col ].focus();
}
};
/**
* Handle keydown event to move focused grid cell
*
* @since 4.9.8
*
* @param {Event} event event object
*
* @return {void}
*/
obj.handleKeydown = function( event ) {
var $grid = event.data.grid;
var state = $grid.data( 'tribeEventsState' );
var key = event.which || event.keyCode;
var row = state.currentRow;
var col = state.currentCol;
var nextCell;
switch ( key ) {
case obj.keyCode.UP:
nextCell = obj.getNextCell( state.grid, row, col, 0, -1 );
row = nextCell.row;
col = nextCell.col;
break;
case obj.keyCode.DOWN:
nextCell = obj.getNextCell( state.grid, row, col, 0, 1 );
row = nextCell.row;
col = nextCell.col;
break;
case obj.keyCode.LEFT:
nextCell = obj.getNextCell( state.grid, row, col, -1, 0 );
row = nextCell.row;
col = nextCell.col;
break;
case obj.keyCode.RIGHT:
nextCell = obj.getNextCell( state.grid, row, col, 1, 0 );
row = nextCell.row;
col = nextCell.col;
break;
case obj.keyCode.HOME:
if ( event.ctrlKey ) {
row = 0;
}
col = 0;
break;
case obj.keyCode.END:
if ( event.ctrlKey ) {
row = state.grid.length - 1;
}
col = state.grid[ state.currentRow ].length - 1;
break;
default:
return;
}
obj.focusCell( $grid, row, col );
event.preventDefault();
};
/**
* Handle click event to focus cell
*
* @since 4.9.8
*
* @param {Event} event event object
*
* @return {void}
*/
obj.handleClick = function( event ) {
var $grid = event.data.grid;
var state = $grid.data( 'tribeEventsState' );
var $clickedCell = $( event.target ).closest( obj.selectors.focusable );
for ( var row = 0; row < state.grid.length; row++ ) {
for ( var col = 0; col < state.grid[ row ].length; col++ ) {
if ( state.grid[ row ][ col ].is( $clickedCell ) ) {
obj.focusCell( $grid, row, col );
return;
}
}
}
};
/**
* Initializes grid state
*
* @since 4.9.8
*
* @param {jQuery} $grid jQuery object of grid.
*
* @return {void}
*/
obj.initState = function( $grid ) {
var state = {
grid: [],
currentRow: 0,
currentCol: 0,
};
$grid.data( 'tribeEventsState', state );
};
/**
* Set up grid to state array
*
* @since 4.9.8
*
* @param {jQuery} $grid jQuery object of grid.
*
* @return {void}
*/
obj.setupGrid = function( $grid ) {
var state = $grid.data( 'tribeEventsState' );
$grid
.find( obj.selectors.row )
.each( function( rowIndex, row ) {
var gridRow = [];
$( row )
.find( obj.selectors.cell )
.each( function( colIndex, cell ) {
var $cell = $( cell );
// if cell is focusable (has tabindex attribute)
if ( $cell.is( obj.selectors.focusable ) ) {
// if cell is focusable and has tabindex of 0
if ( $cell.is( obj.selectors.focused ) ) {
state.currentRow = state.grid.length;
state.currentCol = gridRow.length;
}
// add focusable cell to gridRow
gridRow.push( $cell );
} else {
var $focusableCell = $cell.find( obj.selectors.focusable );
// if element is focusable (has tabindex attribute)
if ( $focusableCell.is( obj.selectors.focusable ) ) {
// if element is focusable and has tabindex of 0
if ( $cell.is( obj.selectors.focused ) ) {
state.currentRow = state.grid.length;
state.currentCol = gridRow.length;
}
// add focusable element to gridRow
gridRow.push( $focusableCell );
}
}
} );
// add gridRow to grid if gridRow has focusable cells
if ( gridRow.length ) {
state.grid.push( gridRow );
}
} );
$grid.data( 'tribeEventsState', state );
};
/**
* Unbind events for keydown and click on grid
*
* @since 4.9.5
*
* @param {jQuery} $grid jQuery object of grid.
*
* @return {void}
*/
obj.unbindEvents = function( $grid ) {
$grid.off();
};
/**
* Bind events for keydown and click on grid
*
* @since 4.9.4
*
* @param {jQuery} $grid jQuery object of grid.
*
* @return {void}
*/
obj.bindEvents = function( $grid ) {
$grid
.on( 'keydown', { grid: $grid }, obj.handleKeydown )
.on( 'click', { grid: $grid }, obj.handleClick );
};
/**
* Deinitialize grid.
*
* @since 4.9.5
*
* @param {Event} event event object for 'beforeAjaxSuccess.tribeEvents' event
* @param {jqXHR} jqXHR Request object
* @param {PlainObject} settings Settings that this request was made with
*
* @return {void}
*/
obj.deinit = function( event, jqXHR, settings ) {
var $container = event.data.container;
var $grid = $container.find( obj.selectors.grid );
obj.unbindEvents( $grid );
$container.off( 'beforeAjaxSuccess.tribeEvents', obj.deinit );
};
/**
* Initialize grid.
*
* @since 4.9.8
*
* @param {Event} event JS event triggered.
* @param {integer} index jQuery.each index param from 'afterSetup.tribeEvents' event.
* @param {jQuery} $container jQuery object of view container.
* @param {object} data data object passed from 'afterSetup.tribeEvents' event.
*
* @return {void}
*/
obj.init = function( event, index, $container, data ) {
var $grid = $container.find( obj.selectors.grid );
if ( ! $grid.length ) {
return;
}
obj.initState( $grid );
obj.setupGrid( $grid );
var state = $grid.data( 'tribeEventsState' );
obj.setFocusPointer( $grid, state.currentRow, state.currentCol );
obj.bindEvents( $grid );
$container.on( 'beforeAjaxSuccess.tribeEvents', { container: $container }, obj.deinit );
};
/**
* Handles the initialization of the multiday events when Document is ready
*
* @since 4.9.4
*
* @return {void}
*/
obj.ready = function() {
$document.on( 'afterSetup.tribeEvents', tribe.events.views.manager.selectors.container, obj.init );
};
// Configure on document ready
$( obj.ready );
} )( jQuery, tribe.events.views.monthGrid );
Zerion Mini Shell 1.0