From f681a6f0e89136f70408eaf9785d890959cb9569 Mon Sep 17 00:00:00 2001
From: Antonin <zepcome@gmail.com>
Date: Thu, 12 May 2016 16:20:47 +0200
Subject: [PATCH] Enabling/Disabling markdown editor

---
 css/style.css                     |  10 +-
 js/app/adminstuds.js              | 141 +++++++++++++++++++++++++++
 js/app/create_poll.js             |  10 +-
 js/core.js                        | 153 ------------------------------
 js/mde-wrapper.js                 |  65 +++++++++++++
 tpl/create_poll.tpl               |  14 ++-
 tpl/part/description_markdown.tpl |   0
 tpl/part/poll_info.tpl            |   4 +
 tpl/studs.tpl                     |   9 +-
 9 files changed, 235 insertions(+), 171 deletions(-)
 create mode 100644 js/app/adminstuds.js
 create mode 100644 js/mde-wrapper.js
 create mode 100644 tpl/part/description_markdown.tpl

diff --git a/css/style.css b/css/style.css
index ec39402..5207d21 100644
--- a/css/style.css
+++ b/css/style.css
@@ -140,14 +140,14 @@ header .lead {
 }
 
 /** Description in markdown **/
-.CodeMirror, .CodeMirror-scroll {
+.form-group  .CodeMirror, .form-group  .CodeMirror-scroll {
     min-height: 200px;
 }
-.CodeMirror {
-    background: #f5f5f5 none repeat scroll 0 0;
-    overflow: hidden;
-    position: relative;
+#description-form  .CodeMirror {
+    background-color: #f5f5f5;
 }
+
+
 .editor-toolbar {
     background-color: #eee;
 }
diff --git a/js/app/adminstuds.js b/js/app/adminstuds.js
new file mode 100644
index 0000000..9b4bcd3
--- /dev/null
+++ b/js/app/adminstuds.js
@@ -0,0 +1,141 @@
+$(document).ready(function() {
+
+    wrapper = new MDEWrapper($('.js-desc textarea')[0], $('#rich-editor-button'), $('#simple-editor-button'));
+    var firstOpening = true;
+
+
+    $('#title-form .btn-edit').on('click', function() {
+        $('#title-form h3').hide();
+        $('.js-title').removeClass('hidden');
+        $('.js-title input').focus();
+        return false;
+    });
+
+    $('#title-form .btn-cancel').on('click', function() {
+        $('#title-form h3').show();
+        $('#title-form .js-title').addClass('hidden');
+        $('#title-form .btn-edit').focus();
+        return false;
+    });
+
+    $('#name-form .btn-edit').on('click', function() {
+        $('#name-form p').hide();
+        $('.js-name').removeClass('hidden');
+        $('.js-name input').focus();
+        return false;
+    });
+
+    $('#name-form .btn-cancel').on('click', function() {
+        $('#name-form p').show();
+        $('#name-form .js-name').addClass('hidden');
+        $('#name-form .btn-edit').focus();
+        return false;
+    });
+
+    $('#email-form .btn-edit').on('click', function() {
+        $('#email-form p').hide();
+        $('#email-form .js-email').removeClass('hidden');
+        $('.js-email input').focus();
+        return false;
+    });
+
+    $('#email-form .btn-cancel').on('click', function() {
+        $('#email-form p').show();
+        $('#email-form .js-email').addClass('hidden');
+        $('#email-form .btn-edit').focus();
+        return false;
+    });
+
+    $('#description-form .btn-edit').on('click', function() {
+        $('#description-form .well').hide();
+        $('#description-form .control-label .btn-edit').hide();
+        $('#description-form .js-desc').removeClass('hidden');
+        $('.js-desc textarea').focus();
+        if (firstOpening) {
+            firstOpening = false;
+            wrapper.enable();
+        }
+        return false;
+    });
+
+    $('#description-form .btn-cancel').on('click', function() {
+        $('#description-form .well').show();
+        $('#description-form .control-label .btn-edit').show();
+        $('#description-form .js-desc').addClass('hidden');
+        $('.js-desc .btn-edit').focus();
+        return false;
+    });
+
+    $('#poll-rules-form .btn-edit').on('click', function() {
+        $('#poll-rules-form p').hide();
+        $('#poll-rules-form .js-poll-rules').removeClass('hidden');
+        $('.js-poll-rules select').focus();
+        return false;
+    });
+
+    $('#poll-rules-form .btn-cancel').on('click', function() {
+        $('#poll-rules-form p').show();
+        $('#poll-rules-form .js-poll-rules').addClass('hidden');
+        $('.js-poll-rules .btn-edit').focus();
+        return false;
+    });
+
+    $('#poll-hidden-form .btn-edit').on('click', function() {
+        $('#poll-hidden-form p').hide();
+        $('#poll-hidden-form .js-poll-hidden').removeClass('hidden');
+        $('.js-poll-hidden input[type=checkbox]').focus();
+        return false;
+    });
+
+    $('#poll-hidden-form .btn-cancel').on('click', function() {
+        $('#poll-hidden-form p').show();
+        $('#poll-hidden-form .js-poll-hidden').addClass('hidden');
+        $('.js-poll-hidden .btn-edit').focus();
+        return false;
+    });
+
+    $('#expiration-form .btn-edit').on('click', function() {
+        $('#expiration-form p').hide();
+        $('.js-expiration').removeClass('hidden');
+        $('.js-expiration input').focus();
+        return false;
+    });
+
+    $('#expiration-form .btn-cancel').on('click', function() {
+        $('#expiration-form p').show();
+        $('#expiration-form .js-expiration').addClass('hidden');
+        $('#expiration-form .btn-edit').focus();
+        return false;
+    });
+
+
+    $('#password-form .btn-edit').on('click', function() {
+        $('#password-form p').hide();
+        $('#password-form .js-password').removeClass('hidden');
+        $('#password').focus();
+        return false;
+    });
+
+    $('#password-form .btn-cancel').on('click', function() {
+        $('#password-form p').show();
+        $('#password-form .js-password').addClass('hidden');
+        $('.js-password .btn-edit').focus();
+        return false;
+    });
+
+    // Hiding other field when the admin wants to remove the password protection
+    var removePassword = $('#removePassword');
+    removePassword.on('click', function() {
+        var removeButton =  removePassword.siblings('button');
+        if (removePassword.is(":checked")) {
+            $('#password_information').addClass('hidden');
+            removeButton.removeClass('hidden');
+        } else {
+            $('#password_information').removeClass('hidden');
+            removeButton.addClass('hidden');
+        }
+        removeButton.focus();
+    });
+
+
+});
\ No newline at end of file
diff --git a/js/app/create_poll.js b/js/app/create_poll.js
index f375da0..ffa7995 100644
--- a/js/app/create_poll.js
+++ b/js/app/create_poll.js
@@ -90,13 +90,7 @@ $(document).ready(function () {
         document.getElementById("cookie-warning").setAttribute("style", "");
     }
 
-
-    // Markdown for description
-    var simplemde = new SimpleMDE({
-        element: $('#poll_comments')[0],
-        forceSync: true,
-        status: false,
-        previewRender: window.myPreviewRender
-    });
+    var wrapper = new MDEWrapper($('#poll_comments')[0], $('#rich-editor-button'), $('#simple-editor-button'));
+    wrapper.enable();
 
 });
