Location: PHPKode > projects > Hobby Works > programs/Teditor/Teditor.php
<?

$TITLE = 'TABLE EDITOR';	// Set page title

$INC_GENERAL_FILE_ROUTINES_AS = 'ADMIN';	// Include jscript routines

define('DEF_ct1', 'Edit table ...');
define('DEF_ct2', 'Edit');
define('DEF_ct3', 'Remove');
define('DEF_ct4', 'Insert');
define('DEF_ct5', 'Type of element: ');
define('DEF_ct6', 'CELL');
define('DEF_ct7', 'ROW container');
define('DEF_ct8', 'WIDTH');
define('DEF_ct9', 'HEIGHT');
define('DEF_ct10', 'BACKGROUNDCOLOR');
define('DEF_ct11', 'FONT-FAMILY');
define('DEF_ct12', 'ERASE');
define('DEF_ct13', 'CONTENT-TYPE');
define('DEF_ct14', 'HTML');
define('DEF_ct15', 'TABLE');
define('DEF_ct16', 'Select data');
define('DEF_ct17', 'Select from database content to fill in cell');

$menu =
	// Alter file
'<img name="MENU_ICON" id="alter" style="height: '.DEF_menu_icon_size.
 'px;" OnClick="open_FM_menu(event);" title="'.DEF_np_03.'" />&nbsp; '.
'<img name="MENU_ICON" id="ct_edit_img"  style="height: '.
 DEF_menu_icon_size.'px;" OnClick="open_table_menu(event);" title="'.DEF_ct1.'" />&nbsp; '.
''; 

$end_menu = '';

// Contextmenu
$tablemenu =	// TABEL START
'	<font size="1"><TABLE border=0>'.
'	<TR><TD><img id="copy_img_id" style="width: 20px;" align="absmiddle"/></TD><TD class="normal" OnMouseOver="js_world.focusThis(this);" OnMouseOut="js_world.unfocusThis(this);" OnClick="open_table_element_menu(event, 0);">'.
 DEF_ct2.'</TD><TD>&nbsp;</TD></TR>'.
'	<TR><TD><img id="cut_img_id" style="width: 20px;" align="absmiddle"/></TD><TD class="normal" OnMouseOver="js_world.focusThis(this);" OnMouseOut="js_world.unfocusThis(this);" OnClick="open_table_element_menu(event, 1);">'.
 DEF_ct3.'</TD><TD>&nbsp;</TD></TR>'.
'	<TR><TD><img id="paste_img_id" style="width: 20px;" align="absmiddle"/></TD><TD class="normal" OnMouseOver="js_world.focusThis(this);" OnMouseOut="js_world.unfocusThis(this);" OnClick="open_table_element_menu(event, 2);">'.
 DEF_ct4.'</TD><TD>&nbsp;</TD></TR>'.
'	</TABLE></font>';

// Menu functions
$javascript .= 
'	var ct_table_arr = create_ct_table(); '.

'	function initialize_program() { '.
'		js_world.disp_this_menu(\''.$menu.'\', \''.$end_menu.'\'); '.
'		js_world.removeBGImage(); '.
' 		js_world.hide_table_row("STATUS_ROW"); '.
'		js_world.disp_this_ct_table(ct_table_arr); '.

'		js_world.set_img_cache({"alter" : Slash_programs_base_url + "images/32x32/filemanager_32.png", "ct_edit_img" : Slash_programs_base_url + "images/32x32/tools_32.png"}, '.
'		 {"alter" : "alter", "ct_edit_img" : "ct_edit_img"}, '.
'		 {}); '.
'	} '.

'	function open_FM_menu(evt) { js_world.removePopup(); js_world.selectDirElementToAlter(event, "cms/temp/tables", true, true); } '.

// Display menu over edit, remove, insert
'	function open_table_menu(evt) { '.
'		js_world.displayPopup(\''.$tablemenu.'\', evt, 160, "px"); '.

