Enabling/Disabling markdown editor
This commit is contained in:
parent
83e0cae47a
commit
f681a6f0e8
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
||||
});
|
|
@ -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();
|
||||
|
||||
});
|
153
js/core.js
153
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()) {
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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'])}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
||||
|
|
Loading…
Reference in New Issue