- jQuery'fied GoogieSpell 4.0 + some changes in compose

program/js/app.js

@@ -903,6 +903,7 @@ function rcube_webmail()
         }
         else if (this.env.spellcheck && this.env.spellcheck.spellCheck && this.spellcheck_ready) {
           this.env.spellcheck.spellCheck();
+          this.set_spellcheck_state('checking');
         }
         break;
 
@@ -2112,7 +2113,7 @@ function rcube_webmail()
   this.stop_spellchecking = function()
     {
     if (this.env.spellcheck && !this.spellcheck_ready) {
-      exec_event(this.env.spellcheck.check_link, 'click');
+      $(this.env.spellcheck.spell_span).trigger('click');
       this.set_spellcheck_state('ready');
       }
     };
@@ -2122,16 +2123,15 @@ function rcube_webmail()
     if (this.env.spellcheck) {
       // stop spellchecking process
       if (!vis)
-        this.stop_spellchecking();
+	this.stop_spellchecking();
 
-      this.env.spellcheck.check_link.style.visibility = vis ? 'visible' : 'hidden';
-      this.env.spellcheck.switch_lan_pic.style.visibility = vis ? 'visible' : 'hidden';
+      $(this.env.spellcheck.spell_container).css('visibility', vis ? 'visible' : 'hidden');
       }
     };
 
   this.set_spellcheck_state = function(s)
     {
-    this.spellcheck_ready = (s=='check_spelling' || s=='spell_check' || s=='ready');
+    this.spellcheck_ready = (s == 'ready' || s == 'no_error_found');
     this.enable_command('spellcheck', this.spellcheck_ready);
     };
 

program/js/common.js

@@ -634,20 +634,3 @@ if (bw.ie)
     return o;
     }
   }
-
-
-// Fire event on specified element
-function exec_event(element,event)
-{  
-  if (document.createEventObject) {
-    // dispatch for IE  
-    var evt = document.createEventObject();
-    return element.fireEvent('on'+event,evt)
-  }
-  else {  
-    // dispatch for firefox + others  
-    var evt = document.createEvent("HTMLEvents");
-    evt.initEvent(event, true, true); // event type,bubbling,cancelable
-    return !element.dispatchEvent(evt);
-   }
-}

program/steps/mail/compose.inc

@@ -433,6 +433,7 @@ function rcmail_compose_body($attrib)
       "googie.lang_no_error_found = \"%s\";\n".
       "googie.setLanguages(%s);\n".
       "googie.setCurrentLanguage('%s');\n".
+      "googie.setSpellContainer('spellcheck-control');\n".
       "googie.decorateTextarea('%s');\n".
       "%s.set_env('spellcheck', googie);",
       $RCMAIL->comm_path,
@@ -834,23 +835,26 @@ function rcmail_editor_selector($attrib)
 {
   global $CONFIG, $MESSAGE, $compose_mode;
 
-  $choices = array(
-    'html'  => 'htmltoggle',
-    'plain' => 'plaintoggle'
-  );
-
   // determine whether HTML or plain text should be checked
   $useHtml = $CONFIG['htmleditor'] ? true : false;
 
   if ($compose_mode)
     $useHtml = ($useHtml && $MESSAGE->has_html_part());
 
-  $editorid = empty($attrib['editorid']) ? 'rcmComposeMessage' : $attrib['editorid'];
+  if (empty($attrib['editorid']))
+    $attrib['editorid'] = 'rcmComposeMessage';
+
+  if (empty($attrib['name']))
+    $attrib['name'] = 'editorSelect';
+    
+    $attrib['onchange'] = "return rcmail_toggle_editor(this.value=='html', '".$attrib['editorid']."', '_is_html')";
+
+  $select = new html_select($attrib);
+
+  $select->add(Q(rcube_label('htmltoggle')), 'html');
+  $select->add(Q(rcube_label('plaintoggle')), 'plain');
 
-  $selector = '';
-  $chosenvalue = $useHtml ? 'html' : 'plain';
-  $radio = new html_radiobutton(array('name' => '_editorSelect',
-    'onclick' => "return rcmail_toggle_editor(this.value=='html', '$editorid', '_is_html')"));
+  return $select->show($useHtml ? 'html' : 'plain');
 
   foreach ($choices as $value => $text)
   {

skins/default/common.css

@@ -286,11 +286,6 @@ a.button-logout
   background-image: url(images/listheader_aqua.gif);
 }
 
-.radios-left label
-{
-  padding-left: 0.3em;
-}
-
 /***** common table settings ******/
 
 table.records-table thead tr td

skins/default/googiespell.css

@@ -12,6 +12,20 @@
   visibility: hidden;
 }
 
+.googie_edit_layer {
+  border: 1px solid #666666;
+  background-color: #ffffff;
+  padding: 1px 4px;
+  margin: 1px 0px;
+  font-size: 9pt;
+  font-family: "Courier New", Courier, monospace;
+}
+
+.googie_edit_layer span {
+  font-size: 9pt;
+  font-family: "Courier New", Courier, monospace;
+}
+
 .googie_list {
   width: 100%;
   margin: 0;
@@ -62,34 +76,33 @@
   cursor: pointer;
 }
 
-.googie_resume_editing,
-.googie_check_spelling_link {
+.googie_check_spelling_link {  
   color: #CC0000;
   font-size: 11px;
   text-decoration: none;
   cursor: pointer;
 }
 
-.googie_resume_editing:hover,
 .googie_check_spelling_link:hover {
   text-decoration: underline;
 }
 
-.googie_resume_editing {
-  color: green;
-}
-
 .googie_no_style {
   text-decoration: none;
 }
 
-.googie_check_spelling_ok {
+.googie_check_spelling_ok, 
+.googie_resume_editing {
   color: green;
   font-size: 11px;
-  text-decoration: underline;
   cursor: pointer;
 }
 
+.googie_check_spelling_ok:hover,
+.googie_resume_editing:hover {
+  text-decoration: underline;
+}
+
 .googie_lang_3d_click img {
   vertical-align: middle;
   border-top: 1px solid #555;

skins/default/mail.css

@@ -19,11 +19,13 @@
   padding-right: 10px;
 }
 
-#messagetoolbar select
+#messagetoolbar select,
+#compose-container select
 {
   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #333333;
+  height: 21px;
 }
 
 #messagetoolbar select.mboxlist
@@ -913,6 +915,7 @@ div.message-htmlpart div.rcmBody
 #receipt-selector
 {
   padding-left: 30px;
+  white-space: nowrap;
 }
 
 #compose-container
@@ -928,13 +931,25 @@ div.message-htmlpart div.rcmBody
   height: expression((parseInt(document.documentElement.clientHeight)-120)+'px');
 }
 
+#spellcheck-control
+{
+  text-align: right;
+  padding-top: 3px;
+}
+
+#editor-select
+{
+  float: left;
+}
+
 #compose-div
 {
   position: absolute;
-  top: 110px;
-  bottom: 40px;
+  top: 130px;
+  bottom: 30px;
   width: 100%;
   vertical-align: top;
+  padding-top: 2px;
 }
 
 #compose-headers

skins/default/templates/compose.html

@@ -66,24 +66,26 @@
 	    </tr><tr>
 		<td class="title"><label for="compose-subject"><roundcube:label name="subject" /></label></td>
 		<td><roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="6" /></td>
+	    </tr><tr>
+		<td class="title"><roundcube:label name="editortype" /></td>
+		<td>
+		    <div id="editor-select"><roundcube:object name="editorSelector" editorid="compose-body" tabindex="7" /></div>
+		    <div id="spellcheck-control"></div>
+		</td>
 	    </tr>
 	</tbody>
 	</table>
     </div>
     <div id="compose-div">
-	<roundcube:object name="composeBody" id="compose-body" form="form" cols="70" rows="20" tabindex="7" />
+	<roundcube:object name="composeBody" id="compose-body" form="form" cols="70" rows="20" tabindex="8" />
 	<table border="0" cellspacing="0" summary="" style="width:100%; margin-top: 5px;"><tbody>
 	    <tr>
 		<td style="white-space: nowrap">
 		    <roundcube:button type="input" command="send" class="button mainaction" label="sendmessage" tabindex="8" />
 		    <roundcube:button type="input" command="list" class="button" label="cancel" tabindex="9" />
 		</td>
-		<td style="text-align:center; white-space: nowrap">
-		    <label><roundcube:label name="savesentmessagein" />: <roundcube:object name="storetarget" maxlength="30" /></label>
-		</td>
-		<td style="text-align:right; white-space:nowrap">
-		    <roundcube:label name="editortype" />:&nbsp;
-		    <span class="radios-left"><roundcube:object name="editorSelector" editorid="compose-body" tabindex="10" /></span>
+		<td style="text-align:right; white-space: nowrap">
+		    <label><roundcube:label name="savesentmessagein" />: <roundcube:object name="storetarget" maxlength="30" tabindex="10" /></label>
 		</td>
 	    </tr>
 	</tbody></table>