'		js_world.set_img_cache({"cut_img" : Slash_programs_base_url + "images/20x20/cut_on_20.gif", "copy_img" : Slash_programs_base_url + "images/20x20/copy_on_20.gif", "paste_img" : Slash_programs_base_url + "images/20x20/paste_on_20.gif"}, '.
'		 {"cut_img_id" : "cut_img", "copy_img_id" : "copy_img", "paste_img_id" : "paste_img"}, '.
'		 {}); '.
'	} '.
// Display menu over elements
'	function open_table_element_menu(evt, cmd) { '.

'		var table_menu = \'<font size="1"><TABLE border=0>\'; '.
'		if (cmd == 1) table_menu += \'<TR><TD STYLE="text-align: center"><SPAN STYLE="background-color: #ff4c4c;">&nbsp;&nbsp;&nbsp;'.DEF_ct12.'&nbsp;&nbsp;&nbsp;</SPAN></TD></TR>\'; '.
'		for (var elmt in ct_table_arr) { '.
'			if (ct_table_arr[elmt]["TYPE"] == "TD") { inc_s = "&nbsp;"; } else { inc_s = ""; } '.
'			table_menu += \'<TR><TD class="normal" OnMouseOver="js_world.focusThis(this);" OnMouseOut="js_world.unfocusThis(this);" OnClick="\'; '.
'			if (cmd == 0) { table_menu += \'edit_table_element_menu(\' + elmt + \')\'; } '.
'			else if (cmd == 1) { table_menu += \'remove_table_element_menu(\' + elmt + \')\'; } '.
'			else { table_menu += \'insert_table_element_menu(\' + elmt + \')\'; } '.
'			table_menu += \'">\'; '.
'			if (cmd == 2) table_menu += \'<...> \'; '.
'			table_menu += inc_s + \'&lt;\' + ct_table_arr[elmt]["TYPE"] + \' ID=\' + ct_table_arr[elmt]["ELEMENT"]["ID"].substr(3) + \'&gt;</TD></TR>\'; '.
'		} '.

'		if (cmd == 2) { '.
'			table_menu += '.
'			 \'<TR><TD class="normal" OnMouseOver="js_world.focusThis(this);" OnMouseOut="js_world.unfocusThis(this);" OnClick="\' + '.
'			 \'insert_table_element_menu(-1)"><...> </TD></TR>\'; '.
'		} '.

'		table_menu += \'</TABLE></font>\'; '.

'		js_world.displayPopup(table_menu, evt, 260, "px"); '.

'	} '.
// Display menu for table element edit
'	function edit_table_element_menu(elmt) { '.

'		var table_menu = \'<font size="1"><TABLE border=0>\'; '.
'		table_menu += \'<TR><TD STYLE="text-align: center" COLSPAN="4">'.DEF_ct5.'\'; '.
'		if (ct_table_arr[elmt]["TYPE"] == "TD") { table_menu += \''.DEF_ct6.'\'; } '.
'		else if (ct_table_arr[elmt]["TYPE"] == "TR") { table_menu += \''.DEF_ct7.'\'; } '.
'		else { table_menu += ct_table_arr[elmt]["TYPE"]; } '.
'		table_menu += \''.
		 '</TD></TR>'.
		 '<TR><TD COLSPAN="4"><HR></TD></TR>'.
		 '\'; '.
'		if (ct_table_arr[elmt]["TYPE"] == "TD") { '.
'			table_menu += \''.
			'<TR><TD>'.DEF_ct13.':</TD>'.
			'<TD><SELECT onchange="alert(this.value)">'.
			'<OPTION>'.DEF_ct14.'</OPTION>'.
			'<OPTION>'.DEF_ct15.'</OPTION>'.
			'</SELECT></TD>'.
			'<TD TITLE="'.DEF_ct17.'"><INPUT TYPE="BUTTON" VALUE="'.DEF_ct16.'" OnClick="selectLocation(event)"></TD><TD TITLE="'.DEF_ct17.'">'.
			'<INPUT TYPE="TEXT" VALUE="\' + get_element_attrib(ct_table_arr[elmt]["LOCATION"]) + \'"></TD></TR>'.
			'<TR><TD COLSPAN="4"><HR></TD></TR>'.
			'\'; '.
