Adding some fixes to the pmGrids tinyMCE plugin

This commit is contained in:
Gustavo Cruz
2012-12-04 17:42:42 -04:00
parent fc817b5bc1
commit b936900f2a
8 changed files with 187 additions and 228 deletions

View File

@@ -1,66 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
</head>
<form action="uploader.php?'.$_SERVER["QUERY_STRING"].'&q=upload" method="post" enctype="multipart/form-data" onsubmit="">'
<div id="d_variables">
<table width="80%">
<tr>
<td width="33%"><label for="type_label">Type Variable</label></td>
<td width="33%"><label for="prefix_label">Prefix</label></td>
<td width="33%"><label for="variables_label">Variables</label></td>
</tr>
<tr>
<td width="33%">
<select name="type_variables">
<option value="all">All Variables</option>
<option value="system">System Variables</option>
<option value="process">Process Variables</option>
</select>
</td>
<td width="33%">
<select name="prefix">
<option value="quotes">@#</option>
<option value="float">@@</option>
<option value="encoding">@?</option>
</select> &nbsp;&nbsp;&nbsp;&nbsp;
</td>
<td width="33%">
<select name="variables">
<option value="quotes">@@SYS_SYS</option>
<option value="float">@@SYS_LANG</option>
<option value="encoding">@@SYS_SKIN</option>
</select>
</td>
</tr>
</table>
</div>
<br>
<div id="desc_variables">
<table border="1" width="100%">
<tr width="40%">
<td>Result</td>
<td>@#SYS_LANG</td>
</tr>
<tr width="60%">
<td>Description</td>
<td>Description @#SYS_LANG</td>
</tr>
</table>
</div>
<br>
<div id="desc_variables">
<label for="desc_prefix">* @# Replace de value in quotes</label>
</div>
</form>
</html>

View File

