Skip to content
Browse files

Preparing to add CKEditor for iPad etc.

  • Loading branch information...
1 parent 851f5fc commit 5ccdb7fd9a1daa1699a565b4c59b76ce4f2c1dbb @mitotic committed Sep 14, 2012
Showing with 76 additions and 25 deletions.
  1. +5 −1 graphterm/www/graphterm.css
  2. +54 −17 graphterm/www/graphterm.js
  3. +17 −7 graphterm/www/index.html
View
6 graphterm/www/graphterm.css
@@ -16,6 +16,10 @@ body, pre, .gterm-prewrap {
font-size: 16px;
}
+body.bold {
+ font-weight: bold;
+}
+
/* Body screen styles (with button label font sizes) */
body.smallscreen {
font-size: 12px;
@@ -437,7 +441,7 @@ span.gterm-popupclose {
}
/* Editor style */
-#acearea_content {
+#jseditarea_content {
position: absolute;
top: 40;
left: 0;
View
71 graphterm/www/graphterm.js
@@ -19,6 +19,8 @@ var gSafariIPad = gSafariBrowser && navigator.userAgent.toLowerCase().indexOf('i
var gMobileDisplay = gSafariIPad;
+var gDefaultEditor = gMobileDisplay ? "ckeditor" : "ace";
+
var MAX_LINE_BUFFER = 500;
var MAX_COMMAND_BUFFER = 100;
@@ -1074,7 +1076,7 @@ GTWebSocket.prototype.onmessage = function(evt) {
if (gScrollTop) {
gScrollTop = false;
ScrollTop(0);
- } else if (this.theme == "default") {
+ } else if (!$("body").hasClass("three-d")) {
if (!gSplitScreen)
ScrollScreen(alt_mode);
} else {
@@ -2081,18 +2083,47 @@ function GTCaptureInput() {
return gForm || (gEditing && gParams.controller) || gPopupType;
}
+function GTClearCKEditor() {
+ for (var name in CKEDITOR.instances){
+ var instance = CKEDITOR.instances[name];
+ instance.destroy();
+ }
+}
+function GTResizeCKEditor() {
+ var defaultHeight = 300;
+ var newHeight = window.innerHeight-150;
+ var height = defaultHeight > newHeight ? defaultHeight : newHeight;
+ for (var name in CKEDITOR.instances){
+ var instance = CKEDITOR.instances[name];
+ instance.resize('100%', height);
+ }
+}
+
function GTStartEdit(params, content) {
$("#terminal").hide();
- gEditing = {params: params, content: content};
- if (gEditing.params.editor == "web") {
- $("#pop_editarea_content").val(content);
- popupShow("#pop_editarea", "editarea");
+ var editor = params.editor ? params.editor : gDefaultEditor;
+ gEditing = {params: params, content: content, editor: editor};
+ if (gEditing.editor == "web") {
+ $("#gterm-texteditarea-content").val(content);
+ popupShow("#gterm-texteditarea", "editarea");
+ } else if (gEditing.editor == "ckeditor") {
+ GTClearCKEditor();
+ if ($("#jseditarea_content").length)
+ $("#jseditarea_content").remove();
+ $("#jseditarea_title").text("CKEditor");
+ $('<div name="jseditarea_content" id="jseditarea_content">/div>').appendTo("#jseditarea_container");
+ $("#jseditarea").show();
+ CKEDITOR.config.startupMode = (params.filetype == "html") ? "wysiwyg" : "source";
+ gEditing.ckeditor = $("#jseditarea_content").ckeditor({toolbar: "Basic"});
+ $("#jseditarea_content").ckeditorGet().setData(content);
+ setTimeout(GTResizeCKEditor, 500);
} else {
- if ($("#acearea_content").length)
- $("#acearea_content").remove();
- $('<div name="acearea_content" id="acearea_content">/div>').appendTo("#acearea");
- $("#acearea").show();
- gEditing.ace = ace.edit("acearea_content");
+ if ($("#jseditarea_content").length)
+ $("#jseditarea_content").remove();
+ $("#jseditarea_title").text("Ajax.org Cloud9 Editor");
+ $('<div name="jseditarea_content" id="jseditarea_content">/div>').appendTo("#jseditarea_container");
+ $("#jseditarea").show();
+ gEditing.ace = ace.edit("jseditarea_content");
try {
// Overrride undo manager to broadcast edit deltas
@@ -2126,8 +2157,10 @@ function GTStartEdit(params, content) {
function GTEndEdit(save) {
var newContent;
- if (gEditing.params.editor == "web") {
- newContent = $("#pop_editarea_content").val();
+ if (gEditing.editor == "web") {
+ newContent = $("#gterm-texteditarea-content").val();
+ } else if (gEditing.editor == "ckeditor") {
+ newContent = $("#jseditarea_content").ckeditorGet().getData();
} else {
newContent = gEditing.ace.getSession().getValue();
}
@@ -2142,11 +2175,13 @@ function GTEndEdit(save) {
return false;
}
}
- if (gEditing.params.editor == "web") {
+ if (gEditing.editor == "web") {
popupClose(false);
} else {
- $("#acearea").hide();
- $("#acearea_content").remove();
+ if (gEditing.editor == "ckeditor")
+ GTClearCKEditor();
+ $("#jseditarea").hide();
+ $("#jseditarea_content").remove();
}
gEditing = null;
$("#terminal").show();
@@ -2568,14 +2603,16 @@ $(document).ready(function() {
console.log("Ready");
$(document).attr("title", window.location.pathname.substr(1));
- if (gMobileDisplay)
+ if (gMobileDisplay) {
$("body").addClass("mobilescreen");
+ ToggleFooter();
+ }
if (gSafariIPad)
$("body").addClass("ipadscreen");
setupTerminal();
popupSetup();
- $("#acearea").hide();
+ $("#jseditarea").hide();
$("#session-bufellipsis").hide();
$("#session-findercontainer").hide();
$("#session-widgetcontainer").hide(); // IMPORTANT (else top menu will be invisibly blocked)
View
24 graphterm/www/index.html
@@ -12,6 +12,8 @@
<script type="text/javascript" src="/static/jquery/js-plugins/rangy-core.js"></script>
<script type="text/javascript" src="/static/jquery/js-plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/jquery/js-plugins/jquery.base64.min.js"></script>
+ <script type="text/javascript" src="/static/ckeditor/ckeditor.js" charset="utf-8"></script>
+ <script type="text/javascript" src="/static/ckeditor/adapters/jquery.js"></script>
<script src="/static/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/mode-css.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/mode-html.js" type="text/javascript" charset="utf-8"></script>
@@ -63,7 +65,7 @@
<span id="menubar-label-theme" class="menubar-label">Theme:</span>
<select id="menubar-theme" class="menubar-select" size=1>
<option value="default" selected>default</option>
- <!-- <option value="stars">stars</option> -->
+ <option value="bold">bold</option>
<option value="stars3d">stars3d</option>
</select>
@@ -190,16 +192,24 @@ <h3 class="gtermsplashalt">GraphTerm was developed as part of the Mindmeldr proj
</div> <!-- gtermsplashtext -->
</div> <!-- gtermsplash -->
-<!-- ACE editor -->
-<div id="acearea" class="acearea">
- Ajax.org Cloud9 Editor
- <button id="acearea_button_apply" onclick="GTEndEdit(true);">Save</button>
- <button id="acearea_button_quit" onclick="GTEndEdit(false);">Discard</button>
-</div> <!-- acearea -->
+<!-- ACE/CK editor -->
+<div id="jseditarea" class="jseditarea">
+ <span id="jseditarea_title">Editor</span>
+ <button id="jseditarea_button_apply" onclick="GTEndEdit(true);">Save</button>
+ <button id="jseditarea_button_quit" onclick="GTEndEdit(false);">Discard</button>
+ <div id="jseditarea_container" class="jseditarea_container"></div>
+</div> <!-- jseditarea -->
<!-- popups -->
<div id="gterm-popupmask" class="gterm-popupmask"></div>
+<div id="gterm-texteditarea" class="gterm-popup">
+ <button id="texteditarea_button_apply" onclick="GTEndEdit(true);">Save</button>
+ <button id="texteditarea_button_quit" onclick="GTEndEdit(false);">Discard</button>
+ <br>
+ <textarea name="gterm-texteditarea-content" id="gterm-texteditarea-content" rows="5" cols="60"></textarea>
+</div> <!-- gterm-texteditarea -->
+
<div id="gterm-alertarea" class="gterm-popup gterm-popupshrink">
<span class="gterm-popupclose">&#215;</span>
<p>

0 comments on commit 5ccdb7f

Please sign in to comment.
Something went wrong with that request. Please try again.