'		} '.
'		table_menu += \''.
		 '<TR><TD>ID:</TD><TD COLSPAN="3"><INPUT TYPE="TEXT" VALUE="\' + ct_table_arr[elmt]["ELEMENT"]["ID"].substr(3) + \'"></TD></TR>'.
		 '\'; '.
'		if (ct_table_arr[elmt]["TYPE"] == "TD") { '.
			' table_menu += \''.
			'<TR><TD>COLSPAN:</TD><TD><INPUT TYPE="TEXT" VALUE="\' + '.
			' get_element_attrib(ct_table_arr[elmt]["ELEMENT"]["COLSPAN"]) + '.
			'\'"></TD><TD>ROWSPAN:</TD><TD><INPUT TYPE="TEXT" VALUE="\' + '.
			' get_element_attrib(ct_table_arr[elmt]["ELEMENT"]["ROWSPAN"]) + '.
			' \'"></TD></TR>\'; '.
'		} '.
'		table_menu += \''.
		 '<TR><TD>STYLE:</TD><TD COLSPAN="3"><INPUT ID="ID_ct_style" TYPE="TEXT" SIZE=80 '.
		 'onchange="update_cell_attributes(this)"></TD></TR>'.
		 '<TR><TD COLSPAN="4"><HR></TD></TR>'.
		 '\'; '.
'		if (ct_table_arr[elmt]["TYPE"] == "TD") { '.
'			table_menu += \'<TR><TD>'.DEF_ct8.':</TD><TD COLSPAN="3"><INPUT ID="ID_ct_width" TYPE="TEXT" onchange="update_cell_attributes(this)"></TD></TR>\'; '.
'		} else if (ct_table_arr[elmt]["TYPE"] == "TR") { '.
'			table_menu += \'<TR><TD>'.DEF_ct9.':</TD><TD COLSPAN="3"><INPUT ID="ID_ct_height" TYPE="TEXT" onchange="update_cell_attributes(this)"></TD></TR>\'; '.
'		} '.
'		table_menu += \''.
		 '<TR><TD>'.DEF_ct10.':</TD><TD><INPUT ID="ID_ct_background-color" TYPE="TEXT" '.
		  'OnClick="openColorPicker(this)" onchange="update_cell_attributes(this)"></TD><TD COLSPAN="2">&nbsp;</TD></TR>'.

		 '</TABLE></font>'.
		 '\'; '.
'		js_world.removePopup(); '.
'		js_world.displayPopup(table_menu, null, 600, "px", "TableEdit"); '.
'		update_cell_attributes(document.getElementById("ID_ct_style"), get_element_attrib(ct_table_arr[elmt]["ELEMENT"]["STYLE"])); '.
'	} '.

	// Pick a color menu
'	function openColorPicker(ref_elmt) { js_world.removePopupsAfter("TableEdit"); js_world.js_world.colorpicker(ref_elmt); } '.

// Remove table element
'	function remove_table_element_menu(elmt) { '.
'		var as = confirm(\'Remove: <\' + ct_table_arr[elmt]["TYPE"] + \' ID=\' + ct_table_arr[elmt]["ELEMENT"]["ID"].substr(3) + \'> ?\'); '.
'	} '.

// Insert table element
'	function insert_table_element_menu(elmt) { '.
'	} '.

	// Get attribute status
'	function get_element_attrib(attribute) { '.
'		if (attribute == undefined) return ""; return attribute; '.
'	} '.
	// Get attribute status
'	function update_cell_attributes(elmt, newValue) { '.
'		if (!elmt) return ; '.
'		if (newValue) { elmt.value = newValue; } '.
		// Lowercase and no spaces!
'		elmt.value = elmt.value.toLowerCase().replace(/\s+/g,""); '.
'		var b = 0, s, style_elmt; '.

		// Set style into each edit tool
'		if (elmt.id == "ID_ct_style") { '.
'			while(-1 != (s = elmt.value.indexOf(":", b)) ) { '.
'				style_elmt = document.getElementById("ID_ct_" + elmt.value.substring(b,s)); '.
'				b = elmt.value.indexOf(";", s); '.
'				if (b == -1) b = elmt.value.length; '.
'				if (style_elmt) { style_elmt.value = elmt.value.substring(s + 1,b); } '.
'				b++; '.
'			} '.
'			elmt.value = elmt.value.replace(/:/g,": ").replace(/;/g,"; "); '.
'		} '.
		// Set input into style string
