Added Markdown editor and Javascript code refactoring

12 files changed, 63 insertions, 251 deletions

diff --git a/app/Template/category/edit.php b/app/Template/category/edit.php
index 78156e6f..7b592689 100644
--- a/app/Template/category/edit.php
+++ b/app/Template/category/edit.php
@@ -13,24 +13,7 @@
     <?= $this->form->text('name', $values, $errors, array('autofocus', 'required', 'maxlength="50"')) ?>
 
     <?= $this->form->label(t('Description'), 'description') ?>
-
-    <div class="form-tabs">
-        <div class="write-area">
-          <?= $this->form->textarea('description', $values, $errors) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-    </div>
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
+    <?= $this->form->textarea('description', $values, $errors, array(), 'markdown-editor') ?>
 
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
diff --git a/app/Template/column/create.php b/app/Template/column/create.php
index 747b1529..2d325f76 100644
--- a/app/Template/column/create.php
+++ b/app/Template/column/create.php
@@ -14,24 +14,7 @@
     <?= $this->form->number('task_limit', $values, $errors) ?>
 
     <?= $this->form->label(t('Description'), 'description') ?>
-
-    <div class="form-tabs">
-        <div class="write-area">
-          <?= $this->form->textarea('description', $values, $errors) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-    </div>
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
+    <?= $this->form->textarea('description', $values, $errors, array(), 'markdown-editor') ?>
 
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
diff --git a/app/Template/column/edit.php b/app/Template/column/edit.php
index 206322cd..412858a9 100644
--- a/app/Template/column/edit.php
+++ b/app/Template/column/edit.php
@@ -16,25 +16,7 @@
     <?= $this->form->number('task_limit', $values, $errors) ?>
 
     <?= $this->form->label(t('Description'), 'description') ?>
-
-    <div class="form-tabs">
-
-        <div class="write-area">
-          <?= $this->form->textarea('description', $values, $errors) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-    </div>
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
+    <?= $this->form->textarea('description', $values, $errors, array(), 'markdown-editor') ?>
 
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
diff --git a/app/Template/comment/create.php b/app/Template/comment/create.php
index 58b4abdf..b6c27ae0 100644
--- a/app/Template/comment/create.php
+++ b/app/Template/comment/create.php
@@ -6,36 +6,21 @@
     <?= $this->form->hidden('task_id', $values) ?>
     <?= $this->form->hidden('user_id', $values) ?>
 
-    <div class="form-tabs">
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-        <div class="write-area">
-            <?= $this->form->textarea(
-                'comment',
-                $values,
-                $errors,
-                array(
-                    'autofocus',
-                    'required',
-                    'placeholder="'.t('Leave a comment').'"',
-                    'data-mention-search-url="'.$this->url->href('UserHelper', 'mention', array('project_id' => $task['project_id'])).'"',
-                ),
-                'comment-textarea'
-            ) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
+    <div class="markdown-editor-small">
+        <?= $this->form->textarea(
+            'comment',
+            $values,
+            $errors,
+            array(
+                'autofocus',
+                'required',
+                'placeholder="'.t('Leave a comment').'"',
+                'data-mention-search-url="'.$this->url->href('UserHelper', 'mention', array('project_id' => $task['project_id'])).'"',
+            ),
+            'markdown-editor'
+        ) ?>
     </div>
 
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
-
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
         <?= t('or') ?>
diff --git a/app/Template/comment/edit.php b/app/Template/comment/edit.php
index ad6f58fb..4036b673 100644
--- a/app/Template/comment/edit.php
+++ b/app/Template/comment/edit.php
@@ -9,25 +9,16 @@
     <?= $this->form->hidden('task_id', $values) ?>
     <?= $this->form->hidden('user_id', $values) ?>
 
