<?
/**
* RightClick Class is a great class to create a simple right click context popup menu to any/all of your web pages.
* It is very easy to use and work with. If you want multiple popup menus, all different within the page, then instantiate the class each time you print a new menu.
* The contents of this page are:
* class.rightclick.php
* example.html
* images directory
*
* This is my first opensource class, so if there are any issues with it, please let me know via email.
*
* I hope this works well for everyone, it has be amazing for me.
*
* @author Dean Berman <hide@address.com>
* @version 1.0 - 11/16/2007
* @copyright DB Web Development 2007
*/
class RightClick {
/**
* ImagesArray is a default stored array which gives access to the image icons that are associated within the sytem
* - standard image size: 14x14
* @var mixed
*/
private $imagesArray = array(
'add' => array('image1' => 'addIcon_01.jpg', 'image2' => 'addIcon_02.jpg'),
'copy' => array('image1' => 'copyIcon_01.jpg', 'image2' => 'copyIcon_02.jpg'),
'delete' => array('image1' => 'deleteIcon_01.jpg', 'image2' => 'deleteIcon_02.jpg'),
'download' => array('image1' => 'downloadIcon_01.jpg', 'image2' => 'downloadIcon_02.jpg'),
'edit' => array('image1' => 'editIcon_01.jpg', 'image2' => 'editIcon_02.jpg'),
'print' => array('image1' => 'printIcon_01.jpg', 'image2' => 'printIcon_02.jpg'),
'save' => array('image1' => 'saveIcon_01.jpg', 'image2' => 'saveIcon_02.jpg'),
'search' => array('image1' => 'searchIcon_01.jpg', 'image2' => 'searchIcon_02.jpg'),
'upgrade' => array('image1' => 'upgradeIcon_01.jpg', 'image2' => 'upgradeIcon_02.jpg'),
'view' => array('image1' => 'viewIcon_01.jpg', 'image2' => 'viewIcon_02.jpg')
);
/**
* RCArray is a private variable that stores the options that the User specifies to be printed in the popup menu.
* @var mixed
*/
private $rcArray = NULL;
private $rcArrayCounter = 0;
private $defaultHidDivWidth = 95;
/**
* RightClick Class Constructor
*
* @param void
* @return void
*/
function RightClick() {
}
/**
* Call this function to clear variable and create a new Right Click popup menu
*
* @param void
* @return void
*/
public function NewRightClick() {
$this->rcArrayCounter++;
unset($this->rcArray);
$this->rcArray = array();
}
/**
* CreateLink is called to create a link/row in the popup menu
*
* @param string Label to be displayed in the drop down
* @param string Icon Image Action Type (from $imagesArray)
* @param string HTML On Click Action (url or javascript function)
* @param string HTML On Click Action Type (Value Options: 'javascript' or 'link')
* @return void
*/
public function CreateLink($label, $iconType, $onclickAction, $onclickActionType='javascript') {
$this->rcArray[] = array('label' => $label, 'type' => $iconType, 'action' => $onclickAction, 'actionType' => $onclickActionType);
}
/**
* Call GenerateRightClick at the position in the HTML to print your output to the source code/page (can be printed anywhere after you create your HTML Tag ID object in the code.
*
* @param string HTML Tag ID
* @return void
*/
public function GenerateRightClick($hiddenDivID='hidDiv') {
if($this->rcArrayCounter == 0) {
$this->GenerateCursorJS();
}
$this->GenerateOnContextMenuJS($hiddenDivID);
$this->GenerateStyleCSS($hiddenDivID, $this->GetTheLongestLable());
$this->GenerateRCHTML($hiddenDivID);
}
private function GetTheLongestLable() {
$maxCharacters = 8;
$initMaxCharacters = $maxCharacters;
for($i = 0, $icnt = count($this->rcArray); $i < $icnt; $i++) {
if(strlen($this->rcArray[$i]['label']) > $maxCharacters) {
$maxCharacters = strlen($this->rcArray[$i]['label']);
}
}
if($maxCharacters > $initMaxCharacters) {
return ($this->defaultHidDivWidth + (($maxCharacters - $initMaxCharacters) * 5));
}
return $this->defaultHidDivWidth;
}
/**
* GenerateRCHTML function is called from GenerateRightClick to generate the actual source code output to be displayed on the page.
*
* @param string HTML Tag ID
* @return void
*/
private function GenerateRCHTML($hiddenDivID) {
?>
<div id="<?=$hiddenDivID?>">
<table id="<?=$hiddenDivID?>_table" align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left">
<td colspan="2" class="<?=$hiddenDivID?>_X" onclick="document.getElementById('<?=$hiddenDivID?>').style.display = 'none';"> X</td>
</tr>
<?
$counter = 0;
for($i = 0, $icnt = count($this->rcArray); $i < $icnt; $i++) {
?>
<tr valign="middle">
<td
align="center"
class="<?=$hiddenDivID?>_link_mover_img"
onclick="<?=(($this->rcArray[$i]['actionType'] == 'link') ? "window.location = '{$this->rcArray[$i]['action']}';" : "{$this->rcArray[$i]['action']};")?>"
><img id="<?=$hiddenDivID?>_link_<?=$i?>_img" src="images/<?=$this->imagesArray[$this->rcArray[$i]['type']]['image2']?>"></td>
<td
align="left"
class="<?=$hiddenDivID?>_link_mout"
onmouseover="this.className = '<?=$hiddenDivID?>_link_mover';"
onmouseout="this.className = '<?=$hiddenDivID?>_link_mout';"
onclick="<?=(($this->rcArray[$i]['actionType'] == 'link') ? "window.location = '{$this->rcArray[$i]['action']}';" : "{$this->rcArray[$i]['action']};")?>"
><?=$this->rcArray[$i]['label']?></td>
</tr>
<?
}
?>
</table>
</div>
<?
}
/**
* GenerateOnContextMenuJS is called from GenerateRightClick to print a simple javascript 'window.onload' function for your right click context menu option.
*
* @param string HTML Tag ID
* @return void
*/
private function GenerateOnContextMenuJS($hiddenDivID) {
?>
<script>
function onLoadFunction_<?=$this->rcArrayCounter?>() {
document.getElementById('init_<?=$hiddenDivID?>').oncontextmenu = function() {
document.getElementById('<?=$hiddenDivID?>').style.left = actualX;
document.getElementById('<?=$hiddenDivID?>').style.top = actualY;
document.getElementById('<?=$hiddenDivID?>').style.display = 'block';
return false;
}
}
onLoadFunction_<?=$this->rcArrayCounter?>();
</script>
<?
}
/**
* GenerateStyleCSS is called from GenerateRightClick to generate the css style in the source code for your popup menu.
*
* @param string HTML Tag ID
* @return void
*/
private function GenerateStyleCSS($hiddenDivID, $hiddenDivLength) {
?>
<style>
#init_<?=$hiddenDivID?> {
cursor: url('images/rightclickcursor.gif'), auto;
}
#<?=$hiddenDivID?> {
font-family: Verdana, Arial;
border: 2px solid #000000;
position: absolute;
width: <?=$hiddenDivLength?>px;
display: none;
font-weight: bold;
}
#<?=$hiddenDivID?>_table {
font-family: Verdana, Arial;
font-size: 10px;
width: 100%;
}
#<?=$hiddenDivID?>_table td {
font-family: Verdana, Arial;
height: 20px;
padding-top: 2px;
padding-bottom: 2px;
/* padding-left: 5px;*/
font-size: 10px;
font-weight: bold;
}
.<?=$hiddenDivID?>_X {
font-family: Verdana, Arial;
background-color: #888888;
color: #FFFFFF;
cursor: pointer;
border-bottom: 1px solid #000000;
}
.<?=$hiddenDivID?>_link_mout {
font-family: Verdana, Arial;
background-color: #CCCCCC;
color: #000000;
text-decoration: none;
padding-left: 2px;
}
.<?=$hiddenDivID?>_link_mover {
font-family: Verdana, Arial;
background-color: #AAAAAA;
color: #000000;
text-decoration: underline;
cursor: pointer;
padding-left: 2px;
}
.<?=$hiddenDivID?>_link_mout_img {
background-color: #CCCCCC;
border-right: 1px solid #000000;
}
.<?=$hiddenDivID?>_link_mover_img {
background-color: #AAAAAA;
cursor: pointer;
border-right: 1px solid #000000;
}
</style>
<?
}
/**
* GenerateCursorJS is called from GenerateRightClick to generate the cursor position on the page.
*
* @param void
* @return void
*/
private function GenerateCursorJS() {
?>
<script>
/*
The following JS is used for Mouse axis, etc.
*/
var actualX = 0;
var actualY = 0;
var IE = ((document.all) ? true : false);
// If NS -- that is, !IE -- then set up for mouse capture
if(!IE) {
document.captureEvents(Event.MOUSEMOVE);
}
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if(IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
// catch possible negative values in NS4
if(tempX < 0) {
tempX = 0;
}
if(tempY < 0) {
tempY = 0;
}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
actualX = tempX;
actualY = tempY;
return true
}
/*
End
*/
</script>
<?
}
}
?>