\ No newline at end of file
diff --git a/js/core.js b/js/core.js
index 7feee23..5653d56 100644
--- a/js/core.js
+++ b/js/core.js
@@ -1,159 +1,6 @@
 $(document).ready(function() {
 
     window.lang = $('html').attr('lang');
-    var simplemde;
-
-    /**
-     *  adminstuds.php
-     **/
-
-    $('#title-form .btn-edit').on('click', function() {
-        $('#title-form h3').hide();
-        $('.js-title').removeClass('hidden');
-        $('.js-title input').focus();
-        return false;
-    });
-
-    $('#title-form .btn-cancel').on('click', function() {
-        $('#title-form h3').show();
-        $('#title-form .js-title').addClass('hidden');
-        $('#title-form .btn-edit').focus();
-        return false;
-    });
-
-    $('#name-form .btn-edit').on('click', function() {
-        $('#name-form p').hide();
-        $('.js-name').removeClass('hidden');
-        $('.js-name input').focus();
-        return false;
-    });
-
-    $('#name-form .btn-cancel').on('click', function() {
-        $('#name-form p').show();
-        $('#name-form .js-name').addClass('hidden');
-        $('#name-form .btn-edit').focus();
-        return false;
-    });
-
-    $('#email-form .btn-edit').on('click', function() {
-        $('#email-form p').hide();
-        $('#email-form .js-email').removeClass('hidden');
-        $('.js-email input').focus();
-        return false;
-    });
-
-    $('#email-form .btn-cancel').on('click', function() {
-        $('#email-form p').show();
-        $('#email-form .js-email').addClass('hidden');
-        $('#email-form .btn-edit').focus();
-        return false;
-    });
-
-    window.myPreviewRender = function (text) {
-        text = text.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
-            return '&#'+i.charCodeAt(0)+';';
-        });
-        text = SimpleMDE.prototype.markdown(text);
-        text = text.replace(/ /g, '&nbsp;');
-
-        return text;
-    };
-
-    $('#description-form .btn-edit').on('click', function() {
-        $('#description-form .well').hide();
-        $('#description-form .control-label .btn-edit').hide();
-        $('#description-form .js-desc').removeClass('hidden');
-        $('.js-desc textarea').focus();
-        simplemde = new SimpleMDE({
-            element: $('.js-desc textarea')[0],
-            forceSync: true,
-            status: false,
-            previewRender: window.myPreviewRender
-        });
-
-        return false;
-    });
-
-    $('#description-form .btn-cancel').on('click', function() {
-        $('#description-form .well').show();
-        $('#description-form .control-label .btn-edit').show();
-        $('#description-form .js-desc').addClass('hidden');
-        $('.js-desc .btn-edit').focus();
-        simplemde.toTextArea();
-        simplemde = null;
-        return false;
-    });
-
-    $('#poll-rules-form .btn-edit').on('click', function() {
-        $('#poll-rules-form p').hide();
-        $('#poll-rules-form .js-poll-rules').removeClass('hidden');
-        $('.js-poll-rules select').focus();
-        return false;
-    });
-
-    $('#poll-rules-form .btn-cancel').on('click', function() {
-        $('#poll-rules-form p').show();
-        $('#poll-rules-form .js-poll-rules').addClass('hidden');
-        $('.js-poll-rules .btn-edit').focus();
-        return false;
-    });
-
-    $('#poll-hidden-form .btn-edit').on('click', function() {
-        $('#poll-hidden-form p').hide();
-        $('#poll-hidden-form .js-poll-hidden').removeClass('hidden');
-        $('.js-poll-hidden input[type=checkbox]').focus();
-        return false;
-    });
-
-    $('#poll-hidden-form .btn-cancel').on('click', function() {
-        $('#poll-hidden-form p').show();
-        $('#poll-hidden-form .js-poll-hidden').addClass('hidden');
-        $('.js-poll-hidden .btn-edit').focus();
-        return false;
-    });
-
-    $('#expiration-form .btn-edit').on('click', function() {
-        $('#expiration-form p').hide();
-        $('.js-expiration').removeClass('hidden');
-        $('.js-expiration input').focus();
-        return false;
-    });
-
-    $('#expiration-form .btn-cancel').on('click', function() {
-        $('#expiration-form p').show();
-        $('#expiration-form .js-expiration').addClass('hidden');
-        $('#expiration-form .btn-edit').focus();
-        return false;
-    });
-
-
-    $('#password-form .btn-edit').on('click', function() {
-        $('#password-form p').hide();
-        $('#password-form .js-password').removeClass('hidden');
-        $('#password').focus();
-        return false;
-    });
-
-    $('#password-form .btn-cancel').on('click', function() {
-        $('#password-form p').show();
-        $('#password-form .js-password').addClass('hidden');
-        $('.js-password .btn-edit').focus();
-        return false;
-    });
-
-    // Hiding other field when the admin wants to remove the password protection
-    var removePassword = $('#removePassword');
-    removePassword.on('click', function() {
-        var removeButton =  removePassword.siblings('button');
-        if (removePassword.is(":checked")) {
-            $('#password_information').addClass('hidden');
-            removeButton.removeClass('hidden');
-        } else {
-            $('#password_information').removeClass('hidden');
-            removeButton.addClass('hidden');
-        }
-        removeButton.focus();
-    });
 
     // Horizontal scroll buttons
     if($('.results').width() > $('.container').width()) {
diff --git a/js/mde-wrapper.js b/js/mde-wrapper.js
new file mode 100644
index 0000000..1153c88
--- /dev/null
+++ b/js/mde-wrapper.js
@@ -0,0 +1,65 @@
+function myPreviewRender (text) {
+    text = text.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
+        return '&#'+i.charCodeAt(0)+';';
+    });
+    text = SimpleMDE.prototype.markdown(text);
+    text = text.replace(/ /g, '&nbsp;');
+
+    return text;
+};
+
+function MDEWrapper(textarea, enableButton, disableButton) {
+    this.element = textarea;
+    this.enableButton = enableButton;
+    this.disableButton = disableButton;
+    this.simplemde = null;
+
+    var wrapper = this;
+
+    if (this.enableButton) {
+        this.enableButton.on('click', function() {wrapper.enable()});
+    }
+    if (this.disableButton) {
+        this.disableButton.on('click', function() {wrapper.disable()});
+    }
+}
+
+MDEWrapper.prototype.enable = function() {
+    console.log("enable ")
+    var wrapper = this;
+    if (this.simplemde == null) {
+        console.log("go");
+        this.simplemde = new SimpleMDE({
+            element: wrapper.element,
+            forceSync: true,
+            status: true,
+            previewRender: myPreviewRender,
+            spellChecker: false
+        });
+        if (this.enableButton) {
+            this.enableButton.addClass('active');
+        }
+        if (this.disableButton) {
+            this.disableButton.removeClass('active');
+        }
+    }
+}
+
+MDEWrapper.prototype.disable = function() {
+    console.log("disable");
+    if (this.simplemde != null) {
+        console.log("go");
+        this.simplemde.toTextArea();
+        this.simplemde = null;
+        if (this.disableButton) {
+            this.disableButton.addClass('active');
+        }
+        if (this.enableButton) {
+            this.enableButton.removeClass('active');
+        }
+    }
+}
+
+MDEWrapper.prototype.isEnabled = function() {
+    return this.simplemde != null;
+}
\ No newline at end of file
diff --git a/tpl/create_poll.tpl b/tpl/create_poll.tpl
index c4512d3..5793317 100644
--- a/tpl/create_poll.tpl
+++ b/tpl/create_poll.tpl
@@ -2,9 +2,11 @@
 
 {block name="header"}
     <script src="{"js/simplemde.min.js"|resource}" type="text/javascript"></script>
