dbxe/fusionpbx
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Edit: Customize defaults with Settings, add live preview on Mode and Font Size.

Browse Source
This commit is contained in:
reliberate
2016-02-25 01:19:24 -07:00
parent ed2a209e23
commit dd07c65705
1 changed files with 104 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/edit/index.php
+104 -90
View File
@@ -39,18 +39,26 @@ else {
$language = new text; $language = new text;
$text = $language->get(); $text = $language->get();
//set the directory //set the directory title and mode
$_SESSION["app"]["edit"]["dir"] = $_GET["dir"]; $_SESSION["app"]["edit"]["dir"] = $_GET["dir"];
$title = strtoupper($_GET["dir"]); $title = strtoupper($_GET["dir"]);
unset($mode); unset($mode);
switch ($_GET["dir"]) { switch ($_GET["dir"]) {
case 'xml': $mode['xml'] = 'selected'; break; case 'xml': $mode = 'xml'; break;
case 'provision': $mode['xml'] = 'selected'; break; case 'provision': $mode = 'xml'; break;
case 'php': $mode['php'] = 'selected'; break; case 'php': $mode = 'php'; break;
case 'scripts': $mode['lua'] = 'selected'; break; case 'scripts': $mode = 'lua'; break;
case 'grammar': //use default case 'grammar': //use default
default: $mode['text'] = 'selected'; default: $mode = 'text';
} }
// load editor preferences/defaults
$setting_size = ($_SESSION["editor"]["font_size"]["text"] != '') ? $_SESSION["editor"]["font_size"]["text"] : '12px';
$setting_theme = ($_SESSION["editor"]["theme"]["text"] != '') ? $_SESSION["editor"]["theme"]["text"] : 'cobalt';
$setting_invisibles = ($_SESSION["editor"]["invisibles"]["boolean"] != '') ? $_SESSION["editor"]["invisibles"]["boolean"] : 'false';
$setting_indenting = ($_SESSION["editor"]["indent_guides"]["boolean"] != '') ? $_SESSION["editor"]["indent_guides"]["boolean"] : 'false';
$setting_numbering = ($_SESSION["editor"]["line_numbers"]["boolean"] != '') ? $_SESSION["editor"]["line_numbers"]["boolean"] : 'true';
$setting_preview = ($_SESSION["editor"]["live_preview"]["boolean"] != '') ? $_SESSION["editor"]["live_preview"]["boolean"] : 'true';
?> ?>
<html> <html>
@@ -64,21 +72,17 @@ else {
document.getElementById('editor_source').value = editor.getSession().getValue(); document.getElementById('editor_source').value = editor.getSession().getValue();
return true; return true;
} }
focus_editor(); editor.focus();
return false; return false;
} }
function preview_theme(opt) {
editor.setTheme('ace/theme/' + opt.value);
}
function toggle_option(opt) { function toggle_option(opt) {
switch (opt) { switch (opt) {
case 'numbering': toggle_option_do('showGutter'); break; case 'numbering': toggle_option_do('showLineNumbers'); toggle_option_do('fadeFoldWidgets'); break;
case 'invisibles': toggle_option_do('showInvisibles'); break; case 'invisibles': toggle_option_do('showInvisibles'); break;
case 'indenting': toggle_option_do('displayIndentGuides'); break; case 'indenting': toggle_option_do('displayIndentGuides'); break;
} }
focus_editor(); editor.focus();
} }
function toggle_option_do(opt_name) { function toggle_option_do(opt_name) {
@@ -89,16 +93,12 @@ else {
function toggle_sidebar() { function toggle_sidebar() {
var td_sidebar = document.getElementById('sidebar'); var td_sidebar = document.getElementById('sidebar');
td_sidebar.style.display = (td_sidebar.style.display == '') ? 'none' : ''; td_sidebar.style.display = (td_sidebar.style.display == '') ? 'none' : '';
focus_editor(); editor.focus();
} }
function insert_clip(before, after) { function insert_clip(before, after) {
var selected_text = editor.session.getTextRange(editor.getSelectionRange()); var selected_text = editor.session.getTextRange(editor.getSelectionRange());
editor.insert(before + selected_text + after); editor.insert(before + selected_text + after);
focus_editor();
}
function focus_editor() {
editor.focus(); editor.focus();
} }
</script> </script>
@@ -118,7 +118,6 @@ else {
div#editor { div#editor {
box-shadow: 0 5px 15px #333; box-shadow: 0 5px 15px #333;
} }
</style> </style>
</head> </head>
<body style='padding: 0; margin: 0; overflow: hidden;'> <body style='padding: 0; margin: 0; overflow: hidden;'>
@@ -144,71 +143,89 @@ else {
<td valign='middle' style='padding-left: 6px;'><img src='resources/images/icon_replace.png' title='Show Find/Replace [Ctrl+H]' class='control' onclick="editor.execCommand('replace');"></td> <td valign='middle' style='padding-left: 6px;'><img src='resources/images/icon_replace.png' title='Show Find/Replace [Ctrl+H]' class='control' onclick="editor.execCommand('replace');"></td>
<td valign='middle' style='padding-left: 6px;'><img src='resources/images/icon_goto.png' title='Show Go To Line' class='control' onclick="editor.execCommand('gotoline');"></td> <td valign='middle' style='padding-left: 6px;'><img src='resources/images/icon_goto.png' title='Show Go To Line' class='control' onclick="editor.execCommand('gotoline');"></td>
<td valign='middle' style='padding-left: 10px;'> <td valign='middle' style='padding-left: 10px;'>
<select id='mode' style='height: 23px;' onchange="editor.getSession().setMode('ace/mode/' + this.options[this.selectedIndex].value); focus_editor();"> <select id='mode' style='height: 23px;' onchange="editor.getSession().setMode('ace/mode/' + this.options[this.selectedIndex].value); editor.focus();">
<option value='php' <?=$mode['php']?>>PHP</option> <?php
<option value='css'>CSS</option> $modes['php'] = 'PHP';
<option value='html'>HTML</option> $modes['css'] = 'CSS';
<option value='javascript'>JS</option> $modes['html'] = 'HTML';
<option value='json'>JSON</option> $modes['javascript'] = 'JS';
<option value='ini'>Conf</option> $modes['json'] = 'JSON';
<option value='lua' <?=$mode['lua']?>>Lua</option> $modes['ini'] = 'Conf';
<option value='text' <?=$mode['text']?>>Text</option> $modes['lua'] = 'Lua';
<option value='xml' <?=$mode['xml']?>>XML</option> $modes['text'] = 'Text';
<option value='sql'>SQL</option> $modes['xml'] = 'XML';
$modes['sql'] = 'SQL';
$preview = ($setting_preview == 'true') ? "onmouseover=\"editor.getSession().setMode('ace/mode/' + this.value);\"" : null;
foreach ($modes as $value => $label) {
$selected = ($value == $mode) ? 'selected' : null;
echo "<option value='".$value."' ".$selected." ".$preview.">".$label."</option>\n";
}
?>
</select> </select>
</td> </td>
<td valign='middle' style='padding-left: 4px;'> <td valign='middle' style='padding-left: 4px;'>
<select id='size' style='height: 23px;' onchange="document.getElementById('editor').style.fontSize = this.options[this.selectedIndex].value; focus_editor();"> <select id='size' style='height: 23px;' onchange="document.getElementById('editor').style.fontSize = this.options[this.selectedIndex].value; editor.focus();">
<option value='9px'>9px</option> <?php
<option value='10px'>10px</option> $sizes = explode(',','9px,10px,11px,12px,14px,16px,18px,20px');
<option value='11px'>11px</option> $preview = ($setting_preview == 'true') ? "onmouseover=\"document.getElementById('editor').style.fontSize = this.value;\"" : null;
<option value='12px' selected>12px</option> if (!in_array($setting_size, $sizes)) {
<option value='14px'>14px</option> echo "<option value='".$setting_size."' ".$preview.">".$setting_size."</option>\n";
<option value='16px'>16px</option> echo "<option value='' disabled='disabled'></option>\n";
<option value='18px'>18px</option> }
<option value='20px'>20px</option> foreach ($sizes as $size) {
$selected = ($size == $setting_size) ? 'selected' : null;
echo "<option value='".$size."' ".$selected." ".$preview.">".$size."</option>\n";
}
?>
</select> </select>
</td> </td>
<td valign='middle' style='padding-left: 4px; padding-right: 4px;'> <td valign='middle' style='padding-left: 4px; padding-right: 4px;'>
<select id='theme' style='height: 23px;' onchange="editor.setTheme('ace/theme/' + this.options[this.selectedIndex].value); focus_editor();"> <select id='theme' style='height: 23px;' onchange="editor.setTheme('ace/theme/' + this.options[this.selectedIndex].value); editor.focus();">
<optgroup label="Bright"> <?php
<option value="chrome" onmouseover="preview_theme(this);">Chrome</option> $themes['Bright']['chrome']= 'Chrome';
<option value="clouds" onmouseover="preview_theme(this);">Clouds</option> $themes['Bright']['clouds']= 'Clouds';
<option value="crimson_editor" onmouseover="preview_theme(this);">Crimson Editor</option> $themes['Bright']['crimson_editor']= 'Crimson Editor';
<option value="dawn" onmouseover="preview_theme(this);">Dawn</option> $themes['Bright']['dawn']= 'Dawn';
<option value="dreamweaver" onmouseover="preview_theme(this);">Dreamweaver</option> $themes['Bright']['dreamweaver']= 'Dreamweaver';
<option value="eclipse" onmouseover="preview_theme(this);">Eclipse</option> $themes['Bright']['eclipse']= 'Eclipse';
<option value="github" onmouseover="preview_theme(this);">GitHub</option> $themes['Bright']['github']= 'GitHub';
<option value="iplastic" onmouseover="preview_theme(this);">IPlastic</option> $themes['Bright']['iplastic']= 'IPlastic';
<option value="solarized_light" onmouseover="preview_theme(this);">Solarized Light</option> $themes['Bright']['solarized_light']= 'Solarized Light';
<option value="textmate" onmouseover="preview_theme(this);">TextMate</option> $themes['Bright']['textmate']= 'TextMate';
<option value="tomorrow" onmouseover="preview_theme(this);">Tomorrow</option> $themes['Bright']['tomorrow']= 'Tomorrow';
<option value="xcode" onmouseover="preview_theme(this);">XCode</option> $themes['Bright']['xcode']= 'XCode';
<option value="kuroir" onmouseover="preview_theme(this);">Kuroir</option> $themes['Bright']['kuroir']= 'Kuroir';
<option value="katzenmilch" onmouseover="preview_theme(this);">KatzenMilch</option> $themes['Bright']['katzenmilch']= 'KatzenMilch';
<option value="sqlserver" onmouseover="preview_theme(this);">SQL Server</option> $themes['Bright']['sqlserver']= 'SQL Server';
</optgroup> $themes['Dark']['ambiance']= 'Ambiance';
<optgroup label="Dark"> $themes['Dark']['chaos']= 'Chaos';
<option value="ambiance" onmouseover="preview_theme(this);">Ambiance</option> $themes['Dark']['clouds_midnight']= 'Clouds Midnight';
<option value="chaos" onmouseover="preview_theme(this);">Chaos</option> $themes['Dark']['cobalt']= 'Cobalt';
<option value="clouds_midnight" onmouseover="preview_theme(this);">Clouds Midnight</option> $themes['Dark']['idle_fingers']= 'idle Fingers';
<option value="cobalt" onmouseover="preview_theme(this);" selected>Cobalt</option> $themes['Dark']['kr_theme']= 'krTheme';
<option value="idle_fingers" onmouseover="preview_theme(this);">idle Fingers</option> $themes['Dark']['merbivore']= 'Merbivore';
<option value="kr_theme" onmouseover="preview_theme(this);">krTheme</option> $themes['Dark']['merbivore_soft']= 'Merbivore Soft';
<option value="merbivore" onmouseover="preview_theme(this);">Merbivore</option> $themes['Dark']['mono_industrial']= 'Mono Industrial';
<option value="merbivore_soft" onmouseover="preview_theme(this);">Merbivore Soft</option> $themes['Dark']['monokai']= 'Monokai';
<option value="mono_industrial" onmouseover="preview_theme(this);">Mono Industrial</option> $themes['Dark']['pastel_on_dark']= 'Pastel on dark';
<option value="monokai" onmouseover="preview_theme(this);">Monokai</option> $themes['Dark']['solarized_dark']= 'Solarized Dark';
<option value="pastel_on_dark" onmouseover="preview_theme(this);">Pastel on dark</option> $themes['Dark']['terminal']= 'Terminal';
<option value="solarized_dark" onmouseover="preview_theme(this);">Solarized Dark</option> $themes['Dark']['tomorrow_night']= 'Tomorrow Night';
<option value="terminal" onmouseover="preview_theme(this);">Terminal</option> $themes['Dark']['tomorrow_night_blue']= 'Tomorrow Night Blue';
<option value="tomorrow_night" onmouseover="preview_theme(this);">Tomorrow Night</option> $themes['Dark']['tomorrow_night_bright']= 'Tomorrow Night Bright';
<option value="tomorrow_night_blue" onmouseover="preview_theme(this);">Tomorrow Night Blue</option> $themes['Dark']['tomorrow_night_eighties']= 'Tomorrow Night 80s';
<option value="tomorrow_night_bright" onmouseover="preview_theme(this);">Tomorrow Night Bright</option> $themes['Dark']['twilight']= 'Twilight';
<option value="tomorrow_night_eighties" onmouseover="preview_theme(this);">Tomorrow Night 80s</option> $themes['Dark']['vibrant_ink']= 'Vibrant Ink';
<option value="twilight" onmouseover="preview_theme(this);">Twilight</option> $preview = ($setting_preview == 'true') ? "onmouseover=\"editor.setTheme('ace/theme/' + this.value);\"" : null;
<option value="vibrant_ink" onmouseover="preview_theme(this);">Vibrant Ink</option> foreach ($themes as $optgroup => $theme) {
</optgroup> echo "<optgroup label='".$optgroup."'>\n";
foreach ($theme as $value => $label) {
$selected = (strtolower($label) == strtolower($setting_theme)) ? 'selected' : null;
echo "<option value='".$value."' ".$selected." ".$preview.">".$label."</option>\n";
}
echo "</optgroup>\n";
}
?>
</select> </select>
</td> </td>
</tr> </tr>
@@ -225,25 +242,22 @@ else {
//load ace editor //load ace editor
var editor = ace.edit("editor"); var editor = ace.edit("editor");
editor.setOptions({ editor.setOptions({
<?php mode: 'ace/mode/<?=$mode?>',
foreach ($mode as $lang => $meh) { theme: 'ace/theme/'+document.getElementById('theme').options[document.getElementById('theme').selectedIndex].value,
if ($meh == 'selected') { echo "mode: 'ace/mode/".$lang."',\n"; break; }
}
?>
theme: 'ace/theme/cobalt',
selectionStyle: 'text', selectionStyle: 'text',
cursorStyle: 'smooth', cursorStyle: 'smooth',
showInvisibles: false, showInvisibles: <?=$setting_invisibles?>,
displayIndentGuides: true, displayIndentGuides: <?=$setting_indenting?>,
showLineNumbers: true, showLineNumbers: <?=$setting_numbering?>,
showGutter: true, showGutter: true,
scrollPastEnd: true, scrollPastEnd: true,
fadeFoldWidgets: true, fadeFoldWidgets: <?=$setting_numbering?>,
showPrintMargin: false, showPrintMargin: false,
highlightGutterLine: false, highlightGutterLine: false,
useSoftTabs: false useSoftTabs: false
}); });
focus_editor(); document.getElementById('editor').style.fontSize='<?=$setting_size?>';
editor.focus();
//keyboard shortcut to save file //keyboard shortcut to save file
$(window).keypress(function(event) { $(window).keypress(function(event) {
@@ -264,7 +278,7 @@ else {
}); });
//remove certain keyboard shortcuts //remove certain keyboard shortcuts
editor.commands.bindKey("Ctrl-T", null); editor.commands.bindKey("Ctrl-T", null); //new browser tab
</script> </script>