Enabling/Disabling markdown editor

This commit is contained in:
Antonin 2016-05-12 16:20:47 +02:00
parent 83e0cae47a
commit f681a6f0e8
9 changed files with 235 additions and 171 deletions

View File

@ -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;
}

141
js/app/adminstuds.js Normal file
View File

@ -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();
});
});

View File

@ -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();
});

View File

@ -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()) {

65
js/mde-wrapper.js Normal file
View File

@ -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;
}

View File

@ -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'])}

View File

View File

@ -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>

View File

@ -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}