+    <script src="{"js/mde-wrapper.js"|resource}" type="text/javascript"></script>
     <script src="{"js/app/create_poll.js"|resource}" type="text/javascript"></script>
     <link rel="stylesheet" href="{"css/app/create_poll.css"|resource}">
     <link rel="stylesheet" href="{"css/simplemde.min.css"|resource}">
+
 {/block}
 
 {block name=main}
@@ -63,9 +65,15 @@
                     <label for="poll_comments" class="col-sm-4 control-label">{__('Generic', 'Description')}</label>
 
                     <div class="col-sm-8">
-                        <textarea id="poll_comments" name="description"
-                                  class="form-control" {$errors['description']['aria']}
-                                  rows="5">{$poll_description|escape}</textarea>
+                        <div class="btn-group" role="group" aria-label="...">
+                            <button type="button" id="rich-editor-button" class="btn btn-default btn-xs active">Editeur riche</button>
+                            <button type="button" id="simple-editor-button" class="btn btn-default btn-xs">Editeur simple</button>
+                        </div>
+                        <div>
+                            <textarea id="poll_comments" name="description"
+                                      class="form-control" {$errors['description']['aria']}
+                                      rows="5">{$poll_description|escape}</textarea>
+                        </div>
                     </div>
                 </div>
                 {if !empty($errors['description']['msg'])}
