Advances in the PM Grids properties plugin

This commit is contained in:
Gustavo Cruz
2012-12-03 17:51:48 -04:00
parent 083e7edf4d
commit f7bf7be619
12 changed files with 295 additions and 13 deletions

View File

@@ -0,0 +1,66 @@
<!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

@@ -0,0 +1,63 @@
/**
* Name: editor_plugin_src.js (for pmGrids tinyMCE plugin)
**/
(function(){
var strPluginURL;
tinymce.create('tinymce.plugins.pmGridsPlugin', {
init: function(ed, url)
{
strPluginURL = url; // store the URL for future use..
ed.addCommand('mcepmGrids', function() {
pmGrids();
});
ed.addButton('pmGrids', {
title: 'pmGrids',
label : ' @# Grids',
cmd: 'mcepmGrids',
image: url + '/img/grids.png'
});
},
createControl: function(n, cm) {
return null;
},
getPluginURL: function() {
return strPluginURL;
}
});
tinymce.PluginManager.add('pmGrids', tinymce.plugins.pmGridsPlugin);
})();
// this function can get called from the plugin inint (above) or from the callback on advlink/advimg plugins..
// in the latter case, win and type will be set.. In the rist case, we will just update the main editor window
// 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 : '',
width : '600px',
height : '330px',
resizable : "yes",
scrollbars : "no",
overflow : false,
inline : 1, // This parameter only has an effect if you use the inlinepopups plugin!
close_previous : "no"
}, {
window : win,
input : field_name
});
return false;
}
// This function will get called when the uploader is done uploading the file and ready to update
// calling dialog and close the upload popup
// strReturnURL should be the string with the path to the uploaded file
function closePluginPopup(){
tinyMCEPopup.close(); // close popup window
}
function updateEditorContent(serializedHTML){
tinyMCE.activeEditor.execCommand('mceInsertContent', false, serializedHTML);
}

View File

@@ -0,0 +1,63 @@
/**
* Name: editor_plugin_src.js (for pmGrids tinyMCE plugin)
**/
(function(){
var strPluginURL;
tinymce.create('tinymce.plugins.pmGridsPlugin', {
init: function(ed, url)
{
strPluginURL = url; // store the URL for future use..
ed.addCommand('mcepmGrids', function() {
pmGrids();
});
ed.addButton('pmGrids', {
title: 'pmGrids',
label : ' @# Grids',
cmd: 'mcepmGrids',
image: url + '/img/grids.png'
});
},
createControl: function(n, cm) {
return null;
},
getPluginURL: function() {
return strPluginURL;
}
});
tinymce.PluginManager.add('pmGrids', tinymce.plugins.pmGridsPlugin);
})();
// this function can get called from the plugin inint (above) or from the callback on advlink/advimg plugins..
// in the latter case, win and type will be set.. In the rist case, we will just update the main editor window
// 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 : '',
width : '600px',
height : '330px',
resizable : "yes",
scrollbars : "no",
overflow : false,
inline : 1, // This parameter only has an effect if you use the inlinepopups plugin!
close_previous : "no"
}, {
window : win,
input : field_name
});
return false;
}
// This function will get called when the uploader is done uploading the file and ready to update
// calling dialog and close the upload popup
// strReturnURL should be the string with the path to the uploaded file
function closePluginPopup(){
tinyMCEPopup.close(); // close popup window
}
function updateEditorContent(serializedHTML){
tinyMCE.activeEditor.execCommand('mceInsertContent', false, serializedHTML);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 595 B

View File

@@ -0,0 +1,3 @@
tinyMCE.addI18n('en.ccSimpleUploader', {
desc:"Upload File to Server"
});

View File

@@ -0,0 +1,87 @@
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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>
<style type="text/css">
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
</style>
</head>
<body>
<div id="container">
<div id="row">
<div id="left">
Chose a grid
</div>
<div id="middle">
<div id="gridDropdown">
</div>
</div>
</div>
<div id="row">
<div id="left">
Prefix
</div>
<div id="middle">
<div id="gridDropdown">
</div>
</div>
</div>
<div id="row">
<div id="left">
</div>
<div id="middle">
<div id="gridDropdown">
<input type="checkbox"> Border
</div>
</div>
</div>
<div id="row">
<div id="left">
</div>
<div id="middle">
<div id="gridDropdown">
<input type="checkbox"> Headers
</div>
</div>
</div>
</div>
<div id="list-container">
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@@ -3,6 +3,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../tiny_mce_popup.js"></script> <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="editor_plugin_src.js"></script>
</head> </head>

View File

@@ -98,17 +98,17 @@ class XmlForm_Field_WYSIWYG_EDITOR extends XmlForm_Field
tinyMCE.activeEditor.processID =formProcessID; tinyMCE.activeEditor.processID =formProcessID;
}, },
onchange_callback: function(inst) { onchange_callback: function(inst) {
if(inst.isDirty()) { if(inst.isDirty()) {
inst.save(); inst.save();
} }
return true; return true;
}, },
handle_event_callback : function(e) { handle_event_callback : function(e) {
if(this.isDirty()) { if(this.isDirty()) {
this.save(); this.save();
} }
return true; return true;
} }
}); });
'; ';
break; break;
@@ -118,7 +118,7 @@ class XmlForm_Field_WYSIWYG_EDITOR extends XmlForm_Field
var formProcessID = document.getElementById("form[PRO_UID]").value; var formProcessID = document.getElementById("form[PRO_UID]").value;
tinyMCE.init({ tinyMCE.init({
theme : "advanced", theme : "advanced",
plugins : "advhr,advimage,advlink,advlist,autolink,autoresize,autosave,contextmenu,directionality,emotions,example,example_dependency,fullpage,fullscreen,iespell,inlinepopups,insertdatetime,layer,legacyoutput,lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,save,searchreplace,spellchecker,style,tabfocus,table,template,visualblocks,visualchars,wordcount,xhtmlxtras,pmSimpleUploader,pmVariablePicker", plugins : "advhr,advimage,advlink,advlist,autolink,autoresize,autosave,contextmenu,directionality,emotions,example,example_dependency,fullpage,fullscreen,iespell,inlinepopups,insertdatetime,layer,legacyoutput,lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,save,searchreplace,spellchecker,style,tabfocus,table,template,visualblocks,visualchars,wordcount,xhtmlxtras,pmSimpleUploader,pmVariablePicker,pmGrids",
mode : "specific_textareas", mode : "specific_textareas",
editor_selector : "tmceEditor", editor_selector : "tmceEditor",
width : "770", width : "770",

View File

@@ -85,8 +85,7 @@ function editFile(pro_uid, fileName){
position : {x:50,y:50,center:true}, position : {x:50,y:50,center:true},
title : '', title : '',
control : {close:true,resize:false}, control : {close:true,resize:false},
fx : {modal:true}, fx : {shadow:true,modal:true}
fx : {shadow:true,modal:true}
}; };
oPanel.make(); oPanel.make();