From eed0b357aa7365bee22ada7d752fc7032139bae8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20Espeche?= <michael.espeche@gmail.com>
Date: Thu, 3 Jul 2014 08:57:14 +0200
Subject: [PATCH] Add code editor on textarea

---
 .../backOffice/default/message-edit.html      | 55 +++++++++++++------
 1 file changed, 39 insertions(+), 16 deletions(-)

diff --git a/templates/backOffice/default/message-edit.html b/templates/backOffice/default/message-edit.html
index 1e6adc0ae..290242fa3 100644
--- a/templates/backOffice/default/message-edit.html
+++ b/templates/backOffice/default/message-edit.html
@@ -116,7 +116,7 @@
 				                                {form_field form=$form field='html_template_file_name'}
 				                                <div class="form-group {if $error}has-error{/if}">
 				                                    <label for="{$label_attr.for}" class="control-label">{$label}{if $required} <span class="required">*</span>{/if} : </label>
-			                                        <select data-toggle-textarea="html-message-content" id="{$label_attr.for}" name="{$name}" {if $required}required="required"{/if} title="{$label}" class="textarea-toggle form-control">
+			                                        <select data-toggle-textarea="thelia_message_modification[html_message]" id="{$label_attr.for}" name="{$name}" {if $required}required="required"{/if} title="{$label}" class="textarea-toggle form-control">
 			                                            <option value="">{intl l='Use HTML message defined below'}</option>
 	                                                    {foreach $html_template_list as $template}
 	                                                        <option value="{$template}" {if $template == $value}selected="selected"{/if}>{$template}</option>
@@ -132,11 +132,12 @@
 											<div class="col-md-12">
 												{form_field form=$form field='html_message'}
 												<div class="form-group {if $error}has-error{/if}">
-												    <label for="html-message-content" class="control-label">
+												    <label for="{$label_attr.for}" class="control-label">
 												    	{$label}{if $required} <span class="required">*</span>{/if} :
 												      <span class="label-help-block">{intl l="The mailing template in HTML format."}</span>
 												    </label>
-												    <textarea {$disable_html} {if $required}required="required"{/if} name="{$name}" id="html-message-content" rows="10" class="fixedfont form-control">{$value}</textarea>
+												    <textarea {$disable_html} {if $required}required="required"{/if} name="{$name}" rows="10" class="fixedfont form-control">{$value}</textarea>
+                                                    <div id="{$name}" style="height: 500px;">{$value}</div>
 												</div>
 												{/form_field}
 											</div>
@@ -167,7 +168,7 @@
 			                                    {form_field form=$form field='text_template_file_name'}
 			                                    <div class="form-group {if $error}has-error{/if}">
 			                                        <label for="{$label_attr.for}" class="control-label">{$label}{if $required} <span class="required">*</span>{/if} : </label>
-			                                        <select data-toggle-textarea="text-message-content" id="{$label_attr.for}" name="{$name}" {if $required}required="required"{/if} title="{$label}" class="textarea-toggle form-control">
+			                                        <select data-toggle-textarea="thelia_message_modification[text_message]" id="{$label_attr.for}" name="{$name}" {if $required}required="required"{/if} title="{$label}" class="textarea-toggle form-control">
 			                                            <option value="">{intl l='Use Text message defined below'}</option>
 	                                                    {foreach $text_template_list as $template}
 	                                                        <option value="{$template}" {if $template == $value}selected="selected"{/if}>{$template}</option>
@@ -183,11 +184,12 @@
 	                                        <div class="col-md-12">
 				                                {form_field form=$form field='text_message'}
 				                                <div class="form-group {if $error}has-error{/if}">
-				                                    <label for="text-message-content" class="control-label">
+				                                    <label for="{$label_attr.for}" class="control-label">
 				                                    	{$label}{if $required} <span class="required">*</span>{/if} :
 				                                      <span class="label-help-block">{intl l="The mailing template in text-only format."}</span>
 				                                    </label>
-				                                    <textarea {$disable_text} id="text-message-content" {if $required}required="required"{/if} name="{$name}" rows="10" class="fixedfont form-control">{$value}</textarea>
+				                                    <textarea {$disable_text} {if $required}required="required"{/if} name="{$name}" rows="10" class="fixedfont form-control">{$value}</textarea>
+                                                    <div id="{$name}" style="height: 500px;">{$value}</div>
 				                                </div>
 				                                {/form_field}
 			                                </div>
@@ -224,18 +226,39 @@
 {/block}
 
 {block name="javascript-initialization"}
+<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
 <script>
-	(function($) {
-	   $('select.textarea-toggle').change(function(ev) {
-		   if ($(this).val() != '') {
-			   $('#' + $(this).data('toggle-textarea')).addClass("disabled").prop('readonly', true);
-		   }
-		   else {
-               $('#' + $(this).data('toggle-textarea')).removeClass('disabled').prop('readonly', false);
-		   }
-	   });
+    (function($) {
 
-	 })(jQuery);
+        var editor;
+
+        $('select.textarea-toggle').change(function(ev) {
+            if ($(this).val() != '') {
+                editor = ace.edit($(this).data('toggle-textarea'));
+                editor.setReadOnly(true);
+            }
+            else {
+                editor = ace.edit($(this).data('toggle-textarea'));
+                editor.setReadOnly(true);
+            }
+        });
+
+        var elems = ["thelia_message_modification[html_message]", "thelia_message_modification[text_message]"]
+        $.each(elems, function(index, value){
+            editor = ace.edit(value);
+            var textarea = $('textarea[name="' + value + '"]').hide();
+
+            editor.setTheme("ace/theme/monokai");
+            editor.getSession().setMode("ace/mode/smarty");
+
+            editor.getSession().on("change", function () {
+                textarea.val(editor.getSession().getValue());
+            });
+
+            textarea.val(editor.getSession().getValue());
+        });
+
+    })(jQuery);
 </script>
 {/block}