-    <div class="form-tabs">
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-        <div class="write-area">
-            <?= $this->form->textarea('comment', $values, $errors, array('autofocus', 'required', 'placeholder="'.t('Leave a comment').'"'), 'comment-textarea') ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
+    <div class="markdown-editor-small">
+        <?= $this->form->textarea(
+            'comment',
+            $values,
+            $errors,
+            array('autofocus', 'required', 'placeholder="'.t('Leave a comment').'"'),
+            'markdown-editor'
+        ) ?>
     </div>
 
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
-
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
         <?= t('or') ?>
diff --git a/app/Template/comments/create.php b/app/Template/comments/create.php
index 87d69491..a638d3b8 100644
--- a/app/Template/comments/create.php
+++ b/app/Template/comments/create.php
@@ -3,31 +3,19 @@
     <?= $this->form->hidden('task_id', $values) ?>
     <?= $this->form->hidden('user_id', $values) ?>
 
-    <div class="form-tabs">
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-        <div class="write-area">
-            <?= $this->form->textarea(
-                'comment',
-                $values,
-                $errors,
-                array(
-                    'required',
-                    'placeholder="'.t('Leave a comment').'"',
-                    'data-mention-search-url="'.$this->url->href('UserHelper', 'mention', array('project_id' => $task['project_id'])).'"',
-                ),
-                'comment-textarea'
-            ) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
+    <div class="markdown-editor-small">
+        <?= $this->form->textarea(
+            'comment',
+            $values,
+            $errors,
+            array(
+                'data-markdown-editor-disable-toolbar="true"',
+                'required',
+                'placeholder="'.t('Leave a comment').'"',
+                'data-mention-search-url="'.$this->url->href('UserHelper', 'mention', array('project_id' => $task['project_id'])).'"',
+            ),
+            'markdown-editor'
+        ) ?>
     </div>
 
     <div class="form-actions">
diff --git a/app/Template/gantt/task_creation.php b/app/Template/gantt/task_creation.php
index ef1298a9..448a808d 100644
--- a/app/Template/gantt/task_creation.php
+++ b/app/Template/gantt/task_creation.php
@@ -12,22 +12,7 @@
         <?= $this->form->text('title', $values, $errors, array('autofocus', 'required', 'maxlength="200"', 'tabindex="1"'), 'form-input-large') ?>
 
         <?= $this->form->label(t('Description'), 'description') ?>
-        <div class="form-tabs">
-            <div class="write-area">
-                <?= $this->form->textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"', 'tabindex="2"')) ?>
-            </div>
-            <div class="preview-area">
-                <div class="markdown"></div>
-            </div>
-            <ul class="form-tabs-nav">
-                <li class="form-tab form-tab-selected">
-                    <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-                </li>
-                <li class="form-tab">
-                    <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-                </li>
-            </ul>
-        </div>
+        <?= $this->form->textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"', 'tabindex="2"'), 'markdown-editor') ?>
 
         <?= $this->render('task/color_picker', array('colors_list' => $colors_list, 'values' => $values)) ?>
     </div>
diff --git a/app/Template/project_edit/description.php b/app/Template/project_edit/description.php
index 666d53e8..e6c42caf 100644
--- a/app/Template/project_edit/description.php
+++ b/app/Template/project_edit/description.php
@@ -11,25 +11,7 @@
     <?= $this->form->csrf() ?>
     <?= $this->form->hidden('id', $values) ?>
     <?= $this->form->hidden('name', $values) ?>
-
-    <?= $this->form->label(t('Description'), 'description') ?>
-    <div class="form-tabs">
-        <div class="write-area">
-          <?= $this->form->textarea('description', $values, $errors) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-    </div>
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
+    <?= $this->form->textarea('description', $values, $errors, array(), 'markdown-editor') ?>
 
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
diff --git a/app/Template/swimlane/create.php b/app/Template/swimlane/create.php
index aa92a930..a9b4374b 100644
--- a/app/Template/swimlane/create.php
+++ b/app/Template/swimlane/create.php
@@ -10,24 +10,7 @@
     <?= $this->form->text('name', $values, $errors, array('autofocus', 'required', 'maxlength="50"')) ?>
 
     <?= $this->form->label(t('Description'), 'description') ?>
