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 ec394026..5207d215 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 00000000..9b4bcd3c
--- /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 f375da09..ffa79951 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 7feee23a..5653d56c 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, ' ');
-
- 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 00000000..1153c880
--- /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, ' ');
+
+ 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 c4512d3a..57933177 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 00000000..e69de29b
diff --git a/tpl/part/poll_info.tpl b/tpl/part/poll_info.tpl
index 52033728..a43576e7 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 fe5dc038..5dad660f 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}
--
GitLab