'		else { '.
'			style_elmt = document.getElementById("ID_ct_style"); '.
'			style_elmt.value = style_elmt.value.toLowerCase().replace(/\s+/g,""); '. // Lowercase and no spaces!
'			b = style_elmt.value.indexOf(elmt.id.substr(6)); '.
			// Erase
'			if (elmt.value == "" && b != -1) { '.
'				s = style_elmt.value.indexOf(";", b); '.
'				if (s == -1) { '.
'					s = style_elmt.value.length; '.
'					if (style_elmt.value.charAt(b-1) == ";") b--; '.
'				} '.
'				else { s++; } '.
'				style_elmt.value = style_elmt.value.substring(0,b) + style_elmt.value.substring(s); '.
'			} '.
			// Insert
'			else if (elmt.value != "" && b == -1) { '.
'				if (style_elmt.value.length > 0 && style_elmt.value.charAt(style_elmt.value.length - 1) != ";") { '.
'					style_elmt.value += ";"; '.
'				} '.
'				style_elmt.value += elmt.id.substr(6) + ":" + elmt.value; '.
'			} '.
			// Replace
'			else { '.
'				b = style_elmt.value.indexOf(":", b) + 1; '.
'				s = style_elmt.value.indexOf(";", b); '.
'				if (s == -1) { s = style_elmt.value.length; } '.
'				style_elmt.value = style_elmt.value.substring(0,b) + elmt.value + style_elmt.value.substring(s); '.
'			} '.
'			style_elmt.value = style_elmt.value.replace(/:/g,": ").replace(/;/g,"; "); '.
'		} '.
'	} '.
	// Creates new content table
'	function create_ct_table() { '.
'		ct_table = new Array(); '.
'		ct_table.push({"TYPE" : "TR", "ELEMENT" : {"ID" : "TE_Top_row"}}); '.
'		ct_table.push({"TYPE" : "TD", "ELEMENT" : {"STYLE" : "width: 20%; background-color: #ddcc00", "ROWSPAN" : "2", "ID" : "TE_Menu"}, "CONTAIN" : "HTML", "LOCATION" : ""}); '.
'		ct_table.push({"TYPE" : "TD", "ELEMENT" : {"STYLE" : "width: 45%; background-color: #ffcc00", "ID" : "TE_Story"}, "CONTAIN" : "HTML", "LOCATION" : ""}); '.
'		ct_table.push({"TYPE" : "TD", "ELEMENT" : {"STYLE" : "width: 65%; background-color: #feec36", "ID" : "TE_Panel"}, "CONTAIN" : "HTML", "LOCATION" : ""}); '.
'		ct_table.push({"TYPE" : "TR", "ELEMENT" : {"STYLE" : "height: 30%; background-color: #555540", "ID" : "TE_Second_row"}}); '.
'		ct_table.push({"TYPE" : "TD", "ELEMENT" : {"STYLE" : "width: 25%", "ID" : "TE_Adds"}, "CONTAIN" : "HTML", "LOCATION" : ""}); '.
'		ct_table.push({"TYPE" : "TD", "ELEMENT" : {"STYLE" : "width: 100%", "ID" : "TE_Cell4"}, "CONTAIN" : "HTML", "LOCATION" : ""}); '.
'		return ct_table; '.
'	} '.

	// Select database content for cell
'	function selectLocation(evt) { js_world.removePopupsAfter("TableEdit"); js_world.selectDirElementToAlter(evt, "cms/temp/html", true, true); } '.

'';

//*********************************************************
// Include CMS after defining variable for program path ...
// The variable $javascript will be run in HEAD of HTML as jscript
// And the jscript function initialize_program() will be run when GSF has loaded
// To use jscript support functions: set infront of calls > js_world. < which will address the IFRAME window with isolated jscript functions (GSF)
include(dirname(__FILE__).'/../cms/cms.php'); 

?>
Return current item: Hobby Works