Link, bold, italic, strikeout, bullet, numbered list buttons.

diff --git a/html/_css/editor.css b/html/_css/editor.css
index 86c0494..7da99dd 100644 (file)
--- a/html/_css/editor.css
+++ b/html/_css/editor.css
@@ -1,5 +1,5 @@
 /* Stylesheet for COCANWIKI editor, derived from EWM.
- * $Id: editor.css,v 1.4 2004/10/22 15:56:11 rich Exp $
+ * $Id: editor.css,v 1.5 2004/10/26 17:17:08 rich Exp $
  */
 
 body {
@@ -106,3 +106,21 @@ table#edit_conflict th.our {
 table#edit_conflict td.our {
   background-color: #cfc;
 }
+
+/* Edit buttons. */
+div.edit_buttons {
+  font-size: 70%;
+}
+
+div.edit_buttons a {
+  margin-right: 3px;
+  padding: 3px;
+  border: 2px outset #dcdad5;
+  text-decoration: none;
+  color: #000;
+  background-color: #dcdad5;
+}
+
+div.edit_buttons span.spacer {
+  margin-left: 1em;
+}
\ No newline at end of file

diff --git a/html/_js/editor.js b/html/_js/editor.js
index ad33c6e..7be9b42 100644 (file)
--- a/html/_js/editor.js
+++ b/html/_js/editor.js
@@ -1,9 +1,9 @@
 /* Javascript for OCAMLWIKI.
  * Copyright (C) 2004 Merjis Ltd.
- * $Id: editor.js,v 1.1 2004/09/07 10:14:09 rich Exp $
+ * $Id: editor.js,v 1.2 2004/10/26 17:17:08 rich Exp $
  */
 
-var delay = 1000               // Delay in milliseconds before updating.
+var delay = 1000;              // Delay in milliseconds before updating.
 
 function update_preview (content_id, preview_id)
 {
@@ -43,3 +43,157 @@ function update_preview_now (content_id, preview_id)
       preview.innerHTML = xhtml;
     }
 }