@@ -13,7 +13,7 @@
});
ed.addButton('pmGrids', {
title: 'pmGrids',
label : ' @# Grids',
label : ' @#',
cmd: 'mcepmGrids',
image: url + '/img/grids.png'
});
@@ -33,11 +33,14 @@
// with the path of the uploaded file
function pmGrids(field_name, url, type, win) {
//tinyMCE.activeEditor.anyVariable='path/to/ProcessMaker'
tinyMCE.activeEditor.windowManager.open({ // open the plugin popup
file : '/js/tinymce/jscripts/tiny_mce/plugins/pmGrids/pmGrids.html',
title : '',
var strPluginPath = tinyMCE.activeEditor.plugins.pmGrids.getPluginURL(); // get the path to the uploader plugin
var strScriptURL = strPluginPath + "/pmGrids.html";
tinyMCE.activeEditor.windowManager.open({ // open the plugin popup
file : strScriptURL,
title : 'ProcessMaker Grid Wizard',
width : '600px',
height : '330px',
height : '230px',
resizable : "yes",
scrollbars : "no",
overflow : false,

View File

@@ -13,7 +13,7 @@
});
ed.addButton('pmGrids', {
title: 'pmGrids',
label : ' @# Grids',
label : ' @#',
cmd: 'mcepmGrids',
image: url + '/img/grids.png'
});
@@ -33,11 +33,14 @@
// with the path of the uploaded file
function pmGrids(field_name, url, type, win) {
//tinyMCE.activeEditor.anyVariable='path/to/ProcessMaker'
var strPluginPath = tinyMCE.activeEditor.plugins.pmGrids.getPluginURL(); // get the path to the uploader plugin
var strScriptURL = strPluginPath + "/pmGrids.html";
tinyMCE.activeEditor.windowManager.open({ // open the plugin popup
file : '/js/tinymce/jscripts/tiny_mce/plugins/pmGrids/pmGrids.html',
title : '',
file : strScriptURL,
title : 'ProcessMaker Grid Wizard',
width : '600px',
height : '330px',
height : '230px',
resizable : "yes",
scrollbars : "no",
overflow : false,

View File

@@ -10,33 +10,29 @@ and open the template in the editor.
<script src="/js/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script src="editor_plugin_src.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert(tinyMCE.baseURL);
/*$.ajax({
url: "/processes/processes_Ajax",
type: "POST",
data: {action : 'getDynagridList', PRO_UID: tinyMCE.activeEditor.processID},
dataType: "html",
success: function(){
}
});*/
});
</script>
<script src="pmGrids.js"></script>
<style type="text/css">
body {
position: absolute;
top: 0px;
left: 45%;
margin-left: -70px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
#left, #right, #middle, .gridCell {
display: table-cell;
}
</style>
</head>
<body>
<div id="container">
<div id="row">
<div id="left">
@@ -44,7 +40,9 @@ and open the template in the editor.
</div>
<div id="middle">
<div id="gridDropdown">
<select id="gridList">
</select>
</div>
</div>
</div>
@@ -53,8 +51,11 @@ and open the template in the editor.
Prefix
</div>
<div id="middle">
<div id="gridDropdown">
<div id="prefixDropdown">
<select name="prefixList" id="prefixList">
<option value="@#">@#</option>
<option value="@@">@@</option>
</select>
</div>
</div>
</div>
@@ -63,7 +64,7 @@ and open the template in the editor.
</div>
<div id="middle">
<div id="gridDropdown">
<div id="borderCheckBox">
<input type="checkbox"> Border
</div>
</div>
@@ -73,15 +74,32 @@ and open the template in the editor.
</div>
<div id="middle">
<div id="gridDropdown">
<div id="headersCheckBox">
<input type="checkbox"> Headers
</div>
</div>
</div>
</div>
<div id="list-container">
</div>
<center>
<table id="listContainer" border="1" cellspacing="0" cellpadding="3">
</table>
<div id="container">
<div id="row">
<div id="left">
</div>
<div id="middle">
<button id="addButton" style="width: 100px">
Add
</button>
<button id="cancelButton" style="width: 100px">
Cancel
</button>
</div>
<div id="right">
</div>
</div>
</div>
</center>
</body>
</html>

View File

@@ -0,0 +1,125 @@
$(document).ready(function () {
var getGridList = function(){
var responseData
responseData = '[{"id":"grid_01","name":"grid_01"},{"id":"grid_02","name":"grid_02"}]';
/*$.ajax({
url : "/processes/processes_Ajax",
type: "POST",
data: {action : 'getDynagridList', PRO_UID: tinyMCE.activeEditor.processID},
dataType: "html",
success: function (data) {
$.each(data, function(index, element) {
$('#listContainer').append($('<div class="gridCell">', {
text: element.name
}));
});
},
failure: function(){
// responseData = '[{"id":"1","name":"grid_01"},{"id":"2","name":"grid_02"}]';
}
});*/
responseData = eval ("(" +responseData+ ")");
return responseData;
}
var getGridFieldList = function (gridUid){
var responseData
if (gridUid=='1'||gridUid==1){
responseData = eval ('([{"id":"1","name":"field01"},{"id":"2","name":"field02"}])');
} else {
responseData = eval ('([{"id":"3","name":"field03"},{"id":"4","name":"field04"}])');
}
/*$.ajax({
url: "/processes/processes_Ajax",
type: "POST",
data: {action : 'getGridFieldList', PRO_UID: tinyMCE.activeEditor.processID, DYN_UID: gridUid},
dataType: "json",
success: function (data) {
$.each(responseData, function(index, element) {
$('#listContainer').append($('<div class="gridCell">', {
text: element.name
}));
});
}
});*/
$('#listContainer').html('');
var divHeader = '<tr>';
var divCell = '<tr>';
$.each(responseData, function(index, element){
divHeader += "<td><input type='checkbox' class='headerField' name='headerField' value='"+element.name+"'/><input type='text' style='width:100px;' name='dynafield' class='dynaField' value='"+element.name+"' id='"+element.name+"'></td>";
divCell += "<td align='center'><input type='hidden' id='field_"+element.name+"' value='"+element.name+"'>"+element.name+"</td>";
});
divHeader += "</tr>";
divCell += "</tr>";
$('#listContainer').append(divHeader+divCell);
}
var generateListValues = function(){
var list = getGridList();
var combo = document.getElementById("gridList");
var option = document.createElement('option');
for(i=(combo.length-1); i>=0; i--)
{
var aDelete = combo.options[i];
aDelete.parentNode.removeChild(aDelete);
}
if(list.length>0){
for(i=0; i<list.length; i++)
{
option = document.createElement("OPTION");
option.value = list[i].id;
option.text = list[i].name;
combo.add(option);
}
} else {
option = document.createElement("OPTION");
option.value = 0;
option.text = 'No Grids';
combo.add(option);
}
}
var insertFormatedGrid = function(){
var gridName = $("#gridList").val();
var tableCode = "<table>"
var gridCode = "<!--"+gridName+"@>-->";
var headerCode = "<tr>";
var fieldCode = "<tr>";
$('#listContainer .headerField').each(function(i){
if (this.checked == true) {
headerCode += "<td>"+$('#'+this.value).val()+"</td>";
fieldCode += "<td>"+$('#prefixList').val()+$('#field_'+this.value).val()+"</td>";
}
});
headerCode += "</tr>";
fieldCode += "</tr>";
gridCode += fieldCode+"<!--@<"+gridName+"-->";
tableCode += gridCode+"</table>"
updateEditorContent (tableCode);
closePluginPopup();
}
$('#gridList').change(function(){
getGridFieldList($(this).val());
});
$('#addButton').click(function(){
insertFormatedGrid();
});
$('#cancelButton').click(function(){
closePluginPopup();
});
generateListValues();
getGridFieldList($("#gridList").val());
});

View File

@@ -1,128 +0,0 @@
<head>
<title>Upload an Output Document</title>
<script type="text/javascript" src="../../tiny_mce_popup.js" ></script>
<script type="text/javascript" src="editor_plugin_src.js" ></script>
<base target="_self" />
</head>
<body>
<?php
$Action = isset($_GET["q"]) ? $_GET["q"] : "none";
if($Action =="none"){
displayUploadForm();
}else if($Action=="upload"){
uploadVariablePicker();
}
?>
</body>
</html>
<?php
// displays the upload form
function displayUploadForm()
{/*
echo '<form action="uploader.php?'.$_SERVER["QUERY_STRING"].'&q=upload" method="post" enctype="multipart/form-data" onsubmit="">'
//.'Variable Name: <br/>'
.'<div id="d_variables">'
.'<table width="80%">'
.'<tr>'
.'<td width="33%">'
.'<label for="type_label">Type Variable</label>'
.'</td>'
.'<td width="33%">'
.'<label for="prefix_label">Prefix</label>'
.'</td>'
.'<td width="33%">'
.'<label for="variables_label">Variables</label>'
.'</td>'
.'</tr>'
.'<tr>'
.'<td>'
.'<select name="type_variables">'
.'<option value="all">All Variables</option>'
.'<option value="system">System Variables</option>'
.'<option value="process">Process Variables</option>'
.'</select> &nbsp;&nbsp;&nbsp;&nbsp;'
.'</td>'
.'<td width="33%">'
.'<select name="prefix">'
.'<option value="quotes">@#</option>'
.'<option value="float">@@</option>'
.'<option value="encoding">@?</option>'
.'</select> &nbsp;&nbsp;&nbsp;&nbsp;'
.'</td>'
.'<td width="33%">'
.'<select name="variables">'
.'<option value="quotes">@@SYS_SYS</option>'
.'<option value="float">@@SYS_LANG</option>'
.'<option value="encoding">@@SYS_SKIN</option>'
.'</select>'
.'</td>'
.'</tr>'
.'</table>'
.'</div>'
.'<br>'
.'<div id="desc_variables">'
.'<table border="1" width="100%">'
.'<tr width="40%">'
.'<td>Result</td>'
.'<td>@#SYS_LANG</td>'
.'</tr>'
.'<tr width="60%">'
.'<td>Description</td>'
.'<td>Description @#SYS_LANG</td>'
.'</tr>'
.'</table>'
.'</div>'
.'<br>'
.'<div id="desc_variables">'
.'<label for="desc_prefix">* @# Replace de value in quotes</label>'
.'</div>'
//.'<br/><input type="text" size="20" name="upload_variable" ID="Text1"/>'
// .'<input type="submit" name="Variable" value="Variable" style="width: 100px;" onclick="document.getElementById(\'progress_div\').style.visibility=\'visible\';"/>'
//.' <div id="progress_div" style="visibility: hidden;"><img src="progress.gif" alt="wait..." style="padding-top: 5px;"></div>'
.'</form>';
*/
}
// uploads the file to the destination path, and returns a link with link path substituted for destination path
function uploadVariablePicker()
{
$StatusMessage = "";
$ActualFileName = "";
$FileObject = $_REQUEST["upload_variable"]; // find data on the file
updateEditorContent(trim($FileObject));
closeWindow();
}
function showPopUp($PopupText)
{
echo "<script type=\"text/javascript\" language=\"javascript\">alert (\"$PopupText\");</script>";
}
function updateEditorContent($serializedHTML)
{
echo "<script type=\"text/javascript\" language=\"javascript\">updateEditorContent(\"".$serializedHTML."\");</script>";
}
function closeWindow()
{
echo '
<script language="javascript" type="text/javascript">
closePluginPopup();
</script>
';
}
?>

View File

@@ -123,8 +123,8 @@ class XmlForm_Field_WYSIWYG_EDITOR extends XmlForm_Field
editor_selector : "tmceEditor",
width : "770",
height : "305",
theme_advanced_buttons1 : "pmSimpleUploader,|,pmVariablePicker,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,cut,copy,paste,|,bullist,numlist,|,outdent,indent,blockquote",
verify_html : false,
theme_advanced_buttons1 : "pmSimpleUploader,|,pmVariablePicker,|,pmGrids,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,|,cut,copy,paste,|,bullist,numlist,|,outdent,indent,blockquote",
theme_advanced_buttons2 : "tablecontrols,|,undo,redo,|,link,unlink,image,|,forecolor,backcolor,|,hr,removeformat,visualaid,|,sub,sup,|,ltr,rtl,|,code",
oninit: function (){
tinyMCE.activeEditor.processID=formProcessID;

View File

@@ -109,9 +109,13 @@ var setVariablePickerJS = function(){
}
}
}
// check wether the document has been already loaded or not,
// whatever the state is this condition ensures that the events are always loaded
if (document.readyState == 'complete'){
// if completed load the functions and events
setVariablePickerJS();
} else {
// if not set the function call in the body onload event
document.body.onload = setVariablePickerJS;
}