-
-    <div class="form-tabs">
-        <div class="write-area">
-          <?= $this->form->textarea('description', $values, $errors) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-    </div>
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
+    <?= $this->form->textarea('description', $values, $errors, array(), 'markdown-editor') ?>
 
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
diff --git a/app/Template/swimlane/edit.php b/app/Template/swimlane/edit.php
index 232570e7..b08099ae 100644
--- a/app/Template/swimlane/edit.php
+++ b/app/Template/swimlane/edit.php
@@ -13,25 +13,7 @@
     <?= $this->form->text('name', $values, $errors, array('autofocus', 'required', 'maxlength="50"')) ?>
 
     <?= $this->form->label(t('Description'), 'description') ?>
-
-    <div class="form-tabs">
-
-        <div class="write-area">
-          <?= $this->form->textarea('description', $values, $errors) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-    </div>
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
+    <?= $this->form->textarea('description', $values, $errors, array(), 'markdown-editor') ?>
 
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
diff --git a/app/Template/task_creation/form.php b/app/Template/task_creation/form.php
index 0af2eb1e..cecba9ef 100644
--- a/app/Template/task_creation/form.php
+++ b/app/Template/task_creation/form.php
@@ -11,32 +11,17 @@
         <?= $this->form->text('title', $values, $errors, array('autofocus', 'required', 'maxlength="200"', 'tabindex="1"'), 'form-input-large') ?>
 
         <?= $this->form->label(t('Description'), 'description') ?>
-
-        <div class="form-tabs">
-            <div class="write-area">
-                <?= $this->form->textarea(
-                    'description',
-                    $values,
-                    $errors,
-                    array(
-                        'placeholder="'.t('Leave a description').'"',
-                        'tabindex="2"',
-                        'data-mention-search-url="'.$this->url->href('UserHelper', 'mention', array('project_id' => $values['project_id'])).'"'
-                    )
-                ) ?>
-            </div>
-            <div class="preview-area">
-                <div class="markdown"></div>
-            </div>
-            <ul class="form-tabs-nav">
-                <li class="form-tab form-tab-selected">
-                    <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-                </li>
-                <li class="form-tab">
-                    <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-                </li>
-            </ul>
-        </div>
+        <?= $this->form->textarea(
+            'description',
+            $values,
+            $errors,
+            array(
+                'placeholder="'.t('Leave a description').'"',
+                'tabindex="2"',
+                'data-mention-search-url="'.$this->url->href('UserHelper', 'mention', array('project_id' => $values['project_id'])).'"'
+            ),
+            'markdown-editor'
+        ) ?>
 
         <?= $this->render('task/color_picker', array('colors_list' => $colors_list, 'values' => $values)) ?>
 
diff --git a/app/Template/task_modification/edit_description.php b/app/Template/task_modification/edit_description.php
index cb74b250..8c149f4f 100644
--- a/app/Template/task_modification/edit_description.php
+++ b/app/Template/task_modification/edit_description.php
@@ -7,34 +7,17 @@
     <?= $this->form->csrf() ?>
     <?= $this->form->hidden('id', $values) ?>
 
-    <div class="form-tabs">
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-        <div class="write-area">
-            <?= $this->form->textarea(
-                'description',
-                $values,
-                $errors,
-                array(
-                    'autofocus',
-                    'placeholder="'.t('Leave a description').'"',
-                    'data-mention-search-url="'.$this->url->href('UserHelper', 'mention', array('project_id' => $task['project_id'])).'"'
-                ),
-                'task-show-description-textarea'
-            ) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
-    </div>
-
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
+    <?= $this->form->textarea(
+        'description',
+        $values,
+        $errors,
+        array(
+            'autofocus',
+            'placeholder="'.t('Leave a description').'"',
+            'data-mention-search-url="'.$this->url->href('UserHelper', 'mention', array('project_id' => $task['project_id'])).'"'
+        ),
+        'markdown-editor'
+    ) ?>
 
     <div class="form-actions">
         <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>