+
+// Initialise the edit_buttons for a section.
+// We do this in Javascript so that non-Javascript users won't see
+// any buttons (they wouldn't be functional for them anyway).
+function init_edit_buttons (div_id, content_id, preview_id)
+{
+  // HTML for the edit buttons.
+  var args = "'" + content_id + "', '" + preview_id + "'";
+  var edit_buttons_html =
+    "<a href=\"#\" onmousedown=\"link(" + args + "); return false;\" title=\"Select some text and click this to make a link\"><u>Link</u></a>" +
+    "<span class=\"spacer\"></span>" +
+    "<a href=\"#\" onmousedown=\"bold(" + args + "); return false;\" title=\"Select some text and click this to make it bold\"><strong>Bold</strong></a>" +
+    "<a href=\"#\" onmousedown=\"italic(" + args + "); return false;\" title=\"Select some text and click this to make it italic\"><em>Italic</em></a>" +
+    "<a href=\"#\" onmousedown=\"strikeout(" + args + "); return false;\" title=\"Select some text and click this to strike through it\"><s>Strike</s></a>" +
+    "<span class=\"spacer\"></span>" +
+    "<a href=\"#\" onmousedown=\"bullet(" + args + "); return false;\" title=\"Select lines of text and click this to make it a bullet list\"><big>&#x2219;&#8212;</big></a>" +
+    "<a href=\"#\" onmousedown=\"numbered(" + args + "); return false;\" title=\"Select lines of text and click this to make it a numbered list\">1&#8212;</a>" +
+    "<br/>"
+    ;
+  var div = document.getElementById (div_id);
+  div.innerHTML = edit_buttons_html;
+}
+
+function replace_selection (content_id, fn)
+{
+  var textarea = document.getElementById (content_id);
+
+  if (textarea.setSelectionRange) { // Mozilla
+    var start = textarea.selectionStart;
+    var end = textarea.selectionEnd;
+    if (start != end) {
+      var text = textarea.value.substring (start, end);
+      var replacement = fn (text);
+      textarea.value = textarea.value.substring (0, start) +
+       replacement + textarea.value.substring (end);
+    }
+  } else if (document.selection) { // IE
+    var range = document.selection.createRange ();
+    if (range.parentElement () == textarea && range.text != "") {
+      var text = range.text;
+      var len = text.length;
+
+      // IE6 bug workaround: If the end of the selection is the end of
+      // a line, then we must remember to append a \n character after
+      // doing the replacement.  Note the incredible lengths we have to
+      // go to here because IE is a piece of shit.
+      var dup = range.duplicate ();
+      dup.moveEnd ("character", 2);
+      append =
+       dup.text.substring (dup.text.length-3, dup.text.length-1) == "\r\n";
+
+      // Replace \r\n with just \n.
+      text = text.replace ("\r\n", "\n");
+
+      /*
+      var wtf;
+      for (i = 0; i < len; ++i) {
+       wtf += "," + text.charCodeAt (i);
+       if ((i % 32) == 0) wtf += "\n";
+      }
+      alert (wtf);
+      */
+
+      // IE's selections often include a trailing space or carriage
+      // return.  Ignore this whitespace when calling the replacement
+      // function.
+      var replacement;
+      if ((ar = text.match (/(\s+)$/))) {
+       var ws = ar[1];
+       text = text.substring (0, len - ws.length);
+       replacement = fn (text);
+       replacement = replacement + ws;
+      } else
+       replacement = fn (range.text);
+
+      // See IE bug workaround above.
+      if (append) replacement += "\n";
+
+      range.text = replacement;
+    }
+  }
+}
+
+function link (content_id, preview_id)
+{
+  var fn = function (text) {
+    if (ar = text.match (/^\[\[(.*)\]\]$/))
+      return ar[1];
+    else
+      return "[[" + text + "]]";
+  };
+  replace_selection (content_id, fn);
+  update_preview_now (content_id, preview_id);
+}
+
+function bold (content_id, preview_id)
+{
+  var fn = function (text) {
+    if (ar = text.match (/^<b>(.*)<\/b>$/))
+      return ar[1];
+    else
+      return "<b>" + text + "</b>";
+  };
+  replace_selection (content_id, fn);
+  update_preview_now (content_id, preview_id);
+}
+
+function italic (content_id, preview_id)
+{
+  var fn = function (text) {
+    if (ar = text.match (/^<i>(.*)<\/i>$/))
+      return ar[1];
+    else
+      return "<i>" + text + "</i>";
+  };
+  replace_selection (content_id, fn);
+  update_preview_now (content_id, preview_id);
+}
+
+function strikeout (content_id, preview_id)
+{
+  var fn = function (text) {
+    if (ar = text.match (/^<s>(.*)<\/s>$/))
+      return ar[1];
+    else
+      return "<s>" + text + "</s>";
+  };
+  replace_selection (content_id, fn);
+  update_preview_now (content_id, preview_id);
+}
+
+function bullet (content_id, preview_id)
+{
+  var fn = function (text) {
+    if (text.match (/^\*/))
+      return text.replace (/^\* /gm, "");
+    else
+      return "* " + text.replace (/\n/g, "\n* ");
+  };
+  replace_selection (content_id, fn);
+  update_preview_now (content_id, preview_id);
+}
+
+function numbered (content_id, preview_id)
+{
+  var fn = function (text) {
+    if (text.match (/^#/))
+      return text.replace (/^# /gm, "");
+    else
+      return "# " + text.replace (/\n/g, "\n# ");
+  };
+  replace_selection (content_id, fn);
+  update_preview_now (content_id, preview_id);
+}

diff --git a/templates/edit.html b/templates/edit.html
index cdae222..98edc7d 100644 (file)
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -11,7 +11,7 @@
 
 <h1>::title_html:: [edit]</h1>
 
-<form method="post" action="">
+<form method="post" action="" name="f">
 <input type="hidden" name="id" value="::id::"/>
 <input type="hidden" name="pt_type" value="::pt_type::"/>
 <input type="hidden" name="pt_value" value="::pt_value_html_tag::"/>
@@ -60,11 +60,13 @@ Redirect to (if given, page contents are ignored):
 <a href="/_static/markup.html" target="_blank" class="help_link">(Editing&nbsp;help)</a>
 ::end::
 </div>
-<input class="heading" name="sectionname_::ordering::" value="::sectionname_html_tag::" size="40"/>
-<textarea id="content_::ordering::" name="content_::ordering::" rows="12" cols="80" onkeypress="update_preview ('content_::ordering::', 'preview_::ordering::')">::content_html_textarea::</textarea>
+<input class="heading" name="sectionname_::ordering::" value="::sectionname_html_tag::" size="40"/><br/>
+<div class="edit_buttons" id="edit_buttons_::ordering::"></div>
+<textarea id="content_::ordering::" name="content_::ordering::" rows="14" cols="80" onkeypress="update_preview ('content_::ordering::', 'preview_::ordering::')">::content_html_textarea::</textarea>
 <div class="preview" id="preview_::ordering::"><noscript>(If you had Javascript, you would see a preview of your edits here)</noscript></div>
 <script type="text/javascript"><!--
 update_preview_now ('content_::ordering::', 'preview_::ordering::');
+init_edit_buttons ('edit_buttons_::ordering::', 'content_::ordering::', 'preview_::ordering::');
 //--></script>
 <abbr class="css_id" title="Assign a stylesheet ID to this block of text to enable further styling">CSS id</abbr>: <input class="css_id" name="divname_::ordering::" value="::divname_html_tag::" size="8"/>