diff --git a/tpl/part/description_markdown.tpl b/tpl/part/description_markdown.tpl
new file mode 100644
index 0000000..e69de29
diff --git a/tpl/part/poll_info.tpl b/tpl/part/poll_info.tpl
index 5203372..a43576e 100644
--- a/tpl/part/poll_info.tpl
+++ b/tpl/part/poll_info.tpl
@@ -79,6 +79,10 @@
                     {if $admin && !$expired}
                         <div class="hidden js-desc">
                             <label class="sr-only" for="newdescription">{__('Generic', 'Description')}</label>
+                            <div class="btn-group" role="group" aria-label="...">
+                                <button type="button" id="rich-editor-button" class="btn btn-default btn-xs active">Editeur riche</button>
+                                <button type="button" id="simple-editor-button" class="btn btn-default btn-xs">Editeur simple</button>
+                            </div>
                             <textarea class="form-control" id="newdescription" name="description" rows="2" cols="40">{$poll->description|html}</textarea>
                             <button type="submit" id="btn-new-desc" name="update_poll_info" value="description" class="btn btn-sm btn-success" title="{__('PollInfo', 'Save the description')}"><span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Save')}</span></button>
                             <button class="btn btn-default btn-sm btn-cancel" title="{__('PollInfo', 'Cancel the description edit')}"><span class="glyphicon glyphicon-remove"></span><span class="sr-only">{__('Generic', 'Cancel')}</span></button>
diff --git a/tpl/studs.tpl b/tpl/studs.tpl
index fe5dc03..5dad660 100644
--- a/tpl/studs.tpl
+++ b/tpl/studs.tpl
@@ -4,10 +4,15 @@
     <script src="{"js/jquery-ui.min.js"|resource}" type="text/javascript"></script>
     <script src="{"js/Chart.min.js"|resource}" type="text/javascript"></script>
     <script src="{"js/Chart.StackedBar.js"|resource}" type="text/javascript"></script>
-    <script src="{"js/simplemde.min.js"|resource}" type="text/javascript"></script>
     <script src="{"js/app/studs.js"|resource}" type="text/javascript"></script>
     <link rel="stylesheet" href="{'css/jquery-ui.min.css'|resource}">
-    <link rel="stylesheet" href="{'css/simplemde.min.css'|resource}">
+
+    {if $admin}
+        <script src="{"js/simplemde.min.js"|resource}" type="text/javascript"></script>
+        <script src="{"js/mde-wrapper.js"|resource}" type="text/javascript"></script>
+        <script src="{"js/app/adminstuds.js"|resource}" type="text/javascript"></script>
+        <link rel="stylesheet" href="{'css/simplemde.min.css'|resource}">
+    {/if}
 
 {/block}