Commit 9b4b707e authored by Sebastian Castro's avatar Sebastian Castro

Use Ace editor as code editor

parent 5640444a
parameters:
app.version: 2.0.5
\ No newline at end of file
app.version: 2.0.6
\ No newline at end of file
......@@ -29,18 +29,9 @@ class ConfigurationMapElementFormAdmin extends AbstractAdmin
<p>Pour afficher la valeur d'un champ de votre formulaire (voir liste des champs ci-arpès) utilisez une double accolades <b>{{ nom_de_mon_champ }}</b>. Vous pouvez également choisir de formatter votre champ avec un filtre en utilisant le symbole <b>|</b> suivi du nom du filtre. Par example, pour afficher un champ en majuscule on pourra faire <b>{{ nom_de_mon_champ|upper }}</b>. Des filtres spéciaux pour gogocarto ont été créés, ils permettent d'afficher simplement certains type de champ. Par example, pour un champ de description longue, on pourra utiliser <b>{{ nom_de_mon_champ_description_longue|gogo_textarea(truncate = 300) }}</b>. Cela coupera la description aux environs de 300 caractères et affichera un petit bouton pour afficher la description entière.<p>
<p>Consultez la liste des <a href='https://mozilla.github.io/nunjucks/templating.html#builtin-filters'>filtres nunjucks ici</a>. La liste des filtres de gogocarto n'est pas encore documentée</p>"])
->add('elementFormFieldsJson', 'hidden', array('attr' => ['class' => 'gogo-form-fields']))
->add('infobar.headerTemplate', 'sonata_simple_formatter_type', array(
'required' => false,
'format' => 'markdown',
'attr' => ['rows' => '3', 'class' => 'header-template'],
'label' => 'En tête de la fiche (header)'
))
->add('infobar.bodyTemplate', 'sonata_simple_formatter_type', array(
'required' => false,
'format' => 'markdown',
'attr' => ['rows' => '20', 'class' => 'body-template'],
'label' => 'Corps de la fiche (body)'
))
->add('infobar.headerTemplate', 'text', array('label' => 'En tête de la fiche (header)', 'attr' => ['class' => 'gogo-code-editor', 'format' => 'twig', 'height' => '200'], 'required' => false))
->add('infobar.bodyTemplate', 'text', array('label' => 'Corps de la fiche (body)', 'attr' => ['class' => 'gogo-code-editor', 'data-id' => 'body-template', 'format' => 'twig', 'height' => '500'], 'required' => false))
->add('infobar.width', 'number', array('label' => "Largeur de la fiche détail (en pixels, par défaut : 540)", 'required' => false))
->end()
->with("Masquer l'email de contact en la remplacant par un bouton \"Envoyer un email\"",
......
......@@ -66,12 +66,12 @@ class ConfigurationStyleAdmin extends AbstractAdmin
->end()
->tab('Custom Style')
->with('Entrez du code CSS qui sera chargé sur toutes les pages publiques')
->add('customCSS', 'textarea', array('label' => 'Custom CSS', 'attr' => ['rows' => '20'], 'required' => false))
->add('customCSS', 'text', array('label' => 'Custom CSS', 'attr' => ['class' => 'gogo-code-editor', 'format' => 'css', 'height' => '500'], 'required' => false))
->end()
->end()
->tab('Custom Javascript')
->with('Entrez du code Javascript qui sera chargé sur toutes les pages publiques')
->add('customJavascript', 'textarea', array('label' => 'Custom Javascript', 'attr' => ['rows' => '20'], 'required' => false))
->add('customJavascript', 'text', array('label' => 'Custom Javascript', 'attr' => ['class' => 'gogo-code-editor', 'format' => 'javascript', 'height' => '500'], 'required' => false))
->end()
->end()
;
......
{% set format = attr.format|default('javascript') %}
{% set height = attr.height|default('400') %}
<textarea id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" data-id="{{ attr['data-id']|default('') }}">{{ form.vars.value }}</textarea>
<pre id="editor{{ form.vars.id }}" class="ace-editor" style="height: {{ height }}px;"></pre>
<script src="{{ asset('assets/js/ace/ace.js') }}"></script>
{% if format != 'javascript' %}
<script src="{{ asset('assets/js/ace/mode-' ~ format ~ '.js') }}"></script>
{% endif %}
<script src="{{ asset('assets/js/ace/theme-monokai.js') }}"></script>
<script>
var editor{{ form.vars.id }} = ace.edit("editor{{ form.vars.id }}", {
mode: "ace/mode/{{ format }}",
theme: "ace/theme/monokai",
showPrintMargin: false
});
var textarea{{ form.vars.id }} = $('#{{ form.vars.id }}').hide();
textarea{{ form.vars.id }}.change(function() {
editor{{ form.vars.id }}.getSession().setValue(textarea{{ form.vars.id }}.val());
})
editor{{ form.vars.id }}.getSession().setValue(textarea{{ form.vars.id }}.val());
editor{{ form.vars.id }}.getSession().on('change', function(){
textarea{{ form.vars.id }}.val(editor{{ form.vars.id }}.getSession().getValue());
});
</script>
......@@ -27,6 +27,8 @@
{% include '@BiopenAdmin/core_custom/custom-fields/icon-picker.html.twig' %}
{% elseif attr_class == "gogo-api-list" %}
{% include '@BiopenAdmin/core_custom/custom-fields/api-list.html.twig' %}
{% elseif attr_class == "gogo-code-editor" %}
{% include '@BiopenAdmin/core_custom/custom-fields/ace-code-editor.html.twig' %}
{% else %}
{% set attr = attr|merge({'class': attr_class ~ ' form-control'}) %}
{{ parent() }}
......
......@@ -78,6 +78,6 @@
$('td.value').each(function() {
template += $(this).text() + '\n';
})
$('textarea.body-template').text(template);
$('textarea[data-id="body-template"]').text(template).change();
}
</script>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
ace.define("ace/theme/monokai",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-monokai",t.cssText=".ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}.ace-monokai .ace_print-margin {width: 1px;background: #555651}.ace-monokai {background-color: #272822;color: #F8F8F2}.ace-monokai .ace_cursor {color: #F8F8F0}.ace-monokai .ace_marker-layer .ace_selection {background: #49483E}.ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}.ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}.ace-monokai .ace_marker-layer .ace_active-line {background: #202020}.ace-monokai .ace_gutter-active-line {background-color: #272727}.ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}.ace-monokai .ace_invisible {color: #52524d}.ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #F92672}.ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}.ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #AE81FF}.ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}.ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #AE81FF}.ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}.ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}.ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,.ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,.ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}.ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}.ace-monokai .ace_string {color: #E6DB74}.ace-monokai .ace_comment {color: #75715E}.ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
ace.require(["ace/theme/monokai"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment